Set up thought pages structure

src/blog/getAllThoughtPages.ts

@@ -0,0 +1,20 @@
+import type { Post } from './getAllPostPreviews';
+
+const importAll = (r: any) => {
+  return r.keys().map((fileName: string) => ({
+    link: `/thoughts${fileName.substr(1).replace(/\/index\.mdx$/, '')}`,
+    module: r(fileName),
+  }));
+};
+
+const dateSortDesc = (a: string, b: string) => {
+  if (a > b) return -1;
+  if (a < b) return 1;
+  return 0;
+};
+
+export const getAllThoughtPages = (): Post[] => {
+  return importAll(require.context('../pages/thoughts', true, /\.mdx$/)).sort(
+    (a: any, b: any) => dateSortDesc(a.module.meta.date, b.module.meta.date),
+  );
+};

src/pages/thoughts/index.tsx

@@ -1,16 +1,31 @@
+import type { GetStaticProps, NextPage } from 'next';
+
 import { UnorderedList } from '@/components/common/List/UnorderedList';
 import { Panel } from '@/components/common/Panel';
 import { HorizontalDivider } from '@/components/Divider';
-import { SectionContainer } from '@/components/SectionContainer';
 import { PageMetaTags } from '@/components/Seo/PageMetaTags';
 import { EmojiSpan } from '@/components/Typography/EmojiSpan';
 import { ExternalLink } from '@/components/Typography/ExternalLink';
 import { InternalLink } from '@/components/Typography/InternalLink';
 import { PageTitle } from '@/components/Typography/PageTitle';
 import { Paragraph } from '@/components/Typography/Paragraph';
 import { SectionTitle } from '@/components/Typography/SectionTitle';
+import { SkipSSR } from '@/components/SkipSSR';
+import { getAllThoughtPages } from '@/blog/getAllThoughtPages';
+
+import { getRelativeTimeFromNow } from '@/utils/datetime/getRelativeTime';
+
+type Thought = {
+  title: string;
+  href: string;
+  lastUpdatedAt: string;
+};
+
+interface Props {
+  thoughts: Thought[];
+}
 
-const ThoughtsIndexPage = () => {
+const ThoughtsIndexPage: NextPage<Props> = ({ thoughts }) => {
   return (
     <>
       <PageMetaTags
@@ -60,19 +75,42 @@ const ThoughtsIndexPage = () => {
 
       <div className="my-4">
         <UnorderedList>
-          <li>
-            <InternalLink
-              className="hover:underline"
-              isNotFancy
-              href="/thoughts/self-taught-first-job-in-tech"
-            >
-              I am self-taught. how do I land my first job in tech?
-            </InternalLink>
-          </li>
+          {thoughts.map((thought) => (
+            <li key={thought.title}>
+              <InternalLink
+                className="hover:underline"
+                isNotFancy
+                href={thought.href}
+              >
+                {thought.title}
+              </InternalLink>
+
+              <span className="text-theme-subtitle text-sm italic ml-2">
+                Last updated{' '}
+                <SkipSSR fallback={thought.lastUpdatedAt}>
+                  {getRelativeTimeFromNow(new Date(thought.lastUpdatedAt))}
+                </SkipSSR>
+              </span>
+            </li>
+          ))}
         </UnorderedList>
       </div>
     </>
   );
 };
 
+export const getStaticProps: GetStaticProps<Props> = async () => {
+  const thoughtPosts = await getAllThoughtPages();
+
+  return {
+    props: {
+      thoughts: thoughtPosts.map((thoughtPost) => ({
+        href: thoughtPost.link,
+        title: thoughtPost.module.meta.title.replace('Thoughts: ', ''),
+        lastUpdatedAt: thoughtPost.module.meta.date,
+      })),
+    },
+  };
+};
+
 export default ThoughtsIndexPage;

src/pages/thoughts/self-taught-first-job-in-tech/index.mdx

@@ -0,0 +1,44 @@
+import clsx from 'clsx';
+
+import { createOgImageUrl } from '@/utils/createOgImageUrl';
+import { jackyef } from '@/blog/authors';
+import { LightButton } from '@/components/common/Button/LightButton';
+import { Surfaces, Colors } from '@/components/DesignDemo';
+
+export const meta = {
+  title: `Thoughts: Getting first job in tech as a self-taught`,
+  description: `My thoughts on getting first job in tech as a self-taught`,
+  date: '2022-08-19T03:36:40.989Z',
+  authors: [jackyef],
+  image: createOgImageUrl({
+    title: '**Getting first job in tech as a self-taught**',
+    fontSize: 112,
+  }),
+  readingTime: '3 min read',
+  tags: [],
+};
+
+<!--start-->
+
+I often got questions from people who didn't study tech at school/university
+wanting to get into tech. This can be someone early in their career, or even
+mid-career looking to make a switch.
+
+My honest answer: I honestly don't know! While I do feel like a lot of the
+things that I learned was self-taught, I studied informatics at a polytechnic so
+I can't and won't pretend that I understand what you're going through.
+
+<!--more-->
+
+However, I did quite a bit interviews in the past and I can say that I
+personally don't care whether someone is self-taught, mid-career, or whatever.
+What I looked for was whether someone would be a valuable addition to the team,
+and that's it. I've written [my thoughts on how to go about showing our values
+in the hiring process](/thoughts/showcasing-values-in-hiring-process).
+
+Of course, this does not mean everyone thinks the same way I do. I have heard of
+stories of interviewers having personal biases that could either increase/lower
+your chance of landing a job. For instance, some people might look down on
+bootcamp graduates, but some would actually see it as a strength. In an ideal
+world, these non-objective factor shouldn't influence a hiring decision, but
+unfortunately we're just not quite there yet.

src/utils/datetime/getRelativeTime.ts

@@ -0,0 +1,21 @@
+let formatter: Intl.RelativeTimeFormat;
+
+const getRelativeTime = (value: number, units: Intl.RelativeTimeFormatUnit) => {
+  if (!formatter) {
+    formatter = new Intl.RelativeTimeFormat('en', { style: 'narrow' });
+  }
+
+  return formatter.format(value, units);
+};
+
+export const getRelativeTimeFromNow = (date: Date) => {
+  const diffDays = Math.round(
+    (date.getTime() - new Date().getTime()) / (24 * 60 * 60 * 1000),
+  );
+
+  if (diffDays === 0) {
+    return 'today';
+  }
+
+  return getRelativeTime(diffDays, 'days');
+};

tsconfig.json

@@ -11,7 +11,7 @@
     "jsx": "preserve",
     "lib": [
       "dom",
-      "es2017"
+      "es2020"
     ],
     "module": "esnext",
     "moduleResolution": "node",

utils/configs/configureMDX.js

@@ -20,16 +20,16 @@ module.exports = (config, options) => {
       options: {
         rehypePlugins: [
           rehypeSlug,
-          [
-            rehypeToc,
-            {
-              headings: ['h1', 'h2', 'h3'], // Include only h1-h3 in the TOC
-              cssClasses: {
-                toc: 'page-outline hidden 2xl:block', // Change the CSS class for the TOC
-                link: 'page-link', // Change the CSS class for links in the TOC
-              },
-            },
-          ],
+          // [
+          //   rehypeToc,
+          //   {
+          //     headings: ['h1', 'h2', 'h3'], // Include only h1-h3 in the TOC
+          //     cssClasses: {
+          //       toc: 'page-outline hidden 2xl:block', // Change the CSS class for the TOC
+          //       link: 'page-link', // Change the CSS class for links in the TOC
+          //     },
+          //   },
+          // ],
           [
             rehypeAutolinkHeadings,
             {