Merge branch 'add-typescript' of https://github.com/khendrikse/khendrikse.github.io into add-typescript

Author: khendrikse

helpers/generate-article-structured-data.test.js helpers/generate-article-structured-data.test.ts

@@ -1,4 +1,18 @@
-const generateArticleStructuredData = ({ title, slug, description, image, date }) => {
+type StructuredDataInput = {
+  title: string;
+  slug: string;
+  description: string;
+  image: string;
+  date: string;
+};
+
+const generateArticleStructuredData = ({
+  title,
+  slug,
+  description,
+  image,
+  date
+}: StructuredDataInput) => {
   const BASE_URL = 'https://khendrikse.github.io/';
 
   const json = {

helpers/generate-article-structured-data.js helpers/generate-article-structured-data.ts

@@ -1,8 +1,8 @@
 import matter from 'gray-matter';
 
-const parsePosts = context => {
+const parsePosts = (context: __WebpackModuleApi.RequireContext) => {
   const keys = context.keys();
-  const values = keys.map(context);
+  const values = keys.map(key => context(key));
 
   const data = keys
     .map((key, index) => {
@@ -12,11 +12,15 @@ const parsePosts = context => {
 
       return {
         ...document.data,
+        oldBlog: document.data.oldBlog,
+        tags: document.data.tags,
+        date: document.data.date,
+        published: document.data.published,
         markdownBody: document.content,
         slug
       };
     })
-    .sort((a, b) => new Date(b.date) - new Date(a.date))
+    .sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf())
     .filter(post => post.published);
   return data;
 };

helpers/parse-posts.js helpers/parse-posts.ts

@@ -36,7 +36,10 @@
     "showdown": "^1.9.1"
   },
   "devDependencies": {
+    "@types/jest": "^27.4.0",
     "@types/react": "^17.0.39",
+    "@types/react-syntax-highlighter": "^13.5.2",
+    "@types/react-test-renderer": "^17.0.1",
     "@types/webpack-env": "^1.16.3",
     "eslint": "^8.6.0",
     "eslint-config-airbnb": "^19.0.4",

package.json

@@ -14,7 +14,7 @@ import isExternalImage from 'helpers/is-external-image';
 import generateArticleStructuredData from 'helpers/generate-article-structured-data';
 import generateFaqStructuredData from 'helpers/generate-faq-structured-data';
 import parsePosts from 'helpers/parse-posts';
-import { Post, StaticPropsContextParams, BlogPostProps } from 'interfaces';
+import { StaticPropsContextParams, BlogPostProps } from 'interfaces';
 
 export const BlogPost = ({
   siteTitle,
@@ -135,7 +135,7 @@ export const getStaticProps: GetStaticProps = async context => {
 export async function getStaticPaths() {
   const allPosts = parsePosts(
     require.context('../../posts', true, /\.\/.*\.md$/)
-  ).map((post: Post) => post.slug);
+  ).map((post) => post.slug);
 
   const paths = allPosts.map((slug: string) => `/blog/${slug}`);
 

pages/blog/[postname].tsx

@@ -3,7 +3,7 @@ import matter from 'gray-matter';
 import BlogPage from 'components/BlogPage';
 import parsePosts from 'helpers/parse-posts';
 import getCategories from 'helpers/get-categories';
-import { Post, StaticPropsContextParams, BlogProps } from 'interfaces';
+import { StaticPropsContextParams, BlogProps } from 'interfaces';
 
 const socialMeta = {
   image:
@@ -35,7 +35,7 @@ export const getStaticProps: GetStaticProps = async context => {
   );
 
   const categories = getCategories(allPosts);
-  const posts = allPosts.filter((post: Post) =>
+  const posts = allPosts.filter(post =>
     post?.tags?.includes(`${categoryname}`)
   );
 

pages/blog/category/[categoryname].tsx

@@ -14,7 +14,7 @@ import isExternalImage from 'helpers/is-external-image';
 import generateArticleStructuredData from 'helpers/generate-article-structured-data';
 import generateFaqStructuredData from 'helpers/generate-faq-structured-data';
 import parsePosts from '../../helpers/parse-posts';
-import { Post, StaticPropsContextParams, BlogPostProps } from 'interfaces';
+import { StaticPropsContextParams, BlogPostProps } from 'interfaces';
 
 export default function BlogPost({
   siteTitle,
@@ -140,8 +140,8 @@ export async function getStaticPaths() {
   const allPosts = parsePosts(
     require.context('../../posts', true, /\.\/.*\.md$/)
   )
-    .filter((post: Post) => post.oldBlog)
-    .map((post: Post) => post.date.concat('-', post.slug));
+    .filter(post => post.oldBlog)
+    .map(post => post.date.concat('-', post.slug));
 
   const paths = allPosts.map((slug: string) => `/post/${slug}`);
 

pages/post/[postname].tsx

@@ -6,7 +6,8 @@
     "allowJs": true,
     "types": [
       "node",
-      "webpack-env" // here
+      "webpack-env",
+      "jest"
     ],
     "skipLibCheck": true,
     "strict": true,

tsconfig.json

@@ -964,6 +964,14 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
+"@types/jest@^27.4.0":
+  version "27.4.0"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.4.0.tgz#037ab8b872067cae842a320841693080f9cb84ed"
+  integrity sha512-gHl8XuC1RZ8H2j5sHv/JqsaxXkDDM9iDOgu0Wp8sjs4u/snb2PVehyWXJPr+ORA0RPpgw231mnutWI1+0hgjIQ==
+  dependencies:
+    jest-diff "^27.0.0"
+    pretty-format "^27.0.0"
+
 "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
   version "7.0.7"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
@@ -1021,7 +1029,21 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
-"@types/react@^17.0.39":
+"@types/react-syntax-highlighter@^13.5.2":
+  version "13.5.2"
+  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-13.5.2.tgz#357cc03581dc434c57c3b31f70e0eecdbf7b3ab0"
+  integrity sha512-sRZoKZBGKaE7CzMvTTgz+0x/aVR58ZYUTfB7HN76vC+yQnvo1FWtzNARBt0fGqcLGEVakEzMu/CtPzssmanu8Q==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-test-renderer@^17.0.1":
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3120f7d1c157fba9df0118dae20cb0297ee0e06b"
+  integrity sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^17.0.39":
   version "17.0.39"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
   integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==
@@ -2629,6 +2651,11 @@ diff-sequences@^27.5.0:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.0.tgz#a8ac0cb742b17d6f30a6c43e233893a2402c0729"
   integrity sha512-ZsOBWnhXiH+Zn0DcBNX/tiQsqrREHs/6oQsEVy2VJJjrTblykPima11pyHMSA/7PGmD+fwclTnKVKL/qtNREDQ==
 
+diff-sequences@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
+  integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==
+
 diff@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
@@ -4671,6 +4698,16 @@ jest-config@^27.5.0:
     pretty-format "^27.5.0"
     slash "^3.0.0"
 
+jest-diff@^27.0.0:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.5.1.tgz#a07f5011ac9e6643cf8a95a462b7b1ecf6680def"
+  integrity sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^27.5.1"
+    jest-get-type "^27.5.1"
+    pretty-format "^27.5.1"
+
 jest-diff@^27.5.0:
   version "27.5.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.5.0.tgz#34dc608a3b9159df178dd480b6d835b5e6b92082"
@@ -4729,6 +4766,11 @@ jest-get-type@^27.5.0:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.0.tgz#861c24aa1b176be83c902292cb9618d580cac8a7"
   integrity sha512-Vp6O8a52M/dahXRG/E0EJuWQROps2mDQ0sJYPgO8HskhdLwj9ajgngy2OAqZgV6e/RcU67WUHq6TgfvJb8flbA==
 
+jest-get-type@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1"
+  integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==
+
 jest-haste-map@^27.5.0:
   version "27.5.0"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.5.0.tgz#7cc3a920caf304c89fbfceb5d5717b929873f175"
@@ -6760,6 +6802,15 @@ prettier@^2.3.2:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
   integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
 
+pretty-format@^27.0.0, pretty-format@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
+  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 pretty-format@^27.5.0:
   version "27.5.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.0.tgz#71e1af7a4b587d259fa4668dcd3e94af077767cb"