switch to nextjs site

Author: b5

tailwindui-protocol/jsconfig.json renamed to jsconfig.json

@@ -1,18 +1,50 @@
 {
-  "name": "n0_website",
-  "version": "1.0.0",
-  "license": "MIT",
+  "name": "tailwindui-protocol",
+  "version": "0.1.0",
+  "private": true,
   "scripts": {
-    "build": "parcel build src/styles/style.css --dist-dir static/styles --no-source-maps && zola build",
-    "dev": "node dev",
-    "parcel": "parcel watch src/styles/style.css --dist-dir static/styles --no-hmr --no-source-maps",
-    "build_index": "node build_index"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
   },
+  "browserslist": "defaults, not ie <= 11",
   "dependencies": {
-    "autoprefixer": "10.4.7",
-    "parcel": "2.0.0",
-    "postcss": "8.2.1",
-    "tailwindcss": "3.1.6",
-    "toml": "^3.0.0"
+    "@algolia/autocomplete-core": "^1.7.3",
+    "@headlessui/react": "^1.7.15",
+    "@headlessui/tailwindcss": "^0.2.0",
+    "@mdx-js/loader": "^2.1.5",
+    "@mdx-js/react": "^2.1.5",
+    "@next/mdx": "^13.0.3",
+    "@sindresorhus/slugify": "^2.1.1",
+    "@tailwindcss/typography": "^0.5.8",
+    "acorn": "^8.8.1",
+    "autoprefixer": "^10.4.7",
+    "clsx": "^1.2.0",
+    "fast-glob": "^3.3.0",
+    "flexsearch": "^0.7.31",
+    "framer-motion": "7.8.1",
+    "mdast-util-to-string": "^3.2.0",
+    "mdx-annotations": "^0.1.1",
+    "next": "13.4.12",
+    "next-themes": "^0.2.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-highlight-words": "^0.20.0",
+    "remark": "^14.0.2",
+    "remark-gfm": "^3.0.1",
+    "remark-mdx": "^2.3.0",
+    "shiki": "^0.11.1",
+    "simple-functional-loader": "^1.2.1",
+    "tailwindcss": "^3.3.3",
+    "unist-util-filter": "^4.0.1",
+    "unist-util-visit": "^4.1.1",
+    "zustand": "^4.3.2"
+  },
+  "devDependencies": {
+    "eslint": "8.45.0",
+    "eslint-config-next": "13.4.12",
+    "prettier": "^2.8.7",
+    "prettier-plugin-tailwindcss": "^0.2.6"
   }
 }

tailwindui-protocol/mdx-components.jsx renamed to mdx-components.jsx

@@ -1,54 +1,94 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-      './templates/**/*.html',
-      './static/js/**/*.js',
-  ],
- darkMode: 'class', // or 'media' or 'class'
- theme: {
-   extend: {
-    backgroundImage: {
-      'iroh-kv-1': "url('/img/kv/iroh-kv-1.png')",
-      'iroh-kv-2': "url('/img/kv/iroh-kv-2.png')",
-      'iroh-kv-3': "url('/img/kv/iroh-kv-3.png')",
-      'iroh-kv-4': "url('/img/kv/iroh-kv-4.png')",
-    },
-    colors: {
-     'n0pink': {
-        100: '#FFF4F3',
-        200: '#FFE9E6',
-        300: '#FFD2CC',
-        400: '#FFBCB3',
-        500: '#FFAC9C',
-        600: '#E2847D',
-        700: '#CC6E66',
-        800: '#AF584F',
-        900: '#99463D',
-     },
-     'irohGray': {
-        50 : "#FAFAFA",
-        100 : "#F8F8F8",
-        200 : "#E4E4E7",
-        300 : "#D4D4D8",
-        400 : "#A1A1AA",
-        500 : "#71717A",
-        600 : "#52525B",
-        700 : "#3B3B3B",
-        800 : "#27272A",
-        900 : "#18181B",
-        1000 : "#0E0E0F",
-     },
-     'irohPurple': {
-        500: "#7C7CFF",
-     }
+  content: ['./src/**/*.{js,mjs,jsx,mdx}'],
+  darkMode: 'class',
+  theme: {
+    fontSize: {
+      '2xs': ['0.75rem', { lineHeight: '1.25rem' }],
+      xs: ['0.8125rem', { lineHeight: '1.5rem' }],
+      sm: ['0.875rem', { lineHeight: '1.5rem' }],
+      base: ['1rem', { lineHeight: '1.75rem' }],
+      lg: ['1.125rem', { lineHeight: '1.75rem' }],
+      xl: ['1.25rem', { lineHeight: '1.75rem' }],
+      '2xl': ['1.5rem', { lineHeight: '2rem' }],
+      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
+      '5xl': ['3rem', { lineHeight: '1' }],
+      '6xl': ['3.75rem', { lineHeight: '1' }],
+      '7xl': ['4.5rem', { lineHeight: '1' }],
+      '8xl': ['6rem', { lineHeight: '1' }],
+      '9xl': ['8rem', { lineHeight: '1' }],
     },
-    fontFamily: {
-      'space': ['Space Grotesk', 'sans-serif'], 
-      'space-mono': ['Space Mono', 'sans-serif'] 
+    typography: require('./typography'),
+    extend: {
+      fontFamily: {
+        'space': ['Space Grotesk', 'sans-serif'], 
+        'spaceMono': ['Space Mono', 'sans-serif'] 
+      },
+      boxShadow: {
+        glow: '0 0 4px rgb(0 0 0 / 0.1)',
+      },
+      maxWidth: {
+        lg: '33rem',
+        '2xl': '40rem',
+        '3xl': '50rem',
+        '5xl': '66rem',
+      },
+      backgroundImage: {
+        'iroh-kv-1': "url('/img/kv/iroh-kv-1.png')",
+        'iroh-kv-2': "url('/img/kv/iroh-kv-2.png')",
+        'iroh-kv-3': "url('/img/kv/iroh-kv-3.png')",
+        'iroh-kv-4': "url('/img/kv/iroh-kv-4.png')",
+      },
+      opacity: {
+        1: '0.01',
+        2.5: '0.025',
+        7.5: '0.075',
+        15: '0.15',
+      },
+      colors: {
+        'n0pink': {
+           100: '#FFF4F3',
+           200: '#FFE9E6',
+           300: '#FFD2CC',
+           400: '#FFBCB3',
+           500: '#FFAC9C',
+           600: '#E2847D',
+           700: '#CC6E66',
+           800: '#AF584F',
+           900: '#99463D',
+        },
+        'irohGray': {
+           50 : "#FAFAFA",
+           100 : "#F8F8F8",
+           200 : "#E4E4E7",
+           300 : "#D4D4D8",
+           400 : "#A1A1AA",
+           500 : "#71717A",
+           600 : "#52525B",
+           700 : "#3B3B3B",
+           800 : "#27272A",
+           900 : "#18181B",
+           1000 : "#0E0E0F",
+        },
+        'irohPurple': {
+          // TODO - actual color gradation
+          50: "#7C7CFF",
+          100: "#7C7CFF",
+          200: "#7C7CFF",
+          300: "#7C7CFF",
+          400: "#7C7CFF",
+          500: "#7C7CFF",
+          600: "#7C7CFF",
+          700: "#7C7CFF",
+          800: "#7C7CFF",
+          900: "#7C7CFF",
+        }
+      },
     },
-   },
- },
- variants: {
-   extend: {},
- },
- plugins: [],
-}
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+    require('@headlessui/tailwindcss'),
+  ],
+}