ref: Refactor changelog list page

Author: Luca Forstner

apps/changelog/.env.development

@@ -3,6 +3,6 @@
 # warning: variables prefixed with NEXT_PUBLIC_ will be made available to client-side code
 # be careful not to expose sensitive data
 
-DATABASE_URL=postgresql://postgres:postgres@localhost:5432/changelog
+DATABASE_URL=postgres://postgres:BSd1sa244r5CI7S@localhost/changelog?host=34.70.239.3
 NEXTAUTH_URL=http://localhost:3000
 NEXTAUTH_SECRET=secret

apps/changelog/package.json

@@ -27,6 +27,7 @@
     "next-auth": "^4.24.5",
     "next-mdx-remote": "^4.4.1",
     "nextjs-toploader": "^1.6.6",
+    "nuqs": "^1.17.7",
     "prism-sentry": "^1.0.2",
     "react": "beta",
     "react-dom": "beta",

apps/changelog/prisma/migrations/20240807101452_published_at_non_optional/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Made the column `publishedAt` on table `Changelog` required. This step will fail if there are existing NULL values in that column.
+
+*/
+-- AlterTable
+ALTER TABLE "Changelog" ALTER COLUMN "publishedAt" SET NOT NULL;

apps/changelog/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

apps/changelog/prisma/schema.prisma

@@ -5,7 +5,7 @@ generator client {
 
 datasource db {
   provider = "postgresql"
-  url      = env("DATABASE_URL")
+  url      = "postgres://postgres:BSd1sa244r5CI7S@localhost/changelog?host=34.70.239.3"
 }
 
 model Account {
@@ -58,7 +58,7 @@ model VerificationToken {
 model Changelog {
   id          String     @id @default(cuid())
   createdAt   DateTime   @default(now())
-  publishedAt DateTime?  @default(now())
+  publishedAt DateTime   @default(now())
   updatedAt   DateTime   @updatedAt
   title       String     @db.VarChar(255)
   slug        String     @unique @db.VarChar(255)

apps/changelog/src/app/changelog/%5Fadmin/page.tsx

@@ -103,10 +103,11 @@ export default async function ChangelogsListPage() {
                   <span className="text-gray-500">
                     <Text size="1">
                       {' '}
-                      {new Date(changelog.publishedAt || '').toLocaleDateString(
-                        undefined,
-                        {month: 'long', day: 'numeric'}
-                      )}
+                      {new Date(changelog.publishedAt || '').toLocaleDateString('en-EN', {
+                        month: 'long',
+                        day: 'numeric',
+                        timeZone: 'UTC',
+                      })}
                     </Text>
                     <br />
                   </span>

apps/changelog/src/client/components/article.tsx

@@ -1,6 +1,6 @@
 import {ReactNode} from 'react';
-import Tag from './tag';
-import { DateComponent } from './date';
+import {DateComponent} from './date';
+import {CategoryTag} from './tag';
 
 type ArticleProps = {
   children?: ReactNode;
@@ -41,7 +41,7 @@ export default function Article({
         <h3 className="text-3xl text-primary font-semibold mb-2">{title}</h3>
         <div>
           <div className="flex flex-wrap gap-1 py-1">
-            {Array.isArray(tags) && tags.map(tag => <Tag key={tag} text={tag} />)}
+            {Array.isArray(tags) && tags.map(tag => <CategoryTag key={tag} text={tag} />)}
           </div>
 
           <div className="prose max-w-none text-gray-700 py-2">{children}</div>

apps/changelog/src/client/components/date.tsx

@@ -1,11 +1,10 @@
 const formatDate = (date: string | Date) => {
-  const options: Intl.DateTimeFormatOptions = {
+  const now = new Date(date).toLocaleDateString('en-EN', {
     year: 'numeric',
     month: 'long',
     day: 'numeric',
     timeZone: 'UTC'
-  };
-  const now = new Date(date).toLocaleDateString('en-EN', options);
+  });
 
   return now;
 };