initial project setup

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["preval"]
+}

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.mdx]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: 'react-app',
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'jsx-a11y/anchor-is-valid': 'off',
+  },
+}

.prettierignore

@@ -0,0 +1 @@
+**/*.mdx

_redirects

@@ -0,0 +1,31 @@
+/docs                               /docs/installation                302
+/docs/what-is-tailwind              /                                 302
+/docs/flexbox-display               /docs/display                     302
+/docs/spacing                       /docs/padding                     302
+/docs/shadows                       /docs/box-shadow                  302
+/docs/whitespace-and-wrapping       /docs/whitespace                  302
+/docs/floats                        /docs/float                       302
+/docs/positioning                   /docs/position                    302
+/docs/fonts                         /docs/font-family                 302
+/docs/text-sizing                   /docs/font-size                   302
+/docs/text-style                    /docs/font-style                  302
+/docs/text-alignment                /docs/text-align                  302
+/docs/vertical-alignment            /docs/vertical-align              302
+/docs/flexbox-direction             /docs/flex-direction              302
+/docs/flexbox-wrapping              /docs/flex-wrap                   302
+/docs/flexbox-align-items           /docs/align-items                 302
+/docs/flexbox-align-content         /docs/align-content               302
+/docs/flexbox-align-self            /docs/align-self                  302
+/docs/flexbox-justify-content       /docs/justify-content             302
+/docs/flexbox-flex                  /docs/flex                        302
+/docs/flexbox-flex-grow             /docs/flex-grow                   302
+/docs/flexbox-flex-shrink           /docs/flex-shrink                 302
+/docs/svg                           /docs/fill                        302
+/docs/using-with-sass-less-stylus   /docs/using-with-preprocessors    302
+/docs/state-variants                /docs/pseudo-class-variants       302
+/docs/colors                        /docs/customizing-colors          302
+/screencasts                        /course                           302
+/discord                            https://discord.gg/7NF8GNe        302
+/forum                              https://github.com/tailwindlabs/tailwindcss/discussions        302
+/docs/examples/*                    /components/:splat                302
+/components/grids                   /components/flexbox-grids         302

jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": ["src/components/*"],
+      "@/layouts/*": ["src/layouts/*"],
+      "@/utils/*": ["src/utils/*"],
+      "@/hooks/*": ["src/hooks/*"],
+      "@/img/*": ["src/img/*"]
+    }
+  }
+}

netlify.toml

@@ -0,0 +1,3 @@
+[build]
+  publish = "out/"
+  command = "yarn export && mv _redirects out/_redirects"

next.config.js

@@ -0,0 +1,112 @@
+const path = require('path')
+const querystring = require('querystring')
+const { createLoader } = require('simple-functional-loader')
+const frontMatter = require('front-matter')
+const { withTableOfContents } = require('./remark/withTableOfContents')
+const { withSyntaxHighlighting } = require('./remark/withSyntaxHighlighting')
+const { withProse } = require('./remark/withProse')
+const { withNextLinks } = require('./remark/withNextLinks')
+const minimatch = require('minimatch')
+const withCodeSamples = require('./remark/withCodeSamples')
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
+
+const fallbackLayouts = {
+  'src/pages/docs/**/*': ['@/layouts/DocumentationLayout', 'DocumentationLayout'],
+  'src/pages/components/**/*': ['@/layouts/ComponentsLayout', 'ComponentsLayout'],
+  'src/pages/course/**/*': ['@/layouts/CourseLayout', 'CourseLayout'],
+}
+
+const fallbackDefaultExports = {
+  'src/pages/{docs,components}/**/*': ['@/layouts/ContentsLayout', 'ContentsLayout'],
+  'src/pages/course/**/*': ['@/layouts/VideoLayout', 'VideoLayout'],
+}
+
+module.exports = withBundleAnalyzer({
+  pageExtensions: ['js', 'jsx', 'mdx'],
+  experimental: {
+    modern: true,
+  },
+  webpack(config, options) {
+    config.module.rules.push({
+      test: /\.(png|jpe?g|gif|svg)$/i,
+      use: [
+        {
+          loader: 'file-loader',
+          options: {
+            publicPath: '/_next',
+            name: 'static/media/[name].[hash].[ext]',
+          },
+        },
+      ],
+    })
+
+    config.module.rules.push({
+      test: /\.mdx$/,
+      use: [
+        options.defaultLoaders.babel,
+        createLoader(function (source) {
+          return source + `\nMDXContent.layoutProps = layoutProps\n`
+        }),
+        {
+          loader: '@mdx-js/loader',
+          options: {
+            remarkPlugins: [
+              withCodeSamples,
+              /*withProse,*/ withTableOfContents,
+              withSyntaxHighlighting,
+              withNextLinks,
+            ],
+          },
+        },
+        createLoader(function (source) {
+          let { meta: fields } = querystring.parse(this.resourceQuery.substr(1))
+          let { attributes: meta, body } = frontMatter(source)
+          if (fields) {
+            for (let field in meta) {
+              if (!fields.split(',').includes(field)) {
+                delete meta[field]
+              }
+            }
+          }
+
+          let extra = []
+          let resourcePath = path.relative(__dirname, this.resourcePath)
+
+          if (!/^\s*export\s+(var|let|const)\s+Layout\s+=/m.test(source)) {
+            for (let glob in fallbackLayouts) {
+              if (minimatch(resourcePath, glob)) {
+                extra.push(
+                  `import { ${fallbackLayouts[glob][1]} as _Layout } from '${fallbackLayouts[glob][0]}'`,
+                  'export const Layout = _Layout'
+                )
+                break
+              }
+            }
+          }
+
+          if (!/^\s*export\s+default\s+/m.test(source.replace(/```(.*?)```/gs, ''))) {
+            for (let glob in fallbackDefaultExports) {
+              if (minimatch(resourcePath, glob)) {
+                extra.push(
+                  `import { ${fallbackDefaultExports[glob][1]} as _Default } from '${fallbackDefaultExports[glob][0]}'`,
+                  'export default _Default'
+                )
+                break
+              }
+            }
+          }
+
+          return [
+            ...(typeof fields === 'undefined' ? extra : []),
+            typeof fields === 'undefined' ? body : '',
+            `export const meta = ${JSON.stringify(meta)}`,
+          ].join('\n\n')
+        }),
+      ],
+    })
+
+    return config
+  },
+})

