unnoq · unnoq · Jan 20, 2024 · Jan 20, 2024 · Jan 20, 2024 · Jan 20, 2024
diff --git a/@content/components/navigation/footer.astro b/@content/components/navigation/footer.astro
@@ -14,7 +14,10 @@ const { className } = Astro.props
 <footer class={cn(className)}>
   <div class="flex flex-col items-center justify-between gap-4 py-10 md:h-24 md:flex-row md:py-0">
     <div class="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
-      <a href="/" aria-label="Dinstack homepage"> <Logo size={36} /></a>
+      <a href="/">
+        <span class="sr-only">Home Page</span>
+        <Logo size={36} />
+      </a>
 
       <p class="text-center text-sm leading-loose md:text-left balance-text">
         Built by{' '}

diff --git a/@content/components/navigation/header.astro b/@content/components/navigation/header.astro
@@ -18,6 +18,7 @@ const { className } = Astro.props
   <div class="flex items-center justify-between w-full">
     <div class="flex items-center gap-6 md:gap-8 lg:gap-10">
       <a href="/" class="hidden items-center space-x-2 md:flex">
+        <span class="sr-only">Home</span>
         <Logo size={36} />
       </a>
 

diff --git a/@content/components/navigation/nav-mobile.tsx b/@content/components/navigation/nav-mobile.tsx
@@ -14,6 +14,7 @@ export function NavMobile(props: {
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
         <Button variant={'ghost'} size={'icon'}>
+          <span className="sr-only">Open Sidebar Menu</span>
           <MenuIcon className="size-5" />
         </Button>
       </SheetTrigger>

diff --git a/@content/components/search-dialog.tsx b/@content/components/search-dialog.tsx
@@ -47,6 +47,7 @@ export function SearchDialog() {
   return (
     <>
       <Button type="button" variant={'ghost'} onClick={() => setOpen((v) => !v)} className="group">
+        <span className="sr-only">Search</span>
         <SearchIcon className="size-5 text-muted-foreground group-hover:text-foreground" />
       </Button>
       <CommandDialog open={open} onOpenChange={setOpen} commandProps={{ shouldFilter: false }}>

diff --git a/@content/layouts/base.astro b/@content/layouts/base.astro
@@ -4,6 +4,7 @@ import { ScrollArea } from '@web/components/ui/scroll-area'
 import { SEO } from 'astro-seo'
 import { ViewTransitions } from 'astro:transitions'
 import { getTwitterHandler } from '@content/lib/twitter'
+import { env } from '@web/lib/env'
 ---
 
 <!doctype html>
@@ -79,20 +80,20 @@ import { getTwitterHandler } from '@content/lib/twitter'
 
     <slot name="seo">
       <SEO
-        title={`Dinstack - content`}
-        description={'Dinstack website for SEO part'}
+        title={`${env.APP_NAME} Homepage`}
+        description={`${env.APP_NAME} website for SEO part`}
         openGraph={{
           basic: {
-            title: `Dinstack - content`,
+            title: `${env.APP_NAME} Homepage`,
             type: 'website',
             image: '/opengraph-image.jpg',
           },
         }}
         twitter={{
           creator: getTwitterHandler(),
           card: 'summary_large_image',
-          title: `Dinstack - content`,
-          description: 'Dinstack website for SEO part',
+          title: `${env.APP_NAME} Homepage`,
+          description: `${env.APP_NAME} website for SEO part`,
         }}
       />
     </slot>

diff --git a/@content/pages/blog/[...slug].astro b/@content/pages/blog/[...slug].astro
@@ -9,6 +9,7 @@ import { Icon } from 'astro-icon/components'
 import { buttonVariants } from '@web/components/ui/button'
 import { format } from 'date-fns'
 import { getTwitterHandler } from '@content/lib/twitter'
+import { env } from '@web/lib/env'
 
 export async function getStaticPaths() {
   const posts = await getCollection('blog')
@@ -27,19 +28,19 @@ const { Content } = await post.render()
 <BaseLayout>
   <SEO
     slot="seo"
-    title={`${post.data.title} | Dinstack`}
+    title={`${post.data.title} | ${env.APP_NAME}`}
     description={post.data.description}
     openGraph={{
       basic: {
-        title: `${post.data.title} | Dinstack`,
+        title: `${post.data.title} | ${env.APP_NAME}`,
         type: 'article',
         image: post.data.coverImage,
       },
     }}
     twitter={{
       creator: getTwitterHandler(),
       card: 'summary_large_image',
-      title: `${post.data.title} | Dinstack`,
+      title: `${post.data.title} | ${env.APP_NAME}`,
       description: post.data.description,
     }}
   />

diff --git a/@content/pages/blog/index.astro b/@content/pages/blog/index.astro
@@ -6,27 +6,28 @@ import { getPosts } from '@content/lib/blog'
 import Header from '@content/components/navigation/header.astro'
 import Footer from '@content/components/navigation/footer.astro'
 import { getTwitterHandler } from '@content/lib/twitter'
+import { env } from '@web/lib/env'
 
 const posts = await getPosts()
 ---
 
 <BaseLayout>
   <SEO
     slot="seo"
-    title={`Blog | Dinstack`}
-    description="Dinstack related posts"
+    title={`Blog | ${env.APP_NAME}`}
+    description=`${env.APP_NAME} related posts`
     openGraph={{
       basic: {
-        title: `Blog | Dinstack`,
+        title: `Blog | ${env.APP_NAME}`,
         type: 'website',
         image: '/opengraph-image.jpg',
       },
     }}
     twitter={{
       creator: getTwitterHandler(),
       card: 'summary_large_image',
-      title: `Blog | Dinstack`,
-      description: 'Dinstack related posts',
+      title: `Blog | ${env.APP_NAME}`,
+      description: `${env.APP_NAME} related posts`,
     }}
   />
 

diff --git a/@content/pages/docs/[...slug].astro b/@content/pages/docs/[...slug].astro
@@ -12,6 +12,7 @@ import { ScrollArea } from '@web/components/ui/scroll-area'
 import { TableOfContents } from '@content/components/content/toc'
 import DocsPager from '@content/components/content/docs-pager.astro'
 import { getTwitterHandler } from '@content/lib/twitter'
+import { env } from '@web/lib/env'
 
 export const getStaticPaths = (async () => {
   const DEFAULT_DOC_SLUG = 'getting-started' satisfies CollectionEntry<'docs'>['slug']
@@ -35,19 +36,19 @@ const { Content } = await doc.render()
 <BaseLayout>
   <SEO
     slot="seo"
-    title={`${doc.data.title} | Dinstack`}
+    title={`${doc.data.title} | ${env.APP_NAME}`}
     description={doc.data.description}
     openGraph={{
       basic: {
-        title: `${doc.data.title} | Dinstack`,
+        title: `${doc.data.title} | ${env.APP_NAME}`,
         type: 'website',
         image: '/opengraph-image.jpg',
       },
     }}
     twitter={{
       creator: getTwitterHandler(),
       card: 'summary_large_image',
-      title: `${doc.data.title} | Dinstack`,
+      title: `${doc.data.title} | ${env.APP_NAME}`,
       description: doc.data.description,
     }}
   />

diff --git a/@content/pages/index.astro b/@content/pages/index.astro
@@ -313,7 +313,7 @@ import { Icon } from 'astro-icon/components'
       </div>
       <div class="mx-auto text-center md:max-w-[58rem]">
         <p class="leading-normal text-muted-foreground sm:text-lg sm:leading-7 balance-text">
-          Dinstack also includes a blog and a full-featured documentation site built using Markdown
+          {env.APP_NAME} also includes a blog and a full-featured documentation site built using Markdown
           and MDX from Astro.
         </p>
       </div>
@@ -327,7 +327,7 @@ import { Icon } from 'astro-icon/components'
           Proudly Open Source
         </h2>
         <p class="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">
-          Dinstack is open source and powered by open source software. <br />{' '}
+          {env.APP_NAME} is open source and powered by open source software. <br />{' '}
           The code is available on{' '}
           <a
             href={env.GITHUB_REPOSITORY_URL}

diff --git a/@extension/layouts/auth.tsx b/@extension/layouts/auth.tsx
@@ -11,9 +11,16 @@ export function AuthLayout() {
     return (
       <div className="fixed inset-0 flex items-center justify-center">
         <div>
-          <div className="flex justify-center">
+          <button
+            type="button"
+            className="flex justify-center w-full"
+            onClick={() => {
+              chrome.tabs.create({ url: new URL(env.CONTENT_BASE_URL).toString() })
+            }}
+          >
+            <span className="sr-only">Go Home Page</span>
             <Logo variant="icon" size={100} />
-          </div>
+          </button>
           <div className="space-y-2 mt-4">
             <h2 className="text-2xl font-bold">Welcome to Our App</h2>
             <p className="text-muted-foreground text-center">Please login to continue</p>

diff --git a/@extension/layouts/with-navbar.tsx b/@extension/layouts/with-navbar.tsx
@@ -1,5 +1,6 @@
 import { Logo } from '@web/components/logo'
 import { Button } from '@web/components/ui/button'
+import { env } from '@web/lib/env'
 import { useAuthStore } from '@web/stores/auth'
 import { LogOutIcon, SettingsIcon } from 'lucide-react'
 import { Link, Outlet } from 'react-router-dom'
@@ -9,13 +10,20 @@ export function WithNavbarLayout() {
     <div>
       <nav className="p-3 border-b">
         <div className="flex justify-between items-center">
-          <div>
+          <button
+            type="button"
+            onClick={() => {
+              chrome.tabs.create({ url: new URL(env.CONTENT_BASE_URL).toString() })
+            }}
+          >
+            <span className="sr-only">Go Home Page</span>
             <Logo variant="icon" size={32} />
-          </div>
+          </button>
 
           <div className="flex items-center">
             <Button variant={'ghost'} size={'icon'} className="h-8 w-8" asChild>
               <Link to="/settings">
+                <span className="sr-only">Settings</span>
                 <SettingsIcon className="h-4 w-4" />
               </Link>
             </Button>
@@ -28,6 +36,7 @@ export function WithNavbarLayout() {
                 useAuthStore.setState({ state: null })
               }}
             >
+              <span className="sr-only">Logout</span>
               <LogOutIcon className="h-4 w-4" />
             </Button>
           </div>

diff --git a/@web/.env.local b/@web/.env.local
@@ -1,3 +1,5 @@
+PUBLIC_APP_NAME="Dinstack"
+
 PUBLIC_API_TRPC_BASE_URL="http://localhost:8000/trpc/"
 PUBLIC_CONTENT_BASE_URL="http://localhost:3000/"
 PUBLIC_EXTENSION_ID="ppjhcbkohidnocgihipnjdnilinmecni"

diff --git a/@web/.env.preview b/@web/.env.preview
@@ -1,3 +1,5 @@
+PUBLIC_APP_NAME="Dinstack"
+
 PUBLIC_API_TRPC_BASE_URL="https://dinstack-api-preview.dinsterizer.com/trpc/"
 PUBLIC_CONTENT_BASE_URL="https://dinstack-preview.dinsterizer.com/"
 PUBLIC_EXTENSION_ID="ppjhcbkohidnocgihipnjdnilinmecni"

diff --git a/@web/.env.production b/@web/.env.production
@@ -1,3 +1,5 @@
+PUBLIC_APP_NAME="Dinstack"
+
 PUBLIC_API_TRPC_BASE_URL="https://dinstack-api.dinsterizer.com/trpc/"
 PUBLIC_CONTENT_BASE_URL="https://dinstack.dinsterizer.com/"
 PUBLIC_EXTENSION_ID="ppjhcbkohidnocgihipnjdnilinmecni" # TODO: public extension and paste id here

diff --git a/@web/components/navigation/sidebar.tsx b/@web/components/navigation/sidebar.tsx
@@ -47,6 +47,7 @@ export function Navbar() {
     <div className="flex flex-col h-full">
       <LogoDropdownMenu>
         <DropdownMenuTrigger>
+          <span className="sr-only">Open Main Menu</span>
           <Logo size={36} />
         </DropdownMenuTrigger>
       </LogoDropdownMenu>

diff --git a/@web/layouts/auth.tsx b/@web/layouts/auth.tsx
@@ -20,6 +20,7 @@ export function AuthLayout() {
             <div className="mx-auto w-full max-w-sm lg:w-96">
               <div>
                 <a href={env.CONTENT_BASE_URL}>
+                  <span className="sr-only">Home Page</span>
                   <Logo size={42} />
                 </a>
                 <h2 className="mt-8 text-2xl font-bold leading-9 tracking-tight text-foreground">

diff --git a/@web/layouts/with-sidebar.tsx b/@web/layouts/with-sidebar.tsx
@@ -1,6 +1,8 @@
 'use client'
 
+import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
 import { Logo } from '@web/components/logo'
+import { LogoDropdownMenu } from '@web/components/navigation/logo-dropdown-menu'
 import { Navbar } from '@web/components/navigation/sidebar'
 import { Button } from '@web/components/ui/button'
 import { ScrollArea } from '@web/components/ui/scroll-area'
@@ -38,6 +40,7 @@ function SmallScreenNavbar() {
       <Sheet open={isMobileSidebarOpen} onOpenChange={setIsMobileSidebarOpen}>
         <SheetTrigger asChild>
           <Button type="button" variant={'outline'} size={'icon'}>
+            <span className="sr-only">Open Sidebar Menu</span>
             <MenuIcon className="h-4 w-4" />
           </Button>
         </SheetTrigger>
@@ -47,7 +50,12 @@ function SmallScreenNavbar() {
       </Sheet>
 
       <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-        <Logo variant="icon" size={36} />
+        <LogoDropdownMenu>
+          <DropdownMenuTrigger>
+            <span className="sr-only">Open Main Menu</span>
+            <Logo variant="icon" size={36} />
+          </DropdownMenuTrigger>
+        </LogoDropdownMenu>
       </div>
       <Skeleton className="h-9 w-9" />
     </div>
@@ -77,6 +85,7 @@ function LargeScreenNavbar() {
               className="h-5 w-5 bg-background"
               onClick={() => useSystemStore.setState({ sidebarSize: 'icon' })}
             >
+              <span className="sr-only">Collapse sidebar</span>
               <ChevronLeft className="h-4 w-4" />
             </Button>
           ))
@@ -88,6 +97,7 @@ function LargeScreenNavbar() {
               className="h-5 w-5 bg-background"
               onClick={() => useSystemStore.setState({ sidebarSize: 'default' })}
             >
+              <span className="sr-only">Uncollapse sidebar</span>
               <ChevronRight className="h-4 w-4" />
             </Button>
           ))

diff --git a/@web/lib/env.ts b/@web/lib/env.ts
@@ -2,6 +2,8 @@ import { z } from 'zod'
 
 export const env = z
   .object({
+    APP_NAME: z.string(),
+
     API_TRPC_BASE_URL: z.string().url(),
     CONTENT_BASE_URL: z.string().url(),
     EXTENSION_ID: z.string(),
@@ -19,6 +21,8 @@ export const env = z
     LEMONSQUEEZY_LIFETIME_MEMBERSHIP_VARIANT_ID: z.coerce.number(),
   })
   .parse({
+    APP_NAME: import.meta.env.PUBLIC_APP_NAME,
+
     API_TRPC_BASE_URL: import.meta.env.PUBLIC_API_TRPC_BASE_URL,
     CONTENT_BASE_URL: import.meta.env.PUBLIC_CONTENT_BASE_URL,
     WEB_BASE_URL: import.meta.env.PUBLIC_WEB_BASE_URL,

diff --git a/@web/pages/organization-general.tsx b/@web/pages/organization-general.tsx
@@ -106,8 +106,10 @@ export function Component() {
             </div>
 
             <div className="bg-destructive/10 p-6 rounded-md">
-              <h2 className="text-base font-semibold leading-7 text-destructive">Danger zone</h2>
-              <p className="mt-1 text-sm leading-6 text-destructive/80">
+              <h2 className="text-base font-semibold leading-7 text-destructive dark:text-foreground">
+                Danger zone
+              </h2>
+              <p className="mt-1 text-sm leading-6 text-destructive/80 dark:text-muted-foreground">
                 Be careful what you do here.
               </p>
 

diff --git a/@web/pages/organization-members.tsx b/@web/pages/organization-members.tsx
@@ -62,7 +62,9 @@ export function Component() {
                       <div className="flex flex-col items-start flex-1 overflow-hidden">
                         <div className="flex items-start gap-1.5">
                           <span className="truncate w-full font-medium">{member.user.name}</span>
-                          <Badge variant={'secondary'}>{uppercaseFirstLetter(member.role)}</Badge>
+                          <Badge variant={'secondary'} className="min-w-max">
+                            {uppercaseFirstLetter(member.role)}
+                          </Badge>
                         </div>
                         <span className="text-muted-foreground font-normal text-xs">
                           {member.user.email}

diff --git a/@web/pages/profile-general.tsx b/@web/pages/profile-general.tsx
@@ -94,8 +94,10 @@ export function Component() {
             </div>
 
             <div className="bg-destructive/10 p-6 rounded-md">
-              <h2 className="text-base font-semibold leading-7 text-destructive">Danger zone</h2>
-              <p className="mt-1 text-sm leading-6 text-destructive/80">
+              <h2 className="text-base font-semibold leading-7 text-destructive dark:text-foreground">
+                Danger zone
+              </h2>
+              <p className="mt-1 text-sm leading-6 text-destructive/80 dark:text-muted-foreground">
                 Be careful what you do here.
               </p>