feat: re-add zebrastik

.node-version

@@ -0,0 +1 @@
+20.10.0

next.config.js

@@ -9,14 +9,23 @@ const nextConfig = {
   },
 
   redirects: async () => [
-    // deleted pages
+    // `zebrastik.com` to `zebrastik`
     {
-      source: '/now',
-      destination: '/',
+      source: '/',
+      destination: '/zebrastik',
       permanent: true,
+      has: [{ type: 'host', value: 'zebrastik.com' }],
     },
     {
-      source: '/zebrastik',
+      source: '/',
+      destination: '/zebrastik',
+      permanent: true,
+      has: [{ type: 'host', value: 'zbrstk.com' }],
+    },
+
+    // deleted pages
+    {
+      source: '/now',
       destination: '/',
       permanent: true,
     },

package.json

@@ -13,7 +13,6 @@
     "update:book-images": "ts-node --project tsconfig.scripts.json -r tsconfig-paths/register src/scripts/books/update-images.ts"
   },
   "dependencies": {
-    "@react-icons/all-files": "^4.1.0",
     "@vercel/analytics": "^0.1.1",
     "@vercel/og": "^0.0.20",
     "axios": "^1.6.0",
@@ -29,6 +28,7 @@
     "query-string": "^7.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0",
     "react-markdown": "^8.0.3",
     "react-star-rating-component": "^1.4.1",
     "react-syntax-highlighter": "^15.5.0",

src/app/(home)/page.tsx → src/app/(altay)/(home)/page.tsx

@@ -2,11 +2,10 @@ import { homeCopy, booksCopy, postsCopy } from 'config'
 import { readMarkdownFile } from 'lib/utils/md'
 import Markdown from 'ui/Markdown'
 import Image from 'next/image'
-import { VscTwitter } from '@react-icons/all-files/vsc/VscTwitter'
-import { VscGithub } from '@react-icons/all-files/vsc/VscGithub'
-import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin'
-import { CgArrowTopRight } from '@react-icons/all-files/cg/CgArrowTopRight'
-import { CgArrowRight } from '@react-icons/all-files/cg/CgArrowRight'
+import { VscGithub } from 'react-icons/vsc'
+import { FaLinkedin } from 'react-icons/fa'
+import { FaXTwitter } from 'react-icons/fa6'
+import { CgArrowTopRight } from 'react-icons/cg'
 import Link from 'next/link'
 
 type Project = {
@@ -24,8 +23,8 @@ const EXTERNAL_LINKS = [
   },
   {
     label: 'X.com',
-    url: 'https://twitter.com/altaywtf',
-    icon: <VscTwitter />,
+    url: 'https://x.com/altaywtf',
+    icon: <FaXTwitter />,
   },
   {
     label: 'LinkedIn',
@@ -111,15 +110,18 @@ const HomePage = async () => (
             </div>
 
             <div className="flex flex-1 flex-col">
-              <div className="flex flex-row items-center gap-0.5 font-medium text-amber-400 hover:text-amber-200">
-                <a href={item.url} target="_blank" rel="noopener noreferrer">
-                  {item.title}
-                </a>
+              <a
+                href={item.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex flex-row items-center gap-0.5 self-start font-medium text-amber-400 hover:text-amber-200"
+              >
+                <span>{item.title}</span>
 
                 <span className="text-sm">
                   <CgArrowTopRight />
                 </span>
-              </div>
+              </a>
 
               <p>{item.description}</p>
             </div>
@@ -135,7 +137,10 @@ const HomePage = async () => (
         <div key={item.title}>
           <div className="flex flex-row items-center gap-3">
             <div className="flex flex-1 flex-col">
-              <Link href={item.url} className="font-medium text-amber-400 hover:text-amber-200">
+              <Link
+                href={item.url}
+                className="self-start font-medium text-amber-400 hover:text-amber-200"
+              >
                 {item.title}
               </Link>
 
@@ -152,12 +157,6 @@ const HomePage = async () => (
       <a className="hover:text-neutral-300" href="mailto:[email protected]">
         [email protected]
       </a>
-
-      <div className="mt-4">
-        <p>zebrastik, LLC</p>
-        <p>30 N Gould St, STE 4000</p>
-        <p>Sheridan, WY 82801</p>
-      </div>
     </div>
   </>
 )

src/app/api/og/route.tsx → src/app/(altay)/api/og/route.tsx

@@ -7,7 +7,7 @@ import type { ParsedQuery, Post, Book, Page } from 'lib/og/types'
 export const runtime = 'edge'
 
 const loadFont = async () => {
-  const url = new URL('../../../ui/theme/fonts/GT-America-Standard-Bold.ttf', import.meta.url)
+  const url = new URL('../../../../ui/theme/fonts/GT-America-Standard-Bold.ttf', import.meta.url)
   const res = await fetch(url)
   const fontData = await res.arrayBuffer()
   return fontData

src/app/(altay)/layout.tsx

@@ -0,0 +1,32 @@
+import 'ui/theme/style.css'
+import { Metadata } from 'next'
+import { SITE_TITLE, SITE_DESCRIPTION, SITE_URL } from 'config'
+import { getOpenGraphImage } from 'lib/utils/openGraph'
+import { PropsWithChildren } from 'react'
+import { PathHistoryListener } from 'ui/PathHistoryListener'
+
+export const metadata: Metadata = {
+  title: {
+    default: SITE_TITLE,
+    template: `%s | ${SITE_TITLE}`,
+  },
+  description: SITE_DESCRIPTION,
+  openGraph: {
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+    url: SITE_URL,
+    images: getOpenGraphImage({
+      type: 'page',
+      title: SITE_DESCRIPTION,
+    }),
+  },
+} as const
+
+export default function Layout({ children }: PropsWithChildren) {
+  return (
+    <>
+      {children}
+      <PathHistoryListener />
+    </>
+  )
+}

src/app/(zebrastik)/zebrastik/page.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image'
+import { zebrastikCopy } from 'config'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'zebrastik',
+  description: zebrastikCopy.description,
+  openGraph: {
+    title: 'zebrastik',
+    description: zebrastikCopy.description,
+  },
+}
+
+export default function Page() {
+  return (
+    <section className="app-width px-4 py-8 sm:px-0">
+      <div className="relative h-28 w-28 overflow-hidden rounded border border-solid border-neutral-900">
+        <Image src="/images/zebra.jpg" alt="zebrastik logo" fill />
+      </div>
+
+      <div className="mt-8 flex flex-col gap-2">
+        <h1>{zebrastikCopy.title}</h1>
+        <p className="text-neutral-400">{zebrastikCopy.description}</p>
+      </div>
+
+      <hr className="my-8" />
+
+      <a href="mailto:[email protected]">[email protected]</a>
+
+      <div className="mt-4 text-neutral-400">
+        <p>zebrastik, LLC</p>
+        <p>30 N Gould St, STE 4000</p>
+        <p>Sheridan, WY 82801</p>
+      </div>
+    </section>
+  )
+}

src/app/layout.tsx

@@ -1,29 +1,9 @@
+import { PropsWithChildren } from 'react'
 import AnalyticsWrapper from 'ui/AnalyticsWrapper'
-import 'ui/theme/style.css'
 import { gtAmerica, gtAmericaMono } from 'ui/theme/fonts'
-import { Metadata } from 'next'
-import { SITE_TITLE, SITE_DESCRIPTION, SITE_URL } from 'config'
-import { getOpenGraphImage } from 'lib/utils/openGraph'
-import { PathHistoryListener } from 'ui/PathHistoryListener'
-
-export const metadata: Metadata = {
-  title: {
-    default: SITE_TITLE,
-    template: `%s | ${SITE_TITLE}`,
-  },
-  description: SITE_DESCRIPTION,
-  openGraph: {
-    title: SITE_TITLE,
-    description: SITE_DESCRIPTION,
-    url: SITE_URL,
-    images: getOpenGraphImage({
-      type: 'page',
-      title: SITE_DESCRIPTION,
-    }),
-  },
-} as const
+import 'ui/theme/style.css'
 
-const RootLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+const Layout: React.FC<PropsWithChildren> = ({ children }) => (
   <html lang="en" className={`${gtAmerica.variable} ${gtAmericaMono.variable} dark`}>
     <head>
       <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
@@ -35,10 +15,10 @@ const RootLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => (
       <main className="p-safe">
         <section className="app-width px-4 py-8 sm:px-0">{children}</section>
       </main>
-      <PathHistoryListener />
+
       <AnalyticsWrapper />
     </body>
   </html>
 )
 
-export default RootLayout
+export default Layout

src/config/copy.ts

@@ -11,3 +11,9 @@ export const booksCopy = {
   title: 'Book notes',
   description: 'Somewhat detailed notes from the books that I read.',
 } as const
+
+export const zebrastikCopy = {
+  title: 'hi, we are zebrastik',
+  description:
+    'we provide software development services for digital product companies at any scale. our expertise covers many platforms such as web, mobile, and streaming devices.',
+}

src/ui/ArtificialBackButton.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import Link from 'next/link'
-import { CgArrowLeft } from '@react-icons/all-files/cg/CgArrowLeft'
+import { CgArrowLeft } from 'react-icons/cg'
 import { useRouter } from 'next/navigation'
 import { usePathHistory } from 'ui/usePathHistory'