some changes

Took 1 hour 4 minutes
This commit is contained in:
Braydon 2024-10-09 13:40:01 -04:00
parent 1296a34657
commit cbc9dcb1ab
11 changed files with 120 additions and 117 deletions

View File

@ -1,6 +1,6 @@
--- ---
title: '🐋 Docker' title: '🐋 Docker'
published: '2024-10-07' updated: '2024-10-07'
summary: 'petentium usu tota noluisse errem elaboraret auctor.' summary: 'petentium usu tota noluisse errem elaboraret auctor.'
order: 4 order: 4
--- ---

View File

@ -1,6 +1,6 @@
--- ---
title: '🧩 Components' title: '🧩 Components'
published: '2024-10-07' updated: '2024-10-07'
summary: 'petentium usu tota noluisse errem elaboraret auctor.' summary: 'petentium usu tota noluisse errem elaboraret auctor.'
order: 2 order: 2
--- ---

View File

@ -1,6 +1,6 @@
--- ---
title: '✔️ Supported Services' title: '✔️ Supported Services'
published: '2024-10-07' updated: '2024-10-07'
summary: 'petentium usu tota noluisse errem elaboraret auctor.' summary: 'petentium usu tota noluisse errem elaboraret auctor.'
order: 3 order: 3
--- ---

View File

