0.1.6

digitalmalayali · May 22, 2024 · 72512ee · 72512ee
1 parent 950027c
commit 72512ee
Show file tree

Hide file tree

Showing 10 changed files with 457 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,4 +25,9 @@
 - Option to hide Dark/light mode switch.
 
 # [0.1.5](https://github.com/digitalmalayali/linkhub-jekyll-theme/releases/tag/v0.1.5) (15-05-2024)
-- Fixed Open Graph image URL (again!).
+- Fixed Open Graph image URL (again!).
+
+# [0.1.6](https://github.com/digitalmalayali/linkhub-jekyll-theme/releases/tag/v0.1.6) (22-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
@@ -107,16 +107,18 @@ theme: linkhub-jekyll-theme
 name: Linkhub  # Name of your website
 tagline: Links  # Set your preferred page title
 description: A free, open-source Jekyll link-in-bio theme.  # Also used as a meta description
-favicon: https://picsum.photos/32/32 # Path / URL to the favicon of your website (e.g., 'assets/images/favicon.png')
+favicon:
+  path: https://i.ibb.co/SBRmBmt/favicon.png # Path / URL to the favicon of your website (e.g., 'assets/images/favicon.png')
+  type: png # File format of image. Change according to your image. Supported types: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
 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 not needed.
+ga4: G-XXXXXXX # Google Analytics 4 measurement ID (optional). Remove it if it’s not needed..
 twitter:
   username: UserName # Used for SEO
 image:
   path: assets/images/example.jpg # Used for SEO (og:image, twitter:image)
-  type: jpeg # File format of image. Change according to your image. Supported types: https://en.wikipedia.org/wiki/Media_type#Common_examples
+  type: jpeg # File format of image.
   height: 100 # Pixels
   width: 100
   alt: logo
