Merge pull request #1128 from kkhys/staging

Production deploy

apps/admin/package.json

@@ -31,14 +31,14 @@
     "@storybook/nextjs": "7.6.19",
     "@storybook/react": "7.6.19",
     "@storybook/testing-library": "0.2.2",
-    "@types/node": "20.13.0",
+    "@types/node": "20.14.2",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "dotenv-cli": "7.4.2",
     "eslint": "8.57.0",
-    "prettier": "3.2.5",
+    "prettier": "3.3.1",
     "storybook": "7.6.19",
-    "tailwindcss": "3.4.3",
+    "tailwindcss": "3.4.4",
     "typescript": "5.4.5"
   },
   "eslintConfig": {

apps/storybook/package.json

@@ -29,10 +29,10 @@
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react-swc": "3.7.0",
     "eslint": "8.57.0",
-    "prettier": "3.2.5",
+    "prettier": "3.3.1",
     "storybook": "7.6.19",
     "typescript": "5.4.5",
-    "vite": "5.2.12"
+    "vite": "5.2.13"
   },
   "eslintConfig": {
     "root": true,

apps/web/package.json

@@ -21,7 +21,7 @@
     "test:e2e:codegen": "pnpm playwright codegen"
   },
   "dependencies": {
-    "@hookform/resolvers": "3.4.2",
+    "@hookform/resolvers": "3.6.0",
     "@kkhys/api": "workspace:*",
     "@kkhys/auth": "workspace:*",
     "@kkhys/db": "workspace:*",
@@ -30,11 +30,11 @@
     "@next/third-parties": "14.2.3",
     "@radix-ui/react-icons": "1.3.0",
     "@t3-oss/env-nextjs": "0.10.1",
-    "@tanstack/react-query": "5.40.0",
-    "@tanstack/react-query-devtools": "5.40.0",
-    "@trpc/client": "11.0.0-rc.382",
-    "@trpc/react-query": "11.0.0-rc.382",
-    "@trpc/server": "11.0.0-rc.382",
+    "@tanstack/react-query": "5.40.1",
+    "@tanstack/react-query-devtools": "5.40.1",
+    "@trpc/client": "11.0.0-rc.396",
+    "@trpc/react-query": "11.0.0-rc.396",
+    "@trpc/server": "11.0.0-rc.396",
     "@vercel/analytics": "1.3.1",
     "@vercel/edge-config": "1.1.1",
     "bech32": "2.0.0",
@@ -45,8 +45,8 @@
     "emoji-regex": "10.3.0",
     "feed": "4.2.2",
     "framer-motion": "11.2.10",
-    "lucide-react": "0.381.0",
-    "mdast-util-to-hast": "13.1.0",
+    "lucide-react": "0.390.0",
+    "mdast-util-to-hast": "13.2.0",
     "next": "14.2.3",
     "next-contentlayer": "0.3.4",
     "next-themes": "0.3.0",
@@ -64,6 +64,7 @@
     "shikiji": "0.10.2",
     "superjson": "2.2.1",
     "unist-util-visit": "5.0.0",
+    "use-debounce": "10.0.1",
     "zod": "3.23.8"
   },
   "devDependencies": {
@@ -78,21 +79,21 @@
     "@storybook/addon-interactions": "7.6.19",
     "@storybook/addon-links": "7.6.19",
     "@storybook/blocks": "7.6.19",
-    "@storybook/csf": "0.1.7",
+    "@storybook/csf": "0.1.8",
     "@storybook/jest": "0.2.3",
     "@storybook/manager-api": "7.6.19",
     "@storybook/nextjs": "7.6.19",
     "@storybook/react": "7.6.19",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/jest-dom": "6.4.5",
-    "@testing-library/react": "15.0.7",
+    "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
     "@types/bs58": "4.0.4",
     "@types/hast": "3.0.4",
     "@types/jest": "29.5.12",
     "@types/mdast": "4.0.4",
     "@types/mdx": "2.0.13",
-    "@types/node": "20.13.0",
+    "@types/node": "20.14.2",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@types/unist": "3.0.2",
@@ -105,14 +106,14 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-html-reporters": "3.1.7",
-    "jiti": "1.21.0",
+    "jiti": "1.21.3",
     "plaiceholder": "3.0.0",
-    "prettier": "3.2.5",
+    "prettier": "3.3.1",
     "remark": "15.0.1",
     "shikiji-transformers": "0.10.2",
     "storybook": "7.6.19",
     "strip-markdown": "6.0.0",
-    "tailwindcss": "3.4.3",
+    "tailwindcss": "3.4.4",
     "ts-node": "10.9.2",
     "typescript": "5.4.5",
     "unist-util-is": "6.0.0"

apps/web/src/app/api/site-logo/route.tsx

@@ -0,0 +1,53 @@
+import type { NextRequest } from 'next/server';
+import satori from 'satori';
+
+export const runtime = 'edge';
+
+export const GET = async (request: NextRequest) => {
+  const interMedium = await fetch(new URL('../../../../assets/fonts/Inter-Medium.ttf', import.meta.url)).then((res) =>
+    res.arrayBuffer(),
+  );
+
+  const searchParams = request.nextUrl.searchParams;
+  const theme = searchParams.get('theme') ?? 'light';
+
+  const svg = await satori(
+    <div
+      style={{
+        fontSize: 130,
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontFamily: 'Inter',
+        fontSmooth: 'antialiased',
+        color: theme === 'dark' ? '#111113' : '#e6e5e5',
+        backgroundColor: theme === 'dark' ? '#e6e5e5' : '#111113',
+      }}
+    >
+      K
+    </div>,
+    {
+      width: 256,
+      height: 256,
+      fonts: [
+        {
+          name: 'Inter',
+          data: interMedium,
+          style: 'normal',
+          weight: 500,
+        },
+      ],
+    },
+  );
+
+  return new Response(svg, {
+    status: 200,
+    headers: {
+      'Content-Type': 'image/svg+xml',
+      'X-Content-Type-Options': 'nosniff',
+      'cache-control': 'public, immutable, no-transform, max-age=31536000',
+    },
+  });
+};

apps/web/src/app/posts/[slug]/page.tsx

@@ -8,6 +8,8 @@ import { JsonLd } from './json-ld';
 
 import '#/styles/code-block.css';
 
+import { Suspense } from 'react';
+
 /**
  * Retrieves a post object by its slug.
  *
@@ -50,7 +52,9 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
   return (
     <>
       <JsonLd post={post} />
-      <ArticleLayout post={post} />
+      <Suspense fallback={null}>
+        <ArticleLayout post={post} />
+      </Suspense>
     </>
   );
 };

apps/web/src/app/posts/page.tsx

@@ -25,7 +25,7 @@ const Page = () => (
       <header>
         <h1 className='font-sans font-medium'>Blog</h1>
       </header>
-      <Suspense>
+      <Suspense fallback={null}>
         <CategoryTabs />
       </Suspense>
     </Container>

apps/web/src/config/index.ts

@@ -1,2 +1,2 @@
 export * from './constants';
-export * from './searchItems';
+export * from './search-items';

apps/web/src/config/post/category.ts

@@ -0,0 +1,25 @@
+import type { Base } from '.';
+import { extractTitle } from '../../lib/contentlayer/utils';
+
+export type Category = Base;
+export type CategoryTitle = (typeof categories)[number]['title'];
+
+export const categories = [
+  {
+    title: 'Tech',
+    slug: 'tech',
+    emoji: '👩🏻‍💻',
+  },
+  {
+    title: 'Life',
+    slug: 'life',
+    emoji: '🕯️',
+  },
+  // {
+  //   title: 'Fashion',
+  //   slug: 'fashion',
+  //   emoji: '👗',
+  // },
+] as const;
+
+export const categoryTitles = categories.map(extractTitle);

apps/web/src/config/post/index.ts

@@ -0,0 +1,4 @@
+export type Base = Record<'title' | 'slug' | 'emoji', string>;
+
+export * from './tag';
+export * from './category';

apps/web/src/config/post/tag/fashion.ts

@@ -0,0 +1,9 @@
+export const fashionTags = [
+  {
+    title: 'Handmade',
+    slug: 'handmade',
+    emoji: '🧶',
+  },
+] as const;
+
+export type FashionTags = typeof fashionTags;

apps/web/src/config/post/tag/index.ts

@@ -0,0 +1,15 @@
+import type { Base } from '..';
+import { extractTitle } from '../../../lib/contentlayer/utils';
+import { fashionTags } from './fashion';
+import { lifeTags } from './life';
+import { techTags } from './tech';
+
+export type Tag = Base;
+export type AllTagsTitle = (typeof allTags)[number]['title'];
+
+export const allTags = [...techTags, ...lifeTags, ...fashionTags];
+export const allTagTitles = allTags.map(extractTitle);
+
+export * from './tech';
+export * from './life';
+export * from './fashion';

apps/web/src/config/post/tag/life.ts

@@ -0,0 +1,24 @@
+export const lifeTags = [
+  {
+    title: 'Travel',
+    slug: 'travel',
+    emoji: '🌎',
+  },
+  {
+    title: 'Memorial',
+    slug: 'memorial',
+    emoji: '🌸',
+  },
+  {
+    title: 'Essay',
+    slug: 'essay',
+    emoji: '📝',
+  },
+  {
+    title: 'Poor writing',
+    slug: 'poor-writing',
+    emoji: '🗑️',
+  },
+] as const;
+
+export type LifeTags = typeof lifeTags;

apps/web/src/config/post/tag/tech.ts

@@ -0,0 +1,29 @@
+export const techTags = [
+  {
+    title: 'Release',
+    slug: 'release',
+    emoji: '🚀',
+  },
+  {
+    title: 'TypeScript',
+    slug: 'typescript',
+    emoji: '📘',
+  },
+  {
+    title: 'React',
+    slug: 'react',
+    emoji: '⚛️',
+  },
+  {
+    title: 'Play Framework',
+    slug: 'play-framework',
+    emoji: '▶️',
+  },
+  {
+    title: 'Next.js',
+    slug: 'next-js',
+    emoji: '🔼',
+  },
+] as const;
+
+export type TechTags = typeof techTags;