feat: Proposal Listing Page/Index

[helmturner]

Related: #3

Proposal Pages

Individual proposals will each need their own listing on the site.

For simplicity, we'll pull the listings from markdown files. Astro has first-class support for creating pages in markdown. With the pagination and layout APIs, we should have the option down the road to wrap the markdown content for each issue with some shared ui/layout.

Each proposal should be 1 markdown page and have certain minimum required fields. All proposals should share a common subdirectory. At first we can use simple links and an index page for navigation. Voting data will be pulled from an API at runtime, but we can assume each proposal has at least the following static data:
Individual proposals will each need their own listing on the site.

As @zenlex pointed out, it probably makes more sense to just get the proposal data as JSON and pass it as props to a dynamically rendered page. My brain was just stuck in markdown-land 😅

Frontmatter fields:
JSON Schema:

type ProposalData {
	created: Date;
	expires: Date;
	type: "rfc" | "proposal";
	status: "draft" | "petition" | "accepted";
	title: string; // <varchar(48>
	summary: string; // <varchar(255)>
	description: string; // <text>
}

Content:
H2 - Title
H3 - Summary
H3 - Full Description

Tip

See below for an example you can copy

Proposal Index Page

Users should be able to easily browse proposals from a central location, which should be linked from (at least) the site's homepage. This could be as simple as a list of links to start, but could eventually include stateful proposal cards with filtering and/or search. This is the gateway to user enfranchisement, so it's important that users can find the proposals that are important to them.

Proposal Page Example

const proposal = {
  created: '2020-12-31T23:59:59',
  expires: '2021-12-31T23:59:59',
  type: 'proposal',
  state: 'draft',
  title: 'Proposal Title',
  summary:
    'This is a summary of the proposal. It should be a few sentences long, perhaps with a max length around 255 characters',
  description: `This is the full description of the proposal. It can be many paragraphs long, and should be as detailed as necessary to explain the proposal and its context. Links to other resources are encouraged.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper morbi tincidunt ornare massa eget egestas. Gravida in fermentum et sollicitudin ac. Euismod nisi porta lorem mollis aliquam ut. Fringilla phasellus faucibus scelerisque eleifend. Amet massa vitae tortor condimentum lacinia quis vel. Elit at imperdiet dui accumsan sit amet nulla. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Mattis enim ut tellus elementum sagittis vitae et. Euismod quis viverra nibh cras. Tortor posuere ac ut consequat semper.

Mi proin sed libero enim sed. Diam maecenas ultricies mi eget mauris pharetra et ultrices neque. Gravida arcu ac tortor dignissim convallis aenean et tortor. Arcu odio ut sem nulla pharetra diam sit amet. Tincidunt id aliquet risus feugiat in. Vestibulum lorem sed risus ultricies tristique nulla. Dignissim sodales ut eu sem integer vitae. Ac feugiat sed lectus vestibulum mattis ullamcorper velit. Ut sem nulla pharetra diam sit amet nisl. Diam vulputate ut pharetra sit amet aliquam id. Arcu non sodales neque sodales ut etiam. Velit scelerisque in dictum non consectetur a erat nam. Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Massa sapien faucibus et molestie ac. Laoreet sit amet cursus sit amet dictum sit amet justo.

Auctor neque vitae tempus quam. Congue eu consequat ac felis donec et odio pellentesque. Velit dignissim sodales ut eu sem integer vitae justo eget. Praesent tristique magna sit amet purus gravida quis blandit turpis. Pulvinar neque laoreet suspendisse interdum consectetur. Egestas purus viverra accumsan in nisl nisi. Diam vulputate ut pharetra sit amet aliquam id diam. Tellus rutrum tellus pellentesque eu. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Integer malesuada nunc vel risus commodo viverra maecenas. Eget egestas purus viverra accumsan in nisl. Neque gravida in fermentum et sollicitudin ac orci. Non tellus orci ac auctor. Pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Viverra vitae congue eu consequat ac felis donec. Cras pulvinar mattis nunc sed. Aliquam etiam erat velit scelerisque in dictum non consectetur. Amet purus gravida quis blandit turpis cursus in.

Sit amet mauris commodo quis. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Gravida in fermentum et sollicitudin ac orci. Sit amet tellus cras adipiscing enim. Lacus laoreet non curabitur gravida arcu ac tortor dignissim. Commodo nulla facilisi nullam vehicula ipsum. Ligula ullamcorper malesuada proin libero. Turpis egestas integer eget aliquet. Odio euismod lacinia at quis risus sed vulputate odio. Etiam dignissim diam quis enim lobortis.

Fermentum leo vel orci porta non pulvinar neque laoreet suspendisse. Lectus quam id leo in vitae turpis massa sed. Quam id leo in vitae turpis massa sed. Accumsan tortor posuere ac ut consequat. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Volutpat diam ut venenatis tellus in metus vulputate eu. Sed vulputate odio ut enim. Vitae suscipit tellus mauris a diam maecenas sed enim ut. Dignissim sodales ut eu sem integer vitae. Morbi quis commodo odio aenean sed adipiscing diam donec adipiscing. Praesent semper feugiat nibh sed. Eget aliquet nibh praesent tristique magna sit amet purus. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet.`,
};