Add base setup

This commit is contained in:
Kasper Juul Hermansen 2022-10-12 22:16:59 +02:00
parent 7f593c65e4
commit c449ec250a
Signed by: kjuulh
GPG Key ID: 57B6E1465221F912
9 changed files with 118 additions and 49 deletions

View File

@ -1,4 +1,4 @@
import Link from 'next/link' import Link from "next/link";
export default function CustomLink({ as, href, ...otherProps }) { export default function CustomLink({ as, href, ...otherProps }) {
return ( return (
@ -12,5 +12,5 @@ export default function CustomLink({ as, href, ...otherProps }) {
} }
`}</style> `}</style>
</> </>
) );
} }

View File

@ -41,9 +41,9 @@ export default function Layout({ children }) {
} }
code { code {
font-family: 'Menlo'; font-family: "Menlo";
} }
`}</style> `}</style>
</> </>
) );
} }

View File

@ -1,4 +1,4 @@
export default function TestComponent({ name = 'world' }) { export default function TestComponent({ name = "world" }) {
return ( return (
<> <>
<div>Hello, {name}!</div> <div>Hello, {name}!</div>
@ -12,5 +12,5 @@ export default function TestComponent({ name = 'world' }) {
} }
`}</style> `}</style>
</> </>
) );
} }

View File

@ -13,5 +13,10 @@
"next-remote-watch": "1.0.0", "next-remote-watch": "1.0.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2" "react-dom": "^17.0.2"
},
"devDependencies": {
"@types/node": "18.8.5",
"@types/react": "18.0.21",
"typescript": "4.8.4"
} }
} }

View File

@ -1,14 +1,14 @@
import fs from 'fs' import fs from "fs";
import matter from 'gray-matter' import matter from "gray-matter";
import { MDXRemote } from 'next-mdx-remote' import { MDXRemote } from "next-mdx-remote";
import { serialize } from 'next-mdx-remote/serialize' import { serialize } from "next-mdx-remote/serialize";
import dynamic from 'next/dynamic' import dynamic from "next/dynamic";
import Head from 'next/head' import Head from "next/head";
import Link from 'next/link' import Link from "next/link";
import path from 'path' import path from "path";
import CustomLink from '../../components/CustomLink' import CustomLink from "../../../components/CustomLink";
import Layout from '../../components/Layout' import Layout from "../../../components/Layout";
import { postFilePaths, POSTS_PATH } from '../../utils/mdxUtils' import { postFilePaths, POSTS_PATH } from "../../../utils/mdxUtils";
// Custom components/renderers to pass to MDX. // Custom components/renderers to pass to MDX.
// Since the MDX files aren't loaded by webpack, they have no knowledge of how // 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 // It also works with dynamically-imported components, which is especially
// useful for conditionally loading components for certain routes. // useful for conditionally loading components for certain routes.
// See the notes in README.md for more details. // See the notes in README.md for more details.
TestComponent: dynamic(() => import('../../components/TestComponent')), TestComponent: dynamic(() => import("../../../components/TestComponent")),
Head, Head,
} };
export default function PostPage({ source, frontMatter }) { export default function PostPage({ source, frontMatter }) {
return ( return (
@ -56,14 +56,14 @@ export default function PostPage({ source, frontMatter }) {
} }
`}</style> `}</style>
</Layout> </Layout>
) );
} }
export const getStaticProps = async ({ params }) => { export const getStaticProps = async ({ params }) => {
const postFilePath = path.join(POSTS_PATH, `${params.slug}.mdx`) const postFilePath = path.join(POSTS_PATH, `${params.slug}.mdx`);
const source = fs.readFileSync(postFilePath) const source = fs.readFileSync(postFilePath);
const { content, data } = matter(source) const { content, data } = matter(source);
const mdxSource = await serialize(content, { const mdxSource = await serialize(content, {
// Optionally pass remark/rehype plugins // Optionally pass remark/rehype plugins
@ -72,25 +72,25 @@ export const getStaticProps = async ({ params }) => {
rehypePlugins: [], rehypePlugins: [],
}, },
scope: data, scope: data,
}) });
return { return {
props: { props: {
source: mdxSource, source: mdxSource,
frontMatter: data, frontMatter: data,
}, },
} };
} };
export const getStaticPaths = async () => { export const getStaticPaths = async () => {
const paths = postFilePaths const paths = postFilePaths
// Remove file extensions for page paths // 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 the path into the static paths object required by Next.js
.map((slug) => ({ params: { slug } })) .map((slug) => ({ params: { slug } }));
return { return {
paths, paths,
fallback: false, fallback: false,
} };
} };

View File

@ -1,24 +1,24 @@
import fs from 'fs' import fs from "fs";
import matter from 'gray-matter' import matter from "gray-matter";
import Link from 'next/link' import Link from "next/link";
import path from 'path' import path from "path";
import Layout from '../components/Layout' import Layout from "../components/Layout";
import { postFilePaths, POSTS_PATH } from '../utils/mdxUtils' import { postFilePaths, POSTS_PATH } from "../utils/mdxUtils";
export default function Index({ posts }) { export default function Index({ posts }) {
return ( return (
<Layout> <Layout>
<h1>Home Page</h1> <h1>Home Page</h1>
<p> <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>. <code>next-mdx-remote</code>.
</p> </p>
<ul> <ul>
{posts.map((post) => ( {posts.map((post) => (
<li key={post.filePath}> <li key={post.filePath}>
<Link <Link
as={`/posts/${post.filePath.replace(/\.mdx?$/, '')}`} as={`/golang/posts/${post.filePath.replace(/\.mdx?$/, "")}`}
href={`/posts/[slug]`} href={`/golang/posts/[slug]`}
> >
<a>{post.data.title}</a> <a>{post.data.title}</a>
</Link> </Link>
@ -26,20 +26,20 @@ export default function Index({ posts }) {
))} ))}
</ul> </ul>
</Layout> </Layout>
) );
} }
export function getStaticProps() { export function getStaticProps() {
const posts = postFilePaths.map((filePath) => { const posts = postFilePaths.map((filePath) => {
const source = fs.readFileSync(path.join(POSTS_PATH, filePath)) const source = fs.readFileSync(path.join(POSTS_PATH, filePath));
const { content, data } = matter(source) const { content, data } = matter(source);
return { return {
content, content,
data, data,
filePath, filePath,
} };
}) });
return { props: { posts } } return { props: { posts } };
} }

30
tsconfig.json Normal file
View 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"
]
}

View File

@ -1,11 +1,11 @@
import fs from 'fs' import fs from "fs";
import path from 'path' import path from "path";
// POSTS_PATH is useful when you want to get the path to a specific file // 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 // postFilePaths is the list of all mdx files inside the POSTS_PATH directory
export const postFilePaths = fs export const postFilePaths = fs
.readdirSync(POSTS_PATH) .readdirSync(POSTS_PATH)
// Only include md(x) files // Only include md(x) files
.filter((path) => /\.mdx?$/.test(path)) .filter((path) => /\.mdx?$/.test(path));

View File

@ -360,11 +360,35 @@
dependencies: dependencies:
"@types/unist" "*" "@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": "@types/parse5@^5.0.0":
version "5.0.3" version "5.0.3"
resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109" resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"
integrity sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw== 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": "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
version "2.0.6" version "2.0.6"
resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d" 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" resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw== 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: debug@2.6.9:
version "2.6.9" version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" 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" media-typer "0.3.0"
mime-types "~2.1.24" 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: unherit@^1.0.4:
version "1.1.3" version "1.1.3"
resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22" resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"