Merge branch 'main' into patch-1

_includes/layouts/base.njk

@@ -49,6 +49,7 @@
         {%- for entry in collections.all | eleventyNavigation %}
           <li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}"><a href="{{ entry.url | url }}">{{ entry.title }}</a></li>
         {%- endfor %}
+          <li class="nav-item"><a href="https://community.penpot.app/c/faq/17">FAQs</a></li>
         </ul>
         <div class="search">
           <label for="search-field">Search</label>
@@ -87,7 +88,7 @@
           <li><a href="/user-guide">User guide</a></li>
           <li><a href="/contributing-guide">Contributing guide</a></li>
           <li><a href="/technical-guide">Technical guide</a></li>
-          <li><a href="/faqs">FAQs</a></li>
+          <li><a href="https://community.penpot.app/c/faq/17">FAQs</a></li>
         </ul>
         <ul class="footer-block">
           <li><a href="https://penpot.app/#project">The Project</a></li>

index.njk

@@ -17,10 +17,10 @@ eleventyNavigation:
       <p>Everything you need to know about how Penpot works.</p>
     </a>
   </li>
-  <li class="illus illus-faq">
-    <a href="/faqs">
-      <h3>FAQs →</h3>
-      <p>Get quick answers to usual questions about "why and how" Penpot.</p>
+  <li class="illus illus-contributing">
+    <a href="/contributing-guide/">
+      <h3>Contributing guide →</h3>
+      <p>How to report bugs, add translations and more.</p>
     </a>
   </li>
   <li class="illus illus-techguide">
@@ -29,10 +29,10 @@ eleventyNavigation:
       <p>Installation, configuration and architecture.</p>
     </a>
   </li>
-  <li class="illus illus-contributing">
-    <a href="/contributing-guide/">
-      <h3>Contributing guide →</h3>
-      <p>How to report bugs, add translations and more.</p>
+  <li class="illus illus-faq">
+    <a href="https://community.penpot.app/c/faq/17">
+      <h3>FAQs →</h3>
+      <p>Get quick answers to usual questions about "why and how" Penpot.</p>
     </a>
   </li>
   <li class="github">

technical-guide/configuration.md

@@ -35,7 +35,7 @@ format: `<enable|disable>-<flag-name>`.
 Penpot comes with an option to completely disable the registration process or restrict it
 to some domains.
 
