From e675a02494abfee2c9e3d29ce0666e1cdef7b45c Mon Sep 17 00:00:00 2001 From: Soumya Kundu <26403943+SoumyaK4@users.noreply.github.com> Date: Thu, 19 Dec 2024 01:57:19 +0530 Subject: [PATCH] v0.9 --- _config.yml | 11 +- _data/contact.yml | 11 +- _posts/2019-08-08-demo-blog.md | 1 + _posts/2020-06-11-config.md | 15 - _posts/2020-06-13-contact.md | 12 - _posts/2020-06-14-share-options.md | 10 - _posts/2021-06-15-footer.md | 10 - _posts/2021-06-16-sidebar.md | 10 - _posts/2021-06-17-trending-tags.md | 10 - _posts/2022-04-10-home.md | 12 - ...{2024-11-12-code.md => 2024-06-06-code.md} | 460 +----------------- ...2020-06-12-author.md => 2024-11-13-pwa.md} | 130 ++++- _posts/2024-11-14-kungfux.md | 262 ++++++++++ _posts/2024-11-15-lqip.md | 13 + _tabs/tools.md | 3 + 15 files changed, 434 insertions(+), 536 deletions(-) delete mode 100644 _posts/2020-06-11-config.md delete mode 100644 _posts/2020-06-13-contact.md delete mode 100644 _posts/2020-06-14-share-options.md delete mode 100644 _posts/2021-06-15-footer.md delete mode 100644 _posts/2021-06-16-sidebar.md delete mode 100644 _posts/2021-06-17-trending-tags.md delete mode 100644 _posts/2022-04-10-home.md rename _posts/{2024-11-12-code.md => 2024-06-06-code.md} (50%) rename _posts/{2020-06-12-author.md => 2024-11-13-pwa.md} (54%) create mode 100644 _posts/2024-11-14-kungfux.md create mode 100644 _posts/2024-11-15-lqip.md diff --git a/_config.yml b/_config.yml index dab4a88..020d544 100644 --- a/_config.yml +++ b/_config.yml @@ -14,25 +14,22 @@ timezone: Asia/Calcutta # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md # ↓ -------------------------- -title: Chirpy Mods # the main title +title: Jekyll Mods # the main title -tagline: Chirpy Jekyll Mods by SoumyaK4 # it will display as the subtitle +tagline: by SoumyaK4 # it will display as the subtitle description: >- # used by seo meta and the atom feed - This contains all modifications on Chirpy Jekyll theme. + Modifications on Jekyll Themes, mainly Chirpy # Fill in the protocol & hostname for your site. # E.g. 'https://username.github.io', note that it does not end with a '/'. url: "https://chirpy.soumyak4.in" +# to show future dated posts future: true github: username: SoumyaK4 # change to your GitHub username -instagram: - username: SoumyaK4_ # change to your Twitter username -youtube: - username: SoumyaK4_ # change to your Twitter username social: # Change to your full name. diff --git a/_data/contact.yml b/_data/contact.yml index cd24f5f..f6325ca 100644 --- a/_data/contact.yml +++ b/_data/contact.yml @@ -6,9 +6,9 @@ # - type: twitter # icon: "fa-brands fa-x-twitter" -- type: email - icon: "fas fa-envelope" - noblank: true # open link in current tab +# - type: email +# icon: "fas fa-envelope" +# noblank: true # open link in current tab - type: instagram icon: "fab fa-instagram" @@ -18,6 +18,11 @@ icon: "fab fa-youtube" url: "https://youtube.com/@soumyak4" +- type: website + icon: "fas fa-s" + url: "https://soumyak4.in" + noblank: true + # Uncomment and complete the url below to enable more contact options # # - type: mastodon diff --git a/_posts/2019-08-08-demo-blog.md b/_posts/2019-08-08-demo-blog.md index 530b65a..a9782c2 100644 --- a/_posts/2019-08-08-demo-blog.md +++ b/_posts/2019-08-08-demo-blog.md @@ -5,6 +5,7 @@ date: 2019-08-08 11:33:00 +0800 categories: [Site, Demo Blog] tags: [typography] pin: true +published: false math: true mermaid: true image: diff --git a/_posts/2020-06-11-config.md b/_posts/2020-06-11-config.md deleted file mode 100644 index bc8afdb..0000000 --- a/_posts/2020-06-11-config.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Changing Config -description: Changes in _config.yml -date: 2020-06-11 00:00:00 +0530 -categories: [Site, _config] -tags: [_config] -pin: true -published: false ---- - -# Fill in the necessary information - -## Delete all unnecessary lines to get a clean _config.yml - -- Remember not to delete neccessary comments \ No newline at end of file diff --git a/_posts/2020-06-13-contact.md b/_posts/2020-06-13-contact.md deleted file mode 100644 index 24af87a..0000000 --- a/_posts/2020-06-13-contact.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Adding Contacts -description: Changes in _data/contact.yml -date: 2020-06-13 00:00:00 +0530 -categories: [_data, Contacts] -tags: [contact links] -published: false ---- - -# Fill in the necessary information - -## Requires a change in _includes/sidebar.html \ No newline at end of file diff --git a/_posts/2020-06-14-share-options.md b/_posts/2020-06-14-share-options.md deleted file mode 100644 index 3b1c7a0..0000000 --- a/_posts/2020-06-14-share-options.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Post Share options -description: Changes in _data/share.yml -date: 2020-06-14 00:00:00 +0530 -categories: [_data, Share] -tags: [share options] -published: false ---- - -# Enable the necessary social platforms to share your post. diff --git a/_posts/2021-06-15-footer.md b/_posts/2021-06-15-footer.md deleted file mode 100644 index 3e313ea..0000000 --- a/_posts/2021-06-15-footer.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Changing Footer -description: Changes in _includes/footer.html -date: 2021-06-15 00:00:00 +0530 -categories: [_includes, Footer] -tags: [footer] -published: false ---- - -# Make necessary changes diff --git a/_posts/2021-06-16-sidebar.md b/_posts/2021-06-16-sidebar.md deleted file mode 100644 index 24f6841..0000000 --- a/_posts/2021-06-16-sidebar.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Changing Sidebar -description: Changes in _includes/sidebar.html -date: 2021-06-16 00:00:00 +0530 -categories: [_includes, Sidebar] -tags: [sidebar] -published: false ---- - -# Make necessary changes diff --git a/_posts/2021-06-17-trending-tags.md b/_posts/2021-06-17-trending-tags.md deleted file mode 100644 index 60aa811..0000000 --- a/_posts/2021-06-17-trending-tags.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Trending Section -description: Changes is _includes/trending-tags.html -date: 2021-06-17 00:00:00 +0530 -categories: [_includes, Trending] -tags: [trending] -published: false ---- - -# Make necessary changes diff --git a/_posts/2022-04-10-home.md b/_posts/2022-04-10-home.md deleted file mode 100644 index bda5426..0000000 --- a/_posts/2022-04-10-home.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Trending Section -description: Changes is _includes/trending-tags.html -date: 2021-06-17 00:00:00 +0530 -categories: [_layouts, Home] -tags: [home] -published: false ---- - -# Make necessary changes - -[Newsletter](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2067) \ No newline at end of file diff --git a/_posts/2024-11-12-code.md b/_posts/2024-06-06-code.md similarity index 50% rename from _posts/2024-11-12-code.md rename to _posts/2024-06-06-code.md index a4fda39..8676eea 100644 --- a/_posts/2024-11-12-code.md +++ b/_posts/2024-06-06-code.md @@ -1,243 +1,11 @@ --- title: Old Codes description: List of all past changes -date: 2024-12-30 00:00:00 +0530 -tags: [codes] -pin: true +date: 2024-06-06 00:00:00 +0530 +categories: [Old Code] --- -## _config.yml - -```yaml -# The Site Configuration - -# Import the theme -theme: jekyll-theme-chirpy - -# The language of the webpage › http://www.lingoes.net/en/translator/langcode.htm -# If it has the same name as one of the files in folder `_data/locales`, the layout language will also be changed, -# otherwise, the layout language will use the default value of 'en'. -lang: en - -# Change to your timezone › https://kevinnovak.github.io/Time-Zone-Picker -timezone: Asia/Calcutta - -# jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md -# ↓ -------------------------- - -title: WEIQI # the main title - -tagline: Learn The Surrounding Game # it will display as the subtitle - -description: >- # used by seo meta and the atom feed - Roadmap - Guide - Tutorial - Resources for the game of Go - Baduk - Weiqi - -# Fill in the protocol & hostname for your site. -# E.g. 'https://username.github.io', note that it does not end with a '/'. -url: "https://wq.soumyak4.in" - -social: - # Change to your full name. - # It will be displayed as the default author of the posts and the copyright owner in the Footer - name: SoumyaK4 - links: - # The first element serves as the copyright owner's link - - https://soumyak4.in/Experiences - -# Site Verification Settings -webmaster_verifications: - google: # fill in your Google verification code - bing: # fill in your Bing verification code - alexa: # fill in your Alexa verification code - yandex: # fill in your Yandex verification code - baidu: # fill in your Baidu verification code - facebook: # fill in your Facebook verification code - -# ↑ -------------------------- -# The end of `jekyll-seo-tag` settings - -# Web Analytics Settings -analytics: - google: - id: # fill in your Google Analytics ID - goatcounter: - id: 1213 # fill in your GoatCounter ID - umami: - id: # fill in your Umami ID - domain: # fill in your Umami domain - matomo: - id: # fill in your Matomo ID - domain: # fill in your Matomo domain - cloudflare: - id: # fill in your Cloudflare Web Analytics token - fathom: - id: # fill in your Fathom Site ID - -# Page views settings -pageviews: - provider: goatcounter # now only supports 'goatcounter' - -# Prefer color scheme setting. -# -# Note: Keep empty will follow the system prefer color by default, -# and there will be a toggle to switch the theme between dark and light -# on the bottom left of the sidebar. -# -# Available options: -# -# light — Use the light color scheme -# dark — Use the dark color scheme -# -theme_mode: dark # [light | dark] - -# The CDN endpoint for media resources. -# Notice that once it is assigned, the CDN url -# will be added to all media resources (site avatar, posts' images, audio and video files) paths starting with '/' -# -# e.g. 'https://cdn.com' -cdn: - -# the avatar on sidebar, support local or CORS resources -avatar: "/assets/img/logo.webp" - -# The URL of the site-wide social preview image used in SEO `og:image` meta tag. -# It can be overridden by a customized `page.image` in front matter. -social_preview_image: # string, local or CORS resources - -# boolean type, the global switch for TOC in posts. -toc: true - -comments: - # Global switch for the post-comment system. Keeping it empty means disabled. - provider: # [disqus | utterances | giscus] - # The provider options are as follows: - disqus: - shortname: # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname - # utterances settings › https://utteranc.es/ - utterances: - repo: # / - issue_term: # < url | pathname | title | ...> - # Giscus options › https://giscus.app - giscus: - repo: # / - repo_id: - category: - category_id: - mapping: # optional, default to 'pathname' - strict: # optional, default to '0' - input_position: # optional, default to 'bottom' - lang: # optional, default to the value of `site.lang` - reactions_enabled: # optional, default to the value of `1` - -# Self-hosted static assets, optional › https://github.com/cotes2020/chirpy-static-assets -assets: - self_host: - enabled: # boolean, keep empty means false - # specify the Jekyll environment, empty means both - # only works if `assets.self_host.enabled` is 'true' - env: # [development | production] - -pwa: - enabled: true # The option for PWA feature (installable) - cache: - enabled: true # The option for PWA offline cache - # Paths defined here will be excluded from the PWA cache. - # Usually its value is the `baseurl` of another website that - # shares the same domain name as the current website. - deny_paths: - # - "/example" # URLs match `/example/*` will not be cached by the PWA - -paginate: 100 - -# The base URL of your site -baseurl: "" - -# ------------ The following options are not recommended to be modified ------------------ - -kramdown: - footnote_backlink: "↩︎" - syntax_highlighter: rouge - syntax_highlighter_opts: # Rouge Options › https://github.com/jneen/rouge#full-options - css_class: highlight - # default_lang: console - span: - line_numbers: false - block: - line_numbers: true - start_line: 1 - -collections: - tabs: - output: true - sort_by: order - -defaults: - - scope: - path: "" # An empty string here means all files in the project - type: posts - values: - layout: post - comments: true # Enable comments in posts. - toc: true # Display TOC column in posts. - # DO NOT modify the following parameter unless you are confident enough - # to update the code of all other post links in this project. - permalink: /posts/:title/ - - scope: - path: _drafts - values: - comments: false - - scope: - path: "" - type: tabs # see `site.collections` - values: - layout: page - permalink: /:title/ - -sass: - style: compressed - -compress_html: - clippings: all - comments: all - endings: all - profile: false - blanklines: false - ignore: - envs: [development] - -exclude: - - "*.gem" - - "*.gemspec" - - docs - - tools - - README.md - - LICENSE - - "*.config.js" - - package*.json - -jekyll-archives: - enabled: [categories, tags] - layouts: - category: category - tag: tag - permalinks: - tag: /tags/:name/ - category: /categories/:name/ -``` -{: file='_config.yml' } - -## _data - -### authors.yml - -```yaml -SoumyaK4: # author id - name: SoumyaK4 - url: https://soumyak4.github.io -``` -{: file='_data/authors.yml' } - -### contact.yml +## _data/contact.yml ```yaml # The contact options. @@ -265,35 +33,6 @@ SoumyaK4: # author id ``` {: file='_data/contact.yml' } -### share.yml - -```yaml -# Sharing options at the bottom of the post. -# Icons from - -platforms: - - type: Twitter - icon: "fa-brands fa-square-x-twitter" - link: "https://twitter.com/intent/tweet?text=TITLE&url=URL" - - - type: Facebook - icon: "fab fa-facebook-square" - link: "https://www.facebook.com/sharer/sharer.php?title=TITLE&u=URL" - - - type: Telegram - icon: "fab fa-telegram" - link: "https://t.me/share/url?url=URL&text=TITLE" - - - type: Linkedin - icon: "fab fa-linkedin" - link: "https://www.linkedin.com/sharing/share-offsite/?url=URL" - - - type: Weibo - icon: "fab fa-weibo" - link: "https://service.weibo.com/share/share.php?title=TITLE&url=URL" -``` -{: file='_data/share.yml' } - ## _includes ### footer.html @@ -338,41 +77,33 @@ platforms: ``` {: file='_includes/footer.html' } -### pre-home.html +### about.html ```html - +{% raw %} + + +
- Hello, I'm Soumya
+ Hello, I'm Soumya
- A Student / Teacher from Kolkata, India + A Student / Teacher from Kolkata, India
+
+ I've created This Roadmap in 2021 from my experience of becoming an Intermediate Level Player,
+ With Just 1 Year of Self Studies, using online free resources.
+ I hope this helps you on Your Journey as well.
+ Good Luck, Have Fun!! +
+
+{% endraw %} ``` -{: file='_includes/pre-home.html' } - -### pre-timeline.html - -```html - - -
-

