dat-ecosystem-archive / dat-foundation-website

[ DEPRECATED - More info on active projects and modules at https://dat-ecosystem.org/ ]

More info on active projects and modules at dat-ecosystem.org

---

Dat Foundation website

This is a shiny new website for the Dat Foundation! It is built on VuePress, pulls its content from this GitHub repo, is editable with Netlify CMS, and is continuously integrated with Netlify.

Development

For local development:

Install dependencies using Yarn.

yarn install

Contributing

npm run dev

Things to note:

• If you edit the VuePress config file (site/config.json) you'll have to restart the development server for any changes to take effect.

Build and deploy

To build the site:

npm run build

This repo is continuously integrated with Netlify and all commits to master will trigger a deploy.

Netlify CMS

Edit the site content at /admin with Netlify CMS!

Edit the CMS configuration in .vuepress/public/admin/config.yml

Login with Netlify Identity

This ties your contributions to your GitHub account.

Editorial Workflow

This is a layer of abstraction on top of standard Git pull requests and merges; learn more here.

Actions in Netlify UI ...	Perform these Git actions
Save draft	Commits to a new branch (named according to the pattern cms/collectionName-entrySlug), and opens a pull request
Edit draft	Pushes another commit to the draft branch/pull request
Approve and publish draft	Merges pull request and deletes branch

Content Structure

We deviated from the default VuePress content model in order to integrate Netlify CMS. Pages and Global content is stored in /site/_data as YML and imported directly into views and components as needed. This separation of data from view component is a solution to Netlify CMS occasionally overwriting template data when updating YML frontmatter via the editorial workflow. Unfortunately it makes it harder to take advantage of some of the default VuePress features, and hope that as Netlify CMS matures we can troubleshoot this.

Collections

Collections consist of objects that can be related to pages and other collection objects sitewide. Currently, the collections are People, Projects, Modules, Tags, and Events. These collections serve as a version-controlled directory of all people, projects, modules, and events related to the Dat Foundation, including how they're related to one another.

For example, before displaying a Person on the About/People page, you'd have to add them as a Person in the People collection. That Person is now represented by a single record in the People collection. Different pages can "use" that Person object via relation fields, and any changes you make to that object propagate sitewide at build.

Globals

Things that don't change often. This serves as the canonical source of truth for things like the Dat Foundation mission statement, values, etc. Also the site navigation!

Blog

The blog is a little bit different; it follows normal VuePress content structure in that it's just a directory of markdown files.

Development

For local development:

Install dependencies with npm or Yarn.

npm install

Run the development server.

npm run dev

Things to note:

• If you edit the VuePress config file (site/config.json) you'll have to restart the development server for any changes to take effect.

Build and deploy

To build the site:

npm run build

This repo is continuously integrated with Netlify and all commits to master will trigger a deploy.

dat-foundation-website's Issues

learn/protocol

Migrate the existing site to this page.

browser dat tool

How can we provide a great UX for the prompt: Create on the web in 60 seconds.

Or something less cheesy than that. Is there a browser Dat thing we can do here to get people started near instantly?

404 template

blog posts grabbing incorrect date field for slug

homepage

• featured projects
• featured blog post

Featured modules:

• 1 item displays full width; 2 display half width
• If none are chosen, the two latest are displayed

global placeholder image

global image alt text

maybe build an image component that takes an image path and an alt text value and generates a <figure> with proper alt text and role

community/forum

This is either an external link in the nav under Community or somehow built into the site. The former sounds easier at this point; Discourse is weird.

internationalization

A clear path as to how we can expand the languages offered on this site. A way to switch between them in the front end.

mobile nav

learn/tutorials

What do these look like? Who writes them?

markdown helper

build footer

How can we automatically generate this?

active state in nav

use date as identifier for history timeline items

something strange going on here; using date as the field identifier throws an error, but even that isn't a great way to sort these for easy editing 🤔

might be related to this:
decaporg/decap-cms#1051

explore/modules

What's a module versus a tool versus a project?

community/events

Event listing, without filtering; just a calendar! No event/show pages yet; that'd be V2.

content preview

explore/design

What does this page look like? Do we want a new repo that holds all of this information? I want to simplify the existing guidelines considerably.

about/foundation

This includes values, mission statement, sponsors, and consortium of projects.

filters for projects and modules

update readme

add external links to nav

blog functionality

How does the VuePress built-in functionality square with what Ghost provides?

Need to:

• Build the blog post config
• Build the blog index template
• Build the blog show template

close mobile nav when route changes

about/financials

What does this look like?

blog/show

add mission statement as site global

clean up config and fields, add helper text

breadcrumb

docs: alternate layout

the docs need to fall back to the default vuepress layout; how do we assign custom layouts for things?

about/people template

explore/projects

mobile event display

tag collection

Make a Tags collection that can be used sitewide; on the blog, for projects and modules, for people.

about/history template

meta info

open graph and twitter cards

👨‍👩‍👧‍👦 add content for people

newsletter signup

Maybe just throw this in the footer component. Need Mailchimp creds!

💻 add content for projects

🏛 add content for history timeline

search

Style search results and search box. I think VuePress has Algolia built in to handle this? Need to investigate AND decide if we even want to have search.

community/connect

Not sure if connect is the right word here. It's also updates in some of my comps. This is where the newsletter would live, so you could see old newsletters and contribute to the next one if you'd like. It's sort of like the blog but for contributors. Might need some scaffolding in terms of structure for entries; might just be multiple big piles of markdown; this depends on the format of newsletters currently.

blog/index

documentation and rationale

For the site so future contributors can edit it and see my rationale.

community/contribute

A sort of "help wanted" board with tasks people can help with. Potential features:

• People can add themselves to the list of people working on something
• People can add themselves as a contact for a task (for example, "I built a tool that does X and I want some users to implement it in their own things and give me feedback — contact me here with questions."

add values as site global

URLs without trailing slash make vuepress angry

https://www.netlify.com/docs/redirects/#trailing-slash
https://vuepress.github.io/en/plugins/clean-urls/#installation

static site generation & dat publishing

Can someone write a task that publishes changes to dat when the site is built?

community/chat

Embedded Gitter sidecar thing.