feat: Add moment dependency and update release notes page

This commit adds the moment dependency to the project by updating the package-lock.json and package.json files. It also updates the release notes page by modifying the layout and adding a paragraph to thank users for their feedback.
2024-09-10 22:41:28 +02:00
parent 2434a88551
commit 0f442277ed
5 changed files with 108 additions and 74 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
        "feed": "^4.2.2",
        "framer-motion": "^11.3.24",
        "lucide-react": "^0.400.0",
+        "moment": "^2.30.1",
        "next": "14.2.4",
        "next-themes": "^0.3.0",
        "react": "^18.3.1",
@@ -14115,6 +14116,14 @@
        "mkdirp": "bin/cmd.js"
      }
    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/mri": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
    "feed": "^4.2.2",
    "framer-motion": "^11.3.24",
    "lucide-react": "^0.400.0",
+    "moment": "^2.30.1",
    "next": "14.2.4",
    "next-themes": "^0.3.0",
    "react": "^18.3.1",
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -51,7 +51,7 @@
   }

   [data-theme='dark'], .dark {
-      --background: 0 0% 0%;
+      --background: 5 5 5;
      --foreground: 0 0% 98%;

      --surface: rgb(23, 23, 23); 
--- a/src/app/release-notes/page.tsx
+++ b/src/app/release-notes/page.tsx
@@ -9,8 +9,11 @@ import Link from "next/link";
 export default function ReleaseNotes() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-start">
-      <div className="min-h-screen py-42 flex justify-center flex-col px-10 lg:px-0 md:w-2/3 lg:w-1/2">
-        <h1 className="text-4xl text-center font-bold mt-24">Release Notes</h1>
+      <div className="min-h-screen py-42 flex justify-center flex-col px-10 lg:px-0 lg:w-4/5 xl:w-3/5">
+        <h1 className="text-4xl font-bold mt-36">Release Notes</h1>
+        <p className="mt-8 text-lg text-muted-foreground">
+          Stay up to date with the latest changes to Zen Browser! Since the <a className="text-blue-500" href="#1.0.0-a.1">first release</a> till <a className="text-blue-500" href={`/release-notes/${releaseNotes[0].version}`}>{releaseNotes[0].version}</a>, we've been working hard to make Zen Browser the best it can be.<br /><br /> Thanks everyone for your feedback! ❤️
+        </p>
        {releaseNotes.map((releaseNote) => (
          <ReleaseNoteElement key={releaseNote.version} data={releaseNote} />
        ))}
--- a/src/components/release-note.tsx
+++ b/src/components/release-note.tsx
@@ -1,16 +1,26 @@
-import { ReleaseNote } from "@/lib/release-notes";
+import { ReleaseNote, releaseNotes } from "@/lib/release-notes";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { CheckCheckIcon, StarIcon } from "lucide-react";
 import StickyBox from "react-sticky-box";

+import moment from "moment";
+import { Accordion, AccordionItem } from "@radix-ui/react-accordion";
+import { AccordionContent, AccordionTrigger } from "./ui/accordion";
+import { ny } from "@/lib/utils";
+
 export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
+  const splitDate = data.date.split("/");
  return (
-    <div className="flex border-t relative pt-36 mt-36">
-      <StickyBox className="mt-1 mx-12 text-muted-foreground text-sm h-fit" offsetTop={120}>
-        {data.date}
+    <section className={ny("flex flex-col lg:flex-row border-t relative", data.version == releaseNotes[0].version ? "mt-24 pt-24" : "pt-36 mt-36")} id={data.version}>
+      <StickyBox className="mb-6 lg:mb-0 mt-1 mr-24 ml-10 text-muted-foreground text-xs min-w-52 h-fit" offsetTop={120}>
+        {moment({
+          year: parseInt(splitDate[2]),
+          month: parseInt(splitDate[1]) - 1,
+          day: parseInt(splitDate[0]),
+        }).format('MMMM Do, YYYY')}
      </StickyBox>
-      <div className="px-10 md:px-0">
-        <h1 className="text-4xl font-bold">
+      <div className="px-5 md:px-10 md:px-0 md:pr-32">
+        <h1 className="text-3xl font-bold">
          Release notes for {data.version} 🎉
        </h1>
        <p className="text-md mt-4 text-muted-foreground">
@@ -25,76 +35,87 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
        </p>
        {data.extra && (
          <p
-            className="text-md mt-8"
+            className="text-md text-muted-foreground mt-8"
            dangerouslySetInnerHTML={{
              __html: data.extra.replace(/(\n)/g, "<br />"),
            }}
          ></p>
        )}
-        {data.breakingChanges && (
-          <>
-            <h2 className="text-2xl font-bold mt-8 flex items-center">
-              <ExclamationTriangleIcon className="w-6 h-6 mr-4" />
-              Breaking changes
-            </h2>
-            <p className="text-md mt-4">
-              The following changes may break existing functionality:
-            </p>
-            <ul className="list-disc list-inside mt-2">
-              {data.breakingChanges?.map((change, index) => (
-                <li key={index} className="mt-1 text-muted-foreground">
-                  {change}
-                </li>
-              ))}
-            </ul>
-          </>
-        )}
-        {data.features && (
-          <>
-            <h2 className="text-2xl font-bold mt-8 flex items-center">
-              <StarIcon className="w-6 h-6 mr-4" />
-              Features
-            </h2>
-            <p className="text-md mt-2">
-              The following features have been added:
-            </p>
-            <ul className="list-disc list-inside mt-4">
-              {data.features?.map((feature, index) => (
-                <li key={index} className="text-md mt-1 text-muted-foreground">
-                  {feature}
-                </li>
-              ))}
-            </ul>
-          </>
-        )}
-        {data.fixes && (
-          <>
-            <h2 className="text-2xl flex items-center font-bold mt-8">
-              <CheckCheckIcon className="w-6 h-6 mr-4" />
-              Fixes
-            </h2>
-            <p className="text-md mt-2">
-              The following issues have been fixed:
-            </p>
-            <ul className="list-disc list-inside mt-2">
-              {data.fixes?.map((fix, index) => (
-                <li key={index} className="mt-1 text-muted-foreground">
-                  {fix.description}
-                  {fix.issue && (
-                    <a
-                      href={`https://github.com/zen-browser/desktop/issues/${fix.issue}`}
-                      target="_blank"
-                      className="ml-1 text-blue-500"
-                    >
-                      issue #{fix.issue}
-                    </a>
-                  )}
-                </li>
-              ))}
-            </ul>
-          </>
-        )}
+        <Accordion type="single" collapsible className="mt-8">
+          {data.breakingChanges && (
+            <AccordionItem value="breaking-changes" title="Breaking Changes">
+              <AccordionTrigger>
+                <div className="flex items-center">
+                  <ExclamationTriangleIcon className="text-red-500 mr-2 mt-1 size-5 opacity-50" />
+                  <span className="ml-2">Breaking Changes</span>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                <ul className="ml-6" style={{ listStyleType: "initial" }}>
+                  {data.breakingChanges.map((change) => (
+                    <li key={change} className="mt-4 text-md text-muted-foreground">
+                      <span className="ml-1">
+                        {change}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </AccordionContent>
+            </AccordionItem>
+            )
+          }
+          {data.fixes && (
+            <AccordionItem value="fixes" title="Fixes">
+              <AccordionTrigger>
+                <div className="flex items-center">
+                  <CheckCheckIcon className="mr-2 mt-1 size-5 opacity-50" />
+                  <span className="ml-2">Fixes</span>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                <ul className="ml-6" style={{ listStyleType: "initial" }}>
+                  {data.fixes.map((fix) => (
+                    <li key={fix.description} className="mt-4 text-md text-muted-foreground">
+                      <span className="ml-1">
+                        {fix.description}
+                      </span>
+                      {fix.issue && (
+                        <a
+                          href={`https://github.com/zen-browser/desktop/issues/${fix.issue}`}
+                          className="text-blue-500 ml-1 text-underline"
+                        >
+                          #{fix.issue}
+                        </a>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </AccordionContent>
+            </AccordionItem>
+          )}
+          {data.features && (
+            <AccordionItem value="features" title="Features">
+              <AccordionTrigger>
+                <div className="flex items-center">
+                  <StarIcon className="text-yellow-700 mr-2 mt-1 size-5 opacity-50" />
+                  <span className="ml-2">Features</span>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                <ul className="ml-6" style={{ listStyleType: "initial" }}>
+                  {data.features.map((feature) => (
+                    <li key={feature} className="mt-4 text-md text-muted-foreground">
+                      <span className="ml-1">
+                        {feature}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </AccordionContent>
+            </AccordionItem>
+          )}
+        </Accordion>
      </div>
-    </div>
+    </section>
  );
 }