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
.
{posts.map((post) => (
-
{post.data.title}
@@ -26,20 +26,20 @@ export default function Index({ posts }) {
))}
- )
+ );
}
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"