build(app): move to panda css and update content-layer

.gitignore

@@ -1,3 +1,4 @@
+styled-system
 .contentlayer
 
 # dependencies

contentlayer.config.ts

@@ -1,85 +1,83 @@
-import { defineDocumentType, makeSource } from 'contentlayer/source-files';
+import {
+  ComputedFields,
+  defineDocumentType,
+  makeSource,
+} from 'contentlayer/source-files';
+import readingTime from 'reading-time';
+import rehypePrism from 'rehype-prism-plus';
+
+const computedFields: ComputedFields = {
+  readingTime: {
+    type: 'json',
+    resolve: (doc) => readingTime(doc.body.raw, { wordsPerMinute: 150 }),
+  },
+  slug: {
+    type: 'string',
+    resolve: (doc) => doc._raw.sourceFileName.replace(/\.mdx$/, ''),
+  },
+};
 
 export const Accomplishments = defineDocumentType(() => ({
   name: 'Accomplishments',
-  filePathPattern: `accomplishments/**/*.md`,
+  filePathPattern: `accomplishments/**/*.mdx`,
+  contentType: 'mdx',
   fields: {
     title: { type: 'string', required: true },
     date: { type: 'date', required: true },
     icon: { type: 'string', required: true },
     location: { type: 'string', required: true },
   },
-  computedFields: {
-    url: {
-      type: 'string',
-      resolve: (accomplishment) =>
-        `accomplishments/${accomplishment._raw.flattenedPath}`,
-    },
-  },
+  computedFields,
 }));
 
 export const Blog = defineDocumentType(() => ({
   name: 'Blog',
-  filePathPattern: `blogs/**/*.md`,
+  filePathPattern: `blogs/**/*.mdx`,
+  contentType: 'mdx',
   fields: {
     title: { type: 'string', required: true },
     date: { type: 'date', required: true },
   },
-  computedFields: {
-    url: {
-      type: 'string',
-      resolve: (blog) => `blogs/${blog._raw.flattenedPath}`,
-    },
-  },
+  computedFields,
 }));
 
 export const Experiences = defineDocumentType(() => ({
   name: 'Experiences',
-  filePathPattern: `experiences/**/*.md`,
+  filePathPattern: `experiences/**/*.mdx`,
+  contentType: 'mdx',
   fields: {
     title: { type: 'string', required: true },
     date: { type: 'date', required: true },
   },
-  computedFields: {
-    url: {
-      type: 'string',
-      resolve: (experience) => `experiences/${experience._raw.flattenedPath}`,
-    },
-  },
+  computedFields,
 }));
 
 export const Project = defineDocumentType(() => ({
   name: 'Project',
-  filePathPattern: `projects/**/*.md`,
+  filePathPattern: `projects/**/*.mdx`,
+  contentType: 'mdx',
   fields: {
     title: { type: 'string', required: true },
     date: { type: 'string', required: true },
   },
-  computedFields: {
-    url: {
-      type: 'string',
-      resolve: (project) => `projects/${project._raw.flattenedPath}`,
-    },
-  },
+  computedFields,
 }));
 
 export const Publications = defineDocumentType(() => ({
   name: 'Publications',
-  filePathPattern: `publications/**/*.md`,
+  filePathPattern: `publications/**/*.mdx`,
+  contentType: 'mdx',
   fields: {
     title: { type: 'string', required: true },
     date: { type: 'date', required: true },
   },
-  computedFields: {
-    url: {
-      type: 'string',
-      resolve: (publication) =>
-        `publications/${publication._raw.flattenedPath}`,
-    },
-  },
+  computedFields,
 }));
 
 export default makeSource({
   contentDirPath: 'contents',
   documentTypes: [Accomplishments, Blog, Experiences, Project, Publications],
+  mdx: {
+    rehypePlugins: [rehypePrism],
+  },
 });

package.json

@@ -6,7 +6,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "format": "prettier --write ./src/**/* ./components/**/*",
+    "format": "prettier --write ./src/**/*",
     "type-check": "tsc --pretty --noEmit",
     "test": "jest",
     "test:coverage": "jest --coverage",
@@ -16,11 +16,9 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.8.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@stitches/react": "^1.2.8",
     "contentlayer": "^0.3.4",
     "framer-motion": "^10.15.1",
     "next": "^13.4.13",
@@ -32,6 +30,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
+    "@pandacss/dev": "^0.15.0",
     "@storybook/addon-actions": "^7.2.2",
     "@storybook/addon-essentials": "^7.2.2",
     "@storybook/addon-links": "^7.2.2",
@@ -51,6 +50,8 @@
     "jest": "^27.4.4",
     "prettier": "^2.7.1",
     "react-test-renderer": "^18.2.0",
+    "reading-time": "^1.5.0",
+    "rehype-prism-plus": "^1.6.3",
     "typescript": "5.1.6"
   }
 }

panda.config.ts

@@ -0,0 +1,129 @@
+import { defineConfig, defineGlobalStyles } from '@pandacss/dev';
+
+import { textRecipe } from 'src/components/recipes/text';
+
+const globalCss = defineGlobalStyles({
+  html: {
+    padding: 0,
+    margin: 0,
+    boxSizing: 'border-box',
+  },
+
+  body: {
+    padding: 0,
+    margin: 0,
+    height: '100vh',
+    color: 'white',
+  },
+
+  '*': {
+    boxSizing: 'inherit',
+    scrollbarWidth: 'thin',
+    scrollbarColor: 'transparent transparent',
+    '&::-webkit-scrollbar': {
+      width: '0px',
+    },
+
+    '&::-webkit-scrollbar-track': {
+      background: 'transparent',
+    },
+
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: 'transparent',
+    },
+  },
+
+  '*:before': {
+    boxSizing: 'inherit',
+  },
+
+  '*:after': {
+    boxSizing: 'inherit',
+  },
+
+  a: { color: 'inherit', textDecoration: 'none' },
+
+  p: {
+    margin: 0,
+  },
+
+  'input::placeholder': {
+    color: 'white',
+    opacity: 1,
+  },
+});
+
+export default defineConfig({
+  // Whether to use css reset
+  preflight: true,
+
+  // Where to look for your css declarations
+  include: [
+    './src/components/**/*.{ts,tsx,js,jsx}',
+    './src/app/**/*.{ts,tsx,js,jsx}',
+  ],
+
+  // Files to exclude
+  exclude: [],
+
+  jsxFramework: 'react',
+
+  // Useful for theme customization
+  theme: {
+    extend: {
+      recipes: {
+        text: textRecipe,
+      },
+      keyframes: {
+        moveDown: {
+          '0%': { top: '-10rem' },
+          '100%': {
+            top: '-10rem',
+          },
+          '80%': {
+            top: '50rem',
+          },
+        },
+
+        moveUp: {
+          '0%': { top: '-10rem' },
+          '100%': {
+            top: '-10rem',
+          },
+          '80%': {
+            top: '50rem',
+          },
+        },
+
+        moveRight: {
+          '0%': {
+            left: '-10rem',
+          },
+          '100%': {
+            left: '-10rem',
+          },
+          '80%': {
+            left: '80rem',
+          },
+        },
+
+        moveLeft: {
+          '0%': {
+            right: '-10rem',
+          },
+          '100%': {
+            right: '-10rem',
+          },
+          '80%': {
+            right: '80rem',
+          },
+        },
+      },
+    },
+  },
+
+  // The output directory for your css system
+  outdir: 'styled-system',
+
+  globalCss,
+});