linkhub-jekyll-theme 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 67f892b470219d665a6b54744f081a80c8b7a1e25273531f32e2db2c46404719
+  data.tar.gz: 5e8731c201b61adbc6e04c51c8092bfadec373aa6b52c2697be720e97179e30b
+SHA512:
+  metadata.gz: 69329c5b9e48f57719b1a4277fe8f050a19392389248d2c421d06c156b438c2b2691ad4e2e69c3b1f356009f9ac4aa49c9e753a14dbd60b922b0b53b034134fe
+  data.tar.gz: 140dd5dff7fa74e70f985a51095152c5b23ac73e55e072fa3369948372bc09f73f6cf7dec11ae46b76910a192046daf7c54926ce89dc8e108543feb0889ba1df

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Digital Malayali
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,75 @@
+<div align="center">
+
+# Linkhub
+
+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/)
+
+</div>
+
+## 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
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "linkhub-jekyll-theme"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: linkhub-jekyll-theme
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install linkhub-jekyll-theme
+
+## Usage
+Linkhub is super-easy to use!
+
+### 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 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
+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 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).
+
+## 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.
+
+When your theme is released, only the files in `_layouts`, `_includes`, `_data` and `assets` tracked with Git will be bundled.
+
+To add a custom directory to your theme-gem, please edit the regexp in `linkhub-jekyll-theme.gemspec` accordingly.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/_config.yml

@@ -0,0 +1,35 @@
+# 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')
+url: https://link.example.com # URL of your website
+twitter:
+  username: username # Used for SEO
+  card: summary
+image:
+  path: https://picsum.photos/200 #Used for SEO
+  height: 100
+  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:
+  -
+    scope:
+      path: ""
+    values:
+      layout: "default"    
+
+# Exclude
+exclude: [README.md, Gemfile.lock, .jekyll-cache/, Gemfile]

data/_data/bio.yml

@@ -0,0 +1,18 @@
+- 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.
+
+    - url: https://www.example.org
+      image: https://picsum.photos/500
+
+    - url: https://www.example.com
+      image: https://picsum.photos/250/300
+
+- name: YouTube
+  items:
+    - url: https://www.example.com
+      image: https://picsum.photos/300/400
+
+    - url: https://www.example.org
+      image: https://picsum.photos/400/500

data/_data/links.yml

@@ -0,0 +1,23 @@
+- category: Blogs
+  items:
+    - title: Example
+      url: https://www.example.com
+      icon: ri:film-fill
+      tag: New
+
+    - title: Example 2
+      url: https://www.example.org
+      icon: simple-icons:googlenews
+
+- category: Products
+  items:
+    - title: Example 3
+      url: https://www.example.com
+      icon: ri:ball-pen-fill
+
+- category: Works
+  items:
+    - title: Example 4
+      url: https://www.example.org
+      icon: clarity:language-solid
+      tag: Sale

data/_data/social.yml

@@ -0,0 +1,29 @@
+- name: facebook
+  url: https://www.facebook.com/example
+  icon: ri:facebook-fill
+  color: '#1877F2'
+
+- name: instagram
+  url: https://www.instagram.com/example
+  icon: ri:instagram-fill
+  color: '#E4405F'
+
+- name: x
+  url: https://x.com/example
+  icon: ri:twitter-x-fill
+  color: '#1D9BF0'
+
+- name: mastodon
+  url: https://mastodon.social/@example
+  icon: ri:mastodon-fill
+  color: '#6364FF'
+
+- name: whatsapp
+  url: https://wa.me/1XXXXXXXXXX
+  icon: ri:whatsapp-fill
+  color: '#25D366'
+
+- name: youtube
+  url: https://www.youtube.com/@example
+  icon: ri:youtube-fill
+  color: '#FF0000'

data/_includes/bio.html

@@ -0,0 +1,16 @@
+<section>
+    {% for name in site.data.bio %}
+    <details>
+        <summary class="text-center text-error">{{ name.name }} Link-in-Bio</summary>
+        <div class="bio-gallery">
+            {% for item in name.items %}
+            <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>
+            {% endfor %}
+        </div>
+    </details>
+    {% endfor %}
+</section>

