🐛 fix(home-banner): allow missing image & correct spacing (#123)

Also removes the necessity for $BASE_URL in specifying home banner images.

README.md

@@ -101,7 +101,7 @@ section_path = "blog/_index.md"
 
 ```
 [extra]
-header = {title = "Hello! I'm tabi~", img = "$BASE_URL/img/main.webp" }
+header = {title = "Hello! I'm tabi~", img = "img/main.webp" }
 ```
 
 The content outside the front matter will be rendered between the header title and the posts listing. In the screenshot above, it's the text that reads "tabi is a fast, lightweight, and modern Zola theme…".

content/_index.ca.md

@@ -5,7 +5,7 @@ sort_by = "date"
 template = "section.html"
 
 [extra]
-header = {title = "Hola! Soc tabi~", img = "$BASE_URL/img/main.webp" }
+header = {title = "Hola! Soc tabi~", img = "img/main.webp" }
 section_path = "blog/_index.ca.md"
 max_posts = 4
 +++

content/_index.es.md

@@ -5,7 +5,7 @@ sort_by = "date"
 template = "section.html"
 
 [extra]
-header = {title = "¡Hola! Soy tabi~", img = "$BASE_URL/img/main.webp" }
+header = {title = "¡Hola! Soy tabi~", img = "img/main.webp" }
 section_path = "blog/_index.es.md"
 max_posts = 4
 +++

content/_index.md

@@ -5,7 +5,7 @@ sort_by = "date"
 template = "section.html"
 
 [extra]
-header = {title = "Hello! I'm tabi~", img = "$BASE_URL/img/main.webp" }
+header = {title = "Hello! I'm tabi~", img = "img/main.webp" }
 section_path = "blog/_index.md"
 max_posts = 4
 +++

sass/parts/_home-banner.scss

@@ -1,79 +1,75 @@
 #banner-container-home {
     display: flex;
-    width: 100%;
-    margin: 0.2rem auto;
-    align-items: center;
     justify-content: center;
-}
+    align-items: center;
-
+    margin: 0.2rem auto;
-.image-container-home {
-    position: relative;
-    width: 22%;
-    overflow: hidden;
-    text-align: center;
-}
-
-#home-banner-text {
-    width: 78%;
-    margin-bottom: 30px;
-    font-size: 1.875rem;
-    line-height: 3rem;
-    color: var(--primary-color);
-}
-
-.home-banner-header {
-    margin-bottom: 1rem;
-    font-size: 2.8rem;
-    font-weight: 550;
-}
-
-#banner-home-subtitle {
-    width: 95%;
-    padding-right: 5%;
-    font-weight: 250;
-    line-height: 1.75rem;
-    color: var(--text-color);
-}
-
-#banner-home-subtitle p {
-    font-size: 1rem;
-}
-
-#banner-home-subtitle a {
-    font-weight: 400;
-}
-
-.banner-home-img {
-    aspect-ratio: 1 / 1;
-    max-width: 15rem;
-    max-height: 15rem;
     width: 100%;
-    height: auto;
-    border: none;
-}
 
-@media only screen and (max-width: 600px) {
+    @media only screen and (max-width: 600px) {
-    #banner-container-home {
         display: block;
-        margin: 0em auto;
         margin-bottom: 2rem;
     }
 
-    .home-banner-header {
-        font-size: 2.2rem;
-        margin-bottom: 0;
-    }
-
-    .banner-home-img {
-        max-width: 12rem;
-        max-height: 12rem;
-    }
-
-    .image-container-home {
-        width: 95%;
-    }
-
     #home-banner-text {
-        width: 95%;
+        margin-bottom: 1.5rem;
+        color: var(--primary-color);
+        font-size: 1.875rem;
+        line-height: 3rem;
+
+        #home-banner-header {
+            margin-bottom: 1rem;
+            font-weight: 550;
+            font-size: 2.8rem;
+
+            @media only screen and (max-width: 600px) {
+                margin-bottom: 0;
+                font-size: 2.2rem;
+            }
+        }
+
+        #banner-home-subtitle {
+            color: var(--text-color);
+            font-weight: 250;
+            line-height: 1.75rem;
+
+            p {
+                font-size: 1rem;
+            }
+
+            a {
+                font-weight: 400;
+            }
+        }
+
+        @media only screen and (max-width: 600px) {
+            width: 100%;
+        }
+    }
+
+    #image-container-home {
+        position: relative;
+        padding-left: 2rem;
+        min-width: 11rem;
+        min-height: 11rem;
+        overflow: hidden;
+        text-align: center;
+
+        #banner-home-img {
+            border: none;
+            aspect-ratio: 1 / 1;
+            width: 100%;
+            max-width: 15rem;
+            height: auto;
+            max-height: 15rem;
+
+            @media only screen and (max-width: 600px) {
+                max-width: 12rem;
+                max-height: 12rem;
+            }
+        }
+
+        @media only screen and (max-width: 600px) {
+            padding-left: 0;
+        }
     }
 }

templates/macros/page_desc.html

@@ -2,14 +2,24 @@
 
 <div id="banner-container-home">
     <div id="home-banner-text">
-        <div class="home-banner-header">{{ desc.title }}</div>
+        <div id="home-banner-header">{{ desc.title }}</div>
         <section id="banner-home-subtitle">
             {{ page.content | safe }}
         </section>
     </div>
-    <div class="image-container-home">
+    {%- if desc.img -%}
-        <img alt="the owner" class="banner-home-img" src={{ desc.img | replace(from="$BASE_URL", to=config.base_url) | safe}} />
+        {# Check if the image contains "$BASE_URL". This feature will be removed in the future #} {# in favour of using the proper image path. It will be a breaking change. #}
-    </div>
+        {%- if desc.img is containing("$BASE_URL") -%}
+            {%- set image_path = desc.img | replace(from="$BASE_URL", to=config.base_url) | safe -%}
+            {# When the feature is removed, uncomment below to throw a descriptive error #}
+            {# {{ throw(message="ERROR: The image path for the header should not contain '$BASE_URL'. Please remove it and use the proper image path.") }} #}
+        {%- else -%}
+            {%- set image_path = get_url(path=desc.img, trailing_slash=false) | safe -%}
+        {%- endif -%}
+        <div id="image-container-home">
+            <img alt="the owner" id="banner-home-img" src="{{ image_path }}" />
+        </div>
+    {%- endif -%}
 </div>
 
 {% endmacro %}