From c449ec250a3c91ccd72a7b547e3767fa38c0f614 Mon Sep 17 00:00:00 2001 From: kjuulh Date: Wed, 12 Oct 2022 22:16:59 +0200 Subject: [PATCH] Add base setup --- components/{CustomLink.js => CustomLink.tsx} | 4 +- components/{Layout.js => Layout.tsx} | 4 +- .../{TestComponent.js => TestComponent.tsx} | 4 +- package.json | 5 ++ .../[slug].js => golang/posts/[slug].tsx} | 48 +++++++++---------- pages/{index.js => index.tsx} | 30 ++++++------ tsconfig.json | 30 ++++++++++++ utils/{mdxUtils.js => mdxUtils.ts} | 8 ++-- yarn.lock | 34 +++++++++++++ 9 files changed, 118 insertions(+), 49 deletions(-) rename components/{CustomLink.js => CustomLink.tsx} (87%) rename components/{Layout.js => Layout.tsx} (96%) rename components/{TestComponent.js => TestComponent.tsx} (80%) rename pages/{posts/[slug].js => golang/posts/[slug].tsx} (71%) rename pages/{index.js => index.tsx} (59%) create mode 100644 tsconfig.json rename utils/{mdxUtils.js => mdxUtils.ts} (61%) diff --git a/components/CustomLink.js b/components/CustomLink.tsx similarity index 87% rename from components/CustomLink.js rename to components/CustomLink.tsx index f590230..d267965 100644 --- a/components/CustomLink.js +++ b/components/CustomLink.tsx @@ -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 }) { } `} - ) + ); } diff --git a/components/Layout.js b/components/Layout.tsx similarity index 96% rename from components/Layout.js rename to components/Layout.tsx index 26da6b3..c8a8990 100644 --- a/components/Layout.js +++ b/components/Layout.tsx @@ -41,9 +41,9 @@ export default function Layout({ children }) { } code { - font-family: 'Menlo'; + font-family: "Menlo"; } `} - ) + ); } diff --git a/components/TestComponent.js b/components/TestComponent.tsx similarity index 80% rename from components/TestComponent.js rename to components/TestComponent.tsx index ca4dfc5..98f38a5 100644 --- a/components/TestComponent.js +++ b/components/TestComponent.tsx @@ -1,4 +1,4 @@ -export default function TestComponent({ name = 'world' }) { +export default function TestComponent({ name = "world" }) { return ( <>
Hello, {name}!
@@ -12,5 +12,5 @@ export default function TestComponent({ name = 'world' }) { } `} - ) + ); } diff --git a/package.json b/package.json index c8fc0d3..c8cfd04 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/pages/posts/[slug].js b/pages/golang/posts/[slug].tsx similarity index 71% rename from pages/posts/[slug].js rename to pages/golang/posts/[slug].tsx index 4554688..6c53a8d 100644 --- a/pages/posts/[slug].js +++ b/pages/golang/posts/[slug].tsx @@ -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 }) { } `} - ) + ); } 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, - } -} + }; +}; diff --git a/pages/index.js b/pages/index.tsx similarity index 59% rename from pages/index.js rename to pages/index.tsx index de6074a..69793aa 100644 --- a/pages/index.js +++ b/pages/index.tsx @@ -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 (

Home Page

- Click the link below to navigate to a page generated by{' '} + Click the link below to navigate to a page generated by{" "} next-mdx-remote.

- ) + ); } 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 } }; } diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..6db37c0 --- /dev/null +++ b/tsconfig.json @@ -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" + ] +} diff --git a/utils/mdxUtils.js b/utils/mdxUtils.ts similarity index 61% rename from utils/mdxUtils.js rename to utils/mdxUtils.ts index 3b884f2..de8db69 100644 --- a/utils/mdxUtils.js +++ b/utils/mdxUtils.ts @@ -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)); diff --git a/yarn.lock b/yarn.lock index c38a920..5244a72 100644 --- a/yarn.lock +++ b/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"