feat: refactor to use layouts, tinker w experimental link shortener i…

…dea, next/font

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

app/(.)/[redirectSlug]/page.tsx

@@ -0,0 +1,29 @@
+import { notFound, redirect } from 'next/navigation';
+import { getLinks } from '../../../lib/server/getLinks';
+
+export const dynamic = 'error';
+
+async function LinkShortener({ params }: { params: { redirectSlug: string } }) {
+  console.log('hi');
+  const { redirectSlug } = params;
+  const links = await getLinks();
+
+  if (!redirect) notFound();
+
+  const link = links[redirectSlug];
+  if (link) {
+    console.log({ link });
+    redirect(link['Redirect URL']);
+  } else {
+    console.log('lol');
+    notFound();
+  }
+}
+
+export async function generateStaticParams() {
+  return Object.keys(await getLinks()).map((redirectSlug) => ({
+    redirectSlug,
+  }));
+}
+
+export default LinkShortener;

pages/index_wip.tsx → app/(.)/index_wip/page.tsx

@@ -1,6 +1,4 @@
 /* eslint-disable @next/next/no-img-element */
-import Head from 'next/head';
-
 export default function Home() {
   return (
     <div className="h-screen bg-special-blue">

app/(.)/layout.tsx

@@ -0,0 +1,20 @@
+import styles from '../../styles/palettes.module.css';
+
+export const revalidate = 60;
+
+function Index({ children }: { children: React.ReactNode }) {
+  const paletteOptions = Object.keys(styles);
+  const palette =
+    paletteOptions[Math.floor(Math.random() * paletteOptions.length)];
+  return (
+    <div className={styles[palette]}>
+      <div className="flex justify-center w-full text-sm bg-back min-h-screen text-[1.25em] sm:text-[1.3em]">
+        <div className="flex flex-col items-start justify-center leading-9 gap-y-4 my-[4em] mx-[2em] sm:m-16 max-w-2xl text-content font-sans">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Index;

app/(.)/list/page.tsx

@@ -0,0 +1,25 @@
+import Signature from '../../../components/Signature';
+import { getLinks } from '../../../lib/server/getLinks';
+
+export const dynamic = 'error';
+
+async function LinkList() {
+  const links = Object.values(await getLinks()).filter((link) => link.Public);
+  return (
+    <div className="flex flex-col gap-8 items-center">
+      <Signature />
+      {links.map((link) => (
+        <button key={link.Slug} type="button">
+          <a
+            className="p-4 w-full h-full bg-accent text-back hover:bg-back hover:text-accent transition border border-accent"
+            href={link['Redirect URL']}
+          >
+            {link['Friendly Name']}
+          </a>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default LinkList;

app/(.)/page.tsx

@@ -0,0 +1,66 @@
+import Email from '../../components/Email';
+import Signature from '../../components/Signature';
+import StyledLink from '../../components/StyledLink';
+
+function Content() {
+  return (
+    <>
+      <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.
+      </p>
+      <p>
+        🛬 I was raised in London, but now live in Austin, TX and attend school
+        at the University of Texas at Dallas.
+      </p>
+      <p>Right now, I&apos;m:</p>
+      <ul>
+        <li>
+          ✨ Learning and hacking with friends in{' '}
+          <StyledLink href="https://hackclub.com">Hack Club</StyledLink>
+        </li>
+        <li>
+          🎓 Completing a Computer Science degree at{' '}
+          <StyledLink href="https://utdallas.edu">UT Dallas</StyledLink>
+        </li>
+      </ul>
+      <p>
+        Outside of software engineering, I love music production,
+        broadcast/audiovisual technology, and all things technical theatre!{' '}
+        <StyledLink href="https://scrapbook.hackclub.com/jasonaa">
+          My Scrapbook
+        </StyledLink>{' '}
+        has some of the things I&apos;m working on.
+      </p>
+
+      <p>
+        Feel free to shoot me an email →&nbsp;
+        <Email/>
+        . You also can find me on{' '}
+        <StyledLink href="https://github.com/jasonappah">GitHub</StyledLink>,{' '}
+        <StyledLink href="https://twitter.com/jasonaa_">Twitter</StyledLink> and{' '}
+        <StyledLink href="https://linkedin.com/in/jasonaa">LinkedIn</StyledLink>
+        .
+      </p>
+      <p>
+        Here&apos;s this site&apos;s{' '}
+        <StyledLink
+          href={`https://github.com/jasonappah/v2/tree/${
+            process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA || 'main'
+          }`}
+        >
+          source code
+        </StyledLink>
+        .
+      </p>
+      <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>
+    </>
+  );
+}
+
+export default Content;

app/head.tsx

@@ -0,0 +1,19 @@
+function Head() {
+  return (
+    <>
+      <title>Jason Antwi-Appah</title>
+      <meta name="viewport" content="width=device-width" />
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content="Jason Antwi-Appah" />
+      <meta
+        property="og:description"
+        content="Hi! I'm a 17-year-old student and maker that loves all sorts of tech."
+      />
+      <meta property="og:url" content="https://jasonaa.me" />
+      <meta property="og:image" content="/og.png" />
+      <link rel="icon" type="image/png" href="favicon.png" />
+    </>
+  );
+}
+
+export default Head;

app/layout.tsx

@@ -0,0 +1,23 @@
+import 'tailwindcss/tailwind.css';
+import localFont from '@next/font/local';
+import AnalyticsWrapper from '../components/Analytics';
+
+const klimaWeb = localFont({
+  src: './klima-variable.ttf',
+  variable: '--font-klima',
+});
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className={klimaWeb.variable}>
+      <body>
+        {children}
+        <AnalyticsWrapper />
+      </body>
+    </html>
+  );
+}

components/Analytics.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { Analytics } from '@vercel/analytics/react';
+
+function AnalyticsWrapper() {
+  return <Analytics />;
+}
+
+export default AnalyticsWrapper;

components/Email.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import StyledLink from './StyledLink';
+
+export default function Email() {
+  const [electronicMailIdentifier, setEmail] = useState('...');
+  useEffect(() => {
+    setEmail(Buffer.from('aGV5QGphc29uYWEubWU=', 'base64').toString('utf8'));
+    console.log(
+      '👋 you should also follow my Instagram: https://instagram.com/jasonaa_'
+    );
+  }, []);
+  return (
+    <StyledLink href={`mailto:${electronicMailIdentifier}`}>
+      <noscript>sorry, you need JavaScript enabled for this</noscript>
+      {electronicMailIdentifier}
+    </StyledLink>
+  );
+}

components/Signature.tsx

@@ -1,5 +1,7 @@
+import Link from 'next/link';
+
 const Signature = () => (
-  <a href="https://jasonaa.me">
+  <Link href="/">
     <svg
       width="156"
       height="90"
@@ -17,7 +19,7 @@ const Signature = () => (
         strokeWidth="0.225"
       />
     </svg>
-  </a>
+  </Link>
 );
 
 export default Signature;

components/StyledLink.tsx

@@ -0,0 +1,24 @@
+import Link from 'next/link';
+import {
+  PropsWithChildren,
+  DetailedHTMLProps,
+  AnchorHTMLAttributes,
+} from 'react';
+
+function StyledLink({
+  children,
+  href,
+}: PropsWithChildren<
+  DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
+>) {
+  return (
+    <Link
+      href={href}
+      className="transition text-accent hover:text-back hover:bg-content"
+    >
+      {children}
+    </Link>
+  );
+}
+
+export default StyledLink;

lib/server/getLinks.ts

@@ -1,6 +1,6 @@
 import { AirtablePlusPlus, AirtablePlusPlusRecord } from 'airtable-plusplus';
 
-interface ILink {
+export interface ILink {
   'Friendly Name': string;
   Slug: string;
   'Redirect URL': string;
@@ -15,14 +15,16 @@ export async function getLinks(): Promise<Record<string, ILink>> {
     baseId: process.env.AIRTABLE_BASE_ID,
     tableName: 'Table 1',
   });
-  const links = (await airtable.read({
+  const records = (await airtable.read({
     filterByFormula: '{Active}',
   })) as unknown as AirtablePlusPlusRecord<ILink>[];
 
-  const yeah = {};
-  for (const record of links) {
-    yeah[record.fields.Slug] = record.fields;
+  const links = {};
+  for (const record of records) {
+    if (record.fields.Slug !== '.') {
+      links[record.fields.Slug] = record.fields;
+    }
   }
 
-  return yeah;
+  return links;
 }

next.config.js

@@ -2,14 +2,17 @@
  * @type {import('next').NextConfig}
  */
 module.exports = {
-  rewrites() {
-    return {
-      fallback: [
-        {
-          source: '/:path*',
-          destination: `/api/link/?slug=:path*`,
-        },
-      ],
-    };
-  }
+  experimental: {
+    appDir: true,
+  },
+    rewrites() {
+      return {
+        fallback: [
+          {
+            source: '/:path*',
+            destination: `/api/link/?slug=:path*`,
+          },
+        ],
+      };
+    }
 };

package.json

@@ -12,8 +12,10 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
+    "@next/font": "^13.1.1",
+    "@vercel/analytics": "^0.1.6",
     "airtable-plusplus": "0.3.3",
-    "next": "^12.2.5",
+    "next": "^13.1.1-canary.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.1.8",
@@ -31,7 +33,7 @@
     "eslint": "^8.4.1",
     "eslint-config-airbnb": "^19.0.2",
     "eslint-config-airbnb-typescript": "^16.1.0",
-    "eslint-config-next": "11.1.2",
+    "eslint-config-next": "^13.1.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-wesbos": "3.0.2",
     "eslint-plugin-html": "^6.2.0",

pages/api/link.ts

@@ -34,7 +34,11 @@ const link = async (req: NextApiRequest, res: NextApiResponse) => {
   const slug = path.format(path.parse(req.query.slug as string));
 
   const links = await getLinks();
-  const url = links[slug]['Redirect URL'] || DEFAULT;
+  const thing = links[slug];
+  if (!thing) {
+    return res.redirect(308, DEFAULT);
+  }
+  const url = thing['Redirect URL'] || DEFAULT;
 
   return res.redirect(308, url);
 };