working again!

acao · Jul 26, 2022 · 2c89d08 · 2c89d08
1 parent 96b0832
commit 2c89d08
Show file tree

Hide file tree

Showing 36 changed files with 284 additions and 474 deletions.
diff --git a/packages/example/src/@ownerId/index.page.tsx b/packages/example/src/@ownerId/index.page.tsx
@@ -7,7 +7,7 @@ import {
   OwnerIdPageQuery,
   OwnerIdPageQuery$variables,
 } from './__generated__/OwnerIdPageQuery.graphql'
-import { parseMarkdown } from '~/lib/marked'
+import { parseMarkdown } from '~/lib/service/marked'
 import PaginatedOwnerRepoList from '~/components/repos/PaginatedOwnerRepoList'
 
 interface Props {

diff --git a/packages/example/src/components/Comment.tsx b/packages/example/src/components/Comment.tsx
@@ -28,11 +28,14 @@ export const Comment = ({ comment }: { comment: CommentData$key }) => {
   return (
     <div className="flex flex-row flex-grow">
       <div className="flex flex-col flex-grow p-6">
-        <div className="">
-          <Avatar width={'w-8'} user={data.author} /> | Created: {data.createdAt}
+        <div className="flex flex-row items-center">
+          <Avatar width={'w-8'} user={data.author} />{' '}
+          <span className="display-inl items-center self-center">
+            commented at: {data.createdAt}
+          </span>
         </div>
         <div
-          className="prose prose-m"
+          className="prose prose-m markdown-body dark:bg-dark"
           dangerouslySetInnerHTML={{ __html: data.bodyHTML }}
         />
       </div>

diff --git a/packages/example/src/components/ItemCard.tsx b/packages/example/src/components/ItemCard.tsx
@@ -2,15 +2,15 @@ import React, { PropsWithChildren } from 'react'
 
 export const ItemCard: React.FC<PropsWithChildren> = ({ children }) => {
   return (
-    <div className="border-t-1 border-#eee pl-1 pt-2 pb-2 hover:bg-white hover:text-dark">
+    <div className="border-t-1 border-light pl-1 pr-1 pt-2 pb-2 hover:bg-light hover:text-dark transition-all duration-300 ">
        {children}
     </div>
   )
 }
 
 export const Header: React.FC<PropsWithChildren> = ({ children }) => {
   return (
-    <h3 className="underline transition-colors hover:text-gray-500 text-sm">
+    <h3 className="underline transition-colors text-sm pb-1 pt1 hover:text-1.20rem">
       {children}
     </h3>
   )

diff --git a/packages/example/src/components/Label.tsx b/packages/example/src/components/Label.tsx
@@ -15,9 +15,9 @@ const Label: React.FC<LabelProps> = ({ name, color, size }) => {
   }
   return (
     <span
-      className={`p-1 inline-flex m-1 drop-shadow-md dark:color-black dark:drop-shadow-md:grayscale-9 text-${
+      className={`p-1 inline-flex m-1 drop-shadow-md hover:text-.9rem hover:p-1.05 dark:color-black dark:drop-shadow-md:grayscale-9 text-${
         size ?? 'xs'
-      } `}
+      }`}
       style={{
         backgroundColor: color?.startsWith('#') ? color : `#${color}`,
         borderRadius: '4px',

diff --git a/packages/example/src/components/Labels.tsx b/packages/example/src/components/Labels.tsx
@@ -9,11 +9,11 @@ interface Props {
 const Labels: React.FC<Props> = ({ labels, size }) => {
   if (!labels) return <></>
   return (
-    <>
+    <span className="transition-all duration-300">
       {labels.map((label) => (
         <Label {...label} size={size}  key={label.name} />
       ))}
-    </>
+    </span>
   )
 }
 

diff --git a/packages/example/src/components/issues/Issue.tsx b/packages/example/src/components/issues/Issue.tsx
@@ -10,36 +10,35 @@ interface Props {
   nameWithOwner: string
 }
 
-// Simple component that renders the issue using GraphQL fragment.
-const IssueComponent: React.FC<Props> = ({ issue, nameWithOwner }) => {
-  const data = useFragment(
-    graphql`
-      fragment Issue_issue on Issue {
+
+const query = graphql`
+fragment Issue_issue on Issue {
+    id
+    number
+    title
+    titleHTML
+    author {
+      login
+    }
+    createdAt
+    updatedAt
+    url
+    comments {
+      count: totalCount
+    }
+    labels(first: 10) {
+      nodes {
         id
-        number
-        title
-        
-        titleHTML
-        author {
-          login
-          
-        }
-        createdAt
-        url
-        comments {
-          count: totalCount
-        }
-        labels(first: 10) {
-          nodes {
-            id
-            name
-            color
-          }
-        }
+        name
+        color
       }
-    `,
-    issue
-  )
+    }
+  }
+`
+
+// Simple component that renders the issue using GraphQL fragment.
+const IssueComponent: React.FC<Props> = ({ issue, nameWithOwner }) => {
+  const data = useFragment(query, issue)
 
   return (
     <ItemCard.ItemCard>
@@ -50,7 +49,7 @@ const IssueComponent: React.FC<Props> = ({ issue, nameWithOwner }) => {
         />
       </ItemCard.Header>
       <ItemCard.Body>
-        by <LoginLink login={data.author?.login} /> on {new Date(data.createdAt).toLocaleString()}
+        by <LoginLink login={data.author?.login} /> on {new Date(data.createdAt).toLocaleString()} | {data.comments.count} Comments
       </ItemCard.Body>
       <ItemCard.Footer>
         <Labels labels={data.labels?.nodes} />

diff --git a/packages/example/src/components/issues/IssueCommentList.tsx b/packages/example/src/components/issues/IssueCommentList.tsx
@@ -31,14 +31,15 @@ export const IssueCommentList = ({
     query,
     issue
   )
+  const comments = data?.comments
   return (
     <div className="flex flex-col">
       <ul className="list-none list-outside">
-        {(data.comments.edges ?? [])
+        {(comments.edges ?? [])
           .map(
             (edge) =>
               edge?.node && (
-                <li key={edge?.node?.url || edge.node.id}>
+                <li key={edge.node.id}>
                   <Suspense fallback={'Comment loading...'}>
                     <Comment comment={edge.node} />
                   </Suspense>
@@ -49,7 +50,7 @@ export const IssueCommentList = ({
       </ul>
       {isLoadingNext
         ? 'Loading more...'
-        : data.comments.pageInfo.hasNextPage && (
+        : comments.pageInfo.hasNextPage && (
             <Button onClick={() => loadNext(10)}>Load more</Button>
           )}
     </div>

diff --git a/packages/example/src/components/owner/Avatar.tsx b/packages/example/src/components/owner/Avatar.tsx
@@ -5,9 +5,10 @@ import LoginLink from './LoginLink'
 import { Avatar$key } from './__generated__/Avatar.graphql'
 
 interface Props {
-  user: Avatar$key,
+  user: Avatar$key
   isOrg?: true
   width?: string
+  stacked?: true
 }
 
 const query = graphql`
@@ -18,7 +19,6 @@ const query = graphql`
     isViewer
     isFollowingViewer
   }
-  
 `
 const orgQuery = graphql`
   fragment AvatarOrg on Organization {
@@ -28,26 +28,54 @@ const orgQuery = graphql`
   }
 `
 
-const widths  = ['w-32', 'w-64', 'w-16', 'w-8'];
+const Avatar: React.FC<Props> = ({ user, isOrg, width, stacked }) => {
+  const owner = useFragment(isOrg ? orgQuery : query, user)
 
+  const Image = () => (
+    <img className={`rounded-full ${width ?? 'w-32'}`} src={owner.avatarUrl} />
+  )
+  const stackedClass = stacked ? 'column' : 'row'
+  const StackedWrapper = ({ children }) =>
+    stacked ? (
+      <div className="display-flex-row">{children}</div>
+    ) : (
+      <>{children}</>
+    )
 
-const Avatar: React.FC<Props> = ({ user, isOrg, width }) => {
-  if(width && !widths.includes(width)) {
-    throw Error (`width prop must be one of ${widths.join(',')}`)
-  }
-  const owner = useFragment(isOrg ? orgQuery : query, user)
+  const Link = ({ children }) => <a href={`/${owner.login}`}>{children} </a>
   return (
-    <span>
-      <img className={`${width ?? 'w-32'} rounded-full inline-flex mr-2`} src={owner.avatarUrl} />
-
-      {owner.name ? (
-        <a href={`/${owner.login}`}>
-          {owner.name} (@{owner.login})
-        </a>
-      ) : (
-        <LoginLink login={owner.login} />
-      )}
-      {owner.isViewer && <Label name="You" />}
+    <span className='display-inline-block'>
+      <span className="flex flex-row">
+        {owner.name ? (
+          <>
+            <span className={'flex flex-column self-start p1'}>
+              <Link>
+                <Image />
+              </Link>
+            </span>
+            <span className="flex flex-column items-center">
+              <StackedWrapper>
+                <span className={`p1 flex flex-${stackedClass}`}>
+                  <Link>{owner.name}</Link>
+                </span>
+                <span className={`p1 flex-${stackedClass}`}>
+                  <Link>@{owner.login}</Link>
+                </span>
+              </StackedWrapper>
+            </span>
+          </>
+        ) : (
+          <LoginLink login={owner.login}>
+            <Image />
+          </LoginLink>
+        )}
+      <span className="flex flex-column items-center items-start">
+        <span>
+          {owner.isViewer && <Label name="You" />}
+          {owner.isFollowingViewer && <Label name="Follows You" />}
+        </span>
+      </span>
+    </span>
     </span>
   )
 }

diff --git a/packages/example/src/components/owner/LoginLink.tsx b/packages/example/src/components/owner/LoginLink.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 
 type Props = {
     login: string
-}
+} & PropsWithChildren
 
-const LoginLink: React.FC<Props> = ({ login }) => {
-    return <a href={`/${login}`}>@{login}</a>
+const LoginLink: React.FC<Props> = ({ login, children }) => {
+    return <a href={`/${login}`}>{children}@{login}</a>
 }
 
 export default LoginLink
diff --git a/packages/example/src/components/repos/FullRepoItem.tsx b/packages/example/src/components/repos/FullRepoItem.tsx
@@ -38,7 +38,7 @@ export const FullRepoItem: React.FC<Props> = ({ repo }) => {
   )
 
   return (
-    <div className="min-h-30px">
+    <div className="min-h-34px">
       <RepoLink repo={data} size="l" labelSize="xs" />
       <Label
         size={'xs'}

diff --git a/packages/example/src/components/repos/RepoItem.tsx b/packages/example/src/components/repos/RepoItem.tsx
@@ -24,14 +24,16 @@ export const RepoItem : React.FC<Props> = ({ repo }) => {
   )
 
   return (
-    <span className="text-base hover:text-1.05rem transition-all duration-300 text-sm">
+    <span className="text-base transition-all duration-300 text-sm">
     <a
+      className='hover:text-1.05rem'
       href={`/${data?.owner?.login}`}
     >
       {data?.owner?.login} 
     </a>
     {""}/{""}
     <a
+     className='hover:text-1.05rem'
       href={`/${data?.owner?.login}/${data?.name}`}
     >
       {data?.name} 

diff --git a/packages/example/src/components/repos/RepoLink.tsx b/packages/example/src/components/repos/RepoLink.tsx
@@ -7,6 +7,9 @@ type Props = {
 }
 
 
+
+
+
 const RepoLink: React.FC<Props> = ({ repo, labelSize = 'sm', size = 'md' }) => {
   return (
     <span className={`text-${size}`}>

diff --git a/packages/example/src/global.d.ts b/packages/example/src/global.d.ts
@@ -1,13 +1,6 @@
 declare global {
-
-    type GS = typeof globalThis & GlobalSecrets
-
-    interface GlobalSecrets {
-        GH_TOK: string;
-      GH_TOKEN: string;
-      TOKEN: string;
-      VITE_GITHUB_TOKEN: string;
-    }
-  }
-
-  export {}
+      const GH_TOK: string;
+      const GH_TOKEN: string;
+      const TOKEN: string;
+      const VITE_GITHUB_TOKEN: string;
+  }