feat: add star github button

Author: thedaviddias

README.md

@@ -1,6 +1,6 @@
 # UX Patterns for Devs
 
-UX Patterns for Developers is a free collection of UX patterns towards developers who want to understand how to build effective UI components accessible and usable.
+UX Patterns for Developers was created by [David Dias](https://thedaviddias.com). It is a free collection of UX patterns towards developers who want to understand how to build effective UI components accessible and usable.
 
 ![Screenshot of the homepage ofUX Patterns for Devs](./public/img/ux-patterns-developers.webp)
 

app/_components/stars.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { PROJECT_URL } from '@/app/_constants/project';
+import * as Sentry from "@sentry/nextjs";
+import { StarIcon } from 'lucide-react';
+import { GitHubIcon } from 'nextra/icons';
+import { useEffect, useState } from 'react';
+
+export function Stars() {
+  const [stars, setStars] = useState<number | null>(null)
+
+  useEffect(() => {
+    fetch('https://api.github.com/repos/thedaviddias/ux-patterns-for-developers')
+      .then(res => res.json())
+      .then(data => setStars(data.stargazers_count))
+      .catch(err => Sentry.captureException(err))
+  }, [])
+
+  if (stars === null) return <div className="flex items-center justify-center gap-2">
+    <span className="inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 text-sm font-medium text-gray-900 dark:text-gray-100 rounded-lg border border-gray-200 dark:border-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 dark:focus:ring-gray-700">Loading...</span>
+  </div>
+
+  return (
+    <div className="flex items-center justify-center gap-2">
+      <a
+        href={PROJECT_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="plausible-event-name=Star+Github inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 text-sm font-medium text-gray-900 dark:text-gray-100 rounded-lg border border-gray-200 dark:border-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 dark:focus:ring-gray-700"
+      >
+        <GitHubIcon className="w-4 h-4" />
+        <span className="hidden lg:inline">Star on GitHub</span>
+        <span className="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100">
+          <StarIcon className="w-4 h-4 mr-1" />
+          {stars}
+        </span>
+      </a>
+    </div>
+  )
+}

app/_components/subscribe.tsx

@@ -67,19 +67,18 @@ export const SubscribeForm = () => {
       </h2>
       <form onSubmit={handleSubmit} className="space-y-4">
         <div className="space-y-2">
-          <div className="inline-flex gap-2">
+          <div className="flex gap-2">
             <Input
-              id="subscribe-form"
-              placeholder="Your email"
+              placeholder="[email protected]"
               type="email"
+              className="md:w-2/5"
               value={formState.email}
               onChange={(e) => setFormState((prev) => ({ ...prev, email: e.target.value }))}
               disabled={isLoading}
               required
             />
             <Button
               type="submit"
-              // className="group relative"
               disabled={isLoading}
               data-loading={isLoading}
               variant="outline"
@@ -102,7 +101,7 @@ export const SubscribeForm = () => {
           {formState.message && (
             <p
               className={cn(
-                "mt-2 text-xs",
+                "mt-2 text-sm",
                 formState.status === "error" ? "text-destructive" : "text-muted-foreground",
               )}
               role="alert"

app/api/email/route.ts

@@ -14,7 +14,7 @@ export async function POST(req: NextRequest) {
       );
     }
 
-    const response = await fetch(
+    await fetch(
       "https://connect.mailerlite.com/api/subscribers",
       {
         method: "POST",
@@ -27,10 +27,6 @@ export async function POST(req: NextRequest) {
       }
     );
 
-    const json = await response.json();
-
-    console.info("mailerlite response:", json);
-
     return NextResponse.json(
       { success: true, message: "signed up" },
       { status: 201 }

content/en/_meta.ts

@@ -11,13 +11,11 @@ export default {
     title: 'Documentation'
   },
   about: {
-    type: 'menu',
+    type: 'page',
     title: 'About',
-    items: {
-      about: 'Project',
-      contributors: {
-        href: 'https://github.com/thedaviddias/ux-patterns-for-developers/graphs/contributors'
-      }
+    theme: {
+      sidebar: false,
+      typesetting: 'article',
     }
   },
 }

content/en/about/about.mdx

@@ -2,6 +2,8 @@
 
 **UX Patterns for Developers** is a free collection of UX patterns towards developers who want to understand how to build effective UI components accessible and usable.
 
+It was created by [David Dias](https://thedaviddias.com).
+
 ## History
 
 For the past few years, as a frontend developer, I have been studying and creating UI components for multiple different projects and applications. From simple personal projects, to large-scale enterprise applications, I have always been interested in UX patterns and how they can be applied to UI design.
@@ -21,10 +23,16 @@ We welcome contributions from the community! Whether you want to:
 
 Visit our [GitHub repository](https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/.github/CONTRIBUTING.md) to learn how to contribute.
 
+You can also check the [list of contributors](https://github.com/thedaviddias/ux-patterns-for-developers/graphs/contributors) on Github.
+
 ## Need Help?
 
 If you need assistance or want to report an issue:
 
 - Open a [GitHub issue](https://github.com/thedaviddias/ux-patterns-for-developers/issues/new/choose)
 - Join our [Discord community](https://ddias.link/discord)
 - Check the pattern's documentation for specific implementation details
+
+## License
+
+This project is licensed under the MIT license.

content/en/index.mdx

@@ -4,16 +4,22 @@ description: "UX Patterns for Developers is a collection of UX patterns for ever
 searchable: false
 ---
 
-import { Hero } from '@app/_components/sections/hero'
-import { SubscribeForm } from '@app/_components/subscribe'
-import { OverviewGrid } from '@app/_components/sections/overview-grid'
-import { Callout, Tabs } from 'nextra/components'
+import { Hero } from "@app/_components/sections/hero";
+import { OverviewGrid } from "@app/_components/sections/overview-grid";
+import { Stars } from "@app/_components/stars";
+import { SubscribeForm } from "@app/_components/subscribe";
+import { Callout, Tabs } from "nextra/components";
 
 # UX Patterns for Devs
 
-<Hero lang={props.params.lang} title={metadata.title} description={metadata.description} />
+<Hero
+  lang={props.params.lang}
+  title={metadata.title}
+  description={metadata.description}
+/>
+
+<Stars />
 
 <OverviewGrid lang={props.params.lang} />
 
 <SubscribeForm />
-

next.config.ts

@@ -29,6 +29,11 @@ const nextConfig = withBundleAnalyzer(
         destination: '/docs/getting-started',
         statusCode: 302
       },
+      {
+        source: '/about',
+        destination: '/about/index',
+        statusCode: 302
+      },
     ]
   })
 )