kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

guide pages (why was that so easy wtf)

Browse Source
This commit is contained in:
itsMapleLeaf
2023-03-12 15:58:47 -05:00
parent bece6c42fc
commit 6da6008d2c
21 changed files with 606 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/website/src/components/external-link.astro
View File

@@ -1,5 +1,5 @@
---
export type Props = astroHTML.JSX.AnchorHTMLProps
export type Props = astroHTML.JSX.AnchorHTMLAttributes
---
<a rel="noopener noreferrer" target="_blank" {...Astro.props}>

38
packages/website/src/components/guide-layout.astro Normal file
View File

@@ -0,0 +1,38 @@
---
import { getCollection } from "astro:content"
import Layout from "./layout.astro"
import MainNavigation from "./main-navigation.astro"
const guides = await getCollection("guides")
---
<Layout>
<div class="isolate">
<header
class="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex"
>
<div class="container">
<MainNavigation />
</div>
</header>
<main class="container mt-8 flex items-start gap-4">
<nav class="w-48 sticky top-24 hidden md:block">
<h2 class="text-2xl">Guides</h2>
<ul class="mt-3 flex flex-col gap-2 items-start">
{
guides.map((guide) => (
<li>
<a class="link" href={`/guides/${guide.slug}`}>
{guide.data.title}
</a>
</li>
))
}
</ul>
</nav>
<section class="prose prose-invert pb-8 flex-1 min-w-0">
<slot />
</section>
</main>
</div>
</Layout>

44
packages/website/src/components/layout.astro Normal file
View File

@@ -0,0 +1,44 @@
---
import "@fontsource/jetbrains-mono/500.css"
import "@fontsource/rubik/variable.css"
import packageJson from "reacord/package.json"
import bannerUrl from "~/assets/banner.png"
import faviconUrl from "~/assets/favicon.png"
import "~/styles/prism-theme.css"
import "~/styles/tailwind.css"
---
<!DOCTYPE html>
<html lang="en" class="bg-slate-900 text-slate-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={packageJson.description} />
<meta name="theme-color" content="#21754b" />
<meta property="og:url" content="https://reacord.mapleleaf.dev/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Reacord" />
<meta
property="og:description"
content="Create interactive Discord messages using React"
/>
<meta property="og:image" content={bannerUrl} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:domain" content="reacord.mapleleaf.dev" />
<meta name="twitter:url" content="https://reacord.mapleleaf.dev/" />
<meta name="twitter:title" content="Reacord" />
<meta
name="twitter:description"
content="Create interactive Discord messages using React"
/>
<meta name="twitter:image" content={bannerUrl} />
<title>Reacord</title>
<link rel="icon" href={faviconUrl} />
</head>
<body>
<slot />
</body>
</html>

13
packages/website/src/components/main-navigation.astro
View File

@@ -5,6 +5,7 @@ import {
DocumentTextIcon,
} from "@heroicons/react/20/solid"
import { Bars3Icon } from "@heroicons/react/24/outline"
import { getCollection } from "astro:content"
import AppLogo from "./app-logo.astro"
import ExternalLink from "./external-link.astro"
import MenuItem from "./menu-item.astro"
@@ -16,6 +17,7 @@ const links = [
label: "Guides",
icon: DocumentTextIcon,
component: "a",
prefetch: true,
},
{
href: "/api/",
@@ -30,6 +32,8 @@ const links = [
component: ExternalLink,
},
]
const guides = await getCollection("guides")
---
<nav class="flex justify-between items-center h-16">
@@ -43,6 +47,7 @@ const links = [
<link.component
href={link.href}
class="link inline-flex gap-1 items-center"
rel={link.prefetch ? "prefetch" : undefined}
>
<link.icon className="inline-icon" />
{link.label}
@@ -64,6 +69,12 @@ const links = [
))
}
<hr class="border-black/25" />
<!-- TODO: guide links -->
{
guides.map((guide) => (
<a href={`/guides/${guide.slug}`} rel="prefetch">
<MenuItem icon={DocumentTextIcon} label={guide.data.title} />
</a>
))
}
</Menu>
</nav>

2
packages/website/src/components/menu-item.astro
View File

@@ -9,5 +9,5 @@ export type Props = {
class="px-3 py-2 transition text-left font-medium block w-full opacity-50 inline-flex gap-1 items-center"
>
<Astro.props.icon class="inline-icon" className="inline-icon" />
{Astro.props.label}
<span class="flex-1">{Astro.props.label}</span>
</div>