📚 Merge penpot/penpot-docs repository

docs/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8

docs/.eleventy.js

@@ -0,0 +1,144 @@
+const { DateTime } = require("luxon");
+const fs = require("fs");
+const pluginNavigation = require("@11ty/eleventy-navigation");
+const pluginRss = require("@11ty/eleventy-plugin-rss");
+const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const pluginAncestry = require("@tigersway/eleventy-plugin-ancestry");
+const metagen = require('eleventy-plugin-metagen');
+const pluginTOC = require('eleventy-plugin-nesting-toc');
+const markdownIt = require("markdown-it");
+const markdownItAnchor = require("markdown-it-anchor");
+const markdownItPlantUML = require("markdown-it-plantuml");
+const elasticlunr = require("elasticlunr");
+
+
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPlugin(pluginNavigation);
+  eleventyConfig.addPlugin(pluginRss);
+  eleventyConfig.addPlugin(pluginSyntaxHighlight);
+  eleventyConfig.addPlugin(pluginAncestry);
+  eleventyConfig.addPlugin(metagen);
+  eleventyConfig.addPlugin(pluginTOC, {
+    tags: ['h1', 'h2', 'h3']
+  });
+
+  eleventyConfig.setDataDeepMerge(true);
+
+  eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
+
+  eleventyConfig.addFilter("readableDate", dateObj => {
+    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat("dd LLL yyyy");
+  });
+
+  // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
+  eleventyConfig.addFilter('htmlDateString', (dateObj) => {
+    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');
+  });
+
+  // Remove trailing # in automatic generated toc, because of
+  // anchors added at the end of the titles.
+  eleventyConfig.addFilter('stripHash', (toc) => {
+    return toc.replace(/ #\<\/a\>/g, "</a>");
+  });
+
+  // Get the first `n` elements of a collection.
+  eleventyConfig.addFilter("head", (array, n) => {
+    if( n < 0 ) {
+      return array.slice(n);
+    }
+
+    return array.slice(0, n);
+  });
+
+  // Get the lowest in a list of numbers.
+  eleventyConfig.addFilter("min", (...numbers) => {
+    return Math.min.apply(null, numbers);
+  });
+
+  // Build a search index
+  eleventyConfig.addFilter("search", (collection) => {
+    // What fields we'd like our index to consist of
+    // TODO: remove html tags from content
+    var index = elasticlunr(function () {
+      this.addField("title");
+      this.addField("content");
+      this.setRef("id");
+    });
+
+    // loop through each page and add it to the index
+    collection.forEach((page) => {
+      index.addDoc({
+        id: page.url,
+        title: page.template.frontMatter.data.title,
+        content: page.template.frontMatter.content,
+      });
+    });
+
+    return index.toJSON();
+  });
+
+  eleventyConfig.addPassthroughCopy("img");
+  eleventyConfig.addPassthroughCopy("css");
+  eleventyConfig.addPassthroughCopy("js");
+
+  /* Markdown Overrides */
+  let markdownLibrary = markdownIt({
+    html: true,
+    breaks: false,
+    linkify: true
+  }).use(markdownItAnchor, {
+    permalink: true,
+    permalinkClass: "direct-link",
+    permalinkSymbol: "#"
+  }).use(markdownItPlantUML, {
+  });
+  eleventyConfig.setLibrary("md", markdownLibrary);
+
+  // Browsersync Overrides
+  eleventyConfig.setBrowserSyncConfig({
+    callbacks: {
+      ready: function(err, browserSync) {
+        const content_404 = fs.readFileSync('_dist/404.html');
+
+        browserSync.addMiddleware("*", (req, res) => {
+          // Provides the 404 content without redirect.
+          res.write(content_404);
+          res.end();
+        });
+      },
+    },
+    ui: false,
+    ghostMode: false
+  });
+
+  return {
+    templateFormats: [
+      "md",
+      "njk",
+      "html",
+      "liquid"
+    ],
+
+    // If your site lives in a different subdirectory, change this.
+    // Leading or trailing slashes are all normalized away, so don’t worry about those.
+
+    // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
+    // This is only used for link URLs (it does not affect your file structure)
+    // Best paired with the `url` filter: https://www.11ty.dev/docs/filters/url/
+
+    // You can also pass this in on the command line using `--pathprefix`
+    // pathPrefix: "/",
+
+    markdownTemplateEngine: "liquid",
+    htmlTemplateEngine: "njk",
+    dataTemplateEngine: "njk",
+
+    // These are all optional, defaults are shown:
+    dir: {
+      input: ".",
+      includes: "_includes",
+      data: "_data",
+      output: "_dist"
+    }
+  };
+};

docs/.eleventyignore

@@ -0,0 +1 @@
+README.md

docs/.gitignore

