diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..8b50627 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,13 @@ +# 0.1.0 (03-10-2023) +- First release. +- Minor changes to CSS compared to [Linkhub](https://github.com/digitalmalayali/Linkhub). + +# [0.1.1](https://github.com/digitalmalayali/linkhub-jekyll-theme/releases/tag/v0.1.1) (04-10-2023) +- Added Google Analytics 4 support. +- Added Bundler as a development dependency. +- Improved docs. + +# [0.1.2](https://github.com/digitalmalayali/linkhub-jekyll-theme/releases/tag/v0.1.2) (11-10-2023) +- Fixed some padding and margin issues. +- Added aspect ratio variable for `bio.yml`. +- Removed `jekyll-seo-tag` plugin. \ No newline at end of file diff --git a/Gemfile b/Gemfile index 91dc715..a42436b 100644 --- a/Gemfile +++ b/Gemfile @@ -3,5 +3,5 @@ source "https://rubygems.org" gemspec -gem "jekyll-seo-tag" -gem "bundler" \ No newline at end of file +gem "bundler" +gem 'wdm', '>= 0.1.0' if Gem.win_platform? \ No newline at end of file diff --git a/README.md b/README.md index d4e3166..fa97c40 100644 --- a/README.md +++ b/README.md @@ -48,16 +48,18 @@ - [Adding Links](#adding-links) - [`links.yml`](#linksyml) - [Contributing](#contributing) +- [Powered by Linkhub](#powered-by-linkhub) - [Development](#development) - [License](#license) ## 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! +- 📸 Add links to Instagram, TikTok, YouTube or any posts/reels/shorts 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! +- 🔍 SEO friendly; uses all the necessary Open Graph and Twitter Card tags for metadata! ## Installation There are multiple ways to install and set up Linkhub. Let's explore each of them. @@ -101,7 +103,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. +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. #### `_config.yml` ```yml @@ -112,16 +114,17 @@ theme: linkhub-jekyll-theme 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') +favicon: https://picsum.photos/32/32 # 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 +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: username # Used for SEO - card: summary + username: DigiMalayali # Used for SEO image: - path: https://picsum.photos/200 #Used for SEO - height: 100 + path: https://picsum.photos/200 # Used for SEO + 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 @@ -129,10 +132,6 @@ image: 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: @@ -143,7 +142,7 @@ defaults: layout: "default" # Exclude -exclude: [README.md, Gemfile.lock, .jekyll-cache/, .github/, Gemfile, LICENSE.txt, funding.yml, linkhub-jekyll-theme.gemspec] +exclude: [README.md, Gemfile.lock, .jekyll-cache/, .github/, CHANGELOG.md, Gemfile, LICENSE.txt, funding.yml, linkhub-jekyll-theme.gemspec] ``` ### Adding Icons @@ -166,7 +165,7 @@ Edit the [social.yml](_data/social.yml) file in the [_data](_data) folder to add ``` ### 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](_data/bio.yml) in the [_data](_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](assets) and place them there. The image size doesn't matter, and it will be displayed similarly to a 3-column Instagram grid. Make sure to add the link you'd like to appear first to the top. +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](_data/bio.yml) in the [_data](_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](assets) and place them there. By default, the images will be displayed with a 1:1 aspect ratio in a 3-column grid. You can use the `ratio` variable for vertical images with a 9:16 aspect ratio. Make sure to add the link you'd like to appear first to the top. #### `bio.yml` ```yml @@ -176,9 +175,10 @@ Like Later's link-in-bio feature, you can include external links to your Instagr image: https://picsum.photos/700/400 # You can use paths to images in the assets folder, e.g., assets/images/insta.jpg. - name: YouTube + ratio: vertical # For vertical 9:16 aspect ratio. Ideal for video thumbnails, such as those used on Instagram Reels, YouTube Shorts and TikTok. To use the default 1:1 aspect ratio (square), remove this variable. items: - url: https://www.example.com - image: https://picsum.photos/300/400 + image: https://picsum.photos/720/1280 ``` ### Remove Instagram/TikTok/YouTube Link-in-bio @@ -213,7 +213,12 @@ Edit the [links.yml](_data/links.yml) file in the [_data](_data) folder to add l ``` ## Contributing -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! +[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. +- [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`. diff --git a/_config.yml b/_config.yml index 6163b7a..58cc2e4 100644 --- a/_config.yml +++ b/_config.yml @@ -5,16 +5,17 @@ theme: linkhub-jekyll-theme 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') +favicon: https://picsum.photos/32/32 # 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 +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: username # Used for SEO - card: summary + username: DigiMalayali # Used for SEO image: - path: https://picsum.photos/200 #Used for SEO - height: 100 + path: https://picsum.photos/200 # Used for SEO + 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 @@ -22,10 +23,6 @@ image: 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: @@ -36,4 +33,4 @@ defaults: layout: "default" # Exclude -exclude: [README.md, Gemfile.lock, .jekyll-cache/, .github/, Gemfile, LICENSE.txt, funding.yml, linkhub-jekyll-theme.gemspec] \ No newline at end of file +exclude: [README.md, Gemfile.lock, .jekyll-cache/, .github/, CHANGELOG.md, Gemfile, LICENSE.txt, funding.yml, linkhub-jekyll-theme.gemspec] \ No newline at end of file diff --git a/_data/bio.yml b/_data/bio.yml index d26c671..fe9cfc1 100644 --- a/_data/bio.yml +++ b/_data/bio.yml @@ -1,18 +1,22 @@ -- name: Instagram +- name: YouTube Shorts + ratio: vertical # For vertical 9:16 aspect ratio. Ideal for video thumbnails, such as those used on Instagram Reels, YouTube Shorts and TikTok. To use the default 1:1 aspect ratio (square), remove this variable. 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. + image: https://picsum.photos/1080/920 - url: https://www.example.org - image: https://picsum.photos/500 + image: https://picsum.photos/540/960 - url: https://www.example.com - image: https://picsum.photos/250/300 + image: https://picsum.photos/720/1280 -- name: YouTube +- name: Instagram items: - url: https://www.example.com - image: https://picsum.photos/300/400 + 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/400/500 \ No newline at end of file + 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 index 6eb28cb..769d6d2 100644 --- a/_includes/bio.html +++ b/_includes/bio.html @@ -4,11 +4,19 @@ {{ name.name }} Link-in-Bio
{% for item in name.items %} + {% if name.ratio %} +
+ + {{ name.name }} post +
+ {% else %}
{{ name.name }} post
+ {% endif %} {% endfor %}
diff --git a/_layouts/default.html b/_layouts/default.html index 54019c0..cea21d8 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -11,7 +11,22 @@ - {% seo %} + + + + + + + + + + + + + + + + @@ -26,10 +41,10 @@

