Merge remote-tracking branch 'origin/main' into staging

docs/_includes/layouts/base.njk

@@ -16,7 +16,7 @@
         title=title or metadata.title,
         desc=desc or metadata.desc or description or metadata.description,
         url="https://help.penpot.app" + page.url,
-        img="https://help.penpot.app/img/th-help-center.jpg",
+        img="https://help.penpot.app/img/thumb-help-center.jpg",
         img_alt=alt,
         twitterHandle=twitter or metadata.twitter,
         name=name

docs/contributing-guide/index.njk

@@ -7,7 +7,7 @@ eleventyNavigation:
 ---
 
 <div class="main-illus">
-  <img src="/img/home-contributing.png" alt="User guide" border="0">
+  <img src="/img/home-contribution.webp" alt="User guide" border="0">
 </div>
 
 <h1 id="contributing-guide">Contributing guide.</h1>

docs/css/index.css

@@ -832,22 +832,22 @@ a[href].post-tag:visited {
   padding-left: 14.6rem;
 }
 .illus-userguide {
-  background-image: url(/img/home-userguide.png);
+  background-image: url(/img/home-user-guide.webp);
 }
 .illus-faq {
-  background-image: url(/img/home-faq.png);
+  background-image: url(/img/home-faq.webp);
 }
 .illus-techguide {
-  background-image: url(/img/home-techguide.png);
+  background-image: url(/img/home-technical-guide.webp);
 }
 .illus-plugins {
-  background-image: url(/img/home-plugins.png);
+  background-image: url(/img/home-plugins.webp);
 }
 .illus-contributing {
-  background-image: url(/img/home-contributing.png);
+  background-image: url(/img/home-contribution.webp);
 }
 .illus-contact {
-  background-image: url(/img/home-contact.png);
+  background-image: url(/img/home-contact.webp);
 }
 .illus-libraries {
   padding-left: 13rem;
@@ -924,7 +924,7 @@ a[href].post-tag:visited {
   background-size: auto 75%;
   background-position: center top;
   background-repeat: no-repeat;
-  background-image: url(/img/home-contact.png);
+  background-image: url(/img/home-contact.webp);
 }
 .contact-block p,
 .contact-block h2,
@@ -992,22 +992,22 @@ a[href].post-tag:visited {
 }
 
 .plugins .illus-getting-started {
-  background-image: url(/img/plugins/getting_started.png);
+  background-image: url(/img/plugins/plugins-getting-started.webp);
 }
 .plugins .illus-create-plugin {
-  background-image: url(/img/plugins/create_plugin.png);
+  background-image: url(/img/plugins/plugins-create.webp);
 }
 .plugins .illus-deployment {
-  background-image: url(/img/plugins/deployment.png);
+  background-image: url(/img/plugins/plugins-deploy.webp);
 }
 .plugins .illus-api {
-  background-image: url(/img/plugins/api.png);
+  background-image: url(/img/plugins/plugins-api.webp);
 }
 .plugins .illus-examples {
-  background-image: url(/img/plugins/examples.png);
+  background-image: url(/img/plugins/plugins-examples-templates.webp);
 }
 .plugins .illus-faq {
-  background-image: url(/img/plugins/faqs.png);
+  background-image: url(/img/plugins/plugins-faqs.webp);
 }
 
 table, tr, th, td {

docs/technical-guide/getting-started/index.md

@@ -12,22 +12,32 @@ If you need more context you can look at the <a
 href="https://community.penpot.app/t/self-hosting-penpot-i/2336" target="_blank">post
 about self-hosting</a> in Penpot community.
 
-**There is absolutely no difference between <a
-href="https://design.penpot.app">our SaaS offer</a> for Penpot and your
-self-hosted Penpot platform!**
-
-There are three main options for creating a Penpot instance:
-
-1. Using the platform of our partner <a href="https://elest.io/open-source/penpot" target="_blank">Elestio</a>.
-2. Using <a href="https://docker.com" target="_blank">Docker</a> tool.
-3. Using <a href="https://kubernetes.io/" target="_blank">Kubernetes</a>.
+<strong>The experience stays the same, whether you use
+Penpot <a href="https://design.penpot.app" target="_blank">in the cloud</a>
+or self-hosted.</strong>
 
 <p class="advice">
-The recommended way is to use Elestio, since it's simpler, fully automatic and still greatly flexible.
-Use Docker if you already know the tool, if need full control of the process or have extra requirements
-and do not want to depend on any external provider, or need to do any special customization.
+Docker images are published shortly after the SaaS update:
+<a href="https://community.penpot.app/t/why-do-self-hosted-versions-lag-behind-new-releases/9897" target="_blank">Why do self hosted versions lag behind new releases?</a>
 </p>
 
+These are the main options to configure your Penpot instance:
+
+1. Deploy with [docker compose][2]
+2. Use Kubernetes in its different flavors:
+    - Deploy the [official Helm Chart][3]
+    - Deploy in [Openshift][4]
+    - Deploy in [Rancher][5]
+3. Other official options:
+    - [Elestio][6]
+    - [Truenas][7]
+
 Or you can try [other options][1], offered by Penpot community.
 
 [1]: /technical-guide/getting-started/unofficial-options/
+[2]: /technical-guide/getting-started/docker/
+[3]: /technical-guide/getting-started/kubernetes/
+[4]: /technical-guide/getting-started/kubernetes/#using-openshift%3F
+[5]: /technical-guide/getting-started/kubernetes/#using-rancher%3F
+[6]: /technical-guide/getting-started/elestio/
+[7]: https://apps.truenas.com/catalog/penpot/

docs/technical-guide/getting-started/unofficial-options.md

@@ -5,12 +5,7 @@ desc: Find guides for Docker, Kubernetes, and more in Penpot's Technical Guide f
 
 # Unofficial self-host options
 
-There are some other options, **NOT SUPPORTED BY PENPOT**:
+Other setups maintained by the community (not Penpot-supported):
 
-* Install with <a href="https://community.penpot.app/t/how-to-develop-penpot-with-podman-penpotman/2113" target="_blank">Podman</a> instead of Docker.
-* Try the under development <a href="https://github.com/author-more/penpot-desktop/releases/latest" target="_blank">Penpot Desktop app</a>.
-* Try a simple Kubernetes Deployment option <a href="https://github.com/degola/penpot-kubernetes" target="_blank">penpot-kubernetes</a>.
-* Penpot is available <a href="https://apps.yunohost.org/app/penpot">in the catalog</a> of apps installable on YunoHost instances.
-* Or try a fully manual installation if you have a really specific use case.. For help, you can look at the [Architecture][1] section and the <a href="https://github.com/penpot/penpot/tree/develop/docker/images" target="_blank">Docker configuration files</a>.
-
-[1]: /technical-guide/developer/architecture
+* Install with <a href="https://blog.linuxgrrl.com/2022/01/19/running-penpot-locally-docker-free-with-podman/" target="_blank">Podman</a> instead of Docker.
+* Try the <a href="https://community.penpot.app/t/penpot-desktop-road-to-1-0/7296" target="_blank">Penpot Desktop app</a>.

docs/technical-guide/index.md

@@ -7,7 +7,7 @@ eleventyNavigation:
 ---
 
 <div class="main-illus">
-  <img src="/img/home-techguide.png" alt="Technical Guide" border="0">
+  <img src="/img/home-technical-guide.webp" alt="Technical Guide" border="0">
 </div>
 
 # Technical Guide

docs/user-guide/components/index.njk

@@ -195,13 +195,13 @@ desc: Streamline your design workflow with Penpot's Components guide! Learn to c
   <iframe 
     width="672px" 
     height="378px"
-    src="https://www.youtube.com/embed/3iWc-dwjA30?start=6"
+    src="https://peertube.kaleidos.net/videos/embed/v9Yh79hom5otcBEnqondBY"
     title="Penpot Variants Demo"
     frameborder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
     allowfullscreen>
   </iframe>
-  <figcaption>Penpot – Variants sneak peek</figcaption>
+  <figcaption>Penpot – Variants release</figcaption>
 </figure>
 
 <h3 id="component-understanding-variants-properties-and-values">Understanding variants: properties and values</h3>

docs/user-guide/index.njk

@@ -7,7 +7,7 @@ eleventyNavigation:
 ---
 
 <div class="main-illus">
-  <img src="/img/home-userguide.png" alt="User guide" border="0">
+  <img src="/img/home-user-guide.webp" alt="User guide" border="0">
 </div>
 
 <h1 id="user-guide">Penpot User Guide</h1>

docs/user-guide/objects/index.njk

@@ -8,15 +8,23 @@ desc: "Work with Penpot's objects: boards, shapes, text, paths, and graphics. Le
 available in Penpot, and how to get the most of them.</p>
 
 <h2 id="Boards">Boards</h2>
-<p>A Board is a layer typically used as a container for a design. Boards are useful if you want to design for a specific screen or print size. Boards can contain other boards. First level boards
+<p>Boards are layers that serve as your high-level containers for content organization and layout. Boards are useful if you want to design for a specific screen or print size. Boards can contain other boards. First level boards
 are shown by default at the <a href="/user-guide/view-mode">View mode</a>, acting as screens of a design or pages of a document. Also, objects inside boards can be clipped. Boards are a powerful element at Penpot, opening up a ton of possibilities when creating and organizing your designs.</p>
 
 <h3>Create boards</h3>
-<p>You can create a board using the board tool at the toolbar or the shortcut <kbd>B</kbd>. </p>
-<p>Set a custom size or choose one of the provided presets with the most common resolution for devices and standard print sizes. </p>
+<p>To create a board, use the board tool at the toolbar or the shortcut <kbd>B</kbd>.</p>
+<figure>
+  <img src="/img/objects/board-tool.webp" alt="Board tool">
+</figure>
+
+<p>Then, with the board tool selected, you have two options:</p>
+<ul>
+  <li><strong>Select a board size upfront</strong>. You can choose one of the provided presets with the most common resolution for devices and standard print sizes</li>
+  <li><strong>Click-and-drag</strong> to draw a frame of approximate size, then immediately edit its width/height values to be precise.</li>
+</ul>
 <figure>
   <video title="Create board" muted="" playsinline="" controls="" width="100%" poster="/img/objects/board-create.webp" height="auto">
-    <source src="/img/objects/board-create.mp4" type="video/mp4">
+    <source src="/img/objects/board-creation.mp4" type="video/mp4">
   </video>
 </figure>
 

docs/user-guide/the-interface/index.njk

@@ -28,33 +28,37 @@ desc: Discover Penpot's free user guide! Learn the interface, workspace basics,
   <strong>10)</strong> Prototype mode
   <strong>11)</strong> Inspect mode
   <strong>12)</strong> View mode
