From 4aca74e3f1d19fe7a906b9839008c191a169b58d Mon Sep 17 00:00:00 2001 From: zcraber Date: Wed, 4 Oct 2023 03:52:42 +0530 Subject: [PATCH] updates --- README.md | 49 ++++++++++++++++++++++++++++-------- _config.yml | 11 ++++---- _includes/ga4.html | 9 +++++++ _layouts/default.html | 3 +++ linkhub-jekyll-theme.gemspec | 4 ++- 5 files changed, 60 insertions(+), 16 deletions(-) create mode 100644 _includes/ga4.html diff --git a/README.md b/README.md index fcc10da..5bc41a7 100644 --- a/README.md +++ b/README.md @@ -2,14 +2,43 @@ # Linkhub +![Gem (including prereleases)](https://img.shields.io/gem/v/linkhub-jekyll-theme) +![Gem](https://img.shields.io/gem/dt/linkhub-jekyll-theme) + A minimal and super-lightweight, free Jekyll theme to create a single-page, link-in-bio website like Linktree or Later. [**Live Demo ◉**](https://digitalmalayali.github.io/linkhub-jekyll-theme/) +## 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! +- ⚡ 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! + ## Installation +There are multiple ways to install and set up Linkhub. Let's explore each of them. + +### Use GitHub Template (Fastest Way) + +If you need the quickest way to set this up or if you're a complete beginner to Jekyll, using the GitHub template is the easiest option. You can also fork the repo. + +
    +
  1. Go to the [Linkhub theme repository](https://github.com/digitalmalayali/linkhub-jekyll-theme).
    2. +
  2. Click the **Use this template** button.
    3. +
  3. Select **Create a new repository**.
    4. +
  4. Give it a name and click **Create repository**.
    5. +
  5. Edit the `_config.yml` and `_data` files for customization. Check the [Usage guide](https://github.com/digitalmalayali/linkhub-jekyll-theme#usage) for details.
    6. +
  6. Go to **Settings** > **Pages**. Under **Build and deployment**, select **GitHub Actions** as the source.
    7. +
  7. If you have a [custom domain](https://docs.github.com/articles/using-a-custom-domain-with-github-pages/), you can enter it. Otherwise, you can view the published website at GitHub.io once the building is complete!
    8. +
+ +### Install as Ruby Gem + Add this line to your Jekyll site's `Gemfile`: ```ruby @@ -30,27 +59,27 @@ Or install it yourself as: $ gem install linkhub-jekyll-theme -## Usage -Linkhub is super-easy to use! +## Customization +Linkhub is super-easy to customize! -### Adding site info -Edit the `_config.yml` file to specify your website's name, page title, description, and whether to show/hide the verified badge. This information will also be used for meta tags. +### Adding Site Info +Edit the `_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. -### Adding icons +### 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. -### Adding social media links +### Adding Social Media Links Edit the `social.yml` file in the `_data` folder to add your social media profiles, along with your preferred icons and colors. -### Adding Instagram/TikTok/YouTube etc link-in-bio -Like Later's link-in-bio feature, you can include external links to your Instagram, TikTok, and other posts by adding name of social media, the link and image URL/path to `bio.yml` in the `_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` and place them there. The image size doesn't matter, and it will be displayed similarly to a 3-column Instagram grid. +### 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` in the `_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` and place them there. The image size doesn't matter, and it will be displayed similarly to a 3-column Instagram grid. -### Adding links +### Adding Links Edit the `links.yml` file in the `_data` folder to add link categories, links, icons, and tags. Refer to the provided examples and the [demo](https://digitalmalayali.github.io/linkhub-jekyll-theme/) for a better understanding. ## Contributing -Bug reports and pull requests are welcome on [GitHub](https://github.com/digitalmalayali/linkhub-jekyll-theme). +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! ## Development diff --git a/_config.yml b/_config.yml index ad8f353..94d9637 100644 --- a/_config.yml +++ b/_config.yml @@ -1,10 +1,11 @@ # Site Configuration -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') -logo: 'https://picsum.photos/200' # Path / URL to the logo (e.g., 'assets/images/logo.png') +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') +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 +ga4: G-XXXXXXX # Google Analytics 4 measurement ID (optional). Remove it if not needed. twitter: username: username # Used for SEO card: summary diff --git a/_includes/ga4.html b/_includes/ga4.html new file mode 100644 index 0000000..f40f172 --- /dev/null +++ b/_includes/ga4.html @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 84bfdd0..54019c0 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -2,6 +2,9 @@ + {% if site.ga4 %} + {% include ga4.html %} + {% endif %} {{ site.tagline }} - {{ site.name }} diff --git a/linkhub-jekyll-theme.gemspec b/linkhub-jekyll-theme.gemspec index 3d54cd7..b1e9081 100644 --- a/linkhub-jekyll-theme.gemspec +++ b/linkhub-jekyll-theme.gemspec @@ -2,7 +2,7 @@ Gem::Specification.new do |spec| spec.name = "linkhub-jekyll-theme" - spec.version = "0.1.0" + spec.version = "0.1.1" spec.authors = ["Digital Malayali"] spec.email = ["social@digitalmalayali.in"] @@ -14,4 +14,6 @@ Gem::Specification.new do |spec| spec.add_runtime_dependency "jekyll", "~> 4.3" spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.8.0" + + spec.add_development_dependency "bundler", "~> 2.4" end