New ml5 website

Description

This is the experimental repo for a ml5 website redesign! ml5.js is a library for beginners and creative coders. We want to create a website that is usable, embeds concepts around critical ML research, and can be easily adapted as the project grows.

See below for our roadmap and how to get involved in the project.

Road Map

Here is what we are currently working on:

• Creating a centralized reference page

  We want to create one documentation page that lists all of the objects in the library and their methods (see p5.js for reference). When users click on a method, it should link to example pages with contain more of an explanation, code with details, and demo for how to use.

• Fleshing Out Tutorials

  The tutorials page will contain step-by-step information for how to create projects using ml5.js. It will include videos and more in-depth text, and will be an opportunity to pull together projects that use multiple objects, as well as a chance to fold in topics related to ethics and more critical situatings of ml technologies.

  We also want to find a way of tagging tutorials with their level of difficulty/

• Glossary

  We want to revisit the glossary, and make sure that we only define terms that people coding with ml5.js would come across while using the examples and references on the site. With this in mind, we are planning on building the glossary after we've worked out the reference and tutorials pages.

  We also plan to have a tooltip glossary function, so that when people mouseover over a word that they don't know, the definition (maybe pulling from the glossary page), the definition will show up on hover.

ml5.js website 2.0

This repo contains ml5.js website 2.0 that is built with Gatsby, and Netlify CMS: Preview Link.

It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.

Updating Instructions

markdown source files

• docs/index.md: home page content
• docs/community/: Experiments, currently feature image doesn't support gif and svg files
• docs/about.md: about page content

markdown templates

• community post markdown template

React pages

• src/pages: pages(routes) that serve as a collective page of a group of child pages, ex. reference collective page, community collective page, tag collective page
• src/templates: serve as the layout template for single markdown files

Assets

• docs/assets: markdown file assets, use relative path ../assets/ or ./assets/ to embed in markdown files.
• src/img: site assets, logos, social platform icons
• static/img(depracated): images that used in templates

Prerequisites

• Node (I recommend using v8.2.0 or higher)
• Gatsby CLI

Access Locally

$ git clone https://github.com/[GITHUB_USERNAME]/[REPO_NAME].git
$ cd [REPO_NAME]
$ yarn / npm i
$ yarn start / npm run start

To test the CMS locally, you'll need run a production build of the site:

$ yarn build / npm run build
$ yarn serve / npm run serve

Setting up the CMS

Follow the Netlify CMS Quick Start Guide to set up authentication, and hosting.

Running Netlify CMS

$ netlify dev # or ntl dev

Contributors

• See: ml5 contributors