From 6eaba46954b5fc4449783e0b8d7506b85188d67c Mon Sep 17 00:00:00 2001 From: olayway Date: Mon, 9 May 2022 14:06:51 +0200 Subject: [PATCH] [portal.js/examples][s]: added nextjs-tailwind-mdx to examples --- examples/nextjs-tailwind-mdx/.gitignore | 34 + examples/nextjs-tailwind-mdx/README.md | 56 + .../nextjs-tailwind-mdx/components/Layout.js | 37 + .../nextjs-tailwind-mdx/components/MDX.js | 30 + .../nextjs-tailwind-mdx/components/Nav.js | 83 + .../nextjs-tailwind-mdx/config/navLinks.js | 5 + .../nextjs-tailwind-mdx/config/siteConfig.js | 29 + examples/nextjs-tailwind-mdx/content/about.md | 19 + examples/nextjs-tailwind-mdx/lib/gtag.js | 17 + examples/nextjs-tailwind-mdx/lib/mdx.js | 33 + .../nextjs-tailwind-mdx/package-lock.json | 8478 +++++++++++++++++ examples/nextjs-tailwind-mdx/package.json | 29 + .../nextjs-tailwind-mdx/pages/[...slug].js | 68 + examples/nextjs-tailwind-mdx/pages/_app.js | 65 + examples/nextjs-tailwind-mdx/pages/index.js | 20 + .../nextjs-tailwind-mdx/postcss.config.js | 8 + .../nextjs-tailwind-mdx/tailwind.config.js | 9 + 17 files changed, 9020 insertions(+) create mode 100644 examples/nextjs-tailwind-mdx/.gitignore create mode 100644 examples/nextjs-tailwind-mdx/README.md create mode 100644 examples/nextjs-tailwind-mdx/components/Layout.js create mode 100644 examples/nextjs-tailwind-mdx/components/MDX.js create mode 100644 examples/nextjs-tailwind-mdx/components/Nav.js create mode 100644 examples/nextjs-tailwind-mdx/config/navLinks.js create mode 100644 examples/nextjs-tailwind-mdx/config/siteConfig.js create mode 100644 examples/nextjs-tailwind-mdx/content/about.md create mode 100644 examples/nextjs-tailwind-mdx/lib/gtag.js create mode 100644 examples/nextjs-tailwind-mdx/lib/mdx.js create mode 100644 examples/nextjs-tailwind-mdx/package-lock.json create mode 100644 examples/nextjs-tailwind-mdx/package.json create mode 100644 examples/nextjs-tailwind-mdx/pages/[...slug].js create mode 100644 examples/nextjs-tailwind-mdx/pages/_app.js create mode 100644 examples/nextjs-tailwind-mdx/pages/index.js create mode 100644 examples/nextjs-tailwind-mdx/postcss.config.js create mode 100644 examples/nextjs-tailwind-mdx/tailwind.config.js diff --git a/examples/nextjs-tailwind-mdx/.gitignore b/examples/nextjs-tailwind-mdx/.gitignore new file mode 100644 index 00000000..1437c53f --- /dev/null +++ b/examples/nextjs-tailwind-mdx/.gitignore @@ -0,0 +1,34 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel diff --git a/examples/nextjs-tailwind-mdx/README.md b/examples/nextjs-tailwind-mdx/README.md new file mode 100644 index 00000000..24526844 --- /dev/null +++ b/examples/nextjs-tailwind-mdx/README.md @@ -0,0 +1,56 @@ +# Next.js + Tailwind CSS + MDX Starter Template + +A starter template for Next.JS with Tailwind and MDX. Intentionally limited feature-set to keep things simple. (If you want a more comprenhensive starter template check out https://github.com/timlrx/tailwind-nextjs-starter-blog). + +Includes instructions on how to rapidly customize the site. + +Preview online at https://nextjs-tailwind-mdx-tau.vercel.app + +## Features + +Pre-configured with the following; + +* Tailwind for easy styling. Booted off NextJS default tailwindcss example (https://github.com/vercel/next.js/tree/canary/packages/create-next-app) +* Markdown / MDX rendering support. All markdown/MDX in `/content/` gets auto-rendered into the site. +* Configurable e.g. site title etc (secret config in environment variables). See `Configuration` below. +* Simple theming via `components/Layout.js`. Used to provide a standard them for all pages. Customizable NavBar and Footer with configurable nav links. +* Analytics: Google analytics support following https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics +* SEO: basic SEO out of the box (via https://github.com/garmeeh/next-seo) + +## Usage + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: + +```bash +npx create-next-app --example https://github.com/datopian/nextjs-tailwind-mdx myapp +# or +yarn create next-app --example https://github.com/datopian/nextjs-tailwind-mdx myapp +``` + +Then run the app: + +```bash +cd myapp +npm run dev +``` + +## Configuration + +See `config` directory: + +* `config/siteConfig.js` for site wide configuration especially for general theme (e.g. title) and SEO +* `config/navLinks.js` for configuration of navigation links + +### How to customize the content directory location? + +Open up `pages/[...slug].js` and change the `CONTENT_PATH` variable. + +### Theming + +We suggest the following: + +* Replace the favicon in `public/favicon.ico` or use the svg favicon ... +* Add a logo: add image to `public` e.g. then open `components/layout.js` and replace footer logo link + +Tweaking the theme in general: open up `components/Layout.js` and tweak away. + diff --git a/examples/nextjs-tailwind-mdx/components/Layout.js b/examples/nextjs-tailwind-mdx/components/Layout.js new file mode 100644 index 00000000..85762f1e --- /dev/null +++ b/examples/nextjs-tailwind-mdx/components/Layout.js @@ -0,0 +1,37 @@ +import Link from 'next/link' +import Head from 'next/head' +import { NextSeo } from 'next-seo' + +import Nav from './Nav' +import siteConfig from '../config/siteConfig' + +export default function Layout({ children, title='' }) { + return ( + <> + + + + + + +