diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index f0efcc094..000000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - extends: ['custom/next'], - rules: { - 'no-console': 'off', - }, -}; diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 000000000..ed21dd815 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,6 @@ +{ + "extends": ["next/core-web-vitals", "next/typescript"], + "rules": { + "@typescript-eslint/no-explicit-any": "off" + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 7417c10fd..23d7ab5f4 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,5 @@ bun.lockb openapi .DS_Store **/.DS_Store -tmp \ No newline at end of file +tmp +prompt.txt \ No newline at end of file diff --git a/app/(docs)/[...slug]/page.tsx b/app/(docs)/[...slug]/page.tsx index 3b3d538c7..3fd21c714 100644 --- a/app/(docs)/[...slug]/page.tsx +++ b/app/(docs)/[...slug]/page.tsx @@ -1,4 +1,3 @@ -import { ExternalLinkIcon } from "lucide-react"; import type { Metadata } from "next"; import { Card, Cards } from "fumadocs-ui/components/card"; import { RollButton } from "fumadocs-ui/components/roll-button"; @@ -18,69 +17,6 @@ export default function Page({ params }: { params: Param }): JSX.Element { if (!page) notFound(); - // TODO: this is a less than ideal solution for creating different titles between sidebar and page - const generatePrefix = (page: any) => { - // Mapping of words to their desired capitalization forms - const specialCases = { - api: "API", - sdk: "SDK", - connect: "Stacks Connect", - platform: "Hiro Platform", - hacks: "Hiro Hacks", - "clarinet-js-sdk": "Clarinet JS SDK", - "platform-api": "Platform API", - "rpc-api": "Stacks Node RPC", - }; - - if (page.file?.name === "index" && page.slugs[1]) { - const segment = page.slugs[1]; - let prefix = - specialCases[segment.toLowerCase() as keyof typeof specialCases] || - segment.charAt(0).toUpperCase() + segment.slice(1); - - // Check if there is a second segment and append it - if (page.slugs[2] && page.slugs[1].toLowerCase() !== "api") { - const secondSegment = page.slugs[2]; - prefix += - " " + - (specialCases[ - secondSegment.toLowerCase() as keyof typeof specialCases - ] || secondSegment.charAt(0).toUpperCase() + secondSegment.slice(1)); - } - - if (page.slugs[1].toLowerCase() === "platform-api") { - prefix = "Platform API"; - } - - if (page.slugs[1].toLowerCase() === "token-metadata-api") { - prefix = "Token Metadata API"; - } - - if (page.slugs[1].toLowerCase() === "rpc-api") { - prefix = "Stacks Node RPC API"; - } - - return prefix; - } else if (["overview", "index"].includes(page.file?.name)) { - const pathSegments = page.file.dirname.split("/"); - if (pathSegments.length >= 2) { - const relevantSegments = pathSegments.slice(-2); // Get the last two segments - - return relevantSegments - .map( - (segment: string) => - specialCases[ - segment.toLowerCase() as keyof typeof specialCases - ] || segment.charAt(0).toUpperCase() + segment.slice(1) // Capitalize the first letter - ) - .join(" "); // Join them with a space - } - } - return ""; - }; - - const prefix = generatePrefix(page); - return ( {page.data.title !== "Home" && ( -

- {prefix} {page.data.title} +

+ {page.data.title}

)} {page.data.title !== "Home" && ( @@ -99,6 +35,9 @@ export default function Page({ params }: { params: Param }): JSX.Element { {page.data.description}

)} + {page.data.title !== "Home" && ( +
+ )} {page.data.index ? ( @@ -165,50 +104,12 @@ const metadata: Metadata = { }, }; -function generateCustomTitle(file: { - flattenedPath: string; - name: string; -}): string { - const segments = file.flattenedPath.split("/"); - const isRootLevelSegment = segments.length === 3; - let relevantSegments: string[] = []; - - if (isRootLevelSegment) { - relevantSegments = [segments[1]]; - } - - return ( - relevantSegments[0]?.charAt(0)?.toUpperCase() + - relevantSegments[0]?.slice(1) - ); -} - -export function generateMetadata({ params }: { params: Param }): Metadata { +export async function generateMetadata(props: { + params: Promise<{ slug?: string[] }>; +}) { + const params = await props.params; const page = utils.getPage(params.slug); - if (!page) notFound(); - const description = - page.data.description ?? - "All the developer docs, guides and resources you need to build on Bitcoin layers."; - - const imageParams = new URLSearchParams(); - imageParams.set("title", page.data.title); - imageParams.set("description", description); - - const customTitle = generateCustomTitle(page.file); - - return createMetadata({ - ...metadata, - title: customTitle.length - ? `${customTitle} ${page.data.title}` - : page.data.title, - description, - }); -} - -export function generateStaticParams(): Param[] { - return utils.getPages().map((page) => ({ - slug: page.slugs, - })); + return metadata; } diff --git a/app/(docs)/layout.client.tsx b/app/(docs)/layout.client.tsx index 6b6a6c40b..e6d2bc70c 100644 --- a/app/(docs)/layout.client.tsx +++ b/app/(docs)/layout.client.tsx @@ -4,7 +4,7 @@ import { cva } from "class-variance-authority"; import Link from "next/link"; import { useParams, usePathname } from "next/navigation"; import type { ReactNode } from "react"; -import { cn } from "@/utils/cn"; +import { cn } from "@/lib/utils"; import { modes } from "@/utils/modes"; import { ChevronLeft } from "lucide-react"; @@ -15,7 +15,7 @@ const itemVariants = cva( { variants: { active: { - true: "text-accent-foreground", + true: "text-accent-foreground pointer-events-none", }, mode: { bitcoin: "bg-hiro", @@ -31,7 +31,7 @@ const itemVariants = cva( { active: true, mode: "stacks", - className: "bg-background", + className: "bg-inverted text-background", }, ], } @@ -99,7 +99,7 @@ export function SidebarBanner(): JSX.Element { return ( -
+

Back

diff --git a/app/(docs)/layout.tsx b/app/(docs)/layout.tsx index 1a9f9f8e8..5f6581278 100644 --- a/app/(docs)/layout.tsx +++ b/app/(docs)/layout.tsx @@ -4,6 +4,10 @@ import { ArrowUpRight } from "lucide-react"; import { utils } from "@/utils/source"; import { DocsLogo } from "@/components/ui/icon"; import { Body, NavChildren, SidebarBanner } from "./layout.client"; +import { Statuspage } from "statuspage.io"; + +const statuspage = new Statuspage("3111l89394q4"); +console.log({ status: await statuspage.api.getStatus() }); export const layoutOptions: Omit = { tree: utils.pageTree, @@ -27,7 +31,16 @@ export const layoutOptions: Omit = { }, ], }, - links: [], + links: [ + { + text: "Guides", + url: "/guides", + }, + { + text: "Cookbook", + url: "/cookbook", + }, + ], sidebar: { defaultOpenLevel: 0, banner: , @@ -56,7 +69,16 @@ export const homeLayoutOptions: Omit = { }, ], }, - links: [], + links: [ + { + text: "Guides", + url: "/guides", + }, + { + text: "Cookbook", + url: "/cookbook", + }, + ], }; export default function Layout({ diff --git a/app/(home)/docs/page.tsx b/app/(home)/docs/page.tsx deleted file mode 100644 index 0b7496e20..000000000 --- a/app/(home)/docs/page.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { cva } from "class-variance-authority"; -import { LayoutIcon, LibraryIcon } from "lucide-react"; -import Link from "next/link"; -import { buttonVariants } from "@/components/ui/button"; -import { cn } from "@/utils/cn"; - -const cardVariants = cva( - "flex flex-col rounded-xl border border-primary/10 bg-background bg-gradient-to-br from-transparent to-primary/10 p-6 shadow-inner shadow-primary/10 transition-colors hover:bg-muted" -); - -const cardIconVariants = cva( - "mb-2 size-9 rounded-lg border bg-gradient-to-b from-primary/20 p-1 shadow-sm shadow-primary/50" -); - -export default function DocsPage(): JSX.Element { - return ( -
-
-
-
-

- Getting Started -

-

- You can start with Fumadocs UI, or just use the core library. -

-
- - Github - - - Guides - -
-
- -
- -
-

Fumadocs UI

-

- The full-powered documentation framework with an excellent UI. -

- - -
- -
-

Fumadocs Core

-

- The core library of Fumadocs. -

- -
-
- ); -} diff --git a/app/(home)/layout.tsx b/app/(home)/layout.tsx index f079bf7cd..f20da1dd4 100644 --- a/app/(home)/layout.tsx +++ b/app/(home)/layout.tsx @@ -8,7 +8,7 @@ export default function HomeLayout({ children: ReactNode; }): JSX.Element { return ( -
+
{children}
); diff --git a/app/(home)/page.client.tsx b/app/(home)/page.client.tsx deleted file mode 100644 index d0cd3c33a..000000000 --- a/app/(home)/page.client.tsx +++ /dev/null @@ -1,441 +0,0 @@ -"use client"; - -import React, { - useEffect, - useState, - Fragment, - type ReactElement, - type HTMLAttributes, - type ReactNode, -} from "react"; -import { TerminalIcon } from "lucide-react"; -import { NextSVG, ContentlayerIcon, OpenAPIIcon } from "./icons"; -import { cva } from "class-variance-authority"; -import { cn } from "@/utils/cn"; - -const linkItemVariants = cva("transition-colors dark:hover:bg-muted"); - -export function Previews(): JSX.Element { - return ( -
-

I'm satisfied with it

- - - @joulev - -

Next.js Expert

-
- ); -} - -interface IntegrationProps extends HTMLAttributes { - codeBlocks?: { key: string; message: string; block: ReactNode }[]; -} - -export function Integration({ - className, - codeBlocks, - ...props -}: IntegrationProps): JSX.Element { - const [activeSection, setActiveSection] = React.useState("clarinet"); - const activeCodeBlock = codeBlocks?.find( - (block) => block.key === activeSection - ); - - return ( -
-
setActiveSection("clarinet")} - className={cn( - linkItemVariants(), - "cursor-pointer", - activeSection === "clarinet" && "bg-muted/80", - activeSection !== "clarinet" && "hover:bg-muted" - )} - > - -

Clarinet

-

- Everything you need to write, test, integrate and deploy smart - contracts. -

-
-
setActiveSection("stacks.js")} - className={cn( - linkItemVariants(), - "cursor-pointer", - activeSection === "stacks.js" && "bg-muted/80", - activeSection !== "stacks.js" && "hover:bg-muted" - )} - > - -

Stacks.js

-

- A collection of libraries for building on the Stacks blockchain. -

-
-
setActiveSection("chainhook")} - className={cn( - linkItemVariants(), - "cursor-pointer", - activeSection === "chainhook" && "bg-muted/80", - activeSection !== "chainhook" && "hover:bg-muted" - )} - > - -

Chainhook

-

- Stream blockchain events and trigger off-chain actions for your apps - use case. -

-
-
-

{activeCodeBlock?.message}

- {activeCodeBlock?.block ?? null} -
-
- {activeSection === "clarinet" && } - {activeSection === "stacks.js" && } - {activeSection === "chainhook" && } -
-
- ); -} - -export function ClarinetAppAnimation(): JSX.Element { - const installCmd = "clarinet new sbtc"; - const tickTime = 100; - const timeCommandEnter = installCmd.length; - const timeCommandRun = timeCommandEnter + 7; - const timeCommandEnd = timeCommandRun + 7; - const timeWindowOpen = timeCommandEnd + 1; - const timeEnd = timeWindowOpen + 1; - - const [tick, setTick] = useState(timeEnd); - - useEffect(() => { - const timer = setInterval(() => { - setTick((prev) => (prev >= timeEnd ? prev : prev + 1)); - }, tickTime); - - return () => { - clearInterval(timer); - }; - }, [timeEnd]); - - const lines: ReactElement[] = []; - - lines.push( - - {installCmd.substring(0, tick)} - {tick < timeCommandEnter && ( -
- )} - - ); - - if (tick >= timeCommandEnter) { - lines.push( ); - } - - if (tick > timeCommandRun) - lines.push( - - - Created directory sbtc - - {tick > timeCommandRun + 1 && ( - - Created directory{" "} - sbtc/contracts - - )} - {tick > timeCommandRun + 2 && ( - - Created directory{" "} - sbtc/settings - - )} - {tick > timeCommandRun + 3 && ( - - Created directory sbtc/tests - - )} - {tick > timeCommandRun + 4 && ( - - Created file{" "} - sbtc/Clarinet.toml - - )} - {tick > timeCommandRun + 5 && ( - - Created file{" "} - sbtc/settings/Mainnet.toml - - )} - {tick > timeCommandRun + 6 && ( - - Created file{" "} - sbtc/settings/Testnet.toml - - )} - {tick > timeCommandRun + 7 && ( - - Created file{" "} - sbtc/settings/Devnet.toml - - )} - - ); - - return ( -
{ - if (tick >= timeEnd) { - setTick(0); - } - }} - > - {tick > timeWindowOpen && ( - - )} - 
-        

-          {" "}
-          Terminal
-          

-          

-        

-        

-          {lines}
-        

-
-
- ); -} - -export function StacksJsAppAnimation(): JSX.Element { - const installCmd = "npx create stacks"; - const tickTime = 100; - const timeCommandEnter = installCmd.length; - const timeCommandRun = timeCommandEnter + 3; - const timeCommandEnd = timeCommandRun + 3; - const timeWindowOpen = timeCommandEnd + 1; - const timeEnd = timeWindowOpen + 1; - - const [tick, setTick] = useState(timeEnd); - - useEffect(() => { - const timer = setInterval(() => { - setTick((prev) => (prev >= timeEnd ? prev : prev + 1)); - }, tickTime); - - return () => { - clearInterval(timer); - }; - }, [timeEnd]); - - const lines: ReactElement[] = []; - - lines.push( - - {installCmd.substring(0, tick)} - {tick < timeCommandEnter && ( -
- )} - - ); - - if (tick >= timeCommandEnter) { - lines.push( ); - } - - if (tick > timeCommandRun) - lines.push( - - ┌ Create Stacks App - │ - {tick > timeCommandRun + 1 && ( - <> - ◇ Project name - │ my-app - - )} - {tick > timeCommandRun + 2 && ( - <> - │ - ◆ Choose a template - - )} - {tick > timeCommandRun + 3 && ( - <> - - │ ● Blank project - - │ ○ NFT Marketplace - - )} - - ); - - return ( -
{ - if (tick >= timeEnd) { - setTick(0); - } - }} - > - {tick > timeWindowOpen && ( - - )} - 
-        

-          {" "}
-          Terminal
-          

-          

-        

-        

-          {lines}
-        

-
-
- ); -} - -export function ChainhookAppAnimation(): JSX.Element { - const installCmd = "$ chainhook predicates scan ordinals.json --mainnet"; - const tickTime = 100; - const timeCommandEnter = installCmd.length; - const timeCommandRun = timeCommandEnter + 2; - const timeCommandEnd = timeCommandRun + 2; - const timeWindowOpen = timeCommandEnd + 1; - const timeEnd = timeWindowOpen + 1; - - const [tick, setTick] = useState(timeEnd); - - useEffect(() => { - const timer = setInterval(() => { - setTick((prev) => (prev >= timeEnd ? prev : prev + 1)); - }, tickTime); - - return () => { - clearInterval(timer); - }; - }, [timeEnd]); - - const lines: ReactElement[] = []; - - lines.push( - - {installCmd.substring(0, tick)} - {tick < timeCommandEnter && ( -
- )} - - ); - - if (tick >= timeCommandEnter) { - lines.push( ); - } - - if (tick > timeCommandRun) - lines.push( - - - Apr 20 20:42:00.123 - INFO Starting predicate - evaluation on Stacks blocks - - {tick > timeCommandRun + 1 && ( - - Apr 20 20:42:00.124 - INFO 4200 blocks scanned, 6 - occurences found - - )} - - ); - - return ( -
{ - if (tick >= timeEnd) { - setTick(0); - } - }} - > - {tick > timeWindowOpen && ( - - )} - 
-        

-          {" "}
-          Terminal
-          

-          

-        

-        

-          {lines}
-        

-
-
- ); -} - -interface LaunchAppWindowProps extends HTMLAttributes { - title: string; - message: string; -} - -function LaunchAppWindow({ - title, - message, - ...props -}: LaunchAppWindowProps): JSX.Element { - return ( -
-
-

{title}

-
-
{message}
-
- ); -} diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx index e337abaa1..db8a7d36a 100644 --- a/app/(home)/page.tsx +++ b/app/(home)/page.tsx @@ -1,25 +1,24 @@ +import Link from "fumadocs-core/link"; import { StacksCardIcon, BitcoinCardIcon } from "@/components/ui/icon"; import { Card } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; -import Link from "fumadocs-core/link"; export default function HomePage(): JSX.Element { return ( -
+
-

+

Welcome to Hiro Docs.

-

+

Explore our tutorials, guides, API references, and more.

- {/* Stacks Docs Card */}
@@ -30,53 +29,32 @@ export default function HomePage(): JSX.Element {
- + CLARINET - + CHAINHOOK - + STACKS.JS - + HIRO PLATFORM - + STACKS API - + TOKEN METADATA API - + +3 MORE
@@ -88,22 +66,13 @@ export default function HomePage(): JSX.Element {

- + ORDHOOK - + ORDINALS API - + RUNES API
@@ -120,7 +89,7 @@ export default function HomePage(): JSX.Element {
- +

Get started with Stacks

@@ -131,7 +100,7 @@ export default function HomePage(): JSX.Element { - +

Stacks API Overview

@@ -141,7 +110,7 @@ export default function HomePage(): JSX.Element { - +

Get started with Bitcoin

@@ -152,7 +121,7 @@ export default function HomePage(): JSX.Element { - +

Ordinals API Overview

diff --git a/app/api/og/[mode]/inter-bold.woff b/app/api/og/[mode]/inter-bold.woff deleted file mode 100644 index eaf3d4bfd..000000000 Binary files a/app/api/og/[mode]/inter-bold.woff and /dev/null differ diff --git a/app/api/og/[mode]/route.tsx b/app/api/og/[mode]/route.tsx deleted file mode 100644 index d73157e7b..000000000 --- a/app/api/og/[mode]/route.tsx +++ /dev/null @@ -1,117 +0,0 @@ -/* eslint-disable react/no-unknown-property -- Tailwind CSS `tw` property */ -import { ImageResponse } from "next/og"; -import type { NextRequest } from "next/server"; - -interface Mode { - param: string; - name: string; -} - -const modes: Mode[] = [ - { - param: "stacks", - name: "Stacks", - }, - { - param: "ordinals", - name: "Ordinals", - }, -]; - -export const runtime = "edge"; - -const bold = fetch(new URL("./inter-bold.woff", import.meta.url)).then((res) => - res.arrayBuffer() -); - -const foreground = "hsl(0 0% 98%)"; -const mutedForeground = "hsl(0 0% 63.9%)"; -const background = "rgba(10, 10, 10)"; - -export async function GET( - request: NextRequest, - { params }: { params: { mode: string } } -): Promise { - const { searchParams } = request.nextUrl; - const title = searchParams.get("title"), - description = searchParams.get("description"); - - return new ImageResponse( - OG({ - title: title ?? "Fumadocs", - description: description ?? "The Documentation Framework", - mode: modes.find((mode) => mode.param === params.mode) ?? modes[0], - }), - { - width: 1200, - height: 630, - fonts: [{ name: "Inter", data: await bold, weight: 700 }], - } - ); -} - -function OG({ - title, - description, - mode, -}: { - mode: Mode; - title: string; - description: string; -}): JSX.Element { - return ( -
-
-
-

{title}

-

- {description} -

-
-
- -
- - - - - - - -

{mode.name}

-
-
- ); -} diff --git a/app/fonts/Aeonik-Bold.woff b/app/fonts/Aeonik-Bold.woff new file mode 100644 index 000000000..bb2013b68 Binary files /dev/null and b/app/fonts/Aeonik-Bold.woff differ diff --git a/app/fonts/Aeonik-Bold.woff2 b/app/fonts/Aeonik-Bold.woff2 new file mode 100644 index 000000000..650c0d1a2 Binary files /dev/null and b/app/fonts/Aeonik-Bold.woff2 differ diff --git a/app/fonts/Inter-Medium.woff2 b/app/fonts/Inter-Medium.woff2 new file mode 100644 index 000000000..0fd2ee737 Binary files /dev/null and b/app/fonts/Inter-Medium.woff2 differ diff --git a/app/fonts/fonts.ts b/app/fonts/index.ts similarity index 71% rename from app/fonts/fonts.ts rename to app/fonts/index.ts index 14c63db47..56690006c 100644 --- a/app/fonts/fonts.ts +++ b/app/fonts/index.ts @@ -1,5 +1,22 @@ import localFont from "next/font/local"; +export const aeonik = localFont({ + src: [ + { + path: "./Aeonik-Bold.woff2", + weight: "bold", + style: "normal", + }, + { + path: "./Aeonik-Bold.woff", + weight: "bold", + style: "normal", + }, + ], + display: "optional", + variable: "--font-aeonik", +}); + export const aeonikFono = localFont({ src: [ { @@ -41,6 +58,11 @@ export const inter = localFont({ weight: "normal", style: "normal", }, + { + path: "./Inter-Medium.woff2", + weight: "500", + style: "normal", + }, { path: "./Inter-SemiBold.woff2", weight: "600", diff --git a/app/global.css b/app/global.css index 384362221..4388397a8 100644 --- a/app/global.css +++ b/app/global.css @@ -15,7 +15,7 @@ --secondary: 40 13% 91%; --secondary-foreground: 240 5.9% 10%; --muted: 40 14.3% 95.9%; - --muted-foreground: 240 3.8% 46.1%; + --muted-foreground: #595650; --accent: 40 13% 91%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; @@ -25,13 +25,27 @@ --ring: 346.8 77.2% 49.8%; --radius: 0.5rem; --hiro: 21 100% 67.5%; - --icon: 17 6.5% 21%; - --inverted: 30 5.7% 7.5%; + --icon: #383432; + --inverted: #141312; --code: 0 0% 100%; --highlight: 40 13% 91%; --content: 32.31 11.93% 78.63%; - --dark: 20 14.3% 4.1%; - --contrast:0 7.7% 5.1%; + --dark: 30 5.7% 7.5%; + --gradient: #59564f; + --contrast: 0 7.7% 5.1%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-primary: 240 5.9% 10%; + --sidebar-primary-foreground: 0 0% 98%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 217.2 91.2% 59.8%; } .dark { @@ -46,7 +60,7 @@ --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 30 5.7% 7.5%; - --muted-foreground: 240 5% 64.9%; + --muted-foreground: #8c877d; --accent: 12 6.2% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; @@ -56,23 +70,39 @@ --ring: 346.8 77.2% 49.8%; --hiro: 24 100% 51.4%; --card-hover: 15 5% 16%; - --icon: 0 0% 100%; - --inverted: 40 14.3% 95.9%; + --icon: #ffffff; + --inverted: #f2f0ed; --code: 0 7.7% 5.1%; --highlight: 12 6.2% 15.9%; --content: 40 5.33% 33.14%; - --dark: 20 14.3% 4.1%; + --dark: 30 5.7% 7.5%; + --gradient: #c0bdb4; --contrast: 0 0% 100%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; } .bitcoin { --primary: 20 14.3% 4.1%; - --icon: 20 14.3% 4.1%; + --icon: #383432; + --gradient: #ff7733; } .dark .bitcoin { --primary: 0 0% 100%; - --icon: 0 0% 100%; + --icon: #ffffff; + --gradient: #ff7733; } } @@ -85,6 +115,15 @@ body { /* Override CSS */ +.container.flex.flex-row.gap-6.xl\:gap-12 { + padding: 0; + margin-top: 0; +} + +pre { + font-size: 0.875rem; +} + li a { text-decoration: none !important; } @@ -97,11 +136,6 @@ div.container { margin-top: 1rem; } -:not(pre) > code { - background: hsl(var(--accent)) !important; - border-color: hsl(var(--border)) !important; -} - /* FIXME: This removes the white space margin between frontmatter title and description and start of body content */ .container article p.mb-8 { margin-bottom: 0rem; @@ -124,10 +158,6 @@ a[aria-label="Hiro Platform"] { padding: 0; } -a[aria-label="Hiro Platform"] div:hover { - background-color: hsla(var(--muted-foreground) / 0.1); -} - h1, h2, h3, @@ -152,16 +182,18 @@ option { } /* TODO: div.prose is for targeting the title, need to fix this approach */ -/* TODO: div.prose .flex-1 span is for targeting the text inside the component */ a, p, li, table, input, -div.prose .w-0, -div.prose .flex-1 span { +div.prose .w-0 { font-family: var(--font-inter), sans-serif; } +/* TODO: div.prose .flex-1 span is for targeting the text inside the component */ +/* div.prose .flex-1 span { + font-family: var(--font-inter), sans-serif; +} */ /* This changes the default background color of the root level Home and Get Started tab icons */ div.bg-gradient-to-b { @@ -176,7 +208,7 @@ a.bg-primary\/10 { /* This changes the icon colors for active root level sidebar tabs, Stacks */ a.bg-primary\/10 div:first-child { - background: hsl(var(--inverted)); + background: var(--inverted); border: none; } @@ -208,6 +240,11 @@ body background: hsl(var(--code)); } +article { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + figure.not-prose div[data-radix-scroll-area-viewport] { background: hsl(var(--code)); width: auto; @@ -239,15 +276,19 @@ figure.not-prose:not(:has(figcaption)) div[data-radix-scroll-area-viewport] { margin: 0; } -figure pre { - background: hsl(var(--code)); -} - nav.container { gap: 2.25rem; } -nav.container a, figure, pre, pre a, code, code a, th, code > span, .not-prose div { +nav.container a, +figure, +pre, +pre a, +code, +code a, +th, +code > span, +.not-prose div { font-family: var(--font-aeonikFono), sans-serif; } @@ -260,12 +301,8 @@ div.flex.flex-row.items-center.gap-2.border-b.bg-muted.px-4.py-1\.5 { background: hsl(var(--background)); } -a[aria-label="Hiro Platform"] div svg { - width: 0.75rem; - height: 0.75rem; -} - -nav a[href="/guides"] { +nav a[href="/guides"], +nav a[href="/cookbook"] { text-decoration: underline; } @@ -297,25 +334,6 @@ body background-color: hsl(var(--background)); } -p.first\:mt-0 { - font-family: var(--font-aeonikFono), sans-serif; - margin-top: 1.5rem !important; -} - -p.first\:mt-0:before { - content: ""; - display: block; - height: 1px; - margin-bottom: 1rem; - border-width: 0.25px; - border-color: hsl(var(--accent)); -} - -/* Override the .prose-no-margin on callout components */ -.callout p { - margin: 0; -} - div.not-prose, div.prose-no-margin, div[role="tablist"] { @@ -389,17 +407,6 @@ div.prose div.footer.not-prose { background: hsl(var(--background)) !important; } -div.api-example div.max-xl\:hidden > div:nth-child(1) { - margin-top: 0; - margin-bottom: 1rem; -} - -/* Sets the background and text for an active tab in reference pages */ -.tab[data-state="active"] > .badge { - color: hsl(var(--background)); - background-color: hsl(var(--inverted)); -} - .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { text-decoration-color: var(--secondary) !important; } @@ -440,3 +447,83 @@ a[href="/stacks/api/fees/fee-rate"] { div.divide-y.divide-border.overflow-hidden.rounded-lg.border.bg-card { background: hsl(var(--background)); } + +/* START Docskit theme */ + +@layer base { + :root { + --ch-0: light; + --ch-1: #7a756b; + --ch-2: #7c7f93; /* Not used */ + --ch-3: #b5aca1; + --ch-4: #48944c; + --ch-5: #ea76cb; + --ch-6: #ff5500; + --ch-7: #bc812e; + --ch-8: #179299; + --ch-9: #3676b7; + --ch-10: #bc812e; + --ch-11: #7a756b; + --ch-12: #bc812e; + --ch-13: #04a5e5; + --ch-14: #dd7878; + --ch-15: #6c6f85; + --ch-16: #3676b7; /* highlight */ + --ch-17: #dc8a78; + --ch-18: #eff1f5; + --ch-19: #4c4f6912; + --ch-20: #04a5e540; + --ch-21: #1a85ff; + --ch-22: #7c7f934d; + --ch-23: #e6e9ef; + --ch-24: #acb0be; + --ch-25: #dce0e8; + --ch-26: #8c8fa1; + --ch-27: #ccd0da; + --ch-28: #ccd0da80; + --ch-29: #eff1f5e6; + --ch-30: #bcc0cc; + --ch-31: #6c6f85; + --ch-32: #5c5f77; + --ch-33: #acb0be; + } + + .dark { + --ch-0: dark; + --ch-1: #8c877d; + --ch-2: #9399b2; /* Not used */ + --ch-3: #595650; + --ch-4: #c2ebc4; + --ch-5: #f5c2e7; + --ch-6: #ff5500; + --ch-7: #ff9ecf; + --ch-8: #94e2d5; + --ch-9: #b3d9ff; + --ch-10: #ff9ecf; + --ch-11: #8c877d; + --ch-12: #ff9ecf; + --ch-13: #89dceb; + --ch-14: #f2cdcd; + --ch-15: #a6adc8; + --ch-16: #8c877d; /* highlight */ + --ch-17: #f5e0dc; + --ch-18: #1e1e2e; + --ch-19: #cdd6f412; + --ch-20: #89dceb40; + --ch-21: #3794ff; + --ch-22: #9399b240; + --ch-23: #181825; + --ch-24: #585b70; + --ch-25: #11111b; + --ch-26: #7f849c; + --ch-27: #313244; + --ch-28: #31324480; + --ch-29: #1e1e2ee6; + --ch-30: #a6adc8; + --ch-31: #585b70; + --ch-32: #45475a; + --ch-33: #bac2de; + } +} + +/* END Docskit theme */ diff --git a/app/layout.tsx b/app/layout.tsx index c9b858fe2..17b146933 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,5 @@ import "./global.css"; -import "fumadocs-ui/twoslash.css"; -import { aeonikFono, aeonikMono, inter } from "@/app/fonts/fonts"; +import { aeonik, aeonikFono, aeonikMono, inter } from "@/app/fonts"; import type { Viewport } from "next"; import { baseUrl, createMetadata } from "@/utils/metadata"; import { Provider } from "./provider"; @@ -34,20 +33,20 @@ export default function RootLayout({ return ( - Are you a Master of Clarity? + Announcing Stacks.js v7! {children}