diff --git a/README.md b/README.md index fc2d22a..98032f7 100644 --- a/README.md +++ b/README.md @@ -32,9 +32,11 @@ You can find installation instructions [on the Zola website](https://www.getzola 4. This theme uses the `tags` taxonomy, in your `config.toml` file set `taxonomies = [ { name = "tags" } ]` -5. Copy across the default content from the theme by running `cp themes/simple-dev-blog/content/* ./content -r` +5. This theme uses the `authors` taxonomy, in your `config.toml` file set `taxonomies = [ { name = "authors" } ]` -6. That's it! Now build your site by running the following command, and navigate to `127.0.0.1:111`: +6. Copy across the default content from the theme by running `cp themes/simple-dev-blog/content/* ./content -r` + +7. That's it! Now build your site by running the following command, and navigate to `127.0.0.1:111`: ```sh zola serve @@ -61,6 +63,7 @@ The following options should be under the `[extra]` in `config.toml` - `not_found_message` - the content for your 404 page in markdown - `profile_large` - the path to a larger vertical version of your profile picture in the content folder - `profile_small` - the path to a small version of your profile picture in the content folder +- `summary_truncate_length` - the length of a post's summary ### Page diff --git a/config.toml b/config.toml index 0655883..fac461b 100644 --- a/config.toml +++ b/config.toml @@ -25,6 +25,8 @@ taxonomies = [ dark_mode = false +summary_truncate_length = 300 + nav = [ { name = "About", path = "/about/" }, { name = "Blog", path = "/blog/" } diff --git a/sass/main.scss b/sass/main.scss index 0fa128f..f6e19be 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -6,7 +6,7 @@ body { } .post-preview { - h3.post-title { + h2.post-title { margin-bottom: 0; } @@ -108,3 +108,10 @@ table tbody tr:nth-of-type(even) { table tbody tr:last-of-type { border-bottom: 2px solid var(--accent-color); } + +hr.gradient-line { + height: 2px; + border: none; + border-radius: 10px; + background-image: linear-gradient(to right, #ffffff, var(--accent-color)); +} diff --git a/sass/text.scss b/sass/text.scss index 87c7275..153f456 100644 --- a/sass/text.scss +++ b/sass/text.scss @@ -62,7 +62,7 @@ a:visited { main { max-width: 700px; - padding-top: 8rem; + padding-top: 4rem; margin: auto; } @@ -110,6 +110,7 @@ header { margin: auto; display: flex; flex-direction: row; + align-items: center; } a.profile-icon { @@ -123,6 +124,11 @@ a.profile-icon { } } +.profile-text { + padding-left: 1rem; + font-size: 1.5rem; +} + nav { display: flex; align-items: center; diff --git a/templates/base.html b/templates/base.html index 58eca02..5af1045 100644 --- a/templates/base.html +++ b/templates/base.html @@ -108,7 +108,7 @@ {% block title %} {% if page.title %} - {{ page.title }} + {{ page.title | striptags }} :: {{ config.title }} {% else %} {{ config.title }} {% endif %} @@ -127,6 +127,7 @@ <a class="profile-icon" href="/"> <img src="{{ icon.url }}" alt="profile picture"> </a> + <span class="profile-text">{{ config.title }}</span> <nav> {% for link in config.extra.nav %} <a href="{{ link.path }}">{{ link.name }}</a> diff --git a/templates/blog-post.html b/templates/blog-post.html index ff83ffb..383cbcd 100644 --- a/templates/blog-post.html +++ b/templates/blog-post.html @@ -74,11 +74,19 @@ <h1>{{ page.title }}</h1> <small> {{ page.date | date(format="%B %d, %Y") }} + {% if page.taxonomies.authors %} +  ·  By + <span class="tags"> + {% for author in page.taxonomies.authors %} + <a href="{{ get_taxonomy_url(kind="authors", name=author) }}">{{ author }}</a>{% if not loop.last %}, {% endif %} + {% endfor %} + </span> + {% endif %} {% if page.taxonomies.tags %} - - +  ·  Filed under <span class="tags"> {% for tag in page.taxonomies.tags %} - <a href="{{ get_taxonomy_url(kind="tags", name=tag) }}">{{ tag }}</a> + <a href="{{ get_taxonomy_url(kind="tags", name=tag) }}">{{ tag }}</a>{% if not loop.last %}, {% endif %} {% endfor %} </span> {% endif %} diff --git a/templates/blog.html b/templates/blog.html index ab5d81f..ec8b532 100644 --- a/templates/blog.html +++ b/templates/blog.html @@ -12,6 +12,6 @@ {{ section.content | safe }} {% for post in section.pages %} - {{ post_macros::post_preview(post=post) }} + {{ post_macros::post_preview(post=post, summary_truncate_length=config.extra.summary_truncate_length) }} {% endfor %} {% endblock content %} diff --git a/templates/post-preview.html b/templates/post-preview.html index 82e7d14..c4d808b 100644 --- a/templates/post-preview.html +++ b/templates/post-preview.html @@ -1,16 +1,17 @@ -{% macro post_preview(post) %} +{% macro post_preview(post, summary_truncate_length=300) %} <div class="post-preview"> - <h3 class="post-title"><a href="{{ post.permalink }}">{{ post.title }}</a></h3> + <h2 class="post-title"><a href="{{ post.permalink }}">{{ post.title }}</a></h2> <small> - {{ post.date| date(format="%B %d, %Y") }} - {{ post.word_count }} words - {{ post.reading_time }} mins + {{ post.date| date(format="%B %d, %Y") }}  ·  {{ post.word_count }} words  ·  {{ post.reading_time }} mins </small> <div class="summary"> {% if post.summary -%} - {{ post.summary }} + {{ post.summary | safe }} {% else %} - {{ post.content | safe | striptags | truncate(length=300) }} + {{ post.content | truncate(length=summary_truncate_length) | safe }} {%- endif %} - <a href="{{ post.permalink }}">read more</a> + <p><small><a href="{{ post.permalink }}#continue-reading">continue reading …</a></small></p> </div> + <hr class="gradient-line"/> </div> {% endmacro input %} diff --git a/templates/tags/list.html b/templates/taxonomy_list.html similarity index 100% rename from templates/tags/list.html rename to templates/taxonomy_list.html diff --git a/templates/tags/single.html b/templates/taxonomy_single.html similarity index 62% rename from templates/tags/single.html rename to templates/taxonomy_single.html index 993cff6..ee95065 100644 --- a/templates/tags/single.html +++ b/templates/taxonomy_single.html @@ -9,10 +9,10 @@ {% endblock posthead %} {% block content %} - <h1>{{ term.pages | length }} pages tagged with "{{ term.name }}"</h1> + <h1>{{ term.pages | length }} page{{ term.pages | length | pluralize }} tagged with "{{ term.name }}"</h1> <div class="taxonomy-container"> {% for post in term.pages %} - {{ post_macros::post_preview(post=post) }} + {{ post_macros::post_preview(post=post, summary_truncate_length=config.extra.summary_truncate_length) }} {% endfor %} </div> {% endblock content %}