changelog page

app/(main)/changelog/page.tsx

@@ -0,0 +1,29 @@
+import fs from "node:fs";
+import path from "node:path";
+import { serialize } from "next-mdx-remote/serialize";
+import { ChangelogPage } from "@/modules/changelog/ChangelogPage";
+
+export interface FrontMatter {
+  title: string;
+  date: string;
+}
+
+export default async function ChangelogPageWrapper() {
+  const changelogsDir = path.join(process.cwd(), "docs/changelog");
+  const files = fs.readdirSync(changelogsDir);
+
+  const changelogs = files.map((fileName) => {
+    const filePath = path.join(changelogsDir, fileName);
+    const fileContent = fs.readFileSync(filePath, "utf8");
+    return { fileName, fileContent };
+  });
+
+  const content = await Promise.all(changelogs.map(async (changelog) => {
+    return {
+      ...changelog,
+      mdxSource: await serialize<Record<string, unknown>, FrontMatter>(changelog.fileContent, { parseFrontmatter: true }),
+    };
+  }));
+
+  return <ChangelogPage data={content} />;
+}

components/Section.module.scss

@@ -0,0 +1,16 @@
+@import "@/styles/media";
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  &.padding-base { padding-block: var(--section-spacing); }
+  &.padding-content { padding-block: var(--content-spacing); }
+
+  .section-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+}

components/Section.tsx

@@ -0,0 +1,38 @@
+// Styles
+import style from "./Section.module.scss";
+import classNames from "classnames/bind";
+
+const cx = classNames.bind(style);
+
+interface SectionProps extends React.ComponentPropsWithoutRef<"section"> {
+  padding?: "base" | "content";
+};
+
+function SectionRoot(props: SectionProps) {
+  const { className, padding = "base", children, ...sectionProps } = props;
+
+  return (
+    <section
+      className={cx("section", `padding-${padding}`, className)}
+      {...sectionProps}
+    >
+      {children}
+    </section>
+  );
+}
+
+type SectionHeaderProps = React.ComponentPropsWithoutRef<"header">;
+
+function SectionHeader(props: SectionHeaderProps) {
+  const { className, children, ...headerProps } = props;
+
+  return (
+    <header className={cx("section-header", className)} {...headerProps}>
+      {children}
+    </header>
+  );
+}
+
+export const Section = Object.assign(SectionRoot, {
+  Header: SectionHeader,
+});

config/layout.ts

@@ -10,7 +10,7 @@ export const navbarLinks: GenericLink[] = [
   },
   {
     label: "Changelog",
-    href: "https://docs.tagstud.io/updates/changelog",
+    href: "/changelog",
   },
 ];
 
