Add all blog content

Show date and link to all posts at top of blog page.
Only show the h1 in BaseLayout.astro if it's not empty, so pages can override it.
Add title tags to the thumbnails on the blog list.

src/components/BlogListItem.astro

@@ -13,6 +13,7 @@ const {
 		data: {
 			title,
 			image,
+			image_alt = "",
 			date = dateFromSlug(slug),
 			description,
 		}
@@ -27,7 +28,10 @@ const dateString = date?.toLocaleDateString("en-US",
 
 <li>
 	{imageData &&
-		<div class="thumbnail" style={`background-image: url(${backgroundImageURL})`}></div>
+		<div class="thumbnail"
+			style={`background-image: url(${backgroundImageURL})`}
+			title={image_alt}
+		></div>
 	}
 	<div class="info">
 		<time datetime={date?.toISOString()}>{dateString}</time>
@@ -36,7 +40,7 @@ const dateString = date?.toLocaleDateString("en-US",
 	</div>
 </li>
 
-<style define:vars={{ backgroundImageURL }}>
+<style>
 	li {
 		margin: var(--pico-block-spacing-vertical) 0 0 0;
 		display: flex;

src/content/blog/2014-07-26-sf-open-referral.md

@@ -0,0 +1,42 @@
+---
+authors:
+- jason_lally
+date: '2014-07-26'
+published: true
+title: SF Open Referral
+description: Agencies and organizations create and maintain many different community resource directories. Each organization applies similar resources and effort against a shared issue, but there is no shared knowledge. Although they share similar goals and challenges, these efforts work in isolation of each other. SF Open Referral improves social service delivery through shared, open resource data.
+---
+
+## The Problem
+
+Agencies and organizations create and maintain many different community resource directories. Each organization applies similar resources and effort against a shared issue, but there is no shared knowledge. Although they share similar goals and challenges, these efforts work in isolation of each other.
+
+1. Individuals seeking help are left to navigate confusing lists of resources that may or may not lead them to what they need.
+2. Social workers and other intermediaries must master multiple lists of competing information, making it hard to connect their clients to the relevant help.
+3. Community development initiatives are left paying for new research to understand the state of their community resources.
+
+### Data - Many Locations and Formats
+
+**Where does the data live?**
+
+- internal contract management systems
+- printed resource guides
+- administration databases
+- internal PDFs
+- the minds of single employees
+
+## Opportunity - Data should be free!
+
+We see an opportunity to free this data so it can be:
+
+- published in a standardized format
+- easily accessible
+- easy to update
+- a precedent for modern referral systems
+
+And ultimately: **Deliver consistent, high quality social services to those in need!**
+
+## Additional Resources
+
+- Getting started guide
+- Mid-market pilot description

src/content/blog/2014-09-05-localfreeweb.md

@@ -0,0 +1,72 @@
+---
+authors:
+- joseph_tanigawa
+date: '2014-09-05'
+published: true
+image: "LocalFreeWebText.jpg"
+image_alt: Photo of LocalFreeWeb text message
+title: LocalFreeWeb
+description: Many organizations and institutions offer access to free, internet-enabled computers, but there is no way for someone to find these locations without being online already. In short, you need the internet to find the internet. LocalFreeWeb makes it so all you need is a cell phone.
+---
+
+If you couldn’t access the internet right now, how would you figure out where to go to get online? Maybe you would go to the library, but what if it’s closed? What if there's a long wait? Where would you go then?
+
+Many organizations and institutions offer access to free, internet-enabled computers, but there is no way for someone to find these locations without being online already. In short, you need the internet to find the internet.
+
+On August 15, Code for San Francisco, a Code for America brigade, launched <a href="http://LocalFreeWeb.org">LocalFreeWeb</a> to bring access to free, internet-enabled computers (not just Wi-Fi) to anyone who can send a text message. This effort to bring the benefits of the Web to low-income, mono-lingual, and other disadvantaged people is designed not only to give access to the Web, but also to generate interest among folks who might not know why they would use the internet in the first place. 
+
+
+
+LocalFreeWeb was born out of a PARISOMA hackathon challenge to “help City organizations and corporations get involved the Sharing Economy”. Hackathon teammates Jesse Biroscak, Rachel Stanley, and others concluded that the most valuable thing organizations and corporations could do would be to bring access to the internet to all City residents - sharing their access to the knowledge on the web. They interviewed people in a rough part of the mid-Market / SOMA neighborhood to come up with the reasons why someone who does not use the internet might ever come online. The team tested the viability of the service by posting flyers in English and Spanish at nearbybus stops, presenting the benefits of the web (results of the user research), and proposing that people text a cell phone number (Jesse’s) for more information. The enthusiastic response confirmed the demand and the hackathon team soon brought the project to the Code for San Francisco brigade team to build a first version.
+
+### How it works (summary)
+Every bus stop in San Francisco has a bus stop identification number. When someone at a bus stop sends a text message to a specific phone number (as prompted by a flyer on the bus stop), including the bus stop identification number, they will receive a text message response with the locations of the 3 closest free, internet-enabled computers, as well as the current day's hours of avaliablilty of those locations. The message response also prompts them to ask for “Free Internet” when they arrive at the location. Locations are not only sourced from an established database of community centers and libraries, but also from the crowd - anyone can add their knowledge of a free, internet-enabled computer.
+
+{% include image.html name="LocalFreeWebText.jpg" alt="Photo of LocalFreeWeb text message" %}
+
+### How it works (technical details)
+
+LocalFreeWeb was built with CartoDB and Twilio. CartoDB stores a database of the locations providing free internet, along with all the relevant data about the location, such as address, phone number, hours, and geolocation (coordinates), as well as another database of all the bus stops in SF with their Stop ID and corresponding geolocation. Twilio handles the sending and receiving of text messages. 
+
+To make these technologies work together, we created an app with Flask (a Python framework for web applications). When Twilio receives a text message from a user, the Flask app parses out the Stop ID from the message body and requests the geolocation of the Stop ID from CartoDB. With the received geolocation, the app makes another request to CartoDB asking for the three closest locations of free, internet-enabled computers to the bus stop's geolocation. Then it formats the metadata for the three closest locations into a readable text message and sends it back to the user.
+
+We use the Google Spreadsheet API to record the date, time, and Stop ID of each valid request made to the app.
+
+If you’re curious, here’s the <a href="https://github.com/sfbrigade/localfreeweb-sms-api">application backend code</a> and <a href="https://github.com/sfbrigade/localfreeweb.org/tree/gh-pages">frontend website code</a>.
+
+### Technical Challenges
+
+We discovered that the bus stop data (Stop ID) provided by the SFMTA was not stored in the database provided to the public. Not only is the database updated every three months, but Stop IDs are truncated by removing the leading digit for reasons unclear. For example, if the Stop ID at a bus stop is 13003, in SFMTA's database it will be stored as 3003. We realized this problem when we started testing the service - most of the stops weren’t in the database! Thankfully, we figured this out and made the necessary changes to the data.
+
+## Next steps!
+
+Now that we’ve built and tested this first version, we will be spreading the word to relevant City organizations and building relationships with Clear Channel Media, the company controlling the advertising space on bus shelters. Recently Allen and Joseph, Storytellers from the Brigade, enthusiastically set off with a stack of flyers and a roll of tape. They found willing recipients at the SF Library Main Branch, which will be distributing flyers to all of the City’s libraries. They also met with public housing offices and community centers to distribute the flyers to low income citizens. We currently have fliers avaliable in English, Spanish & Mandarin. We hope to soon have our fliers translated into Tagalog as well.
+
+### Plans include:
+- Distributing more flyers
+- Printing stickers
+- Creating partnerships with digital literacy organizations
+- Finalizing a partnership with Clear Channel Media
+- More outreach to relevant community organizations
+- Converting the text messaging app into at least Spanish, Mandarin & Tagalog
+- Partnering with MTA to have signs permanently placed at Wave Shelters explaining how to use our service 
+- Acquiring funding for a shortcode ie; 311 for finding 'Free Internet' locations
+
+
+### How you can help
+
+1. Go to <a href="http://LocalFreeWeb.org">LocalFreeWeb.org</a> and let us know how/if it works!
+2. Use the form on the website to add more locations
+3. Print out <a href="https://drive.google.com/file/d/0B3Rg0E6TFEMCZGRGS1BtbzZxWjg/edit?usp=sharing">fliers</a> and post them near bus stops in your neighborhood
+4. Check out the code and make suggestions
+5. Use the open source code to build a version for your city (and tell us about it!)
+
+If you’re in San Francisco and interested in helping build LocalFreeWeb, we’d love to see you at <a href="http://www.meetup.com/Code-for-San-Francisco-Civic-Hack-Night/">Code for San Francisco civic hack nights</a>. 
+
+### We need people with all types of skills:
+- Writing
+- Marketing
+- Business Development
+- Research
+- Code (Python, JavaScript, HTML, CSS)
+- User Experience and User Interface Designers

src/content/blog/2014-10-22-how-our-campaign-data-visualization-app-can-help-y.md

@@ -0,0 +1,36 @@
+---
+published: true
+title: How our Campaign Data Visualization App Can Help YOU This Election
+description: On November 4th, San Franciscans head to the polls to vote for, amongst other things, a tax on carbonated beverages (aka “Soda”). Did you know that pro-soda tax individuals and committees have raised $224,971 to pass the ordinance, while the soda industry has raised $7,700,000 to defeat it? Check out our visualizations of campaign financing.
+authors:
+- jay_rooney
+image: image.png
+image_alt: Visualization
+tags:
+  - Data Visualization
+---
+
+On November 4th, San Franciscans head to the polls to vote for, amongst other things, a tax on carbonated beverages (aka “Soda”). Did you know that pro-soda tax individuals and committees have raised $224,971 to pass the ordinance, while the soda industry has raised $7,700,000 to defeat it?
+
+To visualize that:
+
+{% include image.html name="visualization.png" alt="Supervisor Farrell 2014 Campaign Contributions" %}
+
+We got that data in a matter of seconds from the San Francisco Brigade’s Campaign Data Visualization App. You can, too.
+
+Let’s face it - whether you’re a journalist covering the election, or just a voter trying to make an informed choice, the best thing to do is “follow the money.” However, San Francisco’s campaign finance data is, to put it simply, a hot mess. If you want to decipher the data, you need to either have:
+
+* a lot of expertise
+* a lot of time
+
+Neither of which most voters - and even journalists - have, unless they’re able to devote unfathomable amounts of hours towards poring over datasets. If you’re a journalist on a deadline, or a voter trying to go about your life, this just isn’t feasible.
+
+Which is where the Data Visualization App comes in. See what’s really going on behind the scenes, who’s giving how much money to whom, and help shine a much-needed light on the often murky and labyrinthine world of campaign finance.
+
+At the very least, make an informed decision before you cast your ballot!
+
+Some other interesting findings:
+
+[Coming Soon]
+
+Find out all this, and more, before the election with the San Francisco Brigade’s Campaign Data Visualization App. Access it here: [http://election-sf.herokuapp.com/](http://election-sf.herokuapp.com/).

src/content/blog/2014-10-22-speaker-matt-arana-on-accessibility.md

@@ -0,0 +1,43 @@
+---
+authors:
+- laura_paajanen
+date: '2014-10-22'
+published: true
+title: 'Speaker: Matt Arana on Accessibility'
+description: "The SF Brigade was fortunate to get an introduction to accessibility from Matt Arana from SSB BART Group, which has been helping organizations be more accessible since 1997. Matt’s introduction to accessibility came when he was working for a tobacco company. He had an opportunity to work for SSB BART instead, but wasn’t sure if it was a good career move. Since family and faith are important to Matt, he discussed it with his aunt before they went to services."
+image: speaker.jpg
+image_alt: Matt Arana
+---
+
+The SF Brigade was fortunate to get an introduction to accessibility from [Matt Arana](https://www.ssbbartgroup.com/blog/2011/10/15/employee-spotlight-matt-arana/) from [SSB BART Group](https://www.ssbbartgroup.com/), which has been helping organizations be more accessible since 1997. Matt’s introduction to accessibility came when he was working for a tobacco company. He had an opportunity to work for SSB BART instead, but wasn’t sure if it was a good career move. Since family and faith are important to Matt, he discussed it with his aunt before they went to services. The sermon they attended was about Bartimaeus, who was blind and given sight by Jesus. It became clear to Matt that working in accessibility was his opportunity to contribute something positive to the world.
+
+Matt explained that accessibility (sometimes abbreviated as A11y) is very broad: it’s not just considering mobile, but making everything digital accessible for people with vision, cognitive, and mobility-related limitations. That means websites, web applications, PDF, video, chat, email notifications, mobile, ebooks – “anything with a 1 and a 0.” Accessibility means making sure your audience can do what they need to do on a web site. It is also the law. Section 508 states that government procured electronic and information technologies must meet certain standards.
+
+Accessibility is important because 19% of the population has some kind of disability – that’s 57 million Americans. Disabilities can be visual impairments like low vision or blindness, auditory impairments such as deafness or hearing loss, speech impairments, mobility issues, cognitive or learning disabilities, and age-related limitations.
+
+There are many kinds of assistive technologies: screen readers, refreshable braille displays, screen magnifiers, onscreen of other special keyboards, TDD/TYY and video relay devices, text-to-speech software, and word prediction software. Many organizations don’t know how to build their websites and apps to accessibility standards, or have the resources to do so. Matt shared the top ten things that he sees affect the accessibility of sites and apps.
+
+Top Ten Things that affect sites and applications
+* Missing or incorrect names
+* Navigation doesn’t follow visual design
+* Skipping over visible items or speaking invisible items
+* Not grouping visually related elements
+* Element type (link, button, etc.) is missing or incorrect
+* The state of buttons is not described
+* Headings are missing or used inconsistently
+* Missing “hints” that provide context
+* Missing closed captions or caption controls
+* Low contrast
+
+{% include image.html name="TopTenA11yIssues.jpg" alt="Top Ten A11y Issues" caption="Matt’s list of ten common issues that affect accessibility on websites and applications" %}
+
+We looked at some pages using a popular screen reader, [JAWS](http://www.freedomscientific.com/Products/Blindness/Jaws) - and saw firsthand why it’s helpful to have an option to skip to the main content rather than reading through every link at the top of a page. JAWS also highlights what is being read on the screen with a box outline, so help people with reduced vision find their spot. JAWS can be expensive, but Apple products often come with accessibility features built in, which is making more devices usable for more people. It’s a big deal to have good access on mobile devices.
+
+There are still many challenges with coding for accessibility - for example, some CMS systems get in the way of modifications for accessibility, and it’s hard to get security and privacy right with screen readers. However, there are standards for web accessibility: the [Web Content Accessibility Guidelines (WCAG)](http://www.w3.org/WAI/intro/wcag) published by the [World Wide Web Consortium (W3C)](http://www.w3.org/) is the basis for most web accessiblity standards. The WCAG outlines three levels of conformance:
+A - must do items to be accessible, such as alt text, form fields, and keyboard access
+AA - general requirement/ strongly recommended - for example, providing focus
+AAA - nice to haves that aren’t as common, such as more restrictive color contrast rules
+
+SSB BART looks at both standards like the WCAG and functional requirements. They have users with disabilities test sites to see if they can do what they’re trying to - that’s at least as important as following standards.
+
+Thanks, for the intro to A11y, Matt!