V3

.env.example

@@ -1,7 +1,5 @@
 GA_MEASUREMENT_ID=
 
-REVUE_API_KEY=
-
 API_KEY=
 AUTH_DOMAIN=
 DATABASE_URL=
@@ -10,4 +8,10 @@ STORAGE_BUCKET=
 MESSAGING_SENDER_ID=
 APP_ID=
 MEASUREMENT_ID=
-NEXT_PUBLIC_GOOGLE_ADSENSE=
+NEXT_PUBLIC_GOOGLE_ADSENSE=
+TOOLBOX_SOFTWARE_DB=
+TOOLBOX_HARDWARE_DB=
+TOOLBOX_THIS_SITE_DB=
+WORK_TIMELINE_DB=
+SPEAKING_DATA_DB=
+NEXT_LOOPS_API_KEY=

.env.production

@@ -11,4 +11,6 @@ REVUE_API_KEY=
 TWITTER_BEARER_TOKEN=
 PLAUSIBLE_API_TOKEN=
 TWITTER_USER_ID=
-NEXT_PUBLIC_GOOGLE_ADSENSE=
+NEXT_PUBLIC_GOOGLE_ADSENSE=
+WORK_TIMELINE_DB=
+SPEAKING_DATA_DB=

.eslintrc

@@ -2,6 +2,7 @@
   "extends": ["next"],
   "rules": {
     "react/prop-types": 0,
-    "react/no-unescaped-entities": 0
+    "react/no-unescaped-entities": 0,
+    "react/no-unknown-property": ["error", { "ignore": ["tw"] }]
   }
 }

.frontmatter/database/mediaDb.json

@@ -0,0 +1 @@
+{}

.gitignore

@@ -36,7 +36,6 @@ public/feed.xml
 .env.local
 .env.development
 .env.local
-/public
 .netlify
 /node_modules
 /platforms

README.md

@@ -35,5 +35,5 @@ $ npm run dev
 Create a `.env` file similar to `.env.example` and include the appropriate keys.
 
 ## Notion Article Template
