Changelog (#254)

* add initial changelog * sidebar styling * sidebar takes all navigation entries so we gotta filter a bit * hide top bar nav when screen smol * add nav and sidebar logic * formatting * formatting * some cleanup * tweaks for CI * add stub changelog * can biome shut up now pls * use prettier in www instead of biome * update starlight * tweak mdx * fix up formatting issues
fiberplane · Sep 16, 2024 · c368848 · c368848
1 parent bba450e
commit c368848
Show file tree

Hide file tree

Showing 26 changed files with 745 additions and 377 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,3 @@
+# Changelog
+
+See the [changelog on the website](https://fiberplane.com/changelog) for a detailed overview.
diff --git a/biome.jsonc b/biome.jsonc
@@ -92,6 +92,7 @@
 
  // Client library and website related
  "dist",
+ "www/",
  ".astro",
 
  // ignore all tsconfig.json files

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/www/.prettierrc.mjs b/www/.prettierrc.mjs
@@ -1,12 +1,14 @@
 /** @type {import("prettier").Config} */
 export default {
  plugins: ["prettier-plugin-astro"],
+ useTabs: false,
+ trailingComma: "none",
  overrides: [
  {
  files: "*.astro",
  options: {
- parser: "astro",
- },
- },
- ],
+ parser: "astro"
+ }
+ }
+ ]
 };