data/_includes/footer.html

@@ -0,0 +1,6 @@
+<footer class="text-center">
+    <small class="text-grey">Powered by <a href="https://github.com/digitalmalayali/linkhub-jekyll-theme"
+        target="_blank">Linkhub</a>. 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>
+</footer>

data/_includes/links.html

@@ -0,0 +1,19 @@
+<main>
+    {% for category in site.data.links %}
+    <h5 class="text-center">{{ category.category }}</h5>
+    {% for item in category.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"><span class="iconify-inline"
+                        data-icon="{{ item.icon }}"></span>{{ item.title }}
+                    {% if item.tag %}<span class="tag is-small bd-success text-success">{{ item.tag }}</span>{%
+                    endif %}</a>
+            </div>
+        </div>
+        {% endfor %}
+        {% endfor %}
+</main>

data/_includes/social.html

@@ -0,0 +1,9 @@
+<nav class="nav">
+    <div class="nav-center">
+        {% for social in site.data.social %}
+        <a class="brand" href="{{ social.url }}" target="_blank" aria-label="{{ social.name }}">
+            <span class="iconify-inline" data-icon="{{ social.icon }}" style="color: {{ social.color }}"></span>
+        </a>
+        {% endfor %}
+    </div>
+</nav>

data/_layouts/default.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <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="stylesheet" href="assets/style.css">
+    <script src="https://code.iconify.design/2/2.0.0/iconify.min.js"></script>
+    {% seo %}
+</head>
+
+<body>
+    <div class="container is-full-screen">
+        <header>
+            <div class="top is-center is-vertical-align">
+                <img class="is-rounded" width="75px" height="75px" src="{{ site.logo }}" alt="logo">
+                <h3>{{ site.name }}{% if site.badge == true %}<span class="iconify-inline badge"
+                        data-icon="{{ site.icon }}" style="color: {{ site.color }}"></span>{% endif %}</h3>
+                <p>{{ site.description }}</p>
+            </div>
+        </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 %}
+
+        <!-- Insta/TikTok/YouTube Link-in-bio -->
+        {% include bio.html %}
+
+        <!-- Link Buttons -->
+        {% include links.html %}
+
+        {% include footer.html %}
+    </div>
+    <script src="assets/script.js"></script>
+</body>
+
+</html>

data/assets/script.js

@@ -0,0 +1 @@
+function switchMode(e){const d=document.body.classList;d.contains("dark")?(e.innerHTML="☀️",d.remove("dark")):(e.innerHTML="🌙",d.add("dark"))}window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(document.body.classList.add("dark"),document.querySelector("#theme-switch").innerHTML="🌙");

data/assets/style.css

