0.1.6 🚀

digitalmalayali · May 22, 2024 · 41499e5 · 41499e5
1 parent 72512ee
commit 41499e5
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 412 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -27,7 +27,7 @@
 # [0.1.5](https://github.com/digitalmalayali/linkhub-jekyll-theme/releases/tag/v0.1.5) (15-05-2024)
 - Fixed Open Graph image URL (again!).
 
-# [0.1.6](https://github.com/digitalmalayali/linkhub-jekyll-theme/releases/tag/v0.1.6) (22-05-2024)
+# [0.1.6](https://github.com/digitalmalayali/linkhub-jekyll-theme/releases/tag/v0.1.6) (23-05-2024)
 - Fixed favicon image type.
 - Added option to set fixed button width.
 - Added option to set icon position to left or right.
diff --git a/README.md b/README.md
@@ -39,6 +39,8 @@ A minimal and super-lightweight, free Jekyll theme to create a single-page, link
     - [Adding Links](#adding-links)
       - [`links.yml`](#linksyml)
       - [Adding Custom Icons](#adding-custom-icons)
+      - [Setting Button Width](#setting-button-width)
+      - [Setting Icon Position](#setting-icon-position)
     - [Remove Dark/Light Mode Switch](#remove-darklight-mode-switch)
   - [Contributing](#contributing)
   - [Powered by Linkhub](#powered-by-linkhub)
@@ -113,7 +115,7 @@ favicon:
 logo: https://picsum.photos/200 # Path / URL to the logo (e.g., 'assets/images/logo.png')
 url: https://link.example.com # URL of your website
 locale: en_GB # The value specifies the locale in which these tags are marked up. It follows the format `language_TERRITORY`.
-ga4: G-XXXXXXX # Google Analytics 4 measurement ID (optional). Remove it if it’s not needed..
+ga4: # Google Analytics 4 measurement ID, for e.g. G-XXXXXXX (optional). Remove it if it’s not needed.
 twitter:
   username: UserName # Used for SEO
 image:
@@ -170,15 +172,15 @@ Like Later's link-in-bio feature, you can include external links to your Instagr
 - name: Instagram
   items:
     - url: https://www.example.com
-      image: https://picsum.photos/700/400 # You can use paths to images in the assets folder, e.g., assets/images/insta.jpg.
+      image: https://picsum.photos/700/400.webp # You can use paths to images in the assets folder, e.g., assets/images/insta.jpg.
     - url: https://www.example.com
-      image: https://picsum.photos/200
+      image: https://picsum.photos/200.webp
 
 - name: YouTube
   ratio: vertical # For vertical 9:16 aspect ratio. Ideal for video thumbnails, such as those used on Instagram Reels, YouTube Shorts and TikTok. To use the default 1:1 aspect ratio (square), remove this variable.
   items:
     - url: https://www.example.com
-      image: https://picsum.photos/720/1280
+      image: https://picsum.photos/720/1280.webp
 ```
 
 ### Remove Instagram/TikTok/YouTube Link-in-bio
@@ -194,14 +196,14 @@ Edit the [links.yml](_data/links.yml) file in the [_data](_data) folder to add l
 #### `links.yml`
 
 ```yml
-fixed-button-width: false # Set to true or remove it if it’s not needed
-icon-position: left # Set to left or remove it if it's not needed
+fixed-button-width: false # Set to true/false
+icon-position: left # Set to left/right
 buttons:
   - category: Blogs
     items:
     - title: Example
       url: https://www.example.com
-      icon: ri:film-fill # Icons are optional
+      icon: tdesign:activity # Icons are optional
       tag: Tag
 
     - title: Example 2
@@ -217,12 +219,18 @@ buttons:
     items:
     - title: Example 4
       url: https://www.example.org
-      icon: clarity:language-solid
+      icon: ion:flower-sharp
       tag: New
 ```
 #### Adding Custom Icons
 As shown in the example above, you can use the `custom-icon` variable to insert custom SVG icons. Be sure to paste the entire SVG markup. You can use [SVGOMG](https://jakearchibald.github.io/svgomg/) to optimize the SVG.
 
+#### Setting Button Width
+You can set the width of buttons to `fixed` using the variable `fixed-button-width: true`. This will set the width of all buttons to a fixed 50%. You can change this value in [links.html](https://github.com/digitalmalayali/linkhub-jekyll-theme/blob/main/_includes/links.html#L12).
+
+#### Setting Icon Position
+With version 0.1.6, it's now possible to set the position of icons to left or right using `icon-position: left`. Please note that setting the icon position will set it for all buttons. You can't do it for individual buttons. And tags will switch to the opposite position.
+
 ### Remove Dark/Light Mode Switch
 To remove the dark/light mode switch, edit the [default.html](_layouts/default.html) layout file and remove or comment out the following line:
 

diff --git a/_config.yml b/_config.yml
@@ -11,7 +11,7 @@ favicon:
 logo: https://picsum.photos/200.webp # Path / URL to the logo (e.g., 'assets/images/logo.png')
 url: https://link.example.com # URL of your website
 locale: en_GB # The value specifies the locale in which these tags are marked up. It follows the format `language_TERRITORY`.
-ga4: G-XXXXXXX # Google Analytics 4 measurement ID (optional). Remove it if it’s not needed..
+ga4: # Google Analytics 4 measurement ID, for e.g. G-XXXXXXX (optional). Remove it if it’s not needed.
 twitter:
   username: UserName # Used for SEO
 image:

diff --git a/_data/links.yml b/_data/links.yml
@@ -1,11 +1,11 @@
-fixed-button-width: false # Set to true/false or remove it if it’s not needed
-icon-position: left # Set to left/right or remove it if it's not needed
+fixed-button-width: false # Set to true/false
+icon-position: left # Set to left/right
 buttons:
   - category: Blogs
     items:
     - title: Example
       url: https://www.example.com
-      icon: ri:film-fill # Icons are optional
+      icon: tdesign:activity # Icons are optional
       tag: Tag
 
     - title: Example 2
@@ -21,5 +21,5 @@ buttons:
     items:
     - title: Example 4
       url: https://www.example.org
-      icon: clarity:language-solid
+      icon: ion:flower-sharp
       tag: New
diff --git a/_includes/links.html b/_includes/links.html
@@ -9,24 +9,7 @@ <h2 class="text-center">{{ button.category }}</h2>
             <div class="col is-center">
                 {% endif %}
                 {% if site.data.links.fixed-button-width == true %}
-                <a class="button outline secondary" style="width:50%" href="{{ item.url }}" target="_blank">
-                    {% else %}
-                    <a class="button outline secondary" href="{{ item.url }}" target="_blank">
-                        {% endif %}
-                        {% if site.data.links.icon-position == "right" %}
-                        {% if item.tag %}<span class="tag is-small bd-success text-success" style="margin-right:.2em">{{ item.tag }}</span>
-                        {% endif %}{{ item.title }}{% if item.icon %}<span class="iconify-inline"
-                            data-icon="{{ item.icon }}" style="margin-left:.5em;margin-right:0"></span>
-                        {% endif %}
-                        {% if item.custom-icon %}<span class="custom-icon" style="margin-left:.5em">{{ item.custom-icon }}</span>{% endif %}
-                    </a>
-                    {% else %}
-                    {% if item.icon %}<span class="iconify-inline" data-icon="{{ item.icon }}"></span>{% endif %}
-                    {% if item.custom-icon %}<span class="custom-icon" style="margin-right:.5em">{{ item.custom-icon }}</span>
-                    {% endif %}{{ item.title }}
-                    {% if item.tag %}<span class="tag is-small bd-success text-success" style="margin-left:.2em">{{ item.tag }}</span>
-                    {% endif %}</a>
-                {% endif %}
+                <a class="button outline secondary" style="width:50%" href="{{ item.url }}" target="_blank">{% else %}<a class="button outline secondary" href="{{ item.url }}" target="_blank">{% endif %}{% if site.data.links.icon-position == "right" %}{% if item.tag %}<span class="tag is-small bd-success text-success" style="margin-right:.5em">{{ item.tag}}</span>{% endif %}{{ item.title }}{% if item.icon %}<span class="iconify-inline" data-icon="{{ item.icon }}" style="margin-left:.5em;margin-right:0"></span>{% endif %}{% if item.custom-icon %}<span class="custom-icon" style="margin-left:.5em">{{ item.custom-icon }}</span>{% endif %}</a>{% else %}{% if item.icon %}<span class="iconify-inline" data-icon="{{ item.icon }}"></span>{% endif %}{% if item.custom-icon %}<span class="custom-icon" style="margin-right:.5em">{{ item.custom-icon}}</span>{% endif %}{{ item.title }}{% if item.tag %}<span class="tag is-small bd-success text-success" style="margin-left:.5em">{{ item.tag }}</span>{% endif %}</a>{% endif %}
             </div>
         </div>
         {% endfor %}

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-    {% if site.ga4 %}
+    {% if site.ga4 != null %}
     {% include ga4.html %}
     {% endif %}
     <meta charset="UTF-8">