(chore) Relayout Right Navigation

Signed-off-by: Progyan Bhattacharya <[email protected]>
otjs-docs · Mar 1, 2024 · ee0c2c3 · ee0c2c3
1 parent 1830fa4
commit ee0c2c3
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 86 deletions.
diff --git a/src/components/layout/right-nav.astro b/src/components/layout/right-nav.astro
@@ -0,0 +1,45 @@
+---
+import { ThemeToggle } from "@/components/theme-toggle";
+import { siteConfig } from "@/config/site";
+
+import Icon from "astro-icon";
+---
+<nav class="flex flex-row items-center gap-4">
+  <a
+    href={siteConfig.links.github}
+    target="_blank"
+    rel="noreferrer"
+    class="hidden md:inline"
+  >
+    <span class="sr-only">GitHub</span>
+    <Icon name="simple-icons:github" class="size-6" />
+  </a>
+  <a
+    href={siteConfig.links.twitter}
+    target="_blank"
+    rel="noreferrer"
+    class="hidden md:inline"
+  >
+    <span class="sr-only">Twitter</span>
+    <Icon name="simple-icons:twitter" class="size-6" />
+  </a>
+  <a
+    href={siteConfig.links.linkedin}
+    target="_blank"
+    rel="noreferrer"
+    class="hidden md:inline"
+  >
+    <span class="sr-only">LinkedIn</span>
+    <Icon name="simple-icons:linkedin" class="size-6" />
+  </a>
+  <a
+    href={siteConfig.links.discord}
+    target="_blank"
+    rel="noreferrer"
+    class="hidden md:inline"
+  >
+    <span class="sr-only">Discord</span>
+    <Icon name="simple-icons:discord" class="size-6" />
+  </a>
+  <ThemeToggle client:idle />
+</nav>
diff --git a/src/components/layout/sheet-mobile-nav.tsx b/src/components/layout/sheet-mobile-nav.tsx
@@ -99,47 +99,39 @@ export function SheetMobileNav({
               </div>
             ) : null}
 
-            <div className="my-8 grid grid-cols-3 gap-4 items-center justify-items-start">
+            <div className="my-8 grid grid-cols-4 gap-2 items-center justify-items-start">
               <a
-                href="https://github.com/0xTheProDev"
+                href={siteConfig.links.github}
                 target="_blank"
                 rel="noreferrer"
                 className="rounded-lg border bg-background p-2"
               >
                 <GitHub className="size-4" />
               </a>
               <a
-                href="https://twitter.com/ProDevOfficial"
+                href={siteConfig.links.twitter}
                 target="_blank"
                 rel="noreferrer"
                 className="rounded-lg border bg-background p-2"
               >
                 <Twitter className="size-4" />
               </a>
               <a
-                href="https://linkedin.com/in/progyan-bhattacharya"
+                href={siteConfig.links.linkedin}
                 target="_blank"
                 rel="noreferrer"
                 className="rounded-lg border bg-background p-2"
               >
                 <LinkedIn className="size-4" />
               </a>
               <a
-                href="https://discord.gg/theprodev"
+                href={siteConfig.links.discord}
                 target="_blank"
                 rel="noreferrer"
                 className="rounded-lg border bg-background p-2"
               >
                 <Discord className="size-4" />
               </a>
-              <a
-                href="https://theprodev.medium.com"
-                target="_blank"
-                rel="noreferrer"
-                className="rounded-lg border bg-background p-2"
-              >
-                <Medium className="size-4" />
-              </a>
             </div>
           </div>
         </ScrollArea>

diff --git a/src/config/site.ts b/src/config/site.ts
@@ -8,7 +8,9 @@ export const siteConfig: SiteConfig = {
   url: "https://ot.js.org",
   ogImage: "https://ot.js.org/og.jpg",
   links: {
-    twitter: "https://twitter.com/ProDevOfficial",
+    discord: "https://discord.gg/theprodev",
     github: "https://github.com/0xTheProDev/Operational-Transformation",
+    linkedin: "https://linkedin.com/in/progyan-bhattacharya",
+    twitter: "https://twitter.com/ProDevOfficial",
   },
 };
diff --git a/src/layouts/docs-layout.astro b/src/layouts/docs-layout.astro
@@ -1,15 +1,12 @@
 ---
 import Footer from "@/components/layout/footer.astro";
 import Header from "@/components/layout/header.astro";
+import RightNav from "@/components/layout/right-nav.astro";
 import { MainNavigationMenu } from "@/components/main-navigation-menu";
 import { SheetMobileNav } from "@/components/layout/sheet-mobile-nav";
-import { ThemeToggle } from "@/components/theme-toggle";
 import { docsConfig } from "@/config/docs";
-import { siteConfig } from "@/config/site";
 import BaseLayout from "./base-layout.astro";
 
