diff --git a/package-lock.json b/package-lock.json index 45f02e9..6d14349 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1556,14 +1556,6 @@ "node": ">= 8" } }, - "node_modules/@picocss/pico": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/@picocss/pico/-/pico-2.0.6.tgz", - "integrity": "sha512-/d8qsykowelD6g8k8JYgmCagOIulCPHMEc2NC4u7OjmpQLmtSetLhEbt0j1n3fPNJVcrT84dRp0RfJBn3wJROA==", - "engines": { - "node": ">=18.19.0" - } - }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.9.4", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.4.tgz", @@ -6628,9 +6620,9 @@ } }, "node_modules/vite": { - "version": "5.1.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.5.tgz", - "integrity": "sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==", + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.3.tgz", + "integrity": "sha512-UfmUD36DKkqhi/F75RrxvPpry+9+tTkrXfMNZD+SboZqBCMsxKtO52XeGzzuh7ioz+Eo/SYDBbdb0Z7vgcDJew==", "dependencies": { "esbuild": "^0.19.3", "postcss": "^8.4.35", @@ -7071,7 +7063,6 @@ "dependencies": { "@astrojs/check": "^0.4.1", "@iconify-json/fa": "^1.1.8", - "@picocss/pico": "^2.0.6", "astro": "^4.0.6", "astro-icon": "^1.0.4", "typescript": "^5.3.3" diff --git a/packages/astro/src/components/FooterNav.astro b/packages/astro/src/components/FooterNav.astro index da7dbda..abe394b 100644 --- a/packages/astro/src/components/FooterNav.astro +++ b/packages/astro/src/components/FooterNav.astro @@ -1,7 +1,8 @@ --- import { Icon } from "astro-icon/components"; +import NavLink from "./NavLink.astro"; -const routes = [ +const columns = [ [ "Resources", [ @@ -31,86 +32,65 @@ const routes = [ ["https://www.facebook.com/codeforsanfrancisco", "facebook", true], ["https://www.linkedin.com/company/18115347/", "linkedin", true], ["https://github.com/sfbrigade/", "github", true], - ["http://c4sf.me/slack", "slack", true], + ["https://c4sf.me/slack", "slack", true], ["https://www.meetup.com/sfcivictech/", "meetup", true], ], ], ] as const; -// because of annoying differences between dev and build modes, due to this -// behavior (https://github.com/withastro/astro/issues/5630), always remove -// any trailing slash so currentPage can match the pages above -const fullPath = Astro.url.pathname.replace(/\/$/, ""); -const currentPage = fullPath.slice(fullPath.lastIndexOf("/") + 1); --- - + diff --git a/packages/astro/src/components/HeaderNav.astro b/packages/astro/src/components/HeaderNav.astro index 7c2aae0..dd960cb 100644 --- a/packages/astro/src/components/HeaderNav.astro +++ b/packages/astro/src/components/HeaderNav.astro @@ -1,78 +1,50 @@ --- +import NavLink from "./NavLink.astro"; +import NavDropdown from "./NavDropdown.astro"; + const routes = [ { label: "Wiki", page: "wiki" }, - { label: "Get Started", page: "getting-started" }, - { label: "Events", page: "events" }, - { label: "Projects", page: "projects" }, - { label: "Blog", page: "blog" }, - { label: "Donate", page: "donate" }, + { label: "Get Started", page: "getting-started" }, + { label: "Events", page: "events" }, + { label: "Projects", page: "projects" }, + { label: "Blog", page: "blog" }, + { label: "Donate", page: "donate" }, { label: "About", page: "about", - pages: [ - { label: "Code of Conduct", page: "about/code-of-conduct" } - ] - } + pages: [ + { label: "Code of Conduct", page: "about/code-of-conduct" } + ] + } ]; -// because of annoying differences between dev and build modes, due to this -// behavior (https://github.com/withastro/astro/issues/5630), always remove -// any trailing slash so currentPage can match the pages above -const fullPath = Astro.url.pathname.replace(/\/$/, ""); -const currentPage = fullPath.slice(fullPath.lastIndexOf("/") + 1); --- - +
+ +
diff --git a/packages/astro/src/components/NavDropdown.astro b/packages/astro/src/components/NavDropdown.astro new file mode 100644 index 0000000..24f0dae --- /dev/null +++ b/packages/astro/src/components/NavDropdown.astro @@ -0,0 +1,41 @@ +--- +import NavLink from "./NavLink.astro"; + +interface Props { + items: { label: string; page: string }[]; +} + +const { items } = Astro.props; +--- + +
+ {items.map(({ label, page }) => ( + + {label} + + ))} +
+ + diff --git a/packages/astro/src/components/NavLink.astro b/packages/astro/src/components/NavLink.astro new file mode 100644 index 0000000..78bb5d6 --- /dev/null +++ b/packages/astro/src/components/NavLink.astro @@ -0,0 +1,32 @@ +--- +interface Props { + href: string; + class?: string; +} + + // we can destructure `class` from props, but we have to rename it so it won't + // trigger syntax errors in the JS +const { href, class: className } = Astro.props; + + // remove the base URL from the beginning of the current page so we can match + // it against the href prop, which shouldn't include any base URL. because of + // annoying differences between dev and build modes, due to this behavior + // (https://github.com/withastro/astro/issues/5630), we also have to remove + // any trailing slash so currentPage can match the href. +const currentPage = Astro.url.pathname + .replace(import.meta.env.BASE_URL, "") + .replace(/\/$/, ""); +const ariaCurrent = currentPage === href ? "page" : false; +--- + + + + + + diff --git a/packages/astro/src/components/NewsSummaryItem.astro b/packages/astro/src/components/NewsSummaryItem.astro index 684a42e..46df4fd 100644 --- a/packages/astro/src/components/NewsSummaryItem.astro +++ b/packages/astro/src/components/NewsSummaryItem.astro @@ -24,7 +24,7 @@ const postURL = "blog/" + slug; aspect-ratio: 1; background-size: cover; background-position: center; - padding: var(--block-spacing-horizontal); + padding: var(--pico-block-spacing-horizontal); overflow: hidden; position: relative; flex-direction: column; @@ -37,7 +37,7 @@ const postURL = "blog/" + slug; } article h3 { - --color: white; + --pico-color: white; font-size: 1rem; margin-bottom: 0; position: relative; diff --git a/packages/astro/src/layouts/BaseLayout.astro b/packages/astro/src/layouts/BaseLayout.astro index ddbc300..d6132a6 100644 --- a/packages/astro/src/layouts/BaseLayout.astro +++ b/packages/astro/src/layouts/BaseLayout.astro @@ -15,7 +15,5 @@ const { title } = Astro.props;
- - \ No newline at end of file + + diff --git a/packages/astro/src/layouts/Page.astro b/packages/astro/src/layouts/Page.astro index e17123b..63d05fd 100644 --- a/packages/astro/src/layouts/Page.astro +++ b/packages/astro/src/layouts/Page.astro @@ -1,5 +1,6 @@ --- import "@picocss/pico"; +import "./global.css"; interface Props { title: string; @@ -23,4 +24,3 @@ const { title } = Astro.props; - diff --git a/packages/astro/src/layouts/global.css b/packages/astro/src/layouts/global.css new file mode 100644 index 0000000..ec5aaf8 --- /dev/null +++ b/packages/astro/src/layouts/global.css @@ -0,0 +1,12 @@ +:root { + --pico-block-spacing-horizontal: 2rem; + --pico-block-spacing-vertical: 3rem; +} + +.container { + max-width: 1100px; +} + +article { + margin: var(--pico-block-spacing-vertical) 0; +}