From bd02b319e16c4dac48afd3ca4b2b10dad786bedb Mon Sep 17 00:00:00 2001 From: zcraber Date: Tue, 3 Oct 2023 19:32:14 +0530 Subject: [PATCH] updates --- README.md | 31 ++++++++++++++++++++++++------- _data/bio.yml | 18 ++++++++++++++++++ _data/insta.yml | 8 -------- _includes/bio.html | 16 ++++++++++++++++ _includes/footer.html | 4 ++-- _includes/insta.html | 6 ------ _includes/links.html | 19 +++++++++++++++++++ _includes/social.html | 14 +++++++++----- _layouts/default.html | 39 ++++++--------------------------------- assets/style.css | 4 ++-- 10 files changed, 96 insertions(+), 63 deletions(-) create mode 100644 _data/bio.yml delete mode 100644 _data/insta.yml create mode 100644 _includes/bio.html delete mode 100644 _includes/insta.html create mode 100644 _includes/links.html diff --git a/README.md b/README.md index d569607..fcc10da 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,12 @@ -# Linkhub - Jekyll Theme +
-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/) + +
## Installation @@ -29,12 +31,26 @@ 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 @@ -42,7 +58,8 @@ 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 new file mode 100644 index 0000000..d26c671 --- /dev/null +++ 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 \ No newline at end of file diff --git a/_data/insta.yml b/_data/insta.yml deleted file mode 100644 index 531eed4..0000000 --- a/_data/insta.yml +++ /dev/null @@ -1,8 +0,0 @@ -- url: https://www.example.com - image: https://picsum.photos/700/400 - -- url: https://www.example.org - image: https://picsum.photos/500 - -- url: https://www.example.com - image: https://picsum.photos/250/300 \ No newline at end of file diff --git a/_includes/bio.html b/_includes/bio.html new file mode 100644 index 0000000..6eb28cb --- /dev/null +++ b/_includes/bio.html @@ -0,0 +1,16 @@ +
+ {% for name in site.data.bio %} +
+ {{ name.name }} Link-in-Bio +
+ {% for item in name.items %} +
+ + {{ name.name }} post +
+ {% endfor %} +
+
+ {% endfor %} +
\ No newline at end of file diff --git a/_includes/footer.html b/_includes/footer.html index 4870f47..ed4dc80 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,6 +1,6 @@ \ No newline at end of file diff --git a/_includes/insta.html b/_includes/insta.html deleted file mode 100644 index 7a6a2b9..0000000 --- a/_includes/insta.html +++ /dev/null @@ -1,6 +0,0 @@ -{% for insta in site.data.insta %} -
- - Insta post -
-{% endfor %} \ No newline at end of file diff --git a/_includes/links.html b/_includes/links.html new file mode 100644 index 0000000..9272501 --- /dev/null +++ b/_includes/links.html @@ -0,0 +1,19 @@ +
+ {% for category in site.data.links %} +
{{ category.category }}
+ {% for item in category.items %} +
+ {% if item.tag %} +
+ {% else %} +
+ {% endif %} + {{ item.title }} + {% if item.tag %}{{ item.tag }}{% + endif %} +
+
+ {% endfor %} + {% endfor %} +
\ No newline at end of file diff --git a/_includes/social.html b/_includes/social.html index 36a3377..13a4bc9 100644 --- a/_includes/social.html +++ b/_includes/social.html @@ -1,5 +1,9 @@ -{% for social in site.data.social %} - - - -{% endfor %} \ No newline at end of file + \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 8fb7acc..84bfdd0 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -2,6 +2,8 @@ + + {{ site.tagline }} - {{ site.name }} @@ -21,45 +23,16 @@

{{ site.name }}{% if site.badge == true %} - + {% include social.html %} - -
-
- Insta Link-in-Bio -
- {% include insta.html %} -
-
-
+ + {% include bio.html %} -
- {% for category in site.data.links %} -
{{ category.category }}
- {% for item in category.items %} -
- {% if item.tag %} -
- {% else %} -
- {% endif %} - {{ item.title }} - {% if item.tag %}{{ item.tag }}{% - endif %} -
-
- {% endfor %} - {% endfor %} -
+ {% include links.html %} {% include footer.html %} diff --git a/assets/style.css b/assets/style.css index a31d23a..dfa1dfa 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,5 +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;position:fixed;margin:35rem 0 0;z-index:1} -section,summary{margin:.8em 0 .5em}.insta-gallery{display:grid;grid-template-columns:repeat(3,1fr)}.insta-item{aspect-ratio:1;margin:.2em;overflow:hidden}.insta-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}} \ No newline at end of file +.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}} \ No newline at end of file