Initial site with two plants

.gitignore

@@ -0,0 +1,2 @@
+public
+static/processed_images

config.toml

@@ -0,0 +1,21 @@
+# The URL the site will be built for
+base_url = "https://plants.trivernis.net"
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = true
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = true
+
+insert_anchor_links = "left"
+
+[slugify]
+paths = "safe"
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = true
+
+[extra]
+# Put all your custom variables here

content/plants/_index.md

@@ -0,0 +1,6 @@
++++
+title = "List of plants"
+sort_by = "slug"
+template = "plants.html"
+page_template = "plant.html"
++++

content/plants/aloe-vera.md

@@ -0,0 +1,8 @@
++++
+title = "Aloe Vera"
+assets = ["img/plants/aloe-vera"]
+
+[extra]
+data = "aloe-vera"
++++
+

content/plants/monstera-deliciosa.md

@@ -0,0 +1,8 @@
++++
+title = "Monstera deliciosa"
+assets = ["img/plants/monstera-deliciosa"]
+
+[extra]
+data = "monstera-deliciosa"
++++
+

sass/_common.scss

@@ -0,0 +1 @@
+@import "colors.scss";

sass/colors.scss

@@ -0,0 +1,27 @@
+//// original green
+// $background: #86A466;
+//
+// $highlight: #e97c5e;
+// $secondary: #e97793;
+//
+// $highlight-text: black;
+// $text: black;
+
+// mono green black 
+$background: #82AE9F;
+
+$highlight: #13140F;
+// $secondary: #777395;
+$secondary: white;
+
+$highlight-text: white;
+$text: black;
+
+// // pastell green
+// $background: #7FC6B8;
+
+// $highlight: #40B3A2;
+// $secondary: #E27D5F;
+
+// $highlight-text: black;
+// $text: black;

sass/plant.scss

@@ -0,0 +1,2 @@
+@import "_common.scss";
+

sass/plants.scss

@@ -0,0 +1,61 @@
+@import "_common.scss";
+
+.plants-list {
+  width: 100%;
+  display: block;
+
+  .plant-item {
+    display: flex;
+    float: left;
+    margin: 1em;
+    border-radius: 0.25em;
+    box-shadow: 0.5em 0.5em $highlight;
+    transition-duration: 0.25s;
+    height: 128px;
+    width: 256px;
+
+    a.plant-link {
+      display: block;
+      position: relative;
+  
+      img {
+        border-radius: 0.25em;
+        height: 128px;
+        width: 256px;
+      }
+      h2.plant-title {
+        position: absolute;
+        bottom: 0;      
+        margin: 0;
+        width: 100%;
+        text-align: center;
+        color: white;
+        background-color: rgba(0, 0, 0, 0.1);
+        border-radius: 0.25em 0.25em 0 0;
+        text-decoration: none;
+      }
+    }
+
+    &:hover {
+      margin: 0.75em 1.25em 0.75em 0.75em;
+      box-shadow: 0.75em 0.75em $highlight;
+    }
+    &:active {
+      margin: 1em;
+      box-shadow: 0.5em 0.5em $highlight;
+    }
+  }
+}
+
+@media (max-width: 600px) {
+  .plants-list {
+    display: block;
+
+    .plant-item {
+      display: block;
+      float: none;
+      margin: 1em auto;
+    } 
+  }
+
+}

sass/style.scss

@@ -0,0 +1,144 @@
+@import "https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css";
+@import "_common.scss";
+
+body {
+  font-family: "Noto Sans", "Verdana", sans-serif;
+  background-color: $background;
+  color: $text;
+}
+
+img {
+  image-orientation: from-image;
+}
+
+a {
+  text-decoration-line: underline;
+  text-decoration-color: $secondary;
+  text-decoration-thickness: .125em;
+  color: $text;
+}
+
+footer.footer {
+  position: fixed;
+  bottom: 0;
+  left:0;
+  margin: 0.5em;
+  padding: 0 0.5em;  
+  overflow: hidden;
+  background-color: $highlight;
+  color: grey;
+  width: calc(100% - 2em);
+
+  .footer-item {
+    display: block;
+    padding: 0.5em 1em;
+  }
+
+  a {    
+    color: grey;
+    text-decoration: none;
+  }
+}
+
+.badge {
+    padding: 0.25em;
+    display: inline-block;
+    border-radius: 0.5em;
+    background-color: $highlight;
+    color: $highlight-text;
+
+    .icon, span {
+      float: left;
+      padding-right: 0.25em;
+      margin: auto;
+      line-height: 1;
+    }
+  margin: 0.25em;
+}
+
+.figure {
+  width: 100%;
+  margin: auto;
+  border-radius: .5em;
+  background-color: $highlight;
+  color: $highlight-text;
+  padding-bottom: 0.125em;
+
+  a {
+    color: $highlight-text;
+  }
+
+  figcaption {
+    margin: 0 0.25em 0.25em;
+  }
+
+  img {
+    border-radius: .5em;
+    width: 100%;
+  }
+}
+
+.card {
+  width: 50%;
+  margin: auto;
+}
+
+ul.navbar {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+  background-color: $highlight;
+  overflow: hidden;
+  width: 100%;
+  color: $highlight-text;
+
+  li {
+    display: inline;
+    float: left;
+
+    a {
+      display: block;
+      padding: 1em 2em;
+      text-decoration: none;
+      font-weight: bold;
+      color: $highlight-text;
+
+      &:hover {
+        background-color: darken($highlight, 5%);
+      }
+    }
+  }
+  li.selected a {
+    background-color: lighten($highlight, 5%);
+  }
+}
+
+.content {
+  margin: auto;
+  width: 75%;
+}
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
+@media (max-width: 500px) {
+  .card, .content {
+    width: 100%;
+  }
+}
+
+@media (min-width: 500px) and (max-width: 1000px){
+  .card {
+    width: 75%;
+  }
+  .content {
+    width: 80%;
+  }
+}
+

