updates

digitalmalayali · Oct 3, 2023 · bd02b31 · bd02b31
1 parent 0ecf007
commit bd02b31
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,12 @@
-# Linkhub - Jekyll Theme
+<div align="center">
 
-Welcome to Linkhub - Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes`, your sass files in `_sass` and any other assets in `assets`.
+# Linkhub
 
-To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
+A minimal and super-lightweight, free Jekyll theme to create a single-page, link-in-bio website like Linktree or Later.
 
-TODO: Delete this and the text above, and describe your gem
+[**Live Demo ◉**](https://digitalmalayali.github.io/linkhub-jekyll-theme/)
+
+</div>
 
 ## Installation
 
@@ -29,20 +31,35 @@ 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.
 
-TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
+### 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 at https://github.com/[USERNAME]/linkhub-jekyll-theme. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct.
+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`, `_sass` and `assets` tracked with Git will be bundled.
+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

diff --git a/_data/bio.yml b/_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
diff --git a/_data/insta.yml b/_data/insta.yml
diff --git a/_includes/bio.html b/_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>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,6 +1,6 @@
 <footer class="text-center">
-    <small class="text-grey">Powered by Jekyll theme <a href="https://github.com/digitalmalayali/Linkhub"
+    <small class="text-grey">Powered by Jekyll theme <a href="https://github.com/digitalmalayali/linkhub-jekyll-theme"
         target="_blank">Linkhub</a>. Code is licensed under <a
-            href="https://github.com/digitalmalayali/Linkhub/blob/main/LICENSE" target="_blank">MIT</a>.</small>
+            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>
diff --git a/_includes/insta.html b/_includes/insta.html
diff --git a/_includes/links.html b/_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>
diff --git a/_includes/social.html b/_includes/social.html
@@ -1,5 +1,9 @@
-{% 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 %}
+<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>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,6 +2,8 @@
 <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">
@@ -21,45 +23,16 @@ <h3>{{ site.name }}{% if site.badge == true %}<span class="iconify-inline badge"
         </header>
 
         <!-- Dark / Light Mode Switch -->
-        <nav class="nav">
             <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 -->
-            <div class="nav-center">
-                {% include social.html %}
-            </div>
-        </nav>
+            {% include social.html %}
 
-        <!-- Insta Link-in-bio -->
-        <section>
-            <details>
-                <summary class="text-center text-error">Insta Link-in-Bio</summary>
-                <div class="insta-gallery">
-                    {% include insta.html %}
-                </div>
-            </details>
-        </section>
+        <!-- Insta/TikTok/YouTube Link-in-bio -->
+        {% include bio.html %}
 
         <!-- Link Buttons -->
-        <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>
+        {% include links.html %}
 
         {% include footer.html %}
     </div>

diff --git a/assets/style.css b/assets/style.css