feat(v3): Add missing about page and WIP banner

Author: ntatoud

astro.config.mjs

@@ -2,8 +2,6 @@
 import { defineConfig } from "astro/config";
 import starlight from "@astrojs/starlight";
 
-import logoLight from "./public/logo-light.svg";
-import logoDark from "./public/logo-dark.svg";
 import { sidebar } from "./src/config/sidebar";
 import { socials } from "./src/content/links";
 import { head } from "./src/config/head";
@@ -14,8 +12,8 @@ export default defineConfig({
     starlight({
       title: "Start UI Documentation",
       logo: {
-        dark: logoDark,
-        light: logoLight,
+        dark: "/public/logo-dark.svg",
+        light: "/public/logo-light.svg",
         alt: "Start UI",
         replacesTitle: true,
       },

src/components/overrides/SocialIcons.astro

@@ -9,15 +9,15 @@ const socials = config.social || [];
 {
   extraLinks.length > 0 && (
     <>
-      {extraLinks.map(({ label, href }) => (
+      {extraLinks.map(({ label, href, isExternal }) => (
         <a
           {href}
           target="_blank"
           rel="noopenner noreferrer"
-          class="sl-flex external-link"
+          class={`sl-flex link ${isExternal ? "external-link" : ""}`}
         >
           {label}
-          <Icon name="external" />
+          {isExternal && <Icon name="external" size="1em" class="sl-ml-1" />}
         </a>
       ))}
     </>
@@ -27,7 +27,7 @@ const socials = config.social || [];
   socials.length > 0 && (
     <>
       {socials.map(({ label, href, icon }) => (
-        <a {href} rel="me" class="sl-flex">
+        <a {href} rel="me" class={"sl-flex"}>
           <span class="sr-only">{label}</span>
           <Icon name={icon} size="1.5em" />
         </a>
@@ -46,6 +46,10 @@ const socials = config.social || [];
     a:hover {
       opacity: 0.66;
     }
+
+    .link {
+      underline: none;
+    }
     .external-link {
       display: flex;
       align-items: center;

src/content/docs/about.mdx

@@ -0,0 +1,15 @@
+---
+title: About
+---
+
+Start UI is a set of three projects that was initiated by the [BearStudio](https://bearstudio.fr) Team
+and in particular by [Ivan Dalmet](https://mobile.twitter.com/ivandalmet).
+The purpose of those projects is to make it easier and faster to reach the business features development time on a new project,
+that is to say, stop wasting time putting together the standard technologies and tooling, and having a starter for it.
+
+Here are the three projects:
+ - [[web]](https://github.com/bearstudio/start-ui-web), which is the web starter related to this documentation
+ - [[native]](https://github.com/BearStudio/start-ui-native), which is a React Native starter that basically does the same
+as the web starter but for mobile applications made with React Native.
+ - [[figma]](https://www.figma.com/community/file/1025698982013308087), which is a Figma template that contains the same components
+as the web starter, which will allow you to create mockups with the components you'll find in the web starter.

src/content/docs/index.mdx

@@ -1,6 +1,16 @@
 ---
 title: Introduction
 description: Get started building your app with Start UI.
+banner:
+  content: |
+    <a
+         href="https://github.com/bearstudio/start-ui-web-doc"
+         target="_blank"
+         rel="noreferrer"
+       >
+         🚀 Start UI [web]'s documentation is still in progress. Feel free to
+         give feedback or contribute ↗
+       </a>
 ---
 
 🚀 Start UI <small>[web]</small> is an opinionated frontend starter repository created & maintained by the [BearStudio Team](https://www.bearstudio.fr/team) and other contributors.

src/content/links.ts

@@ -0,0 +1,23 @@
+import { Icon } from "@astrojs/starlight/components";
+
+export const socials = [
+  {
+    icon: "github",
+    label: "GitHub",
+    href: "https://github.com/BearStudio/start-ui-web-docs/",
+  },
+  {
+    icon: "discord",
+    label: "Discord",
+    href: "https://go.bearstudio.fr/discord",
+  },
+] as const;
+
+export const extraLinks = [
+  {
+    label: "Contact",
+    href: "https://twitter.com/startui_",
+    isExternal: true,
+  },
+  { label: "About", href: "about" },
+];