Roadmap v3.7

- This is a Slightly Modified Timeline of My Progression -
- -
- P.S. The timeframe in this page is mainly the time it took me to complete the sections.
- I've specified an Average Recommended Time of Completion at the top of each Ranked Posts. -
-
-
-``` -{: file='_includes/pre-timeline.html' } +{: file='_includes/about.html' } ### sidebar.html @@ -471,8 +202,8 @@ platforms: ### trending-tags.html -```html {% raw %} +```html {% assign MAX = 10 %} @@ -783,154 +514,3 @@ layout: default ``` {: file='_layouts/page.html' } -## _tabs - -### -### -### -### - -## assets - -### img/favicons/site.webmanifest - -```json -{% raw %} ---- -layout: compress ---- - -{% assign favicon_path = "/assets/img/favicons" | relative_url %} - -{ - "name": "{{ site.title }}", - "short_name": "{{ site.title }}", - "description": "{{ site.description }}", - "scope": "/", - "start_url": "{{ '/index.html' | relative_url }}", - "id": "/index.html", - "display_override": ["window-control-overlay", "fullscreen","standalone"], - "display": "minimal-ui", - "theme_color": "#2a1e6b", - "background_color": "#ffffff", - "icons": [ - { - "src": "{{ favicon_path }}/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "{{ favicon_path }}/android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ], - "screenshots": [ - { - "src": "/assets/img/post.png", - "sizes": "1336x633", - "type": "image/png", - "form_factor": "wide" - }, - { - "src": "/assets/img/home.png", - "sizes": "1336x633", - "type": "image/png", - "form_factor": "wide" - }, - { - "src": "/assets/img/home-m.png", - "sizes": "344x619", - "type": "image/png", - "form_factor": "narrow" - }, - { - "src": "/assets/img/sidebar.png", - "sizes": "344x619", - "type": "image/png", - "form_factor": "narrow" - } - ], - "shortcuts": [ - { - "name": "Writing Guide", - "short_name": "Blogging", - "description": "Everything you need to know to create a post.", - "url": "/posts/text-and-typography/", - "icons": [{ "src": "{{ favicon_path }}/android-chrome-192x192.png", "sizes": "192x192" }] - } - ] -} -{% endraw %} -``` -{: file='assets/img/favicons/site.webmanifest' } - -## pages - -### Acknowledgements.md - -```md ---- -title: Acknowledgements -layout: page -permalink: /acknowledgement/ ---- - -# The following is the List of Acknowledgements to People/Platforms that made this Project Possible -
- -## Direct Supporters -
- -1. Association of Indian Go Players - Wouldn't have resumed playing and would've never played on 19x19 without you guys encouraging me back in 2020. -2. Amartya (OGS - HungryBradbury)- Thanks for the financial support, and also for the proofreading with the current roadmap. -3. Chinky - Thanks for the UI ideas. -4. Vadim Efimenko - From the Go Magic team. Thank you for your tips/suggessions in version 3 of the roadmap. - -## Theme & Hosting -
- -1. Jekyll -2. Chirpy Jekyll Theme -3. Github Pages - -## Images & Favicons -
- -1. The site's Logo Image Borrowed from Stoned on the Goban, as its my most favourite Weiqi Artwork of all time, and also because I find it the best fitting image for this project.
- -> Please support her Go Playing Cards Kickstarter. -{: .prompt-tip } - - > P.S. Do check the artworks, the artist creates the best Weiqi artworks. - -3. Other Images collected from Pinterest - -## People I consider my Teachers in Chronological Order(Even though I never took a direct class with them) -
- -1. Shawn Ray(Clossius) 4D -2. Dwyrin 6D -3. Stephanie Yin 1P, Ryan Li 3P -4. Vadim Efimenko 4D -5. Hwang In-Seong 8D -6. Cho Yeonwoo 2P, Youngsun Yoon 8P -7. Kim Seung-jun (Blackie) 9P, Kőszegi Diána 1P - - - - -## Go Platforms - most important Platforms that fueled my studies. -
- -1. Go Magic - A Modern Platform for Learning the Game -2. Sensei's XMP - A Special Wiki for the Game -3. Online Go Server - Most Popular English Playing Platform -4. Yunguseng Dojang - Online Go School of My Favourite Teacher In-Seong Hwang(8d) -5. Awesome Baduk - Online School of Young Sun Yoon(8p) & Yeon Woo Cho(3p) -6. Baduk.Club - A Platform to find Nearby Players/Clubs -7. Leago.GG - Tournament Platform -``` -{: file='pages/Acknowledgements.md' } - -### \ No newline at end of file diff --git a/_posts/2020-06-12-author.md b/_posts/2024-11-13-pwa.md similarity index 54% rename from _posts/2020-06-12-author.md rename to _posts/2024-11-13-pwa.md index d6d00e3..c5fdec5 100644 --- a/_posts/2020-06-12-author.md +++ b/_posts/2024-11-13-pwa.md @@ -1,14 +1,14 @@ --- -title: Adding PWA Install Popup -description: Create a popup for installing the PWA -date: 2020-06-12 00:00:00 +0530 -categories: [_includes, PWA] -tags: [pwa, popup] +title: PWA +description: Create a popup for installing the PWA & Customize Site Manifest +date: 2024-11-13 00:00:00 +0530 +categories: [PWA] +tags: [pwa, popup, site.manifest] --- -### Wait 4 seconds on this page for the popup +## Wait 4 seconds for the popup ```html @@ -135,4 +135,120 @@ document.addEventListener("DOMContentLoaded", () => { }); }); ``` -{: file='assets/js/pwa-popup.js'} \ No newline at end of file +{: file='assets/js/pwa-popup.js'} + +## Install to check manifest mods + +```json +{% raw %} +--- +layout: compress +--- + +{% assign favicon_path = "/assets/img/favicons" | relative_url %} + +{ + "name": "{{ site.title }}", + "short_name": "{{ site.title }}", + "id": "{{ site.title | slugify }}", + "scope": "/", + "description": "{{ site.description }}", + "start_url": "{{ '/index.html' | relative_url }}", + "theme_color": "#2a1e6b", + "background_color": "#ffffff", + "display_override": ["window-control-overlay", "fullscreen", "minimal-ui"], + "display": "standalone", + "orientation": "natural", + "icons": [ + { + "src": "{{ favicon_path }}/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "{{ favicon_path }}/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + }], + "screenshots": [ + { + "src": "home.png", + "sizes": "1366x768", + "type": "image/png", + "form_factor": "wide", + "label": "Home screen showing main navigation and featured content" + }, + { + "src": "dash.png", + "sizes": "1366x768", + "type": "image/png", + "form_factor": "wide", + "label": "Dashboard view with blog and TOC" + }, + { + "src": "blog.png", + "sizes": "411x670", + "type": "image/png", + "form_factor": "narrow", + "label": "Blog Screen Mobile View" + }, + { + "src": "toc.png", + "sizes": "411x670", + "type": "image/png", + "form_factor": "narrow", + "label": "Blog screen showing toc mobile view" + }, + { + "src": "dash-m.png", + "sizes": "411x670", + "type": "image/png", + "platform": "android", + "label": "visible on android" + }], + "shortcuts": [ + { + "name": "Home", + "short_name": "Home", + "url": "{{ '/index.html' | relative_url }}", + "icons": [ + { + "src": "{{ favicon_path }}/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + } + ] + }, + { + "name": "Tools", + "short_name": "Tools", + "url": "{{ '/tools' | relative_url }}", + "icons": [ + { + "src": "{{ favicon_path }}/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + } + ] + } + ] +} +{% endraw %} +``` +{: file='assets/img/favicons/site.webmanifest' } + +## To disable the update popup + +```html + +``` +{: file='/assets/js/auto-update.js'} + +```javascript +const toast = document.getElementById('notification'); +toast.addEventListener('shown.bs.toast', () => { + const button = toast.querySelector('.toast-body>button'); + button?.click(); +}); +``` +{: file='/assets/js/auto-update.js'} \ No newline at end of file diff --git a/_posts/2024-11-14-kungfux.md b/_posts/2024-11-14-kungfux.md new file mode 100644 index 0000000..9bcca11 --- /dev/null +++ b/_posts/2024-11-14-kungfux.md @@ -0,0 +1,262 @@ +--- +title: Progress Bar & About +description: Got these from a Contributor of Chirpy +date: 2024-11-14 00:00:00 +0530 +categories: [UI] +tags: [ui, progress bar] +--- + +# Copied from Alexander Fux + +## A progress bar inside 'Back to Top' button + +```html + +``` +{: file='_includes/footer.html'} + +```javascript +document.addEventListener('DOMContentLoaded', () => { + const btn = document.getElementById('back-to-top'); + + if (!btn) { + return; + } + + const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svg.setAttribute("id", "progress-circle"); + svg.setAttribute("width", "44"); + svg.setAttribute("height", "44"); + + const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); + circle.setAttribute("cx", "22"); + circle.setAttribute("cy", "22"); + circle.setAttribute("r", "20"); + circle.setAttribute("stroke-width", "4"); + circle.setAttribute("fill", "none"); + + svg.appendChild(circle); + btn.appendChild(svg); + + window.addEventListener('scroll', () => { + if (window.scrollY > 50) { + const circumference = 2 * 3.14 * 20; + const scrollTop = window.scrollY; + const docHeight = document.documentElement.scrollHeight - window.innerHeight; + const scrollFraction = scrollTop / docHeight; + const drawLength = circumference * scrollFraction; + + circle.style.strokeDashoffset = circumference - drawLength; + } + }); +}); +``` +{: file='/assets/js/progress.js'} + +```scss +// Back-to-top progress bar +#progress-circle { + margin: -1px -1px; + top: -2.75rem; + position: relative; + transform: rotate(-90deg); + + circle { + stroke: var(--toc-highlight); + stroke-dasharray: 2 * 3.14 * 20; + stroke-dashoffset: 2 * 3.14 * 20; + transition: stroke-dashoffset 0.2s; + } +} +``` +{: file='/assets/css/jekyll-theme-chirpy.scss'} + +## Tech Stack in About page + +```html + + + +``` +{: file='_tabs/about.md'} + +```javascript +// Icons provided by https://devicon.dev/ +const tools = [ + // Languages and frameworks + { icon: 'csharp', hint: 'C#' }, + { icon: 'dot-net', tag: 'dotnet', hint: 'DotNet' }, + { icon: 'dotnetcore', tag: 'dotnet-core', hint: 'DotNet Core' }, + { icon: 'blazor', iconType: 'original', isClickable: false }, + { icon: 'javascript' }, + { icon: 'typescript' }, + { icon: 'java' }, + { icon: 'cplusplus', tag: 'c', hint: 'C++' }, + { icon: 'python' }, + { icon: 'php' }, + // { icon: 'delphi' }, + // { icon: 'pascal' }, + // { icon: 'basic' }, + { icon: 'nodejs', hint: 'Node.js' }, + { icon: 'react' }, + { icon: 'electron', iconType: 'original' }, + { icon: 'angular' }, + { icon: 'android', isClickable: false }, + { icon: 'html5', tag: 'html', hint: 'HTML' }, + { icon: 'css3', tag: 'css', hint: 'CSS' }, + { icon: 'sass', isClickable: false }, + { icon: 'bootstrap' }, + { icon: 'fastify' }, + { icon: 'arduino' }, + + // Host, deployment and CI/CD + { icon: 'docker' }, + { icon: 'podman', isClickable: false }, + { icon: 'kubernetes', isClickable: false }, + { icon: 'helm', isClickable: false }, + { icon: 'azure', isClickable: false }, + { icon: 'tomcat', iconType: 'line' }, + { icon: 'apache' }, + { icon: 'github', hint: 'GitHub', isClickable: false }, + { icon: 'azuredevops', hint: 'Azure DevOps', isClickable: false }, + { icon: 'bitbucket', isClickable: false }, + { icon: 'gitlab', hint: 'GitLab', isClickable: false }, + { icon: 'jira', isClickable: false }, + { icon: 'confluence', isClickable: false }, + // { icon: 'teamcity', hint: 'TeamCity', isClickable: false }, + { icon: 'jenkins' }, + + // IDEs, editors, and tools + { icon: 'vscode', hint: 'Visual Studio Code' }, + { icon: 'rider' }, + { icon: 'visualstudio', tag: 'visual-studio', hint: 'Visual Studio' }, + // { icon: 'netbeans', hint: 'NetBeans' }, + { icon: 'eclipse', isClickable: false }, + { icon: 'git', isClickable: false }, + { icon: 'subversion', isClickable: false }, + // { icon: 'tfs', isClickable: false }, + { icon: 'nuget', iconType: 'original', isClickable: false }, + { icon: 'npm', iconType: 'original-wordmark', isClickable: false }, + { icon: 'webpack' }, + { icon: 'jekyll', isClickable: false }, + { icon: 'markdown', isClickable: false }, + { icon: 'materialui', tag: 'material-ui', hint: 'Material UI' }, + { icon: 'redux' }, + { icon: 'vite' }, + // { icon: 'virtualbox' }, + + // Databases + { icon: 'sqlite', hint: 'SQLite' }, + { icon: 'mysql', hint: 'MySQL' }, + { icon: 'microsoftsqlserver', hint: 'SQL Server', isClickable: false }, + { icon: 'postgresql', hint: 'PostgreSQL', isClickable: false }, + + // Testing tools + { icon: 'playwright' }, + { icon: 'selenium' }, + { icon: 'cucumber', isClickable: false }, + { icon: 'postman', isClickable: false }, + // { icon: 'jmeter', isClickable: false }, + + // Others + { icon: 'windows11', tag: 'windows', hint: 'Windows' }, + { icon: 'powershell', isClickable: false }, + { icon: 'linux' }, + { icon: 'bash' }, + { icon: 'vim', isClickable: false }, + { icon: 'raspberrypi', hint: 'Raspberry Pi' }, + { icon: 'chrome' }, + { icon: 'firefox' }, + { icon: 'opentelemetry', hint: 'OpenTelemetry', isClickable: false }, + { icon: 'json', hint: 'JSON', isClickable: false }, + { icon: 'yaml', hint: 'YAML', isClickable: false }, + { icon: 'figma', isClickable: false }, + { icon: 'msdos', hint: 'MS-DOS', isClickable: false }, +]; + +const container = document.getElementById('tools'); + +tools.forEach((tool) => { + const icon = tool.icon; + const iconType = tool.iconType ?? 'plain'; + const tag = tool.tag ?? icon; + const title = tool.hint ?? tool.icon; + const isClickable = tool.isClickable ?? true; + + const anchor = document.createElement('a'); + const classes = isClickable ? ['tool'] : ['tool', 'disabled']; + anchor.classList.add(...classes); + if (isClickable) { + anchor.href = `/tags/${tag}`; + } + anchor.title = title.charAt(0).toUpperCase() + title.slice(1); + + const content = document.createElement('i'); + content.className = `tool-icon devicon-${icon}-${iconType}`; + + anchor.appendChild(content); + container.appendChild(anchor); +}); + +document.querySelectorAll('.tool-icon').forEach((ti) => { + ['mouseenter', 'touchstart'].forEach((event) => + ti.addEventListener( + event, + () => { + ti.classList.add('colored'); + ti.parentElement.classList.add('hovered'); + }, + { passive: true } + ) + ); + ['mouseleave', 'touchend', 'touchcancel'].forEach((event) => + ti.addEventListener( + event, + () => { + ti.classList.remove('colored'); + ti.parentElement.classList.remove('hovered'); + }, + { passive: true } + ) + ); +}); +``` +{: file='/assets/js/about.js'} + +```css +hr.about { + margin: 2.5rem 0; +} + +#tools { + text-align: center; +} + +a.tool { + display: inline-block; + padding: 0.5rem; + border-bottom: unset !important; + transition: transform 0.2s; +} + +a.tool.hovered { + transform: scale(1.5); + transition: transform 0.2s; +} + +a.tool.disabled { + cursor: default; +} + +i.tool-icon::before { + font-size: 300%; + opacity: 1; +} + +i.tool-icon:not(.colored)::before { + color: #696969; + opacity: 0.5 !important; +} +``` +{: file='/assets/css/about.css'} + diff --git a/_posts/2024-11-15-lqip.md b/_posts/2024-11-15-lqip.md new file mode 100644 index 0000000..7b4cde8 --- /dev/null +++ b/_posts/2024-11-15-lqip.md @@ -0,0 +1,13 @@ +--- +title: LQIP +description: Creating Low Quality Image Placeholders for Jekyll Chirpy Blog +date: 2024-11-15 00:00:00 +0530 +categories: [UI] +tags: [ui, cover image, lqip] +image: + path: https://chirpy-img.netlify.app/commons/devices-mockup.png + lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA + alt: Responsive rendering of Chirpy theme on multiple devices. +--- + +## Soon \ No newline at end of file diff --git a/_tabs/tools.md b/_tabs/tools.md index ccd0cbf..af6f401 100644 --- a/_tabs/tools.md +++ b/_tabs/tools.md @@ -21,6 +21,8 @@ ToC
6. CloudConvert 7. SVG App 8. ScreenShots Mockup +9. ExcaliDraw +10. websitemockupgenerator ## Site Tools @@ -37,6 +39,7 @@ ToC
7. SEO AI 8. Keyword Tools +9. Sitemap Gen ### Other Tools