-
Virtual Civic Hack Night
-
+
+
+
Virtual Civic Hack Night
+
Not just for techies, success means having volunteers from all across our community!
-
- All of our meetings are currently remote. Everyone is welcome!
+
+ Everyone is welcome!
-
- Every Wednesday at 6:30pm Pacific
+
+ Every Wednesday at 6:30pm Pacific
Join us on Zoom
- https://c4sf.me/zoom
+ https://c4sf.me/zoom
-
+
+
-
-
diff --git a/src/components/HeaderLogo.astro b/src/components/HeaderLogo.astro
index 50e615a..72e25f0 100644
--- a/src/components/HeaderLogo.astro
+++ b/src/components/HeaderLogo.astro
@@ -4,45 +4,7 @@ import logo from "@/assets/brand/logo.svg";
import logoType from "@/assets/brand/logoType.svg";
---
-
-
-
- formerly Code for San Francisco
-
+
+
-
-
diff --git a/src/components/HeaderNav.astro b/src/components/HeaderNav.astro
index 034fd2a..e087d0c 100644
--- a/src/components/HeaderNav.astro
+++ b/src/components/HeaderNav.astro
@@ -1,163 +1,100 @@
---
+import HeaderLogo from "./HeaderLogo.astro";
import NavLink from "./NavLink.astro";
-import NavDropdown from "./NavDropdown.astro";
import {
meetupURL,
getStartedURL,
aboutURL,
blogURL,
- codeOfConductURL,
donateURL,
projectsURL,
} from "@/utils/urls";
-import HeaderLogo from "./HeaderLogo.astro";
+const activeClass = "text-muted relative after:content-[''] after:absolute after:left-0 after:top-[calc(1em+.2rem)] after:w-2 after:h-1 after:bg-primary";
const routes = [
- { label: "Get Started", page: getStartedURL },
- { label: "Events", page: meetupURL },
- { label: "Projects", page: projectsURL },
- { label: "Blog", page: blogURL },
- { label: "Donate", page: donateURL },
- { label: "About", page: aboutURL,
- pages: [
- { label: "Code of Conduct", page: codeOfConductURL }
- ]
- }
+ { label: "Get Started", href: getStartedURL },
+ { label: "Events", href: meetupURL },
+ { label: "Projects", href: projectsURL },
+ { label: "Blog", href: blogURL },
+ { label: "About", href: aboutURL },
+ { label: "Donate", href: donateURL, highlight: true }
];
---
-
-
-
-
-
-
- {routes.map(({ label, page, pages }) => (
+
+
+
+
+
+
+
+ {routes.map((route) => (
-
- {label}
+
+ {route.label}
- {!!pages?.length &&
-
))}
+
+
-
+ });
+
diff --git a/src/components/HomeSection.astro b/src/components/HomeSection.astro
index 393915c..c79665d 100644
--- a/src/components/HomeSection.astro
+++ b/src/components/HomeSection.astro
@@ -1,25 +1,23 @@
---
+import TagOrnament from "./TagOrnament.astro";
+
interface Props {
title: string;
id?: string;
+ showOrnament?: boolean;
}
-const { title, id } = Astro.props;
+const { title, id, showOrnament = true } = Astro.props;
---
-
- {title}
-
+
+ {title}
+
+ {showOrnament && (
+
+
+ )}
-
-
diff --git a/src/components/NavLink.astro b/src/components/NavLink.astro
index e550e25..2f6f681 100644
--- a/src/components/NavLink.astro
+++ b/src/components/NavLink.astro
@@ -4,11 +4,17 @@ import { base } from "@/utils/urls";
interface Props {
href: string;
class?: string;
+ activeClass?: 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;
+const {
+ href,
+ class: className,
+ activeClass,
+// activeClass = "text-muted decoration-inherit cursor-default pointer-events-none",
+} = Astro.props;
const baseURL = import.meta.env.BASE_URL.replace(/\/$/, "");
// 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
@@ -22,15 +28,14 @@ const currentPage = Astro.url.pathname
// aria-current="false" isn't added to the anchor
const ariaCurrent = currentPage === href ? "page" : undefined;
---
-
-
-
+
-
-
diff --git a/src/components/NewsSummary.astro b/src/components/NewsSummary.astro
index 27aeb51..9f3f39c 100644
--- a/src/components/NewsSummary.astro
+++ b/src/components/NewsSummary.astro
@@ -1,12 +1,23 @@
---
-import NewsSummaryItem from "@/components/NewsSummaryItem.astro";
-import HomeSection from "@/components/HomeSection.astro";
import { getBlogPosts } from "@/content";
+import NewsSummaryItem from "./NewsSummaryItem.astro";
+import BigText from "./BigText.astro";
+import TagOrnament from "./TagOrnament.astro";
const posts = await getBlogPosts();
const recentPosts = posts.slice(0, 3);
---
-
- {recentPosts.map((post) =>
+
+
+
+ In the News
+
+
+
+ {recentPosts.map((post) =>
+
+
+
diff --git a/src/components/NewsSummaryItem.astro b/src/components/NewsSummaryItem.astro
index 0cc15ad..21adcc6 100644
--- a/src/components/NewsSummaryItem.astro
+++ b/src/components/NewsSummaryItem.astro
@@ -19,73 +19,22 @@ const {
} = Astro.props;
const imageData = image && await getBlogImage(image);
const backgroundImageURL = imageData ? imageData.src : "";
-const postURL = "blog/" + id;
+const postURL = "/blog/" + id;
const dateString = formatShortMDY(date);
---
-
+
{ !imageData &&
-
-
- {dateString}
- {title}
+
+
+ }
+
+
+ {dateString}
+ {title}
-
-
diff --git a/src/components/OptionalAnchor.astro b/src/components/OptionalAnchor.astro
index c595ae0..82858c7 100644
--- a/src/components/OptionalAnchor.astro
+++ b/src/components/OptionalAnchor.astro
@@ -2,12 +2,13 @@
interface Props {
href?: string;
title?: string;
+ class?: string;
}
-const { href, title } = Astro.props;
+const { href, title, class: className } = Astro.props;
---
{href
- ?
-
-
- {thumbnail && isExternal ? (
-
-
-
-
-
- {name}
-
-
-
- {/* descriptionHTML is formatted as a tag */}
-
+
+ {thumbnail && isExternal ? (
+
+
+ )}
+
+
+
+
+
+ {name}
+
+
+
+ {/* descriptionHTML is formatted as a tag */}
+
Tech stack
+ {technologies.join(", ")}
+ }
- {technologies &&
- Tech stack
- {technologies.join(", ")}
+
+ {(slack && status !== "completed") &&
+
+ {slack.name}
+
}
-
-
+ {website &&
+
+ {cleanWebsite(website)}
+
+ }
+
-
-
diff --git a/src/components/TagOrnament.astro b/src/components/TagOrnament.astro
new file mode 100644
index 0000000..b1d430a
--- /dev/null
+++ b/src/components/TagOrnament.astro
@@ -0,0 +1,18 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface Props {
+ color?: string;
+}
+
+const { color } = Astro.props;
+---
+
+
+
-
-
diff --git a/src/components/TeamMember.astro b/src/components/TeamMember.astro
index 0b64dd9..e1a6a48 100644
--- a/src/components/TeamMember.astro
+++ b/src/components/TeamMember.astro
@@ -18,55 +18,21 @@ const filename = name
const teamImage = image ?? await getImageAsset(`/src/assets/team/${filename}.webp`);
---
-
+
{teamImage
?
- {name}
- {title}
+ {name}
+ {title}
-
-
diff --git a/src/components/WelcomeList.astro b/src/components/WelcomeList.astro
new file mode 100644
index 0000000..6df2b21
--- /dev/null
+++ b/src/components/WelcomeList.astro
@@ -0,0 +1,120 @@
+---
+interface Props {
+ volunteers?: string[];
+}
+
+const { volunteers = ["developers", "designers"] } = Astro.props;
+---
+
+
+
We are a welcoming and inclusive volunteer group of
+
+
who use creative technology to address civic and social problems.
+
+
{header &&
- {header} }
+ {header} }
{pageTitle}
-
+
SF Civic Tech is a group of people, first and foremost. We also call ourselves
@@ -41,14 +42,14 @@ const minutes = await getMinutes();
Alliance of Civic Technologists .
- Meet the Board
+ Meet the Board
Minutes of Quarterly Board Meetings
+ Minutes of Quarterly Board Meetings
-
-
-
diff --git a/src/pages/beta/index.astro b/src/pages/beta/index.astro
deleted file mode 100644
index f38cb93..0000000
--- a/src/pages/beta/index.astro
+++ /dev/null
@@ -1,68 +0,0 @@
----
-import { Image } from "astro:assets";
-import BaseLayout from "@/layouts/BaseLayout.astro";
-import Card from "@/components/Card.astro";
-import CodeSummary from "@/components/CodeSummary.astro";
-import NewsSummary from "@/components/NewsSummary.astro";
-import HackNightHero from "@/components/HackNightHero.astro";
-import { newsletterURL, pitchProjectURL, slackURL } from "@/utils/urls";
-import propose from "@/assets/home/lightbulb.png";
-import chat from "@/assets/home/chat.png";
-import newsletter from "@/assets/home/megaphone.png";
----
-
-
-
- We are a welcoming and inclusive volunteer group of developers, designers,
- data geeks, and citizen activists who use creative technology to solve civic
- and social problems.
-
-
- Get Started
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 60877a7..501e778 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -8,7 +8,7 @@ const posts = await getBlogPosts();
---
-
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index 95cf7ca..6019104 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -2,7 +2,6 @@
import { Image } from "astro:assets";
import { render } from "astro:content";
import BaseLayout from "@/layouts/BaseLayout.astro";
-import NavLink from "@/components/NavLink.astro";
import { getImageAsset, formatShortMDY } from "@/utils";
import { getBlogPosts } from "@/content";
@@ -45,29 +44,18 @@ const meta = {
title={title}
header=""
meta={meta}
+ mainClass="max-w-8col mx-auto"
>
- {title}
-
+
{title}
+
{dateString}
-
All posts
+
All posts
{imageData &&
-
+
}
-
+
+
-
-
diff --git a/src/pages/donate.astro b/src/pages/donate.astro
index 965c37c..9356e29 100644
--- a/src/pages/donate.astro
+++ b/src/pages/donate.astro
@@ -3,19 +3,19 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
---
-
+
SF Civic Tech members meet every week to make our community and government
better. Every hack night, talk, workshop, event, and project is organized
100% by volunteers.
-
+
We are supported by generous sponsors and individuals. Help us continue to
do this work through a tax-deductible donation on our Open Collective page.
-
-
+
+
Donate Now!
diff --git a/src/pages/get-started.astro b/src/pages/get-started.astro
index 7d51125..a0e56c3 100644
--- a/src/pages/get-started.astro
+++ b/src/pages/get-started.astro
@@ -2,39 +2,37 @@
import BaseLayout from "@/layouts/BaseLayout.astro";
import GetStartedStep from "@/components/GetStartedStep.astro";
import { base, meetupURL, memberFormURL, projectsURL, slackURL, codeOfConductURL } from "@/utils/urls";
-import about from "@/assets/get-started/about.webp";
-import onboard from "@/assets/get-started/onboard.webp";
-import attend from "@/assets/get-started/attend.webp";
-import join from "@/assets/get-started/join.webp";
const meta = {
description: "Get started with SF Civic Tech. We're here to help you get involved.",
- image: onboard.src,
};
---
-
-
- Regardless of skillset or background, anyone can contribute to their
- community through SF Civic Tech
-
-
-
+
+
+
+ Tell us
+
Fill out our 2 minute form so we can help match you with opportunities
-
-
-
+
+
+
+ On
+
+
+
Read our Code of Conduct
@@ -45,33 +43,28 @@ const meta = {
-
+
+
+
+ Attend
+
We meet remotely every Wednesday to work on projects! Head over to our Meetup for more details
-
+
+
+
+ Join
+
Review our current portfolio listed on our Projects page. Join us at Hack Night or on Slack to get involved!
-
-
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a82dc3b..31f6200 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,72 +1,113 @@
---
-import { Image } from "astro:assets";
import BaseLayout from "@/layouts/BaseLayout.astro";
-import Card from "@/components/Card.astro";
import CodeSummary from "@/components/CodeSummary.astro";
import NewsSummary from "@/components/NewsSummary.astro";
-import HackNightHero from "@/components/HackNightHero.astro";
+import BigText from "@/components/BigText.astro";
+import Button from "@/components/Button.astro";
+import WelcomeList from "@/components/WelcomeList.astro";
import { newsletterURL, pitchProjectURL, slackURL } from "@/utils/urls";
-import propose from "@/assets/home/lightbulb.png";
-import chat from "@/assets/home/chat.png";
-import newsletter from "@/assets/home/megaphone.png";
+
+const ButtonClass = `
+ transition
+ duration-300
+ ease-in-out
+ underline-offset-[.2rem]
+ underline
+ decoration-primary/0
+ hover:decoration-primary/80
+`;
+const Volunteers = [
+ "developers",
+ "designers",
+ "data geeks",
+ "citizen activists",
+ "bus riders",
+ "learners",
+ "user researchers",
+ "cyclists",
+ "community builders",
+ "civic activists",
+ "teachers",
+ "project managers",
+];
---
-
-
- We are a welcoming and inclusive volunteer group of developers, designers,
- data geeks, and citizen activists who use creative technology to solve civic
- and social problems.
-
-
- Get Started
-
+
+
+
+ SF
-
+
+
-
-
-
-
-
-
-
-
+
+
+ Every
-
+
+ Virtual Civic Hack Night
+ Not just for techies, success means having volunteers from all across
+ our community.
+ Everyone is welcome!
+
+
+
+
+
+
+ Join the
+
+
+
+
+ Our Slack workspace is the main hub for communication and collaboration. Introduce yourself!
+
+ Join
+
+
+
-
+
+
+
+ Stay
+
+
+
+ Sign up for our newsletter to stay updated on events, projects, and other announcements.
+
+ Subscribe
+
+
+
+
+
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
index 46c3373..a09569d 100644
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -1,11 +1,21 @@
---
import BaseLayout from "@/layouts/BaseLayout.astro";
+import type { CollectionEntry } from "astro:content";
import ProjectSummaryItem from "@/components/ProjectSummaryItem.astro";
+import BigHeading from "@/components/BigHeading.astro";
import { getProjects } from "@/content";
+// add the groupBy polyfill if needed
import "@/utils/groupBy";
+const Sections = [
+ ["active", "Active"],
+ ["inactive", "Inactive"],
+ ["completed", "Completed"],
+];
+
const projects = await getProjects();
-const projectsByStatus = Object.groupBy(projects, (project) => project.data.status);
+const projectsByStatus: Record[]> =
+ Object.groupBy(projects, (project) => project.data.status);
const meta = {
description: "Civic tech projects by, and for, San Francisco residents",
};
@@ -15,42 +25,28 @@ const meta = {
header="Projects"
meta={meta}
>
- All projects built by SF Civic Tech are:
-
-
- Open source
- Volunteer-driven
- Not-for-profit
- In service of the public good
-
-
- {projectsByStatus.active?.length &&
- Active projects
-
-
- {projectsByStatus.active.map((project) => (
-
- }
-
- {projectsByStatus.inactive?.length &&
- Inactive projects
-
-
- {projectsByStatus.inactive?.map((project) => (
-
- }
-
- {projectsByStatus.completed?.length &&
- Completed projects
-
-
diff --git a/src/react/GitHubEvents/EventProcessors.tsx b/src/react/GitHubEvents/EventProcessors.tsx
index ba5ea5f..0c22e26 100644
--- a/src/react/GitHubEvents/EventProcessors.tsx
+++ b/src/react/GitHubEvents/EventProcessors.tsx
@@ -1,3 +1,11 @@
+// if we don't specify a font-weight: 700 for
, it'll default to 900,
+// which makes Barlow Condensed look too bold and crunchy
+const Message = (props: { label: string, action: string, text: string }) => (
+ <>
+ {props.label} {props.action}: {props.text}
+
+);
+
export const EventProcessors = [
{
type: "PushEvent",
@@ -41,7 +49,7 @@ export const EventProcessors = [
repo,
username: actor.login,
avatar: actor.avatar_url,
- message: <>PR {action}: {pull_request.title},
+ message: Issue {action}: {issue.title},
+ message:
-
- {username}
+
+ {username}
- {message}
-
- {repo}
+
+ {message}
+
+
+ {repo}
(
-
-
+
);
@@ -23,18 +24,13 @@ export default function GitHubEvents({
const [eventsPromise] = useState(() => getRecentEvents(org));
const handleError = () => {
- const section = document.getElementById(sectionID);
+ const section = sectionID ? document.getElementById(sectionID) : null;
if (section) {
- // if there's some sort of error when fetching GitHub events, then just
- // hide the Astro section that contains this component, since it's not
- // critical to the site, and it's better than showing a broken component
section.style.display = "none";
}
};
- // the Suspense component will show the Loader fallback until the eventsPromise
- // resolves and the GitHubEventsList component renders
return (
onClick(direction)}
>
+
{canScrollLeft &&
}
-
+
{events.map((event) =>
{
- const key = event?.id;
-
- if (!event || eventKeys.has(key)) {
- // filter out the events that didn't match any of the processors or that
- // we've already seen
+ .filter((event: GitHubEvent | null): event is GitHubEvent => {
+ if (!event || eventKeys.has(event.id)) {
+ // filter out nulls or events that we've already seen
return false;
}
- eventKeys.add(key);
+ eventKeys.add(event.id);
return true;
});
diff --git a/src/react/GitHubEvents/icons.tsx b/src/react/GitHubEvents/icons.tsx
index 06cec07..f82ad07 100644
--- a/src/react/GitHubEvents/icons.tsx
+++ b/src/react/GitHubEvents/icons.tsx
@@ -1,3 +1,4 @@
+
export const LeftArrow = () => (