Skip to content

Commit 1322720

Browse files
musemindmusemind
committed
nextjs tailwindcss static-build markdown POC
1 parent ef6acd1 commit 1322720

28 files changed

+694
-256
lines changed

‎.idea/.gitignore

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/inspectionProfiles/Project_Default.xml

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/json-schema.iml

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/modules.xml

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/vcs.xml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2-
31
## Getting Started
42

53
First, run the development server:
@@ -11,24 +9,4 @@ yarn dev
119
```
1210

1311
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14-
15-
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
16-
17-
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
18-
19-
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20-
21-
## Learn More
22-
23-
To learn more about Next.js, take a look at the following resources:
24-
25-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27-
28-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29-
30-
## Deploy on Vercel
31-
32-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33-
34-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
12+
You can start editing the pages. The page auto-updates as you edit the file.

‎components/Layout.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react'
2+
import Head from 'next/head'
3+
4+
export default function Layout ({ children }: { children: React.ReactNode }) {
5+
return (
6+
<div className='bg-slate-100 min-h-screen flex flex-col justify-between'>
7+
<Head>
8+
<title>JSON Schema</title>
9+
<meta name='description' content='JSON Schema' />
10+
<link rel='icon' href='/favicon.ico' />
11+
</Head>
12+
13+
<div>
14+
<header className='bg-slate-500 p-4'>
15+
<div className='w-[1200px] mx-auto text-3xl'>
16+
header
17+
</div>
18+
</header>
19+
<main className='bg-white rounded-xl p-4 w-[1200px] mx-auto mt-4'>
20+
{children}
21+
</main>
22+
</div>
23+
24+
<footer className='w-[1200px] mx-auto text-3xl p-4'>
25+
footer
26+
</footer>
27+
</div>
28+
)
29+
}

‎components/StyledMarkdown.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react'
2+
import Markdown from 'markdown-to-jsx'
3+
4+
export default function StyledMarkdown ({ markdown }: { markdown: string }) {
5+
return (
6+
<Markdown
7+
options={{
8+
overrides: {
9+
h1: {
10+
component: ({ children }) => <h1 className='font-bold text-xl'>{ children }</h1>
11+
}
12+
}
13+
}}
14+
>
15+
{markdown}
16+
</Markdown>
17+
)
18+
}

‎next.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/** @type {import('next').NextConfig} */
22
const nextConfig = {
33
reactStrictMode: true,
4+
pageExtensions: [ 'page.tsx' ]
45
}
56

67
module.exports = nextConfig

‎package.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,25 @@
44
"private": true,
55
"scripts": {
66
"dev": "next dev",
7-
"build": "next build",
7+
"build": "next build && next export",
88
"start": "next start",
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"gray-matter": "^4.0.3",
13+
"markdown-to-jsx": "^7.1.6",
1214
"next": "12.1.0",
1315
"react": "17.0.2",
1416
"react-dom": "17.0.2"
1517
},
1618
"devDependencies": {
1719
"@types/node": "17.0.21",
1820
"@types/react": "17.0.39",
21+
"autoprefixer": "^10.4.2",
1922
"eslint": "8.10.0",
2023
"eslint-config-next": "12.1.0",
24+
"postcss": "^8.4.7",
25+
"tailwindcss": "^3.0.23",
2126
"typescript": "4.6.2"
2227
}
2328
}

‎pages/_app.tsx renamed to ‎pages/_app.page.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import '../styles/globals.css'
2+
import 'tailwindcss/tailwind.css'
23
import type { AppProps } from 'next/app'
34

45
function MyApp({ Component, pageProps }: AppProps) {

‎pages/api/hello.ts

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎pages/index.page.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Layout from '~/components/Layout'
2+
3+
const Home = () => {
4+
return (
5+
<Layout>
6+
JSON schema 2.0
7+
</Layout>
8+
)
9+
}
10+
11+
export default Home

‎pages/index.tsx

Lines changed: 0 additions & 72 deletions
This file was deleted.

‎pages/managed-mixed-page/index.page.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Layout from '~/components/Layout'
2+
import fs from 'fs'
3+
import matter from 'gray-matter'
4+
import StyledMarkdown from '~/components/StyledMarkdown'
5+
6+
export async function getStaticProps() {
7+
const block1 = fs.readFileSync('pages/managed-mixed-page/mdblock1.md', 'utf-8')
8+
const block2 = fs.readFileSync('pages/managed-mixed-page/mdblock2.md', 'utf-8')
9+
const { content: block1Content } = matter(block1)
10+
const { content: block2Content } = matter(block2)
11+
return {
12+
props: {
13+
blocks: [ block1Content, block2Content ]
14+
}
15+
}
16+
}
17+
18+
export default function ContentExample ({ blocks }: { blocks: any[] }) {
19+
return (
20+
<Layout>
21+
<StyledMarkdown markdown={blocks[0]} />
22+
<div className='bg-red-500'>
23+
any custom component here
24+
</div>
25+
<StyledMarkdown markdown={blocks[1]} />
26+
</Layout>
27+
)
28+
}

‎pages/managed-mixed-page/mdblock1.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Markdown 1
2+
Some text
3+
- list item 1
4+
- list item 2
5+
- list item 3
6+
[My website](https://daily-dev-tips.com)

‎pages/managed-mixed-page/mdblock2.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
## Block 2
2+
Some text
3+
- list item 1
4+
- list item 2
5+
- list item 3
6+
[My website](https://daily-dev-tips.com)

‎pages/markdown-driven-pages/[slug].page.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import Layout from '~/components/Layout'
2+
import fs from 'fs'
3+
import matter from 'gray-matter'
4+
import StyledMarkdown from '~/components/StyledMarkdown'
5+
import Head from 'next/head'
6+
import React from 'react'
7+
8+
const path = 'pages/markdown-driven-pages'
9+
10+
export async function getStaticPaths() {
11+
const files = fs.readdirSync(path)
12+
const paths = files
13+
.filter(file => file.substr(-3) === '.md')
14+
.map((fileName) => ({
15+
params: {
16+
slug: fileName.replace('.md', ''),
17+
}
18+
}))
19+
return {
20+
paths,
21+
fallback: false
22+
}
23+
}
24+
25+
export async function getStaticProps({ params: { slug } }: { params: { slug: string }}) {
26+
const fileName = fs.readFileSync(`${path}/${slug}.md`, 'utf-8');
27+
const { data: frontmatter, content } = matter(fileName)
28+
return {
29+
props: {
30+
frontmatter,
31+
content,
32+
}
33+
}
34+
}
35+
36+
export default function StaticMarkdownPage ({ frontmatter, content }: { frontmatter: any, content: any }) {
37+
return (
38+
<Layout>
39+
<Head>
40+
<title>JSON Schema - {frontmatter.title}</title>
41+
</Head>
42+
<h1>{frontmatter.title}</h1>
43+
<StyledMarkdown markdown={content} />
44+
</Layout>
45+
)
46+
}

‎pages/markdown-driven-pages/route1.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Hello
3+
slug: home
4+
---
5+
6+
# Heading of Route 1
7+
Some text
8+
- list item 1
9+
- list item 2
10+
- list item 3
11+
[My website](https://daily-dev-tips.com)

‎pages/markdown-driven-pages/route2.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Heading of Route 2
2+
3+
content ...

‎pages/markdown-driven-pages/route3.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Heading of Route 3
2+
3+
content ...

‎pages/markdown-driven-pages/route4.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Heading of Route 4
2+
3+
content ...

‎postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

0 commit comments

Comments
 (0)