Add README

README.md

@@ -0,0 +1,55 @@
+# Bring! shopping list TRMNL plugin
+
+![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/yshrdbrn/trmnl-bring-plugin/docker-publish.yml)
+![License](https://img.shields.io/github/license/yshrdbrn/trmnl-bring-plugin)
+![Issues](https://img.shields.io/github/issues/yshrdbrn/trmnl-bring-plugin)
+
+Unofficial Bring! plugin for TRMNL
+
+![Plugin view](views/sample.png)
+
+## How to use
+
+### 1. Create a private plugin on TRMNL dashboard
+
+First, create a [private plugin](https://help.usetrmnl.com/en/articles/9510536-private-plugins) with webhook strategy.
+
+You then need to create the view templates for your plugin. Go to the Edit Markup page:
+
+1. paste the contents of [full-height.liquid](views/full-height.liquid) into the Full and and Half Vertical tabs.
+
+1. paste the contents of [half-height.liquid](views/half-height.liquid) into the Half Horizontal and and Quadrant tabs.
+
+### 2. Run the backend service
+
+The backend service queries Bring! every 15 minutes to grab the list of items in your shopping list and sends the list to TRMNL if the shopping list changed since the last query.
+
+Have these handy:
+
+1. Bring! account email
+1. Bring! account password
+1. TRMNL plugin webhook URL. You can find this at the bottom of your private plugin page.
+
+*Note:* If you signed up to Bring! using Apple ID or Google Sign-in or other SSOs you need to create password first. More [here](https://www.home-assistant.io/integrations/bring/#prerequisites).
+
+You can either run the backend service through docker:
+
+```bash
+docker pull ghcr.io/yshrdbrn/trmnl-bring-plugin:main
+
+docker run
+    -d
+    --name='BringTRMNLPlugin'
+    -e 'EMAIL'='<email>'
+    -e 'PASSWORD'='<password>'
+    -e 'WEBHOOK_URL'='<url>'
+    'ghcr.io/yshrdbrn/trmnl-bring-plugin:main'
+```
+
+or run the script directly:
+
+```bash
+python3 -m venv venv
+pip install -r requirements.txt
+python ./main.py
+```

views/full-height.liquid

@@ -2,12 +2,12 @@
   <div class="columns">
     {% assign number_of_items_per_column = 10 %}
     {% assign number_of_columns = 2 %}
-    {% assign totalCount = items | size %}
+    {% assign total_count = items | size %}
     {% assign number_of_items_displayed = 0 %}
 
     {% assign var = number_of_columns | minus: 1 %}
     {% for i in (0..var) %}
-      {% if number_of_items_displayed >= totalCount %}
+      {% if number_of_items_displayed >= total_count %}
         {% break %}
       {% endif %}
       <div
@@ -18,7 +18,7 @@
       >
         {% assign items_to_display_count = number_of_items_per_column %}
         {% if i == var %}
-          {% assign items_to_display_count = totalCount | minus: number_of_items_displayed %}
+          {% assign items_to_display_count = total_count | minus: number_of_items_displayed %}
         {% endif %}
         {% assign items_to_display = items | slice: number_of_items_displayed, items_to_display_count %}
         {% for item in items_to_display %}

views/half-height.liquid

@@ -0,0 +1,50 @@
+<div class="layout">
+    <div class="columns">
+      {% assign number_of_items_per_column = 5 %}
+      {% assign number_of_columns = 2 %}
+      {% assign total_count = items | size %}
+      {% assign number_of_items_displayed = 0 %}
+
+      {% assign var = number_of_columns | minus: 1 %}
+      {% for i in (0..var) %}
+        {% if number_of_items_displayed >= total_count %}
+          {% break %}
+        {% endif %}
+        <div
+          class="list"
+          data-list-limit="true"
+          data-list-hidden-count="true"
+          data-list-max-height="170"
+        >
+          {% assign items_to_display_count = number_of_items_per_column %}
+          {% if i == var %}
+            {% assign items_to_display_count = total_count | minus: number_of_items_displayed %}
+          {% endif %}
+          {% assign items_to_display = items | slice: number_of_items_displayed, items_to_display_count %}
+          {% for item in items_to_display %}
+            {% assign number_of_items_displayed = number_of_items_displayed | plus: 1 %}
+            <div class="item">
+              <div class="meta">
+                <span class="index"></span>
+              </div>
+              <div class="content">
+                <span class="title title--small">{{ item }}</span>
+              </div>
+            </div>
+          {% endfor %}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+  <div class="title_bar">
+    <img
+      class="image"
+      src="https://cdn.prod.website-files.com/5fbe6548a005d56f0dd39a2e/5fc24a65f7e1555200865e1b_bring-logo.svg"
+    >
+    <span class="title">Bring!</span>
+    <span class="instance">Home</span>
+  </div>
+  
+  <!-- Include the overflow.js script -->
+  <script src="https://usetrmnl.com/js/latest/plugins.js"></script>
+