@@ -0,0 +1,118 @@
+# Distribution files
+_dist/*
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+.idea

docs/.nvmrc

@@ -0,0 +1 @@
+v20.11.1

docs/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.rulers": [
+    80
+  ]
+}

docs/.yarnrc.yml

@@ -0,0 +1,11 @@
+enableGlobalCache: true
+
+enableImmutableCache: false
+
+enableImmutableInstalls: false
+
+enableTelemetry: false
+
+httpTimeout: 600000
+
+nodeLinker: node-modules

docs/404.md

@@ -0,0 +1,17 @@
+---
+layout: layouts/home.njk
+permalink: 404.html
+eleventyExcludeFromCollections: true
+---
+# Content not found.
+
+Go <a href="{{ '/' | url }}">home</a>.
+
+{% comment %}
+Read more: https://www.11ty.dev/docs/quicktips/not-found/
+
+This will work for both GitHub pages and Netlify:
+
+* https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/
+* https://www.netlify.com/docs/redirects/#custom-404
+{% endcomment %}

docs/README.md

@@ -0,0 +1,38 @@
+# Penpot Docs
+
+Penpot documentation website.
+
+## Usage
+
+To view this site locally, first set up the environment:
+
+```sh
+# only if necessary
+nvm install
+nvm use
+# only if necessary
+corepack enable
+
+yarn install
+```
+
+And launch a development server:
+
+```sh
+yarn start
+```
+
+You can then point a browser to [http://localhost:8080](http://localhost:8080).
+
+## Tooling
+
+* [Eleventy (11ty)](https://www.11ty.dev/docs)
+* [Diagrams](https://github.com/gmunguia/markdown-it-plantuml) with
+[plantuml](https://plantuml.com). See also
+[real-world-plantuml](https://real-world-plantuml.com).
+* [Diagrams](https://github.com/agoose77/markdown-it-diagrams) with
+[svgbob](https://github.com/ivanceras/svgbob) and
+[mermaid](https://github.com/mermaid-js/mermaid).
+* [arc42](https://arc42.org/overview) template.
+* [c4model](https://c4model.com) for software architecture, and an
+[implementation in plantuml](https://github.com/plantuml-stdlib/C4-PlantUML).

docs/_data/metadata.json

@@ -0,0 +1,21 @@
+{
+  "title": "Help center",
+  "url": "https://docs.penpot.app/",
+  "description": "Design freedom for teams.",
+  "feed": {
+    "subtitle": "Penpot: design freedom for teams.",
+    "filename": "feed.xml",
+    "path": "/feed/feed.xml",
+    "id": "https://docs.penpot.app/"
+  },
+  "jsonfeed": {
+    "path": "/feed/feed.json",
+    "url": "https://docs.penpot.app/feed/feed.json"
+  },
+  "author": {
+    "name": "Penpot",
+    "email": "hello@penpot.app",
+    "url": "https://penpot.app"
+  },
+  "twitter": "@penpotapp"
+}

docs/_includes/layouts/contributing-guide.njk

@@ -0,0 +1,36 @@
+---
+layout: layouts/base.njk
+templateClass: tmpl-contributing-guide
+---
+
+{%- macro show_children(item) -%}
+  {%- for child in item | children | sorted('data.title') %}
+    {%- if loop.first -%}<ul>{%- endif -%}
+    <li>
+      <a href="{{ child.url }}">{{ child.data.title }}</a>
+      {%- if page.url.includes(child.url) -%}
+        {{ show_children(child) }}
+      {%- endif -%}
+      {%- if child.url == page.url -%}
+        {{ content | toc(tags=['h2', 'h3']) | safe }}
+      {%- endif -%}
+    </li>
+    {%- if loop.last -%}</ul>{%- endif -%}
+  {%- endfor %}
+{%- endmacro -%}
+
+<div class="main-container with-sidebar">
+  <aside id="stickySidebar" class="sidebar">
+    {%- set root = '/contributing-guide/index' | find -%}
+    <div id="toc">
+      <div class="header mobile" id="toc-title">{{ root.data.title }}</div>
+      <a class="header" href="{{ root.url }}">{{ root.data.title }}</a>
+      {{ show_children(root) }}
+    </div>
+  </aside>
+
+  <content class="main-content">
+    {{ content | safe }}
+  </content>
+
+</div>

docs/_includes/layouts/home.njk

@@ -0,0 +1,7 @@
+---
+layout: layouts/base.njk
+templateClass: tmpl-home
+---
+<div class="main-container">
+    {{ content | safe }}
+</div>

docs/_includes/layouts/plugins-home.njk

@@ -0,0 +1,27 @@
+---
+layout: layouts/base.njk
+templateClass: tmpl-plugins-guide
+---
+
+{%- macro show_children(item) -%}
+  {%- for child in item | children | sorted('data.title') %}
+    {%- if loop.first -%}<ul>{%- endif -%}
+    <li>
+      <a href="{{ child.url }}">{{ child.data.title }}</a>
+      {%- if page.url.includes(child.url) -%}
+        {{ show_children(child) }}
+      {%- endif -%}
+      {%- if child.url == page.url -%}
+        {{ content | toc(tags=['h2', 'h3']) | stripHash | safe }}
+      {%- endif -%}
+    </li>
+    {%- if loop.last -%}</ul>{%- endif -%}
+  {%- endfor %}
+{%- endmacro -%}
+
+<div class="main-container">
+  <content class="main-content plugins">
+    {{ content | safe }}
+  </content>
+
+</div>

docs/_includes/layouts/plugins-no-sidebar.njk

@@ -0,0 +1,28 @@
+---
+layout: layouts/base.njk
+templateClass: tmpl-plugins-guide
+---
+
+{%- macro show_children(item) -%}
+  {%- for child in item | children | sorted('data.title') %}
+    {%- if loop.first -%}<ul>{%- endif -%}
+    <li>
+      <a href="{{ child.url }}">{{ child.data.title }}</a>
+      {%- if page.url.includes(child.url) -%}
+        {{ show_children(child) }}
+      {%- endif -%}
+      {%- if child.url == page.url -%}
+        {{ content | toc(tags=['h2', 'h3']) | stripHash | safe }}
+      {%- endif -%}
+    </li>
+    {%- if loop.last -%}</ul>{%- endif -%}
+  {%- endfor %}
+{%- endmacro -%}
+
+<div class="main-container with-sidebar">
+
+  <content class="main-content">
+    {{ content | safe }}
+  </content>
+
+</div>

docs/_includes/layouts/plugins.njk

@@ -0,0 +1,36 @@
+---
+layout: layouts/base.njk
+templateClass: tmpl-plugins-guide
+---
+
+{%- macro show_children(item) -%}
+  {%- for child in item | children | sorted('data.title') %}
+    {%- if loop.first -%}<ul>{%- endif -%}
+    <li>
+      <a href="{{ child.url }}">{{ child.data.title }}</a>
+      {%- if page.url.includes(child.url) -%}
+        {{ show_children(child) }}
+      {%- endif -%}
+      {%- if child.url == page.url -%}
+        {{ content | toc(tags=['h2', 'h3']) | stripHash | safe }}
+      {%- endif -%}
+    </li>
+    {%- if loop.last -%}</ul>{%- endif -%}
+  {%- endfor %}
+{%- endmacro -%}
+
+<div class="main-container with-sidebar">
+  <aside id="stickySidebar" class="sidebar">
+    {%- set root = '/plugins/index' | find -%}
+    <div id="toc">
+      <div class="header mobile" id="toc-title">{{ root.data.title }}</div>
+      <a class="header" href="{{ root.url }}">{{ root.data.title }}</a>
+      {{ show_children(root) }}
+    </div>
+  </aside>
+
+  <content class="main-content">
+    {{ content | safe }}
+  </content>
+
+</div>

docs/_includes/layouts/technical-guide.njk

@@ -0,0 +1,36 @@
+---
+layout: layouts/base.njk
+templateClass: tmpl-developer-guide
+---
+
+{%- macro show_children(item) -%}
+  {%- for child in item | children | sorted('data.title') %}
+    {%- if loop.first -%}<ul>{%- endif -%}
+    <li>
+      <a href="{{ child.url }}">{{ child.data.title }}</a>
+      {%- if page.url.includes(child.url) -%}
+        {{ show_children(child) }}
+      {%- endif -%}
+      {%- if child.url == page.url -%}
+        {{ content | toc(tags=['h2', 'h3']) | stripHash | safe }}
+      {%- endif -%}
+    </li>
+    {%- if loop.last -%}</ul>{%- endif -%}
+  {%- endfor %}
+{%- endmacro -%}
+
+<div class="main-container with-sidebar">
+  <aside id="stickySidebar" class="sidebar">
+    {%- set root = '/technical-guide/index' | find -%}
+    <div id="toc">
+      <div class="header mobile" id="toc-title">{{ root.data.title }}</div>
+      <a class="header" href="{{ root.url }}">{{ root.data.title }}</a>
+      {{ show_children(root) }}
+    </div>
+  </aside>
+
+  <content class="main-content">
+    {{ content | safe }}
+  </content>
+
+</div>

docs/_includes/layouts/user-guide.njk

@@ -0,0 +1,36 @@
+---
+layout: layouts/base.njk
+templateClass: tmpl-user-guide
+---
+
+{%- macro show_children(item) -%}
+  {%- for child in item | children | sorted('data.title') %}
+    {%- if loop.first -%}<ul>{%- endif -%}
+    <li>
+      <a href="{{ child.url }}">{{ child.data.title }}</a>
+      {%- if page.url.includes(child.url) -%}
+        {{ show_children(child) }}
+      {%- endif -%}
+      {%- if child.url == page.url -%}
+        {{ content | toc(tags=['h2', 'h3']) | safe }}
+      {%- endif -%}
+    </li>
+    {%- if loop.last -%}</ul>{%- endif -%}
+  {%- endfor %}
+{%- endmacro -%}
+
+<div class="main-container with-sidebar">
+  <aside id="stickySidebar" class="sidebar">
+    {%- set root = '/user-guide/index' | find -%}
+    <div id="toc">
+      <div class="header mobile" id="toc-title">{{ root.data.title }}</div>
+      <a class="header" href="{{ root.url }}">{{ root.data.title }}</a>
+      {{ show_children(root) }}
+    </div>
+  </aside>
+
+  <content class="main-content">
+    {{ content | safe }}
+  </content>
+
+</div>

docs/contributing-guide/coc/index.njk

@@ -0,0 +1,13 @@
+---
+title: 04· Code of Conduct
+---
+
+<h1 id="coc">Code of conduct</h1>
+
+<p>As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.</p>
+<p>We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, or religion.</p>
+<p>Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.</p>
+<p>Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.</p>
+<p>This code of conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.</p>
+<p>Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.</p>
+<p>This Code of Conduct is adapted from the Contributor Covenant, version 1.1.0, available from <a href="http://contributor-covenant.org/version/1/1/0/" target="_blank">http://contributor-covenant.org/version/1/1/0/</a></p>

docs/contributing-guide/code-contributions/index.njk

@@ -0,0 +1,108 @@
+---
+title: 03· Core code contributions
+---
+
+<h1 id="code-contributions">Core code contributions</h1>
+
+<p class="main-paragraph">Details to know how to improve Penpot's core code</p>
+
+<p class="advice">
+Thinking of contributing to Penpot core but not sure where to start? We’ve made a curated selection of enhancements to help you with that. We believe that these tasks should be a great way to get started with Penpot development and quickly become an active contributor.
+<br><br>
+<a href="https://github.com/penpot/penpot/contribute" target="_blank">Here’s the list of enhancements labeled as "good first issue"</a>
+</p>
+
+<h3 id="code-contributions-techguide">Technical guide</h3>
+<p>Go to the <a href="/technical-guide">Technical guide</a> to get detailed explanations about how to get Penpot application and run it locally, to test it or make changes to it.</p>
+
+<h3 id="code-contributions-pull-requests">Pull requests</h3>
+<p>If you want propose a change or bug fix with the Pull-Request system firstly you should carefully read the <a href="#code-contributions-dco">DCO section</a> and format your commits accordingly.</p>
+<p>If you intend to fix a bug it's fine to submit a pull request right away but we still recommend to file an issue detailing what you're fixing. This is helpful in case we don't accept that specific fix but want to keep track of the issue.</p>
+<p>If you want to implement or start working in a new feature, please open a <b>question</b> / <b>discussion</b> issue for it. No pull-request will be accepted without previous chat about the changes, independently if it is a new feature, already planned feature or small quick win.</p>
+<p>If is going to be your first pull request, You can learn how from <a href="https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github" target="_blank">this free video series</a>.</p>
+<p>We will use the <code class="language-bash">easy fix</code> mark for tag for indicate issues that are easy for beginners.</p>
+
+<h3 id="code-contributions-commits">Commit message guidelines</h3>
+<p>We have very precise rules over how our git commit messages can be formatted.</p>
+<p>The commit message format is:</p>
+<pre>
+<code class="language-md">
+&lt;type&gt;  &lt;subject&gt;
+
+[body]
+
+[footer]
+</code>
+</pre>
+<p>Where type is:</p>
+<ul>
+<li><g-emoji class="g-emoji" alias="bug" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f41b.png"><img class="emoji" alt="bug" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/1f41b.png"></g-emoji> <code>:bug:</code> a commit that fixes a bug</li>
+<li><g-emoji class="g-emoji" alias="sparkles" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2728.png"><img class="emoji" alt="sparkles" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/2728.png"></g-emoji> <code>:sparkles:</code> a commit that adds an improvement</li>
+<li><g-emoji class="g-emoji" alias="tada" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f389.png"><img class="emoji" alt="tada" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/1f389.png"></g-emoji> <code>:tada:</code> a commit with new feature</li>
+<li><g-emoji class="g-emoji" alias="recycle" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/267b.png"><img class="emoji" alt="recycle" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/267b.png"></g-emoji> <code>:recycle:</code> a commit that introduces a refactor</li>
+<li><g-emoji class="g-emoji" alias="lipstick" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f484.png"><img class="emoji" alt="lipstick" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/1f484.png"></g-emoji> <code>:lipstick:</code> a commit with cosmetic changes</li>
+<li><g-emoji class="g-emoji" alias="ambulance" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f691.png"><img class="emoji" alt="ambulance" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/1f691.png"></g-emoji> <code>:ambulance:</code> a commit that fixes critical bug</li>
+<li><g-emoji class="g-emoji" alias="books" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f4da.png"><img class="emoji" alt="books" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/1f4da.png"></g-emoji> <code>:books:</code> a commit that improves or adds documentation</li>
+<li><g-emoji class="g-emoji" alias="construction" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f6a7.png"><img class="emoji" alt="construction" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/1f6a7.png"></g-emoji> <code>:construction:</code> a wip commit</li>
+<li><g-emoji class="g-emoji" alias="construction_worker" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f477.png"><img class="emoji" alt="construction_worker" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/1f477.png"></g-emoji> <code>:construction_worker:</code> a commit with CI related stuff</li>
+<li><g-emoji class="g-emoji" alias="boom" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f4a5.png"><img class="emoji" alt="boom" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/1f4a5.png"></g-emoji> <code>:boom:</code> a commit with breaking changes</li>
+<li><g-emoji class="g-emoji" alias="wrench" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f527.png"><img class="emoji" alt="wrench" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/1f527.png"></g-emoji> <code>:wrench:</code> a commit for config updates</li>
+<li><g-emoji class="g-emoji" alias="zap" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/26a1.png"><img class="emoji" alt="zap" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/26a1.png"></g-emoji> <code>:zap:</code> a commit with performance improvements</li>
+<li><g-emoji class="g-emoji" alias="whale" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f433.png"><img class="emoji" alt="whale" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/1f433.png"></g-emoji> <code>:whale:</code> a commit for docker related stuff</li>
+<li><g-emoji class="g-emoji" alias="rewind" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/23ea.png"><img class="emoji" alt="rewind" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/23ea.png"></g-emoji> <code>:rewind:</code> a commit that reverts changes</li>
+<li><g-emoji class="g-emoji" alias="paperclip" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f4ce.png"><img class="emoji" alt="paperclip" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/1f4ce.png"></g-emoji> <code>:paperclip:</code> a commit with other not relevant changes</li>
+<li><g-emoji class="g-emoji" alias="arrow_up" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2b06.png"><img class="emoji" alt="arrow_up" height="20" width="20" src="https://github.githubassets.com/images/icons/emoji/unicode/2b06.png"></g-emoji> <code>:arrow_up:</code> a commit with dependencies updates</li>
+</ul>
+<p>More info:</p>
+<ul>
+<li><a href="https://gist.github.com/parmentf/035de27d6ed1dce0b36a">https://gist.github.com/parmentf/035de27d6ed1dce0b36a</a></li>
+<li><a href="https://gist.github.com/rxaviers/7360908">https://gist.github.com/rxaviers/7360908</a></li>
+</ul>
+<p>The subject should be:</p>
+<ul>
+<li>Use the imperative mood.</li>
+<li>Capitalize the first letter.</li>
+<li>Don't put a period at the end of the subject line.</li>
+<li>Put a blank line between the subject line and the body.</li>
+</ul>
+
+<h3 id="code-contributions-dco">Developer's Certificate of Origin (DCO)</h3>
+<p>By submitting code you are agree and can certify the below:</p>
+<pre>
+<code class="language-markdown">
+Developer's Certificate of Origin 1.1
+
+By making a contribution to this project, I certify that:
+
+(a) The contribution was created in whole or in part by me and I
+    have the right to submit it under the open source license
+    indicated in the file; or
+
+(b) The contribution is based upon previous work that, to the best
+    of my knowledge, is covered under an appropriate open source
+    license and I have the right under that license to submit that
+    work with modifications, whether created in whole or in part
+    by me, under the same open source license (unless I am
+    permitted to submit under a different license), as indicated
+    in the file; or
+
+(c) The contribution was provided directly to me by some other
+    person who certified (a), (b) or (c) and I have not modified
+    it.
+
+(d) I understand and agree that this project and the contribution
+    are public and that a record of the contribution (including all
+    personal information I submit with it, including my sign-off) is
+    maintained indefinitely and may be redistributed consistent with
+    this project or the open source license(s) involved.
+</code>
+</pre>
+
+<p>Then, all your code patches (<b>documentation are excluded</b>) should contain a sign-off at the end of the patch/commit description body. It can be automatically added on adding <code class="language-bash">-s</code> parameter to <code class="language-bash">git commit</code>.</p>
+<p>This is an example of the aspect of the line:</p>
+<pre>
+<code class="language-markdown">
+Signed-off-by: Andrey Antukh <niwi@niwi.nz>
+</code>
+</pre>
+<p>Please, use your real name (sorry, no pseudonyms or anonymous contributions are allowed).</p>

docs/contributing-guide/contributing-guide.json

@@ -0,0 +1,4 @@
+{
+  "layout": "layouts/contributing-guide.njk",
+  "tags": "contributing-guide"
+}

docs/contributing-guide/index.njk

@@ -0,0 +1,47 @@
+---
+title: Contributing
+eleventyNavigation:
+  key: Contributing
+  order: 3
+---
+
+<div class="main-illus">
+  <img src="/img/home-contributing.png" alt="User guide" border="0">
+</div>
+
+<h1 id="contributing-guide">Contributing guide.</h1>
+
+<p class="main-paragraph">In this documentation you will find (almost) everything you need to know about how to contribute at Penpot.</p>
+
+<ul class="intro-sections">
+  <li>
+    <a href="/contributing-guide/reporting-bugs">
+      <h2>Reporting bugs</h2>
+      <p>Easy steps to bug hunting</p>
+    </a>
+  </li>
+  <li>
+    <a href="/contributing-guide/translations">
+      <h2>Translations</h2>
+      <p>How to become a Penpot translator</p>
+    </a>
+  </li>
+  <li>
+    <a href="/contributing-guide/code-contributions">
+      <h2>Core code contributions</h2>
+      <p>Help Penpot improve its code</p>
+    </a>
+  </li>
+  <li>
+    <a href="/contributing-guide/coc">
+      <h2>Code of conduct</h2>
+      <p>Rules, values and principles</p>
+    </a>
+  </li>
+  <li class="illus illus-libraries">
+    <a href="https://penpot.app/libraries-templates" target="_blank">
+      <h2>Libraries & templates</h2>
+      <p>Share your libraries and templates or download the ones you like.</p>
+    </a>
+  </li>
+</ul>

docs/contributing-guide/libraries-templates/index.njk

@@ -0,0 +1,15 @@
+---
+title: 05· Libraries & Templates
+---
+
+<h1 id="libraries">Libraries & templates</h1>
+
+<img src="/img/contributing-libraries.png" alt="libraries and templates"  border="0">
+
+<p>There are published Penpot files ready to use made by community members and Penpot core team members.</p>
+
+<ul>
+<li>Here you can find the complete list of <a href="https://penpot.app/libraries-templates" target="_blank">available Libraries & Templates</a>.</li>
+<li>Are you willing to contribute sharing a Penpot file with the Penpot community? Here's a <a href="https://penpot.app/how-to-contribute" target="_blank">how you can do it</a>.</li>
+<li>If you are in doubt about how to use one of these files, here you can <a href="https://penpot.app/libraries-templates#how-to-use" target="_blank">watch a video explanation</a>.</li>
+</ul>

docs/contributing-guide/reporting-bugs/index.njk

@@ -0,0 +1,23 @@
+---
+title: 01· Reporting bugs
+---
+
+<h1 id="reporting-bugs">Reporting bugs</h1>
+
+<p class="main-paragraph">Bug hunting is not difficult if you know how.</p>
+
+<h2 id="reporting-bugs-howto">How to report a bug</h2>
+
+<p>We are using <a href="https://github.com/penpot/penpot/issues" target="_blank">GitHub Issues</a> for our public bugs. We keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist.</p>
+
+<p>If you found a bug, please report it, as far as possible including:</p>
+
+<ul>
+  <li>a detailed explanation of steps to reproduce the error.</li>
+  <li>a browser and the browser version used.</li>
+  <li>a dev tools console exception stack trace (if it is available).</li>
+</ul>
+
+<p>Consider sending us an email first at <a href="mailto:support@penpot.app">support@penpot.app</a> if you discovered a bug that you'd prefer to discuss in confidence (such as a security bug).</p>
+
+<p><strong>We don't have formal bug bounty program for security reports; this is an open source application and your contribution will be recognized in the changelog.</strong></p>

docs/contributing-guide/translations/index.njk

@@ -0,0 +1,58 @@
+---
+title: 02· Translations
+---
+
+<h1 id="translations">Translations</h1>
+
+<p class="main-paragraph">Thank you for interest in contribute translating Penpot. Here you will find ways to do it.</p>
+
+<h2 id="translations-howto">How to become a Penpot translator</h2>
+<p>We are using <a href="https://hosted.weblate.org/projects/penpot/frontend/" target="_blank">Weblate</a> as translation platform, so the first thing you need to be a Penpot translator is to have a Weblate account (you can <a href="https://hosted.weblate.org/accounts/register/" target="_blank">register here</a>).</p>
+<p>To start translating at Penpot:</p>
+<ol>
+<li>Open a <a href="https://github.com/penpot/penpot/issues" target="_blank">github issue</a> giving details about the language you want to translate (language), the type of translation (new language, new translation or change an existing translation) and your Weblate user.</li>
+<li>If everything is correct we will get back to you providing you permissions to the actions needed.</li>
+<li>You also might want to take a look at the guide for <a href="https://docs.weblate.org/en/latest/user/translating.html" target="_blank">Translating using Weblate</a>.</li>
+</ol>
+
+<h2 id="translations-howto">Add a new language</h2>
+<p>To add a language that is still not among the Penpot language options:</p>
+<ol>
+<li>Go to the <a href="https://hosted.weblate.org/projects/penpot/frontend/" target="_blank">languages list</a>.</li>
+<li>Press the "Start new translation" button.</li>
+<li>Choose the language you want to translate to.</li>
+<li>Press the "Start new translation" button at the start new translation page.</li>
+<li>Start translating strings for the new language :)</li>
+</ol>
+<p><img src="/img/translations-start.png" alt="translations" /></p>
+<p><img src="/img/translations-start-translation.png" alt="translations" /></p>
+
+
+<h2 id="translations-howto">Add a new translation</h2>
+<p>To add a new translation (a string with a lacking translation for a certain language) follow the next steps:</p>
+<ol>
+<li>Go to the <a href="https://hosted.weblate.org/projects/penpot/frontend/" target="_blank">languages list</a>.</li>
+<li>Click the edit button (pencil icon) close to the name of the language where you want to add the missing translation or translations.</li>
+<li>Find and select the translation/s to complete.</li>
+<li>Complete the translation in the required input field.</li>
+<li>Press the "Save· button.</li>
+<li>Repeat the action with as many translation strings you can / you want ;)</li>
+</ol>
+<p>Saved new translations will automatically get the status "waiting for review". Our team will periodically check strings waiting for review and, if considered correct, will approve them.</p>
+<p><img src="/img/translations-lang-list.png" alt="translations" /></p>
+<p><img src="/img/translations-strings-list.png" alt="translations" /></p>
+
+
+<h2 id="translations-howto">Change an approved translation</h2>
+<p>To edit an already approved translation string follow the next steps:</p>
+<ol>
+<li>Go to the <a href="https://hosted.weblate.org/projects/penpot/frontend/" target="_blank">languages list</a>.</li>
+<li>Click the name of the language where is the translation you want to change.</li>
+<li>Click the Browse button.</li>
+<li>Find and select the translation/s to complete.</li>
+<li>Change the translation in the input field.</li>
+<li>Press the "Save" button if you have permissions.</li>
+<li>If you don't have permissions to Save you can still press "Suggest" to make a suggestion.</li>
+</ol>
+<p>Saved editions will get the status "Waiting for review". Suggestions will get the status "Approved strings with suggestions". Our team will periodically check strings waiting for review and, if considered correct, will approve them.</p>
+<p><img src="/img/translations-lang-state.png" alt="translations" /></p>

docs/css/prism-base16-monokai.dark.css

@@ -0,0 +1,92 @@
+/* Styles for syntax highlighting inside code blocks */
+
+code[class*="language-"], pre[class*="language-"] {
+	font-size: 14px;
+	line-height: 1.375;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	-moz-tab-size: 2;
+	-o-tab-size: 2;
+	tab-size: 2;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	background: #272822;
+	color: #f8f8f2;
+	max-width: 40rem;
+}
+pre[class*="language-"] {
+	padding: 1.5em 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+.token.comment, .token.prolog, .token.doctype, .token.cdata {
+	color: #75715e;
+}
+.token.punctuation {
+	color: #f8f8f2;
+}
+.token.namespace {
+	opacity: .7;
+}
+.token.operator, .token.boolean, .token.number {
+	color: #fd971f;
+}
+.token.property {
+	color: #f4bf75;
+}
+.token.tag {
+	color: #66d9ef;
+}
+.token.string {
+	color: #a1efe4;
+}
+.token.selector {
+	color: #ae81ff;
+}
+.token.attr-name {
+	color: #fd971f;
+}
+.token.entity, .token.url, .language-css .token.string, .style .token.string {
+	color: #a1efe4;
+}
+.token.attr-value, .token.keyword, .token.control, .token.directive, .token.unit {
+	color: #a6e22e;
+}
+.token.statement, .token.regex, .token.atrule {
+	color: #a1efe4;
+}
+.token.placeholder, .token.variable {
+	color: #66d9ef;
+}
+.token.deleted {
+	text-decoration: line-through;
+}
+.token.inserted {
+	border-bottom: 1px dotted #f9f8f5;
+	text-decoration: none;
+}
+.token.italic {
+	font-style: italic;
+}
+.token.important, .token.bold {
+	font-weight: bold;
+}
+.token.important {
+	color: #f92672;
+}
+.token.entity {
+	cursor: help;
+}
+pre > code.highlight {
+	outline: 0.4em solid #f92672;
+	outline-offset: .4em;
+}

docs/css/prism.css

@@ -0,0 +1,122 @@
+/**
+ * GHColors theme by Avi Aryan (http://aviaryan.in)
+ * Inspired by Github syntax coloring
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #393A34;
+	font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	font-size: .9em;
+	line-height: 1.2em;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre > code[class*="language-"] {
+	font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	background: #b3d4fc;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border: 1px solid #dddddd;
+	background-color: white;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .2em;
+	padding-top: 1px;
+	padding-bottom: 1px;
+	background: #f8f8f8;
+	border: 1px solid #dddddd;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #999988;
+	font-style: italic;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.string,
+.token.attr-value {
+	color: #e3116c;
+}
+
+.token.punctuation,
+.token.operator {
+	color: #393A34; /* no highlight */
+}
+
+.token.entity,
+.token.url,
+.token.symbol,
+.token.number,
+.token.boolean,
+.token.variable,
+.token.constant,
+.token.property,
+.token.regex,
+.token.inserted {
+	color: #36acaa;
+}
+
+.token.atrule,
+.token.keyword,
+.token.attr-name,
+.language-autohotkey .token.selector {
+	color: #00a4db;
+}
+
+.token.function,
+.token.deleted,
+.language-autohotkey .token.tag {
+	color: #9a050f;
+}
+
+.token.tag,
+.token.selector,
+.language-autohotkey .token.keyword {
+	color: #00009f;
+}
+
+.token.important,
+.token.function,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}