{{ site.name }}{% if site.badge == true %} - ☀️ - - {% include social.html %} + ☀️ + + {% include social.html %} {% include bio.html %} diff --git a/assets/style.css b/assets/style.css index dfa1dfa..5c5a331 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;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 +.nav .brand{font-size:1.75em;padding-top:0;padding-bottom:1rem}.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:.4em 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 diff --git a/linkhub-jekyll-theme.gemspec b/linkhub-jekyll-theme.gemspec index b1e9081..ee7e80b 100644 --- a/linkhub-jekyll-theme.gemspec +++ b/linkhub-jekyll-theme.gemspec @@ -2,18 +2,25 @@ Gem::Specification.new do |spec| spec.name = "linkhub-jekyll-theme" - spec.version = "0.1.1" + spec.version = "0.1.2" spec.authors = ["Digital Malayali"] spec.email = ["social@digitalmalayali.in"] spec.summary = "A minimal and super-lightweight free Jekyll theme to create a link-in-bio website like Linktree." - spec.homepage = "https://github.com/digitalmalayali/linkhub-jekyll-theme" + spec.homepage = "https://digitalmalayali.github.io/linkhub-jekyll-theme" spec.license = "MIT" + spec.metadata = { + "bug_tracker_uri" => "https://github.com/digitalmalayali/linkhub-jekyll-theme/issues", + "changelog_uri" => "https://github.com/digitalmalayali/linkhub-jekyll-theme/CHANGELOG.md", + "documentation_uri" => "https://github.com/digitalmalayali/linkhub-jekyll-theme#readme", + "source_code_uri" => "https://github.com/digitalmalayali/linkhub-jekyll-theme", + "funding_uri" => "https://liberapay.com/zcraber" +} + spec.files = `git ls-files -z`.split("\x0").select { |f| f.match(%r!^(assets|_data|_layouts|_includes|LICENSE|README|_config\.yml)!i) } 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