Merge branch 'master' into production

This commit is contained in:
Cotes Chung 2022-12-28 01:28:12 +08:00
commit 5ea3d0f496
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
54 changed files with 580 additions and 420 deletions

View file

@ -33,7 +33,7 @@ During JavaScript development, real-time debugging can be performed through the
Firstly, start a Jekyll server:
```console
$ bash tools/run.sh
$ bash tools/run
```
And then open a new terminal tab and run:

View file

@ -22,7 +22,7 @@ Please select the desired item checkbox and change it to "[x]", then delete opti
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
-->
- [ ] I have run `bash ./tools/test.sh` (at the root of the project) locally and passed
- [ ] I have run `bash ./tools/test` (at the root of the project) locally and passed
- [ ] I have tested this feature in the browser
### Test Configuration

14
.github/workflows/cd.yml vendored Normal file
View file

@ -0,0 +1,14 @@
name: CD
on:
push:
branches: [production, docs]
jobs:
launch:
runs-on: ubuntu-latest
steps:
- run: |
curl -X POST -H "Accept: application/vnd.github+json" \
-H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
https://api.github.com/repos/${{ secrets.BUILDER }}/dispatches \
-d '{"event_type":"deploy", "client_payload":{"branch": "${{ github.ref_name }}"}}'

View file

@ -2,14 +2,11 @@ name: 'CI'
on:
push:
branches-ignore:
- 'release/**'
- 'production'
- 'docs'
tags-ignore:
- '**'
paths-ignore:
- '.github/**'
- '!.github/workflows/ci.yml'
- '.travis.yml'
- '.gitignore'
- 'README.md'
- 'LICENSE'
@ -23,7 +20,7 @@ jobs:
strategy:
matrix:
ruby: [2.5, 2.6, 2.7, 3]
ruby: ['2.7', '3.0', '3.1']
steps:
- name: Checkout
@ -38,4 +35,4 @@ jobs:
bundler-cache: true
- name: Test Site
run: bash tools/test.sh
run: bash tools/test

View file

@ -42,7 +42,7 @@ jobs:
- name: Setup Ruby
uses: ruby/setup-ruby@v1
with:
ruby-version: 3 # reads from a '.ruby-version' or '.tools-version' file if 'ruby-version' is omitted
ruby-version: '3.1' # reads from a '.ruby-version' or '.tools-version' file if 'ruby-version' is omitted
bundler-cache: true
- name: Build site

View file

@ -2,11 +2,14 @@ name: 'Style Lint'
on:
push:
branches-ignore:
- 'production'
- 'docs'
paths:
- '_sass/**.scss'
- '_sass/**/*.scss'
pull_request:
paths:
- '_sass/**.scss'
- '_sass/**/*.scss'
jobs:
stylelint:

1
.gitignore vendored
View file

@ -3,7 +3,6 @@
!.git*
!.editorconfig
!.nojekyll
!.travis.yml
!.husky
!.commitlintrc.json
!.versionrc.json

View file

@ -11,12 +11,6 @@
"alpha-value-notation": "number",
"selector-not-notation": "simple",
"color-hex-length": "long",
"declaration-block-single-line-max-declarations": 3,
"font-family-no-missing-generic-family-keyword": [
true,
{
"ignoreFontFamilies": ["Font Awesome 5 Free"]
}
]
"declaration-block-single-line-max-declarations": 3
}
}

View file

@ -1,51 +0,0 @@
os: linux
dist: bionic
language: ruby
rvm: 2.7.0
addons:
apt:
packages:
- libcurl4-openssl-dev # to avoid SSL error (for htmlproofer)
# Overriding to drop the `--development` flag which requires the Gemfile.lock at build
install: bundle install --jobs=3 --retry=3 --path=vendor/bundle
before_script: git -C "$HOME" clone "$BUILDER_REPO" --depth=1 -q
jobs:
include:
- stage: Upgrade
cache: bundler
git:
depth: false # for posts' lastmod
script: eval "$BUILD_CMD"
- stage: Starter
language: minimal
install: true # skip install step
script: eval "$FLUSH_STARTER"
- stage: Docs
cache: bundler
git:
depth: false # for posts' lastmod
script: eval "$DOCS_CMD"
stages:
- name: Upgrade
if: branch = production
- name: Starter
if: branch = production
- name: Docs
if: branch = docs
notifications:
email:
recipients:
- secure: "fFLqX7uOzFA8RE2AUFlU1mmxMw+rdV6DnODJ/1Gl+3ecNtrv5LeH3c5a4a5ShQqYTrx9BPfD40VRN7UB+lzOdXiWLI9yDGRPPxGG26/WfrKpdQPZilc8zAOEeDnLAJeGZLsUvgmNb3KCXW6S8NPqqh34CfWcTIzjCARhRgO33wcs8X5wP5cugtNqO5Ew/pUcfWcmiuXNX0GNT6l+nL5A7yN+IO5mRHqSRmlfYd5EHhGMTIL4La+Cd1CNv1m4Dl0Ah2cDeJwi5wLnVbqAgunLhAYmDtxIOCVYMTBrP37UiNe/7QeFelyJfODsmMg1mx3WCykbXydC753WVoAlTg6nNoeeI9fmK+/tuLK+sx/KnYfTVGBXQYq39DyV/2o/IfCzEAKImlzFKGD8R13+ddu4B5UML+cby5KBvhTKIGaC5tKoe39z/31UPpy11/EHMCof2BUOzIgu5Hsv4OSNJlw3oRE31oOPn8xP4e7uWR8bRUhAgzN0Cn0ht+UfpemfGAXrp0M3IXQdc9L4azEFqxRhivMTLK/P6INay7IM+DJ30Ht2dWylGw/sxcRTqyNm3YomJQnXIO4xeqTSLulWr80FFHTys3JEDJYrcKvJmpwLFEAOZtwKsZ6ZShrOIA4LE5fgQtakH3ZLJG9a7jVSlMcNIfaSKgjdDQOe6CoRQL7KouA="
on_success: never
env:
global:
- NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer

