feat: add blog section

Author: thedaviddias

app/_components/authors.tsx

@@ -0,0 +1,48 @@
+import { getDictionary } from '@app/_dictionaries/get-dictionary'
+import type { Locale } from '@app/_dictionaries/i18n-config'
+import type { FC } from 'react'
+import { LinkCustom } from './link-custom'
+
+type TopContentProps = {
+  title: string
+  date: string
+  authors: {
+    name: string
+    link: string
+  }[]
+  lang: Locale
+}
+
+export const TopContent: FC<TopContentProps> = async ({
+  title,
+  date,
+  authors,
+  lang
+}) => {
+
+  const dictionary = await getDictionary(lang)
+  const dateObj = new Date(date)
+
+  return (
+    <>
+      <h1>{title}</h1>
+      <div className="mt-8 mb-16 text-sm text-gray-400">
+        <time dateTime={dateObj.toISOString()}>
+          {dateObj.toLocaleDateString(lang, {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric'
+          })}
+        </time>{' '}
+        {dictionary.by}{' '}
+        {authors.map(author => (
+          <span key={author.name} className="not-last:after:content-[',_']">
+            <LinkCustom href={author.link} className="text-gray-800 dark:text-gray-100">
+              {author.name}
+            </LinkCustom>
+          </span>
+        ))}
+      </div>
+    </>
+  )
+}

app/_components/blog.tsx

@@ -0,0 +1,44 @@
+import type { MdxFile } from 'nextra';
+import { Link } from 'nextra-theme-docs';
+import { getPageMap } from 'nextra/page-map';
+import type { FC } from 'react';
+
+export async function generateMetadata() {
+  return {
+    title: "Blog",
+    description: "Blog",
+  };
+}
+
+export const Blog: FC<{ lang: string }> = async ({ lang }) => {
+  const pageMap = (await getPageMap(`/${lang}/blog`)) as unknown as MdxFile[]
+
+  return pageMap.map(page => {
+    if (page.name === 'index') return
+
+    const { title, description, date } = page.frontMatter!
+
+    return (
+      <div key={page.route} className="mt-12">
+        <h3 className="text-2xl font-semibold">
+          <Link href={page.route} className="after:content-['_→']">
+            {title}
+          </Link>
+        </h3>
+        <p className="my-6 leading-7 opacity-80">
+          {description}
+        </p>
+        <time
+          dateTime={new Date(date).toISOString()}
+          className="text-sm opacity-50"
+        >
+          {new Date(date).toLocaleDateString(lang, {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric'
+          })}
+        </time>
+      </div>
+    )
+  })
+}

app/_constants/footer.ts

@@ -8,7 +8,11 @@ export const FOOTER_MENU_LINKS = (lang: string) => [
     label: 'Documentation'
   },
   {
-    path: `/${lang}/about/about`,
+    path: '/blog',
+    label: 'Blog'
+  },
+  {
+    path: `/about`,
     label: 'About'
-  }
+  },
 ]

content/en/_meta.ts

@@ -10,6 +10,14 @@ export default {
     type: 'page',
     title: 'Documentation'
   },
+  blog: {
+    type: 'page',
+    title: 'Blog',
+    theme: {
+      sidebar: false,
+      typesetting: 'article'
+    }
+  },
   about: {
     type: 'page',
     title: 'About',

content/en/blog.mdx

@@ -0,0 +1,9 @@
+---
+searchable: false
+---
+
+import { Blog } from "@app/_components/blog";
+
+# Blog
+
+<Blog lang={props.params.lang} />

content/en/blog/announcing-ux-patterns-launch.mdx

@@ -0,0 +1,78 @@
+---
+title: Launching "UX Patterns for Devs"
+image: https://assets.vercel.com/image/upload/v1630059453/swr/v1.png
+description: "Introducing today my new open-source resource filled with proven UX patterns, practical code snippets, and actionable tips - empowering developers to build more accessible and user-friendly interfaces."
+date: 2024-12-11
+authors:
+  - name: David Dias
+    link: https://x.com/thedaviddias
+---
+
+import { TopContent } from "@app/_components/authors";
+
+<TopContent lang={props.params.lang} {...metadata} />
+
+![Screenshot of the text UX Patterns for Devs](../../../public/img/opengraph-image.png)
+
+For over 15 years, I've worked alongside web and UX designers to refine user experiences.
+
+I'm introducing today my new open-source resource filled with proven UX patterns, practical code snippets, and actionable tips - empowering developers to build more accessible and user-friendly interfaces.
+
+For the incoming weeks, I will be adding new patterns to the collection and try to be as consistent as possible. This will be a continuous process without any specific deadline.
+
+## Why "UX Patterns for Developers"?
+
+I've been using the term "UX Patterns" for a long time now. In discussions with other developers or colleagues because for me, defining the actually UX patterns helps in the creation of UI components.
+
+I've encountered many people jumping in creating a component without fully understanding the UX pattern behind it. I've also seen many developers creating components that are not UX patterns, but rather a singular vision of a UI component. This creates a lot of risks.
+
+With "UX Patterns for Developers", I'm trying to create a resource that will help developers understand the UX patterns behind UI components and take into all aspects of creating new components - SEO, Accessibility, Usability, Performance, and more.
+
+## How to use "UX Patterns for Developers"?
+
+To this day, the collection is divided into two main sections:
+
+- Layout & Navigation
+- Inputs & Forms
+- Content Management
+- User Feedback
+
+This will certainly change in the future, but for now, it's a good starting point.
+
+Each section contains a set of UX patterns that can be used to build UI components. Each pattern is divided into three main sections:
+
+1. **Overview** - Introduction and use cases for the pattern
+2. **Use Cases** - Real-world examples and scenarios where the pattern should be implemented
+3. **Benefits** - Key advantages and value propositions of using this pattern
+4. **Anatomy** - Detailed breakdown of the component's structure
+5. **Best Practices** - Guidelines for implementation, including do's and don'ts
+6. **Code Examples** - Code examples and technical considerations
+7. **Accessibility** - Guidelines for accessibility considerations
+8. **SEO** - Search engine optimization considerations and best practices
+9. **Browser Support** - Information on browser support for the pattern
+10. **Testing** - Guidelines for unit, integration, and accessibility testing
+11. **Resources** - Additional documentation, articles, libraries...
+
+Each pattern also contains a set of resources, including articles and libraries.
+
+## How to contribute?
+
+We welcome contributions from the community! Whether you want to:
+
+- Add new patterns
+- Improve existing documentation
+- Fix bugs
+- Suggest improvements
+
+Visit our [GitHub repository](https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/.github/CONTRIBUTING) to learn how to contribute.
+
+## What's Next
+
+This is just the beginning! With time and a lot of work and contributions, I hope to make it a valuable resource for developers looking to improve their UI design and UX.
+
+If you have any feedback about the project or the future of the collection, please
+[let us know](https://github.com/thedaviddias/ux-patterns-for-developers/discussions).
+
+## Thank You!
+
+Special thanks to every member of the community who has been supporting this project and everyone who helped and gave me feedback on this project!