diff --git a/CHANGELOG.md b/CHANGELOG.md index 47f17ca..03ee00f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,4 +14,12 @@ # [0.1.3](https://github.com/digitalmalayali/linkhub-jekyll-theme/releases/tag/v0.1.3) (11-10-2023) - Added Mastodon verification support. -- Icons in link buttons are optional now. \ No newline at end of file +- Icons in link buttons are optional now. + +# [0.1.4](https://github.com/digitalmalayali/linkhub-jekyll-theme/releases/tag/v0.1.4) (15-05-2024) +- Added custom icon support. +- Fixed Open Graph image URL. +- Site name and tagline are aligned to center. +- Added pointer cursor for summary tag in `bio.yml`. +- Fixed a minor margin issue of verified badge. +- Option to hide Dark/light mode switch. \ No newline at end of file diff --git a/README.md b/README.md index 5b11939..c3616a3 100644 --- a/README.md +++ b/README.md @@ -1,56 +1,49 @@ -

- Linkhub -

- -

- - Jekyll version - - - Gem (including prereleases) - - - Gem - - - Gem - -

- -

A minimal and super-lightweight, free Jekyll theme to create a single-page, link-in-bio website like Linktree or Later.

- -

- mockup -

- -

- - Live Demo ◉ - -

+
+ +# Linkhub + +[![Static Badge](https://img.shields.io/badge/jekyll-~%3E%204.3-grey?logo=jekyll&labelColor=%23CC0000)](https://jekyllrb.com) +[![Gem Version](https://img.shields.io/gem/v/linkhub-jekyll-theme?logo=rubygems&logoColor=white&labelColor=%23E9573F&color=grey)](https://rubygems.org/gems/linkhub-jekyll-theme) +[![Gem Total Downloads](https://img.shields.io/gem/dt/linkhub-jekyll-theme?logo=rubygems&logoColor=white&labelColor=%23E9573F&color=grey)](https://rubygems.org/gems/linkhub-jekyll-theme) + +[![Static Badge](https://img.shields.io/badge/html-template-grey?logo=html5&logoColor=white&labelColor=E34F26)](https://github.com/digitalmalayali/linkhub) +[![Static Badge](https://img.shields.io/badge/wordpress-theme-grey?logo=wordpress&labelColor=21759B)](https://github.com/digitalmalayali/linkhub-wordpress-theme) + +[![Static Badge](https://img.shields.io/badge/liberapay-donate-F6C915?logo=liberapay)](https://liberapay.com/zcraber) + +A minimal and super-lightweight, free Jekyll theme to create a single-page, link-in-bio website like Linktree or Later. + +[![mockup](https://github-production-user-asset-6210df.s3.amazonaws.com/61133303/272500069-9c861ba3-90fe-45c6-a87d-af01152b17bb.png)](https://digitalmalayali.github.io/linkhub-jekyll-theme/) + +[**Live Demo ◉**](https://digitalmalayali.github.io/linkhub-jekyll-theme/) + +
## Contents -- [Contents](#contents) -- [Features](#features) -- [Installation](#installation) - - [Use GitHub Template (Fastest Way)](#use-github-template-fastest-way) - - [Install as GitHub Remote Theme](#install-as-github-remote-theme) - - [Install as Ruby Gem](#install-as-ruby-gem) -- [Configuration](#configuration) - - [Adding Site Info](#adding-site-info) - - [`_config.yml`](#_configyml) - - [Adding Icons](#adding-icons) - - [Adding Social Media Links](#adding-social-media-links) - - [`social.yml`](#socialyml) - - [Adding Instagram/TikTok/YouTube Link-in-bio](#adding-instagramtiktokyoutube-link-in-bio) - - [`bio.yml`](#bioyml) - - [Remove Instagram/TikTok/YouTube Link-in-bio](#remove-instagramtiktokyoutube-link-in-bio) - - [Adding Links](#adding-links) - - [`links.yml`](#linksyml) -- [Contributing](#contributing) -- [Powered by Linkhub](#powered-by-linkhub) -- [Development](#development) -- [License](#license) +- [Linkhub](#linkhub) + - [Contents](#contents) + - [Features](#features) + - [Installation](#installation) + - [Use GitHub Template (Fastest Way)](#use-github-template-fastest-way) + - [Install as GitHub Remote Theme](#install-as-github-remote-theme) + - [Install as Ruby Gem](#install-as-ruby-gem) + - [Configuration](#configuration) + - [Adding Site Info](#adding-site-info) + - [`_config.yml`](#_configyml) + - [Adding Icons](#adding-icons) + - [Adding Social Media Links](#adding-social-media-links) + - [`social.yml`](#socialyml) + - [Adding Instagram/TikTok/YouTube Link-in-bio](#adding-instagramtiktokyoutube-link-in-bio) + - [`bio.yml`](#bioyml) + - [Remove Instagram/TikTok/YouTube Link-in-bio](#remove-instagramtiktokyoutube-link-in-bio) + - [Adding Links](#adding-links) + - [`links.yml`](#linksyml) + - [Adding Custom Icons](#adding-custom-icons) + - [Remove Dark/Light Mode Switch](#remove-darklight-mode-switch) + - [Contributing](#contributing) + - [Powered by Linkhub](#powered-by-linkhub) + - [Development](#development) + - [License](#license) ## Features - 😊 Based on the original [Linkhub](https://github.com/digitalmalayali/Linkhub) template! @@ -103,7 +96,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. For logo, make sure to use an image with 1:1 aspect ratio. +Edit the [_config.yml](_config.yml) file to specify your website's name, page title, description, Google Analytics, and whether to show or hide the verified badge. This information will also be used for meta tags. For the logo, make sure to use an image with a 1:1 aspect ratio. #### `_config.yml` ```yml @@ -120,18 +113,19 @@ 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: DigiMalayali # Used for SEO + username: UserName # Used for SEO image: - path: https://picsum.photos/200 # Used for SEO + 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 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 +badge: + enable: 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 # Defaults defaults: @@ -148,6 +142,8 @@ exclude: [README.md, Gemfile.lock, .jekyll-cache/, .github/, CHANGELOG.md, Gemfi ### Adding Icons Icons are powered by the free and open-source icon framework [Iconify](https://github.com/iconify), offering a selection of over 150,000 icons. Visit the [Iconify icon sets website](https://icon-sets.iconify.design/) to search for your preferred icon. Once you find your desired icon, copy its name and use it in the respective fields. +You can use custom icons for [Links](#adding-links). + ### Adding Social Media Links Edit the [social.yml](_data/social.yml) file in the [_data](_data) folder to add your social media profiles, along with your preferred icons and colors. @@ -184,7 +180,7 @@ Like Later's link-in-bio feature, you can include external links to your Instagr ``` ### Remove Instagram/TikTok/YouTube Link-in-bio -If you'd like to remove Instagram/TikTok/YouTube link-in-bio altogether, remove or comment out the following line in [default.html](_layouts/default.html) layout. +If you'd like to remove Instagram/TikTok/YouTube link-in-bio altogether, remove or comment out the following line in [default.html](_layouts/default.html) layout: ```liquid {% include bio.html %} @@ -205,26 +201,37 @@ Edit the [links.yml](_data/links.yml) file in the [_data](_data) folder to add l - title: Example 2 url: https://www.example.org - icon: simple-icons:googlenews + custom-icon: + # Paste the SVG markup for custom icon - category: Products items: - title: Example 3 url: https://www.example.com ``` +#### 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. + +### 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: + +```liquid +{% include theme-switch.html %} +``` +Please note that this will not remove the functionality that detects and sets the dark/light mode based on the user's system preference. ## Contributing [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. +A list of websites that use the 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`. -Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal. +Your theme is set up just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal. When your theme is released, only the files in [_layouts](_layouts), [_includes](_includes), [_data](_data) and [assets](assets) tracked with Git will be bundled. diff --git a/_config.yml b/_config.yml index 58cc2e4..effbf32 100644 --- a/_config.yml +++ b/_config.yml @@ -11,18 +11,19 @@ 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: DigiMalayali # Used for SEO + username: UserName # Used for SEO image: - path: https://picsum.photos/200 # Used for SEO + 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 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 +badge: + enable: 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 # Defaults defaults: diff --git a/_data/links.yml b/_data/links.yml index a0dcd49..10e3bde 100644 --- a/_data/links.yml +++ b/_data/links.yml @@ -2,12 +2,12 @@ items: - title: Example url: https://www.example.com - icon: ri:film-fill # Icons are optional. + icon: ri:film-fill # Icons are optional tag: New - title: Example 2 url: https://www.example.org - icon: simple-icons:googlenews + custom-icon: # Paste the SVG markup for custom icon - category: Products items: diff --git a/_includes/footer.html b/_includes/footer.html index 6cb6fa7..175853e 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,6 +1,6 @@ \ No newline at end of file diff --git a/_includes/links.html b/_includes/links.html index aa19083..261b958 100644 --- a/_includes/links.html +++ b/_includes/links.html @@ -8,8 +8,9 @@
{{ category.category }}
{% else %}
{% endif %} - {% if item.icon %}{% endif %}{{ item.title }} + {% if item.icon %}{% endif %}{% if item.custom-icon + %}{{ item.custom-icon }}{% endif %}{{ item.title }} {% if item.tag %}{{ item.tag }}{% endif %}
diff --git a/_includes/social.html b/_includes/social.html index 8edc529..5b37637 100644 --- a/_includes/social.html +++ b/_includes/social.html @@ -2,7 +2,7 @@