chore(blog): feedback

Author: mhartington

apps/blog/src/app/(blog)/layout.tsx

@@ -12,38 +12,38 @@ export function baseOptions() {
         sub: [
           {
             text: "Postgres",
-            url: "/postgres",
+            url: "https://www.prisma.io/postgres",
             desc: "Managed Postgres for global workloads",
             icon: "fa-regular fa-chart-pyramid",
           },
           {
             text: "ORM",
-            url: "/orm",
+            url: "https://www.prisma.io/orm",
             desc: "Managed Postgres for global workloads",
             icon: "fa-regular fa-database",
           },
           {
             text: "Studio",
             icon: "fa-regular fa-table",
-            url: "/studio",
+            url: "https://www.prisma.io/studio",
             desc: "Explore and manipulate your data",
           },
           {
             icon: "fa-regular fa-bolt",
             text: "Accelerate",
             desc: "Make your database global",
-            url: "/accelerate",
+            url: "https://www.prisma.io/accelerate",
           },
           {
             icon: "fa-regular fa-plug",
             text: "Management API",
             desc: "Offer Postgres to your users",
-            url: "/",
+            url: "https://www.prisma.io/management-api",
           },
         ],
       },
       {
-        url: "/pricing",
+        url: "https://www.prisma.io/pricing",
         text: "Pricing",
       },
       {
@@ -52,42 +52,42 @@ export function baseOptions() {
         sub: [
           {
             text: "MCP",
-            url: "/mcp",
+            url: "https://www.prisma.io/mcp",
             icon: "fa-regular fa-message-code",
           },
           {
             text: "Get started",
-            url: "/docs",
+            url: "https://www.prisma.io/docs",
             icon: "fa-regular fa-book-open",
           },
           {
             text: "Tutorials",
-            url: "/learn",
+            url: "https://www.prisma.io/learn",
             icon: "fa-regular fa-clapperboard-play",
           },
           {
             text: "Examples",
-            url: "/",
+            url: "https://www.prisma.io/examples",
             icon: "fa-regular fa-grid-2",
           },
           {
             text: "Stack",
-            url: "/stack",
+            url: "https://www.prisma.io/stack",
             icon: "fa-regular fa-layer-group",
           },
           {
             text: "Ecosystem",
-            url: "/ecosystem",
+            url: "https://www.prisma.io/ecosystem",
             icon: "fa-regular fa-globe",
           },
           {
             text: "Customer stories",
-            url: "/",
+            url: "https://www.prisma.io/showcase",
             icon: "fa-regular fa-users",
           },
           {
             text: "Data guide",
-            url: "/dataguide",
+            url: "https://www.prisma.io/dataguide",
             icon: "fa-regular fa-file-binary",
           },
         ],
@@ -97,7 +97,7 @@ export function baseOptions() {
         text: "Partners",
       },
       {
-        url: "/blog",
+        url: "https://www.prisma.io/blog",
         text: "Blog",
       },
     ],
@@ -106,7 +106,7 @@ export function baseOptions() {
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <ThemeProvider defaultTheme="system" storageKey="blog-theme">
+    <ThemeProvider defaultTheme="system" storageKey="theme">
       <WebNavigation links={baseOptions().links} />
       {children}
       <Footer />

apps/blog/src/app/global.css

@@ -41,8 +41,9 @@
 
 .newsletter-bg {
     background: linear-gradient(
-        59deg,
-        color-mix(in srgb, var(--color-foreground-ppg) 10%, transparent) 6.53%,
-        color-mix(in srgb, var(--color-background-default) 10%, transparent) 74.71%
-    );
+        59deg, 
+        color-mix(in srgb, var(--color-foreground-ppg) 30%, transparent) 6.53%, 
+        var(--color-background-default) 74.71%
+        )
 }
+

apps/blog/src/components/BlogGrid.tsx

@@ -290,7 +290,7 @@ export function BlogGrid({
     }
 
     window.scrollTo({ top: 0, behavior: "smooth" });
-  }, [currentCat, currentPage, pathname, router, totalPages]);
+  }, [currentCat, currentPage, pathname, router, searchParams, totalPages]);
 
   const formatTag = (tag: string) => {
     return tag === "orm"

apps/blog/src/components/PostCard.tsx

@@ -59,8 +59,8 @@ export function PostCard({
     isFeatured && "leading-[20px]!",
   );
   const authorClassName = cn(
-    "items-center gap-2 font-semibold text-sm",
-    isFeatured ? "mt-auto flex" : "hidden sm:flex",
+    "items-center gap-2 font-semibold text-sm mt-4 md:mt-0",
+    isFeatured ? "flex" : "hidden sm:flex",
   );
 
   const postBody = (

packages/ui/src/components/newsletter.tsx

@@ -46,13 +46,27 @@ export const FooterNewsletterForm = ({
     return buttonText;
   };
 
+  const statusMessage = error
+    ? { text: error, className: "text-red-500" }
+    : isSubmitted
+      ? {
+          text: "Please check your email to confirm your subscription!",
+          className: "text-green-500",
+        }
+      : isAlreadySubscribed
+        ? {
+            text: "You're already subscribed to our newsletter!",
+            className: "text-blue-500",
+          }
+        : null;
+
   return (
     <div className="w-full">
       <form
         onSubmit={handleSubmit}
         className="flex gap-6 sm:gap-2 items-center justify-between w-full flex-col sm:flex-row "
       >
-        <h5 className="font-family-display font-[650] text-white text-base">
+        <h5 className="font-family-display font-[650] text-neutral text-base">
           Subscribe to our newsletter
         </h5>
         <div>
@@ -84,21 +98,17 @@ export const FooterNewsletterForm = ({
               />
             </Button>
           </div>
-          {error && (
-            <p className="text-red-500 text-sm mt-2 self-start sm:absolute">
-              {error}
-            </p>
-          )}
-          {isSubmitted && (
-            <p className="text-green-500 text-sm mt-2 self-start sm:absolute">
-              Please check your email to confirm your subscription!
-            </p>
-          )}
-          {isAlreadySubscribed && (
-            <p className="text-blue-500 text-sm mt-2 self-start sm:absolute">
-              You're already subscribed to our newsletter!
-            </p>
-          )}
+          <div className="mt-2 min-h-5">
+            {statusMessage ? (
+              <p
+                className={cn("text-sm self-start", statusMessage.className)}
+                role="status"
+                aria-live="polite"
+              >
+                {statusMessage.text}
+              </p>
+            ) : null}
+          </div>
         </div>
       </form>
     </div>

packages/ui/src/components/theme-provider.tsx

@@ -43,9 +43,6 @@ export function ThemeProvider({
   storageKey = "theme",
   attribute = "data-theme",
 }: ThemeProviderProps) {
-  const [theme, setThemeState] = useState<Theme>(defaultTheme);
-  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>("light");
-
   // Get system theme preference
   const getSystemTheme = (): ResolvedTheme => {
     if (typeof window === "undefined") return "light";
@@ -59,6 +56,26 @@ export function ThemeProvider({
     return themeValue === "system" ? getSystemTheme() : themeValue;
   };
 
+  const toTheme = (value: string | null): Theme | null => {
+    if (value === "light" || value === "dark" || value === "system") {
+      return value;
+    }
+    return null;
+  };
+
+  const getInitialTheme = (): Theme => {
+    if (typeof window === "undefined") return defaultTheme;
+
+    const stored = toTheme(localStorage.getItem(storageKey));
+    // Requested behavior: prefer stored value, otherwise system preference.
+    return stored ?? "system";
+  };
+
+  const [theme, setThemeState] = useState<Theme>(() => getInitialTheme());
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>(() =>
+    resolveTheme(getInitialTheme()),
+  );
+
   // Apply theme to document
   const applyTheme = (themeValue: ResolvedTheme) => {
     if (typeof window === "undefined") return;
@@ -86,18 +103,11 @@ export function ThemeProvider({
     }
   };
 
-  // Initialize theme from localStorage or default
+  // Apply initial theme on mount.
   useEffect(() => {
     if (typeof window === "undefined") return;
-
-    const stored = localStorage.getItem(storageKey) as Theme | null;
-    const initialTheme = stored || defaultTheme;
-    const resolved = resolveTheme(initialTheme);
-
-    setThemeState(initialTheme);
-    setResolvedTheme(resolved);
-    applyTheme(resolved);
-  }, []);
+    applyTheme(resolvedTheme);
+  }, [resolvedTheme]);
 
   // Listen for system theme changes
   useEffect(() => {

packages/ui/src/components/web-navigation.tsx

@@ -50,7 +50,7 @@ export function WebNavigation({ links }: WebNavigationProps) {
         <NavigationWrapper mobileOpen={mobileView}>
           <NavigationMenuList>
             <NavigationMenuItem>
-              <NavigationMenuLink className="shrink-0 w-full p-0">
+              <NavigationMenuLink className="shrink-0 w-full p-0 hover:bg-transparent! focus:bg-transparent! data-active:bg-transparent! data-active:hover:bg-transparent! data-active:focus:bg-transparent! hover:cursor-pointer" href="https://www.prisma.io/">
                 {Logo}
               </NavigationMenuLink>
             </NavigationMenuItem>