@@ -22,7 +22,7 @@ export const footerLinks: Record<string, GenericLink[]> = {
     },
     {
       label: "Changelog",
-      href: "https://docs.tagstud.io/updates/changelog",
+      href: "/changelog",
     },
   ],
   Community: [

docs/changelog/9.4.0.mdx

@@ -0,0 +1,47 @@
+---
+title: Alpha v9.4.0
+date: 2024-09-04
+---
+
+### Added
+- Copy and paste fields
+- Add multiple fields at once
+- Drag and drop files in/out of the program
+  - Files can be shared by dragging them from the thumbnail grid to other programs
+  - Files can be added to library folder by dragging them into the program
+- Manage Python virtual environment in Nix flake
+- Ability to create tag when adding tags
+- Blender preview thumbnail support
+- File deletion/trashing
+  - Added right-click option on thumbnails and preview panel to delete files
+  - Added Edit Menu option for deleting files
+  - Added <kbd>Delete</kbd> key shortcut for deleting files
+- Font preview thumbnail support
+  - Short "Aa" previews for thumbnails
+  - Full alphabet preview for the preview pane
+- Sort tags by alphabetical/color
+- File explorer action follows OS naming
+- Preview Source Engine files
+- Expanded thumbnail and preview features
+  - Add album cover art thumbnails
+  - Add audio waveform thumbnails for audio files without embedded cover art
+  - Add new default file thumbnails, both for generic and specific file types
+  - Change the unlinked file icon to better convey its meaning
+  - Add dropdown for different thumbnail sizes
+- Show File Creation and Modified dates; Restyle file path label
+
+### Fixed
+- Backslashes in f-string on file dupe widget
+- Tags not shown when none searched
+- Avoid error from eagerly grabbing data values
+- Correct behavior for tag search options
+- Load Gallery-DL sidecar files correctly
+- Correct duplicate file matching
+- GPU hardware acceleration in Nix flake
+- Suppress command prompt windows for FFmpeg in builds
+
+### Internal Changes
+- Move type constants to media classes
+- Combine open launch arguments
+- Revamp Nix flake with devenv/direnv in cb4798b
+- Remove impurity of Nix flake when used with direnv in bc38e56

docs/changelog/9.4.1.mdx

@@ -0,0 +1,16 @@
+---
+title: Alpha v9.4.1
+date: 2024-09-14
+---
+
+### Added
+- Warn user if FFmpeg is not installed
+- Support for `.raf` and `.orf` raw image thumbnails and previews
+
+### Fixed
+- Use `birthtime` for file creation time on Mac & Windows
+- Use audio icon fallback when FFmpeg is not detected
+- Retain search query upon directory refresh
+
+### Changed
+- Significantly improve file re-scanning performance

modules/changelog/ChangelogPage.module.scss

@@ -0,0 +1,103 @@
+.page {
+  margin-inline: auto;
+
+  h1 {
+    margin-left: 16rem;
+  }
+
+  .posts {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    .post {
+      display: grid;
+      flex-direction: column;
+      grid-template-columns: 16rem 1fr;
+      padding-block: 2rem;
+      place-items: start;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--theme-outline);
+      }
+
+      header {
+        position: sticky;
+        top: 2rem;
+
+        time {
+          display: block;
+          margin-top: 0.5rem;
+        }
+      }
+
+      .body {
+        color: var(--color-gray-300);
+        font-size: var(--font-size-lg);
+
+        > :first-child {
+          margin-top: 0;
+        }
+
+        h1, h2, h3, h4, h5, h6 {
+          margin: 2.5rem 0 1.5rem;
+        }
+
+        h3 {
+          font-size: var(--font-size-xl);
+        }
+
+        p {
+          margin-bottom: 1.5rem;
+        }
+
+        a {
+          color: var(--color-blue-400);
+          text-decoration: underline;
+        }
+
+        ul, ol {
+          padding-left: 1.5rem;
+          margin-bottom: 1.5rem;
+
+          li {
+            margin-bottom: 0.75rem;
+
+            &::marker {
+              color: var(--color-gray-500);
+            }
+
+            ul, ol {
+              margin-block: 1rem;
+            }
+          }
+        }
+
+        code {
+          padding: 2px 4px;
+          border-radius: var(--rounded-sm);
+          background-color: var(--color-gray-800);
+          font-family: monospace;
+          font-size: var(--font-size-sm);
+        }
+
+        kbd {
+          padding: 2px 6px;
+          border: 1px solid var(--color-gray-700);
+          border-radius: var(--rounded-sm);
+          background-color: var(--color-gray-800);
+          font-size: var(--font-size-sm);
+          font-weight: 500;
+        }
+
+        pre {
+          padding: 1em;
+          border-radius: 5px;
+          margin-bottom: 1.5rem;
+          background-color: #f4f4f4;
+          overflow-x: auto;
+        }
+      }
+    }
+  }
+}

modules/changelog/ChangelogPage.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type { FrontMatter } from "@/app/(main)/changelog/page";
+
+import { formatDate } from "@/util/formatDate";
+import { MDXRemote, type MDXRemoteSerializeResult } from "next-mdx-remote";
+
+// Components
+import { Section } from "@/components/Section";
+
+// Styles
+import style from "./ChangelogPage.module.scss";
+import classNames from "classnames/bind";
+
+const cx = classNames.bind(style);
+
+interface Props {
+  data: {
+    mdxSource: MDXRemoteSerializeResult<Record<string, unknown>, FrontMatter>;
+    fileName: string;
+    fileContent: string;
+  }[];
+}
+
+export function ChangelogPage({ data }: Props) {
+  return (
+    <main className={cx("page", "pageLayout")}>
+      <Section>
+        <Section.Header>
+          <h1>Changelog</h1>
+        </Section.Header>
+
+        <div className={cx("posts")}>
+          {data.sort((a, b) => new Date(b.mdxSource.frontmatter.date).getTime() - new Date(a.mdxSource.frontmatter.date).getTime()).map((post) => (
+            <article key={post.fileName} className={cx("post")}>
+              <header>
+                <h6>{post.mdxSource.frontmatter.title}</h6>
+                <time dateTime={post.mdxSource.frontmatter.date}>{formatDate(post.mdxSource.frontmatter.date)}</time>
+              </header>
+
+              <div className={cx("body")}>
+                <MDXRemote {...post.mdxSource} />
+              </div>
+            </article>
+          ))}
+        </div>
+      </Section>
+    </main>
+  );
+}

package.json

@@ -13,8 +13,10 @@
     "classnames": "^2.5.1",
     "framer-motion": "^11.11.7",
     "next": "14.2.14",
+    "next-mdx-remote": "^5.0.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "remark-gfm": "^4.0.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.7.3",