imdhemy-jekyll-theme 0.4.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +15 -86
- data/_includes/archive-header.html +7 -7
- data/_includes/content.html +1 -1
- data/_includes/contributions.html +9 -9
- data/_includes/footer.html +4 -4
- data/_includes/giscus-comments.html +44 -0
- data/_includes/header.html +50 -28
- data/_includes/hero.html +17 -8
- data/_includes/latest-posts.html +9 -7
- data/_includes/page-header.html +6 -6
- data/_includes/pagination-links.html +6 -6
- data/_includes/post-header.html +10 -23
- data/_includes/post-item.html +14 -10
- data/_includes/post-meta.html +9 -0
- data/_includes/post-navigation.html +18 -0
- data/_includes/post-tags.html +4 -2
- data/_includes/reading-progress.html +3 -0
- data/_includes/related-posts.html +49 -0
- data/_includes/social.html +12 -12
- data/_includes/testimonials.html +13 -15
- data/_layouts/archive.html +10 -9
- data/_layouts/blog.html +11 -9
- data/_layouts/default.html +24 -6
- data/_layouts/page.html +11 -2
- data/_layouts/post.html +13 -2
- data/_sass/base/_reset.scss +1 -1
- data/_sass/base/_typography.scss +3 -3
- data/_sass/components/_core.scss +1488 -121
- data/_sass/utilities/_interactive.scss +6 -6
- data/_sass/utilities/_typography.scss +1 -1
- data/_sass/utilities/_visual.scss +3 -3
- data/assets/js/dist/main.js +1 -1
- metadata +7 -5
- data/_data/.gitinclude +0 -0
- data/assets/js/src/burger-menu.js +0 -16
- data/assets/js/src/index.js +0 -25
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 70e37e5813d32c399c961ac038eaccf43d750e12c301bea3e87894057a5f5204
|
|
4
|
+
data.tar.gz: afa1ea70ebc0a3a774dd50e7899bae7b672cb9f28594ba88f0343e7fc1511f91
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: cc9619152956c9c89755ed900ddca83eaded5821648027fe60f7f69d519fab9380d7579491833677743806f9ee195934ebebba122c8ceccf49a362c49ee75324
|
|
7
|
+
data.tar.gz: 2258695d5eeb2ac5a204b1dd12e8bf37420fa1573c843cbf94125efb6b84630009d7dde43a238b436e1dd4af1836b4d9c37a954c04833c5480b74091aebcc3cd
|
data/README.md
CHANGED
|
@@ -1,98 +1,27 @@
|
|
|
1
1
|
# Imdhemy Jekyll Theme
|
|
2
2
|
|
|
3
|
-
Jekyll theme for my personal website
|
|
3
|
+
Jekyll theme for my personal website: [imdhemy.com](https://imdhemy.com).
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Documentation
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
All documentation lives in the [`docs/`](./docs) directory.
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
- [Documentation Home](./docs/README.md)
|
|
10
|
+
- [Getting Started](./docs/getting-started.md)
|
|
11
|
+
- [Configuration Reference](./docs/configuration.md)
|
|
12
|
+
- [Customization Guide](./docs/customization.md)
|
|
13
|
+
- [Components and Layouts](./docs/components.md)
|
|
14
|
+
- [Content Elements](./docs/content-elements.md)
|
|
15
|
+
- [Upgrade Guide](./UPGRADE.md)
|
|
10
16
|
|
|
11
|
-
|
|
12
|
-
gem "imdhemy-jekyll-theme", "1.0.0"
|
|
13
|
-
```
|
|
17
|
+
## Example Site
|
|
14
18
|
|
|
15
|
-
|
|
19
|
+
A complete runnable example is available in [`example/`](./example).
|
|
16
20
|
|
|
17
|
-
|
|
18
|
-
theme: imdhemy-jekyll-theme
|
|
19
|
-
```
|
|
21
|
+
## Development
|
|
20
22
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
bundle install
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
## Migrating From `remote_theme`
|
|
28
|
-
|
|
29
|
-
If your site currently uses:
|
|
30
|
-
|
|
31
|
-
```yaml
|
|
32
|
-
remote_theme: imdhemy/imdhemy-jekyll-theme
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
Migrate to the gem flow:
|
|
36
|
-
|
|
37
|
-
1. Remove `remote_theme` from `_config.yml`.
|
|
38
|
-
2. Add `theme: imdhemy-jekyll-theme` to `_config.yml`.
|
|
39
|
-
3. Add `gem "imdhemy-jekyll-theme", "<semantic-version>"` to your `Gemfile`.
|
|
40
|
-
4. Run `bundle install`.
|
|
41
|
-
|
|
42
|
-
## Usage
|
|
43
|
-
|
|
44
|
-
You can find examples in the [example](/example) directory.
|
|
45
|
-
|
|
46
|
-
## Development Quick Start
|
|
47
|
-
|
|
48
|
-
Use this sequence every time you start working on the theme locally.
|
|
49
|
-
|
|
50
|
-
### 1. Prerequisites
|
|
51
|
-
|
|
52
|
-
- Ruby 3.3.4 + Bundler
|
|
53
|
-
- Node.js 24 + npm
|
|
54
|
-
|
|
55
|
-
The project pins runtime versions in:
|
|
56
|
-
|
|
57
|
-
- `.ruby-version`
|
|
58
|
-
- `.nvmrc`
|
|
59
|
-
- `.node-version`
|
|
60
|
-
- `.tool-versions`
|
|
61
|
-
|
|
62
|
-
### 2. Install dependencies
|
|
63
|
-
|
|
64
|
-
```bash
|
|
65
|
-
bundle install
|
|
66
|
-
npm install
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
### 3. Start development
|
|
70
|
-
|
|
71
|
-
Run the theme preview and JS watcher together:
|
|
72
|
-
|
|
73
|
-
```bash
|
|
74
|
-
npm start
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
This runs:
|
|
78
|
-
|
|
79
|
-
- `bundle exec rake preview` to serve the example site from `http://127.0.0.1:4000/example/`
|
|
80
|
-
- `vite build --watch` to rebuild `assets/js/dist/main.js` on JS changes
|
|
81
|
-
|
|
82
|
-
### 4. Day-to-day workflow
|
|
83
|
-
|
|
84
|
-
- Edit layouts/includes/styles in the theme root.
|
|
85
|
-
- Edit sample content under `example/` to verify real pages.
|
|
86
|
-
- Keep `npm start` running while you work.
|
|
87
|
-
|
|
88
|
-
### 5. Useful standalone commands
|
|
89
|
-
|
|
90
|
-
```bash
|
|
91
|
-
npm run rake # Jekyll preview only
|
|
92
|
-
npm run js:build # JS production build
|
|
93
|
-
npm run js:watch # JS watcher only
|
|
94
|
-
```
|
|
23
|
+
Use the local workflow documented in [Getting Started](./docs/getting-started.md#5-local-development).
|
|
95
24
|
|
|
96
25
|
## License
|
|
97
26
|
|
|
98
|
-
The theme is available as open source under the terms of the [MIT License](
|
|
27
|
+
The theme is available as open source under the terms of the [MIT License](./LICENSE.txt).
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
<section class="
|
|
2
|
-
<div class="
|
|
3
|
-
<div class="
|
|
4
|
-
<div class="
|
|
5
|
-
<h1 class="
|
|
6
|
-
<p class="
|
|
7
|
-
class="
|
|
1
|
+
<section class="page-header-wrap page-header-wrap--archive">
|
|
2
|
+
<div class="page-header-wrap__container">
|
|
3
|
+
<div class="page-header page-header--archive page-header--archive-hub">
|
|
4
|
+
<div class="page-header__layout page-header__layout--stacked">
|
|
5
|
+
<h1 class="page-header__title page-header__title--centered">{{ page.title }}</h1>
|
|
6
|
+
<p class="page-header__description page-header__description--centered">Check out the <a
|
|
7
|
+
class="archive-header__blog-link"
|
|
8
8
|
href="{{ site.baseurl }}/blog">blog</a> for all
|
|
9
9
|
posts.</p>
|
|
10
10
|
</div>
|
data/_includes/content.html
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{% if site.contributions.size > 0 %}
|
|
2
|
-
<section class="
|
|
3
|
-
<div class="
|
|
4
|
-
<div class="
|
|
5
|
-
<h2 class="
|
|
2
|
+
<section class="contributions">
|
|
3
|
+
<div class="contributions__container">
|
|
4
|
+
<div class="contributions__inner">
|
|
5
|
+
<h2 class="contributions__title">Contributions</h2>
|
|
6
6
|
|
|
7
|
-
<p class="
|
|
7
|
+
<p class="contributions__subtitle">I have contributed to some great projects</p>
|
|
8
8
|
|
|
9
|
-
<div class="
|
|
9
|
+
<div class="contributions__grid">
|
|
10
10
|
{% for contribution in site.contributions %}
|
|
11
|
-
<div class="
|
|
12
|
-
<a href="{{ contribution.url }}" class="
|
|
11
|
+
<div class="contributions__item">
|
|
12
|
+
<a href="{{ contribution.url }}" class="contributions__link">
|
|
13
13
|
<img src="{{ site.baseurl }}{{ contribution.logo }}"
|
|
14
|
-
class="
|
|
14
|
+
class="contributions__logo" alt="{{ contribution.name }}">
|
|
15
15
|
</a>
|
|
16
16
|
</div>
|
|
17
17
|
{% endfor %}
|
data/_includes/footer.html
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<section class="
|
|
2
|
-
<div class="
|
|
3
|
-
<div class="
|
|
4
|
-
<p class="
|
|
1
|
+
<section class="site-footer">
|
|
2
|
+
<div class="site-footer__inner">
|
|
3
|
+
<div class="site-footer__container">
|
|
4
|
+
<p class="site-footer__text">
|
|
5
5
|
<!-- 2001 - jekyll current year -->
|
|
6
6
|
© 2021 - {{ site.time | date: '%Y' }} . imdhemy.com Published by Jekyll, hosted on GitHub Pages.
|
|
7
7
|
</p>
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{% assign comments = site.theme_comments %}
|
|
2
|
+
{% assign comments_heading = site.theme_text.comments_heading | default: "Discussion" %}
|
|
3
|
+
{% assign comments_toggle_hint = site.theme_text.comments_toggle_hint | default: "Open to view reactions and comments" %}
|
|
4
|
+
{% if comments and comments.enabled and comments.provider == "giscus" %}
|
|
5
|
+
{% assign giscus = comments.giscus %}
|
|
6
|
+
{% assign giscus_host = giscus.host | default: "https://giscus.app" %}
|
|
7
|
+
{% if giscus and giscus.repo and giscus.repo_id and giscus.category and giscus.category_id %}
|
|
8
|
+
<section class="comments-shell" id="comments-section" aria-label="{{ comments_heading }}">
|
|
9
|
+
<div class="comments-shell__inner comments-collapsible" data-comments-collapsible>
|
|
10
|
+
<button class="comments-collapsible__toggle"
|
|
11
|
+
type="button"
|
|
12
|
+
aria-expanded="false"
|
|
13
|
+
aria-controls="comments-panel"
|
|
14
|
+
data-comments-toggle>
|
|
15
|
+
<span class="comments-collapsible__copy">
|
|
16
|
+
<span class="comments-shell__heading">{{ comments_heading }}</span>
|
|
17
|
+
<span class="comments-collapsible__hint">{{ comments_toggle_hint }}</span>
|
|
18
|
+
</span>
|
|
19
|
+
<span class="comments-collapsible__icon-wrap" aria-hidden="true">
|
|
20
|
+
<ion-icon class="comments-collapsible__icon" name="chevron-down-outline"></ion-icon>
|
|
21
|
+
</span>
|
|
22
|
+
</button>
|
|
23
|
+
<div class="comments-collapsible__panel" id="comments-panel" data-comments-panel hidden>
|
|
24
|
+
<div class="comments-collapsible__embed"
|
|
25
|
+
data-giscus-mount
|
|
26
|
+
data-giscus-script-src="{{ giscus_host }}/client.js"
|
|
27
|
+
data-giscus-repo="{{ giscus.repo }}"
|
|
28
|
+
data-giscus-repo-id="{{ giscus.repo_id }}"
|
|
29
|
+
data-giscus-category="{{ giscus.category }}"
|
|
30
|
+
data-giscus-category-id="{{ giscus.category_id }}"
|
|
31
|
+
data-giscus-mapping="{{ giscus.mapping | default: "pathname" }}"
|
|
32
|
+
data-giscus-term="{{ giscus.term }}"
|
|
33
|
+
data-giscus-strict="{{ giscus.strict | default: "0" }}"
|
|
34
|
+
data-giscus-reactions-enabled="{{ giscus.reactions_enabled | default: "1" }}"
|
|
35
|
+
data-giscus-emit-metadata="{{ giscus.emit_metadata | default: "0" }}"
|
|
36
|
+
data-giscus-input-position="{{ giscus.input_position | default: "top" }}"
|
|
37
|
+
data-giscus-theme="{{ giscus.theme | default: "preferred_color_scheme" }}"
|
|
38
|
+
data-giscus-lang="{{ giscus.lang | default: "en" }}"
|
|
39
|
+
data-giscus-loading="{{ giscus.loading | default: "lazy" }}"></div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</section>
|
|
43
|
+
{% endif %}
|
|
44
|
+
{% endif %}
|
data/_includes/header.html
CHANGED
|
@@ -1,47 +1,69 @@
|
|
|
1
|
-
<header class="
|
|
2
|
-
<div class="
|
|
3
|
-
<div class="
|
|
1
|
+
<header class="site-header" id="main-header">
|
|
2
|
+
<div class="site-header__container">
|
|
3
|
+
<div class="site-header__inner">
|
|
4
4
|
<!-- begin logo -->
|
|
5
|
-
<div class="
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
</a>
|
|
10
|
-
</div>
|
|
5
|
+
<div class="site-header__brand">
|
|
6
|
+
<a href="{{ site.baseurl }}/" class="site-logo">
|
|
7
|
+
{{ site.title }}
|
|
8
|
+
</a>
|
|
11
9
|
</div>
|
|
12
10
|
<!-- end logo -->
|
|
13
11
|
<!-- begin right part -->
|
|
14
|
-
<div class="
|
|
15
|
-
<div class="
|
|
16
|
-
<button type="button" class="
|
|
12
|
+
<div class="site-header__actions">
|
|
13
|
+
<div class="site-header__mobile-toggle-wrap">
|
|
14
|
+
<button type="button" class="site-header__toggle" data-target="#mobile-nav" aria-controls="mobile-nav"
|
|
15
|
+
aria-expanded="false" aria-label="Toggle navigation menu">
|
|
17
16
|
<ion-icon name="menu-outline"></ion-icon>
|
|
18
17
|
</button>
|
|
19
18
|
</div>
|
|
20
19
|
|
|
21
|
-
<
|
|
22
|
-
<ul class="
|
|
23
|
-
{%
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
20
|
+
<nav class="site-header__desktop-nav" aria-label="Primary navigation">
|
|
21
|
+
<ul class="site-nav-list">
|
|
22
|
+
{% assign current_path = page.url | default: "/" | split: "?" | first | replace: "index.html", "" | replace: ".html", "" %}
|
|
23
|
+
{% assign current_norm = current_path | append: "/" | replace: "//", "/" %}
|
|
24
|
+
{% for nav_page in site.navigation %}
|
|
25
|
+
{% assign nav_path = nav_page.url | default: "/" | split: "?" | first | replace: "index.html", "" | replace: ".html", "" %}
|
|
26
|
+
{% assign nav_norm = nav_path | append: "/" | replace: "//", "/" %}
|
|
27
|
+
{% assign is_active = false %}
|
|
28
|
+
{% if current_norm == nav_norm %}
|
|
29
|
+
{% assign is_active = true %}
|
|
30
|
+
{% endif %}
|
|
31
|
+
{% if nav_norm == "/blog/" and (current_norm contains "/blog/" or current_norm contains "/tag/" or page.layout == "post" or page.layout == "archive" or page.collection == "posts") %}
|
|
32
|
+
{% assign is_active = true %}
|
|
33
|
+
{% endif %}
|
|
34
|
+
<li class="site-nav-list__item">
|
|
35
|
+
<a href="{{ site.baseurl }}{{ nav_page.url }}"
|
|
36
|
+
class="nav-link{% if is_active %} is-active{% endif %}">
|
|
37
|
+
{{ nav_page.title }}
|
|
28
38
|
</a>
|
|
29
39
|
</li>
|
|
30
40
|
{% endfor %}
|
|
31
41
|
</ul>
|
|
32
|
-
</
|
|
42
|
+
</nav>
|
|
33
43
|
<!-- end right part -->
|
|
34
44
|
</div>
|
|
35
45
|
<!-- begin mobile nav -->
|
|
36
46
|
<nav id="mobile-nav"
|
|
37
|
-
class="
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
47
|
+
class="site-mobile-nav is-hidden"
|
|
48
|
+
aria-label="Mobile navigation">
|
|
49
|
+
<div class="site-mobile-nav__inner">
|
|
50
|
+
<ul class="site-mobile-nav__list">
|
|
51
|
+
{% assign current_path = page.url | default: "/" | split: "?" | first | replace: "index.html", "" | replace: ".html", "" %}
|
|
52
|
+
{% assign current_norm = current_path | append: "/" | replace: "//", "/" %}
|
|
53
|
+
{% for nav_page in site.navigation %}
|
|
54
|
+
{% assign nav_path = nav_page.url | default: "/" | split: "?" | first | replace: "index.html", "" | replace: ".html", "" %}
|
|
55
|
+
{% assign nav_norm = nav_path | append: "/" | replace: "//", "/" %}
|
|
56
|
+
{% assign is_active = false %}
|
|
57
|
+
{% if current_norm == nav_norm %}
|
|
58
|
+
{% assign is_active = true %}
|
|
59
|
+
{% endif %}
|
|
60
|
+
{% if nav_norm == "/blog/" and (current_norm contains "/blog/" or current_norm contains "/tag/" or page.layout == "post" or page.layout == "archive" or page.collection == "posts") %}
|
|
61
|
+
{% assign is_active = true %}
|
|
62
|
+
{% endif %}
|
|
63
|
+
<li class="site-mobile-nav__item">
|
|
64
|
+
<a href="{{ site.baseurl }}{{ nav_page.url }}"
|
|
65
|
+
class="site-mobile-nav__link nav-link{% if is_active %} is-active{% endif %}">
|
|
66
|
+
{{ nav_page.title }}
|
|
45
67
|
</a>
|
|
46
68
|
</li>
|
|
47
69
|
{% endfor %}
|
data/_includes/hero.html
CHANGED
|
@@ -1,14 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
{% assign hero_kicker = site.theme_text.hero_kicker | default: "Personal blog and engineering notes" %}
|
|
2
|
+
{% assign hero_cta_label = site.theme_text.hero_cta_label | default: "Start reading" %}
|
|
3
|
+
{% assign hero_secondary_cta_label = site.theme_text.hero_secondary_cta_label | default: "About me" %}
|
|
4
|
+
{% assign hero_secondary_cta_url = site.theme_text.hero_secondary_cta_url | default: "/about" %}
|
|
5
|
+
<section class="hero-section">
|
|
6
|
+
<div class="hero-section__container">
|
|
7
|
+
<div class="hero-section__layout">
|
|
8
|
+
<div class="hero-section__content">
|
|
9
|
+
<div class="hero-section__content-inner">
|
|
10
|
+
<p class="hero-kicker">{{ hero_kicker }}</p>
|
|
11
|
+
<h1 class="hero-title">
|
|
12
|
+
Hi, I'm <span class="hero-title__accent">{{ site.author.name }}</span>
|
|
8
13
|
</h1>
|
|
9
|
-
<p class="
|
|
14
|
+
<p class="hero-description">
|
|
10
15
|
{{ site.author.description }}
|
|
11
16
|
</p>
|
|
17
|
+
<div class="hero-cta hero-cta--dual">
|
|
18
|
+
<a href="{{ site.baseurl }}/blog" class="primary-button">{{ hero_cta_label }}</a>
|
|
19
|
+
<a href="{{ site.baseurl }}{{ hero_secondary_cta_url }}" class="secondary-button">{{ hero_secondary_cta_label }}</a>
|
|
20
|
+
</div>
|
|
12
21
|
</div>
|
|
13
22
|
</div>
|
|
14
23
|
</div>
|
data/_includes/latest-posts.html
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<
|
|
1
|
+
{% assign latest_posts_subtitle = site.theme_text.latest_posts_subtitle | default: "Fresh writing you can read in a few minutes." %}
|
|
2
|
+
<section class="latest-posts" id="latest-posts">
|
|
3
|
+
<div class="latest-posts__container">
|
|
4
|
+
<div class="latest-posts__inner">
|
|
5
|
+
<h2 class="latest-posts__title">Latest Posts</h2>
|
|
6
|
+
<p class="section-subtitle">{{ latest_posts_subtitle }}</p>
|
|
7
|
+
<div class="latest-posts__list">
|
|
6
8
|
{% for post in site.posts limit:3 %}
|
|
7
9
|
{% include post-item.html %}
|
|
8
10
|
{% endfor %}
|
|
9
11
|
</div>
|
|
10
|
-
<div class="
|
|
12
|
+
<div class="latest-posts__cta">
|
|
11
13
|
<a href="{{ site.baseurl }}/blog"
|
|
12
|
-
class="
|
|
14
|
+
class="primary-button">
|
|
13
15
|
All Posts →
|
|
14
16
|
</a>
|
|
15
17
|
</div>
|
data/_includes/page-header.html
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<section class="
|
|
2
|
-
<div class="
|
|
3
|
-
<div class="
|
|
4
|
-
<div class="
|
|
5
|
-
<h1 class="
|
|
6
|
-
<p class="
|
|
1
|
+
<section class="page-header-wrap page-header-wrap--blog">
|
|
2
|
+
<div class="page-header-wrap__container">
|
|
3
|
+
<div class="page-header page-header--page page-header--blog">
|
|
4
|
+
<div class="page-header__layout">
|
|
5
|
+
<h1 class="page-header__title">{{ page.title }}</h1>
|
|
6
|
+
<p class="page-header__description">{{ page.description }} </p>
|
|
7
7
|
</div>
|
|
8
8
|
</div>
|
|
9
9
|
</div>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{% if paginator.total_pages > 1 %}
|
|
2
|
-
<section class="
|
|
3
|
-
<nav class="
|
|
2
|
+
<section class="pagination-shell">
|
|
3
|
+
<nav class="pagination-nav" aria-label="Pagination">
|
|
4
4
|
{% if paginator.previous_page %}
|
|
5
|
-
<a class="
|
|
5
|
+
<a class="pagination-link"
|
|
6
6
|
href="{{ paginator.previous_page_path | relative_url }}">Prev</a>
|
|
7
7
|
{% else %}
|
|
8
|
-
<span class="
|
|
8
|
+
<span class="pagination-link is-disabled">Previous</span>
|
|
9
9
|
{% endif %}
|
|
10
10
|
|
|
11
11
|
{% if paginator.next_page %}
|
|
12
|
-
<a class="
|
|
12
|
+
<a class="pagination-link"
|
|
13
13
|
href="{{ paginator.next_page_path | relative_url }}">Next</a>
|
|
14
14
|
{% else %}
|
|
15
|
-
<span class="
|
|
15
|
+
<span class="pagination-link is-disabled">Next</span>
|
|
16
16
|
{% endif %}
|
|
17
17
|
</nav>
|
|
18
18
|
</section>
|
data/_includes/post-header.html
CHANGED
|
@@ -1,35 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<img src="{{ site.baseurl }}{{ site.author.avatar }}" alt="{{ author.name }}"
|
|
9
|
-
class="rounded-full w-10 h-10 mr-3 block"/>
|
|
10
|
-
<div>
|
|
11
|
-
<p class="text-gray-700 text-sm font-bold">{{ site.author.name }}</p>
|
|
12
|
-
<p class="text-gray-500 text-xs">
|
|
13
|
-
{{ page.date | date: "%B %-d, %Y" }} - {{ page.content |
|
|
14
|
-
number_of_words | divided_by: 200 }} min read
|
|
15
|
-
</p>
|
|
16
|
-
</div>
|
|
17
|
-
</div>
|
|
18
|
-
</div>
|
|
19
|
-
|
|
20
|
-
<div>
|
|
1
|
+
{% assign read_minutes = page.content | number_of_words | divided_by: 200 | at_least: 1 %}
|
|
2
|
+
{% assign back_to_posts_label = site.theme_text.back_to_posts_label | default: "Back to all posts" %}
|
|
3
|
+
<div class="post-header">
|
|
4
|
+
<a class="post-back-link" href="{{ site.baseurl }}/blog">← {{ back_to_posts_label }}</a>
|
|
5
|
+
<h1 class="post-title">{{ page.title }}</h1>
|
|
6
|
+
{% include post-meta.html date=page.date reading_minutes=read_minutes class_name="post-header__meta post-meta" %}
|
|
7
|
+
<div class="post-header__tags">
|
|
21
8
|
{% assign tags = page.tags %}
|
|
22
9
|
{% include post-tags.html %}
|
|
23
10
|
</div>
|
|
24
11
|
|
|
25
12
|
{% if page.image %}
|
|
26
|
-
<div class="
|
|
13
|
+
<div class="post-image-wrap">
|
|
27
14
|
<img src="{{ site.baseurl }}{{ page.image }}"
|
|
28
15
|
alt="{{ page.image_alt | default: page.title }}"
|
|
29
|
-
class="
|
|
16
|
+
class="post-image"/>
|
|
30
17
|
<!-- Image source -->
|
|
31
18
|
{% if page.image_source %}
|
|
32
|
-
<div class="
|
|
19
|
+
<div class="post-image-source">
|
|
33
20
|
Image source: {{ page.image_source }}
|
|
34
21
|
</div>
|
|
35
22
|
{% endif %}
|
data/_includes/post-item.html
CHANGED
|
@@ -1,26 +1,30 @@
|
|
|
1
|
-
|
|
1
|
+
{% assign reading_minutes = post.content | number_of_words | divided_by: 200 | at_least: 1 %}
|
|
2
|
+
{% assign read_article_label = site.theme_text.read_article_label | default: "Read article" %}
|
|
3
|
+
<article class="post-card">
|
|
2
4
|
<!-- thumbnail -->
|
|
3
5
|
{% if post.image %}
|
|
4
6
|
<a href="{{ site.baseurl }}{{ post.url }}"
|
|
5
|
-
class="
|
|
7
|
+
class="post-card__image">
|
|
6
8
|
<img src="{{ site.baseurl }}{{ post.image }}"
|
|
7
|
-
class="
|
|
8
|
-
alt="{{ post.title }}"/>
|
|
9
|
+
class="post-card__image-el"
|
|
10
|
+
alt="{{ post.image_alt | default: post.title }}"/>
|
|
9
11
|
</a>
|
|
10
12
|
{% endif %}
|
|
11
13
|
<!-- content -->
|
|
12
|
-
<div>
|
|
13
|
-
{% assign tags = post.tags %}
|
|
14
|
-
{% include post-tags.html %}
|
|
14
|
+
<div class="post-card__content">
|
|
15
15
|
<!-- title -->
|
|
16
|
-
<h2 class="
|
|
17
|
-
<a class="
|
|
16
|
+
<h2 class="post-card__title">
|
|
17
|
+
<a class="post-card__title-link"
|
|
18
18
|
href="{{ site.baseurl }}{{ post.url }}">{{
|
|
19
19
|
post.title }}</a>
|
|
20
20
|
</h2>
|
|
21
21
|
<!-- excerpt -->
|
|
22
|
-
<div class="
|
|
22
|
+
<div class="post-card__excerpt">
|
|
23
23
|
{{ post.excerpt | strip_html | truncatewords: 20 }}
|
|
24
24
|
</div>
|
|
25
|
+
{% include post-meta.html date=post.date reading_minutes=reading_minutes class_name="post-card__meta post-meta" %}
|
|
26
|
+
{% assign tags = post.tags %}
|
|
27
|
+
{% include post-tags.html %}
|
|
28
|
+
<a class="post-card__read-link" href="{{ site.baseurl }}{{ post.url }}">{{ read_article_label }} →</a>
|
|
25
29
|
</div>
|
|
26
30
|
</article>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
{% assign meta_class = include.class_name | default: "post-meta" %}
|
|
2
|
+
<p class="{{ meta_class }}">
|
|
3
|
+
<time datetime="{{ include.date | date_to_xmlschema }}">{{ include.date | date: "%b %-d, %Y" }}</time>
|
|
4
|
+
<span class="post-meta__separator" aria-hidden="true">·</span>
|
|
5
|
+
<span class="post-meta__reading-time">
|
|
6
|
+
<ion-icon class="post-meta__icon" name="time-outline" aria-hidden="true"></ion-icon>
|
|
7
|
+
<span>{{ include.reading_minutes }} min read</span>
|
|
8
|
+
</span>
|
|
9
|
+
</p>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
{% assign previous_article_label = site.theme_text.previous_article_label | default: "Previous article" %}
|
|
2
|
+
{% assign next_article_label = site.theme_text.next_article_label | default: "Next article" %}
|
|
3
|
+
<section class="post-navigation-shell">
|
|
4
|
+
<div class="post-navigation-shell__inner post-navigation">
|
|
5
|
+
{% if page.previous.url %}
|
|
6
|
+
<a class="post-navigation__item" href="{{ site.baseurl }}{{ page.previous.url }}">
|
|
7
|
+
<span class="post-navigation__label">{{ previous_article_label }}</span>
|
|
8
|
+
<span class="post-navigation__title">{{ page.previous.title }}</span>
|
|
9
|
+
</a>
|
|
10
|
+
{% endif %}
|
|
11
|
+
{% if page.next.url %}
|
|
12
|
+
<a class="post-navigation__item post-navigation__item--next" href="{{ site.baseurl }}{{ page.next.url }}">
|
|
13
|
+
<span class="post-navigation__label">{{ next_article_label }}</span>
|
|
14
|
+
<span class="post-navigation__title">{{ page.next.title }}</span>
|
|
15
|
+
</a>
|
|
16
|
+
{% endif %}
|
|
17
|
+
</div>
|
|
18
|
+
</section>
|
data/_includes/post-tags.html
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
{% if tags and tags.size > 0 %}
|
|
2
|
+
<div class="post-tags">
|
|
2
3
|
{% for tag in tags %}
|
|
3
4
|
{% assign tag_link = tag | slugify %}
|
|
4
5
|
<a href="{{ site.baseurl }}/tag/{{ tag_link }}"
|
|
5
|
-
class="
|
|
6
|
+
class="tag-pill">
|
|
6
7
|
#{{ tag }}
|
|
7
8
|
</a>
|
|
8
9
|
{% endfor %}
|
|
9
10
|
</div>
|
|
11
|
+
{% endif %}
|