Blog post: How to learn software development

components/footer.tsx

@@ -1,5 +1,5 @@
 const Footer = () => {
-  return <footer className="py-8">Tim Leung 2022</footer>;
+  return <footer className="py-8">Tim Leung 2023</footer>;
 };
 
 export default Footer;

components/mdx-image.tsx

@@ -1,13 +1,7 @@
-import type { StaticImageData } from "next/image";
 import { ImgHTMLAttributes } from "react";
 import { getKnownImagePath } from "../lib/images";
 import KnownImage from "./known-image";
 
-type Props = {
-  imagePath: StaticImageData;
-  twoX: StaticImageData;
-};
-
 const MdxImage = ({ alt, src }: ImgHTMLAttributes<HTMLImageElement>) => (
   <KnownImage alt={alt ?? ""} imagePath={getKnownImagePath(src)} />
 );

components/post-preview.tsx

@@ -14,7 +14,7 @@ type Props = {
 const PostPreview = ({ title, coverImagePath, date, excerpt, slug }: Props) => {
   return (
     <div>
-      <div className="mb-5">
+      <div className="mb-5 flex">
         <CoverImage slug={slug} title={title} imagePath={coverImagePath} />
       </div>
       <h3 className="mb-3 text-3xl leading-snug">

generated/images.ts

@@ -1,6 +1,16 @@
 import type { StaticImageData } from "next/image";
 import blogAoc2021ReflectionsTzylAoc2021Png_1x from "../public/assets/blog/aoc-2021-reflections/[email protected]";
 import blogAoc2021ReflectionsTzylAoc2021Png_2x from "../public/assets/blog/aoc-2021-reflections/[email protected]";
+import blogHowToLearnDevAlgorithmsPng_1x from "../public/assets/blog/how-to-learn-dev/[email protected]";
+import blogHowToLearnDevAlgorithmsPng_2x from "../public/assets/blog/how-to-learn-dev/[email protected]";
+import blogHowToLearnDevDeveloperToolsPng_1x from "../public/assets/blog/how-to-learn-dev/[email protected]";
+import blogHowToLearnDevDeveloperToolsPng_2x from "../public/assets/blog/how-to-learn-dev/[email protected]";
+import blogHowToLearnDevHowToLearnDevPng_1x from "../public/assets/blog/how-to-learn-dev/[email protected]";
+import blogHowToLearnDevHowToLearnDevPng_2x from "../public/assets/blog/how-to-learn-dev/[email protected]";
+import blogHowToLearnDevLanguageBasicsPng_1x from "../public/assets/blog/how-to-learn-dev/[email protected]";
+import blogHowToLearnDevLanguageBasicsPng_2x from "../public/assets/blog/how-to-learn-dev/[email protected]";
+import blogHowToLearnDevProjectsPng_1x from "../public/assets/blog/how-to-learn-dev/[email protected]";
+import blogHowToLearnDevProjectsPng_2x from "../public/assets/blog/how-to-learn-dev/[email protected]";
 import blogNetworkTheorySmallWorldBarabasiAlbertFinalPng_1x from "../public/assets/blog/network-theory-small-world/[email protected]";
 import blogNetworkTheorySmallWorldBarabasiAlbertFinalPng_2x from "../public/assets/blog/network-theory-small-world/[email protected]";
 import blogNetworkTheorySmallWorldBarabasiAlbertInitialPng_1x from "../public/assets/blog/network-theory-small-world/[email protected]";
@@ -41,6 +51,14 @@ import profileProfileJpg_2x from "../public/assets/profile/[email protected]";
 export const KnownImagePath = {
   BLOG_AOC_2021_REFLECTIONS_TZYL_AOC2021_PNG:
     "blog/aoc-2021-reflections/tzyl-aoc2021.png",
+  BLOG_HOW_TO_LEARN_DEV_ALGORITHMS_PNG: "blog/how-to-learn-dev/algorithms.png",
+  BLOG_HOW_TO_LEARN_DEV_DEVELOPER_TOOLS_PNG:
+    "blog/how-to-learn-dev/developer-tools.png",
+  BLOG_HOW_TO_LEARN_DEV_HOW_TO_LEARN_DEV_PNG:
+    "blog/how-to-learn-dev/how-to-learn-dev.png",
+  BLOG_HOW_TO_LEARN_DEV_LANGUAGE_BASICS_PNG:
+    "blog/how-to-learn-dev/language-basics.png",
+  BLOG_HOW_TO_LEARN_DEV_PROJECTS_PNG: "blog/how-to-learn-dev/projects.png",
   BLOG_NETWORK_THEORY_SMALL_WORLD_BARABASI_ALBERT_FINAL_PNG:
     "blog/network-theory-small-world/barabasi-albert-final.png",
   BLOG_NETWORK_THEORY_SMALL_WORLD_BARABASI_ALBERT_INITIAL_PNG:
@@ -88,6 +106,26 @@ export const KNOWN_IMAGE_METADATA: Record<
     oneX: blogAoc2021ReflectionsTzylAoc2021Png_1x,
     twoX: blogAoc2021ReflectionsTzylAoc2021Png_2x,
   },
+  [KnownImagePath.BLOG_HOW_TO_LEARN_DEV_ALGORITHMS_PNG]: {
+    oneX: blogHowToLearnDevAlgorithmsPng_1x,
+    twoX: blogHowToLearnDevAlgorithmsPng_2x,
+  },
+  [KnownImagePath.BLOG_HOW_TO_LEARN_DEV_DEVELOPER_TOOLS_PNG]: {
+    oneX: blogHowToLearnDevDeveloperToolsPng_1x,
+    twoX: blogHowToLearnDevDeveloperToolsPng_2x,
+  },
+  [KnownImagePath.BLOG_HOW_TO_LEARN_DEV_HOW_TO_LEARN_DEV_PNG]: {
+    oneX: blogHowToLearnDevHowToLearnDevPng_1x,
+    twoX: blogHowToLearnDevHowToLearnDevPng_2x,
+  },
+  [KnownImagePath.BLOG_HOW_TO_LEARN_DEV_LANGUAGE_BASICS_PNG]: {
+    oneX: blogHowToLearnDevLanguageBasicsPng_1x,
+    twoX: blogHowToLearnDevLanguageBasicsPng_2x,
+  },
+  [KnownImagePath.BLOG_HOW_TO_LEARN_DEV_PROJECTS_PNG]: {
+    oneX: blogHowToLearnDevProjectsPng_1x,
+    twoX: blogHowToLearnDevProjectsPng_2x,
+  },
   [KnownImagePath.BLOG_NETWORK_THEORY_SMALL_WORLD_BARABASI_ALBERT_FINAL_PNG]: {
     oneX: blogNetworkTheorySmallWorldBarabasiAlbertFinalPng_1x,
     twoX: blogNetworkTheorySmallWorldBarabasiAlbertFinalPng_2x,