View file

@ -2,6 +2,31 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
## [5.4.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.2...v5.4.0) (2022-12-27)
### Features
* add `rel="me"` to Mastodon sidebar contact links for verification ([#807](https://github.com/cotes2020/jekyll-theme-chirpy/issues/807)) ([d2190c7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d2190c726f61c8c9732b88b4aecf699dc8bc7deb))
* add embed video support ([ed6dc53](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ed6dc539eff7003a3765bcd8c31ae5e91a863d65))
* add shimmer background when image loads ([ab16fdc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ab16fdc7fc26811130b98a1773beb62bff6182e8))
* set preview image ratio to 1.91 : 1 ([4b6ccbc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4b6ccbcbccce27b9fcb035812efefe4eb69301cf))
* support dark and light mode images ([#481](https://github.com/cotes2020/jekyll-theme-chirpy/issues/481)) ([9306c7b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9306c7b39ecf9d9146bc1a25eebedc38eb2c3dd6))
* support LQIP for images ([bffaf63](https://github.com/cotes2020/jekyll-theme-chirpy/commit/bffaf6374f265cec96ef743d42b46fbec3b59797))
### Bug Fixes
* `hreflang` tag attribute of feed misses `site.alt_lang` ([7651d28](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7651d2851b4bb7d8f0d068b62c036c89a1089bbc))
* `og:image` will be incorrect if the image uses a cross-domain URL ([8de1abd](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8de1abda6be3633982392178731431b0ddb1b52b))
* refactoring error when the image URL contains parameters ([ec98f07](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ec98f07aca0b80a9c07fbcdc8e0d7d66dba98ed2))
* spaces in post title are encoded when sharing ([7efd2f8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7efd2f8aa2ea1c3aeb7d740bf9a018881c26fe65))
### Improvements
* **cdn:** optimize cache policy for static assets ([7fb0ee0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7fb0ee0bedb63eee3f90a49c6d7fb8b5d78c9830))
## [5.3.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.1...v5.3.2) (2022-11-22)

View file

@ -17,6 +17,3 @@ end
# Performance-booster for watching directories on Windows
gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?
# Jekyll <= 4.2.0 compatibility with Ruby 3.0
gem "webrick", "~> 1.7"

View file

@ -12,30 +12,31 @@
[**Live Demo →**](https://cotes2020.github.io/chirpy-demo)
[![Devices Mockup](https://raw.githubusercontent.com/cotes2020/chirpy-images/main/commons/devices-mockup.png)](https://cotes2020.github.io/chirpy-demo)
[![Devices Mockup](https://chirpy-img.netlify.app/commons/devices-mockup.png)](https://cotes2020.github.io/chirpy-demo)
</div>
## Features
- Localized Layout
- Dark/Light Theme Mode
- Localized UI language
- Pinned Posts
- Hierarchical Categories
- Last Modified Date for Posts
- Trending Tags
- Table of Contents
- Auto-generated Related Posts
- Last Modified Date of Posts
- Syntax Highlighting
- Mathematical Expressions
- Mermaid Diagram & Flowchart
- Dark/Light Mode Images
- Embed Videos
- Disqus/Utterances/Giscus Comments
- Search
- Atom Feeds
- Google Analytics
- GA Pageviews Reporting
- Page Views Reporting
- SEO & Performance Optimization
## Quick Start
Before starting, please follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll`, and `Bundler`. In addition, [Git](https://git-scm.com/) is also required to be installed.

View file

@ -78,7 +78,7 @@ theme_mode: # [light|dark]
# will be added to all image (site avatar & posts' images) paths starting with '/'
#
# e.g. 'https://cdn.com'
img_cdn: 'https://demo-img.cotes.page'
img_cdn: 'https://chirpy-img.netlify.app'
# the avatar on sidebar, support local or CORS resources
avatar: '/commons/avatar.jpg'

View file

@ -16,47 +16,47 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:w
# Libraries
jquery:
js: https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
js: https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js
bootstrap:
css: https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css
js: https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.bundle.min.js
css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css
js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js
bootstrap-toc:
css: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css
js: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js
fontawesome:
css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css
css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css
search:
js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
mermaid:
js: https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js
js: https://cdn.jsdelivr.net/npm/mermaid@9.2.2/dist/mermaid.min.js
dayjs:
js:
common: https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js
locale: https://cdn.jsdelivr.net/npm/dayjs@1/locale/:LOCALE.min.js
relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.min.js
localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/localizedFormat.min.js
common: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/dayjs.min.js
locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/locale/:LOCALE.min.js
relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/relativeTime.min.js
localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/localizedFormat.min.js
countup:
js: https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js
magnific-popup:
css: https://cdn.jsdelivr.net/npm/magnific-popup@1/dist/magnific-popup.min.css
js: https://cdn.jsdelivr.net/npm/magnific-popup@1/dist/jquery.magnific-popup.min.js
css: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css
js: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js
lozad:
js: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
lazysizes:
js: https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js
clipboard:
js: https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js
js: https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js
polyfill:
js: https://polyfill.io/v3/polyfill.min.js?features=es6
mathjax:
js: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js
js: https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js

View file

@ -38,8 +38,8 @@ magnific-popup:
css: /assets/lib/magnific-popup-1.1.0/magnific-popup.css
js: /assets/lib/magnific-popup-1.1.0/jquery.magnific-popup.min.js
lozad:
js: /assets/lib/lozad-1.16.0/lozad.min.js
lazysizes:
js: /assets/lib/lazysizes-5.3.2/lazysizes.min.js
clipboard:
js: /assets/lib/clipboard-2.0.9/clipboard.min.js

View file

@ -19,7 +19,7 @@
# -
# type: mastodon
# icon: 'fab fa-mastodon' # icons powered by <https://fontawesome.com/>
# url: '' # Fill with your mastodon account page
# url: '' # Fill with your Mastodon account page, rel="me" will be applied for verification
# -
# type: linkedin
# icon: 'fab fa-linkedin' # icons powered by <https://fontawesome.com/>

View file

@ -5,7 +5,7 @@
layout:
post: Публикация
category: Категория
tag: Тагове
tag: Таг
# The tabs of sidebar
tabs:
@ -43,7 +43,7 @@ copyright:
meta: Създадено чрез :PLATFORM и :THEME тема.
not_found:
statment: Съжалявам, но този на този URL адрес няма налично съдържание.
statment: Съжалявам, но на този URL адрес няма налично съдържание.
notification:
update_found: Налична е нова версия на съдържанието.
@ -71,7 +71,7 @@ post:
title: Копирай линк
succeed: Линкът е копиран успешно!
# pinned prompt of posts list on homepage
pin_prompt: Прикрепен
pin_prompt: Прикрепенa
# categories page
categories:

View file

@ -40,7 +40,7 @@ copyright:
Except where otherwise noted, the blog posts on this site are licensed
under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.
meta: Powered by :PLATFORM with :THEME theme.
meta: Using the :PLATFORM theme :THEME.
not_found:
statment: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.

View file

@ -0,0 +1,4 @@
<iframe class="embed-video twitch lazyload"
src="https://player.twitch.tv/?video={{ include.id }}&parent={{ site.url | split: '://' | last | remove: '/' }}"
frameborder="0" allowfullscreen="true"
scrolling="no"></iframe>

View file

@ -0,0 +1,6 @@
<iframe class="embed-video youtube lazyload"
src="https://www.youtube.com/embed/{{ include.id }}"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

View file

@ -17,16 +17,16 @@
<div class="footer-right">
<p class="mb-0">
{% capture _platform %}
{%- capture _platform -%}
<a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
{% endcapture %}
{%- endcapture -%}
{% capture _theme %}
{%- capture _theme -%}
<a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
{% endcapture %}
{%- endcapture -%}
{{ site.data.locales[site.lang].meta
| default: 'Powered by :PLATFORM with :THEME theme.'
| default: 'Using the :PLATFORM theme :THEME.'
| replace: ':PLATFORM', _platform | replace: ':THEME', _theme
}}
</p>

View file

@ -24,20 +24,25 @@
{% if page.image %}
{% assign img = page.image.path | default: page.image %}
{% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %}
{% capture target %}"{{ img | absolute_url }}"{% endcapture %}
{% if site.img_cdn contains '//' %}
<!-- it's a cross-origin URL -->
{% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %}
{% else %}
<!-- it's a local file path -->
{%- capture replacement -%}
"{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}"
{%- endcapture -%}
{% endif %}
{% unless img contains '://' %}
{% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %}
{% capture target %}"{{ img | absolute_url }}"{% endcapture %}
{% if site.img_cdn contains '//' %}
<!-- it's a cross-origin URL -->
{% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %}
{% else %}
<!-- it's a local file path -->
{%- capture replacement -%}
"{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}"
{%- endcapture -%}
{% endif %}
{% assign seo_tags = seo_tags | replace: target, replacement %}
{% endunless %}
{% assign seo_tags = seo_tags | replace: target, replacement %}
{% endif %}
{{ seo_tags }}

View file

@ -15,12 +15,11 @@
{% if page.layout == 'post' or page.layout == 'page' %}
<!-- image lazy-loading & popup & clipboard -->
{% assign _urls = site.data.assets[origin].magnific-popup.js
| append: ',' | append: site.data.assets[origin].lozad.js
| append: ',' | append: site.data.assets[origin].lazysizes.js
| append: ',' | append: site.data.assets[origin].clipboard.js
%}
{% include jsdelivr-combine.html urls=_urls %}
{% endif %}
{% if page.layout == 'home'

View file

@ -6,7 +6,6 @@
<span class="share-label text-muted mr-1">{{ site.data.locales[site.lang].post.share }}</span>
<span class="share-icons">
{% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
{% assign title = title | url_encode %}
{% assign url = page.url | absolute_url | url_encode %}
{% for share in site.data.share.platforms %}

View file

@ -51,31 +51,52 @@
{% assign _img_content = nil %}
{% assign _img_snippets = _content | split: IMG_TAG %}
<!-- CDN URL -->
{% if site.img_cdn %}
{% if site.img_cdn contains '//' %}
{% assign _path_prefix = site.img_cdn %}
{% else %}
{% assign _path_prefix = site.img_cdn | relative_url %}
{% endif %}
{% else %}
{% assign _path_prefix = site.baseurl %}
{% endif %}
<!-- Add image path -->
{% if page.img_path %}
{% assign _path = page.img_path | append: '/' | replace: '//', '/' %}
{% assign _path_prefix = _path_prefix | append: _path %}
{% endif %}
{% for _img_snippet in _img_snippets %}
{% if forloop.first %}
{% assign _img_content = _img_snippet %}
{% continue %}
{% endif %}
{% assign _width = nil %}
{% assign _height = nil %}
{% assign _src = nil %}
{% assign _left = _img_snippet | split: '>' | first %}
{% assign _right = _img_snippet | remove: _left %}
{% assign _left = _left | remove: ' /' %}
{% assign _left = _left | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
{% assign _attrs = _left | split: ' ' %}
{% unless _left contains 'src=' %}
{% continue %}
{% endunless %}
{% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
{% assign _attrs = _left | split: '" ' %}
{% assign _width = nil %}
{% assign _height = nil %}
{% assign _lqip = nil %}
{% assign _class = nil %}
{% for _attr in _attrs %}
{% assign _pair = _attr | split: '=' %}
{% if _pair.size < 2 %}
{% unless _attr contains '=' %}
{% continue %}
{% endif %}
{% endunless %}
{% assign _pair = _attr | remove: '"' | split: '=' %}
{% capture _key %}{{ _pair | first }}{% endcapture %}
{% capture _value %}{{ _pair | last | replace: '"', '' }}{% endcapture %}
{% capture _value %}{{ _pair | last }}{% endcapture %}
{% case _key %}
{% when 'width' %}
@ -84,62 +105,91 @@
{% assign _height = _value %}
{% when 'src' %}
{% assign _src = _value %}
{% when 'lqip' %}
{% assign _lqip = _value %}
{% when 'class' %}
{% assign _class = _value %}
{% endcase %}
{% if _width and _height and _src %}
{% break %}
{% endif %}
{% endfor %}
{% if _src %}
{% unless _src contains '://' %}
<!-- Add CDN URL -->
{% if site.img_cdn %}
{% if site.img_cdn contains '//' %}
{% assign _src_prefix = site.img_cdn %}
{% else %}
{% assign _src_prefix = site.img_cdn | relative_url %}
{% endif %}
{% else %}
{% assign _src_prefix = site.baseurl %}
{% endif %}
<!-- Add image path -->
{% if page.img_path %}
{% assign _path = page.img_path | append: '/' | replace: '//', '/' %}
{% assign _src_prefix = _src_prefix | append: _path %}
{% endif %}
{% assign _final_src = _src_prefix | append: _src %}
{% assign _left = _left | replace: _src, _final_src %}
{% endunless %}
<!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
{% assign _left = _left | replace: 'src=', 'data-src=' %}
<!-- take out classes -->
{% if _class %}
{% capture _old_class %}class="{{ _class }}"{% endcapture %}
{% assign _left = _left | remove: _old_class %}
{% endif %}
<!-- Add SVG placehoder to prevent layout reflow -->
{% assign _final_src = nil %}
{% if _width and _height %}
{%- capture _svg -%}
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E"
{%- endcapture -%}
{% unless _src contains '//' %}
{% assign _final_src = _path_prefix | append: _src %}
{% capture _src_from %}"{{ _src }}"{% endcapture %}
{% capture _src_to %}"{{ _final_src }}"{% endcapture %}
{% assign _left = _left | replace: _src_from, _src_to %}
{% endunless %}
{% assign _left = _svg | append: ' ' | append: _left %}
{% if _lqip %}
{% unless _lqip contains ':' %}
{% assign _final_lqip = _path_prefix | append: _lqip %}
{% capture _lqip_from %}"{{ _lqip }}"{% endcapture %}
{% capture _lqip_to %}"{{ _final_lqip }}"{% endcapture %}
{% assign _left = _left | replace: _lqip_from, _lqip_to %}
{% endunless %}
{% endif %}
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
{% assign _left = _left | replace: 'src=', 'data-src=' %}
{% if _left contains 'class=' %}
{% assign _left = _left | replace: 'class="', 'class="lazyload '%}
{% else %}
{% assign _left = _left | append: ' class="lazyload"' %}
{% endif %}
<!-- add image placeholder -->
{% if _lqip %}
{% assign _left = _left | replace: ' lqip=', ' data-lqip="true" src=' %}
{% else %}
{% if _width and _height %}
<!-- add SVG placehoder -->
{%- capture _svg -%}
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E"
{%- endcapture -%}
{% assign _left = _svg | append: ' ' | append: _left %}
{% assign _class = _class | append: ' shimmer' %}
{% endif %}
{% endif %}
<!-- Bypass the HTML-proofer test -->
{% assign _left = _left | append: ' data-proofer-ignore' %}
<!-- make sure the `<img>` is wrapped by `<a>` -->
{% assign _parent = _right | slice: 1, 4 %}
{% if _parent == '</a>' %}
<!-- add class to exist <a> tag -->
{% assign _size = _img_content | size | minus: 1 %}
{% capture _class %}
class="img-link{% unless _lqip %} shimmer{% endunless %}"
{% endcapture %}
{% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %}
{% else %}
<!-- create the image wrapper -->
{%- capture _wrapper_start -%}
<a href="{{ _final_src | default: _src }}" class="popup img-link {{ _class }}">
{%- endcapture -%}
{% assign _img_content = _img_content | append: _wrapper_start %}
{% assign _right = _right | prepend: '></a' %}
{% endif %}
<!-- combine -->
{% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
{% endfor %}
{% assign _content = _img_content %}
{% if _img_content %}
{% assign _content = _img_content %}
{% endif %}
{% endif %}

View file

@ -81,7 +81,17 @@
{% if url %}
<a href="{{ url }}" aria-label="{{ entry.type }}"
{% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
{% assign link_types = nil %}
{% unless entry.noblank %}
{% assign link_types = link_types | append: " noopener" %}
target="_blank"
{% endunless %}
{% if entry.type == 'mastodon' %}
{% assign link_types = link_types | append: " me" %}
{% endif %}
{% if link_types %}rel="{{ link_types | lstrip }}"{% endif %}>
<i class="{{ entry.icon }}"></i>
</a>
{% endif %}

View file

@ -1,5 +1,5 @@
/*!
* Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/)
* Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
* © 2019 Cotes Chung
* MIT Licensed
*/

View file

@ -1,33 +1,13 @@
/**
Lazy load images (https://github.com/ApoorvSaxena/lozad.js)
and popup when clicked (https://github.com/dimsemenov/Magnific-Popup)
* Set up image stuff
*/
$(function () {
const IMG_SCOPE = '#main > div.row:first-child > div:first-child';
if ($(`${IMG_SCOPE} img`).length <= 0) {
(function() {
if ($('#core-wrapper img[data-src]') <= 0) {
return;
}
/* lazy loading */
const imgList = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`);
const observer = lozad(imgList);
observer.observe();
/* popup */
$(`${IMG_SCOPE} p > img[data-src], ${IMG_SCOPE} img[data-src].preview-img`).each(
function () {
let nextTag = $(this).next();
const title = nextTag.prop('tagName') === 'EM' ? nextTag.text() : '';
const src = $(this).attr('data-src'); // created by lozad.js
$(this).wrap(`<a href="${src}" title="${title}" class="popup"></a>`);
}
);
/* See: <https://github.com/dimsemenov/Magnific-Popup> */
$('.popup').magnificPopup({
type: 'image',
closeOnContentClick: true,
@ -39,8 +19,10 @@ $(function () {
}
});
/* markup the image links */
/* Stop shimmer when image loaded */
document.addEventListener('lazyloaded', function(e) {
const $img = $(e.target);
$img.parent().removeClass('shimmer');
});
$(`${IMG_SCOPE} a`).has('img').addClass('img-link');
});
})();

View file

@ -27,30 +27,21 @@ tail_includes:
{% endif %}
{% if page.image %}
{% capture bg %}
{% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
{% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
{% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
{% capture alt %}alt="{{ page.image.alt | default: "Preview Image" }}"{% endcapture %}
{% capture lqip %}
{% if page.image.lqip %}
lqip="{{ page.image.lqip }}"
{% endif %}
{% endcapture %}
<div class="mt-3 mb-3">
<img src="{{ page.image.path | default: page.image }}" class="preview-img {{ bg | strip }}"
alt="{{ page.image.alt | default: "Preview Image" }}"
{% if page.image.width %}
width="{{ page.image.width }}"
{% elsif page.image.w %}
width="{{ page.image.w }}"
{% endif %}
{% if page.image.height %}
height="{{ page.image.height }}"
{% elsif page.image.h %}
height="{{ page.image.h }}"
{% endif %}>
{% if page.image.alt %}
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
{%- if page.image.alt -%}
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
{% endif %}
{%- endif -%}
</div>
{% endif %}

View file

@ -8,14 +8,12 @@ math: true
mermaid: true
image:
path: /commons/devices-mockup.png
width: 800
height: 500
lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA
alt: Responsive rendering of Chirpy theme on multiple devices.
---
This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
## Titles
---
# H1 - heading
@ -26,7 +24,6 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co
<h4>H4 - heading</h4>
---
<br>
## Paragraph
@ -95,56 +92,6 @@ Moon
Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].
## Images
- Default (with caption)
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
_Full screen width and center alignment_
<br>
- Shadow
![Window shadow](/posts/20190808/window.png){: .shadow width="1548" height="864" .w-75 }
_shadow effect (visible in light mode)_
<br>
- Left aligned
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal}
- Float to left
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left}
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. Phasellus a tortor aliquam, tristique felis sit amet, elementum enim. Integer vestibulum vitae nulla nec pretium.
- Float to right
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right}
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. Phasellus a tortor aliquam, tristique felis sit amet, elementum enim. Integer vestibulum vitae nulla nec pretium.
## Mermaid SVG
```mermaid
gantt
title Adding GANTT diagram functionality to mermaid
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
```
## Mathematics
The mathematics powered by [**MathJax**](https://www.mathjax.org/):
$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
## Inline code
This is an example of `Inline Code`.
@ -153,7 +100,7 @@ This is an example of `Inline Code`.
Here is the `/path/to/the/file.extend`{: .filepath}.
## Code block
## Code blocks
### Common
@ -161,22 +108,12 @@ Here is the `/path/to/the/file.extend`{: .filepath}.
This is a common code snippet, without syntax highlight and line number.
```
### Specific Languages
#### Console
```console
$ env |grep SHELL
SHELL=/usr/local/bin/bash
PYENV_SHELL=bash
```
#### Shell
### Specific Language
```bash
if [ $? -ne 0 ]; then
echo "The command was not successful.";
#do the needful / exit
echo "The command was not successful.";
#do the needful / exit
fi;
```
@ -189,6 +126,58 @@ fi;
```
{: file='_sass/jekyll-theme-chirpy.scss'}
## Mathematics
The mathematics powered by [**MathJax**](https://www.mathjax.org/):
$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
## Mermaid SVG
```mermaid
gantt
title Adding GANTT diagram functionality to mermaid
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
```
## Images
### Default (with caption)
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
_Full screen width and center alignment_
### Left aligned
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal}
### Float to left
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left}
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
### Float to right
![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right}
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
### Dark/Light mode & Shadow
The image below will toggle dark/light mode based on theme preference, notice it has shadows.
![light mode only](/posts/20190808/devtools-light.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
![dark mode only](/posts/20190808/devtools-dark.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }
## Video
{% include embed/youtube.html id='Balreaj8Yqs' %}
## Reverse Footnote
[^footnote]: The footnote source

View file

@ -7,7 +7,7 @@ tags: [writing]
render_with_liquid: false
---
This post will guide you how to write a post on _Chirpy_ theme. Even if you have previous experience with Jekyll, this article is worth reading, because many features require specific variables to be set.
This tutorial will guide you how to write a post in the _Chirpy_ template, and it's worth reading even if you've used Jekyll before, as many features require specific variables to be set.
## Naming and Path
@ -177,9 +177,18 @@ By default, the image is centered, but you can specify the position by using one
```
{: .nolineno}
### Dark/Light mode
You can make images follow theme preferences in dark/light mode. This requires you to prepare two images, one for dark mode and one for light mode, and then assign them a specific class (`dark` or `light`):
```markdown
![Light mode only](/path/to/light-mode.png){: .light }
![Dark mode only](/path/to/dark-mode.png){: .dark }
```
### Shadow
The screenshots of the program window can be considered to show the shadow effect, and the shadow will be visible in the `light` mode:
The screenshots of the program window can be considered to show the shadow effect:
```markdown
![Desktop View](/assets/img/sample/mockup.png){: .shadow }
@ -209,7 +218,7 @@ The parsing result will automatically add the CDN prefix `https://cdn.com` befor
```html
<img src="https://cdn.com/path/to/flower.png" alt="The flower">
```
{: .nolineno}
{: .nolineno }
### Image Path
@ -220,7 +229,6 @@ When a post contains many images, it will be a time-consuming task to repeatedly
img_path: /img/path/
---
```
{: .nolineno }
And then, the image source of Markdown can write the file name directly:
@ -238,28 +246,49 @@ The output will be:
### Preview Image
If you want to add an image to the top of the post contents, specify the attribute `path`, `width`, `height`, and `alt` for the image:
If you want to add an image at the top of the article, please provide an image with a resolution of `1200 x 630`. Please note that if the image aspect ratio does not meet `1.91 : 1`, the image will be scaled and cropped.
Knowing these prerequisites, you can start setting the image's attribute:
```yaml
---
image:
path: /path/to/image
width: 1000 # in pixels
height: 400 # in pixels
alt: image alternative text
---
```
Except for `alt`, all other options are necessary, especially the `width` and `height`, which are related to user experience and web page loading performance. The above section "[Size](#size)" also mentions this.
Starting from _Chirpy v5.0.0_, the attributes `height` and `width` can be abbreviated: `height``h`, `width``w`. In addition, the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the attribute `path` only needs the image file name.
For simple use, you can also just use `image` to define the path.
```yml
---
image: /path/to/image
---
```
### LQIP
For preview images:
```yaml
---
image:
lqip: /path/to/lqip-file # or base64 URI
---
```
> You can observe LQIP in the preview image of post [_Text and Typography_](/posts/text-and-typography/).
For normal images:
```markdown
![Image description](/path/to/image){: lqip="/path/to/lqip-file" }
```
{: .nolineno }
## Pinned Posts
You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by:
@ -357,6 +386,24 @@ If you want to display the **Liquid** snippet, surround the liquid code with `{%
Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block.
## Videos
You can embed a video with the following syntax:
```liquid
{% include embed/{Platform}.html id='{ID}' %}
```
Where `Platform` is the lowercase of the platform name, and `ID` is the video ID.
The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms.
| Video URL | Platform | ID |
|----------------------------------------------------------------------------------------------------|-----------|:--------------|
| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube` | `H-B46URT4mg` |
| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211) | `twitch` | `1634779211` |
## Learn More
For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).

View file

@ -39,15 +39,13 @@ $ bash tools/init.sh
The above command will:
1. Removes some files or directories from your repository:
- `.travis.yml`{: .filepath}
- files under `_posts`{: .filepath}
1. Remove the files in `_posts`{: .filepath} from your repository.
2. If the option `--no-gh` is provided, the directory `.github`{: .filepath} will be deleted. Otherwise, set up the GitHub Action workflow by removing the extension `.hook`{: .filepath} of `.github/workflows/pages-deploy.yml.hook`{: .filepath}, and then remove the other files and directories in the folder `.github`{: .filepath}.
3. Removes item `Gemfile.lock` from `.gitignore`{: .filepath}.
3. Remove item `Gemfile.lock` from `.gitignore`{: .filepath}.
4. Creates a new commit to save the changes automatically.
4. Create a new commit to save the changes automatically.
### Installing Dependencies

View file

@ -83,6 +83,47 @@ a {
img {
max-width: 100%;
height: auto;
&[data-src] {
&.lazyloaded {
z-index: 1;
-webkit-animation: fade-in 0.4s ease-in;
animation: fade-in 0.4s ease-in;
}
&[data-lqip="true"] {
&.lazyload,
&.lazyloading {
-webkit-filter: blur(20px);
filter: blur(20px);
}
}
&:not([data-lqip="true"]) {
&.lazyload,
&.lazyloading {
background: var(--img-bg);
}
}
&.shadow {
-webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
}
@extend %img-caption;
}
@-webkit-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
}
blockquote {
@ -93,15 +134,19 @@ blockquote {
&[class^="prompt-"] {
display: flex;
border-left: 0;
border-radius: 6px;
padding: 1rem;
color: var(--prompt-text-color);
@extend %rounded;
&::before {
font-family: "Font Awesome 5 Free";
text-align: center;
width: 1.25rem;
margin-right: 0.75rem;
position: relative;
top: 0.4rem;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
> div {
@ -113,7 +158,7 @@ blockquote {
}
}
@include prompt("tip", "\f0eb", 400);
@include prompt("tip", "\f0eb", "regular");
@include prompt("info", "\f06a");
@include prompt("warning", "\f06a");
@include prompt("danger", "\f071");
@ -180,43 +225,6 @@ i { /* fontawesome icons */
}
}
@-webkit-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
img[data-src] {
margin: 0.5rem 0;
&[data-loaded="true"] {
-webkit-animation: fade-in linear 0.5s;
animation: fade-in linear 0.5s;
}
&.left {
float: left;
margin: 0.75rem 1rem 1rem 0;
}
&.right {
float: right;
margin: 0.75rem 0 1rem 1rem;
}
&.shadow {
-webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
}
@extend %img-caption;
}
/* --- Panels --- */
.access {
@ -397,26 +405,14 @@ img[data-src] {
margin-bottom: 1.5rem;
}
a {
&.img-link {
@extend %no-cursor;
}
/* created by `_includes/img-extra.html` */
&.popup {
cursor: zoom-in;
> img[data-src]:not(.normal):not(.left):not(.right) {
p {
> img[data-src],
> a.popup {
&:not(.normal):not(.left):not(.right) {
@include align-center;
}
}
&:hover {
code {
@extend %link-hover;
}
}
} /* a */
}
}
.pageviews .fa-spinner {
@ -448,6 +444,14 @@ img[data-src] {
overflow-wrap: break-word;
a {
&.popup {
@extend %no-cursor;
@extend %img-caption;
@include mt-mb(0.5rem);
cursor: zoom-in;
}
&:not(.img-link) {
@extend %link-underline;
@ -455,10 +459,6 @@ img[data-src] {
@extend %link-hover;
}
}
&.img-link {
@extend %img-caption;
}
}
ol,
@ -544,6 +544,58 @@ img[data-src] {
}
}
.rounded-10 {
border-radius: 10px !important;
}
.img-link {
color: transparent;
display: inline-flex;
overflow: hidden;
}
.shimmer {
overflow: hidden;
position: relative;
background: var(--img-bg);
&::before {
content: "";
position: absolute;
background: var(--shimmer-bg);
height: 100%;
width: 100%;
-webkit-animation: shimmer 1s infinite;
animation: shimmer 1s infinite;
}
@-webkit-keyframes shimmer {
0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
@keyframes shimmer {
0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
}
.embed-video {
width: 100%;
height: 100%;
margin-bottom: 1rem;
@extend %rounded;
&.youtube {
aspect-ratio: 16 / 9;
}
&.twitch {
aspect-ratio: 310 / 189;
}
}
/* --- buttons --- */
.btn-lang {
border: 1px solid !important;
@ -613,6 +665,16 @@ img[data-src] {
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.left {
float: left;
margin: 0.75rem 1rem 1rem 0 !important;
}
.right {
float: right;
margin: 0.75rem 0 1rem 1rem !important;
}
/* --- Overriding --- */
/* magnific-popup */
@ -754,7 +816,7 @@ $sidebar-display: "sidebar-display";
&:last-child {
a {
position: relative;
left: $cursor-width / 2;
left: calc($cursor-width / 2);
width: 100%;
}
@ -780,7 +842,7 @@ $sidebar-display: "sidebar-display";
@for $i from 1 through $tab-count {
$offset: $tab-count - $i;
$top: -$offset * $tab-height + ($tab-height - $tab-cursor-height) / 2;
$top: -$offset * $tab-height + calc(($tab-height - $tab-cursor-height) / 2);
@if $i < $tab-count {
> li.active:nth-child(#{$i}),
@ -1193,6 +1255,7 @@ $sidebar-display: "sidebar-display";
div.d-flex {
padding: 1.5rem 0;
line-height: 1.65;
flex-wrap: wrap;
justify-content: space-around !important;
}

View file

@ -90,6 +90,10 @@
font-style: normal;
}
%rounded {
border-radius: 6px;
}
%img-caption {
+ em {
display: block;
@ -114,6 +118,11 @@
text-decoration: none;
}
@mixin mt-mb($value) {
margin-top: $value;
margin-bottom: $value;
}
@mixin ml-mr($value) {
margin-left: $value;
margin-right: $value;
@ -141,14 +150,14 @@
transform: translateX(-50%);
}
@mixin prompt($type, $fw-icon, $icon-weight: 900) {
@mixin prompt($type, $fa-content, $fa-style: "solid") {
&.prompt-#{$type} {
background-color: var(--prompt-#{$type}-bg);
&::before {
content: $fw-icon;
content: $fa-content;
color: var(--prompt-#{$type}-icon-color);
font-weight: $icon-weight;
font: var(--fa-font-#{$fa-style});
}
}
}

View file

@ -29,18 +29,12 @@ html {
}
}
/* -- Codes Snippet -- */
$code-radius: 6px;
/* -- code snippets -- */
%code-snippet-bg {
background: var(--highlight-bg-color);
}
%code-snippet-radius {
border-radius: $code-radius;
}
%code-snippet-padding {
padding-left: 1rem;
padding-right: 1.5rem;
@ -48,7 +42,7 @@ $code-radius: 6px;
.highlighter-rouge {
@extend %code-snippet-bg;
@extend %code-snippet-radius;
@extend %rounded;
color: var(--highlighter-rouge-color);
margin-top: 0.5rem;
@ -56,7 +50,7 @@ $code-radius: 6px;
}
.highlight {
@extend %code-snippet-radius;
@extend %rounded;
@extend %code-snippet-bg;
@at-root figure#{&} {
@ -173,8 +167,6 @@ div {
$code-header-height: 2.25rem;
border-top-left-radius: $code-radius;
border-top-right-radius: $code-radius;
display: flex;
justify-content: space-between;
align-items: center;
@ -226,9 +218,9 @@ div {
/* clipboard */
button {
@extend %cursor-pointer;
@extend %rounded;
border: 1px solid transparent;
border-radius: $code-radius;
height: $code-header-height;
width: $code-header-height;
padding: 0;

View file

@ -26,6 +26,14 @@
--label-color: rgb(108, 117, 125);
--checkbox-color: rgb(118, 120, 121);
--checkbox-checked-color: var(--link-color);
--img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
--shimmer-bg:
linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(58, 55, 55, 0.4) 50%,
rgba(255, 255, 255, 0) 100%
);
/* Sidebar */
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
@ -65,7 +73,6 @@
--card-bg: rgb(39, 40, 43);
--card-border-color: rgb(53, 53, 60);
--card-box-shadow: var(--main-bg);
--preview-img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
--kbd-wrap-color: #6a6a6a;
--kbd-text-color: #d3d3d3;
--kbd-bg-color: #242424;
@ -96,8 +103,14 @@
--timeline-year-dot-color: var(--timeline-color);
.post img[data-src] {
-webkit-filter: brightness(95%);
filter: brightness(95%);
&.lazyloaded {
-webkit-filter: brightness(95%);
filter: brightness(95%);
}
}
.light {
display: none;
}
hr {

View file

@ -24,6 +24,14 @@
--btn-box-shadow: #eaeaea;
--checkbox-color: #c5c5c5;
--checkbox-checked-color: #07a8f7;
--img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%);
--shimmer-bg:
linear-gradient(
90deg,
rgba(250, 250, 250, 0) 0%,
rgba(232, 230, 230, 1) 50%,
rgba(250, 250, 250, 0) 100%
);
/* Sidebar */
--sidebar-bg: #eeeeee;
@ -64,7 +72,6 @@
--tb-odd-bg: #fbfcfd;
--tb-border-color: #eaeaea;
--dash-color: silver;
--preview-img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%);
--kbd-wrap-color: #bdbdbd;
--kbd-text-color: var(--text-color);
--kbd-bg-color: white;
@ -82,6 +89,10 @@
--link-underline-color: rgb(219, 216, 216);
}
.dark {
display: none;
}
/* Categories */
--categories-hover-bg: var(--btn-border-color);
--categories-icon-hover-color: darkslategray;

View file

@ -1,7 +1,7 @@
/*!
* The styles for Jekyll theme Chirpy
*
* Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy)
* Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
* © 2019 Cotes Chung
* MIT Licensed
*/

View file

@ -26,12 +26,30 @@
color: var(--text-color);
}
img.preview-img {
%preview-margin {
margin: 0;
border-radius: 6px;
}
&.bg[data-loaded="true"] {
background: var(--preview-img-bg);
.preview-img {
@include align-center;
@extend %preview-margin;
@extend %rounded;
max-width: 100%;
&:not(.no-bg) {
img.lazyloaded {
background: var(--img-bg);
}
}
img {
aspect-ratio: 40 / 21;
-o-object-fit: cover;
object-fit: cover;
@extend %preview-margin;
@extend %rounded;
}
}

View file

@ -15,7 +15,7 @@ permalink: /feed.xml
<uri>{{ "/" | absolute_url }}</uri>
</author>
<link rel="self" type="application/atom+xml" href="{{ page.url | absolute_url }}"/>
<link rel="alternate" type="text/html" hreflang="{{ site.lang }}"
<link rel="alternate" type="text/html" hreflang="{{ site.alt_lang | default: site.lang }}"
href="{{ '/' | absolute_url }}"/>
<generator uri="https://jekyllrb.com/" version="{{ jekyll.version }}">Jekyll</generator>
<rights> © {{ 'now' | date: '%Y' }} {{ site.social.name }} </rights>

View file

@ -1,5 +1,5 @@
/*!
* Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/)
* Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
* © 2019 Cotes Chung
* MIT Licensed
*/

View file

@ -1,5 +1,5 @@
/*!
* Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/)
* Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
* © 2019 Cotes Chung
* MIT Licensed
*/

View file

@ -1,5 +1,5 @@
/*!
* Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/)
* Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
* © 2019 Cotes Chung
* MIT Licensed
*/

View file

@ -1,5 +1,5 @@
/*!
* Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/)
* Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
* © 2019 Cotes Chung
* MIT Licensed
*/

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,5 +1,5 @@
/*!
* Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/)
* Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
* © 2019 Cotes Chung
* MIT Licensed
*/

@ -1 +1 @@
Subproject commit 5d177b3cbbea89e3392eb48c0ee580c6a0ce41d1
Subproject commit e372141074f370c6f03b68b5264e7663f2b7477c

View file

@ -2,7 +2,7 @@
Gem::Specification.new do |spec|
spec.name = "jekyll-theme-chirpy"
spec.version = "5.3.2"
spec.version = "5.4.0"
spec.authors = ["Cotes Chung"]
spec.email = ["cotes.chung@gmail.com"]
@ -23,9 +23,9 @@ Gem::Specification.new do |spec|
"plugin_type" => "theme"
}
spec.required_ruby_version = ">= 2.5"
spec.required_ruby_version = [">= 2.5", "< 3.2"]
spec.add_runtime_dependency "jekyll", "~> 4.1"
spec.add_runtime_dependency "jekyll", "~> 4.3"
spec.add_runtime_dependency "jekyll-paginate", "~> 1.1"
spec.add_runtime_dependency "jekyll-redirect-from", "~> 0.16"
spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.7"

View file

@ -1,6 +1,6 @@
{
"name": "jekyll-theme-chirpy",
"version": "5.3.2",
"version": "5.4.0",
"description": "A minimal, responsive, and powerful Jekyll theme for presenting professional writing.",
"repository": {
"type": "git",

View file

@ -20,7 +20,7 @@ help() {
check_status() {
if [[ -n $(git status . -s) ]]; then
echo "Error: Commit unstaged files first, and then run this tool againt."
echo "Error: Commit unstaged files first, and then run this tool again."
exit -1
fi
}
@ -46,30 +46,24 @@ check_init() {
fi
}
checkout_latest_tag() {
tag=$(git describe --tags $(git rev-list --tags --max-count=1))
git reset --hard "$tag"
}
init_files() {
if $_no_gh; then
rm -rf .github
else
## Change the files of `.github`
mv .github/workflows/$ACTIONS_WORKFLOW.hook .
rm -rf .github
mkdir -p .github/workflows
mv ./${ACTIONS_WORKFLOW}.hook .github/workflows/${ACTIONS_WORKFLOW}
## Ensure the gh-actions trigger branch
_workflow=".github/workflows/${ACTIONS_WORKFLOW}"
_default_branch="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')"
_lineno="$(sed -n "/branches:/=" "$_workflow")"
sed -i.$TEMP_SUFFIX "$((_lineno + 1))s/- .*/- ${_default_branch}/" "$_workflow"
rm -f "$_workflow.$TEMP_SUFFIX"
## Cleanup image settings in site config
sed -i.$TEMP_SUFFIX "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
rm -f _config.yml.$TEMP_SUFFIX
fi
# trace the gem lockfile on user-end
@ -77,12 +71,11 @@ init_files() {
rm -f ".gitignore.$TEMP_SUFFIX"
# remove the other fies
rm -f .travis.yml
rm -rf _posts/*
# save changes
git add -A
git commit -m "[Automation] Initialize the environment." -q
git commit -m "chore: initialize the environment" -q
echo "[INFO] Initialization successful!"
}
@ -112,4 +105,6 @@ while (($#)); do
esac
done
checkout_latest_tag
init_files