package.json

@@ -1,17 +1,57 @@
 {
-  "name": "og-css-docs",
-  "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "export": "next export",
-    "deploy": "npm run build && npm run export"
+    "export": "next build && next export"
   },
+  "browserslist": [
+    "> 1%"
+  ],
   "dependencies": {
-    "next": "9.4.4",
+    "@badrap/bar-of-progress": "^0.1.1",
+    "@docsearch/react": "^1.0.0-alpha.27",
+    "@mdx-js/loader": "^1.6.13",
+    "@next/bundle-analyzer": "^9.4.4",
+    "@next/mdx": "^9.4.4",
+    "@reach/rect": "^0.10.5",
+    "@sindresorhus/slugify": "^1.1.0",
+    "autoprefixer": "^9.8.5",
+    "babel-plugin-preval": "^5.0.0",
+    "brotli-size": "^4.0.0",
+    "clean-css": "^4.2.3",
+    "clsx": "^1.1.1",
+    "deasync": "^0.1.20",
+    "dlv": "^1.1.3",
+    "file-loader": "^6.0.0",
+    "focus-visible": "^5.1.0",
+    "front-matter": "^4.0.2",
+    "glob": "^7.1.6",
+    "gsap": "^3.4.2",
+    "gzip-size": "^5.1.1",
+    "minimatch": "^3.0.4",
+    "next": "^9.5.1",
+    "postcss-nested": "^4.2.3",
+    "prismjs": "^1.20.0",
     "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "react-dom": "16.13.1",
+    "redent": "^3.0.0",
+    "simple-functional-loader": "^1.2.1",
+    "stringify-object": "^3.3.0",
+    "tailwindcss": "^1.6.2",
+    "unist-util-visit": "^2.0.3"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "2.x",
+    "@typescript-eslint/parser": "2.x",
+    "babel-eslint": "10.x",
+    "eslint": "6.x",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-plugin-flowtype": "4.x",
+    "eslint-plugin-import": "2.x",
+    "eslint-plugin-jsx-a11y": "6.x",
+    "eslint-plugin-react": "7.x",
+    "eslint-plugin-react-hooks": "2.x"
   }
 }