jimeh/commonflow.org
1
0
Fork 0
mirror of https://github.com/jimeh/commonflow.org.git synced 2026-02-19 05:46:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: swap inline SVG icons for astro-icons library

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-11 02:27:08 +00:00
parent d2efcb01ba
commit 8205cb3690
17 changed files with 219 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/FAQSection.astro
View File

@@ -1,4 +1,5 @@
---
import { Icon } from "astro-icon/components";
import SectionHeader from "./SectionHeader.astro";
import type { FAQItem } from "../utils/parseSpecContent";
@@ -35,20 +36,11 @@ const { items } = Astro.props;
data-faq-trigger
>
<span class="pr-4">{item.question}</span>
<svg
<Icon
name="heroicons:chevron-down"
class="w-5 h-5 flex-shrink-0 transition-transform duration-200"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
data-faq-icon
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
/>
</button>
<div
class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out"

17
src/components/Header.astro
View File

@@ -1,7 +1,7 @@
---
import { Icon } from "astro-icon/components";
import VersionSelector from "./VersionSelector.astro";
import ThemeToggle from "./ThemeToggle.astro";
import GitHubIcon from "./icons/GitHubIcon.astro";
import { config } from "../config";
interface Props {
@@ -80,7 +80,7 @@ const navItems = [
hover:bg-gray-100 dark:hover:bg-neutral-800"
aria-label="View on GitHub"
>
<GitHubIcon />
<Icon name="simple-icons:github" class="w-5 h-5" />
</a>
<!-- Mobile menu button -->
@@ -91,18 +91,7 @@ const navItems = [
hover:bg-gray-100 dark:hover:bg-neutral-800"
aria-label="Toggle menu"
>
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<Icon name="heroicons:bars-3" class="w-5 h-5" />
</button>
</div>
</div>

17
src/components/Hero.astro
View File

@@ -1,7 +1,7 @@
---
import { Icon } from "astro-icon/components";
import VersionSelector from "./VersionSelector.astro";
import ThemeToggle from "./ThemeToggle.astro";
import GitHubIcon from "./icons/GitHubIcon.astro";
import { config } from "../config";
interface Props {
@@ -59,7 +59,7 @@ const { version, svgPath } = Astro.props;
hover:bg-white/50 dark:hover:bg-neutral-800/50"
aria-label="View on GitHub"
>
<GitHubIcon />
<Icon name="simple-icons:github" class="w-5 h-5" />
</a>
</div>
</div>
@@ -157,17 +157,6 @@ const { version, svgPath } = Astro.props;
hover:text-sky-600 transition-colors"
aria-label="Scroll to content"
>
<svg
class="w-6 h-6 animate-bounce-subtle"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg>
<Icon name="heroicons:arrow-down" class="w-6 h-6 animate-bounce-subtle" />
</a>
</section>

22
src/components/SpecSidebar.astro
View File

@@ -1,4 +1,5 @@
---
import { Icon } from "astro-icon/components";
import TocLink from "./TocLink.astro";
import type { TocItem } from "../utils/parseSpecContent";
@@ -37,13 +38,7 @@ const { items } = Astro.props;
transition-all duration-200"
aria-label="Jump to section"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h7"></path>
</svg>
<Icon name="heroicons:bars-3-bottom-left" class="w-5 h-5" />
</button>
<!-- Mobile TOC drawer -->
@@ -73,18 +68,7 @@ const { items } = Astro.props;
data-toc-close
aria-label="Close"
>
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
<Icon name="heroicons:x-mark" class="w-5 h-5" />
</button>
</div>

54
src/components/ThemeToggle.astro
View File

@@ -1,5 +1,5 @@
---
// Theme toggle component - cycles through light, dark, and auto (system) modes
import { Icon } from "astro-icon/components";
---
<div class="relative group">
@@ -12,55 +12,21 @@
hover:bg-gray-100 dark:hover:bg-neutral-800"
aria-label="Toggle theme"
>
<!-- Sun icon (shown when theme is light) -->
<svg
<Icon
name="heroicons:sun"
data-theme-icon="light"
class="hidden w-5 h-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343
6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16
12a4 4 0 11-8 0 4 4 0 018 0z"
></path>
</svg>
<!-- Moon icon (shown when theme is dark) -->
<svg
/>
<Icon
name="heroicons:moon"
data-theme-icon="dark"
class="hidden w-5 h-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003
9.003 0 008.354-5.646z"
></path>
</svg>
<!-- Auto/System icon (shown when theme is auto) -->
<svg
/>
<Icon
name="heroicons:computer-desktop"
data-theme-icon="auto"
class="hidden w-5 h-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2
2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
></path>
</svg>
/>
</button>
<!-- Tooltip -->
<div

16
src/components/VersionSelector.astro
View File

@@ -1,4 +1,6 @@
---
import { Icon } from "astro-icon/components";
interface Props {
currentVersion: string;
versions: string[];
@@ -21,19 +23,11 @@ const { currentVersion, versions } = Astro.props;
hover:border-sky-600 hover:text-gray-950 dark:hover:text-neutral-50"
>
<span>v{currentVersion}</span>
<svg
<Icon
name="heroicons:chevron-down"
data-arrow-icon
class="w-3.5 h-3.5 transition-transform duration-150"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"></path>
</svg>
/>
</button>
<!-- Dropdown menu -->

14
src/components/icons/GitHubIcon.astro
View File

@@ -1,14 +0,0 @@
---
interface Props {
class?: string;
}
const { class: className = "w-5 h-5" } = Astro.props;
---
<svg class={className} fill="currentColor" viewBox="0 0 24 24">
<path
fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd"></path>
</svg>