small ui stuff

components/comment.js

@@ -106,8 +106,6 @@ export default function Comment ({ item, children, replyOpen, includeParent, cac
 }
 
 export function CommentSkeleton ({ skeletonChildren }) {
-  const comments = skeletonChildren > 0 ? new Array(skeletonChildren).fill(null) : []
-
   return (
     <div className={styles.comment}>
       <div className={`${itemStyles.item} ${itemStyles.skeleton} ${styles.item} ${styles.skeleton}`}>
@@ -127,10 +125,8 @@ export function CommentSkeleton ({ skeletonChildren }) {
           <div className={`${itemStyles.other} ${styles.reply} clouds`} />
         </div>
         <div className={`${styles.comments} ml-sm-1 ml-md-3`}>
-          {comments
+          {skeletonChildren
-            ? comments.map((_, i) => (
+            ? <CommentSkeleton skeletonChildren={skeletonChildren - 1} />
-              <CommentSkeleton key={i} skeletonChildren={skeletonChildren - 1} />
-              ))
             : null}
         </div>
       </div>

components/comments.js

@@ -8,11 +8,7 @@ export default function Comments ({ comments, ...props }) {
 }
 
 export function CommentsSkeleton () {
-  const comments = new Array(1).fill(null)
+  return <CommentSkeleton skeletonChildren={7} />
-
-  return comments.map((_, i) => (
-    <CommentSkeleton key={i} skeletonChildren={2} />
-  ))
 }
 
 export function CommentsQuery ({ query, ...props }) {

components/header.js

@@ -4,12 +4,13 @@ import Nav from 'react-bootstrap/Nav'
 import Link from 'next/link'
 import styles from './header.module.css'
 import { useRouter } from 'next/router'
-import { Container, NavDropdown } from 'react-bootstrap'
+import { Button, Container, NavDropdown } from 'react-bootstrap'
 import Price from './price'
 
 export default function Header () {
   const [session, loading] = useSession()
   const router = useRouter()
+  const path = router.asPath.split('?')[0]
 
   const Corner = () => {
     if (loading) {
@@ -18,15 +19,25 @@ export default function Header () {
 
     if (session) {
       return (
-        <NavDropdown title={`@${session.user.name}`} alignRight>
+        <div className='d-flex align-items-center'>
-          <Link href={'/' + session.user.name} passHref>
+          <NavDropdown title={`@${session.user.name}`} alignRight>
-            <NavDropdown.Item>profile</NavDropdown.Item>
+            <Link href={'/' + session.user.name} passHref>
-          </Link>
+              <NavDropdown.Item>profile</NavDropdown.Item>
-          <NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item>
+            </Link>
-        </NavDropdown>
+            <Link href='/fund' passHref>
+              <NavDropdown.Item className='text-success'>fund [0,0]</NavDropdown.Item>
+            </Link>
+            <NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item>
+          </NavDropdown>
+          <Nav.Item>
+            <Link href='/fund' passHref>
+              <Nav.Link className='text-success pl-0'>[0,0]</Nav.Link>
+            </Link>
+          </Nav.Item>
+        </div>
       )
     } else {
-      return <Nav.Link href='/login' onClick={signIn}>login</Nav.Link>
+      return path !== '/login' && <Button href='/login' onClick={signIn}>login</Button>
     }
   }
 
@@ -34,7 +45,7 @@ export default function Header () {
     <>
       <Container className='px-sm-0'>
         <Navbar className={styles.navbar}>
-          <Nav className='w-100 justify-content-between flex-wrap align-items-center' activeKey={router.asPath.split('?')[0]}>
+          <Nav className='w-100 justify-content-between flex-wrap align-items-center' activeKey={path}>
             <Link href='/' passHref>
               <Navbar.Brand className={`${styles.brand} mr-2 d-none d-sm-block`}>STACKER NEWS</Navbar.Brand>
             </Link>

components/upvote.module.css

@@ -1,6 +1,5 @@
 .upvote {
     fill: grey;
-    min-width: fit-content;
     user-select: none;
 }
 

fragments/comments.js

@@ -43,6 +43,48 @@ export const COMMENTS = gql`
                         ...CommentFields
                         comments {
                           ...CommentFields
+                          comments {
+                            ...CommentFields
+                            comments {
+                              ...CommentFields
+                              comments {
+                                ...CommentFields
+                                comments {
+                                  ...CommentFields
+                                  comments {
+                                    ...CommentFields
+                                    comments {
+                                      ...CommentFields
+                                      comments {
+                                        ...CommentFields
+                                        comments {
+                                          ...CommentFields
+                                          comments {
+                                            ...CommentFields
+                                            comments {
+                                              ...CommentFields
+                                              comments {
+                                                ...CommentFields
+                                                comments {
+                                                  ...CommentFields
+                                                  comments {
+                                                    ...CommentFields
+                                                    comments {
+                                                      ...CommentFields
+                                                    }
+                                                  }
+                                                }
+                                              }
+                                            }
+                                          }
+                                        }
+                                      }
+                                    }
+                                  }
+                                }
+                              }
+                            }
+                          }
                         }
                       }
                     }

package.json

@@ -17,6 +17,7 @@
     "ln-service": "^51.7.0",
     "next": "10.0.9",
     "next-auth": "^3.13.3",
+    "qrcode.react": "^1.0.1",
     "react": "17.0.1",
     "react-bootstrap": "^1.5.2",
     "react-dom": "17.0.1",

pages/fund.js

@@ -0,0 +1,9 @@
+import Layout from '../components/layout'
+
+export default function Fund () {
+  return (
+    <Layout>
+      <div>fund</div>
+    </Layout>
+  )
+}

pages/items/[id].js

@@ -8,6 +8,7 @@ import { COMMENTS } from '../../fragments/comments'
 import { ITEM_FIELDS } from '../../fragments/items'
 import { gql, useQuery } from '@apollo/client'
 import styles from '../../styles/item.module.css'
+import Head from 'next/head'
 
 export async function getServerSideProps ({ params: { id } }) {
   return {
@@ -63,6 +64,9 @@ function LoadItem ({ query }) {
         ? <Comment item={item} replyOpen includeParent noComments />
         : (
           <>
+            <Head>
+              <title>{item.title} \ stacker news</title>
+            </Head>
             <Item item={item}>
               {item.text && <Text>{item.text}</Text>}
               <Reply parentId={item.id} />

styles/globals.scss

@@ -52,6 +52,15 @@ $container-max-widths: (
   src: url(/Lightningvolt-xoqm.ttf);
 }
 
+body {
+  background-image: linear-gradient(180deg, #f5f5f5, #f5f5f5, white);
+  background-attachment:fixed;
+  min-height: 100vh;
+  height: 100%;
+  z-index: -2;
+  position: relative;
+}
+
 .form-label {
   font-size: 92%;
   font-weight: bold;

styles/post.module.css

@@ -7,6 +7,8 @@
     padding: 0;
     top: 0;
     z-index: -1;
+    padding-right: 15px;
+    padding-left: 15px
 }
 
 .post {

yarn.lock

@@ -4259,7 +4259,7 @@ prop-types-extra@^1.1.0:
     react-is "^16.3.2"
     warning "^4.0.0"
 
-prop-types@15.7.2, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -4346,6 +4346,20 @@ pushdata-bitcoin@1.0.1, pushdata-bitcoin@^1.0.1:
   dependencies:
     bitcoin-ops "^1.3.0"
 
+qr.js@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
+
+qrcode.react@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-1.0.1.tgz#2834bb50e5e275ffe5af6906eff15391fe9e38a5"
+  integrity sha512-8d3Tackk8IRLXTo67Y+c1rpaiXjoz/Dd2HpcMdW//62/x8J1Nbho14Kh8x974t9prsLHN6XqVgcnRiBGFptQmg==
+  dependencies:
+    loose-envify "^1.4.0"
+    prop-types "^15.6.0"
+    qr.js "0.0.0"
+
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"