KATT · KATT · Apr 7, 2024 · Apr 6, 2024 · Apr 6, 2024 · Apr 7, 2024
diff --git a/apps/katt.dev/next.config.mjs b/apps/katt.dev/next.config.mjs
@@ -1,4 +1,14 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "github.com",
+        port: "",
+      },
+    ],
+  },
+};
 
 export default nextConfig;
diff --git a/apps/katt.dev/package.json b/apps/katt.dev/package.json
@@ -15,13 +15,15 @@
     "next": "14.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-tweet": "^3.2.0",
     "schema-dts": "^1.1.2",
     "twoslash-cdn": "^0.2.5"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.1.1",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
+    "@tailwindcss/typography": "^0.5.12",
     "@types/node": "^20.12.4",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",

diff --git a/apps/katt.dev/src/app/globals.css b/apps/katt.dev/src/app/globals.css
@@ -2,16 +2,26 @@
 @tailwind components;
 @tailwind utilities;
 
-/* dark mode can wait */
-/* 
+:root {
+  --color-fg: 20, 20, 20;
+  --color-bg: 244, 244, 244;
+}
+body {
+  background-color: rgb(var(--color-bg));
+  color: rgb(var(--color-fg));
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --color-fg: 244, 244, 244;
+    --color-bg: 20, 20, 20;
   }
-} 
-*/
+}
+
+/* transform all except .notprose with 300ms */
+*:not(.not-prose) {
+  transition: all 300ms ease-out;
+}
 
 @layer utilities {
   .text-balance {

diff --git a/apps/katt.dev/src/app/layout.tsx b/apps/katt.dev/src/app/layout.tsx
@@ -1,53 +1,53 @@
-import { JsonLd } from '@/ui/JsonLd';
-import { Analytics } from '@vercel/analytics/next';
-import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import './globals.css';
+import { JsonLd } from "@/ui/JsonLd";
+import { Analytics } from "@vercel/analytics/next";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
 
-const inter = Inter({ subsets: ['latin'] });
+const inter = Inter({ subsets: ["latin"] });
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
     <html lang="en">
       <body className={`${inter.className} h-full min-h-screen flex flex-col`}>
         {children}
 
         <JsonLd
           data={{
-            '@context': 'https://schema.org',
-            '@type': 'Organization',
-            name: 'KATTCORP',
-            legalName: 'KATTCORP AB',
-            url: 'http://kattcorp.com',
-            foundingDate: '2016-10-26',
+            "@context": "https://schema.org",
+            "@type": "Organization",
+            name: "KATTCORP",
+            legalName: "KATTCORP AB",
+            url: "http://kattcorp.com",
+            foundingDate: "2016-10-26",
             founders: [
               {
-                '@type': 'Person',
-                name: 'Alexander Johansson',
+                "@type": "Person",
+                name: "Alexander Johansson",
               },
             ],
             address: {
-              '@type': 'PostalAddress',
-              addressCountry: 'Sweden',
+              "@type": "PostalAddress",
+              addressCountry: "Sweden",
             },
             contactPoint: {
-              '@type': 'ContactPoint',
-              contactType: 'sales',
-              email: '[email protected]',
-              url: 'https://twitter.com/alexdotjs',
+              "@type": "ContactPoint",
+              contactType: "sales",
+              email: "[email protected]",
+              url: "https://twitter.com/alexdotjs",
             },
             sameAs: [
-              'https://github.com/KATT',
-              'https://www.linkedin.com/in/johanssonalexander/',
-              'https://www.linkedin.com/company/19376256/',
-              'https://twitter.com/alexdotjs',
-              'https://katt.dev',
-              'https://kattcorp.com',
-              'https://kattcorp.co.uk',
+              "https://github.com/KATT",
+              "https://www.linkedin.com/in/johanssonalexander/",
+              "https://www.linkedin.com/company/19376256/",
+              "https://twitter.com/alexdotjs",
+              "https://katt.dev",
+              "https://kattcorp.com",
+              "https://kattcorp.co.uk",
             ],
           }}
         />
@@ -58,11 +58,11 @@ export default function RootLayout({
 }
 
 export const metadata: Metadata = {
-  title: 'KATTCORP',
+  title: "KATTCORP",
   description:
     "KATTCORP is a software development company based in Sweden. We're a small team of developers who love to build things.",
-  metadataBase: new URL('https://katt.dev'),
+  metadataBase: new URL("https://katt.dev"),
   alternates: {
-    canonical: '/',
+    canonical: "/",
   },
 };
diff --git a/apps/katt.dev/src/app/post/2024-hello-world/page.tsx b/apps/katt.dev/src/app/post/2024-hello-world/page.tsx
@@ -0,0 +1,56 @@
+import { JsonLd } from "@/ui/JsonLd";
+import { Tweet } from "react-tweet";
+import { PostAuthor } from "../ui/PostAuthor";
+
+const postDate = "2024-04-06";
+
+const headline = "Hello world";
+const author: React.ComponentProps<typeof PostAuthor> = {
+  name: 'Alex "KATT" Johansson',
+  title: "Creator of tRPC",
+  avatarSrc: "https://github.com/KATT.png",
+  href: "https://twitter.com/alexdotjs",
+};
+
+export default function Page() {
+  return (
+    <>
+      <article className="prose dark:prose-invert">
+        <h1>{headline}</h1>
+        <div>
+          <time dateTime={postDate}>
+            {Intl.DateTimeFormat("en-US", {
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            }).format(new Date(postDate))}
+          </time>
+        </div>
+
+        <p>Hi, here's a tweet:</p>
+
+        <div className="not-prose">
+          <Tweet id="1594623014267658242" />
+        </div>
+
+        <div className="not-prose">
+          <PostAuthor {...author} />
+        </div>
+      </article>
+      <JsonLd
+        data={{
+          "@context": "https://schema.org",
+          "@type": "BlogPosting",
+          headline,
+          datePublished: postDate,
+          dateModified: postDate,
+          author: {
+            "@type": "Person",
+            name: author.name,
+            url: author.href,
+          },
+        }}
+      />
+    </>
+  );
+}
diff --git a/apps/katt.dev/src/app/post/layout.tsx b/apps/katt.dev/src/app/post/layout.tsx
@@ -0,0 +1,3 @@
+export default function Layout(props: { children: React.ReactNode }) {
+  return <div className="p-6">{props.children}</div>;
+}
diff --git a/apps/katt.dev/src/app/post/ui/PostAuthor.tsx b/apps/katt.dev/src/app/post/ui/PostAuthor.tsx
@@ -0,0 +1,30 @@
+import Image from "next/image";
+import { ReactNode } from "react";
+
+export function PostAuthor(props: {
+  name: string;
+  title: ReactNode;
+  avatarSrc: string;
+  href: string;
+}) {
+  return (
+    <div className="relative mt-8 flex items-center gap-x-4">
+      <Image
+        src={props.avatarSrc}
+        alt={props.name}
+        width={40}
+        height={40}
+        className="h-10 w-10 rounded-full"
+      />
+      <div className="text-sm leading-6">
+        <p className="font-semibold text-muted">
+          <a href={props.href}>
+            <span className="absolute inset-0"></span>
+            {props.name}
+          </a>
+        </p>
+        <p className="text-fg">{props.title}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/katt.dev/src/app/shiki/_snippet.md b/apps/katt.dev/src/app/shiki/_snippet.md
@@ -0,0 +1,4 @@
+### Title
+
+- some
+- paragraphs
diff --git a/apps/katt.dev/src/app/shiki/_snippet.ts b/apps/katt.dev/src/app/shiki/_snippet.ts
@@ -1,4 +1,7 @@
-console.log();
+import { z } from "zod";
+const foozzz = "bar";
 
-const hello = 'world';
-//      ^?
+// ..
+// ..
+const parsed = z.string().parse("foo");
+//     ^?
diff --git a/apps/katt.dev/src/app/shiki/page.tsx b/apps/katt.dev/src/app/shiki/page.tsx
@@ -1,14 +1,28 @@
 import { Code } from "@/ui/Code";
-import { Suspense } from "react";
 export default async function Page() {
   return (
-    <ul className="space-y-6">
-      <Suspense>
+    <main className="prose dark:prose-invert p-8">
+      <h1>Shikiii code</h1>
+      <h2>Default stuff</h2>
+      <ul className="space-y-6">
         <Code code={`console.log()`} lang="ts" />
-      </Suspense>
-      <Suspense>
         <Code file={`/src/app/shiki/_snippet.ts`} lang="ts" />
-      </Suspense>
-    </ul>
+      </ul>
+
+      <h2>Classic</h2>
+      <ul className="space-y-6">
+        <Code code={`console.log()`} lang="ts" renderer="classic" />
+        <Code
+          file={`/src/app/shiki/_snippet.ts`}
+          lang="ts"
+          renderer="classic"
+        />
+      </ul>
+
+      <h2>Markdown</h2>
+      <ul className="space-y-6">
+        <Code file={`/src/app/shiki/_snippet.md`} lang="markdown" />
+      </ul>
+    </main>
   );
 }
diff --git a/apps/katt.dev/src/ui/Code.css b/apps/katt.dev/src/ui/Code.css
@@ -0,0 +1,11 @@
+@media (prefers-color-scheme: dark) {
+  .shiki,
+  .shiki span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    /* Optional, if you also want font styles */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+}
diff --git a/apps/katt.dev/src/ui/Code.tsx b/apps/katt.dev/src/ui/Code.tsx
@@ -3,7 +3,15 @@ import fs from "fs/promises";
 
 import "@shikijs/twoslash/style-classic.css";
 import "@shikijs/twoslash/style-rich.css";
+import "./Code.css";
+import { Suspense } from "react";
 
+async function Render(props: ShikiSchemaInput) {
+  const html = await getShikiHtml(props);
+  return (
+    <div dangerouslySetInnerHTML={{ __html: html }} className="not-prose" />
+  );
+}
 export async function Code(
   props: Omit<ShikiSchemaInput, "code"> &
     (
@@ -18,9 +26,11 @@ export async function Code(
     )
 ) {
   const code =
-    props.code ??
-    (await fs.readFile(`${process.cwd()}/${props.file}`, "utf-8"));
+    props.code ?? (await fs.readFile(`${process.cwd()}${props.file}`, "utf-8"));
 
-  const html = await getShikiHtml({ ...props, code });
-  return <div dangerouslySetInnerHTML={{ __html: html }} />;
+  return (
+    <Suspense fallback={<pre>{props.code}</pre>}>
+      <Render {...props} code={code} />
+    </Suspense>
+  );
 }
diff --git a/apps/katt.dev/src/ui/LinkList.tsx b/apps/katt.dev/src/ui/LinkList.tsx
@@ -5,13 +5,15 @@ export function LinkList(props: {
   }[];
 }) {
   return (
-    <ul className="flex list-none space-x-4">
+    <ul className="flex list-none space-x-4 text-fg">
       {props.items.map((link) => (
-        <li
-          key={link.href}
-          className="flex flex-1 lowercase text-underline-500 underline"
-        >
-          <a href={link.href}>{link.title}</a>
+        <li key={link.href} className="flex flex-1">
+          <a
+            href={link.href}
+            className="hover:text-muted lowercase text-underline-500 underline"
+          >
+            {link.title}
+          </a>
         </li>
       ))}
     </ul>