refactor: improv timeline item load algorism

next.config.mjs

@@ -1,13 +1,13 @@
 //@ts-check
 import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
 import createBundleAnalyzer from "@next/bundle-analyzer";
-import createMdnConfig from "@next/mdx";
+import createMdxConfig from "@next/mdx";
 
 const withVanillaExtract = createVanillaExtractPlugin();
 const withBundleAnalyzer = createBundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
 });
-const withMDX = createMdnConfig({
+const withMDX = createMdxConfig({
   extension: /\.mdx?$/,
   options: {
     providerImportSource: "@mdx-js/react",

package.json

@@ -1,8 +1,9 @@
 {
   "name": "Sharjects",
   "scripts": {
-    "dev": "next dev",
+    "dev": "yarn prebuild && next dev",
     "buildstart": "next build && next start",
+    "prebuild": "node scripts/generateTimelineMetadata.js",
     "build": "next build",
     "start": "next start",
     "refresh": "scripts/refresh_token.bash",

public/data/timelineMetadata.json

@@ -0,0 +1 @@
+{"20200100":"doc/timeline/20200100.mdx","20200208":"doc/timeline/20200208.mdx","20200808":"doc/timeline/20200808.mdx","20200825":"doc/timeline/20200825.mdx","20200926":"doc/timeline/20200926.mdx","20200929":"doc/timeline/20200929.mdx","20201004":"doc/timeline/20201004.mdx","20201024":"doc/timeline/20201024.mdx","20210100":"doc/timeline/20210100.mdx","20210207":"doc/timeline/20210207.mdx","20210222":"doc/timeline/20210222.mdx","20210504":"doc/timeline/20210504.mdx","20210811":"doc/timeline/20210811.mdx","20210828":"doc/timeline/20210828.mdx","20210829":"doc/timeline/20210829.mdx","20210908":"doc/timeline/20210908.mdx","20211021":"doc/timeline/20211021.mdx","20220100":"doc/timeline/20220100.mdx","20220127":"doc/timeline/20220127.mdx","20220430":"doc/timeline/20220430.mdx","20220528":"doc/timeline/20220528.mdx","20220625":"doc/timeline/20220625.mdx","20220706":"doc/timeline/20220706.mdx","20220725":"doc/timeline/20220725.mdx","20220813":"doc/timeline/20220813.mdx","20220923":"doc/timeline/20220923.mdx","20221116":"doc/timeline/20221116.mdx","20221120":"doc/timeline/20221120.mdx","20221125":"doc/timeline/20221125.mdx","20221128":"doc/timeline/20221128.mdx","20230100":"doc/timeline/20230100.mdx","20230121":"doc/timeline/20230121.mdx","20230129":"doc/timeline/20230129.mdx","20230204":"doc/timeline/20230204.mdx"}

scripts/generateTimelineMetadata.js

@@ -0,0 +1,14 @@
+const fs = require("fs");
+const path = require("path");
+const timelineDir = path.resolve(process.cwd(), "public", "doc", "timeline");
+const timelinePaths = fs.readdirSync(timelineDir);
+const timelineMetadata = Object.fromEntries(
+  timelinePaths.map((timelinePath) => [
+    timelinePath.split(".")[0],
+    `doc/timeline/${timelinePath}`,
+  ])
+);
+fs.writeFileSync(
+  path.resolve(process.cwd(), "public", "data", "timelineMetadata.json"),
+  JSON.stringify(timelineMetadata)
+);

src/components/pages/timeline/TimelineItems.css.ts

@@ -0,0 +1,79 @@
+import { style, globalStyle } from "@vanilla-extract/css";
+import ThemeVariables from "src/core/ThemeVariables";
+
+export const timelineItemsContainer = style({
+  marginTop: "10px",
+  transition: "all 300ms",
+});
+
+export const timelineItemContainer = style({
+  display: "flex",
+});
+
+export const timeConnector = style({
+  borderLeft: "solid 1px #bdbdbd",
+  minHeight: "48px",
+  marginRight: "var(--gap)",
+  vars: {
+    "--gap": "20px",
+  },
+  selectors: {
+    "&:has( .has-content)": {
+      vars: {
+        "--gap": "20px",
+        "--size": "var(--gap)",
+        "--color": ThemeVariables.palette.primary.main,
+      },
+    },
+    "&:not(:has( .has-content))": {
+      vars: {
+        "--gap": "20px",
+        "--size": "calc(var(--gap) / 2)",
+        "--color": "lightgray",
+      },
+    },
+    "&::after": {
+      content: "''",
+      position: "absolute",
+      transform: "translate(calc(var(--size) / -2), calc(var(--size) * 3 / 4))",
+      borderRadius: "calc(var(--size) / 2)",
+      width: "var(--size)",
+      height: "var(--size)",
+      backgroundColor: "var(--color)",
+    },
+  },
+});
+
+export const header = style({
+  color: "themedBlack",
+  fontFamily: "bold",
+  fontSize: "35px",
+});
+
+export const dummyHeader = style({
+  fontSize: "5px",
+  color: "#9e9e9e",
+});
+
+export const timeContent = style({
+  margin: "20px 0px 20px 10px",
+  border: "1px solid #fcfcfc",
+  borderRadius: "20px",
+  padding: "15px",
+});
+globalStyle(`${timeContent} > h1`, {
+  fontSize: ThemeVariables.typography.h5.fontSize,
+  fontWeight: ThemeVariables.typography.h5.fontWeight,
+  lineHeight: ThemeVariables.typography.h5.lineHeight,
+});
+globalStyle(`${timeContent} > p`, {
+  marginLeft: "min(3vw, 20px)",
+  maxWidth: "700px",
+});
+globalStyle(`${timeContent} > a`, {
+  color: "blue",
+});
+globalStyle(`${timeContent} > div`, {
+  margin: "min(2vw, 10px)",
+  width: "min(100%, 400px)",
+});

src/components/pages/timeline/TimelineItems.tsx

@@ -0,0 +1,92 @@
+import dynamic from "next/dynamic";
+
+import GithubUserCard from "src/components/GithubUserCard";
+import GithubRepoCard from "src/components/GithubRepoCard";
+import Skeleton from "@mui/material/Skeleton";
+import { MDXProvider } from "@mdx-js/react";
+
+import { motion } from "framer-motion";
+import * as styles from "./TimelineItems.css";
+import timelineMetadata from "public/data/timelineMetadata.json";
+
+const dates = Array.from([2020, 2021, 2022, 2023], (year) =>
+  Array.from({ length: 12 }, (_, month) =>
+    Array.from(
+      { length: 32 },
+      (_, day) =>
+        `${year}${(month + 1).toString().padStart(2, "0")}${day
+          .toString()
+          .padStart(2, "0")}`
+    )
+  )
+).flat(2);
+const dateStringify = (date: string) =>
+  date[0] + date[1] + "." + date[2] + date[3] + "." + date[4] + date[5];
+
+const TimelineParagraphComponents = Object.fromEntries(
+  dates.map((date) => [
+    date,
+    //@ts-ignore
+    timelineMetadata[date]
+      ? dynamic<typeof import("*.mdx")["default"]>(
+          () =>
+            import("public/doc/timeline/" + date + ".mdx").then((res) => {
+              const Component = res.default;
+              return () => (
+                <>
+                  <p className={styles.header + " has-content"}>
+                    {dateStringify(date)}
+                  </p>
+                  <div className={styles.timeContent}>
+                    <Component />
+                  </div>
+                </>
+              );
+            }),
+          {
+            loading: () => <Skeleton variant="rounded" height={150} />,
+            ssr: false,
+          }
+        )
+      : () => <span className={styles.dummyHeader}>{dateStringify(date)}</span>,
+  ])
+);
+
+export default function TimelineItems() {
+  return (
+    <div className={styles.timelineItemsContainer}>
+      <MDXProvider
+        components={{
+          UserCard: GithubUserCard,
+          RepoCard: GithubRepoCard,
+        }}
+      >
+        {Object.entries(TimelineParagraphComponents).map(
+          ([date, Component]) => {
+            return (
+              <div className={styles.timelineItemContainer} key={date}>
+                <motion.span
+                  className={styles.timeConnector}
+                  initial={{ borderLeftColor: "rgba(74.1, 74.1, 74.1, 0)" }}
+                  whileInView={{
+                    borderLeftColor: "rgba(74.1, 74.1, 74.1, 0.3)",
+                  }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.1 }}
+                />
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  whileInView={{ opacity: 1 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.3 }}
+                >
+                  <Component />
+                </motion.div>
+              </div>
+            );
+          }
+        )}
+      </MDXProvider>
+    </div>
+  );
+}