diff options
| -rw-r--r-- | README.md | 23 | ||||
| -rw-r--r-- | config.toml | 18 | ||||
| -rw-r--r-- | sass/_imports.scss | 1 | ||||
| -rw-r--r-- | sass/include/_top.scss | 17 | ||||
| -rw-r--r-- | sass/include/_zola.scss | 9 | ||||
| -rw-r--r-- | templates/base.html | 4 | ||||
| -rw-r--r-- | templates/index.html | 22 | ||||
| -rw-r--r-- | templates/macros/macros.html | 87 | ||||
| -rw-r--r-- | templates/page.html | 5 |
9 files changed, 148 insertions, 38 deletions
@@ -203,16 +203,22 @@ The following options should be under the `[extra]` in `config.toml` - `language_code` - Set the site language_code. - `title_separator` - Separator between title and title_addition, eg "|": "Abridge | Fast & Lightweight Zola Theme" - `title_addition` - a default value for title addition, used at the index. - -- `author` - Used for articles to denote the author. -- `author_show = true` - Displays the author name on line with date, tags, categories -- `readtime = true` - Displays the read time on line with date, tags, categories. -- `readtime_string` - The word following the read time, you can set this to "min", "minutes", "min read", etc. - `recent = true` - This enabled the Recent posts box visible on the top right. - `recent_items = 9` - The number of items to display in the recent posts box +- `author` - Used for articles to denote the author. + +- `meta_index / meta_post` + * `position` - top, bottom, both, false(hidden), Where to display the meta info in relation to the summary. + * `size` - s95, s90, s85, s80, false(full size). The size of the font for the meta info + * `author` - true/false, Display the author in the meta info. + * `readtime` - true/false, Display the read time in the meta info. + * `readstring` - "min", "min read", "minutes read". The string to display after the read time. + * `date` - true/false, Display the date in the meta info. + * `categories_tags` - true/false, Display the categores and tags in the meta info. + * `divider` - `"·"` `"•"` `" "` divider to display between meta info elements. + - `footer_credit = true` - This enables the powered by zola and abridge line in the footer. - `footer_credit_override` - Can be used to customize the footer credit, useful to add icons to the text, etc. - - `logo = { file="logo.svg", width="42", height="42", alt="Abridge", text="bridge" }` - Defines the graphical logo with optional text to follow the logo. - `textlogo` - A purely Text based logo, this will be used if logo is commented out, if both are commented out then config.title is used. - `sitedesc` - This adds the site description just below the text based logo. @@ -238,6 +244,11 @@ The following options should be under the `[extra]` in `config.toml` - `banner` - Image to use in seo related cards, this will be the fallback image if the individual articles does not provide one. - `favicon_..` - Used to set the various favicons (displayed in bookmarks and active browser tab) - `fontawesome =` - Uncomment to enable fontawesome library, this will include the file in the header. + * `icon_read` - icon to display in meta info on index and posts, comment out to disable + * `icon_date` - icon to display in meta info on index and posts, comment out to disable + * `icon_info` - icon to display in meta info on index and posts, comment out to disable + * `icon_author` - icon to display in meta info on index and posts, comment out to disable + - `fonts =` - Uncomment to load external fonts, they will be loaded in the header. - `math` - Set to true to load the Katex library, enabling the use of the [katex shortcode](https://abridge.netlify.app/overview-math/) (recommend setting on a per page basis instead.) - `math_auto_render` - This allows you to define a section of math notation using only $$ $$ symbols instead of using the katex shortcode directly. (recommend setting on a per page basis instead.) diff --git a/config.toml b/config.toml index 7f4c600..2e7063e 100644 --- a/config.toml +++ b/config.toml @@ -44,21 +44,21 @@ title_separator = "|" # Separator between title and title_addition, set as |, - # To disable title_addition but keep built in page additions eg, Posts page: "Posts | Abridge" set title_addition to an empty string # To always set the page title exactly eg "Abridge" then comment out the below line (not recommend, bad for SEO) title_addition = "Fast & Lightweight Zola Theme" # a default value for title addition - -author = "Jake G" # Put Your Name here -author_show = true # displays the author name on line with date, tags, categories -readtime = false # displays the read time on line with date, tags, categories -readtime_string = "min" # read time indication eg "min": - 1 min "min read": - 1 min read recent = true # TOC / index recent_items = 9 +author = "Jake G" # Put Your Name here + +meta_index = { position="bottom", size="s90", author=true, readtime=false, readstring="min", date=true, categories_tags=true, divider=" " } +meta_post = { position="top", size="s95", author=true, readtime=false, readstring="min read", date=true, categories_tags=true, divider=" " } +## position: top, bottom, both, false(hidden) ## size: s95, s90, s85, s80, false(full size) +## divider: "·" "•" " " + footer_credit = true #footer_credit_override = '<p>Powered by <a href="https://www.getzola.org/">Zola</a> & <a href="https://github.com/Jieiku/abridge/">Abridge</a></p>' # <i class="fa-solid fa-heart"></i> - #uncomment one of the two lines, or neither, depending on which type of logo you want to use: #logo = { file="logo.svg", width="32", height="32", alt="Abridge", text="bridge" } #textlogo = '<font color="#f90">A</font>bridge' textlogo = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#f90" viewBox="0 0 96 96" width="32" height="32"><path stroke-width="14" d="M14 99 46 7h4l32 92"/><path stroke-width="9" d="M-3 82c43-26 59-26 102 0"/><path stroke-linecap="round" stroke-width="1.5" d="M94 72v7m-5-9.8v7m-5-9.8v7.1M79 64v7M63 57.7v7m-5-8.2v7m-5-7.8v7m-5-7.2v7m-5-6.7v7m-5-6.3v7m-5-5.8v7M17 64v7m-5-4.6v7m-5-4.2v7M2 72v7"/></svg>bridge' - sitedesc = false # enables or disables the display of the site description below the logo. #copyright_start_year = 2019 # optional #copyright_end_year = 2020 # optional, recommend leaving unset, zola build will set this to current year by default @@ -139,6 +139,10 @@ favicon16 = "favicon-16x16.png" # favicon-16x16.png # Uncomment below line to load fontawesome, eg: <i class="fa-solid fa-heart"></i> #fontawesome = "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css" +#icon_read = "fa-solid fa-glasses" # displayed in metadata on index and below title on page. +#icon_date = "fa-solid fa-calendar" # displayed in metadata on index and below title on page. +#icon_info = "fa-solid fa-circle-info" # displayed in metadata on index and below title on page for categories/tags +#icon_author = "fa-solid fa-pen-fancy" # displayed in metadata on index and below title on page. # For externally loaded Fonts, make sure to include the FULL url including the http/https prefix #fonts = [ {url = "https://fonts.googleapis.com/css?family=Montserrat:400,700,italic|Fira+Code:400,italic"} ] diff --git a/sass/_imports.scss b/sass/_imports.scss index 8a7e650..6e61b8e 100644 --- a/sass/_imports.scss +++ b/sass/_imports.scss @@ -29,6 +29,7 @@ @import "include/scroller"; // figure @import "include/button"; // button, a[role=button], type=button, type=submit ... @import "include/form"; // input, select, textarea, label, fieldset, legend (If you import this, you should also import button) +@import "include/top"; // back to top button using only CSS @import "include/search"; // Zola Search - elasticlunr site-wide search @import "include/toc"; // Zola TOC - Table of Content Menu (recent posts & index), sticky (floats top right) diff --git a/sass/include/_top.scss b/sass/include/_top.scss new file mode 100644 index 0000000..98b2a61 --- /dev/null +++ b/sass/include/_top.scss @@ -0,0 +1,17 @@ +.top { + position: sticky; + bottom: 9px; + padding: 9px; + place-self: end; + margin-top: 109vh; + + font-weight:700; + border-radius: 9px; + color: var(--a1); + background: var(--c2); +} +.top:hover { + color: var(--c2); + background: var(--a1); + text-decoration: none; +} diff --git a/sass/include/_zola.scss b/sass/include/_zola.scss index e07c1e1..504fb3a 100644 --- a/sass/include/_zola.scss +++ b/sass/include/_zola.scss @@ -1,4 +1,7 @@ .sum {margin: 0.2rem 0} -.info {font-size: .8rem} -.hpad {padding: 0 .4rem} -.rpad {padding-right: .4rem}
\ No newline at end of file +.s95 {font-size: .95rem} +.s90 {font-size: .90rem} +.s85 {font-size: .85rem} +.s80 {font-size: .80rem} +.hpad {padding: 0 .2rem} +.rpad {padding-right: .2rem}
\ No newline at end of file diff --git a/templates/base.html b/templates/base.html index 161e147..962cb88 100644 --- a/templates/base.html +++ b/templates/base.html @@ -48,7 +48,7 @@ <li><h2><a href="{{ get_url(path=i.url, trailing_slash=i.slash) }}{%- if i.slash and config.extra.uglyurls %}index.html{%- endif %}">{{ i.name | safe }}</a></h2> </li> {%- endfor %} {%- if config.extra.js_theme %} - <li class="js"><i type="reset" id="mode" class="svgs contrast"></i> + <li class="js">{%- if config.extra.fontawesome %}<i type="reset" id="mode" class="svgs fa-solid fa-circle-half-stroke"></i>{%- else %}<i type="reset" id="mode" class="svgs contrast"></i>{%- endif %} {%- endif %} </li> </ul> @@ -112,5 +112,7 @@ </div> </footer> {%- endblock footer %} +{%- block gotop %} +{%- endblock gotop %} </body> </html>
\ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 03a652c..6d3bfe0 100644 --- a/templates/index.html +++ b/templates/index.html @@ -22,11 +22,17 @@ {{- macros_head::seo(title=title, title_addition=title_addition, description=description, is_home=true) }} {%- endblock seo %} + + {%- block content %} <div> {%- for page in paginator.pages %} <article> <h1><a href="{{ page.permalink | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ page.title }}</a></h1> + {%- if config.extra.meta_index.position %} + {%- if config.extra.meta_index.position == "top" or config.extra.meta_index.position == "both" %} + {{- macros::title_index(page=page) }} + {%- endif %}{%- endif %} <p class="sum"> {%- if page.summary %} {{ page.summary | markdown(inline=true) | safe }} @@ -38,17 +44,11 @@ {%- endif %} <a href="{{ page.permalink | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">...more</a> </p> - <span class="info"> - {%- if page.taxonomies.authors and config.taxonomies %} - <span class="rpad">{%- for author in page.taxonomies.authors %} - {%- if author_flag %} and {% endif %} - <a href="{{ get_taxonomy_url(kind='authors', name=author) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ author }}</a> - {%- set_global author_flag = true %} - {%- endfor %}</span> - {%- elif config.extra.author and config.extra.author_show %}<span class="rpad">{{ config.extra.author }}</span> - {%- endif %} <span class="rpad">{{ page.date | date(format="%Y %B %d") }}</span>{%- if config.extra.readtime %}<span class="rpad"> {{ page.reading_time }} {{ config.extra.readtime_string | default(value="min") }} </span>{% endif %} -{%- if page.taxonomies.categories %}<span class="rpad"> [{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind='categories', name=cat) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ cat }}</a>{% endfor %}]</span>{% endif %} -{%- if page.taxonomies.tags %} {%- for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ tag }}</a> {% endfor -%}{%- endif %}</span> + {%- if config.extra.meta_index.position %} + {%- if config.extra.meta_index.position == "bottom" or config.extra.meta_index.position == "both" %} + {{- macros::title_index(page=page) }} + {%- endif %} + {%- endif %} </article> {%- endfor %} {{- macros::pagination(paginator=paginator) }} diff --git a/templates/macros/macros.html b/templates/macros/macros.html index 4b6c7d5..e818bfd 100644 --- a/templates/macros/macros.html +++ b/templates/macros/macros.html @@ -1,20 +1,87 @@ {%- macro title(page) %} - <h1><a href="{{ page.permalink | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ page.title }}</a></h1> - <span> - {%- if page.taxonomies.authors and config.taxonomies %} - <span class="hpad"><b>{%- for author in page.taxonomies.authors %} + <span{%- if config.extra.meta_post.size %} class="{{ config.extra.meta_post.size }}"{% endif %}> + + {#- Author #} + {%- if page.taxonomies.authors and config.taxonomies %} + {%- for author in page.taxonomies.authors %} + {%- if author_flag %} and {% endif %} + <a href="{{ get_taxonomy_url(kind='authors', name=author) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ author }}</a> + {%- set_global author_flag = true %} + {%- endfor %} + {%- elif config.extra.author and config.extra.meta_post.author %} + {%- if config.extra.icon_author %}<i class="{{ config.extra.icon_author }}"></i>{%- endif %}{{ config.extra.author }} + {%- endif %} + + {#- divider #} + {%- if config.extra.meta_post.author %} + {%- if config.extra.meta_post.readtime or config.extra.meta_post.date or config.extra.meta_post.categories_tags %} + {%- if config.extra.meta_post.divider %}<span class="hpad">{{ config.extra.meta_post.divider | safe }}</span>{%- else %} {%- endif %} + {%- endif %} + {%- endif %} + + {#- ReadTime #} + {%- if config.extra.meta_post.readtime %} {%- if config.extra.icon_read %}<i class="{{ config.extra.icon_read }}"></i>{%- endif %}{{ page.reading_time }} {{ config.extra.meta_post.readstring | default(value="min") }} + {#- divider #} + {%- if config.extra.meta_post.date or config.extra.meta_post.categories_tags %} + {%- if config.extra.meta_post.divider %}<span class="hpad">{{ config.extra.meta_post.divider | safe }}</span>{%- else %} {%- endif %}{%- endif %}{%- endif %} + + {#- Date #} + {%- if config.extra.meta_post.date %} {%- if config.extra.icon_date %}<i class="{{ config.extra.icon_date }}"></i>{%- endif %}{{ page.date | date(format="%B %d, %Y") }} + {#- divider #} + {%- if config.extra.meta_post.categories_tags %} + {%- if config.extra.meta_post.divider %}<span class="hpad">{{ config.extra.meta_post.divider | safe }}</span>{%- else %} {%- endif %}{%- endif %}{% endif %} + + {#- Categories #} + {%- if page.taxonomies.categories %} {%- if config.extra.icon_info %}<i class="{{ config.extra.icon_info }}"></i>{%- endif %}[{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind='categories', name=cat) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ cat }}</a>{% endfor %}]{% endif %} + + {#- Tags #} + {%- if page.taxonomies.tags %} {%- for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ tag }}</a> {% endfor -%}{%- endif %}</span> +{%- endmacro title %} + + +{%- macro title_index(page) %} + <span{%- if config.extra.meta_index.size %} class="{{ config.extra.meta_index.size }}"{% endif %}> + + {#- Author #} + {%- if page.taxonomies.authors and config.taxonomies %} + {%- for author in page.taxonomies.authors %} {%- if author_flag %} and {% endif %} <a href="{{ get_taxonomy_url(kind='authors', name=author) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ author }}</a> {%- set_global author_flag = true %} - {%- endfor %}</b></span> - {%- elif config.extra.author and config.extra.author_show %}<span class="hpad"><b>{{ config.extra.author }}</b></span> - {%- endif %}<span class="rpad"> {{ page.date | date(format="%B %d, %Y") }}</span> -{%- if page.taxonomies.categories %}<span class="rpad"> [{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind='categories', name=cat) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ cat }}</a>{% endfor %}]</span>{% endif %} -{%- if page.taxonomies.tags %}<span class="rpad"> {%- for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ tag }}</a> {% endfor -%}</span>{%- endif %} -{%- if config.extra.readtime %}<span class="rpad"> {{ page.reading_time }} {{ config.extra.readtime_string | default(value="min") }} </span>{% endif %}</span> + {%- endfor %} + {%- elif config.extra.author and config.extra.meta_index.author %} + {%- if config.extra.icon_author %}<i class="{{ config.extra.icon_author }}"></i>{%- endif %}{{ config.extra.author }} + {%- endif %} + + {#- divider #} + {%- if config.extra.meta_index.author %} + {%- if config.extra.meta_index.readtime or config.extra.meta_index.date or config.extra.meta_index.categories_tags %} + {%- if config.extra.meta_index.divider %}<span class="hpad">{{ config.extra.meta_index.divider | safe }}</span>{%- else %} {%- endif %} + {%- endif %} + {%- endif %} + + {#- ReadTime #} + {%- if config.extra.meta_index.readtime %} {%- if config.extra.icon_read %}<i class="{{ config.extra.icon_read }}"></i>{%- endif %}{{ page.reading_time }} {{ config.extra.meta_index.readstring | default(value="min") }} + {#- divider #} + {%- if config.extra.meta_index.date or config.extra.meta_index.categories_tags %} + {%- if config.extra.meta_index.divider %}<span class="hpad">{{ config.extra.meta_index.divider | safe }}</span>{%- else %} {%- endif %}{%- endif %}{%- endif %} + + {#- Date #} + {%- if config.extra.meta_index.date %} {%- if config.extra.icon_date %}<i class="{{ config.extra.icon_date }}"></i>{%- endif %}{{ page.date | date(format="%B %d, %Y") }} + {#- divider #} + {%- if config.extra.meta_index.categories_tags %} + {%- if config.extra.meta_index.divider %}<span class="hpad">{{ config.extra.meta_index.divider | safe }}</span>{%- else %} {%- endif %}{%- endif %}{% endif %} + + {#- Categories #} + {%- if page.taxonomies.categories %} {%- if config.extra.icon_info %}<i class="{{ config.extra.icon_info }}"></i>{%- endif %}[{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind='categories', name=cat) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ cat }}</a>{% endfor %}]{% endif %} + + {#- Tags #} + {%- if page.taxonomies.tags %} {%- for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ tag }}</a> {% endfor -%}{%- endif %}</span> {%- endmacro title %} + + {%- macro footer(page) %} <p><b><a href="#">Back to top</a></b></p> {%- endmacro footer %} diff --git a/templates/page.html b/templates/page.html index 736a11e..c653018 100644 --- a/templates/page.html +++ b/templates/page.html @@ -32,6 +32,7 @@ {%- block content %} <article> + <h1><a href="{{ page.permalink | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ page.title }}</a></h1> {{- macros::title(page=page) }} {{ page.content | safe }} {%- block page_footer %} @@ -63,3 +64,7 @@ {%- endif %} {%- endblock toc %} {%- endblock content %} + +{%- block gotop %} +<a href="#" class="top">⋏</a> +{%- endblock gotop %}
\ No newline at end of file |