-If you want to completelly disable registration, use the following variable in both
+If you want to completely disable registration, use the following variable in both
 frontend & backend:
 
 ```bash
@@ -67,7 +67,7 @@ They are disabled by default since 1.13.0
 
 ### Authentication Providers
 
-For configure the authentication with third-party auth providers you will need to
+To configure the authentication with third-party auth providers you will need to
 configure penpot and set the correct callback of your penpot instance in the auth-provider
 configuration.
 

technical-guide/developer/architecture/index.md

@@ -9,7 +9,7 @@ This section gives an overall structure of the system.
 Penpot has the architecture of a typical SPA. There is a frontend application,
 written in ClojureScript and using React framework, and served from a static
 web server. It talks to a backend application, that persists data on a
-PosgreSQL database.
+PostgreSQL database.
 
 The backend is written in Clojure, so front and back can share code and data
 structures without problem. Then, the code is compiled into JVM bytecode and

technical-guide/getting-started.md

@@ -181,7 +181,7 @@ and other ones commented out with some explanations.
 #### Create users using CLI
 
 By default (or when `disable-email-verification` flag is used), email verification process
-is completly disabled for new registrations but is hightly recommended enabling email
+is completly disabled for new registrations but is highly recommended enabling email
 verification or disable registration if you are going to expose your penpot instance to
 the internet.
 

user-guide/components/index.njk

@@ -4,12 +4,12 @@ title: 10· Components
 
 <h1 id="components">Components</h1>
 <p class="main-paragraph">Speed your workflow with the reusable power of components.</p>
-<p>A component is an object or group of objects that can be reused multiple times across user files (projects and teams in the future). All copies of a component used in user files are linked. That is, any update made to the Main component is reflected in all component copies (if you accept the update) . You can even create overrides for specific parts of component copies.</p>
+<p>A component is an object or group of objects that can be reused multiple times across files (projects and teams in the future). All copies of a component used in files are linked. That is, any update made to the Main component is reflected in all component copies (if you accept the update) . You can even create overrides for specific parts of component copies.</p>
 
 <p>A component has two parts:</p>
 <ul>
   <li><strong>Main component</strong> - This is the source that defines the component. Main components exist only in the library, not in the viewport.</li>
-  <li><strong>Component Copy</strong> or instance. These are  copy of a Main component that has been placed in the viewport. Component copies are linked to their Main component.</li>
+  <li><strong>Component Copy</strong> or instance. These are copies of a Main component that has been placed in the viewport. Component copies are linked to their Main component.</li>
 </ol>
 
 <h3 id="component-create">Create a Component</h3>
@@ -40,15 +40,15 @@ title: 10· Components
 <p><img src="/img/components-updatenotification.png" alt="components" /></p>
 
 <h3 id="component-overrides">Component Overrides</h3>
-<p>Overrides are differences at the copy components from their main components. With overrides you can keep changes at the component copies while maintaining synchronization with the Main component.</p>
+<p>Overrides are modifications made in a specific copy that are not in its main component. With overrides you can keep changes at the component copies while maintaining synchronization with the Main component.</p>
 <p>Component layers with overrides are marked with a “*” at the layers list.</p>
 <p><img src="/img/components-overrides.gif" alt="components" /></p>
 <h4>Reset overrides</h4>
 <p>Right click and select the option “Reset overrides” at the component menu to get it to the state of the Main component.</p>
 
 <h3 id="component-detach">Detach Instance</h3>
 <p>Detach a component copy to unlink it from its Main component will transform it in a group layer. Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> or right click and select the option “Detach instance” at the component menu.</p>
-<p>You can acknowledge this achievement in bulk by selecting several components and committing the same action.</p>
+<p>You can also detach components in bulk by selecting several components and performing the same action.</p>
 
 <h3 id="component-show">Show main component</h3>
-<p>To easily show the Main component of a component copy there is the option at the component menu “Show main component” that will open the library where the component belongs.</p>
+<p>To easily locate the Main component of a component copy there is the option at the component menu “Show main component” that will open the library where the Main component belongs.</p>

user-guide/custom-fonts/index.njk

@@ -6,7 +6,7 @@ title: 16· Custom fonts
 <p class="main-paragraph">If you have purchased, personal or libre fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team. <p>
 
 <h3 id="customfonts-upload">Upload local fonts</h3>
-<p>To use a font that you have on your local machine, you need to upload it first to the Penpot team where you want to use it.</p>
+<p>To use a font that you have on your local machine, first you need to upload it to the Penpot team where you want to use it.</p>
 <p>You can find the “Fonts” section in the dashboard menu, at the left sidebar.</p>
 <p><a href="/img/customfonts.png" target="_blank"><img src="/img/customfonts.png" alt="local fonts" /></a></p>
 
@@ -21,7 +21,7 @@ title: 16· Custom fonts
 
 <h3 id="customfonts-families">Group fonts in font families</h3>
 <p>Fonts with the same font family name will be grouped as a single font family. That means that at the font list that you will use at the files they will be shown as only one font with different variants available. </p>
-<p>If you want to add a font variant (eg: Light) to a font family (eg: Helvetica) you only need to ensure at the upload that it has the same font family name.</p>
+<p>If you want to add a font variant (eg: Light) to a font family (eg: Helvetica) you only need to ensure during the upload process that it has the same font family name.</p>
 <p><a href="/img/customfonts-families.png" target="_blank"><img src="/img/customfonts-families.png" alt="local fonts" /></a></p>
 
 <h3 id="customfonts-edit">Edit custom fonts</h3>

user-guide/exporting/index.njk

@@ -23,11 +23,11 @@ title: 07· Exporting objects
   <li><strong>File format</strong> - PNG, SVG, JPEG, PDF.</li>
 </ul>
 <p class="advice">
-  Exported PDF files try to leverage the capabilities of PDF vectorial format (unpixelated zoom, select & copy texts, etc.). But cannot guarantee that 100% of SVG features may be converted perfectly to PDF. You may see differences between an object display inside Penpot and in the exported file. If you need and exact match, a workaround is to export the object into PNG and convert it to PDF with some of the many tools that exist for it.<br /><br />
+  Exported PDF files try to leverage the capabilities of PDF vectorial format (unpixelated zoom, select & copy texts, etc.), but cannot guarantee that 100% of SVG features may be converted perfectly to PDF. You may see differences between an object displayed inside Penpot and in the exported file. If you need an exact match, a workaround is to export the object into PNG and convert it to PDF with some of the many tools that exist for it.<br /><br />
 </p>
 <p class="advice">
   <strong>Currently known issue:</strong>
-  When exporting objects with masks, the mask does not work when opening the PDF file with some open source tools (e.g. evince or inkscape). This is not a Penpot fault, but <a href="https://gitlab.freedesktop.org/poppler/poppler/-/issues/1210" target="_blank">a bug in poppler</a>, a library used by many of the open source tools. If you open the file with an official Adobe viewer, or a tool like okular or in a browser like Chrome or Firefox, you can see it well.
+  When exporting objects with masks, the mask does not work when opening the PDF file with some open source tools (e.g. evince or inkscape). This is not a Penpot's fault, but <a href="https://gitlab.freedesktop.org/poppler/poppler/-/issues/1210" target="_blank">a bug in poppler</a>, a library used by many of the open source tools. If you open the file with an official Adobe viewer, or a tool like okular or in a browser like Chrome or Firefox, you can see it well.
 </p>
 
 <h3 id="export-multiple">Multiple export presets</h3>

user-guide/flexible-layouts/index.njk

@@ -6,11 +6,11 @@ title: 08· Flexible Layouts
 <p class="main-paragraph">Penpot's unique Flex Layout allows you to create flexible designs that can adapt automatically. Resize, fit, and fill content and containers without the need to do it manually.</p>
 
 <p class="advice">
- to help you learn the fundamentals of Flex Layout <a href="https://penpot.app/layout" target="_blank">here’s a dedicated website</a> where you will find a <strong>video tutorial</strong> and a <strong>playground template</strong>.
+ To help you learn the fundamentals of Flex Layout <a href="https://penpot.app/layout" target="_blank">here’s a dedicated website</a> where you will find a <strong>video tutorial</strong> and a <strong>playground template</strong>.
 </p>
 
 <h3 id="flexlayout-css">Flex Layout is based on CSS standards</h3>
-<p>Penpot's proposal tries to get as close as possible to the final output that we will see on the web. Design and development speak the same language in order to embrace web standards and improve communication between roles. 
+<p>Penpot's proposal tries to get as close as possible to the final output that we will see on the web. Design and development speak the same language in order to embrace web standards and improve communication between roles.
 Penpot's Flex Layout is built over Flexbox, a CSS module that provides a more efficient way to lay out, align and distribute space among items in a container. As there are already many comprehensive explations about Flexbox we are not going to write another one. If you are interested we can recommend you to read the one at <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">CSS Tricks</a>.</p>
 <p><img src="/img/csstricks-00-basic-terminology.svg" alt="Flex Layout" /></p>
 <small>Image from CSS Tricks</small>
@@ -27,7 +27,7 @@ Penpot's Flex Layout is built over Flexbox, a CSS module that provides a more ef
 
 
 <h3 id="flexlayout-arrange-reorder">Arrange and reorder objects to a Flex Layout</h3>
-<p>To add an object to a Flex Layout you can just drag it at the position of your desire. You can also create or paste elements like in any regular board.</p>
+<p>To add an object to a Flex Layout you can just drag it at the position of your choice. You can also create or paste elements like in any regular board.</p>
 <p>To reorder elements you can drag them or use the <kbd>UP/DOWN</kbd> keystrokes.</p>
 <p><img src="/img/flexlayout-arrange.gif" alt="Flex Layout" /></p>
 
@@ -54,25 +54,25 @@ Penpot's Flex Layout is built over Flexbox, a CSS module that provides a more ef
 <p>Selecting absolute position will exclude the element from the Flex layout flow allowing you to freely position an element in a specific place regardless of the size of the layout where it belongs.</p>
 <p><img src="/img/flexlayout-position-absolute.png" alt="Flex Layout" /></p>
 <h4>Z-index:</h4>
-<p>With the new z-index option you can decide the order of overlapping elements while maintaining the layers order.</p>
+<p>With the z-index option you can decide the order of overlapping elements while maintaining the layers order.</p>
 <p><img src="/img/flexlayout-position-z.gif" alt="Flex Layout" /></p>
 
 
 <h3 id="flexlayout-spacing">Managing flex spacing</h3>
 <p>When creating Flex layouts, the spacing is predicted, helping you to maintain your design composition.</p>
 <p><img src="/img/flexlayout-spacing-add.gif" alt="Flex Layout" /></p>
 
-<p>Set paddings, margins and gaps using their respective numeric inputs</p>
+<p>Set paddings, margins and gaps using their respective numeric inputs.</p>
 <p>You can also <strong>click and drag</strong> to resize them while visualizing the value that is being edited:</p>
 <ul>
-  <li>Hold <kbd>Shift/⇧</kbd> while dragging to change the value of opposite sides uniformly.</li>
-  <li>Hold <kbd>Alt/⌥</kbd> while dragging to change the value of all sides uniformly.</li>
+  <li>Hold <kbd>Shift/⇧</kbd> while dragging to change the value of opposite sides evenly.</li>
+  <li>Hold <kbd>Alt/⌥</kbd> while dragging to change the value of all sides evenly.</li>
 </ul>
 <p><img src="/img/flexlayout-spacing.gif" alt="Flex Layout" /></p>
 
 
 <h3 id="flexlayout-code">Get code and specifications</h3>
-<p>Designing with Flex Layout generates ready for production code. Select the flex board or its inner elements and then open the <a href="/user-guide/inspect" target="_blank">Inspect tab</a> to obtain its properties detailed info and raw code.</p>
+<p>Designing with Flex Layout generates <em>ready for production</em> code. Select the flex board or its inner elements and then open the <a href="/user-guide/inspect" target="_blank">Inspect tab</a> to obtain its properties, detailed info and raw code.</p>
 <p><img src="/img/flexlayout-inspect.gif" alt="Flex Layout" /></p>
 
 

user-guide/import-export/index.njk

@@ -8,15 +8,15 @@ title: 14· Import/export files
 <p class="advice">Importing files from other tools and services are among the main priorities of the Penpot team. Related features are coming soon.</p>
 
 <h3 id="importing-export">Export (download) Penpot files</h3>
-<p>Exporting files is useful if you want to share Penpot files with a user that does not belong to one of your teams or you want to have a backup of your files outside penpot.app.</p>
+<p>Exporting files is useful if you want to share Penpot files with a user that does not belong to one of your teams or you want to have a backup of your files outside Penpot, both Saas (https://penpot.app) or your instance.</p>
 <p>To export a file select the one of the download options from the file menu at the dashboard and the file will be downloaded to your computer. You can select between two formats, binary and standard. Each format has its advantages and disadvantages, choose what suits your case better.</p>
 <strong>Penpot file (.penpot): the fast.</strong>
 <ul>
   <li>✅ Highly efficient in terms of memory and transfer time when exporting and importing.</li>
   <li>❌ It can be opened only in Penpot.</li>
   <li>❌ Not transparent, code difficult to explore.</li>
 </ul>
-<strong>Standard file (.svg + .json): the open.</strong>
+<strong>Standard file (a .zip with svg and json): the open.</strong>
 <ul>
   <li>✅ Allows the file to be opened by other softwares (still, for those cases export to SVG seems to be the common practice).</li>
   <li>✅ Allows some automations and integrations.</li>
@@ -29,20 +29,19 @@ title: 14· Import/export files
 <p>Select multiple files to export them at the same time. An overlay will show you the progress of the different exports.</p>
 <p><img src="/img/importing-export.gif" alt="Import / Export files" /></p>
 <h4>Exporting files linked to Shared libraries</h4>
-<p>Exported files linked to shared libraries provide different ways to export their assets. Choose the one that suits you better!</p>
+<p>Exported files linked to shared libraries provide different ways to export their assets. Choose the one that suits you better.</p>
 <ul>
   <li><strong>Export shared libraries</strong>: Files with shared libraries will be included in the export, maintaining their linkage.</li>
   <li><strong>Include shared library assets in file libraries</strong>: Files will be exported with all external assets merged into the file library.</li>
   <li><strong>Treat shared library assets as basic objects</strong>: Shared libraries will not be included in the export and no assets will be added to the library.</li>
 </ul>
-<p>Choose the one that suits you better for each occasion!</p>
 <p><img src="/img/importing-libraries.png" alt="Import / Export files" /></p>
 
 <p>You can also export / download a file from its main menu at the design workspace.</p>
 <p><img src="/img/import-export-menu.png" alt="Import / Export files" /></p>
 
 <h3 id="importing-import">Import Penpot files</h3>
-<p>The import option is at the projects menu. Press “Import files” and then select one or more .penpot files to import.</p>
+<p>The import option is at the projects menu. Press “Import files” and then select one or more .penpot files to import. You can import a .zip file as well.</p>
 <p><img src="/img/importing-import.png" alt="Import / Export files" /></p>
 <p>Before actually importing the files to your project, you’ll still have the chance to change their names or get rid of unwanted files.</p>
 <p><img src="/img/importing-import-options.png" alt="Import / Export files" /></p>