diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk index 8644a3ccea..4ccbe18b8d 100644 --- a/docs/_includes/layouts/base.njk +++ b/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 diff --git a/docs/contributing-guide/index.njk b/docs/contributing-guide/index.njk index b46ecd98ed..e0bb204487 100644 --- a/docs/contributing-guide/index.njk +++ b/docs/contributing-guide/index.njk @@ -7,7 +7,7 @@ eleventyNavigation: ---
- User guide + User guide

Contributing guide.

diff --git a/docs/css/index.css b/docs/css/index.css index 9b6b5c3089..2865bfd248 100644 --- a/docs/css/index.css +++ b/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 { diff --git a/docs/img/home-contact.png b/docs/img/home-contact.png deleted file mode 100644 index 9fc29008d6..0000000000 Binary files a/docs/img/home-contact.png and /dev/null differ diff --git a/docs/img/home-contact.webp b/docs/img/home-contact.webp new file mode 100644 index 0000000000..c4158d7749 Binary files /dev/null and b/docs/img/home-contact.webp differ diff --git a/docs/img/home-contributing.png b/docs/img/home-contributing.png deleted file mode 100644 index d44451bde8..0000000000 Binary files a/docs/img/home-contributing.png and /dev/null differ diff --git a/docs/img/home-contribution.webp b/docs/img/home-contribution.webp new file mode 100644 index 0000000000..5b8226b891 Binary files /dev/null and b/docs/img/home-contribution.webp differ diff --git a/docs/img/home-faq.png b/docs/img/home-faq.png deleted file mode 100644 index 587edde42b..0000000000 Binary files a/docs/img/home-faq.png and /dev/null differ diff --git a/docs/img/home-faq.webp b/docs/img/home-faq.webp new file mode 100644 index 0000000000..3b98197c5a Binary files /dev/null and b/docs/img/home-faq.webp differ diff --git a/docs/img/home-plugins.png b/docs/img/home-plugins.png deleted file mode 100644 index 98372a12e8..0000000000 Binary files a/docs/img/home-plugins.png and /dev/null differ diff --git a/docs/img/home-plugins.webp b/docs/img/home-plugins.webp new file mode 100644 index 0000000000..a5ee1c4104 Binary files /dev/null and b/docs/img/home-plugins.webp differ diff --git a/docs/img/home-techguide.png b/docs/img/home-techguide.png deleted file mode 100644 index 1712459384..0000000000 Binary files a/docs/img/home-techguide.png and /dev/null differ diff --git a/docs/img/home-technical-guide.webp b/docs/img/home-technical-guide.webp new file mode 100644 index 0000000000..a83d1c5192 Binary files /dev/null and b/docs/img/home-technical-guide.webp differ diff --git a/docs/img/home-user-guide.webp b/docs/img/home-user-guide.webp new file mode 100644 index 0000000000..9c0c28ae24 Binary files /dev/null and b/docs/img/home-user-guide.webp differ diff --git a/docs/img/home-userguide.png b/docs/img/home-userguide.png deleted file mode 100644 index 882851932d..0000000000 Binary files a/docs/img/home-userguide.png and /dev/null differ diff --git a/docs/img/interface/workspace-dark.webp b/docs/img/interface/workspace-dark.webp index 6c15bb526e..5bfdab77ad 100644 Binary files a/docs/img/interface/workspace-dark.webp and b/docs/img/interface/workspace-dark.webp differ diff --git a/docs/img/objects/board-create.mp4 b/docs/img/objects/board-create.mp4 deleted file mode 100644 index 7e27cac68b..0000000000 Binary files a/docs/img/objects/board-create.mp4 and /dev/null differ diff --git a/docs/img/objects/board-create.webp b/docs/img/objects/board-create.webp index fb57f671a9..606c1dcc54 100644 Binary files a/docs/img/objects/board-create.webp and b/docs/img/objects/board-create.webp differ diff --git a/docs/img/objects/board-creation.mp4 b/docs/img/objects/board-creation.mp4 new file mode 100644 index 0000000000..485b7fdb61 Binary files /dev/null and b/docs/img/objects/board-creation.mp4 differ diff --git a/docs/img/objects/board-tool.webp b/docs/img/objects/board-tool.webp new file mode 100644 index 0000000000..b86d537318 Binary files /dev/null and b/docs/img/objects/board-tool.webp differ diff --git a/docs/img/plugins/api.png b/docs/img/plugins/api.png deleted file mode 100644 index 75a836b541..0000000000 Binary files a/docs/img/plugins/api.png and /dev/null differ diff --git a/docs/img/plugins/create_plugin.png b/docs/img/plugins/create_plugin.png deleted file mode 100644 index 260c9fa167..0000000000 Binary files a/docs/img/plugins/create_plugin.png and /dev/null differ diff --git a/docs/img/plugins/deployment.png b/docs/img/plugins/deployment.png deleted file mode 100644 index 9ac2f51f78..0000000000 Binary files a/docs/img/plugins/deployment.png and /dev/null differ diff --git a/docs/img/plugins/examples.png b/docs/img/plugins/examples.png deleted file mode 100644 index 7fc502c021..0000000000 Binary files a/docs/img/plugins/examples.png and /dev/null differ diff --git a/docs/img/plugins/faqs.png b/docs/img/plugins/faqs.png deleted file mode 100644 index 0c357c3bb4..0000000000 Binary files a/docs/img/plugins/faqs.png and /dev/null differ diff --git a/docs/img/plugins/getting_started.png b/docs/img/plugins/getting_started.png deleted file mode 100644 index a93103ffde..0000000000 Binary files a/docs/img/plugins/getting_started.png and /dev/null differ diff --git a/docs/img/plugins/plugins-api.webp b/docs/img/plugins/plugins-api.webp new file mode 100644 index 0000000000..efc4f1d85c Binary files /dev/null and b/docs/img/plugins/plugins-api.webp differ diff --git a/docs/img/plugins/plugins-create.webp b/docs/img/plugins/plugins-create.webp new file mode 100644 index 0000000000..4dc75beb9e Binary files /dev/null and b/docs/img/plugins/plugins-create.webp differ diff --git a/docs/img/plugins/plugins-deploy.webp b/docs/img/plugins/plugins-deploy.webp new file mode 100644 index 0000000000..0f4d139f46 Binary files /dev/null and b/docs/img/plugins/plugins-deploy.webp differ diff --git a/docs/img/plugins/plugins-examples-templates.webp b/docs/img/plugins/plugins-examples-templates.webp new file mode 100644 index 0000000000..f247a3b1ce Binary files /dev/null and b/docs/img/plugins/plugins-examples-templates.webp differ diff --git a/docs/img/plugins/plugins-faqs.webp b/docs/img/plugins/plugins-faqs.webp new file mode 100644 index 0000000000..b8cc6c1e36 Binary files /dev/null and b/docs/img/plugins/plugins-faqs.webp differ diff --git a/docs/img/plugins/plugins-getting-started.webp b/docs/img/plugins/plugins-getting-started.webp new file mode 100644 index 0000000000..24c2f2b831 Binary files /dev/null and b/docs/img/plugins/plugins-getting-started.webp differ diff --git a/docs/img/th-help-center.jpg b/docs/img/th-help-center.jpg deleted file mode 100644 index f3589d28e6..0000000000 Binary files a/docs/img/th-help-center.jpg and /dev/null differ diff --git a/docs/img/thumb-help-center.jpg b/docs/img/thumb-help-center.jpg new file mode 100644 index 0000000000..c821e13abc Binary files /dev/null and b/docs/img/thumb-help-center.jpg differ diff --git a/docs/technical-guide/getting-started/index.md b/docs/technical-guide/getting-started/index.md index 38f8f939bc..55fc229a67 100644 --- a/docs/technical-guide/getting-started/index.md +++ b/docs/technical-guide/getting-started/index.md @@ -12,22 +12,32 @@ If you need more context you can look at the post about self-hosting in Penpot community. -**There is absolutely no difference between our SaaS offer 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 Elestio. -2. Using Docker tool. -3. Using Kubernetes. +The experience stays the same, whether you use +Penpot in the cloud +or self-hosted.

-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: +Why do self hosted versions lag behind new releases?

+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/ diff --git a/docs/technical-guide/getting-started/unofficial-options.md b/docs/technical-guide/getting-started/unofficial-options.md index 66692e6765..aba925c607 100644 --- a/docs/technical-guide/getting-started/unofficial-options.md +++ b/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 Podman instead of Docker. -* Try the under development Penpot Desktop app. -* Try a simple Kubernetes Deployment option penpot-kubernetes. -* Penpot is available in the catalog 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 Docker configuration files. - -[1]: /technical-guide/developer/architecture +* Install with Podman instead of Docker. +* Try the Penpot Desktop app. diff --git a/docs/technical-guide/index.md b/docs/technical-guide/index.md index 934734bd5e..e0e2c3291b 100644 --- a/docs/technical-guide/index.md +++ b/docs/technical-guide/index.md @@ -7,7 +7,7 @@ eleventyNavigation: ---
- Technical Guide + Technical Guide
# Technical Guide diff --git a/docs/user-guide/components/index.njk b/docs/user-guide/components/index.njk index ecd68c7ab8..55828b2b49 100644 --- a/docs/user-guide/components/index.njk +++ b/docs/user-guide/components/index.njk @@ -195,13 +195,13 @@ desc: Streamline your design workflow with Penpot's Components guide! Learn to c -
Penpot – Variants sneak peek
+
Penpot – Variants release

Understanding variants: properties and values

diff --git a/docs/user-guide/index.njk b/docs/user-guide/index.njk index bafce3954b..deb7f500ad 100644 --- a/docs/user-guide/index.njk +++ b/docs/user-guide/index.njk @@ -7,7 +7,7 @@ eleventyNavigation: ---
- User guide + User guide

Penpot User Guide

diff --git a/docs/user-guide/objects/index.njk b/docs/user-guide/objects/index.njk index 9653ec3670..29547dcd85 100644 --- a/docs/user-guide/objects/index.njk +++ b/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.

Boards

-

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 +

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 View mode, 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.

Create boards

-

You can create a board using the board tool at the toolbar or the shortcut B.

-

Set a custom size or choose one of the provided presets with the most common resolution for devices and standard print sizes.

+

To create a board, use the board tool at the toolbar or the shortcut B.

+
+ Board tool +
+ +

Then, with the board tool selected, you have two options:

+
diff --git a/docs/user-guide/the-interface/index.njk b/docs/user-guide/the-interface/index.njk index 54a3828011..083daad749 100644 --- a/docs/user-guide/the-interface/index.njk +++ b/docs/user-guide/the-interface/index.njk @@ -28,33 +28,37 @@ desc: Discover Penpot's free user guide! Learn the interface, workspace basics, 10) Prototype mode 11) Inspect mode 12) View mode - 13) History panel - 14) Comments - 15) Zoom - 16) File status + 13) Share / Invite + 14) History + 15) Comments + 16) Zoom 17) Users - 18) Assets panel + 18) Assets + 19) Design tokens + 20) File status

    -
  1. Viewport: An infinite canvas to design without limits.
    2. -
  2. Toolbar: 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. More about objects.
    3. -
  3. Main menu: 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.
    4. -
  4. Pages: 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.
    5. -
  5. Layers: Layers are the different objects that you can place at the design viewport. More about layers.
    6. -
  6. Rulers: Coordinates to help you design. You can also drag guides from the rulers.
    7. -
  7. Color palette: The color palette allows you to always have a color library at plain sight. Use the menu to easily switch between libraries. More about the color palette.
    8. -
  8. Typography palette: The Typography palette allows you to always have the typography styles at plain sight. Use the menu to easily switch between libraries.
    9. -
  9. Design properties: 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...). More about styling.
    10. -
  10. Prototype mode: 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). More about prototyping.
    11. -
  11. Inspect mode: 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. More about inspecting designs.
    12. -
  12. View mode: The view mode button launches a presentation with the boards. See more about what you can do at the view mode.
    13. -
  13. History panel: 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. More about history panel.
    14. -
  14. Comments: Activate comments mode to see all the comments at the file and add new ones.
    15. -
  15. Zoom: Zooming options.
    16. -
  16. File status: Information about the file saving state. Know if last changes are saved or if there is a problem.
    17. -
  17. Users: Here you can see how many users have the file open at any moment.
    18. -
  18. Assets panel: 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.
    19. +
  19. Viewport: An infinite canvas where you can design without limits.
    20. +
  20. Toolbar: 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. Learn more about objects.
    21. +
  21. Main menu: 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.
    22. +
  22. Pages: 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.
    23. +
  23. Layers: Layers are the different objects you can place in the design viewport. Learn more about layers.
    24. +
  24. Rulers: Rulers provide coordinates to help you design. You can also drag guides from them.
    25. +
  25. Color palette: The color palette gives you quick access to a visible library of colors. Use the menu to easily switch between libraries. Learn more about the color palette.
    26. +
  26. Typography palette: The typography palette keeps text styles always at hand. Use the menu to switch between libraries.
    27. +
  27. Design properties: 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…). Learn more about styling.
    28. +
  28. Prototype mode: 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). Learn more about prototyping.
    29. +
  29. Inspect mode: 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. Learn more about inspecting designs.
    30. +
  30. View mode: The View Mode button launches a presentation of your boards. Explore more features in the View Mode guide.
    31. +
  31. Share / Invite: Invite team members to give them access to this file and all team files.
    32. +
  32. History: The History panel records recent changes in an open file. Use undo/redo to step through changes, and expand each entry for detailed information. Learn more about the history panel.
    33. +
  33. Comments: Switch to Comments Mode to view all comments on the file and add new ones.
    34. +
  34. Zoom: Options to zoom in, zoom out, or fit the canvas.
    35. +
  35. Users: See how many users currently have the file open.
    36. +
  36. Assets: 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.
    37. +
  37. Design tokens: 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.
    38. +
  38. File status: Displays the file’s saving state, showing whether your latest changes are saved or if there’s a problem.

View mode