Giter VIP home page Giter VIP logo

p5.js-website's Introduction

Build Status

p5js website

How To Contribute

Known bugs and intended new features are tracked using GitHub issues. If you'd like to start working on an existing issue, comment on the issue that you plan to work on it so other contributors know it's being handled and can offer help. Once you have completed your work on this issue, submit a pull request (PR) against the p5.js main branch. In the description field of the PR, include "resolves #XXXX" tagging the issue you are fixing. If the PR addresses the issue but doesn't completely resolve it (ie the issue should remain open after your PR is merged), write "addresses #XXXX".

If you discover a bug or have an idea for a new feature you'd like to add, begin by submitting an issue. Please do not simply submit a pull request containing the fix or new feature without making an issue first, we will probably not be able to accept it. Once you have gotten some feedback on the issue and a go ahead to address it, you can follow the process above to add the fix or feature.

We recognize all types of contributions. This project follows the all-contributors specification. Add yourself to the p5.js repository readme by following the instructions here!

Setup

  1. Ensure Java is installed. Not installed? Head over to https://java.oracle.com
  2. Install node.js.
  3. Clone this repository.
  4. Navigate to the p5.js-website directory in the terminal and type npm install.

Running

Once you've setup the site, type npm run watch to run the website. This should open a window in your browser with the site running at http://localhost:9000.

File structure

  • See note about what to include in pull requests here.
  • src/ – All the pieces for generating the built site. Edits should be made here.
    • assets/ – All static files (imgs, css, fonts, js, p5_featured homepage sketches)
      • Note: if you make edits here you must restart the server to see your changes. To see changes immediately, you can edit the assets files in the dist directory, but need to copy and paste your updated work here for it to be saved.
    • data/ – translation files
    • templates/
      • layouts/ – default.hbs is main page template
      • pages/ – Contains each of the pages of the p5 site, these get inserted in {{> body }} tag of default layout.
      • partials/ – These are reusable pieces that can get added to any page or layout, they correspond to other {{> filename }} tags in the pages or default layout.
  • dist/ – Where the rendered files are stored, this gets generated via grunt server but does not get added to pull requests as it is auto-built online.
  • Gruntfile.js – This file contains all the tasks for using assemble and YAML to generate the final, static site. It uses the taskrunner grunt.

Tools

  • Assemble is used to build a static site out of all the layouts and yml data.
  • grunt-assemble-i18n renders a set of pages for each language specified in the gruntfile, based on the handlebars templates and yml data. There is not a lot of documentation, but this example demonstrates the functionality well.
  • assemble-contrib-permalinks allows us to customize the permalinks (file structure of the rendered static site).

Add yourself to contributors!

If you've contributed to this website (or any other part of the p5.js project), add yourself here. Instructions to do this can be found at the bottom of the section.

Etc

Externally hosted language versions

p5.js-website's People

Contributors

lmccart avatar limzykenneth avatar montoyamoraga avatar yukienomiya avatar yinhwa avatar animeshsinha1309 avatar nok avatar connieliu0 avatar muyingli avatar alexyixuanxu avatar sm7515 avatar rahulm2310 avatar jywarren avatar chellyjin avatar nedjulius avatar gabrielsroka avatar keshavg2 avatar ayushjainrksh avatar samuelal avatar outofambit avatar chtushar avatar qianqianye avatar riteshsp2000 avatar khamiltonuk avatar mathuramg avatar davidblitz avatar mayaman avatar zoyron avatar theekshanadis avatar elit-altum avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.