Skip to content

Commit

Permalink
docs page
Browse files Browse the repository at this point in the history
  • Loading branch information
tacheraSasi committed Nov 30, 2024
1 parent de1fca0 commit 4275cb6
Show file tree
Hide file tree
Showing 17 changed files with 915 additions and 0 deletions.
24 changes: 24 additions & 0 deletions website/app/docs/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Sidebar } from "@/components/docs/sidebar"
import { ScrollArea } from "@/components/ui/scroll-area"

interface DocsLayoutProps {
children: React.ReactNode
}

export default function DocsLayout({ children }: DocsLayoutProps) {
return (
<div className="flex min-h-screen">
<aside className="fixed left-0 top-0 z-30 h-screen w-[250px] border-r bg-background">
<ScrollArea className="h-full">
<Sidebar />
</ScrollArea>
</aside>
<main className="flex-1 pl-[250px]">
<div className="container max-w-3xl py-6 lg:py-10">
{children}
</div>
</main>
</div>
)
}

20 changes: 20 additions & 0 deletions website/app/docs/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Metadata } from "next"
import { DocsHeader } from "@/components/docs/docs-header"
import { Features } from "@/components/docs/features"
import { Core } from "@/components/docs/core"

export const metadata: Metadata = {
title: "Documentation - VintLang",
description: "Documentation for VintLang - A modern programming language built with Go",
}

export default function DocsPage() {
return (
<div className="space-y-10">
<DocsHeader />
<Features />
<Core />
</div>
)
}

15 changes: 15 additions & 0 deletions website/components/docs/MarkdownRender.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';
import ReactMarkdown from 'react-markdown';
import rehypeHighlight from 'rehype-highlight';

interface MarkdownRendererProps{
markdown:string
}

export default function MarkdownRenderer({ markdown }:MarkdownRendererProps) {
return (
<ReactMarkdown rehypePlugins={[rehypeHighlight]}>
{markdown}
</ReactMarkdown>
);
}
16 changes: 16 additions & 0 deletions website/components/docs/core.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export function Core() {
return (
<div className="space-y-4">
<h2 className="text-2xl font-semibold tracking-tight">Core</h2>
<p className="text-muted-foreground">
VintLang has a very minimal API, exposing only a few exports from the main{" "}
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
vintlang
</code>{" "}
bundle. They are split into four categories below.
</p>
</div>
)
}


14 changes: 14 additions & 0 deletions website/components/docs/docs-header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export function DocsHeader() {
return (
<div className="space-y-4">
<h1 className="text-4xl font-bold tracking-tight">Documentation</h1>
<p className="text-xl text-muted-foreground">
Welcome to the VintLang v2 documentation! VintLang&apos;s atomic approach to programming
scales from a simple <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">useState</code> replacement
to an enterprise application with complex requirements.
</p>
</div>
)
}


23 changes: 23 additions & 0 deletions website/components/docs/features.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
export function Features() {
const features = [
"Minimal core API (2kb)",
"Many utilities and extensions",
"TypeScript oriented",
"Works with Next.js, Waku, Remix, and React Native",
]

return (
<div className="space-y-4">
<h2 className="text-2xl font-semibold tracking-tight">Features</h2>
<ul className="list-disc space-y-2 pl-6">
{features.map((feature) => (
<li key={feature} className="text-muted-foreground">
{feature}
</li>
))}
</ul>
</div>
)
}


51 changes: 51 additions & 0 deletions website/components/docs/main-nav.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"

export function MainNav() {
const pathname = usePathname()

return (
<div className="mr-4 hidden md:flex">
<Link href="/" className="mr-6 flex items-center space-x-2">
<span className="hidden font-bold sm:inline-block">VintLang</span>
</Link>
<nav className="flex items-center space-x-6 text-sm font-medium">
<Link
href="/docs"
className={cn(
"transition-colors hover:text-foreground/80",
pathname === "/docs" ? "text-foreground" : "text-foreground/60"
)}
>
Documentation
</Link>
<Link
href="/docs/tutorial"
className={cn(
"transition-colors hover:text-foreground/80",
pathname?.startsWith("/docs/tutorial")
? "text-foreground"
: "text-foreground/60"
)}
>
Tutorial
</Link>
<Link
href="/docs/support"
className={cn(
"transition-colors hover:text-foreground/80",
pathname?.startsWith("/docs/support")
? "text-foreground"
: "text-foreground/60"
)}
>
Support
</Link>
</nav>
</div>
)
}

42 changes: 42 additions & 0 deletions website/components/docs/mobile-nav.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
"use client"