static/plants/aloe-vera/care.md

@@ -0,0 +1,2 @@
+Aloe Vera needs to be watered about ever 16 days. Make sure the soil is almost completely dry
+before watering it as it can be overwatered easily.

static/plants/aloe-vera/metadata.toml

@@ -0,0 +1,19 @@
+bin_name = "Aloe Vera"
+
+[image]
+url = "/img/plants/aloe-vera.jpg"
+source = "https://commons.wikimedia.org/wiki/File:Aloe_Vera_(4700054020).jpg"
+alt = """
+Aloe Vera. \
+Tentacle-like succulent leaves sprout out from the base of the plant \
+going up at multiple angles.
+"""
+
+[site]
+light = "full or part sun"
+temp = "12°C - 25°C"
+humidity = "dry"
+
+[care]
+water_schedule = "16 days"
+fertilize_schedule = "month"

static/plants/aloe-vera/site.md

@@ -0,0 +1,2 @@
+Aloe Vera prefers to grow in direct sunlight at temperatures between
+12°C and 25°C. It prefers dry climate. 

static/plants/monstera-deliciosa/care.md

@@ -0,0 +1,5 @@
+On average Monstera needs to be watered every 8 days.
+Ideally when the top layer of the dirt has dried out. 
+Monstera is used to growing in high humidity climate. Misting every week will increase
+the health of the plant as it rasises the humditity.
+Make sure to remove dead leaves and branches about every 3 months.

static/plants/monstera-deliciosa/metadata.toml

@@ -0,0 +1,22 @@
+bin_name = "Monstera deliciosa"
+
+[image]
+url = "/img/plants/monstera-deliciosa.jpg"
+source = "https://commons.wikimedia.org/wiki/File:New_Monstera_Deliciosa_Leaf.jpg"
+alt = """
+Monstera deliciosa. \
+A big leaf with gaps is shown in the middle \
+with other leaves in the back. The leaf is heart-shaped. \
+The plant is potted in a pot with a moss stick.\
+"""
+
+[site]
+light = "shade, some sun"
+temp = "18°C - 25°C"
+humidity = "humid"
+
+[care]
+water_schedule = "8 days"
+mist_schedule = "week"
+fertilize_schedule = "16 days"
+clean_schedule = "3 months"

static/plants/monstera-deliciosa/site.md

@@ -0,0 +1,3 @@
+Monstera is best positioned in an area with changing shade and sunny
+conditions. It is best kept indoors at temperatures between 18°C and 25°C.
+Monstera prefers humid climate which can be achieved by misting the plant regularly.

templates/base.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+{% block head %}
+  <meta charset="utf-8">
+  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+
+  <title>Plant Wiki</title>
+  
+  {% set feathersrc = load_data(url="https://unpkg.com/feather-icons") %}
+  <script>{{ feathersrc | safe }}</script>
+
+  {% block css %}
+    <link href="{{ get_url(path="style.css", trailing_slashes=false) | safe }}" rel="stylesheet">
+  {% endblock css %}
+
+{% endblock head %}
+</head>
+
+<body>
+  <ul class="navbar">
+    <li {% if current_path == "/" %} class="selected" {% endif %}>
+      <a href="{{ get_url(path="/")}}">Home</a>
+    </li>
+    <li {% if current_path == "/plants/" %} class="selected" {% endif %}>
+      <a href="{{ get_url(path="@/plants/_index.md")}}">Plants</a>
+    </li>
+  </ul>
+  <section class="main">
+    <div class="container">
+      {% block content %} {% endblock %}
+    </div>
+  </section>
+
+  <footer class="footer">
+    <div class="footer-item float-left">
+      <a href="https://trivernis.net">My Website</a>
+    </div>
+    <div class="footer-item float-right">
+      <a href="https://git.trivernis.net/trivernis/plantwiki">Source</a>
+    </div>
+  </footer>
+
+  <script>
+    feather.replace();
+  </script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+{% block content %}
+  <section class="content">
+    <h1 class="title">Welcome to the plant wiki.</h1>
+    <p>This is where I put the information I need to take care of my houseplants.</p>
+    <p>The list of plants can be found <b><a href="{{ get_url(path="@/plants/_index.md") }}">here</a></b>
+  </section class="content">
+{% endblock content %}

