fix(ui): sidebar & docs layout

Author: technoph1le

src/app/community/page.tsx

@@ -6,6 +6,7 @@ import { ExternalLink } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { motion } from "framer-motion";
+import { DISCORD_URL, GITHUB_URL } from "@/data/meta";
 
 const QUICKSNIP_YT_VIDEOS = [
   {
@@ -31,21 +32,17 @@ const Communitypage = () => {
             >
               <Image
                 src="/github.svg"
-                alt="Discord"
-                width={200}
-                height={200}
+                alt="GitHub"
+                width={150}
+                height={150}
                 className="shadow-[0_0_5rem_1rem_hsl(225,22%,15%)] rounded-[3rem]"
               />
             </motion.div>
             <h2 className="text-3xl font-bold text-center">
               QuickSnip is Open-Source
             </h2>
             <Button size="lg" asChild>
-              <Link
-                href="https://github.com/quicksnip-dev/quicksnip"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              <Link href={GITHUB_URL} target="_blank" rel="noopener noreferrer">
                 See the code <ExternalLink />
               </Link>
             </Button>
@@ -59,8 +56,8 @@ const Communitypage = () => {
               <Image
                 src="/discord.svg"
                 alt="Discord"
-                width={200}
-                height={200}
+                width={150}
+                height={150}
                 className="shadow-[0_0_5rem_1rem_hsl(235,86%,65%,0.5)] rounded-[3rem]"
               />
             </motion.div>
@@ -69,7 +66,7 @@ const Communitypage = () => {
             </h2>
             <Button size="lg" asChild>
               <Link
-                href="https://discord.com/invite/Nm5K46yUy5"
+                href={DISCORD_URL}
                 target="_blank"
                 rel="noopener noreferrer"
               >

src/app/globals.css

@@ -136,3 +136,23 @@
     @apply max-w-[90rem] mx-auto px-4;
   }
 }
+
+#nd-docs-layout {
+  display: grid;
+  gap: 1rem;
+  padding: 0 !important;
+
+  @media (min-width: 800px) {
+    grid-template-columns: auto auto auto;
+  }
+}
+
+#nd-sidebar {
+  bottom: 3rem;
+  position: initial;
+  background: var(--background);
+}
+
+#nd-page {
+  /* border: 1px solid green; */
+}

src/app/layout.config.tsx

@@ -1,4 +1,4 @@
-import Logo from "@/components/Logo";
+import Logo from "@/components/ui/Logo";
 import { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
 
 export const baseOptions: BaseLayoutProps = {

src/components/layouts/Footer.tsx

@@ -27,7 +27,7 @@ const NAV_ITEMS = [
 
 const Footer = () => {
   return (
-    <footer className="border-t border-secondary text-secondary-foreground">
+    <footer className="h-16 border-t border-secondary text-secondary-foreground">
       <div className="container-lg py-8 grid gap-8 md:grid-cols-[1fr_auto]">
         <p>
           Released under the{" "}

src/components/layouts/Header.tsx

@@ -4,9 +4,10 @@ import React, { useState, useEffect } from "react";
 import { motion, AnimatePresence, easeInOut } from "framer-motion";
 import { Menu, X } from "lucide-react";
 import Link from "next/link";
-import Logo from "../Logo";
-import DarkModeSwitch from "../DarkModeSwitch";
+import Logo from "../ui/Logo";
+import DarkModeSwitch from "../ui/dark-mode-switch";
 import Image from "next/image";
+import { DISCORD_URL, GITHUB_URL } from "@/data/meta";
 
 const NAV_ITEMS = [
   { name: "Snippets", url: "/snippets" },
@@ -20,12 +21,12 @@ const SOCIAL_ITEMS = [
   {
     icon: "/github.svg",
     name: "GitHub",
-    url: "https://github.com/quicksnip-dev/quicksnip",
+    url: GITHUB_URL,
   },
   {
     icon: "/discord.svg",
     name: "Discord",
-    url: "https://discord.com",
+    url: DISCORD_URL,
   },
 ];
 

src/components/DarkModeSwitch.tsx renamed to src/components/ui/dark-mode-switch.tsx

@@ -1,11 +1,9 @@
-import { Label } from "./ui/label";
-import { Switch } from "./ui/switch";
+import { Switch } from "./switch";
 
 const DarkModeSwitch = () => {
   return (
     <div className="flex items-center space-x-2">
       <Switch id="dark-mode" />
-      {/* <Label htmlFor="dark-mode">"Blind me" mode</Label> */}
     </div>
   );
 };

src/components/Logo.tsx renamed to src/components/ui/logo.tsx

@@ -5,15 +5,15 @@ export const EXTENSIONS: ExtensionType[] = [
     icon: "/extensions/raycast.svg",
     name: "Raycast",
     description: "Raycast extension for QuickSnip.",
-    guide_url: "/guide/extensions/raycast",
+    guide_url: "/guide/extensions/quicksnip-raycast",
     source_url: "https://github.com",
     downloads: 3580,
   },
   {
     icon: "/extensions/vscode.svg",
     name: "VS Code",
     description: "VS Code extension for QuickSnip.",
-    guide_url: "/guide/extensions/vs-code",
+    guide_url: "/guide/extensions/quicksnip-vscode",
     source_url: "https://github.com",
     downloads: 8400,
   },

src/data/extensions.ts

@@ -0,0 +1,2 @@
+export const GITHUB_URL = "https://github.com/quicksnip-dev/quicksnip";
+export const DISCORD_URL = "https://discord.com/invite/Nm5K46yUy5";