-Duplicate [the following Notion database](https://www.notion.so/0d3e00c6bbe54231897b9fcbc7747f78?v=4d7f0006d9a144b5bd8b9251f2ec39cd), grab the database ID and add it to the environment variables in the `.env` file.
 
+Duplicate [the following Notion database](https://www.notion.so/0d3e00c6bbe54231897b9fcbc7747f78?v=4d7f0006d9a144b5bd8b9251f2ec39cd), grab the database ID and add it to the environment variables in the `.env` file.

components/ArticleCard.tsx

@@ -1,27 +1,24 @@
 import { Article } from '@/lib/types';
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import { handleArticleClicked } from '@/lib/handleArticleClick';
 import siteMetadata from '@/data/siteMetadata';
 import slugify from 'slugify';
 import { useIsArticleRead } from '@/hooks/useIsArticleRead';
-import { useRouter } from 'next/dist/client/router';
 
 type Props = {
   article: Article;
 };
 
 export function ArticleCard({ article }: Props) {
-  const router = useRouter();
   const slug = slugify(article.title).toLowerCase();
-
   const [hasRead] = useIsArticleRead(slug);
 
   return (
     <div>
       <button onClick={() => handleArticleClicked(slug)}>
         <div className="group">
           <Image
-            className="rounded-xl group-hover:opacity-75"
+            className="rounded-3xl group-hover:opacity-75"
             objectFit="cover"
             src={article.coverImage}
             placeholder="blur"
@@ -31,11 +28,9 @@ export function ArticleCard({ article }: Props) {
             layout="intrinsic"
             alt={'article cover'}
           />
-          <div className="text-left w-full">
+          <div className="w-full text-left">
             <h3 className="mt-2 text-2xl">{article.title}</h3>
-            {/* {JSON.stringify(article)} */}
-            {/* <p>{article.summary}</p> */}
-            <span className="text-base font-semibold flex items-center">
+            <span className="flex items-center text-base font-semibold">
               {new Date(article.publishedDate).toLocaleDateString(
                 siteMetadata.locale,
                 {
@@ -45,7 +40,7 @@ export function ArticleCard({ article }: Props) {
                 }
               )}{' '}
               {hasRead && (
-                <span className="text-sm inline-flex items-center text-teal-600 dark:text-teal-800 opacity-75 ml-3">
+                <span className="inline-flex items-center ml-3 text-sm text-teal-600 opacity-75 dark:text-teal-800">
                   <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
                     <path
                       stroke="currentColor"

components/ArticleList.tsx

@@ -1,16 +1,55 @@
-import { Article } from '@/lib/types';
 import { ArticleCard } from '@/components/ArticleCard';
 
-type Props = {
-  articles: Article[];
-};
-
-export function ArticleList({ articles }) {
+export function ArticleList({
+  articles,
+  showEndMessage = false,
+  fullHeight = false
+}) {
   return (
-    <div className="list-none grid grid-cols-1 md:grid-cols-3 gap-8">
-      {articles.map((article) => (
-        <ArticleCard key={article.title} article={article} />
-      ))}
+    <div className={`space-y-12 ${fullHeight && 'min-h-screen '}`}>
+      <div className="grid grid-cols-1 gap-8 list-none md:grid-cols-3">
+        {articles.map((article) => (
+          <ArticleCard key={article.title} article={article} />
+        ))}
+      </div>
+      {showEndMessage && (
+        <div className="flex items-center justify-center space-x-2 text-xs text-slate-400 dark:text-slate-500">
+          <p>You've reached the end of the list.</p>
+          <svg
+            className="w-5"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.25 12C19.25 16.0041 16.0041 19.25 12 19.25C7.99594 19.25 4.75 16.0041 4.75 12C4.75 7.99594 7.99594 4.75 12 4.75C16.0041 4.75 19.25 7.99594 19.25 12Z"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            ></path>
+            <path
+              d="M9.75 13.75C9.75 13.75 10 15.25 12 15.25C14 15.25 14.25 13.75 14.25 13.75"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            ></path>
+            <path
+              d="M10.5 10C10.5 10.2761 10.2761 10.5 10 10.5C9.72386 10.5 9.5 10.2761 9.5 10C9.5 9.72386 9.72386 9.5 10 9.5C10.2761 9.5 10.5 9.72386 10.5 10Z"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            ></path>
+            <path
+              d="M14.5 10C14.5 10.2761 14.2761 10.5 14 10.5C13.7239 10.5 13.5 10.2761 13.5 10C13.5 9.72386 13.7239 9.5 14 9.5C14.2761 9.5 14.5 9.72386 14.5 10Z"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            ></path>
+          </svg>
+        </div>
+      )}
     </div>
   );
 }

components/Button.tsx

@@ -14,16 +14,37 @@ export const Button: React.FC<Props> = ({
     <button
       aria-label="button"
       type="button"
-      className={`md:w-auto md:inline-flex py-3 px-2 md:px-12 rounded-full w-full ${
+      className={`group inline-flex items-center rounded-full px-6 py-1.5 font-semibold transition ${
         buttonType === ButtonType.PRIMARY
-          ? 'bg-midnight text-white dark:bg-gray-200 dark:text-midnight'
+          ? 'bg-midnight text-white dark:bg-gray-200 dark:text-midnight hover:bg-slate-700'
           : buttonType === ButtonType.SECONDARY
-          ? 'bg-gray-200 dark:bg-midnight text-midnight dark:text-white'
+          ? 'text-midnight dark:text-white'
           : null
-      } items-center justify-center general-ring-state font-medium`}
+      }`}
       onClick={() => onButtonClick()}
     >
       {children}
+      <svg
+        className={`mt-0.5 ml-2 -mr-1 stroke-2 ${
+          buttonType === ButtonType.PRIMARY
+            ? 'stroke-white dark:stroke-midnight'
+            : 'stroke-midnight dark:stroke-white'
+        }`}
+        fill="none"
+        width="10"
+        height="10"
+        viewBox="0 0 10 10"
+        aria-hidden="true"
+      >
+        <path
+          className="transition opacity-0 group-hover:opacity-100"
+          d="M0 5h7"
+        ></path>
+        <path
+          className="transition group-hover:translate-x-[3px]"
+          d="M1 1l4 4-4 4"
+        ></path>
+      </svg>
     </button>
   );
 };

components/Callout.tsx

@@ -1,6 +1,6 @@
 export function Callout({ children }) {
   return (
-    <div className="flex p-3 space-x-4 bg-gray-100 rounded-lg dark:bg-midnight">
+    <div className="flex p-3 space-x-4 rounded-lg bg-slate-100 dark:bg-midnight">
       {children}
     </div>
   );

components/CommunityEntry.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import dayjs from 'dayjs';
 import { useSWRConfig } from 'swr';
 
@@ -26,18 +27,46 @@ export function CommunityEntry({ session, message }) {
     mutate('/api/community-wall');
   }
   return (
-    <>
-      <p className="p-0 m-0 text-gray-900 dark:text-white">{message.content}</p>
-      <div className="flex items-center space-x-6 text-base">
-        <p>
-          {message.user.name} ∿ {dayjs(message.created_at).format('MM/DD/YYYY')}
-        </p>
-        {session && session.user.id === message.user_id ? (
-          <button onClick={handleDeleteMessage} className="text-rose-400">
-            Delete
-          </button>
-        ) : null}
+    <div className="p-6 rounded-3xl bg-[#F8FAFC] dark:bg-midnight">
+      <div className="flex items-start justify-between mb-4 space-x-6">
+        <div className="flex items-start space-x-6">
+          <Image
+            width={32}
+            height={32}
+            className="flex-shrink-0 rounded-full"
+            src={
+              message.user.avatar_url
+                ? message.user.avatar_url
+                : `https://robohash.org/${message.user.name}.png`
+            }
+            alt="profile picture"
+          />
+          <div>
+            <h5 className="text-indigo-600 dark:text-indigo-500">
+              {message.user.name}
+            </h5>
+            <p className="flex items-start p-0 m-0 leading-7">
+              <span>{message.content}</span>
+            </p>
+            <div className="mt-4 text-base">
+              {session && session.user.id === message.user_id ? (
+                <button
+                  onClick={handleDeleteMessage}
+                  className="text-rose-400 hover:text-rose-500"
+                >
+                  Delete
+                </button>
+              ) : null}
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <p className="hidden p-0 m-0 text-base md:block text-slate-400 dark:text-slate-500">
+            {dayjs(message.created_at).format('MM/DD/YYYY')}
+          </p>
+        </div>
       </div>
-    </>
+    </div>
   );
 }

components/CommunityForm.tsx

@@ -19,11 +19,13 @@ export function CommunityForm({ loggedIn, supabase, session }) {
       message: 'Sending note...'
     });
     const content = message.current.value;
+    console.log(session.user?.user_metadata.avatar_url);
     const res = await fetch('/api/community-wall', {
       body: JSON.stringify({
         message: {
           content,
-          userId: session.user.id
+          userId: session.user.id,
+          userPhoto: session.user?.user_metadata.avatar_url
         }
       }),
       headers: {
@@ -52,7 +54,7 @@ export function CommunityForm({ loggedIn, supabase, session }) {
   }
   return (
     <>
-      <div className="border border-gray-200 rounded-lg p-6 my-4 w-full dark:border-gray-700 bg-[#F8FAFC] dark:bg-midnight">
+      <div className="border border-gray-200 rounded-3xl p-6 my-4 w-full dark:border-gray-700 bg-[#F8FAFC] dark:bg-midnight">
         <h3 className="p-0 mt-0">Leave a note</h3>
         <p>Share a message with me or another visitor of my site.</p>
         {loggedIn ? (
@@ -76,7 +78,8 @@ export function CommunityForm({ loggedIn, supabase, session }) {
               </button>
             </form>
             <p className="p-0 m-0 text-base opacity-60 no-prose">
-              Your information is only used to display your name.
+              Your information is only used to display your name & GitHub
+              profile picture.
             </p>
             {form.state === Form.Error ? (
               <ErrorMessage>{form.message}</ErrorMessage>