meta + other fixes

jasonappah · May 7, 2023 · c2cb7dd · c2cb7dd · vercel · May 7, 2023
1 parent 3b42593
commit c2cb7dd
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 35 deletions.
diff --git a/app/docs/[page]/page.tsx b/app/docs/[page]/page.tsx
@@ -1,15 +1,17 @@
 import { NotionAPI } from 'notion-client';
 import { getAllPagesInSpace, getPageTitle, parsePageId } from 'notion-utils';
 
-import { notFound, redirect } from 'next/navigation';
+import { notFound, redirect, useRouter } from 'next/navigation';
+import { Metadata } from 'next';
 import Signature from '../../../components/Signature';
 import NotionRenderer from '../../../components/Notion';
 
 const notion = new NotionAPI();
 
 export const revalidate = 60;
 
-async function Page({ params }: { params: { page: string } }) {
+type Props = { params: { page: string } };
+async function Page({ params }: Props) {
   const { page } = params;
   const id = parsePageId(page);
   if (id !== page) return redirect(id);
@@ -18,6 +20,7 @@ async function Page({ params }: { params: { page: string } }) {
   if (!recordMap) return notFound();
 
   const title = getPageTitle(recordMap);
+  // console.log(recordMap.block)
 
   return (
     <div className="flex flex-col gap-8 w-screen px-24 items-center">
@@ -57,4 +60,19 @@ export async function generateStaticParams() {
   return paths.map((path) => ({ page: path }));
 }
 
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { page } = params;
+  const id = parsePageId(page);
+  if (id !== page) return redirect(id);
+
+  const recordMap = await notion.getPage(id);
+  if (!recordMap) return notFound();
+
+  const title = getPageTitle(recordMap);
+
+  return {
+    title,
+  };
+}
+
 export default Page;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import '../styles/globals.css';
-import localFont from "next/font/local";
+import localFont from 'next/font/local';
 import AnalyticsWrapper from '../components/Analytics';
 
 import styles from '../styles/palettes.module.css';
@@ -36,13 +36,10 @@ export const metadata: Metadata = {
   title: 'Jason Antwi-Appah',
   creator: 'Jason Antwi-Appah',
   description: "Hi! I'm a student and maker that loves all sorts of tech.",
-  icons: {
-    icon: '/favicon.png',
-  },
   openGraph: {
     type: 'website',
-    title: 'Jason Antwi-Appah',
-    description: "Hi! I'm a student and maker that loves all sorts of tech.",
+    title: { default: 'Jason Antwi-Appah', template: '%s | Jason Antwi-Appah' },
+    description: '🛠️ 👨🏾‍💻 🎓 ✨',
     url: 'https://jasonaa.me',
     locale: 'en-US',
     images: [

diff --git a/app/page.tsx b/app/page.tsx
@@ -11,16 +11,17 @@ function Content() {
       }`,
     },
     {
-      name: 'links',
+      name: 'more links',
       href: '/links',
     },
   ];
   return (
     <div className="flex flex-col items-start justify-center gap-4 max-w-2xl">
       <Signature />
       <p>
-        🧑🏾‍💻 Hey there! I&apos;m Jason Antwi-Appah. I&apos;m a 17-year-old student
-        and maker that loves all sorts of tech.
+        🧑🏾‍💻 Hey there! I&apos;m Jason Antwi-Appah. I&apos;m a student and
+        software engineer with a passion for building and learning about all
+        sorts of tech.
       </p>
       <p>
         🛬 I was raised in London, but now live in Austin, TX and attend school
@@ -37,10 +38,10 @@ function Content() {
       <p>
         ✨ Outside of software engineering, I love music production,
         broadcast/audiovisual technology, and all things technical theatre!{' '}
-        <StyledLink href="https://scrapbook.hackclub.com/jasonaa">
+        {/* <StyledLink href="https://scrapbook.hackclub.com/jasonaa">
           My Scrapbook
         </StyledLink>{' '}
-        has some of the things I&apos;m working on.
+        has some of the things I&apos;m working on. */}
       </p>
 
       <p>
@@ -53,18 +54,15 @@ function Content() {
         <StyledLink href="https://linkedin.com/in/jasonaa">LinkedIn</StyledLink>
         .
       </p>
-      <ol className="flex gap-3">
+      <ul className="flex gap-5 list-inside list-disc ">
         {nav.map(({ name, href }) => (
-          <StyledLink key={name} href={href}>
-            {name}
-          </StyledLink>
+          <li className="first:list-none not-first:pl-5">
+            <StyledLink key={name} href={href}>
+              {name}
+            </StyledLink>
+          </li>
         ))}
-      </ol>
-      <p className="text-[0.01em]">
-        psssst if you&apos;re a teen interested in joining a community of other
-        teens in computer science or tech in general, you should check out{' '}
-        <StyledLink href="https://hackclub.com">Hack Club!</StyledLink>
-      </p>
+      </ul>
     </div>
   );
 }

diff --git a/components/Notion.tsx b/components/Notion.tsx
@@ -7,7 +7,7 @@ import 'react-notion-x/src/styles.css';
 // used for rendering equations (optional)
 import 'katex/dist/katex.min.css';
 // used for code syntax highlighting (optional)
-import 'prismjs/themes/prism-tomorrow.css';
+import 'prismjs/themes/prism-tomorrow.min.css';
 
 import Image from 'next/image';
 import Link from 'next/link';
@@ -18,15 +18,15 @@ const Code = dynamic(() =>
   import('react-notion-x/build/third-party/code').then(async (m) => {
     // additional prism syntaxes
     await Promise.all([
-      import('prismjs/components/prism-markup-templating.js'),
       import('prismjs/components/prism-markup.js'),
-      import('prismjs/components/prism-bash.js'),
+      import('prismjs/components/prism-markup-templating.js'),
       import('prismjs/components/prism-c.js'),
+      import('prismjs/components/prism-js-templates.js'),
+      import('prismjs/components/prism-bash.js'),
       import('prismjs/components/prism-cpp.js'),
       import('prismjs/components/prism-csharp.js'),
       import('prismjs/components/prism-docker.js'),
       import('prismjs/components/prism-java.js'),
-      import('prismjs/components/prism-js-templates.js'),
       import('prismjs/components/prism-coffeescript.js'),
       import('prismjs/components/prism-diff.js'),
       import('prismjs/components/prism-git.js'),

diff --git a/next.config.js b/next.config.js
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "@babel/eslint-parser": "^7.16.3",
     "@babel/preset-react": "^7.16.0",
     "@types/node": "^16.11.12",
+    "@types/prismjs": "^1.26.0",
     "@types/react": "^17.0.30",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/icon.svg b/public/icon.svg
diff --git a/yarn.lock b/yarn.lock
@@ -1927,6 +1927,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.26.tgz#a18b88726a67bc6a8a5bdac9a40c093ecb03ccd0"
   integrity sha512-pCNBzNQqCXE4A6FWDmrn/o1Qu+qBf8tnorBlNoPNSBQJF+jXzvTKNI/aMiE+hGJbK5sDAD65g7OS/YwSHIEJdw==
 
+"@types/prismjs@^1.26.0":
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.0.tgz#a1c3809b0ad61c62cac6d4e0c56d610c910b7654"
+  integrity sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==
+
 "@types/prop-types@*":
   version "15.7.5"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"