0.1.2

digitalmalayali · Oct 11, 2023 · e3e42b3 · e3e42b3
1 parent 616c238
commit e3e42b3
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,13 @@
+# 0.1.0 (03-10-2023)
+- First release.
+- Minor changes to CSS compared to [Linkhub](https://github.com/digitalmalayali/Linkhub).
+
+# [0.1.1](https://github.com/digitalmalayali/linkhub-jekyll-theme/releases/tag/v0.1.1) (04-10-2023)
+- Added Google Analytics 4 support.
+- Added Bundler as a development dependency. 
+- Improved docs.
+
+# [0.1.2](https://github.com/digitalmalayali/linkhub-jekyll-theme/releases/tag/v0.1.2) (11-10-2023)
+- Fixed some padding and margin issues.
+- Added aspect ratio variable for `bio.yml`.
+- Removed `jekyll-seo-tag` plugin.
diff --git a/Gemfile b/Gemfile
@@ -3,5 +3,5 @@
 source "https://rubygems.org"
 gemspec
 
-gem "jekyll-seo-tag"
-gem "bundler"
+gem "bundler"
+gem 'wdm', '>= 0.1.0' if Gem.win_platform?
diff --git a/README.md b/README.md
@@ -48,16 +48,18 @@
   - [Adding Links](#adding-links)
     - [`links.yml`](#linksyml)
 - [Contributing](#contributing)
+- [Powered by Linkhub](#powered-by-linkhub)
 - [Development](#development)
 - [License](#license)
 
 ## Features
 - 😊 Based on the original [Linkhub](https://github.com/digitalmalayali/Linkhub) template!
-- 📸 Add links to Instagram, TikTok, YouTube or any posts similar to Later's link-in-bio! 
+- 📸 Add links to Instagram, TikTok, YouTube or any posts/reels/shorts similar to Later's link-in-bio! 
 - ⚡ Uses a modified version of the lightweight CSS framework [chota](https://github.com/jenil/chota); the entire size of the site is around 160kb!
 - 🌙 Switch between dark and light modes; automatically choose the mode based on your system preference!
 - 😍 Icons powered by [iconify](https://github.com/iconify/iconify); find tons of free icons for almost any purpose!
 - 🔠 Categorize links; store your links under various categories!
+- 🔍 SEO friendly; uses all the necessary Open Graph and Twitter Card tags for metadata! 
 
 ## Installation
 There are multiple ways to install and set up Linkhub. Let's explore each of them.
@@ -101,7 +103,7 @@ Or install it yourself as:
 Linkhub is super-easy to customize! There is only one `layout` and that is [default.html](_layouts/default.html). Also, there are no `_posts`. 
 
 ### Adding Site Info
-Edit the [_config.yml](_config.yml) file to specify your website's name, page title, description, Google Analytics and whether to show/hide the verified badge. This information will also be used for meta tags.
+Edit the [_config.yml](_config.yml) file to specify your website's name, page title, description, Google Analytics and whether to show/hide the verified badge. This information will also be used for meta tags. For logo, make sure to use an image with 1:1 aspect ratio.
 
 #### `_config.yml`
 ```yml
@@ -112,27 +114,24 @@ 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/100 # Path / URL to the favicon of your website (e.g., 'assets/images/favicon.png')
+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')
 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.
 twitter:
-  username: username # Used for SEO
-  card: summary
+  username: DigiMalayali # Used for SEO
 image:
-  path: https://picsum.photos/200 #Used for SEO
-  height: 100
+  path: https://picsum.photos/200 # Used for SEO
+  type: jpeg # File format of image. Change according to your image. Supported types: https://en.wikipedia.org/wiki/Media_type#Common_examples
+  height: 100 # Pixels
   width: 100
   alt: logo
 
 # Verified Badge Configuration
 badge: true  # Set to 'true' or 'false' to enable / disable the badge
 icon: ri:verified-badge-fill  # Enter the icon name for the badge from Iconify Design (https://icon-sets.iconify.design/)
 color: '#dfb221'  # Define the color of the badge
-
-# Plugins
-plugins:
-  - jekyll-seo-tag
 
 # Defaults
 defaults:
@@ -143,7 +142,7 @@ defaults:
       layout: "default"    
 
 # Exclude
-exclude: [README.md, Gemfile.lock, .jekyll-cache/, .github/, Gemfile, LICENSE.txt, funding.yml, linkhub-jekyll-theme.gemspec]
+exclude: [README.md, Gemfile.lock, .jekyll-cache/, .github/, CHANGELOG.md, Gemfile, LICENSE.txt, funding.yml, linkhub-jekyll-theme.gemspec]
 ```
 
 ### Adding Icons
@@ -166,7 +165,7 @@ Edit the [social.yml](_data/social.yml) file in the [_data](_data) folder to add
 ```
 
 ### Adding Instagram/TikTok/YouTube Link-in-bio
-Like Later's link-in-bio feature, you can include external links to your Instagram, TikTok, and other posts by adding the name of social media, the link and image URL/path to [bio.yml](_data/bio.yml) in the [_data](_data) folder. You can either upload thumbnails of your Instagram, TikTok and YouTube posts to an image hosting service or create an `images` folder in [assets](assets) and place them there. The image size doesn't matter, and it will be displayed similarly to a 3-column Instagram grid. Make sure to add the link you'd like to appear first to the top.
+Like Later's link-in-bio feature, you can include external links to your Instagram, TikTok, and other posts by adding the name of social media, the link and image URL/path to [bio.yml](_data/bio.yml) in the [_data](_data) folder. You can either upload thumbnails of your Instagram, TikTok and YouTube posts to an image hosting service or create an `images` folder in [assets](assets) and place them there. By default, the images will be displayed with a 1:1 aspect ratio in a 3-column grid. You can use the `ratio` variable for vertical images with a 9:16 aspect ratio. Make sure to add the link you'd like to appear first to the top.
 
 #### `bio.yml`
 ```yml
@@ -176,9 +175,10 @@ Like Later's link-in-bio feature, you can include external links to your Instagr
       image: https://picsum.photos/700/400 # You can use paths to images in the assets folder, e.g., assets/images/insta.jpg.
 
 - 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/300/400
+      image: https://picsum.photos/720/1280
 ```
 
 ### Remove Instagram/TikTok/YouTube Link-in-bio
@@ -213,7 +213,12 @@ Edit the [links.yml](_data/links.yml) file in the [_data](_data) folder to add l
 ```
 
 ## Contributing
-Bug reports and pull requests are welcome on [GitHub](https://github.com/digitalmalayali/linkhub-jekyll-theme). If you like this theme, please give it a star!
+[Bug reports](https://github.com/digitalmalayali/linkhub-jekyll-theme) and [pull requests](https://github.com/digitalmalayali/linkhub-jekyll-theme/pulls) are welcome. If you like this theme, please give it a star! And if you've used this theme on your website, feel free to add it below.
+
+## Powered by Linkhub
+A list of websites that uses Linkhub theme. Please feel free to add your site.
+- [links.digitalmalayali.in](https://links.digitalmalayali.in/)
+- [links.josephvm.in](https://links.josephvm.in/)
 
 ## Development
 To set up your environment to develop this theme, run `bundle install`.

diff --git a/_config.yml b/_config.yml
@@ -5,27 +5,24 @@ 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/100 # Path / URL to the favicon of your website (e.g., 'assets/images/favicon.png')
+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')
 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.
 twitter:
-  username: username # Used for SEO
-  card: summary
+  username: DigiMalayali # Used for SEO
 image:
-  path: https://picsum.photos/200 #Used for SEO
-  height: 100
+  path: https://picsum.photos/200 # Used for SEO
+  type: jpeg # File format of image. Change according to your image. Supported types: https://en.wikipedia.org/wiki/Media_type#Common_examples
+  height: 100 # Pixels
   width: 100
   alt: logo
 
 # Verified Badge Configuration
 badge: true  # Set to 'true' or 'false' to enable / disable the badge
 icon: ri:verified-badge-fill  # Enter the icon name for the badge from Iconify Design (https://icon-sets.iconify.design/)
 color: '#dfb221'  # Define the color of the badge
-
-# Plugins
-plugins:
-  - jekyll-seo-tag
 
 # Defaults
 defaults:
@@ -36,4 +33,4 @@ defaults:
       layout: "default"    
 
 # Exclude
-exclude: [README.md, Gemfile.lock, .jekyll-cache/, .github/, Gemfile, LICENSE.txt, funding.yml, linkhub-jekyll-theme.gemspec]
+exclude: [README.md, Gemfile.lock, .jekyll-cache/, .github/, CHANGELOG.md, Gemfile, LICENSE.txt, funding.yml, linkhub-jekyll-theme.gemspec]
diff --git a/_data/bio.yml b/_data/bio.yml
@@ -1,18 +1,22 @@
-- name: Instagram
+- name: YouTube Shorts
+  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/700/400 # You can use paths to images in the assets folder, e.g., assets/images/insta.jpg.
+      image: https://picsum.photos/1080/920
 
     - url: https://www.example.org
-      image: https://picsum.photos/500
+      image: https://picsum.photos/540/960
 
     - url: https://www.example.com
-      image: https://picsum.photos/250/300
+      image: https://picsum.photos/720/1280
 
-- name: YouTube
+- name: Instagram
   items:
     - url: https://www.example.com
-      image: https://picsum.photos/300/400
+      image: https://picsum.photos/700/400 # 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/400/500
+      image: https://picsum.photos/500
+
+    - url: https://www.example.com
+      image: https://picsum.photos/250/300
diff --git a/_includes/bio.html b/_includes/bio.html
@@ -4,11 +4,19 @@
         <summary class="text-center text-error">{{ name.name }} Link-in-Bio</summary>
         <div class="bio-gallery">
             {% for item in name.items %}
+            {% if name.ratio %}
+            <div class="bio-item" style="aspect-ratio: 9/16;">
+                <a href="{{ item.url }}" target="_blank" aria-label="{{ name.name }} link-in-bio">
+                    <img class="bio-img text-center" src="{{ item.image }}" width="100%" height="100%"
+                        alt="{{ name.name }} post"></a>
+            </div>
+            {% else %}
             <div class="bio-item">
                 <a href="{{ item.url }}" target="_blank" aria-label="{{ name.name }} link-in-bio">
                     <img class="bio-img text-center" src="{{ item.image }}" width="100%" height="100%"
                         alt="{{ name.name }} post"></a>
             </div>
+            {% endif %}
             {% endfor %}
         </div>
     </details>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -11,7 +11,22 @@
     <link rel="shortcut icon" href="{{ site.favicon }}" type="image/x-icon">
     <link rel="stylesheet" href="assets/style.css">
     <script src="https://code.iconify.design/2/2.0.0/iconify.min.js"></script>
-    {% seo %}
+    <meta name="description" content="{{ site.description }}">
+    <meta property="og:title" content="{{ site.name }}"/>
+    <meta property="og:description" content="{{ site.description }}">
+    <meta property="og:type" content="website"/>
+    <meta property="og:url" content="{{ site.url }}"/>
+    <meta property="og:locale" content="{{ site.locale }}"/>
+    <meta property="og:image" content="{{ site.image.path }}"/>
+    <meta property="og:image:type" content="image/{{ site.image.type }}"/>
+    <meta property="og:image:width" content="{{ site.image.width }}">
+    <meta property="og:image:height" content="{{ site.image.height }}">
+    <meta property="og:image:alt" content="{{ site.image.alt }}">
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@{{ site.twitter.username }}" />
+    <meta name="twitter:title" content="{{ site.name }}" />
+    <meta name="twitter:description" content="{{ site.description }}" />
+    <meta name="twitter:image" content="{{ site.image.path }}" />
 </head>
 
 <body>
@@ -26,10 +41,10 @@ <h3>{{ site.name }}{% if site.badge == true %}<span class="iconify-inline badge"
         </header>
 
         <!-- Dark / Light Mode Switch -->
-            <a class="bd-primary is-rounded is-center" href="#" id="theme-switch"
-                onclick="switchMode(this); return false;" aria-label="Switch Theme" role="button">☀️</a>
-            <!-- Social Media Links -->
-            {% include social.html %}
+        <a class="bd-primary is-rounded is-center" href="#" id="theme-switch" onclick="switchMode(this); return false;"
+            aria-label="Switch Theme" role="button">☀️</a>
+        <!-- Social Media Links -->
+        {% include social.html %}
 
         <!-- Insta/TikTok/YouTube Link-in-bio -->
         {% include bio.html %}