@@ -0,0 +1,5 @@
+:root{--bg-color:#fff;--bg-secondary-color:#f3f3f6;--color-primary:#168D54;--color-lightGrey:#d2d6dd;--color-grey:#3f4144;--color-error:#D74747;--color-success:#28bd14;--grid-maxWidth:120rem;--grid-gutter:2rem;--font-size:1.6rem;--font-color:#333;--font-family-sans:-apple-system,"BlinkMacSystemFont","Avenir","Avenir Next","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--font-family-mono:monaco,"Consolas","Lucida Console",monospace}html{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:62.5%;line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}body{background-color:var(--bg-color);line-height:1.6;font-size:var(--font-size);color:var(--font-color);font-family:"Segoe UI","Helvetica Neue",sans-serif;font-family:var(--font-family-sans);margin:0;padding:0}
+body.dark{--bg-color:#0c0c0c;--bg-secondary-color:#131316;--font-color:#f5f5f5;--color-grey:#ccc}h3,h5,h6{font-weight:500;margin:.35em 0 .6em}h3{font-size:1.5em}h5{font-size:1em}h6{font-size:.85em}a{color:var(--color-primary);text-decoration:none}a:hover:not(.button){opacity:.75}p{margin-top:0}img{max-width:100%}.container{max-width:720px;margin:3em auto 0;width:96%;padding:0 calc(var(--grid-gutter)/2)}.row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin-left:calc(var(--grid-gutter)/-2);margin-right:calc(var(--grid-gutter)/-2)}.col{-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0 calc(var(--grid-gutter)/2) calc(var(--grid-gutter)/2)}.button{padding:1rem 2.5rem;color:var(--color-grey);background:var(--color-lightGrey);border-radius:4px;border:1px solid transparent;font-size:var(--font-size);line-height:1;text-align:center;-webkit-transition:opacity .2s ease;transition:opacity .2s ease;text-decoration:none;-webkit-transform:scale(1);transform:scale(1);display:inline-block;cursor:pointer}
+.button.secondary{color:#fff;z-index:1;background-color:#000}.button:hover{opacity:.8}.button.secondary{background-color:var(--color-grey)}.button.outline{background-color:transparent;border-color:var(--color-lightGrey)}.button.outline.secondary{border-color:var(--color-grey);color:var(--color-grey)}.button:active:not(:disabled),[type=button]:active:not(:disabled),[type=reset]:active:not(:disabled),[type=submit]:active:not(:disabled),button:active:not(:disabled){-webkit-transform:scale(.98);transform:scale(.98)}::-webkit-input-placeholder{color:#bdbfc4}::-moz-placeholder{color:#bdbfc4}:-ms-input-placeholder{color:#bdbfc4}::-ms-input-placeholder{color:#bdbfc4}.nav{min-height:5rem;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.nav,.nav .brand,.nav a,.nav-center{display:-webkit-box;display:-ms-flexbox;display:flex}.nav-center{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.nav .brand,.nav a{text-decoration:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:1rem 0;color:var(--color-grey)}
+.nav .brand{font-size:1.75em;padding-top:0;padding-bottom:0}.tag{display:inline-block;border:1px solid var(--color-lightGrey);text-transform:uppercase;color:var(--color-grey);padding:.5rem;margin-left:.2em;line-height:1;letter-spacing:.5px}.tag.is-small{padding:.4rem;font-size:.75em}.bd-primary{border:1px solid var(--color-primary)!important}.bd-success{border:1px solid var(--color-success)!important}.text-grey{color:var(--color-grey)!important}.text-error{color:var(--color-error)!important}.text-success{color:var(--color-success)!important}.text-center{text-align:center}.is-full-screen{width:100%;min-height:100vh}.is-center,.is-vertical-align{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.is-rounded{border-radius:100%}.iconify-inline{margin-right:.5em}.iconify-inline.badge{margin-left:.3em}.top{flex-direction:column}#theme-switch{width:3em;height:3em;position:fixed;margin:35rem 0 0;z-index:1}
+section,summary{margin:.8em 0 .5em}.bio-gallery{display:grid;grid-template-columns:repeat(3,1fr)}.bio-item{aspect-ratio:1;margin:.2em;overflow:hidden}.bio-img{object-fit:cover;object-position:center}.col.link{position:relative}footer{margin-top:.5em;margin-bottom:2em}@media screen and (max-width:599px){.container{width:100%}.col{-webkit-box-flex:0;-ms-flex:0 1 100%;flex:0 1 100%;max-width:100%}}@media screen and (max-width:480px){.nav{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nav-center{-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}

metadata

@@ -0,0 +1,85 @@
+--- !ruby/object:Gem::Specification
+name: linkhub-jekyll-theme
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Digital Malayali
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2023-10-03 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.3'
+- !ruby/object:Gem::Dependency
+  name: jekyll-seo-tag
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.8.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.8.0
+description:
+email:
+- social@digitalmalayali.in
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE.txt
+- README.md
+- _config.yml
+- _data/bio.yml
+- _data/links.yml
+- _data/social.yml
+- _includes/bio.html
+- _includes/footer.html
+- _includes/links.html
+- _includes/social.html
+- _layouts/default.html
+- assets/script.js
+- assets/style.css
+homepage: https://github.com/digitalmalayali/linkhub-jekyll-theme
+licenses:
+- MIT
+metadata: {}
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.4.10
+signing_key:
+specification_version: 4
+summary: A minimal and super-lightweight free Jekyll theme to create a link-in-bio
+  website like Linktree.
+test_files: []