-import Icon from "astro-icon";
-
 type Props = {
   title: string;
   description: string;
@@ -29,27 +26,7 @@ const { title, description } = Astro.props;
       client:load
     />
 
-    <nav slot="right-header" class="flex flex-row items-center gap-4">
-      <a
-        href={siteConfig.links.github}
-        target="_blank"
-        rel="noreferrer"
-        class="hidden md:inline"
-      >
-        <span class="sr-only">GitHub</span>
-        <Icon name="mdi:github" class="size-6" />
-      </a>
-      <a
-        href={siteConfig.links.twitter}
-        target="_blank"
-        rel="noreferrer"
-        class="hidden md:inline"
-      >
-        <span class="sr-only">Twitter</span>
-        <Icon name="mdi:twitter" class="size-6" />
-      </a>
-      <ThemeToggle client:idle />
-    </nav>
+    <RightNav slot="right-header" />
   </Header>
 
   <slot />

diff --git a/src/layouts/main-layout.astro b/src/layouts/main-layout.astro
@@ -1,16 +1,13 @@
 ---
-import Footer from "@/components/layout/footer.astro";
+import HeroAnimation from "@/components/hero-animation.astro";
 import Header from "@/components/layout/header.astro";
+import Footer from "@/components/layout/footer.astro";
+import RightNav from "@/components/layout/right-nav.astro";
 import { MainNavigationMenu } from "@/components/main-navigation-menu";
-import { ThemeToggle } from "@/components/theme-toggle";
 import { cn } from "@/lib/utils";
 import BaseLayout from "./base-layout.astro";
 import { SheetMobileNav } from "@/components/layout/sheet-mobile-nav";
 import { navMenuConfig } from "@/config/nav-menu";
-import { siteConfig } from "@/config/site";
-
-import Icon from "astro-icon";
-import HeroAnimation from "@/components/hero-animation.astro";
 
 type Props = {
   title: string;
@@ -35,27 +32,7 @@ const { title, heroAnimation, description, mainClass } = Astro.props;
       client:load
     />
 
-    <nav slot="right-header" class="flex flex-row items-center gap-4">
-      <a
-        href={siteConfig.links.github}
-        target="_blank"
-        rel="noreferrer"
-        class="hidden md:inline"
-      >
-        <span class="sr-only">GitHub</span>
-        <Icon name="mdi:github" class="size-6" />
-      </a>
-      <a
-        href={siteConfig.links.twitter}
-        target="_blank"
-        rel="noreferrer"
-        class="hidden md:inline"
-      >
-        <span class="sr-only">Twitter</span>
-        <Icon name="mdi:twitter" class="size-6" />
-      </a>
-      <ThemeToggle client:idle />
-    </nav>
+    <RightNav slot="right-header" />
   </Header>
 
   <main class={cn(mainClass)}>

diff --git a/src/pages/play/index.astro b/src/pages/play/index.astro
@@ -23,32 +23,34 @@ import Icon from "astro-icon";
   </section>
 
   <section
-    class="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:grid-cols-3 max-w-[58rem] md:max-w-[64rem] text-center"
+    class="container mx-auto max-w-[58rem] md:max-w-[64rem] md:min-h-[480px]"
   >
-    <div class="relative overflow-hidden rounded-lg border bg-background p-2">
-      <div class="flex h-[180px] flex-col items-center justify-between gap-2 rounded-md p-5">
-        <Icon name="code-computer" class="size-16" />
-        <div class="space-y-4">
-          <h3 class="font-bold">@otjs/firebase-ace</h3>
-          <p class="text-sm text-muted-foreground">
-            A fully working example of Collaborative editing with Ace Editor and Firebase Database.
-          </p>
+    <div class="grid justify-center gap-4 sm:grid-cols-2 md:grid-cols-3 text-center">
+      <div class="relative overflow-hidden rounded-lg border bg-background p-2">
+        <div class="flex h-[180px] flex-col items-center justify-between gap-2 rounded-md p-5">
+          <Icon name="code-computer" class="size-16" />
+          <div class="space-y-4">
+            <h3 class="font-bold">@otjs/firebase-ace</h3>
+            <p class="text-sm text-muted-foreground">
+              A fully working example of Collaborative editing with Ace Editor and Firebase Database.
+            </p>
+          </div>
         </div>
+        <a href="#" class="absolute inset-0"><span class="sr-only">Go</span></a>
       </div>
-      <a href="#" class="absolute inset-0"><span class="sr-only">Go</span></a>
-    </div>
 
-    <div class="relative overflow-hidden rounded-lg border bg-background p-2">
-      <div class="flex h-[180px] flex-col items-center justify-between gap-2 rounded-md p-5">
-        <Icon name="code-computer" class="size-16" />
-        <div class="space-y-4">
-          <h3 class="font-bold">@otjs/firebase-monaco</h3>
-          <p class="text-sm text-muted-foreground">
-            A fully working example of Collaborative editing with Monaco Editor and Firebase Database.
-          </p>
+      <div class="relative overflow-hidden rounded-lg border bg-background p-2">
+        <div class="flex h-[180px] flex-col items-center justify-between gap-2 rounded-md p-5">
+          <Icon name="code-computer" class="size-16" />
+          <div class="space-y-4">
+            <h3 class="font-bold">@otjs/firebase-monaco</h3>
+            <p class="text-sm text-muted-foreground">
+              A fully working example of Collaborative editing with Monaco Editor and Firebase Database.
+            </p>
+          </div>
         </div>
+        <a href="#" class="absolute inset-0"><span class="sr-only">Go</span></a>
       </div>
-      <a href="#" class="absolute inset-0"><span class="sr-only">Go</span></a>
     </div>
   </section>
 </MainLayout>