@@ -192,22 +194,31 @@ Edit the [links.yml](_data/links.yml) file in the [_data](_data) folder to add l
 #### `links.yml`
 
 ```yml
-- category: Blogs
-  items:
+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
+buttons:
+  - category: Blogs
+    items:
     - title: Example
       url: https://www.example.com
-      icon: ri:film-fill
-      tag: New
+      icon: ri:film-fill # Icons are optional
+      tag: Tag
 
     - title: Example 2
       url: https://www.example.org
-      custom-icon: <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="_x32_" width="800" height="800" version="1.1" viewBox="0 0 512 512"><style>.st0{fill:#000}</style><path d="M378.409 0H195.118l-9.314 9.315L57.017 138.101l-9.314 9.315V426.105c0 47.36 38.528 85.896 85.895 85.896h244.811c47.361 0 85.888-38.535 85.888-85.896V85.896C464.297 38.528 425.77 0 378.409 0zm54.084 426.104c0 29.877-24.214 54.091-54.084 54.091H133.598c-29.877 0-54.091-24.214-54.091-54.091V160.592h83.717c24.884 0 45.07-20.179 45.07-45.071V31.804h170.114c29.87 0 54.084 24.214 54.084 54.091v340.209z" class="st0"/><path d="m180.296 296.668-4.846-.67c-10.63-1.487-14.265-4.978-14.265-10.104 0-5.78 4.309-9.817 12.383-9.817 5.653 0 11.305 1.62 15.745 3.764 1.886.942 3.903 1.487 5.789 1.487 4.845 0 8.612-3.63 8.612-8.616 0-3.226-1.481-5.921-4.71-7.939-5.384-3.372-15.476-6.06-25.572-6.06-19.781 0-32.436 11.171-32.436 27.998 0 16.15 10.232 24.898 28.938 27.454l4.846.67c10.903 1.48 14.129 4.846 14.129 10.229 0 6.326-5.247 10.766-14.939 10.766-6.727 0-12.111-1.745-19.645-5.921-1.616-.942-3.634-1.62-5.788-1.62-5.115 0-8.885 3.91-8.885 8.756 0 3.226 1.616 6.326 4.713 8.344 6.054 3.764 15.878 7.8 28.798 7.8 23.823 0 35.934-12.24 35.934-28.795 0-16.554-9.824-25.038-28.801-27.726zM281.108 259.382c-4.577 0-7.939 2.43-9.556 7.674l-16.69 54.51h-.402l-17.634-54.51c-1.745-5.244-4.978-7.674-9.551-7.674-5.653 0-9.692 4.176-9.692 9.287 0 1.347.269 2.834.67 4.175l23.286 68.104c2.96 8.477 6.727 11.57 12.652 11.57 5.785 0 9.555-3.093 12.516-11.57l23.282-68.104c.406-1.341.674-2.828.674-4.175.001-5.111-3.903-9.287-9.555-9.287zM364.556 300.836h-18.841c-5.114 0-8.344 3.1-8.344 7.806 0 4.713 3.23 7.814 8.344 7.814h6.193c.538 0 .803.258.803.803 0 3.505-.265 6.598-1.075 9.014-1.882 5.796-7.67 9.426-14.669 9.426-7.943 0-12.921-3.903-14.939-10.096-1.075-3.365-1.48-7.8-1.48-19.648 0-11.842.405-16.15 1.48-19.516 2.018-6.325 6.867-10.228 14.67-10.228 5.924 0 10.362 1.885 13.859 6.724 2.695 3.777 5.387 4.852 8.749 4.852 4.981 0 9.021-3.638 9.021-8.888 0-2.151-.674-4.035-1.752-5.921-4.842-8.204-15.071-14.264-29.877-14.264-16.287 0-28.935 7.408-33.644 22.204-2.022 6.466-2.559 11.576-2.559 25.038 0 13.454.538 18.573 2.559 25.031 4.709 14.802 17.357 22.204 33.644 22.204 16.286 0 28.668-8.204 33.374-22.881 1.617-5.111 2.29-12.645 2.29-20.716v-.95c0-4.98-2.824-7.808-7.806-7.808z" class="st0"/></svg>
-      # Paste the SVG markup for custom icon
+      custom-icon: <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="_x32_" width="800" height="800" version="1.1" viewBox="0 0 512 512"><style>.st0{fill:#000}</style><path d="M378.409 0H195.118l-9.314 9.315L57.017 138.101l-9.314 9.315V426.105c0 47.36 38.528 85.896 85.895 85.896h244.811c47.361 0 85.888-38.535 85.888-85.896V85.896C464.297 38.528 425.77 0 378.409 0zm54.084 426.104c0 29.877-24.214 54.091-54.084 54.091H133.598c-29.877 0-54.091-24.214-54.091-54.091V160.592h83.717c24.884 0 45.07-20.179 45.07-45.071V31.804h170.114c29.87 0 54.084 24.214 54.084 54.091v340.209z" class="st0"/><path d="m180.296 296.668-4.846-.67c-10.63-1.487-14.265-4.978-14.265-10.104 0-5.78 4.309-9.817 12.383-9.817 5.653 0 11.305 1.62 15.745 3.764 1.886.942 3.903 1.487 5.789 1.487 4.845 0 8.612-3.63 8.612-8.616 0-3.226-1.481-5.921-4.71-7.939-5.384-3.372-15.476-6.06-25.572-6.06-19.781 0-32.436 11.171-32.436 27.998 0 16.15 10.232 24.898 28.938 27.454l4.846.67c10.903 1.48 14.129 4.846 14.129 10.229 0 6.326-5.247 10.766-14.939 10.766-6.727 0-12.111-1.745-19.645-5.921-1.616-.942-3.634-1.62-5.788-1.62-5.115 0-8.885 3.91-8.885 8.756 0 3.226 1.616 6.326 4.713 8.344 6.054 3.764 15.878 7.8 28.798 7.8 23.823 0 35.934-12.24 35.934-28.795 0-16.554-9.824-25.038-28.801-27.726zM281.108 259.382c-4.577 0-7.939 2.43-9.556 7.674l-16.69 54.51h-.402l-17.634-54.51c-1.745-5.244-4.978-7.674-9.551-7.674-5.653 0-9.692 4.176-9.692 9.287 0 1.347.269 2.834.67 4.175l23.286 68.104c2.96 8.477 6.727 11.57 12.652 11.57 5.785 0 9.555-3.093 12.516-11.57l23.282-68.104c.406-1.341.674-2.828.674-4.175.001-5.111-3.903-9.287-9.555-9.287zM364.556 300.836h-18.841c-5.114 0-8.344 3.1-8.344 7.806 0 4.713 3.23 7.814 8.344 7.814h6.193c.538 0 .803.258.803.803 0 3.505-.265 6.598-1.075 9.014-1.882 5.796-7.67 9.426-14.669 9.426-7.943 0-12.921-3.903-14.939-10.096-1.075-3.365-1.48-7.8-1.48-19.648 0-11.842.405-16.15 1.48-19.516 2.018-6.325 6.867-10.228 14.67-10.228 5.924 0 10.362 1.885 13.859 6.724 2.695 3.777 5.387 4.852 8.749 4.852 4.981 0 9.021-3.638 9.021-8.888 0-2.151-.674-4.035-1.752-5.921-4.842-8.204-15.071-14.264-29.877-14.264-16.287 0-28.935 7.408-33.644 22.204-2.022 6.466-2.559 11.576-2.559 25.038 0 13.454.538 18.573 2.559 25.031 4.709 14.802 17.357 22.204 33.644 22.204 16.286 0 28.668-8.204 33.374-22.881 1.617-5.111 2.29-12.645 2.29-20.716v-.95c0-4.98-2.824-7.808-7.806-7.808z" class="st0"/></svg> # Paste the SVG markup for custom icon
 
-- category: Products
-  items:
+  - category: Products
+    items:
     - title: Example 3
       url: https://www.example.com
+
+  - category: Works
+    items:
+    - title: Example 4
+      url: https://www.example.org
+      icon: clarity:language-solid
+      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.

diff --git a/_config.yml b/_config.yml
@@ -5,16 +5,18 @@ theme: linkhub-jekyll-theme
 name: Linkhub  # Name of your website
 tagline: Links  # Set your preferred page title
 description: A free, open-source Jekyll link-in-bio theme.  # Also used as a meta description
-favicon: https://picsum.photos/32/32 # Path / URL to the favicon of your website (e.g., 'assets/images/favicon.png')
-logo: https://picsum.photos/200 # Path / URL to the logo (e.g., 'assets/images/logo.png')
+favicon:
+  path: https://i.ibb.co/SBRmBmt/favicon.png # Path / URL to the favicon of your website (e.g., 'assets/images/favicon.png')
+  type: png # File format of image. Change according to your image. Supported types: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
+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 not needed.
+ga4: G-XXXXXXX # Google Analytics 4 measurement ID (optional). Remove it if it’s not needed..
 twitter:
   username: UserName # Used for SEO
 image:
   path: assets/images/example.jpg # Used for SEO (og:image, twitter:image)
-  type: jpeg # File format of image. Change according to your image. Supported types: https://en.wikipedia.org/wiki/Media_type#Common_examples
+  type: jpeg # File format of image.
   height: 100 # Pixels
   width: 100
   alt: logo

diff --git a/_data/bio.yml b/_data/bio.yml
@@ -2,21 +2,21 @@
   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/1080/920
+      image: https://picsum.photos/1080/920.webp
 
     - url: https://www.example.org
-      image: https://picsum.photos/540/960
+      image: https://picsum.photos/540/960.webp
 
     - url: https://www.example.com
-      image: https://picsum.photos/720/1280
+      image: https://picsum.photos/720/1280.webp
 
 - 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.org
-      image: https://picsum.photos/500
+      image: https://picsum.photos/500.webp
 
     - url: https://www.example.com
-      image: https://picsum.photos/250/300
+      image: https://picsum.photos/250/300.webp
diff --git a/_data/links.yml b/_data/links.yml
@@ -1,22 +1,25 @@
-- category: Blogs
-  items:
+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
+buttons:
+  - category: Blogs
+    items:
     - title: Example
       url: https://www.example.com
       icon: ri:film-fill # Icons are optional
-      tag: New
+      tag: Tag
 
     - title: Example 2
       url: https://www.example.org
       custom-icon: <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="_x32_" width="800" height="800" version="1.1" viewBox="0 0 512 512"><style>.st0{fill:#000}</style><path d="M378.409 0H195.118l-9.314 9.315L57.017 138.101l-9.314 9.315V426.105c0 47.36 38.528 85.896 85.895 85.896h244.811c47.361 0 85.888-38.535 85.888-85.896V85.896C464.297 38.528 425.77 0 378.409 0zm54.084 426.104c0 29.877-24.214 54.091-54.084 54.091H133.598c-29.877 0-54.091-24.214-54.091-54.091V160.592h83.717c24.884 0 45.07-20.179 45.07-45.071V31.804h170.114c29.87 0 54.084 24.214 54.084 54.091v340.209z" class="st0"/><path d="m180.296 296.668-4.846-.67c-10.63-1.487-14.265-4.978-14.265-10.104 0-5.78 4.309-9.817 12.383-9.817 5.653 0 11.305 1.62 15.745 3.764 1.886.942 3.903 1.487 5.789 1.487 4.845 0 8.612-3.63 8.612-8.616 0-3.226-1.481-5.921-4.71-7.939-5.384-3.372-15.476-6.06-25.572-6.06-19.781 0-32.436 11.171-32.436 27.998 0 16.15 10.232 24.898 28.938 27.454l4.846.67c10.903 1.48 14.129 4.846 14.129 10.229 0 6.326-5.247 10.766-14.939 10.766-6.727 0-12.111-1.745-19.645-5.921-1.616-.942-3.634-1.62-5.788-1.62-5.115 0-8.885 3.91-8.885 8.756 0 3.226 1.616 6.326 4.713 8.344 6.054 3.764 15.878 7.8 28.798 7.8 23.823 0 35.934-12.24 35.934-28.795 0-16.554-9.824-25.038-28.801-27.726zM281.108 259.382c-4.577 0-7.939 2.43-9.556 7.674l-16.69 54.51h-.402l-17.634-54.51c-1.745-5.244-4.978-7.674-9.551-7.674-5.653 0-9.692 4.176-9.692 9.287 0 1.347.269 2.834.67 4.175l23.286 68.104c2.96 8.477 6.727 11.57 12.652 11.57 5.785 0 9.555-3.093 12.516-11.57l23.282-68.104c.406-1.341.674-2.828.674-4.175.001-5.111-3.903-9.287-9.555-9.287zM364.556 300.836h-18.841c-5.114 0-8.344 3.1-8.344 7.806 0 4.713 3.23 7.814 8.344 7.814h6.193c.538 0 .803.258.803.803 0 3.505-.265 6.598-1.075 9.014-1.882 5.796-7.67 9.426-14.669 9.426-7.943 0-12.921-3.903-14.939-10.096-1.075-3.365-1.48-7.8-1.48-19.648 0-11.842.405-16.15 1.48-19.516 2.018-6.325 6.867-10.228 14.67-10.228 5.924 0 10.362 1.885 13.859 6.724 2.695 3.777 5.387 4.852 8.749 4.852 4.981 0 9.021-3.638 9.021-8.888 0-2.151-.674-4.035-1.752-5.921-4.842-8.204-15.071-14.264-29.877-14.264-16.287 0-28.935 7.408-33.644 22.204-2.022 6.466-2.559 11.576-2.559 25.038 0 13.454.538 18.573 2.559 25.031 4.709 14.802 17.357 22.204 33.644 22.204 16.286 0 28.668-8.204 33.374-22.881 1.617-5.111 2.29-12.645 2.29-20.716v-.95c0-4.98-2.824-7.808-7.806-7.808z" class="st0"/></svg> # Paste the SVG markup for custom icon
 
-- category: Products
-  items:
+  - category: Products
+    items:
     - title: Example 3
       url: https://www.example.com
 
-- category: Works
-  items:
+  - category: Works
+    items:
     - title: Example 4
       url: https://www.example.org
       icon: clarity:language-solid
-      tag: Sale
+      tag: New
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -2,5 +2,5 @@
     <small class="text-grey">Powered by <a href="https://github.com/digitalmalayali/linkhub-jekyll-theme"
         target="_blank">Linkhub</a> v{{ theme.version }}. Code is licensed under <a
             href="https://github.com/digitalmalayali/linkhub-jekyll-theme/blob/main/LICENSE.txt" target="_blank">MIT</a>.</small>
-    <h6>© {{ "now" | date: "%Y" }} {{ site.name }}</h6>
+    <h3>© {{ "now" | date: "%Y" }} {{ site.name }}</h3>
 </footer>
diff --git a/_includes/links.html b/_includes/links.html
@@ -1,18 +1,32 @@
 <main>
-    {% for category in site.data.links %}
-    <h5 class="text-center">{{ category.category }}</h5>
-    {% for item in category.items %}
+    {% for button in site.data.links.buttons %}
+    <h2 class="text-center">{{ button.category }}</h2>
+    {% for item in button.items %}
     <div class="row">
         {% if item.tag %}
         <div class="col link is-center">
             {% else %}
             <div class="col is-center">
                 {% endif %}
-                <a class="button outline secondary" href="{{ item.url }}" target="_blank">{% if item.icon %}<span
-                        class="iconify-inline" data-icon="{{ item.icon }}"></span>{% endif %}{% if item.custom-icon
-                    %}<span class="custom-icon">{{ item.custom-icon }}</span>{% endif %}{{ item.title }}
-                    {% if item.tag %}<span class="tag is-small bd-success text-success">{{ item.tag }}</span>{%
-                    endif %}</a>
+                {% 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 %}
             </div>
         </div>
         {% endfor %}

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -8,7 +8,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ site.tagline }} - {{ site.name }}</title>
-    <link rel="shortcut icon" href="{{ site.favicon }}" type="image/x-icon">
+    <link rel="shortcut icon" href="{{ site.favicon.path }}" type="image/{{ site.favicon.type }}">
     <link rel="stylesheet" href="assets/style.css">
     <script src="https://code.iconify.design/2/2.0.0/iconify.min.js"></script>
     <meta name="description" content="{{ site.description }}">
@@ -34,8 +34,8 @@
         <header>
             <div class="top is-center is-vertical-align">
                 <img class="is-rounded" width="75px" height="75px" src="{{ site.logo }}" alt="logo">
-                <h3 class="text-center">{{ site.name }}{% if site.badge.enable == true %}<span class="iconify-inline badge"
-                        data-icon="{{ site.badge.icon }}" style="color: {{ site.badge.color }}"></span>{% endif %}</h3>
+                <h1 class="text-center">{{ site.name }}{% if site.badge.enable == true %}<span class="iconify-inline badge"
+                        data-icon="{{ site.badge.icon }}" style="color: {{ site.badge.color }}"></span>{% endif %}</h1>
                 <p class="text-center">{{ site.description }}</p>
             </div>
         </header>