-  <strong>13)</strong> History panel
-  <strong>14)</strong> Comments
-  <strong>15)</strong> Zoom
-  <strong>16)</strong> File status
+  <strong>13)</strong> Share / Invite
+  <strong>14)</strong> History
+  <strong>15)</strong> Comments
+  <strong>16)</strong> Zoom
   <strong>17)</strong> Users
-  <strong>18)</strong> Assets panel
+  <strong>18)</strong> Assets
+  <strong>19)</strong> Design tokens
+  <strong>20)</strong> File status
 </p>
 
 <ol>
-  <li><strong>Viewport:</strong> An infinite canvas to design without limits.</li>
-  <li><strong>Toolbar: </strong> The toolbar is the place where you will find the tools to quickly and easily create the different types of objects: board, rectangle, ellipse, text, graphic, path and free drawing. <a href="/user-guide/objects/">More about objects.</a></li>
-  <li><strong>Main menu:</strong> At the file main menu you are able to tweak your workspace configuration. Manage visibility for grids, rulers, panels. Enable or disable snapping, dynamic alignment. Add or remove the file as Shared Library. You can also find here help resources.</li>
-  <li><strong>Pages:</strong> A file can have as many pages as you need. Each page has its own viewport (the almost infinite area where you actually create your designs) with its own layers. You can create, delete or reorder your pages at your needs.</li>
-  <li><strong>Layers:</strong> Layers are the different objects that you can place at the design viewport. <a href="/user-guide/layer-basics/">More about layers.</a></li>
-  <li><strong>Rulers:</strong> Coordinates to help you design. You can also drag guides from the rulers.</li>
-  <li><strong>Color palette:</strong> The color palette allows you to always have a color library at plain sight. Use the menu to easily switch between libraries. <a href="/user-guide/styling/#color-palette">More about the color palette</a>.</li>
-  <li><strong>Typography palette:</strong> The Typography palette allows you to always have the typography styles at plain sight. Use the menu to easily switch between libraries.</li>
-  <li><strong>Design properties:</strong> At the Design properties sidebar you can find and edit the properties of a selected layer. The list of properties shown varies depending on the type of element. There are some common properties always set (like size and position) and others not set but available to be added (stroke, shadow, blur...). <a href="/user-guide/styling/">More about styling.</a></li>
-  <li><strong>Prototype mode:</strong> Penpot allows you to prototype interactions connecting boards. Once selected the prototype mode at the right sidebar, select an element to drag a connection to another board. You’ll be able to see the interactive prototype in action in the view mode (access by clicking the play button at the top right). <a href="/user-guide/prototyping/">More about prototyping.</a></li>
-  <li><strong>Inspect mode:</strong> Penpot allows you to get measures, properties and production-ready code from your designs. Also, inspect mode provides a safer view-only mode and other improvements. <a href="/user-guide/inspect/">More about inspecting designs.</a></li>
-  <li><strong>View mode:</strong> The view mode button launches a presentation with the boards. See more about what you can do at the <a href="/user-guide/view-mode/#viewmode-features">view mode.</a> </li>
-  <li><strong>History panel:</strong> The history panel keeps track of the latest changes on an opened file. You can undo/redo to walk the changes and expand each one of them to get detailed information. <a href="/user-guide/workspace-basics/#history">More about history panel.</a></li>
-  <li><strong>Comments:</strong> Activate comments mode to see all the comments at the file and add new ones.</li>
-  <li><strong>Zoom:</strong> Zooming options.</li>
-  <li><strong>File status:</strong> Information about the file saving state. Know if last changes are saved or if there is a problem.</li>
-  <li><strong>Users:</strong> Here you can see how many users have the file open at any moment.</li>
-  <li><strong>Assets panel:</strong> Each file has a default library (File Library) where you can store elements and styles that are likely to be reused within a project. That includes components, colors and typographies. To add an asset to a library just click the “+” button at the header of each asset group.</li>
+  <li><strong>Viewport:</strong> An infinite canvas where you can design without limits.</li>
+  <li><strong>Toolbar:</strong> This is where you’ll find all the tools to quickly and easily create different types of objects: board, rectangle, ellipse, text, graphic, path, and free drawing. <a href="/user-guide/objects/">Learn more about objects.</a></li>
+  <li><strong>Main menu:</strong> From the main menu, you can customize your workspace. Manage the visibility of grids, rulers, and panels. Enable or disable snapping and dynamic alignment. Add or remove the file as a Shared Library. You’ll also find help resources here.</li>
+  <li><strong>Pages:</strong> A file can contain as many pages as you need. Each page has its own viewport (the almost infinite area where you design) and its own layers. You can create, delete, or reorder pages as needed.</li>
+  <li><strong>Layers:</strong> Layers are the different objects you can place in the design viewport. <a href="/user-guide/layer-basics/">Learn more about layers.</a></li>
+  <li><strong>Rulers:</strong> Rulers provide coordinates to help you design. You can also drag guides from them.</li>
+  <li><strong>Color palette:</strong> The color palette gives you quick access to a visible library of colors. Use the menu to easily switch between libraries. <a href="/user-guide/styling/#color-palette">Learn more about the color palette.</a></li>
+  <li><strong>Typography palette:</strong> The typography palette keeps text styles always at hand. Use the menu to switch between libraries.</li>
+  <li><strong>Design properties:</strong> The Design Properties sidebar lets you view and edit the attributes of a selected layer. The list changes depending on the element type: some properties are always present (size, position), while others are optional (stroke, shadow, blur…). <a href="/user-guide/styling/">Learn more about styling.</a></li>
+  <li><strong>Prototype mode:</strong> Penpot lets you prototype interactions by connecting boards. Activate prototype mode from the right sidebar, then select an element and drag a connection to another board. You can preview the interactive prototype in View Mode (access it by clicking the play button in the top-right corner). <a href="/user-guide/prototyping/">Learn more about prototyping.</a></li>
+  <li><strong>Inspect mode:</strong> Use Inspect Mode to get measurements, properties, and production-ready code from your designs. It also provides a safer, view-only mode with additional improvements. <a href="/user-guide/inspect/">Learn more about inspecting designs.</a></li>
+  <li><strong>View mode:</strong> The View Mode button launches a presentation of your boards. Explore more features in the <a href="/user-guide/view-mode/#viewmode-features">View Mode guide.</a></li>
+  <li><strong>Share / Invite:</strong> Invite team members to give them access to this file and all team files.</li>
+  <li><strong>History:</strong> The History panel records recent changes in an open file. Use undo/redo to step through changes, and expand each entry for detailed information. <a href="/user-guide/workspace-basics/#history">Learn more about the history panel.</a></li>
+  <li><strong>Comments:</strong> Switch to Comments Mode to view all comments on the file and add new ones.</li>
+  <li><strong>Zoom:</strong> Options to zoom in, zoom out, or fit the canvas.</li>
+  <li><strong>Users:</strong> See how many users currently have the file open.</li>
+  <li><strong>Assets:</strong> Each file includes a default File Library where you can store reusable elements and styles, such as components, colors, and text styles. From this panel, you'll be also able to include and use shared libraries.</li>
+  <li><strong>Design tokens:</strong> Design tokens are the building blocks of UI elements, expressed in a format usable across design, tools, and code. They include colors, typography, spacing, shadows, and more.</li>
+  <li><strong>File status:</strong> Displays the file’s saving state, showing whether your latest changes are saved or if there’s a problem.</li>
 </ol>
 
 <h2 id="interface-viewmode">View mode</h2>