├── .gitignore
├── README.md
├── components
├── header.js
└── layout.js
├── next.config.js
├── package.json
├── pages
├── _app.js
├── blog
│ ├── another-one.mdx
│ └── hello-world.mdx
└── index.js
├── postcss.config.js
├── posts.json
├── tailwind.config.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | .vercel
4 | .next
5 | *.log
6 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Nextra Blank Custom Theme/Boilerplate Example
2 |
3 | A nearly blank MDX blog/content site powered by a custom [Nextra](https://nextra.vercel.app) theme (see `components/layout.js`) w/Tailwind already setup.
4 |
5 | The post list for the blog index in `pages/index.js` comes out of `./posts.json`. If you wanted to get the Nextra page map to use on the index page, you _could_ make a blank `pages/index.mdx` and move that "page" component into `components/layout` (just check for `route === '/'`) and render it).
6 |
7 | Anyways, hopes this helps. Nextra rocks for static content.
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/components/header.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | export function Header() {
3 | return (
4 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/components/layout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Head from 'next/head';
3 | import { MDXProvider } from '@mdx-js/react';
4 | import { Header } from './header';
5 |
6 | const components = {};
7 |
8 | export default function Blog(props) {
9 | const { meta, route, ...rest } = props;
10 |
11 | console.log(props);
12 |
13 | const sharedHead = (
14 |
15 |
31 | {children}
32 |
33 |
34 | );
35 | };
36 | }
37 |
38 | return function Layout({ children }) {
39 | return (
40 | <>
41 | {sharedHead}
42 | {children}
43 |
44 | );
45 | };
46 | }
47 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | const nextra = require('nextra');
2 |
3 | module.exports = nextra('./components/layout.js')({
4 | experimental: {
5 | turboMode: true,
6 | },
7 | images: {
8 | domains: ['pbs.twimg.com', 'abs.twimg.com'],
9 | },
10 | headers() {
11 | return [
12 | {
13 | source: '/atom/:nested*',
14 | headers: [
15 | {
16 | key: 'content-type',
17 | value: 'text/xml',
18 | },
19 | ],
20 | },
21 | ];
22 | },
23 | });
24 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jaredpalmer",
3 | "private": true,
4 | "scripts": {
5 | "dev": "next dev",
6 | "build": "next build"
7 | },
8 | "dependencies": {
9 | "@mdx-js/react": "^1.6.22",
10 | "next": "^11.0.1",
11 | "nextra": "^0.4.5",
12 | "react": "^17.0.2",
13 | "react-dom": "^17.0.2"
14 | },
15 | "devDependencies": {
16 | "@tailwindcss/typography": "^0.4.1",
17 | "autoprefixer": "^10.0.4",
18 | "postcss": "^8.1.10",
19 | "tailwindcss": "^2.1.1"
20 | },
21 | "prettier": {
22 | "printWidth": 80,
23 | "semi": true,
24 | "singleQuote": true,
25 | "trailingComma": "es5"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import 'tailwindcss/tailwind.css'
2 |
3 | function MyApp({ Component, pageProps }) {
4 | return
10 |
11 | {posts.posts.map((p) => (
12 |
13 |
14 | {p.date}
15 |
16 | {p.title}
18 |
19 |
20 | ))}
21 |
22 |