Merge branch 'main' into mastodon-added

.gitignore

@@ -8,3 +8,4 @@ node_modules/
 .cache
 
 # saga build
+.nova/Configuration.json

.nova/Configuration.json

@@ -1,5 +1,4 @@
 {
-  "eablokker.tabsSidebar.config.customKindGroupsOrder": ["env", "javascript", "xml", "nunjucks-html"],
   "editor.default_syntax": "nunjucks-html",
   "workspace.art_style": 1,
   "workspace.color": 9,

eleventy.config.js

@@ -124,7 +124,7 @@ module.exports = function (eleventyConfig) {
 
   // Local Server
   eleventyConfig.setServerOptions({
-    port: 3791,
+    port: env.siteport ,
   });
 
   // ignore README

env.example

@@ -4,4 +4,6 @@
 # The values are picked up in /content/data/env.js
 ELEVENTY_ENV = "dev" #dev or prod
 SITE_URL = "http://localhost:3791"
-BRANCH = "main"
+SITE_PORT = 3791 # the same as the SITE_URL port
+BRANCH = "main" #gitbranch
+PORT = 8082 #netlifycmsport

src/content/_data/env.js

@@ -3,6 +3,8 @@ require("dotenv").config();
 module.exports = {
   mode: process.env.ELEVENTY_ENV || "prod",
   url: process.env.SITE_URL || process.env.URL,
+  siteport: process.env.SITE_PORT || "3791",
+  netlifycmsport: process.env.PORT || "8082",
   branch: process.env.BRANCH || "main",
   root: process.env.ELEVENTY_ROOT,
   source: process.env.ELEVENTY_SOURCE,

src/system/netlifycms/config.njk

@@ -6,7 +6,12 @@ eleventyExcludeFromCollections: true
 backend:
   name: git-gateway
   branch: {{ env.branch }}
-local_backend: true
+
+
+local_backend:
+  # when using a custom proxy server port
+  url: http://localhost:{{ env.netlifycmsport }}/api/v1
+
 #SETTINGS
 site_url: {{ env.url }}
 logo_url: {{ env.url }}/themes/{{ theme }}/assets/img/icon-admin.png

src/system/netlifycms/fields/component.njk

@@ -317,16 +317,44 @@
               - { label: title, name: title, widget: string, default: 'Contact', required: false }
               - { label: Form name, name: name, widget: string, default: 'Contact', required: true, hint: "The name of the form for netlify" }
               - { label: action url, name: action, widget: string, default: 'Contact', required: false, hint: "Link to the page the form goes to after submit" }
-              - label: elements
+              - label: Form elements
                 name: elements
                 widget: list
                 summary: '{{fields.title}} || {{fields.inputtype}}'
                 add_to_top: true
-                fields:
-                  - { label: inputtype, name: inputtype, widget: select, options: ["text", "email", "tel", "url","date","textarea"], default: text }
-                  - { label: title, name: title, widget: string, required: false }
-                  - { label: placeholder, name: placeholder, widget: string, required: false }
-                  - { label: required, name: required, widget: boolean, default: false, required: false }
+                types:
+                  - label: "Input : text, tel, phone, url"
+                    name: text
+                    widget: list
+                    fields:
+                      - { label: inputtype, name: inputtype, widget: select, options: ["text", "email", "tel", "url","date"], default: text }
+                      - { label: title, name: title, widget: string, required: true }
+                      - { label: placeholder, name: placeholder, widget: string, required: false }
+                      - { label: required, name: required, widget: boolean, default: false, required: false }
+                  - label: Textarea
+                    name: textarea
+                    widget: list
+                    fields:
+                      - { label: title, name: title, widget: string, required: true, default: Message }
+                      - { label: required, name: required, widget: boolean, default: false, required: false }
+
+                  - label: "Options: Dropdown / Checkbox / Radio"
+                    name: options
+                    widget: list
+                    fields:
+                      - { label: title, name: title, widget: string, required: true }
+                      - { label: "Option type", name: inputtype, widget: select, options: ["Dropdown", "Radio", "Checkbox"], default: Dropdown }
+                      - { label: required, name: required, widget: boolean, default: false, required: false }
+                      - label: option
+                        name: option
+                        widget: list
+                        summary: '{{fields.title}} || {{fields.inputtype}}'
+                        add_to_top: true
+                        fields:
+                          - { label: title, name: title, widget: string, required: true }
+                          - { label: "checked/selected", name: checked, widget: boolean, default: false, required: false }
+
+
               - { label: text, name: text, widget: markdown, required: false }
               - name: "template"
                 label: "Template"

src/themes/grunn/includes/components/form/field/input.njk

@@ -2,19 +2,19 @@
 <div class="flex flex-col">
 
   <label
-    for="form-item-{{ item.title | urlencode }}"
-    class="font-bold text-lg text-slate-700 dark:text-cyan-100 hover:text-slate-800 hover:cursor-pointer">
+    for="form-item-{{ item.title | slugify }}"
+    class="font-bold text-lg hover:text-slate-800 hover:cursor-pointer">
     {{ item.title }}
     {% if item.required %} * {% endif %}
   </label>
 
   <input
-  type="{{ item.inputtype }}"
-    name="{{ name }}"
-    id="form-item-{{ item.title | urlencode }}"
+    type="{{ item.inputtype }}"
+    name="{{ item.title | slugify }}"
+    id="form-item-{{ item.title | slugify }}"
     placeholder="{{ item.placeholder }} "
     {% if item.required %}required{% endif %}
-    class="rounded bg-slate-200 border-slate-300 dark:text-slate-800
+    class="rounded bg-slate-200 border-slate-300 text-gray-800
            focus:outline-none focus:border-white focus:ring-2 focus:ring-offset-2 focus:ring-offset-cyan-500 focus:ring-white
            focus:bg-slate-200"
   />

src/themes/grunn/includes/components/form/field/options.njk

@@ -0,0 +1,46 @@
+{%- if env.mode != 'prod' %}<!-- 👋 field/options.njk --> file{%- endif  -%}
+<div class="flex flex-col">
+
+  <label
+    for="form-item-{{ item.title | slugify }}"
+    class="font-bold text-lg hover:text-slate-800 hover:cursor-pointer">
+    {{ item.title }}
+    {% if item.required %} * {% endif %}
+  </label>
+
+{# Dropdown #}
+{% if item.inputtype == "Dropdown" %}
+  <select name="select">
+
+  {% for option in item.option %}
+   <option label="{{ option.title | slugify }}" {% if option.checked %} selected {% endif %}>
+    {{ option.title }}
+  </option>
+  {% endfor %}
+
+  </select>
+{# /Dropdown #}
+
+{% elif item.inputtype == "Radio" %}
+{# Radio #}
+  {% for option in item.option %}
+  <div class="py-4">
+    <input type="radio" id="{{ option.title | slugify }}" name="{{item.title | slugify }}" {% if option.checked %}checked{% endif %}>
+    <label for="{{ option.title | slugify }}"> {{ option.title }} </label>
+  </div>
+  {% endfor %}
+{# /Radio #}
+
+{% elif item.inputtype == "Checkbox" %}
+{# Checkbox #}
+  {% for option in item.option %}
+  <div class="py-4">
+    <input type="checkbox" id="{{ option.title | slugify }}" {% if option.checked %}checked{% endif %}>
+    <label for="{{ option.title | slugify }}"> {{ option.title }} </label>
+  </div>
+  {% endfor %}
+
+{% endif %}
+{#/ Checkbox #}
+</div>
+

src/themes/grunn/includes/components/form/field/textarea.njk

@@ -2,16 +2,20 @@
 <div class="flex flex-col ">
 
   <label
-    for="form-item-{{ item.title | urlencode  }}"
-    class="font-bold text-lg text-slate-700 dark:text-cyan-100 hover:text-slate-800 hover:cursor-pointer">{{ item.title }}</label>
+    for="form-item-{{ item.title | slugify  }}"
+    class="font-bold text-lg hover:cursor-pointer">
+    {{ item.title }}
+    {% if item.required %} * {% endif %}
+  </label>
+
+  <textarea
+    name="{{ item.title | slugify }}"
+    id="form-item-{{ item.title | slugify  }}"
+    placeholder="{{ item.placeholder }} "
+    {% if item.required %}required{% endif %}
+    class="w-full h-80
+          rounded bg-slate-200 border-slate-300  dark:text-slate-800
+          focus:outline-none focus:border-white focus:ring-2 focus:ring-offset-2 focus:ring-offset-cyan-500 focus:ring-white
+          focus:bg-slate-200"></textarea>
 
-    <textarea
-      name="{{ name }}"
-      id="form-item-{{ item.title | urlencode  }}"
-      placeholder="{{ item.placeholder }} "
-      {% if item.required %}required{% endif %}
-      class="w-full h-80
-            rounded bg-slate-200 border-slate-300  dark:text-slate-800
-            focus:outline-none focus:border-white focus:ring-2 focus:ring-offset-2 focus:ring-offset-cyan-500 focus:ring-white
-            focus:bg-slate-200"></textarea>
 </div>

src/themes/grunn/includes/components/form/form.njk

@@ -28,20 +28,19 @@
     {# Create form elements #}
     {% for item in component.elements %}
 
-      {% if item.inputtype == "textarea" %}
+      {% if item.type == "textarea" %}
         {% include "components/form/field/textarea.njk" %}
-      {% else %}
+      {% elif item.type == "text" %}
         {% include "components/form/field/input.njk" %}
-      {% endif %}
+      {% elif item.type == "options" %}
+        {% include "components/form/field/options.njk" %}
+     {% endif %}
 
     {% endfor %}
 
 
     <div class="flex flex-row justify-end">
 
-      {# <input type="reset" value="reset"
-             class="px-4 py-2 rounded-sm font-bold uppercase bg-slate-400 text-slate-800 hover:bg-slate-300">
-  #}
       <button
           aria-label="Submit"
           class="px-4 py-2 rounded-sm font-bold uppercase bg-lime-400 text-green-900 hover:bg-lime-300">Send</button>