Add typescript

components/TagIcon.js

@@ -9,9 +9,9 @@ export default () => (
 		viewBox="0 0 24 24"
 		fill="none"
 		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
+		strokeWidth="2"
+		strokeLinecap="round"
+		strokeLinejoin="round"
 	>
 		<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
 		<line x1="7" y1="7" x2="7" y2="7"></line>

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package-lock.json

@@ -23,7 +23,8 @@
 				"next-sitemap": "3.1.25",
 				"raw-loader": "4.0.2",
 				"rfc822-date": "0.0.3",
-				"sass": "1.55.0"
+				"sass": "1.55.0",
+				"typescript": "^4.9.4"
 			}
 		},
 		"node_modules/@corex/deepmerge": {
@@ -2999,6 +3000,19 @@
 				"url": "https://github.com/sponsors/wooorm"
 			}
 		},
+		"node_modules/typescript": {
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+			"integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
+			"dev": true,
+			"bin": {
+				"tsc": "bin/tsc",
+				"tsserver": "bin/tsserver"
+			},
+			"engines": {
+				"node": ">=4.2.0"
+			}
+		},
 		"node_modules/unified": {
 			"version": "10.1.1",
 			"resolved": "https://registry.npmjs.org/unified/-/unified-10.1.1.tgz",
@@ -5333,6 +5347,12 @@
 			"resolved": "https://registry.npmjs.org/trough/-/trough-2.0.2.tgz",
 			"integrity": "sha512-FnHq5sTMxC0sk957wHDzRnemFnNBvt/gSY99HzK8F7UP5WAbvP70yX5bd7CjEQkN+TjdxwI7g7lJ6podqrG2/w=="
 		},
+		"typescript": {
+			"version": "4.9.4",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+			"integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
+			"dev": true
+		},
 		"unified": {
 			"version": "10.1.1",
 			"resolved": "https://registry.npmjs.org/unified/-/unified-10.1.1.tgz",

package.json

@@ -26,6 +26,7 @@
 		"next-sitemap": "3.1.25",
 		"raw-loader": "4.0.2",
 		"rfc822-date": "0.0.3",
-		"sass": "1.55.0"
+		"sass": "1.55.0",
+		"typescript": "^4.9.4"
 	}
 }

pages/[page].tsx

@@ -5,7 +5,13 @@ import rehypeRaw from "rehype-raw";
 import glob from "glob";
 import Page from "../components/Page";
 
-export default function PageTemplate(props) {
+interface PageTemplateProps {
+	frontmatter: { siteTitle: string; title: string };
+	siteTitle: string;
+	markdownBody: string;
+}
+
+export default function PageTemplate(props: PageTemplateProps) {
 	/*
 	 ** Odd fix to get build to run
 	 ** It seems like on first go the props
@@ -38,7 +44,7 @@ export async function getStaticProps({ ...ctx }) {
 	};
 }
 
-export async function getStaticPaths() {
+export async function getStaticPaths(): Promise<{ paths: string[]; fallback: boolean; }> {
 	//get all .md files in the posts dir
 	const pages = glob.sync("content/*.md");
 

pages/index.js

@@ -38,7 +38,7 @@ const Index = (props) => {
 };
 
 export async function getStaticProps() {
-	const content = await import(`../content/index.md`);
+	const content = await import('../content/index.md');
 	const data = matter(content.default);
 
 	const posts = ((context) => {

pages/posts/[post].tsx

@@ -39,7 +39,9 @@ export default function BlogTemplate(props) {
 			<p className="page__tag-list">
 				<TagIcon />
 				{tags.map((tag) => (
-					<a href={`/posts?tags=${tag}`}>#{tag}</a>
+					<a key={tag} href={`/posts?tags=${tag}`}>
+						#{tag}
+					</a>
 				))}
 			</p>
 		);
@@ -52,7 +54,6 @@ export default function BlogTemplate(props) {
 			date={reformatDate(props.frontmatter.date)}
 		>
 			<ReactMarkdown
-				date={props.frontmatter.date}
 				remarkPlugins={[gfm]}
 				rehypePlugins={[rehypeRaw]}
 				components={{
@@ -82,15 +83,15 @@ export default function BlogTemplate(props) {
 
 			{props.frontmatter.tags && renderTagList()}
 
-			<div class="shareon">
-				<a class="facebook"></a>
-				<a class="linkedin"></a>
-				<a class="mastodon"></a>
-				<a class="pocket"></a>
-				<a class="reddit"></a>
-				<a class="telegram"></a>
-				<a class="twitter"></a>
-				<a class="whatsapp"></a>
+			<div className="shareon">
+				<a className="facebook"></a>
+				<a className="linkedin"></a>
+				<a className="mastodon"></a>
+				<a className="pocket"></a>
+				<a className="reddit"></a>
+				<a className="telegram"></a>
+				<a className="twitter"></a>
+				<a className="whatsapp"></a>
 			</div>
 		</Page>
 	);

pages/posts/index.js

@@ -2,7 +2,6 @@ import { useRouter } from "next/router";
 import BlogList from "../../components/BlogList";
 import Page from "../../components/Page";
 import matter from "gray-matter";
-import { render } from "preact";
 
 const Index = (props) => {
 	const { query } = useRouter();

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"
+, "pages/index.js"  ],
+  "exclude": [
+    "node_modules"
+  ]
+}