docs([DST-570]): Added "Whats new" pages to our docs

.changeset/config.json

@@ -3,7 +3,7 @@
   "baseBranch": "main",
   "access": "public",
   "changelog": [
-    "@changesets/changelog-github",
+    "@changesets/changelog-git",
     { "repo": "marigold-ui/marigold" }
   ],
   "fixed": [["@marigold/system", "@marigold/components", "@marigold/docs"]]

.changeset/friendly-plants-check.md

@@ -0,0 +1,8 @@
+---
+"@marigold/docs": patch
+---
+
+docs([DST-570]): Added "Release" pages to our documentation
+
+We now create for each changelog a page on our documentation, it is also possible to create release blog posts. 
+With these pages we improve communication, enhance user experience, and ensure all users have easy access to the latest updates in one central location. 

docs/CHANGELOG.md

@@ -124,7 +124,7 @@
 
 ### Patch Changes
 
-- [#3939](https://github.com/marigold-ui/marigold/pull/3939) [`2cde433`](https://github.com/marigold-ui/marigold/commit/2cde433e21bc49e378b96c9d812baf21914cf382) Thanks [@sarahgm](https://github.com/sarahgm)! - feat[DST-481]: rename <Message> in <SectionMessage>
+- [#3939](https://github.com/marigold-ui/marigold/pull/3939) [`2cde433`](https://github.com/marigold-ui/marigold/commit/2cde433e21bc49e378b96c9d812baf21914cf382) Thanks [@sarahgm](https://github.com/sarahgm)! - feat[DST-481]: rename `<Message>` in `<SectionMessage>`
 
 - [#3967](https://github.com/marigold-ui/marigold/pull/3967) [`0773aa8`](https://github.com/marigold-ui/marigold/commit/0773aa8cd6ee71faf4f0d04f80f33cbe7fc56202) Thanks [@sebald](https://github.com/sebald)! - refa: Update TypeScript and adjust `<NumericFormat>` props
 

docs/app/[...slug]/layout.tsx

@@ -1,35 +1,10 @@
 import type { PropsWithChildren } from 'react';
-import { Footer } from './_components/Footer';
-import { SectionNavigation } from './_components/SectionNavigation';
+import { DefaultLayout } from '@/ui/layout/DefaultLayout';
 
 // Layout
 // ---------------
 const Layout = ({ children }: PropsWithChildren) => (
-  <>
-    <aside
-      className={[
-        'top-[--page-header-height]',
-        'py-[--page-sub-nav-padding] xl:py-[--page-sub-nav-padding-xl]',
-        'pl-[--page-padding-md] xl:pl-[--page-padding-xl]',
-        'h-[calc(100vh-var(--page-header-height))] w-[--page-sub-nav-width] xl:w-[--page-sub-nav-width-xl]',
-        'fixed z-10 hidden overflow-hidden hover:overflow-y-auto md:block',
-        'scrollbar-thin scrollbar-thumb-secondary-400 scrollbar-thumb-rounded-full scrollbar-track-transparent',
-        'border-secondary-200 border-r',
-      ].join(' ')}
-    >
-      <SectionNavigation />
-    </aside>
-    <main
-      className={[
-        'pt-[--page-main-padding] xl:pt-[--page-main-padding-xl]',
-        'px-[--page-padding] md:px-[--page-padding-md] xl:pr-[--page-padding-xl]',
-        'md:pl-[calc(var(--page-sub-nav-width)+var(--page-main-padding))] xl:pl-[calc(var(--page-sub-nav-width-xl)+var(--page-main-padding-xl))]',
-      ].join(' ')}
-    >
-      {children}
-      <Footer />
-    </main>
-  </>
+  <DefaultLayout>{children}</DefaultLayout>
 );
 
 export default Layout;

docs/app/[...slug]/page.tsx

@@ -16,13 +16,15 @@ interface ContentPageProps {
 async function getPageFromParams(params: ContentPageProps['params']) {
   const slug = params?.slug?.join('/');
   const page = allContentPages.find(page => page.slug === slug);
+
   return page || null;
 }
 
 export async function generateMetadata({
   params,
 }: ContentPageProps): Promise<Metadata> {
   const page = await getPageFromParams(params);
+
   return page
     ? {
         title: page.title,
@@ -57,7 +59,6 @@ export async function generateStaticParams(): Promise<
 
 export default async function ContentPage({ params }: ContentPageProps) {
   const page = await getPageFromParams(params);
-
   if (!page) {
     notFound();
   }
@@ -69,14 +70,16 @@ export default async function ContentPage({ params }: ContentPageProps) {
         <div className="text-secondary-400 pt-1">{page.caption}</div>
       </div>
       <div className="prose max-w-[70ch]">
-        <Mdx className="" title={page.title} code={page.body.code} />
-      </div>
-      <div className="col-start-2 hidden min-[1400px]:block">
-        <TocContainer />
-      </div>
-      <div className="text-text-primary-muted text-xs italic">
-        Last update: <RelativeTime date={new Date(page.modified)} />
+        <Mdx title={page.title} code={page.body.code} />
+        <div className="text-text-primary-muted pt-8 text-xs italic">
+          Last update: <RelativeTime date={new Date(page.modified)} />
+        </div>
       </div>
+      {page.toc === false ? null : (
+        <div className="col-start-2 hidden min-[1400px]:block">
+          <TocContainer />
+        </div>
+      )}
     </article>
   );
 }

docs/app/_components/CommandItems.tsx

@@ -225,6 +225,7 @@ export const PagesItem = ({
   setPages,
 }: PagesItemProps) => {
   const goto = useGoto(setOpen, setPages);
+
   return (
     <CommandGroup heading={name} key={name} className={classNames.section}>
       {items.map(page => (
@@ -233,6 +234,7 @@ export const PagesItem = ({
             className={cn(classNames.item, 'group')}
             key={page.slug}
             value={page.slug}
+            keywords={[page.title]}
             onSelect={() => goto({ slug: page.slug })}
           >
             <Inline space={4} alignY="center">

docs/app/_components/SiteNavigation.tsx

@@ -20,8 +20,8 @@ export const SiteNavigation = () => {
           variant="main"
           className="text-sm font-medium lg:px-1"
           key={index}
-          current={pathname.includes(slug)}
-          href={link?.href ?? '/'}
+          current={pathname.startsWith(`/${slug}`)}
+          href={link?.href ?? `/${slug}`}
         >
           {name}
         </NavLink>

docs/app/releases/blog/[...slug]/layout.tsx

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+import { DefaultLayout } from '@/ui/layout/DefaultLayout';
+
+// Layout
+// ---------------
+const Layout = ({ children }: PropsWithChildren) => (
+  <DefaultLayout>{children}</DefaultLayout>
+);
+
+export default Layout;

docs/app/releases/blog/[...slug]/page.tsx

@@ -0,0 +1,78 @@
+import { baseUrl } from '@/lib/config';
+import { DateFormat, Headline } from '@/ui';
+import { allBlogs } from 'contentlayer/generated';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { TocContainer } from '@/ui/Toc';
+import { Mdx } from '@/ui/mdx';
+
+interface BlogPostProps {
+  params: {
+    slug: string[];
+  };
+}
+async function getPostFromParams(params: BlogPostProps['params']) {
+  const fullPath = `releases/blog/${params.slug}`;
+  const currentPost = allBlogs.find(post => post.slug === fullPath);
+
+  return currentPost || null;
+}
+
+export async function generateMetadata({
+  params,
+}: BlogPostProps): Promise<Metadata> {
+  const post = await getPostFromParams(params);
+
+  return post
+    ? {
+        title: post.title,
+        description: post.date,
+        applicationName: 'Marigold Design System',
+        appleWebApp: {
+          title: 'Marigold Design System',
+        },
+        metadataBase: new URL(baseUrl),
+        openGraph: {
+          siteName: 'Marigold Design System',
+          title: post.title,
+          description: post.date,
+          images: `${baseUrl}/api/og.png?title=${encodeURIComponent(post.title)}`,
+          type: 'website',
+        },
+        twitter: {
+          card: 'summary_large_image',
+          creator: '@reservix',
+        },
+      }
+    : {};
+}
+
+const BlogPost = async ({ params }: BlogPostProps) => {
+  const currentPost = await getPostFromParams(params);
+
+  if (!currentPost) {
+    notFound();
+  }
+
+  return (
+    <article
+      key={currentPost.title}
+      className="grid grid-cols-1 gap-x-24 gap-y-14 min-[1400px]:grid-cols-[minmax(min-content,70ch)_1fr]"
+    >
+      <div className="col-span-full">
+        <Headline level={1}>{currentPost.title}</Headline>
+        <div className="text-secondary-400 pt-1">
+          <DateFormat value={new Date(currentPost.date)} dateStyle="medium" />
+        </div>
+      </div>
+      <div className="prose max-w-[70ch]">
+        <Mdx title={currentPost.title} code={currentPost.body.code} />
+      </div>
+      <div className="col-start-2 hidden min-[1400px]:block">
+        <TocContainer />
+      </div>
+    </article>
+  );
+};
+
+export default BlogPost;

docs/content/releases/blog-overview.mdx

@@ -0,0 +1,8 @@
+---
+title: Releases
+caption: Find all release blogs.
+order: 2
+badge: new
+---
+
+<PostList />

docs/content/releases/blog/release-2024-09-20.mdx

@@ -0,0 +1,17 @@
+---
+title: 'Watch out! Breaking Change incoming: Removing HTML-Properties'
+date: 2024-07-19
+type: Blog
+---
+
+The Design System team is currently focusing on optimising the Marigold documentation, which includes adding new and higher quality content for users as well as cleaning up and removing outdated content.
+
+## Breaking Change
+
+We are removing all HTML properties on our Marigold components, as these should no longer be used in the future. If a user has used the HTML properties when using Marigold, he oder she must rewrite them after the breaking change. If this is not the case you can sit back and relax.
+
+As part of this process, the upcoming Marigold release will remove content from the documentation that is not used and should no longer be used.
+
+Removing content from the Marigold documentation is particularly necessary if it is not relevant for our users. This ensures that the documentation is not unnecessarily "bloated" with content and thus creates more space for content that our users really need and can find more quickly.
+
+In addition, allowing the use of HTML properties was incorrectly authorised by the Design System Team in the past. This error is hereby corrected to prevent incorrect use of Marigold components in the future.

docs/content/releases/blog/release-2024-09-26.mdx

@@ -0,0 +1,66 @@
+---
+title: Big news from Marigold
+date: 2024-09-26
+type: Blog
+changed:
+  - components/content/card
+  - component/layout/inline
+  - component/layout/stack
+---
+
+We’re thrilled to introduce Marigold UI v2.0—a major upgrade designed to make building beautiful, accessible interfaces faster and easier than ever. Whether you’re crafting an enterprise-level web app or a sleek personal project, v2.0 offers the tools and flexibility you need to create polished UIs with minimal effort.
+
+## Breaking Change
+
+We’re thrilled to introduce Marigold UI v2.0—a major upgrade designed to make building beautiful, accessible interfaces faster and easier than ever. Whether you’re crafting an enterprise-level web app or a sleek personal project, v2.0 offers the tools and flexibility you need to create polished UIs with minimal effort.
+
+## New
+
+We’ve reimagined our theming system from the ground up. You can now:
+
+Toggle dark mode in a single click.
+Define custom color schemes with easy CSS variable support.
+Build dynamic themes based on user preferences—no complex CSS required.
+
+With performance optimizations in v2.0, your app’s UI will load faster and feel more responsive:
+
+Smaller bundle sizes: We’ve trimmed down the library for better performance.
+Lazy loading: Load components on demand to keep things snappy.
+Optimized rendering: Minimized reflows and repaints for improved performance.
+♿ 4. Accessibility That Works Out of the Box
+We believe in making the web accessible to all. With improved ARIA support, better keyboard navigation, and enhanced screen reader compatibility, v2.0 ensures your app is usable by everyone.
+
+## Changes
+
+Our documentation has been revamped for clarity and ease of use:
+
+Interactive code examples and live playgrounds for real-time testing.
+Step-by-step guides for React, Vue, and vanilla JS integrations.
+A streamlined customization guide to make theming and extending components simple.
+
+## Bug fixes
+
+### @marigold/components
+
+- Card Layouts: For building stunning, responsive grids.
+- Advanced Tables: With built-in sorting, filtering, and pagination.
+- Notification Toasts: Fully customizable, ideal for real-time feedback.
+- Sidebars & Drawers: Smooth, mobile-friendly navigation components.
+- Skeleton Loaders: Keep users engaged while content loads.
+
+### @marigold/system
+
+- fixed blablabla
+
+## Why Upgrade to v2.0?
+
+Marigold UI v2.0 offers a significant upgrade in terms of performance, customization, and ease of use. By upgrading, you’ll be able to:
+
+Build UIs faster with new, ready-to-use components.
+Customize every aspect of your design system without hassle.
+Offer a superior user experience with faster loading and better accessibility.
+Migrating from v1.x? We’ve got you covered! Check out our migration guide for an easy, hassle-free update.
+
+## What’s Next for Marigold UI?
+
+We’re just getting started! In the coming months, expect more components, performance improvements, and an upcoming Figma plugin to bridge the gap between design and development.