Add base setup
This commit is contained in:
parent
7f593c65e4
commit
c449ec250a
GPG Key ID:
57B6E1465221F912
@ -1,4 +1,4 @@
|
||||
import Link from 'next/link'
|
||||
import Link from "next/link";
|
||||
|
||||
export default function CustomLink({ as, href, ...otherProps }) {
|
||||
return (
|
||||
@ -12,5 +12,5 @@ export default function CustomLink({ as, href, ...otherProps }) {
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -41,9 +41,9 @@ export default function Layout({ children }) {
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'Menlo';
|
||||
font-family: "Menlo";
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
export default function TestComponent({ name = 'world' }) {
|
||||
export default function TestComponent({ name = "world" }) {
|
||||
return (
|
||||
<>
|
||||
<div>Hello, {name}!</div>
|
||||
@ -12,5 +12,5 @@ export default function TestComponent({ name = 'world' }) {
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -13,5 +13,10 @@
|
||||
"next-remote-watch": "1.0.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "18.8.5",
|
||||
"@types/react": "18.0.21",
|
||||
"typescript": "4.8.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import fs from 'fs'
|
||||
import matter from 'gray-matter'
|
||||
import { MDXRemote } from 'next-mdx-remote'
|
||||
import { serialize } from 'next-mdx-remote/serialize'
|
||||
import dynamic from 'next/dynamic'
|
||||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
import path from 'path'
|
||||
import CustomLink from '../../components/CustomLink'
|
||||
import Layout from '../../components/Layout'
|
||||
import { postFilePaths, POSTS_PATH } from '../../utils/mdxUtils'
|
||||
import fs from "fs";
|
||||
import matter from "gray-matter";
|
||||
import { MDXRemote } from "next-mdx-remote";
|
||||
import { serialize } from "next-mdx-remote/serialize";
|
||||
import dynamic from "next/dynamic";
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import path from "path";
|
||||
import CustomLink from "../../../components/CustomLink";
|
||||
import Layout from "../../../components/Layout";
|
||||
import { postFilePaths, POSTS_PATH } from "../../../utils/mdxUtils";
|
||||
|
||||
// Custom components/renderers to pass to MDX.
|
||||
// Since the MDX files aren't loaded by webpack, they have no knowledge of how
|
||||
@ -19,9 +19,9 @@ const components = {
|
||||
// It also works with dynamically-imported components, which is especially
|
||||
// useful for conditionally loading components for certain routes.
|
||||
// See the notes in README.md for more details.
|
||||
TestComponent: dynamic(() => import('../../components/TestComponent')),
|
||||
TestComponent: dynamic(() => import("../../../components/TestComponent")),
|
||||
Head,
|
||||
}
|
||||
};
|
||||
|
||||
export default function PostPage({ source, frontMatter }) {
|
||||
return (
|
||||
@ -56,14 +56,14 @@ export default function PostPage({ source, frontMatter }) {
|
||||
}
|
||||
`}</style>
|
||||
</Layout>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export const getStaticProps = async ({ params }) => {
|
||||
const postFilePath = path.join(POSTS_PATH, `${params.slug}.mdx`)
|
||||
const source = fs.readFileSync(postFilePath)
|
||||
const postFilePath = path.join(POSTS_PATH, `${params.slug}.mdx`);
|
||||
const source = fs.readFileSync(postFilePath);
|
||||
|
||||
const { content, data } = matter(source)
|
||||
const { content, data } = matter(source);
|
||||
|
||||
const mdxSource = await serialize(content, {
|
||||
// Optionally pass remark/rehype plugins
|
||||
@ -72,25 +72,25 @@ export const getStaticProps = async ({ params }) => {
|
||||
rehypePlugins: [],
|
||||
},
|
||||
scope: data,
|
||||
})
|
||||
});
|
||||
|
||||
return {
|
||||
props: {
|
||||
source: mdxSource,
|
||||
frontMatter: data,
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export const getStaticPaths = async () => {
|
||||
const paths = postFilePaths
|
||||
// Remove file extensions for page paths
|
||||
.map((path) => path.replace(/\.mdx?$/, ''))
|
||||
.map((path) => path.replace(/\.mdx?$/, ""))
|
||||
// Map the path into the static paths object required by Next.js
|
||||
.map((slug) => ({ params: { slug } }))
|
||||
.map((slug) => ({ params: { slug } }));
|
||||
|
||||
return {
|
||||
paths,
|
||||
fallback: false,
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
@ -1,24 +1,24 @@
|
||||
import fs from 'fs'
|
||||
import matter from 'gray-matter'
|
||||
import Link from 'next/link'
|
||||
import path from 'path'
|
||||
import Layout from '../components/Layout'
|
||||
import { postFilePaths, POSTS_PATH } from '../utils/mdxUtils'
|
||||
import fs from "fs";
|
||||
import matter from "gray-matter";
|
||||
import Link from "next/link";
|
||||
import path from "path";
|
||||
import Layout from "../components/Layout";
|
||||
import { postFilePaths, POSTS_PATH } from "../utils/mdxUtils";
|
||||
|
||||
export default function Index({ posts }) {
|
||||
return (
|
||||
<Layout>
|
||||
<h1>Home Page</h1>
|
||||
<p>
|
||||
Click the link below to navigate to a page generated by{' '}
|
||||
Click the link below to navigate to a page generated by{" "}
|
||||
<code>next-mdx-remote</code>.
|
||||
</p>
|
||||
<ul>
|
||||
{posts.map((post) => (
|
||||
<li key={post.filePath}>
|
||||
<Link
|
||||
as={`/posts/${post.filePath.replace(/\.mdx?$/, '')}`}
|
||||
href={`/posts/[slug]`}
|
||||
as={`/golang/posts/${post.filePath.replace(/\.mdx?$/, "")}`}
|
||||
href={`/golang/posts/[slug]`}
|
||||
>
|
||||
<a>{post.data.title}</a>
|
||||
</Link>
|
||||
@ -26,20 +26,20 @@ export default function Index({ posts }) {
|
||||
))}
|
||||
</ul>
|
||||
</Layout>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export function getStaticProps() {
|
||||
const posts = postFilePaths.map((filePath) => {
|
||||
const source = fs.readFileSync(path.join(POSTS_PATH, filePath))
|
||||
const { content, data } = matter(source)
|
||||
const source = fs.readFileSync(path.join(POSTS_PATH, filePath));
|
||||
const { content, data } = matter(source);
|
||||
|
||||
return {
|
||||
content,
|
||||
data,
|
||||
filePath,
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
|
||||
return { props: { posts } }
|
||||
return { props: { posts } };
|
||||
}
|
||||
30
tsconfig.json
Normal file
30
tsconfig.json
Normal file
@ -0,0 +1,30 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"incremental": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve"
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
@ -1,11 +1,11 @@
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
|
||||
// POSTS_PATH is useful when you want to get the path to a specific file
|
||||
export const POSTS_PATH = path.join(process.cwd(), 'posts')
|
||||
export const POSTS_PATH = path.join(process.cwd(), "posts");
|
||||
|
||||
// postFilePaths is the list of all mdx files inside the POSTS_PATH directory
|
||||
export const postFilePaths = fs
|
||||
.readdirSync(POSTS_PATH)
|
||||
// Only include md(x) files
|
||||
.filter((path) => /\.mdx?$/.test(path))
|
||||
.filter((path) => /\.mdx?$/.test(path));
|
||||
34
yarn.lock
34
yarn.lock
@ -360,11 +360,35 @@
|
||||
dependencies:
|
||||
"@types/unist" "*"
|
||||
|
||||
"@types/node@18.8.5":
|
||||
version "18.8.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.8.5.tgz#6a31f820c1077c3f8ce44f9e203e68a176e8f59e"
|
||||
integrity sha512-Bq7G3AErwe5A/Zki5fdD3O6+0zDChhg671NfPjtIcbtzDNZTv4NPKMRFr7gtYPG7y+B8uTiNK4Ngd9T0FTar6Q==
|
||||
|
||||
"@types/parse5@^5.0.0":
|
||||
version "5.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"
|
||||
integrity sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==
|
||||
|
||||
"@types/prop-types@*":
|
||||
version "15.7.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
|
||||
integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
|
||||
|
||||
"@types/react@18.0.21":
|
||||
version "18.0.21"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.21.tgz#b8209e9626bb00a34c76f55482697edd2b43cc67"
|
||||
integrity sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==
|
||||
dependencies:
|
||||
"@types/prop-types" "*"
|
||||
"@types/scheduler" "*"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@types/scheduler@*":
|
||||
version "0.16.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
|
||||
integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
|
||||
|
||||
"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
|
||||
@ -603,6 +627,11 @@ cookie@0.5.0:
|
||||
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
|
||||
integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
|
||||
|
||||
csstype@^3.0.2:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
|
||||
integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
|
||||
|
||||
debug@2.6.9:
|
||||
version "2.6.9"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
|
||||
@ -1610,6 +1639,11 @@ type-is@~1.6.18:
|
||||
media-typer "0.3.0"
|
||||
mime-types "~2.1.24"
|
||||
|
||||
typescript@4.8.4:
|
||||
version "4.8.4"
|
||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"
|
||||
integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
|
||||
|
||||
unherit@^1.0.4:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user