A charming Jekyll theme.
jekyll-theme

Custom Includes #1

merged opened by arthr.me targeting main from feat/add-custom-includes

Adds three custom includes to add HTML markup to different parts of the website.

Labels

None yet.

assignee

None yet.

Participants 1
AT URI
at://did:plc:aeaouj6eedwqmk4z3pies55n/sh.tangled.repo.pull/3mfzddiujp622
+191 -103
Diff #0
+22
CHANGELOG.md
··· 1 + --- 2 + layout: page 3 + title: Changelog 4 + permalink: /changelog/ 5 + --- 6 + 7 + ## Version 1.1 8 + 9 + **New:** 10 + 11 + - **`archive` layout:** 12 + Show all your posts in a single list! 13 + - **New Setting `site.translations.byline`:** 14 + Now you can prepend a byline for an author name in the post footer. 15 + - **Custom includes:** 16 + You can add HTML markup to the `<head>`, below your post and at the end of the `</body>` tag. 17 + 18 + **Fix:** 19 + 20 + - Hides `post.author` on single-author blogs. 21 + - Hides excerpt on link posts in archive pages. 22 + - Softens the shadows to increase legibility.
+73 -28
README.md
··· 1 - # Linus 1 + --- 2 + layout: page 3 + title: Using Linus 4 + permalink: /about/ 5 + --- 2 6 3 - A minimal Jekyll blog theme. Supports link posts, categories, tags, date archives, pagination, and dark mode out of the box. 4 - 7 + Linus is a minimal blog theme for Jekyll. Supports link posts, categories, tags, archives (using [jekyll-archives](https://github.com/jekyll/jekyll-arcihves)) and dark mode out of the box. 5 8 ## Installation 6 9 7 10 Add this line to your Jekyll site's `Gemfile`: ··· 51 54 --- 52 55 ``` 53 56 54 - **Link posts** — set `title` to an empty string and provide a `source` URL. The post title renders as "↪ [fetched page title]" using `jekyll-url-metadata`: 57 + **Link posts**: you can have link posts by setting a `post.source` front-matter on your post. If the title is left empty (`""`), Jekyll will try to fetch the link metadata and render the link title as your post title. 55 58 56 59 ```yaml 57 60 --- ··· 64 67 65 68 ### Authors 66 69 67 - Define authors in `_data/authors.yml`: 70 + Authors follow the same approach as [jekyll-feed](https://github.com/jekyll-feed) and [jekyll-archives](https://github.com/jekyll/jekyll-archives). You can have an author object set in a post, or in the site `_config.yml`, or in a `authors.yml` data file. 71 + 72 + In a post: 68 73 69 74 ```yaml 70 - arthur: 71 - name: Arthur Freitas 72 - uri: https://arthr.me/ 75 + --- 76 + layout: post 77 + title: My awesome first post 78 + author: 79 + name: Author Name 80 + uri: https://example.com 81 + picture: /path/to/author-picture.jpg 82 + --- 73 83 ``` 74 84 75 - Reference them in post front matter with the `author` key. 85 + In your `_config.yml`: 76 86 77 - ### Category colors 87 + ```yaml 88 + author: 89 + name: Author Name 90 + uri: https://example.com 91 + picture: /path/to/author-picture.jpg 92 + ``` 78 93 79 - Assign a background color to each category pill: 94 + You can also define authors in `_data/authors.yml`: 80 95 81 96 ```yaml 82 - category_colors: 83 - - name: Links 84 - color: "#f0e68c" 85 - - name: Notes 86 - color: "#fa8072" 97 + author_name: 98 + name: Author Name 99 + uri: https://example.com 100 + picture: /path/to/author-picture.jpg 87 101 ``` 88 102 89 - ### Date formats 90 - 91 - Customize how dates are displayed using strftime strings: 103 + Reference them in post front matter with the `author` key: 92 104 93 105 ```yaml 94 - date_formats: 95 - day: "%b %d, '%y" 96 - month: "%b, '%y" 97 - year: "%Y" 106 + author: author_name 98 107 ``` 99 108 100 109 ### Navigation menus ··· 126 135 127 136 ```yaml 128 137 translations: 138 + byline: "By" 129 139 archive_date_title: "Archives from %date" 130 140 archive_tag_title: "Posts tagged with %tag" 131 141 archive_category_title: "Posts filed under %category" ··· 134 144 blog_pagination_next_page: "Next page" 135 145 ``` 136 146 137 - ### Pagination 147 + ### Further options 148 + 149 + Linus uses the following Jekyll plugins, which you can set up as you please. Refer to the plugins docs to learn how to change the way your site will handle pagination, archiving, feeds and SEO tags: 138 150 139 - ```yaml 140 - paginate: 12 141 - paginate_path: "/pg/:num/" 142 - ``` 151 + - [jekyll-pagination](https://github.com/jekyll/jekyll-pagination) 152 + - [jekyll-archives](https://github.com/jekyll/jekyll-archives) 153 + - [jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag) 154 + - [jekyll-sitemap](https://github.com/jekyll/jekyll-sitemap) 155 + - [jekyll-feed](https://github.com/jekyll/jekyll-feed) 156 + - [jekyll-json-feed](https://github.com/lildude/jekyll-json-feed) 143 157 144 158 ## Customization 145 159 160 + ### Date formats 161 + 162 + Customize how dates are displayed using strftime strings: 163 + 164 + ```yaml 165 + date_formats: 166 + day: "%b %d, '%y" 167 + month: "%b, '%y" 168 + year: "%Y" 169 + ``` 170 + 146 171 ### Custom styles 147 172 148 173 Override or extend the theme's CSS by creating `assets/css/theme.css` in your site. This file is loaded last, after all theme styles. Use it to redefine CSS custom properties or add new rules: ··· 154 179 } 155 180 ``` 156 181 182 + #### Category colors 183 + 184 + Assign a background color to each category pill: 185 + 186 + ```yaml 187 + category_colors: 188 + - name: Links 189 + color: "#f0e68c" 190 + - name: Notes 191 + color: "#fa8072" 192 + ``` 193 + 157 194 ### Custom fonts 158 195 159 196 Create `assets/css/fonts.css` in your site to load your own web fonts: ··· 173 210 --font-body: 'My Font', sans-serif; 174 211 } 175 212 ``` 213 + 214 + ## Custom includes 215 + 216 + Linus offers three custom includes to add markup to different parts of your website: 217 + 218 + - `head.html`: right before the closing `</head>` tag. 219 + - `below-post.html`: after the post footer in post pages. 220 + - `end.html`: right before the closing `</body>` tag. 176 221 177 222 ## Development 178 223
+1
_config.yml
··· 18 18 year: "%Y" 19 19 20 20 translations: 21 + byline: "By" 21 22 archive_date_title: "Archives from %date" 22 23 archive_tag_title: "Posts tagged with %tag" 23 24 archive_category_title: "Posts filed under %category"
+3
_includes/below-post.html
··· 1 + {% comment %} 2 + You can create a `_includes/head.html` in your site to add custom scripts, styles and other markup right after your post in a post page. 3 + {% endcomment %}
+8 -7
_includes/blog/post.html
··· 71 71 {%- assign author = site.data.authors[include.post.author] -%} 72 72 {%- endif -%} 73 73 74 - {%- if author.uri -%} 75 - <p class="post-author p-author h-card"> 74 + <p class="post-author p-author h-card"> 75 + <span class="post-byline"> 76 + {{ site.translations.byline }} 77 + </span> 78 + {% if author.uri -%} 76 79 <a class="p-name u-url" href="{{- author.uri -}}"> 77 80 {{ author.name }} 78 81 </a> 79 - </p> 80 - {%- else -%} 81 - <p class="post-author p-author h-card"> 82 + {%- else -%} 82 83 <span class="p-name"> 83 84 {{- author -}} 84 85 </span> 85 - </p> 86 - {%- endif -%} 86 + {%- endif -%} 87 + </p> 87 88 </footer> 88 89 {%- endif -%} 89 90 </article>
+3
_includes/end.html
··· 1 + {% comment %} 2 + You can create a `_includes/head.html` in your site to add custom scripts, styles and other markup as you wish! 3 + {% endcomment %}
-20
_includes/footer.html
··· 1 - <footer class="site-footer"> 2 - <p> 3 - <strong>{{ site.title }}</strong> &mdash; {{ site.description }} 4 - </p> 5 - 6 - {% if site.footer_menu %} 7 - <nav class="footer-menu" aria-label="{{ site.footer_menu.title }}"> 8 - {% for item in site.footer_menu.items %} 9 - <a 10 - class="menu-item" 11 - href="{{ item.url }}" 12 - {%- if item.external %} target="_blank" {%- endif -%} 13 - {%- if item.rel %} rel="{{ item.rel }}" {%- endif -%} 14 - > 15 - {{- item.label -}} 16 - </a> 17 - {% endfor %} 18 - </nav> 19 - {% endif %} 20 - </footer>
+3
_includes/head.html
··· 1 + {% comment %} 2 + You can create a `_includes/head.html` in your site to add custom scripts, styles and other markup that will be added right before the closing `</head>` tag. 3 + {% endcomment %}
-44
_includes/header.html
··· 1 - {%- assign is_personal_website = false -%} 2 - 3 - {%- if site.author or site.data.authors == 1 -%} 4 - {%- assign is_personal_website = true -%} 5 - {%- endif -%} 6 - 7 - {%- capture site_branding -%} 8 - <a class="site-branding h-card u-url" href="{{ '/' | absolute_url }}"> 9 - {% if site.logo %} 10 - <img 11 - class="site-logo u-photo" 12 - src="{{ site.logo }}" 13 - alt="" 14 - /> 15 - {% endif %} 16 - 17 - <span class="site-name p-name {%- unless is_personal_website %} p-org {%- endunless -%}"> 18 - {{ site.title }} 19 - </span> 20 - </a> 21 - {%- endcapture -%} 22 - 23 - 24 - <header class="site-header"> 25 - {% if page.title and page.title != "" %} 26 - <span class="site-title"> 27 - {{ site_branding }} 28 - </span> 29 - {% else %} 30 - <h1 class="site-title"> 31 - {{ site_branding }} 32 - </h1> 33 - {% endif %} 34 - 35 - {% if site.main_menu %} 36 - <nav class="site-menu" aria-label="{{ site.main_menu.title }}"> 37 - {% for item in site.main_menu.items %} 38 - <a class="menu-item" href="{{ item.url }}" {% if item.external %}target="_blank"{% endif %}> 39 - {{- item.label -}} 40 - </a> 41 - {% endfor %} 42 - </nav> 43 - {% endif %} 44 - </header>
+20
_includes/site/footer.html
··· 1 + <footer class="site-footer"> 2 + <p> 3 + <strong>{{ site.title }}</strong> &mdash; {{ site.description }} 4 + </p> 5 + 6 + {% if site.footer_menu %} 7 + <nav class="footer-menu" aria-label="{{ site.footer_menu.title }}"> 8 + {% for item in site.footer_menu.items %} 9 + <a 10 + class="menu-item" 11 + href="{{ item.url }}" 12 + {%- if item.external %} target="_blank" {%- endif -%} 13 + {%- if item.rel %} rel="{{ item.rel }}" {%- endif -%} 14 + > 15 + {{- item.label -}} 16 + </a> 17 + {% endfor %} 18 + </nav> 19 + {% endif %} 20 + </footer>
+44
_includes/site/header.html
··· 1 + {%- assign is_personal_website = false -%} 2 + 3 + {%- if site.author or site.data.authors == 1 -%} 4 + {%- assign is_personal_website = true -%} 5 + {%- endif -%} 6 + 7 + {%- capture site_branding -%} 8 + <a class="site-branding h-card u-url" href="{{ '/' | absolute_url }}"> 9 + {% if site.logo %} 10 + <img 11 + class="site-logo u-photo" 12 + src="{{ site.logo }}" 13 + alt="" 14 + /> 15 + {% endif %} 16 + 17 + <span class="site-name p-name {%- unless is_personal_website %} p-org {%- endunless -%}"> 18 + {{ site.title }} 19 + </span> 20 + </a> 21 + {%- endcapture -%} 22 + 23 + 24 + <header class="site-header"> 25 + {% if page.title and page.title != "" %} 26 + <span class="site-title"> 27 + {{ site_branding }} 28 + </span> 29 + {% else %} 30 + <h1 class="site-title"> 31 + {{ site_branding }} 32 + </h1> 33 + {% endif %} 34 + 35 + {% if site.main_menu %} 36 + <nav class="site-menu" aria-label="{{ site.main_menu.title }}"> 37 + {% for item in site.main_menu.items %} 38 + <a class="menu-item" href="{{ item.url }}" {% if item.external %}target="_blank"{% endif %}> 39 + {{- item.label -}} 40 + </a> 41 + {% endfor %} 42 + </nav> 43 + {% endif %} 44 + </header>
+6 -2
_layouts/default.html
··· 33 33 <link rel="stylesheet" href="{%- link assets/css/syntax.css -%}" /> 34 34 <link rel="stylesheet" href="{%- link assets/css/theme.css -%}" /> 35 35 <link rel="stylesheet" href="{%- link assets/css/fonts.css -%}" /> 36 + 37 + {%- include head.html -%} 36 38 </head> 37 39 <body> 38 40 <div class="site"> 39 - {% include header.html %} 41 + {% include site/header.html %} 40 42 41 43 <main class="site-content"> 42 44 {{ content }} 43 45 </main> 44 46 45 47 46 - {% include footer.html %} 48 + {% include site/footer.html %} 47 49 </div> 50 + 51 + {%- include end.html -%} 48 52 </body> 49 53 </html>
+6
_layouts/post.html
··· 68 68 {%- endif -%} 69 69 70 70 <p class="post-author p-author h-card" {% if site.author or site.data.authors.size == 1 -%}hidden{%- endif %}> 71 + <span class="post-byline"> 72 + {{ site.translations.byline }} 73 + </span> 74 + 71 75 {%- if author.uri -%} 72 76 <a class="p-name u-url" href="{{- author.uri -}}"> 73 77 {{ author.name }} ··· 95 99 {%- endif -%} 96 100 </footer> 97 101 {%- endif -%} 102 + 103 + {%- include below-post.html -%} 98 104 </article> 99 105
+2 -2
assets/css/layout.css
··· 24 24 --color-link: #2D5438; 25 25 --color-link-hover: #1E3826; 26 26 --color-support: #D9634E; 27 - --color-shadows: color-mix(in srgb, var(--color-text), transparent 75%); 28 - --color-shadows-hover: color-mix(in srgb, var(--color-text), transparent 50%); 27 + --color-shadows: color-mix(in srgb, var(--color-text), transparent 85%); 28 + --color-shadows-hover: color-mix(in srgb, var(--color-text), transparent 75%); 29 29 --color-border: color-mix(in srgb, currentcolor, transparent 50%); 30 30 } 31 31

History

1 round 0 comments
sign up or login to add to the discussion
arthr.me submitted #0
6 commits
expand
feat(post): adds author byline setting
docs: update theme docs
fix(layout): softens some shadow colors to increase legibility
feat(layout): move site-related includes to site dir
feat(layout): adds new custom includes
docs: update dogs with new custom includes
expand 0 comments
pull request successfully merged