@ -1,6 +1,6 @@
--- ---
title: '🚀 Introduction' title: '🚀 Introduction'
published: '2024-10-06' updated: '2024-10-06'
summary: 'petentium usu tota noluisse errem elaboraret auctor.' summary: 'petentium usu tota noluisse errem elaboraret auctor.'
order: 1 order: 1
--- ---
@ -8,10 +8,8 @@ order: 1
> [!IMPORTANT] > [!IMPORTANT]
> These docs are currently a work in progress and are subject to change. > These docs are currently a work in progress and are subject to change.
# Pulse App # <span className="flex gap-2.5 items-center"><Activity className="w-6 h-6 text-primary" /> Pulse App</span>
<span className="flex gap-2 items-center select-none"> A lightweight service monitoring solution for tracking the availability of whatever service your heart desires!
<Activity className="w-4 h-4 text-primary" /> <span>A lightweight service monitoring solution for tracking the availability of whatever service your heart desires!</span>
</span>
## Getting Started ## Getting Started
Let's get you up and running—this will only take a few minutes! Start by [creating your account](#creating-your-account) and Let's get you up and running—this will only take a few minutes! Start by [creating your account](#creating-your-account) and

View File

@ -6,6 +6,7 @@ import Navbar from "@/components/navbar/navbar";
import Sidebar from "@/components/sidebar/sidebar"; import Sidebar from "@/components/sidebar/sidebar";
import Footer from "@/components/footer"; import Footer from "@/components/footer";
import { TooltipProvider } from "@/components/ui/tooltip"; import { TooltipProvider } from "@/components/ui/tooltip";
import { getDocsContent } from "@/lib/mdx";
/** /**
* The metadata for this app. * The metadata for this app.
@ -41,7 +42,9 @@ const RootLayout = ({
children, children,
}: Readonly<{ }: Readonly<{
children: ReactNode; children: ReactNode;
}>): ReactElement => ( }>): ReactElement => {
const pages: DocsContentMetadata[] = getDocsContent();
return (
<html lang="en"> <html lang="en">
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem> <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
<body <body
@ -52,10 +55,10 @@ const RootLayout = ({
> >
<TooltipProvider delayDuration={100}> <TooltipProvider delayDuration={100}>
<div className="px-3 md:px-7 max-w-screen-2xl min-h-screen mx-auto flex flex-col transition-all"> <div className="px-3 md:px-7 max-w-screen-2xl min-h-screen mx-auto flex flex-col transition-all">
<Navbar /> <Navbar pages={pages} />
<div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5"> <div className="pt-[4.5rem] w-full h-full flex flex-grow gap-5 sm:gap-8 transition-all transform-gpu">
<div className="relative hidden xs:flex"> <div className="relative hidden xs:flex">
<Sidebar /> <Sidebar pages={pages} />
</div> </div>
{children} {children}
</div> </div>
@ -66,4 +69,5 @@ const RootLayout = ({
</ThemeProvider> </ThemeProvider>
</html> </html>
); );
};
export default RootLayout; export default RootLayout;

View File

@ -8,9 +8,9 @@ type DocsContentMetadata = MDXMetadata & {
title: string; title: string;
/** /**
* The date this content was published. * The date this content was updated.
*/ */
published: string; updated: string;
/** /**
* The summary of this content. * The summary of this content.

View File

@ -24,14 +24,14 @@ const DocsFooter = ({
const next: DocsContentMetadata | undefined = const next: DocsContentMetadata | undefined =
current < pages.length - 1 ? pages[current + 1] : undefined; current < pages.length - 1 ? pages[current + 1] : undefined;
const [publicationDate, setPublicationDate] = useState<string | null>( const [updatedDate, setUpdatedDate] = useState<string | null>(
DateTime.fromISO(pages[current]?.published).toRelative() DateTime.fromISO(pages[current]?.updated).toRelative()
); );
useEffect(() => { useEffect(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
setPublicationDate( setUpdatedDate(
DateTime.fromISO(pages[current]?.published).toRelative() DateTime.fromISO(pages[current]?.updated).toRelative()
); );
}, 1000); }, 1000);
return () => clearInterval(interval); return () => clearInterval(interval);
@ -39,15 +39,15 @@ const DocsFooter = ({
return ( return (
<footer className="xs:mx-5 sm:mx-10 my-2 flex flex-col select-none transition-all transform-gpu"> <footer className="xs:mx-5 sm:mx-10 my-2 flex flex-col select-none transition-all transform-gpu">
{/* Publish Date */} {/* updated Date */}
<div className="ml-auto pt-4"> <div className="ml-auto pt-4">
<SimpleTooltip <SimpleTooltip
content={DateTime.fromISO( content={`Last updated on ${DateTime.fromISO(
pages[current]?.published pages[current]?.updated
).toLocaleString(DateTime.DATETIME_MED)} ).toLocaleString(DateTime.DATETIME_MED)}`}
> >
<span className="text-xs sm:text-sm opacity-75 transition-all transform-gpu"> <span className="text-xs sm:text-sm opacity-75 transition-all transform-gpu">
Published {publicationDate} Updated {updatedDate}
</span> </span>
</SimpleTooltip> </SimpleTooltip>
</div> </div>

View File

@ -1,13 +1,12 @@
"use client";
import { ReactElement } from "react"; import { ReactElement } from "react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import QuickSearchDialog from "@/components/navbar/search-dialog"; import QuickSearchDialog from "@/components/navbar/search-dialog";
import { getDocsContent } from "@/lib/mdx";
import Sidebar from "@/components/sidebar/sidebar"; import Sidebar from "@/components/sidebar/sidebar";
const Navbar = (): ReactElement => { const Navbar = ({ pages }: { pages: DocsContentMetadata[] }): ReactElement => (
const pages: DocsContentMetadata[] = getDocsContent();
return (
<nav className="fixed left-0 inset-x-0 bg-white/[0.007] backdrop-saturate-100 backdrop-blur-xl border-b z-50"> <nav className="fixed left-0 inset-x-0 bg-white/[0.007] backdrop-saturate-100 backdrop-blur-xl border-b z-50">
<div className="px-3 md:px-7 max-w-screen-2xl mx-auto py-4 flex justify-between items-center transition-all transform-gpu"> <div className="px-3 md:px-7 max-w-screen-2xl mx-auto py-4 flex justify-between items-center transition-all transform-gpu">
{/* Branding */} {/* Branding */}
@ -49,13 +48,12 @@ const Navbar = (): ReactElement => {
{/* Mobile Sidebar */} {/* Mobile Sidebar */}
<div className="flex xs:hidden"> <div className="flex xs:hidden">
<Sidebar /> <Sidebar pages={pages} />
</div> </div>
</div> </div>
</div> </div>
</nav> </nav>
); );
};
const SocialLink = ({ const SocialLink = ({
name, name,

View File

@ -33,7 +33,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
let match; let match;
while ((match = headerRegex.exec(page.content)) !== null) { while ((match = headerRegex.exec(page.content)) !== null) {
const level: number = match[1].length; // The number of # symbols determines the header level const level: number = match[1].length; // The number of # symbols determines the header level
const text: string = match[2].trim(); const text: string = match[2].trim().replace(/<[^>]*>/g, "");
const id: string = text const id: string = text
.toLowerCase() .toLowerCase()
.replace(/\s+/g, "-") .replace(/\s+/g, "-")
@ -79,7 +79,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
return ( return (
<motion.div <motion.div
ref={ref} ref={ref}
className="sticky top-[7rem] w-44 max-h-[calc(100vh-3.5rem)] flex flex-col gap-2 text-sm select-none" className="sticky top-[7.5rem] w-44 max-h-[calc(100vh-3.5rem)] flex flex-col gap-2 text-sm select-none"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: inView ? 1 : 0 }} animate={{ opacity: inView ? 1 : 0 }}
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
@ -119,7 +119,7 @@ const OnThisPage = ({ page }: { page: DocsContentMetadata }): ReactElement => {
draggable={false} draggable={false}
className="block py-1" className="block py-1"
> >
{truncateText(header.text, 24)} {truncateText(header.text, 20)}
</Link> </Link>
</li> </li>
))} ))}

View File

@ -51,7 +51,7 @@ const CategoryItem = ({
const hasChildren = Object.keys(node.children).length > 0; const hasChildren = Object.keys(node.children).length > 0;
return ( return (
<div className={cn(`relative select-none`, depth > 0 && "ml-4")}> <div className={cn(`relative select-none`, depth > 0 && "ml-3")}>
{/* Indentation */} {/* Indentation */}
{depth > 0 && ( {depth > 0 && (
<div <div
@ -72,10 +72,13 @@ const CategoryItem = ({
> >
<Button <Button
className={cn( className={cn(
`relative w-full px-1.5 h-8 lg:text-base justify-between hover:bg-accent/20`, `relative w-full px-1.5 h-8 justify-between hover:bg-accent/35`,
node.isFolder
? "mb-0.5 text-sm font-semibold"
: "lg:text-base",
depth > 0 && "pl-4", depth > 0 && "pl-4",
active && active &&
"text-primary/95 font-bold hover:text-primary" "text-primary/95 font-semibold hover:text-primary"
)} )}
variant="ghost" variant="ghost"
> >

View File

@ -1,13 +1,12 @@
import { ReactElement } from "react"; import { ReactElement } from "react";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { getDocsContent } from "@/lib/mdx";
import SidebarLinks from "@/components/sidebar/sidebar-links"; import SidebarLinks from "@/components/sidebar/sidebar-links";
import ThemeSwitcher from "@/components/theme-switcher"; import ThemeSwitcher from "@/components/theme-switcher";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"; import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import QuickSearchDialog from "@/components/navbar/search-dialog"; import QuickSearchDialog from "@/components/navbar/search-dialog";
import { AlignRightIcon } from "lucide-react"; import { AlignRightIcon } from "lucide-react";
const Sidebar = (): ReactElement => ( const Sidebar = ({ pages }: { pages: DocsContentMetadata[] }): ReactElement => (
<> <>
{/* Mobile */} {/* Mobile */}
<div className="xs:hidden"> <div className="xs:hidden">
@ -16,21 +15,23 @@ const Sidebar = (): ReactElement => (
<AlignRightIcon className="w-6 h-6" /> <AlignRightIcon className="w-6 h-6" />
</SheetTrigger> </SheetTrigger>
<SheetContent className="h-full px-5 pt-11" side="right"> <SheetContent className="h-full px-5 pt-11" side="right">
<SidebarContent /> <SidebarContent pages={pages} />
</SheetContent> </SheetContent>
</Sheet> </Sheet>
</div> </div>
{/* Desktop */} {/* Desktop */}
<div className="hidden xs:flex sticky top-[4.5rem] max-h-[calc(100vh-3.5rem)] overflow-y-auto min-w-32 w-40 lg:w-52 py-5 flex-col justify-between transition-all transform-gpu"> <div className="hidden xs:flex sticky top-[4.5rem] max-h-[calc(100vh-3.5rem)] overflow-y-auto min-w-32 w-40 lg:w-52 py-5 flex-col justify-between transition-all transform-gpu">
<SidebarContent /> <SidebarContent pages={pages} />
</div> </div>
</> </>
); );
const SidebarContent = (): ReactElement => { const SidebarContent = ({
const pages: DocsContentMetadata[] = getDocsContent(); pages,
return ( }: {
pages: DocsContentMetadata[];
}): ReactElement => (
<div className="h-full flex flex-col justify-between"> <div className="h-full flex flex-col justify-between">
{/* Top */} {/* Top */}
<div className="flex flex-col"> <div className="flex flex-col">
@ -47,6 +48,5 @@ const SidebarContent = (): ReactElement => {
</div> </div>
</div> </div>
); );
};
export default Sidebar; export default Sidebar;