feat: revamp styles and fix ui (#16)

* feat(post): add read post page * feat: revamp ui colors * style: fix styling error * chore: update deps * fix: open-graph images metadata * chore: remove unused ts error * chore: add no store cache in /me --------- Co-authored-by: Andika E. Kurnia <73420758+DikDns@users.noreply.github.com>
himarplupi · Jun 27, 2024 · 5df14fd · 5df14fd
1 parent 20bf73d
commit 5df14fd
Show file tree

Hide file tree

Showing 17 changed files with 3,105 additions and 2,248 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "@icons-pack/react-simple-icons": "^9.4.0",
     "@next/third-parties": "^14.1.4",
     "@paralleldrive/cuid2": "^2.2.2",
-    "@prisma/client": "^5.12.1",
+    "@prisma/client": "^5.16.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.4",
@@ -61,15 +61,15 @@
     "@trpc/react-query": "^10.45.1",
     "@trpc/server": "^10.45.1",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "embla-carousel-react": "^8.0.2",
-    "framer-motion": "^11.0.20",
+    "framer-motion": "^11.2.12",
     "github-slugger": "^2.0.0",
     "html-react-parser": "^5.1.10",
     "lint-staged": "^15.2.2",
     "lucide-react": "^0.363.0",
     "moment": "^2.30.1",
-    "next": "^14.1.3",
+    "next": "^14.2.4",
     "next-auth": "^4.24.6",
     "next-themes": "^0.3.0",
     "react": "18.2.0",
@@ -80,7 +80,7 @@
     "sharp": "^0.33.3",
     "sonner": "^1.4.41",
     "superjson": "^2.2.1",
-    "tailwind-merge": "^2.2.2",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "use-debounce": "^10.0.0",
     "zod": "^3.23.6"
@@ -103,7 +103,7 @@
     "postcss": "^8.4.34",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.11",
-    "prisma": "^5.12.1",
+    "prisma": "^5.16.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.4.2"
   },

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -58,9 +58,10 @@ model Post {
 model Department {
   id          String         @id @default(cuid())
   name        String
-  acronym     String?
+  acronym     String         @unique
   image       String?
   description String?
+  programs    String[]
   type        DepartmentType
   createdAt   DateTime       @default(now())
   updatedAt   DateTime       @default(now()) @updatedAt

diff --git a/src/app/[username]/[slug]/page.tsx b/src/app/[username]/[slug]/page.tsx
@@ -71,7 +71,7 @@ export default async function PostPage({
           </div>
         </div>
 
-        <article className="prose prose-invert mt-4 min-h-screen max-w-none lg:prose-xl prose-headings:border-b prose-headings:font-serif prose-headings:font-semibold prose-headings:tracking-tight">
+        <article className="prose mt-4 min-h-screen max-w-none dark:prose-invert lg:prose-xl prose-headings:border-b prose-headings:font-serif prose-headings:font-semibold prose-headings:tracking-tight">
           {parse(post.rawHtml)}
         </article>
       </main>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -62,13 +62,29 @@ const fontSerif = localFont({
 
 export const metadata = {
   title: "Blog | HIMARPL",
-  description: "Masih dalam tahap pengembangan!",
+  metadataBase: new URL("https://blog.himarpl.com"),
+  description: "Tulisan-tulisan pengurus HIMARPL",
   icons: [
     {
       rel: "icon",
       url: "/favicon.ico",
     },
   ],
+  openGraph: {
+    title: "Blog HIMARPL",
+    description: "Tulisan-tulisan pengurus HIMARPL",
+    url: "https://blog.himarpl.com",
+    siteName: "Blog HIMARPL",
+    images: "https://blog.himarpl.com/opengraph-image.gif",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Blog HIMARPL",
+    description: "Tulisan-tulisan pengurus HIMARPL",
+    creator: "@himarpl",
+    images: ["https://blog.himarpl.com/twitter-image.gif"], // Must be an absolute URL
+  },
 };
 
 export default async function RootLayout({
@@ -82,7 +98,7 @@ export default async function RootLayout({
 
       <body
         className={cn(
-          "bg-background font-sans antialiased",
+          "dark bg-background font-sans antialiased",
           fontSans.variable,
           fontSerif.variable,
         )}

diff --git a/src/app/me/layout.tsx b/src/app/me/layout.tsx
@@ -1,3 +1,4 @@
+import { unstable_noStore as noStore } from "next/cache";
 import { redirect } from "next/navigation";
 
 import { Navbar } from "@/components/common/navbar";
@@ -8,6 +9,7 @@ export default async function MeLayout({
 }: {
   children: React.ReactNode;
 }) {
+  noStore();
   const session = await getServerAuthSession();
 
   if (!session) redirect("/login");

diff --git a/src/components/common/auth.tsx b/src/components/common/auth.tsx
@@ -23,7 +23,6 @@ import { SiGoogle } from "@icons-pack/react-simple-icons";
 export function GoogleLoginButton() {
   return (
     <Button variant="outline" onClick={() => signIn("google")}>
-      {/* @ts-expect-error React Simple Icons Lol Type */}
       <SiGoogle color="#fafafa" className="mr-2 h-4 w-4" />
       Login with Google
     </Button>

diff --git a/src/components/common/global-footer.tsx b/src/components/common/global-footer.tsx
@@ -77,7 +77,6 @@ function SocialMediaLinks() {
             }),
           )}
         >
-          {/* @ts-expect-error: Entahlah SimpleIcon gaje */}
           <SiInstagram color="default" className="h-5 w-5" />
         </Link>
       </li>
@@ -91,7 +90,6 @@ function SocialMediaLinks() {
             }),
           )}
         >
-          {/* @ts-expect-error: Entahlah SimpleIcon gaje */}
           <SiYoutube color="default" className="h-5 w-5" />
         </Link>
       </li>
@@ -105,7 +103,6 @@ function SocialMediaLinks() {
             }),
           )}
         >
-          {/* @ts-expect-error: Entahlah SimpleIcon gaje */}
           <SiTiktok color="hsl(var(--foreground))" className="h-5 w-5" />
         </Link>
       </li>

diff --git a/src/components/common/navbar.tsx b/src/components/common/navbar.tsx
@@ -29,7 +29,7 @@ export function Navbar({ session }: { session: Session | null }) {
   return (
     !hideNavbarOnRoutes.includes(pathname) && (
       <nav className="fixed top-0 z-10 w-full drop-shadow-md">
-        <div className="container flex items-center justify-between bg-primary-foreground py-2 backdrop-blur-md">
+        <div className="container flex items-center justify-between bg-background py-2 backdrop-blur-md">
           <div className="flex items-center gap-x-5">
             <div className="flex items-center gap-x-2">
               <NavSheet>

diff --git a/src/components/editor/menu-items/image.tsx b/src/components/editor/menu-items/image.tsx
@@ -88,7 +88,9 @@ export function Image() {
           </div>
           <DialogFooter>
             <DialogClose asChild>
-              <Button onClick={handleSubmit}>Sisipkan</Button>
+              <Button disabled={src.length < 1} onClick={handleSubmit}>
+                Sisipkan
+              </Button>
             </DialogClose>
           </DialogFooter>
         </DialogContent>

diff --git a/src/components/editor/menu-items/link.tsx b/src/components/editor/menu-items/link.tsx
@@ -100,7 +100,7 @@ export function LinkInput() {
     <div
       key="link-input"
       className={cn(
-        "duration-400 fixed bottom-12 z-10 w-full bg-primary-foreground px-2 py-4 ease-in-out fill-mode-forwards md:container md:bottom-auto md:top-28 md:px-10",
+        "duration-400 fixed bottom-12 z-10 w-full bg-background px-2 pb-4 pt-6 ease-in-out fill-mode-forwards md:container md:bottom-auto md:top-24 md:px-10",
         editor?.isActive("link")
           ? "animate-in fade-in slide-in-from-bottom-16 md:slide-in-from-top-16"
           : "animate-out fade-out slide-out-to-bottom-16 md:slide-out-to-top-16",

diff --git a/src/components/editor/menu-items/youtube.tsx b/src/components/editor/menu-items/youtube.tsx
@@ -46,7 +46,6 @@ export function Youtube() {
             <div>
               <DialogTrigger asChild>
                 <Button size="icon" variant="ghost" disabled={isHeading}>
-                  {/* @ts-expect-error: Entahlah SimpleIcon gaje */}
                   <SiYoutube
                     color="hsl(var(--foreground))"
                     className="h-4 w-4"
@@ -79,7 +78,9 @@ export function Youtube() {
           </div>
           <DialogFooter>
             <DialogClose asChild>
-              <Button onClick={handleSubmit}>Sisipkan</Button>
+              <Button disabled={src.length < 1} onClick={handleSubmit}>
+                Sisipkan
+              </Button>
             </DialogClose>
           </DialogFooter>
         </DialogContent>

diff --git a/src/components/editor/menu.tsx b/src/components/editor/menu.tsx
@@ -13,7 +13,7 @@ export function EditorMenu() {
       <aside
         key="menu"
         className={cn(
-          "fixed bottom-0 z-20 w-full bg-primary-foreground duration-500 ease-in-out animate-in slide-in-from-bottom-24 md:container md:bottom-auto md:top-14 md:slide-in-from-top-24 ",
+          "fixed bottom-0 z-20 w-full bg-background duration-500 ease-in-out animate-in slide-in-from-bottom-24 md:container md:bottom-auto md:top-14 md:slide-in-from-top-24 ",
         )}
       >
         <Carousel

diff --git a/src/components/editor/navbar.tsx b/src/components/editor/navbar.tsx
@@ -24,7 +24,7 @@ export function EditorNavbar({ session }: { session: Session | null }) {
   const { isSaving } = useEditor();
 
   return (
-    <nav className="container fixed top-0 z-30 w-full space-y-2 bg-primary-foreground py-2 drop-shadow-md backdrop-blur-md">
+    <nav className="container fixed top-0 z-30 w-full space-y-2 bg-background py-2 drop-shadow-md backdrop-blur-md">
       <div className="z-50 flex items-center justify-between">
         <div className="flex items-center gap-x-5">
           <div className="flex items-center gap-x-2">

diff --git a/src/components/me/form-social-media.tsx b/src/components/me/form-social-media.tsx
@@ -111,7 +111,6 @@ export function FormSocialMedia() {
                   <FormItem className="grid gap-1">
                     <FormLabel className="flex items-center gap-x-2">
                       <span>
-                        {/* @ts-expect-error: Simple Icon onpointer error */}
                         <SiInstagram color="hsl(var(--foreground))" />
                       </span>
                       <span>Instagram</span>
@@ -135,7 +134,6 @@ export function FormSocialMedia() {
                   <FormItem className="grid gap-1">
                     <FormLabel className="flex items-center gap-x-2">
                       <span>
-                        {/* @ts-expect-error: Simple Icon onpointer error */}
                         <SiGithub color="hsl(var(--foreground))" />
                       </span>
                       <span>Github</span>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -4,38 +4,49 @@
 
 @layer base {
   :root {
-    --gradient: #ffcd29;
-
-    --background: 220 9% 7%;
-    --foreground: 240 3% 94%;
-
-    --muted: 220 5% 17%;
-    --muted-foreground: 240 3% 58%;
-
-    --popover: 220 5% 9%;
-    --popover-foreground: 240 3% 94%;
-
-    --card: 220 5% 9%;
-    --card-foreground: 240 3% 94%;
-
-    --border: 220 5% 17%;
-    --input: 220 5% 17%;
-
-    --primary: 49 100% 58%;
-    --primary-foreground: 49 10% 5.8%;
-
-    --secondary: 220 5% 17%;
-    --secondary-foreground: 240 3% 94%;
-
-    --accent: 220 5% 17%;
-    --accent-foreground: 240 3% 94%;
-
-    --destructive: 0 84% 45.5%;
-    --destructive-foreground: 240 3% 94%;
-
-    --ring: 49 100% 58%;
+    --background: 226 18% 95%;
+    --foreground: 226 5% 10%;
+    --card: 226 18% 90%;
+    --card-foreground: 226 5% 15%;
+    --popover: 226 18% 95%;
+    --popover-foreground: 226 95% 10%;
+    --primary: 226 100% 58%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 226 18% 70%;
+    --secondary-foreground: 0 0% 0%;
+    --muted: 188 18% 85%;
+    --muted-foreground: 226 5% 35%;
+    --accent: 188 18% 80%;
+    --accent-foreground: 226 5% 15%;
+    --destructive: 0 50% 30%;
+    --destructive-foreground: 226 5% 90%;
+    --border: 226 20% 50%;
+    --input: 226 20% 28%;
+    --ring: 226 100% 58%;
+    --radius: 0.3rem;
+  }
 
-    --radius: 0.4rem;
+  .dark {
+    --background: 226 18% 10%;
+    --foreground: 226 5% 90%;
+    --card: 226 18% 10%;
+    --card-foreground: 226 5% 90%;
+    --popover: 226 18% 5%;
+    --popover-foreground: 226 5% 90%;
+    --primary: 226 100% 58%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 226 18% 20%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 188 18% 25%;
+    --muted-foreground: 226 5% 60%;
+    --accent: 188 18% 25%;
+    --accent-foreground: 226 5% 90%;
+    --destructive: 0 50% 30%;
+    --destructive-foreground: 226 5% 90%;
+    --border: 226 20% 28%;
+    --input: 226 20% 28%;
+    --ring: 226 100% 58%;
+    --radius: 0.3rem;
   }
 
   * {