Fill out getting started steps

Add urls.ts to centralize URL strings.
sfbrigade · Apr 11, 2024 · 57519a7 · 57519a7
1 parent 48df168
commit 57519a7
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 20 deletions.
diff --git a/src/components/FooterNav.astro b/src/components/FooterNav.astro
@@ -1,19 +1,23 @@
 ---
 import { Icon } from "astro-icon/components";
 import NavLink from "./NavLink.astro";
+import {
+	facebookURL,
+	githubURL,
+	linkedinURL,
+	meetupURL,
+	pitchProjectURL,
+	proposalsURL,
+	slackURL,
+	twitterURL
+} from "@/utils/urls";
 
 const columns = [
 	[
 		"Resources",
 		[
-			[
-				"https://docs.google.com/forms/d/e/1FAIpQLScHe7aWQ-2n3lSTU1WfcK8rhBZp8pkDGH9EcJdbQb5lqMbbzA/viewform",
-				"propose a talk",
-			],
-			[
-				"https://docs.google.com/forms/d/e/1FAIpQLSexe5qvmJ6LTiU1HcR-XAzlrgPLBudVBPK_ouHeBkFz2JVUHw/viewform",
-				"pitch a project",
-			],
+			[proposalsURL, "propose a talk"],
+			[pitchProjectURL, "pitch a project"],
 		],
 	],
 	[
@@ -28,12 +32,12 @@ const columns = [
 	[
 		"Elsewhere",
 		[
-			["https://twitter.com/sfbrigade", "twitter", true],
-			["https://www.facebook.com/codeforsanfrancisco", "facebook", true],
-			["https://www.linkedin.com/company/18115347/", "linkedin", true],
-			["https://github.com/sfbrigade/", "github", true],
-			["https://c4sf.me/slack", "slack", true],
-			["https://www.meetup.com/sfcivictech/", "meetup", true],
+			[twitterURL, "twitter", true],
+			[facebookURL, "facebook", true],
+			[linkedinURL, "linkedin", true],
+			[githubURL, "github", true],
+			[slackURL, "slack", true],
+			[meetupURL, "meetup", true],
 		],
 	],
 ] as const;

diff --git a/src/components/HeaderNav.astro b/src/components/HeaderNav.astro
@@ -1,12 +1,13 @@
 ---
 import NavLink from "./NavLink.astro";
 import NavDropdown from "./NavDropdown.astro";
+import { meetupURL, projectsURL, wikiURL } from "@/utils/urls";
 
 const routes = [
-	{ label: "Wiki", page: "https://sfbrigade.notion.site/Code-for-San-Francisco-Wiki-3ae6aaf3ad3f4b7a9caab1c291c60081" },
+	{ label: "Wiki", page: wikiURL },
 	{ label: "Get Started", page: "/get-started" },
-	{ label: "Events", page: "https://www.meetup.com/sfcivictech/" },
-	{ label: "Projects", page: "https://sfbrigade.notion.site/Current-Projects-4fefa377e1424ff0b59230b9c160e6a4" },
+	{ label: "Events", page: meetupURL },
+	{ label: "Projects", page: projectsURL },
 	{ label: "Blog", page: "/blog" },
 	{ label: "Donate", page: "/donate" },
 	{ label: "About", page: "/about",

diff --git a/src/layouts/global.css b/src/layouts/global.css
@@ -2,16 +2,17 @@
 	--pico-block-spacing: 2rem;
 	--pico-block-spacing-horizontal: 2rem;
 	--pico-block-spacing-vertical: 3rem;
+	--color-accent: rgb(236, 95, 93);
 }
 
 article {
 	margin: var(--pico-block-spacing-vertical) 0;
 }
 
 @media (min-width: 1024px) {
-  .container {
-    max-width: 900px;
-  }
+	.container {
+		max-width: 900px;
+	}
 }
 
 @media (min-width: 1280px) {

diff --git a/src/pages/get-started.astro b/src/pages/get-started.astro
@@ -1,10 +1,80 @@
 ---
 import BaseLayout from "@/layouts/BaseLayout.astro";
+import { base, meetupURL, memberFormURL, projectsURL, slackURL } from "@/utils/urls";
 ---
 
 <BaseLayout title="Get Started">
 	<p>
 		Regardless of skillset or background, anyone can contribute to their
 		community through SF Civic Tech
 	</p>
+	<ol class="steps">
+		<li>
+			<h3>Tell us about yourself</h3>
+			<p>
+				Fill out our <a href={memberFormURL}>2 minute form</a> so we can help match you with opportunities
+			</p>
+		</li>
+		<li>
+			<h3>Onboard</h3>
+			<p>
+				Get familiar with SF Civic Tech
+			</p>
+			<ol>
+				<li>
+					Read our <a href={base("/about/code-of-conduct")}>Code of Conduct</a>
+				</li>
+				<li>
+					Read over the <a href={projectsURL}>Current Projects</a>
+				</li>
+				<li>
+					Join our <a href={slackURL}>Slack</a>
+				</li>
+			</ol>
+		</li>
+		<li>
+			<h3>Attend Hack Night</h3>
+			<p>
+				We meet remotely every Wednesday to work on projects! Head over to our
+				<a href={meetupURL}>Meetup page</a> for more info.
+			</p>
+		</li>
+		<li>
+			<h3>Join a Project</h3>
+			<p>
+				Review our current portfolio listed on our <a href={projectsURL}>Projects</a> page. Join us at Hack Night or on Slack to get involved!
+			</p>
+		</li>
+	</ol>
 </BaseLayout>
+
+<style>
+	h3 {
+		margin: 0.5rem 0;
+		font-size: 1.25rem;
+		color: var(--color-accent);
+	}
+
+	ol.steps {
+		list-style: none;
+		counter-reset: item;
+		margin-top: var(--pico-block-spacing-vertical);
+	}
+
+	ol.steps > li {
+		counter-increment: item;
+		padding-left: 1rem;
+		margin-bottom: 0.5rem;
+	}
+
+	ol.steps > li::marker {
+		content: counter(item);
+		font-weight: bold;
+		font-size: 1.75rem;
+		color: var(--color-accent);
+	}
+
+	a {
+		font-weight: bold;
+	}
+</style>
diff --git a/src/utils/urls.ts b/src/utils/urls.ts
@@ -0,0 +1,14 @@
+export const projectsURL = "https://sfbrigade.notion.site/Current-Projects-4fefa377e1424ff0b59230b9c160e6a4";
+export const wikiURL = "https://sfbrigade.notion.site/Code-for-San-Francisco-Wiki-3ae6aaf3ad3f4b7a9caab1c291c60081";
+export const proposalsURL = "https://docs.google.com/forms/d/e/1FAIpQLScHe7aWQ-2n3lSTU1WfcK8rhBZp8pkDGH9EcJdbQb5lqMbbzA/viewform";
+export const pitchProjectURL = "https://docs.google.com/forms/d/e/1FAIpQLSexe5qvmJ6LTiU1HcR-XAzlrgPLBudVBPK_ouHeBkFz2JVUHw/viewform";
+export const memberFormURL = "https://c4sf.me/member";
+export const slackURL = "https://c4sf.me/slack";
+export const blogURL = "https://c4sf.me/blog";
+export const meetupURL = "https://www.meetup.com/sfcivictech/";
+export const twitterURL = "https://twitter.com/sfcivictech";
+export const githubURL = "https://github.com/sfbrigade";
+export const facebookURL = "https://www.facebook.com/sfcivictech";
+export const linkedinURL = "https://www.linkedin.com/company/sfbrigade/";
+
+export const base = (url: string) => `${url.startsWith("/") ? import.meta.env.BASE_URL : ""}${url}`;