diff --git a/www/astro.config.mjs b/www/astro.config.mjs
@@ -10,74 +10,82 @@ import rehypeAutolinkHeadings from "rehype-autolink-headings";
 export default defineConfig({
  site: "https://fiberplane.com",
  redirects: {
- "/docs": "/docs/get-started",
+ "/docs": "/docs/get-started"
  },
  experimental: {
- contentIntellisense: true,
+ contentIntellisense: true
  },
  integrations: [
  starlight({
  logo: {
  src: "@/assets/fp-logo.png",
- replacesTitle: true,
+ replacesTitle: true
  },
  title: "Fiberplane",
  description:
  "Fiberplane is an API client and a local debugging companion for Hono API.",
  social: {
  github: "https://github.com/fiberplane/fpx",
- discord: "https://discord.com/invite/cqdY6SpfVR",
+ discord: "https://discord.com/invite/cqdY6SpfVR"
  },
  sidebar: [
  {
  label: "Quickstart",
- items: ["docs/get-started"],
+ items: ["docs/get-started"]
  },
  {
  label: "Components",
- autogenerate: { directory: "docs/components" },
+ autogenerate: { directory: "docs/components" }
  },
  {
  label: "Features",
- autogenerate: { directory: "docs/features" },
+ autogenerate: { directory: "docs/features" }
  },
+ {
+ label: "nav",
+ items: [
+ { link: "/changelog", label: "Changelog" },
+ { link: "/blog", label: "Blog" },
+ { link: "/docs", label: "Docs" }
+ ]
+ }
  ],
  head: [
  {
  tag: "script",
  attrs: {
  type: "text/partytown",
  src: "https://www.googletagmanager.com/gtag/js?id=G-FMRLG4PY3L",
- async: true,
- },
+ async: true
+ }
  },
  {
  tag: "script",
  attrs: {
- type: "text/partytown",
+ type: "text/partytown"
  },
  content: `
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-FMRLG4PY3L');
- `,
- },
+ `
+ }
  ],
  components: {
  Header: "@/components/Header.astro",
  Pagination: "@/components/Pagination.astro",
  ThemeProvider: "@/components/ThemeProvider.astro",
  Sidebar: "@/components/Sidebar.astro",
- Hero: "@/components/Hero.astro",
+ Hero: "@/components/Hero.astro"
  },
  customCss: ["@/main.css"],
  expressiveCode: {
  themes: ["github-dark", "github-light"],
  styleOverrides: {
- borderRadius: "var(--border-radius)",
- },
- },
+ borderRadius: "var(--border-radius)"
+ }
+ }
  }),
  // NOTE: if we ever go to server rendering or hybrid rendering,
  // we'll need to specify manually which icon sets to include
@@ -86,19 +94,19 @@ export default defineConfig({
  sitemap(),
  partytown({
  config: {
- forward: ["dataLayer.push"],
- },
- }),
+ forward: ["dataLayer.push"]
+ }
+ })
  ],
  markdown: {
  rehypePlugins: [
  rehypeHeadingIds,
  [
  rehypeAutolinkHeadings,
  {
- behavior: "wrap",
- },
- ],
- ],
- },
+ behavior: "wrap"
+ }
+ ]
+ ]
+ }
 });
diff --git a/www/package.json b/www/package.json
@@ -9,17 +9,17 @@
  "preview": "astro preview",
  "staging": "wrangler pages deploy ./dist --env staging",
  "format": "prettier --write .",
- "lint:ci": "biome ci .",
+ "lint:ci": "prettier --check .",
  "astro": "astro"
  },
  "dependencies": {
  "@astrojs/check": "^0.9.3",
  "@astrojs/markdown-remark": "^5.2.0",
  "@astrojs/partytown": "^2.1.2",
  "@astrojs/sitemap": "^3.1.6",
- "@astrojs/starlight": "^0.26.1",
+ "@astrojs/starlight": "^0.27.1",
  "@iconify-json/lucide": "^1.1.208",
- "astro": "^4.14.5",
+ "astro": "^4.15.6",
  "astro-icon": "^1.1.1",
  "rehype-autolink-headings": "^7.1.0",
  "rollup": "^4.20.0",

diff --git a/www/src/components/Header.astro b/www/src/components/Header.astro
@@ -3,23 +3,36 @@ import Search from "@astrojs/starlight/components/Search.astro";
 import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
 import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
 import type { Props } from "@astrojs/starlight/props";
+import type { SidebarEntry } from "node_modules/@astrojs/starlight/utils/navigation";
 
-const currentPath = Astro.url.pathname;
+type NavEntry = SidebarEntry & { type: "link" };
+
+const { sidebar } = Astro.props;
+const nav = sidebar.find(
+ (entry) => entry.type === "group" && entry.label === "nav"
+) as { entries: NavEntry[] } | undefined;
+const navEntries = nav?.entries || [];
 ---
 
 <div class="header">
  <div>
  <SiteTitle {...Astro.props} />
  </div>
  <div class="right">
- <nav>
- <a href="/docs" class={currentPath.startsWith("/docs") ? "active" : ""}
- >Docs</a
- >
- <a href="/blog" class={currentPath.startsWith("/blog") ? "active" : ""}
- >Blog</a
- >
- </nav>
+ {
+ navEntries.length > 0 && (
+ <nav>
+ {navEntries.map((entry) => (
+ <a
+ href={entry.href}
+ class={Astro.url.pathname.startsWith(entry.href) ? "active" : ""}
+ >
+ {entry.label}
+ </a>
+ ))}
+ </nav>
+ )
+ }
  <Search {...Astro.props} />
  <div class="social-icons">
  <SocialIcons {...Astro.props} />
@@ -35,8 +48,14 @@ const currentPath = Astro.url.pathname;
  }
 
  nav {
- display: flex;
- gap: 1rem;
+ display: none;
+ }
+
+ @media (min-width: 800px) {
+ nav {
+ display: flex;
+ gap: 1rem;
+ }
  }
 
  nav a {

diff --git a/www/src/components/Hero.astro b/www/src/components/Hero.astro
@@ -26,7 +26,7 @@ if (image && "file" in image) {
  icon,
  link: href,
  text,
- variant,
+ variant
  }) => (
  <LinkButton
  {href}

diff --git a/www/src/components/PackageManagers.astro b/www/src/components/PackageManagers.astro
@@ -1,7 +1,7 @@
 ---
 import {
  PackageManagers as AllPackageManagers,
- type PackageManagersProps,
+ type PackageManagersProps
 } from "starlight-package-managers";
 
 type Props = PackageManagersProps;

diff --git a/www/src/components/Platforms.astro b/www/src/components/Platforms.astro
@@ -32,14 +32,14 @@ const {
  frame = "code",
  icons = true,
  platforms,
- title = undefined,
+ title = undefined
 } = Astro.props;
 const singlePlatform = platforms?.length === 1 ? platforms[0] : undefined;
 const ecFrame = frame === "terminal" ? "terminal" : "code";
 
 function getTabItemProps(platform: Platform) {
  const props: ComponentProps<typeof TabItem> = {
- label: PLATFORMS[PLATFORM_KEYS.indexOf(platform)],
+ label: PLATFORMS[PLATFORM_KEYS.indexOf(platform)]
  };
  const icon = getIcon(platform) as ComponentProps<typeof TabItem>["icon"];
  if (icons && icon) {
@@ -61,4 +61,4 @@ function getTabItemProps(platform: Platform) {
  ))}
  </Tabs>
  )
-}
+}
diff --git a/www/src/components/Sidebar.astro b/www/src/components/Sidebar.astro
@@ -2,12 +2,84 @@
 import type { Props } from "@astrojs/starlight/props";
 
 import MobileMenuFooter from "@astrojs/starlight/components/MobileMenuFooter.astro";
+import type { SidebarEntry } from "node_modules/@astrojs/starlight/utils/navigation";
 import SidebarSublist from "./SidebarSublist.astro";
 
-const { sidebar } = Astro.props;
+type NavEntry = SidebarEntry & { type: "link" };
+
+const { sidebar: sidebarAndNav } = Astro.props;
+
+const [sidebar, nav] = sidebarAndNav.reduce<[SidebarEntry[], NavEntry[]]>(
+ ([sidebar, nav], item: SidebarEntry) => {
+ if (item.label === "nav" && item.type === "group" && "entries" in item) {
+ nav = item.entries.filter(
+ (entry): entry is NavEntry => entry.type === "link"
+ );
+ } else {
+ sidebar.push(item);
+ }
+ return [sidebar, nav];
+ },
+ [[], []]
+);
 ---
 
+{
+ nav && (
+ <nav>
+ <ul>
+ {nav.map((entry) => (
+ <li>
+ <a
+ href={entry.href}
+ class={Astro.url.pathname.startsWith(entry.href) ? "active" : ""}
+ >
+ {entry.label}
+ </a>
+ </li>
+ ))}
+ </ul>
+ </nav>
+ )
+}
+
 <SidebarSublist sublist={sidebar} />
 <div class="md:sl-hidden">
  <MobileMenuFooter {...Astro.props} />
 </div>
+
+<style>
+ nav {
+ display: none;
+ }
+
+ @media (max-width: 800px) {
+ nav {
+ display: block;
+ }
+
+ ul {
+ display: grid;
+ gap: 5px;
+ padding-left: 1.5rem;
+ }
+
+ ul li {
+ list-style: none;
+ }
+
+ a {
+ text-decoration: none;
+ padding: 0.25rem 0.5rem;
+ }
+
+ a.active {
+ background-color: var(--sl-color-gray-6);
+ border-radius: var(--border-radius);
+ }
+
+ a:visited {
+ color: var(--sl-color-white);
+ }
+ }
+</style>