templates/macros.html

@@ -0,0 +1,21 @@
+{% macro badge(text, plain, class, icon) %}
+  <div class="badge {{class}}" aria-label="{{ plain }}" title="{{ plain }}">
+    <i class="ri-{{ icon }}-fill icon" aria-hidden="true"></i><span aria-hidden="true"> {{ text }}</span>
+  </div>
+{% endmacro %}
+{% macro figure(url, alt, description="", source="") %}
+  <figure class="figure">
+    <img class="figure-img" src="{{url}}" alt="{{alt}}" title="{{alt}}">
+
+    {% if description != "" or source != "" %}
+      <figcaption class="figure-description">
+      {% if description != "" %}
+        {{description}}
+      {% endif %}
+      {% if source != "" %}
+        <i>(<a class="figure-source" href="{{source}}">Source</a>)</i>
+      {% endif %}
+      </figcaption>
+    {% endif %}
+  </figure>
+{% endmacro %}

templates/plant.html

@@ -0,0 +1,63 @@
+{% extends "base.html" %}
+{% import "macros.html" as macros %}
+
+{% block css %}
+    {{super()}}
+    <link href="{{ get_url(path="plant.css", trailing_slashes=false) | safe }}" rel="stylesheet">
+{% endblock css %}
+
+{% block content %}
+{% set data = load_data(path="/static/plants/" ~ page.extra.data ~ "/metadata.toml") %}
+<div class="card">
+
+  <h1 class="title">
+    {{ page.title }}
+    (<i>{{data.bin_name}}</i>)
+  </h1>
+
+  {% block image %}
+    {% set image = resize_image(path=data.image.url, width=1024, height=512) %}
+    {{ macros::figure(url=image.url, alt=data.image.alt, source=data.image.source) }}
+  {% endblock image %}
+  <section>
+    <a href="#site"><h3>Site</h3></a>
+
+    {% if data.site.temp %}
+      {{ macros::badge(icon="thermometer", class="temp-badge", text=data.site.temp, plain="Prefers " ~ data.site.temp ~ " temperatures.") }}
+    {% endif %}
+
+    {% if data.site.light %}
+      {{ macros::badge(icon="sun", class="light-badge", text=data.site.light, plain="Prefers " ~ data.site.light ~ " lighting conditions.") }}
+    {% endif %}
+
+    {% if data.site.humidity%}
+      {{ macros::badge(icon="drop", class="humid-badge", text=data.site.humidity, plain="Prefers " ~ data.site.humidity~ " humidity.") }}
+    {% endif %}
+
+    {% block site %}
+      {{ load_data(path="/static/plants/" ~ page.extra.data ~ "/site.md") | markdown | safe }}
+    {% endblock site %}
+  </section>
+
+  <section>
+    <a href="care"><h3>Care</h3></a>
+
+    {% if data.care.water_schedule %}
+      {{ macros::badge(icon="drizzle", class="water-badge", text="every " ~ data.care.water_schedule, plain="Water every " ~ data.care.water_schedule ~ ".") }}
+    {% endif %}
+
+    {% if data.care.mist_schedule %}
+      {{ macros::badge(icon="mist", class="mist-badge", text="every " ~ data.care.mist_schedule, plain="Mist every " ~ data.care.mist_schedule ~ ".") }}
+    {% endif %}
+
+    {% if data.care.clean_schedule %}
+      {{ macros::badge(icon="brush-2", class="clean-badge", text="every " ~ data.care.clean_schedule, plain="Clean every " ~ data.care.clean_schedule ~ ".") }}
+    {% endif %}
+
+    {% block care %}
+      {{ load_data(path="/static/plants/" ~ page.extra.data ~ "/care.md") | markdown | safe }}
+    {% endblock care %}
+  </section>
+  {{ page.content | safe }}
+</div>
+{% endblock content %}

templates/plants.html

@@ -0,0 +1,25 @@
+{% extends "base.html" %}
+
+{% block css %}
+    {{super()}}
+    <link href="{{ get_url(path="plants.css", trailing_slashes=false) | safe }}" rel="stylesheet">
+{% endblock css %}
+
+{% block content %}
+<h1 class="title">
+  {{ section.title }}
+</h1>
+<div class="plants-list">
+  <!-- If you are using pagination, section.pages will be empty. You need to use the paginator object -->  
+  {% for page in section.pages %}
+  <div class="plant-item">
+    {% set data = load_data(path="/static/plants/" ~ page.extra.data ~ "/metadata.toml") %}
+    {% set image = resize_image(path=data.image.url, width=256, height=128, op="fill") %}
+    <a class="plant-link" href="{{ page.permalink | safe }}">
+      <img class="plant-image" src="{{ image.url }}" alt="{{ data.image.alt }}">
+      <h2 class="plant-title">{{ page.title }}</h2>
+    </a>
+  </div>
+  {% endfor %}
+</div>
+{% endblock content %}

templates/shortcodes/badge.html

@@ -0,0 +1,2 @@
+{% import "macros.html" as macros %}
+{{ macros::badge(text=text, plain=plain, icon=icon, class=class) }}