[portal.js/examples][s]: added nextjs-tailwind-mdx to examples

examples/nextjs-tailwind-mdx/pages/[...slug].js

@@ -0,0 +1,68 @@
+import fs from 'fs'
+import path from 'path'
+
+import parse from '../lib/mdx.js'
+import MdxPage from '../components/MDX'
+
+
+export default function Page({ source, frontMatter, title }) {
+  return (
+    <MdxPage source={source} frontMatter={frontMatter} />
+  )
+}
+
+
+const CONTENT_PATH = path.join(process.cwd(), 'content/')
+
+export const getStaticProps = async ({ params }) => {
+  const mdxPath = path.join(CONTENT_PATH, `${params.slug.join('/')}.mdx`)
+  const postFilePath = fs.existsSync(mdxPath) ? mdxPath : mdxPath.slice(0, -1)
+  const source = fs.readFileSync(postFilePath)
+
+  const { mdxSource, frontMatter } = await parse(source)
+
+  return {
+    props: {
+      source: mdxSource,
+      frontMatter: frontMatter,
+      title: frontMatter.title || ''
+    },
+  }
+}
+
+export const getStaticPaths = async () => {
+  const walkSync = (dir, filelist = []) => {
+    fs.readdirSync(dir).forEach(file => {
+      const tpath = fs.statSync(path.join(dir, file))
+      if (tpath.isDirectory()) {
+        filelist = walkSync(path.join(dir, file), filelist)
+      } else {
+        filelist = filelist.concat(path.join(dir, file))
+      }
+    })
+    return filelist
+  }
+
+  // postFilePaths is the list of all mdx files inside the CONTENT_PATH directory
+  var filePaths = walkSync(CONTENT_PATH)
+    .map((file) => { return file.slice(CONTENT_PATH.length) })
+    // Only include md(x) files
+    .filter((path) => /\.mdx?$/.test(path))
+
+  var filePaths = filePaths
+    // Remove file extensions for page paths
+    .map((path) => path.replace(/\.mdx?$/, ''))
+
+  // Map the path into the static paths object required by Next.js
+  const paths = filePaths.map((slug) => {
+    // /demo => [demo]
+    const parts = slug.split('/')
+    return { params: { slug: parts } }
+  })
+
+  return {
+    paths,
+    fallback: false,
+  }
+}
+

examples/nextjs-tailwind-mdx/pages/_app.js

@@ -0,0 +1,65 @@
+import { useEffect } from 'react'
+import Script from 'next/script'
+import { useRouter } from 'next/router'
+import { DefaultSeo } from 'next-seo'
+import 'tailwindcss/tailwind.css'
+
+import siteConfig from '../config/siteConfig.js'
+import Layout from '../components/Layout'
+import * as gtag from '../lib/gtag'
+
+function MyApp({ Component, pageProps }) {
+  // Google Analytics
+  if (siteConfig.analytics) {
+    const router = useRouter()
+    useEffect(() => {
+      const handleRouteChange = (url) => {
+        gtag.pageview(url)
+      }
+      router.events.on('routeChangeComplete', handleRouteChange)
+      return () => {
+        router.events.off('routeChangeComplete', handleRouteChange)
+      }
+    }, [router.events])
+  }
+  // end Google Analytics
+
+  return (
+    <>
+      <DefaultSeo
+        titleTemplate={'%s | ' + siteConfig.title}
+        defaultTitle={siteConfig.title}
+        description={siteConfig.description}
+        {...siteConfig.nextSeo}
+      />
+      {/* Global Site Tag (gtag.js) - Google Analytics */}
+      {siteConfig.analytics &&
+        <Script
+          strategy="afterInteractive"
+          src={`https://www.googletagmanager.com/gtag/js?id=${siteConfig.analytics}`}
+        />
+      }
+      {siteConfig.analytics &&
+        <Script
+          id="gtag-init"
+          strategy="afterInteractive"
+          dangerouslySetInnerHTML={{
+            __html: `
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              gtag('js', new Date());
+              gtag('config', '${siteConfig.analytics}', {
+                page_path: window.location.pathname,
+              });
+            `,
+          }}
+        />
+      }
+      <Layout title={pageProps.title}>
+        <Component {...pageProps} />
+      </Layout>
+    </>
+  )
+}
+
+export default MyApp

examples/nextjs-tailwind-mdx/pages/index.js

@@ -0,0 +1,20 @@
+import Head from 'next/head'
+
+import siteConfig from '../config/siteConfig'
+
+export default function Home() {
+  return (
+    <>
+      <div className="text-center">
+        <h1 className="text-6xl font-bold mt-24 mb-8">
+          <a className="text-blue-600" href="https://github.com/datopian/nextjs-tailwind-mdx">
+            {siteConfig.title}
+          </a>
+        </h1>
+        <h2 className="text-4xl">
+          {siteConfig.tagline}
+        </h2>
+      </div>
+    </>
+  )
+}