docs/feed/feed.njk

@@ -0,0 +1,29 @@
+---
+# Metadata comes from _data/metadata.json
+permalink: "{{ metadata.feed.path }}"
+eleventyExcludeFromCollections: true
+---
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+	<title>{{ metadata.title }}</title>
+	<subtitle>{{ metadata.feed.subtitle }}</subtitle>
+	{% set absoluteUrl %}{{ metadata.feed.path | url | absoluteUrl(metadata.url) }}{% endset %}
+	<link href="{{ absoluteUrl }}" rel="self"/>
+	<link href="{{ metadata.url }}"/>
+	<updated>{{ collections.posts | rssLastUpdatedDate }}</updated>
+	<id>{{ metadata.feed.id }}</id>
+	<author>
+		<name>{{ metadata.author.name }}</name>
+		<email>{{ metadata.author.email }}</email>
+	</author>
+	{%- for post in collections.posts | reverse %}
+	{% set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset %}
+	<entry>
+		<title>{{ post.data.title }}</title>
+		<link href="{{ absolutePostUrl }}"/>
+		<updated>{{ post.date | rssDate }}</updated>
+		<id>{{ absolutePostUrl }}</id>
+		<content type="html">{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}</content>
+	</entry>
+	{%- endfor %}
+</feed>

