Coder Social home page Coder Social logo

blueprints's Introduction

Usage

Enter the subdirectory with all the 11ty config:

cd .app

Install 11ty nd dependencies:

npm i

Run the development server:

npm run dev

Static site builds to the .app/dist folder which is ignored by GIT

Organization

This folder contains the templates and the content to generate the different pages from the Blueprints summary website.

index.njk

This file contains the home page of the project with automatic roadmap generation.

Roadmap

The roadmap appearing on the home page is automatically generated as a mermaid.js graph using the metadata of the different pages. For instance, the document/recommendations/contact_verification.md page contains the following metadata:

tags: roadmap
id: contact-verification
linkto: [reduce-trust, secret-sharing, revocation]
  • tags: roadmap includes the generated page in the roadmap’s 11ty collection, in practice creating the node in the roadmap.
  • id: contact-verification specify the id of the node, used to link other nodes to it.
  • linkto: [reduce-trust, secret-sharing, revocation] specify the ids of the nodes which the “contact verification” node links to.

Pages

Pages are markdown (.md) files containing… the content of the file.

Their metadata contains information that serves multiple purposes, as shown in the roadmap section above:

  • title: the title of the page.
  • Right sidebar: some of these metadata are used to populate the sidebar:
    • author: the author of the page.
    • authors: the authors of the page if many, in a YAML array.
    • date: the publication date (in ISO-8601 format: YYYY-mm-dd) of the page that will be converted in dd-mm-YYYY in the sidebar.
    • revision: the version number of the document.
    • pdf: the absolute path from the root of this Git repository of a related portable document file. More information available below.
    • showtoc: a Boolean value specifying whether the table of content should be generated and included in the sidebar.
    • comment: extra comments to be added.

Security recommendations

In document/recommendations/, the pages are also markdown files, including the term property in their metadata indicating if it is a short, medium or long term recommendation.

User stories

As user stories follow the same template, they are generated as such in the yaml header of the markdown files.

For instance, in document/user-stories/delegated-upload-quotas.md:

category: Honest user stories
[…]
goal: people can submit images/files as part of their response
title: Delegated upload quotas
what: add an upload question to my form
who: registered form author

Renders as

As a registered form author, I want to add an upload question to my form so that people can submit images/files as part of their response.

The values common to every user story are:

  • category: Honest user stories: indicates to 11ty that the file is a user story.
  • title: indicates the title of the user story that appears on top of the user story page.
  • who: the kind of user, appears as “As [who],”.
  • what: what the user wants to do, renders as “I want to [what]”.

Then the last part of the sentence is defined by one of these properties:

  • goal: renders as “so that [goal].”
  • why: renders as “because [why]”.
  • problem: renders as “but [problem]”.
  • solution: renders as “so I [solution]”.

An extra part can be added using the inline property to be added as is at the end of the sentence.

More fields can be added in the extra property and only appear in the user story page (and not the listing).

These are rendered verbatim except for the following formatted sections:

  • issues: GitHub issues related to the user story, it requires two field to be rendered properly:
    • reference: the GitHub reference in the issue list.
    • title: the title of the issue that will appear in the link.
  • acceptance criteria: the acceptance criteria to mark an user story as “solved“, it needs the following fields:
    • title: the name of the criterion.
    • done: a boolean value that indicates if the issue is solved or not (ignored for the moment).

Portable documents

Portable document files can be linked to a page and will appear in the right panel.

They must appear in the _assets/ directory at their right location and this location should be listed in the pdf property in the yaml header of the page.

For example, in document/whitepaper.md:

pdf: /_assets/document/whitepaper/main.pdf

blueprints's People

Contributors

chouhartem avatar davidbenque avatar dependabot[bot] avatar mathilde-cryptpad avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

chouhartem

blueprints's Issues

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.