import { useState } from "react"
import Link from "next/link"
import { Menu } from 'lucide-react'
import { Button } from "@/components/ui/button"
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Sidebar } from "@/components/docs/sidebar"

export function MobileNav() {
const [open, setOpen] = useState(false)

return (
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger asChild>
<Button
variant="ghost"
className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
>
<Menu className="h-6 w-6" />
<span className="sr-only">Toggle Menu</span>
</Button>
</SheetTrigger>
<SheetContent side="left" className="pr-0">
<SheetHeader>
<SheetTitle>Navigation</SheetTitle>
</SheetHeader>
<ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10">
<Sidebar />
</ScrollArea>
</SheetContent>
</Sheet>
)
}

22 changes: 22 additions & 0 deletions website/components/docs/mode-toggle.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
"use client"

import { Moon, Sun } from 'lucide-react'
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"

export function ModeToggle() {
const { theme, setTheme } = useTheme()

return (
<Button
variant="ghost"
size="icon"
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
>
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
)
}

18 changes: 18 additions & 0 deletions website/components/docs/search.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
"use client"

import { SearchIcon } from 'lucide-react'
import { Input } from "@/components/ui/input"

export function Search() {
return (
<div className="relative">
<SearchIcon className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<Input
type="search"
placeholder="Search..."
className="pl-9 bg-background border-0 ring-1 ring-border focus-visible:ring-2"
/>
</div>
)
}

86 changes: 86 additions & 0 deletions website/components/docs/sidebar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Search } from "@/components/docs/search"
import { FileText, BookOpen, HelpCircle, Github } from 'lucide-react'

const navigation = [
{
name: "Documentation",
href: "/docs",
icon: FileText,
},
{
name: "Tutorial",
href: "/docs/tutorial",
icon: BookOpen,
},
{
name: "Support",
href: "/docs/support",
icon: HelpCircle,
},
{
name: "Repository",
href: "https://github.com/yourusername/vintlang",
icon: Github,
},
]

export function Sidebar() {
const pathname = usePathname()

return (
<div className="flex h-full flex-col px-4 py-6">
<div className="mb-8">
<Link href="/" className="flex items-center space-x-2">
<span className="text-2xl font-bold">Jōtai</span>
<span className="text-xl">状態</span>
</Link>
<p className="mt-1 text-sm text-muted-foreground">
Primitive and flexible state management for React
</p>
</div>
<Search />
<nav className="mt-4 flex-1">
{navigation.map((item) => {
const isActive = pathname === item.href
return (
<Button
key={item.name}
variant={isActive ? "secondary" : "ghost"}
className={cn(
"mb-1 w-full justify-start",
isActive ? "bg-accent" : "hover:bg-accent/50"
)}
asChild
>
<Link href={item.href}>
<item.icon className="mr-2 h-4 w-4" />
{item.name}
</Link>
</Button>
)
})}
</nav>
<div className="mt-auto space-y-2 text-xs text-muted-foreground">
<p>library by Daishi Kato</p>
<p>art by Jessie Waters</p>
<p className="flex items-center">
site by{" "}
<span className="ml-1">
<span className="text-[#FF1CF7]">c</span>
<span className="text-[#00FF00]">o</span>
<span className="text-[#00FF00]">d</span>
<span className="text-[#FF1CF7]">y</span>
<span className="text-[#00FF00]">code</span>
</span>
</p>
</div>
</div>
)
}

39 changes: 39 additions & 0 deletions website/components/docs/site-header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import Link from "next/link"
import { Code2 } from 'lucide-react'

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
import { MainNav } from "@/components/docs/main-nav"
import { MobileNav } from "@/components/docs/mobile-nav"
import { ModeToggle } from "@/components/docs/mode-toggle"

export function SiteHeader() {
return (
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="container flex h-14 items-center">
<MainNav />
<MobileNav />
<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
<div className="w-full flex-1 md:w-auto md:flex-none">
<Link href="/" className="mr-6 flex items-center space-x-2">
<Code2 className="h-6 w-6" />
<span className="hidden font-bold sm:inline-block">VintLang</span>
</Link>
</div>
<nav className="flex items-center">
<Link
href="https://github.com/yourusername/vintlang"
target="_blank"
rel="noreferrer"
className={cn(buttonVariants({ variant: "ghost" }))}
>
GitHub
</Link>
<ModeToggle />
</nav>
</div>
</div>
</header>
)
}

Loading

0 comments on commit 4275cb6

Please sign in to comment.