docs/feed/htaccess.njk

@@ -0,0 +1,6 @@
+---
+permalink: feed/.htaccess
+eleventyExcludeFromCollections: true
+---
+# For Apache, to show `{{ metadata.feed.filename }}` when browsing to directory /feed/ (hide the file!)
+DirectoryIndex {{ metadata.feed.filename }}

docs/feed/json.njk

@@ -0,0 +1,31 @@
+---
+# Metadata comes from _data/metadata.json
+permalink: "{{ metadata.jsonfeed.path }}"
+eleventyExcludeFromCollections: true
+---
+{
+  "version": "https://jsonfeed.org/version/1",
+  "title": "{{ metadata.title }}",
+  "home_page_url": "{{ metadata.url }}",
+  "feed_url": "{{ metadata.jsonfeed.url }}",
+  "description": "{{ metadata.description }}",
+  "author": {
+    "name": "{{ metadata.author.name }}",
+    "url": "{{ metadata.author.url }}"
+  },
+  "items": [
+    {%- for post in collections.posts | reverse %}
+    {%- set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata.url) }}{% endset -%}
+    {
+      "id": "{{ absolutePostUrl }}",
+      "url": "{{ absolutePostUrl }}",
+      "title": "{{ post.data.title }}",
+      "content_html": {% if post.templateContent %}{{ post.templateContent | dump | safe }}{% else %}""{% endif %},
+      "date_published": "{{ post.date | rssDate }}"
+    }
+    {%- if not loop.last -%}
+    ,
+    {%- endif -%}
+    {%- endfor %}
+  ]
+}

docs/img/caret-down.svg

@@ -0,0 +1 @@
+<svg height="500" width="500" xmlns="http://www.w3.org/2000/svg"><path d="M499.963 138.951c.92-15.98-15.647-29.97-31.334-25.607-8.65 4.13-29.786 24.567-29.786 24.567S314.235 262.451 250.29 323.039c-7.374 2.988-11.746-5.241-16.468-9.099-65.776-65.676-128.32-134.54-194.558-199.746C25.214 104.153 2.76 113.56.395 130.81c-2.132 11.186 4.678 21.436 12.904 28.266 65.465 69.318 132.004 137.627 198.04 206.412 8.141 7.657 15.294 16.969 25.014 22.61 12.025 5.093 25.682-1.092 33.082-11.041 75.378-74.274 150.948-148.38 224.898-224.07 3.303-3.903 5.912-8.78 5.63-14.036z"/></svg>