diff --git a/.gitbook/assets/image (4).png b/.gitbook/assets/image (4).png deleted file mode 100644 index d94cbda..0000000 Binary files a/.gitbook/assets/image (4).png and /dev/null differ diff --git a/README.md b/README.md index 2ade0a4..6f38c64 100644 --- a/README.md +++ b/README.md @@ -10,20 +10,12 @@ description: >- [how-it-works.md](how-it-works.md) {% endcontent-ref %} -{% content-ref url="private-plugins/templates.md" %} -[templates.md](private-plugins/templates.md) -{% endcontent-ref %} - -{% content-ref url="broken-reference" %} -[Broken link](broken-reference) -{% endcontent-ref %} - {% content-ref url="broken-reference" %} [Broken link](broken-reference) {% endcontent-ref %} -{% content-ref url="broken-reference" %} -[Broken link](broken-reference) +{% content-ref url="plugin-marketplace/introduction.md" %} +[introduction.md](plugin-marketplace/introduction.md) {% endcontent-ref %} {% content-ref url="broken-reference" %} diff --git a/SUMMARY.md b/SUMMARY.md index 908e62b..41b0d1b 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -6,7 +6,6 @@ ## Private Plugins * [Screen Templating](private-plugins/templates.md) -* [🖼️ Plugin Templating (DEPRECATED, hidden)](private-plugins/templates-1.md) * [Screen Templating (Graphics)](private-plugins/templates-advanced.md) * [Webhooks](private-plugins/webhooks.md) diff --git a/plugin-marketplace/introduction.md b/plugin-marketplace/introduction.md index 021b127..349be3b 100644 --- a/plugin-marketplace/introduction.md +++ b/plugin-marketplace/introduction.md @@ -4,7 +4,7 @@ description: TRMNL's public marketplace lets any user publish or use another use # Introduction -Our plugin marketplace allows developers to create their own public plugins for other users to install. In the future, the plugin marketplace will enable developers to earn money per install, similar to the Shopify App Marketplace or Google Play Store. +Our plugin marketplace is where developers can make plugins for other users to install. Beginning November 2025, [TRMNL pays developers](https://usetrmnl.com/blog/creator-fund) for their work. There are 2 approaches to publishing a plugin for other users — Public, or Recipe. Review the differences between them before continuing: diff --git a/private-plugins/templates-1.md b/private-plugins/templates-1.md deleted file mode 100644 index 20c06d4..0000000 --- a/private-plugins/templates-1.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -description: TRMNL's native design system for developing beautiful, e-ink friendly screens. -hidden: true ---- - -# 🖼️ Plugin Templating (DEPRECATED, hidden) - -## Overview - -The TRMNL device is an **800x480 pixel, black and white, 1-bit grayscale display**. This meant we had to abandon a lot of modern web styling techniques when developing the API. For example: no gradients, no fancy typeface, and no anti-aliasing. - -We replaced each of these strategies with dithering patterns, bitmap fonts, and a TRMNL-flavored design system. In these docs you'll learn how to adopt our system to build your own beautiful plugins. - -## Quickstart - -Create an HTML file with our plugins CSS embedded in the ``. - -```erb - - - - - - - -
-
-
-
-
-
- Motivational Quote -
“I love inside jokes. I hope to be a part of one someday.”
- Michael Scott -
-
-
-
- -
- - Plugin Title - Instance Title -
-
-
- - -``` - -The above markup should produce a screen like this: - -

Sample screen render with TRMNL's plugin CSS stylesheet

- -After designing a screen to your liking (more examples below), replace dynamic content with `{{ variable }}` references. TRMNL uses the [Liquid templating library](https://shopify.github.io/liquid/) by Shopify to interpolate values into your template markup. - -Next, extract inner the `
` content and paste it into the Markup field of a [custom plugin](https://help.usetrmnl.com/en/articles/9510536-custom-plugins) inside your TRMNL account. - -{% hint style="info" %} -[Tutorial - How to create a custom plugin](https://help.usetrmnl.com/en/articles/9510536-custom-plugins) -{% endhint %} - -**Note**: You may also leverage [Liquid Filters](https://shopify.dev/docs/api/liquid/filters) to reduce the sanitization required by the service producing data for your TRMNL plugins. For example, you can convert "10" to "$10.00" via [money\_with\_currency](https://shopify.dev/docs/api/liquid/filters/money). - -## Basic Structure - -```erb -
-
-
- {{ content }} -
-
-
- -
- - {{ plugin_name }} - {{ instance_name }} -
-``` - -## Columns - -Place content inside a single or multiple `column` class divs. - -This ensures that the content is centered vertically on the screen, and aligned to the top of the column with with most content. - -```erb -
-
-
- {{ content }} -
-
-
-... -``` - -## Gray Scale - -Use `r-bg-{{ shade }}` classes to define background patterns from the gray scale. - -

Grayscale shades

- -
ShadeClass
Blackr-bg-black
Gray 1r-bg-gray-1
Gray 2r-bg-gray-2
Gray 3r-bg-gray-3
Gray 4r-bg-gray-4
Gray 5r-bg-gray-5
Gray 6r-bg-gray-6
Gray 7r-bg-gray-7
Whiter-bg-white
- -## Components - -### Title & Description - -
- -```ruby -Title -Title Small -Description -``` - -### Label - -
- -```ruby -Label -Label Underline -Label Small -Label Small Underline -``` - -### Value - -
- -```ruby -24,276 -24,276 -24,276 -24,276 -24,276 -24,276 -``` - -### Grid - -Here's a simple grid markup of an equal three column grid, with gaps between the columns: - -``` -
-
...
-
...
-
...
-
-``` - -### Item - -

Example of List components

- -```erb -
-
- 1 -
-
- Monthly Catchup with Dev Team - A monthly meeting to discuss progress and obstacles with the development team -
- 10:00 - 11:00 - Confirmed -
-
-
-``` - -### Table - -
- -```ruby - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MetricValue
Recipients20,129
Open rate6.55%
Click rate0.76%
Unsubscribes14
Clicks654
StatusCompleted
-``` - -### Fully built Plugin - -
- -``` -
-
-
-
-
-
- 120,826 - Views -
-
-
-
-
-
-
- 180+ - Days Watched -
-
-
-
-
-
-
-
-
- - 2m 9s - - Average View Duration -
-
-
-
-
- 789 - Subscribers Gained -
-
-
-
-
- 1% - View Through Rate -
-
-
-
-
-
-
-
- 18,567 - Likes -
-
-
-
-
- 4,568 - Comments -
-
-
-
-
- 2,987 - Shares -
-
-
-
- -
- - YouTube - @MrBeast -
-``` - -### Custom Graphs - -
- -```css -#github_commit_graph { - width: 758px; - height: 148px; - overflow: hidden; - - column-count: auto; - column-fill: auto; - column-width: 13px; - column-gap: 0px; -} - -#github_commit_graph .day { - width: 11px; - height: 19px; - float: left; - border-radius: 4px; - margin: 2px 2px 0 2px; - - break-inside: avoid-column; -} -```