From d4a052e86f33ced79b9f4d09aeee0b1c43ef1f23 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Tue, 31 May 2022 01:45:54 -0700 Subject: Improve imghover shortcode, examples, page scores --- README.md | 18 ++++++++---- config.toml | 3 +- content/overview-embedded-videos.md | 23 ---------------- content/overview-embedded-vimeo.md | 17 ++++++++++++ content/overview-embedded-youtube.md | 17 ++++++++++++ .../overview-fonts-imagehover-shortcode/index.md | 18 ++++++++++-- content/overview-images/index.md | 10 ++++--- content/overview-markdown-syntax.md | 32 +++++++++++----------- content/overview-math.md | 8 +++--- templates/categories/list.html | 6 ++-- templates/categories/single.html | 2 +- templates/macros/macros.html | 2 +- templates/posts.html | 2 +- templates/shortcodes/imagehover.html | 21 ++++++++++---- templates/shortcodes/vm.html | 2 +- templates/shortcodes/yt.html | 2 +- templates/tags/list.html | 4 +-- templates/tags/single.html | 2 +- 18 files changed, 117 insertions(+), 72 deletions(-) delete mode 100644 content/overview-embedded-videos.md create mode 100644 content/overview-embedded-vimeo.md create mode 100644 content/overview-embedded-youtube.md diff --git a/README.md b/README.md index 27ecee1..1244c47 100644 --- a/README.md +++ b/README.md @@ -56,18 +56,24 @@ Enable the theme in your `config.toml` in the site directory: theme = "abridge" ``` -Or copy the `config.toml` from the theme directory to your project's -root directory, and uncomment the theme line: +Or copy the `config.toml` from the theme directory to your project's root directory: +(This will give you a base configuration with all config values used) ```bash cp themes/abridge/config.toml config.toml -sed -i 's/^#theme = "abridge"/theme = "abridge"/' config.toml ``` -Also point extra_syntaxes_and_themes at the correct directory: - +Uncomment the theme line, and point extra_syntaxes_and_themes at the correct directory: +```bash +sed -i 's/^#theme = "abridge"/theme = "abridge"/' config.toml +sed -i 's/^extra_syntaxes_and_themes = \["highlight_themes"\]/extra_syntaxes_and_themes = \["highlight_themes", "themes\/abridge\/highlight_themes"\]/' config.toml ``` -extra_syntaxes_and_themes = ["themes/abridge/highlight_themes"] + +The result should be: +```toml +theme = "abridge" +[markdown] +extra_syntaxes_and_themes = ["highlight_themes", "themes/abridge/highlight_themes"] ``` ### Step 4: Add new content diff --git a/config.toml b/config.toml index 419274c..649142d 100644 --- a/config.toml +++ b/config.toml @@ -18,7 +18,8 @@ taxonomies = [ ] [markdown] -extra_syntaxes_and_themes = ["highlight_themes"] +extra_syntaxes_and_themes = ["highlight_themes"] # Abridge's config.toml +# In YOUR SITE'S config.toml set to: ["highlight_themes", "themes/abridge/highlight_themes"] highlight_code = true highlight_theme = "ayu-dark-abridge" # ayu-dark-abridge ayu-mirage-dark-abridge charcoal-dark-abridge dracula-dark-abridge material-dark-abridge diff --git a/content/overview-embedded-videos.md b/content/overview-embedded-videos.md deleted file mode 100644 index aa9074e..0000000 --- a/content/overview-embedded-videos.md +++ /dev/null @@ -1,23 +0,0 @@ -+++ -title = "Embedded Youtube & Vimeo Videos" -date = 2021-05-07 - -[taxonomies] -categories = ["Features"] -tags = ["shortcodes","video"] -+++ - -Zola has many shortcodes, and new are easily added, this example shows vimeo and youtube. - - -## Vimeo - -with `vm(id="id_here")` - -{{ vm(id="514402648") }} - -## Youtube - -with `yt(id="the_id_here")` - -{{ yt(id="32gyFIWecuw") }} diff --git a/content/overview-embedded-vimeo.md b/content/overview-embedded-vimeo.md new file mode 100644 index 0000000..e9dc03d --- /dev/null +++ b/content/overview-embedded-vimeo.md @@ -0,0 +1,17 @@ ++++ +title = "Embedded Vimeo Videos" +date = 2021-05-07 + +[taxonomies] +categories = ["Features"] +tags = ["shortcodes","video"] ++++ + +Zola has many shortcodes, and new are easily added, this example shows vimeo. + + +## Vimeo + +with `vm(id="id_here" title="Youtube - Safe Systems Programming in Rust")` + +{{ vm(id="514402648" title="Youtube - Safe Systems Programming in Rust") }} diff --git a/content/overview-embedded-youtube.md b/content/overview-embedded-youtube.md new file mode 100644 index 0000000..b9787be --- /dev/null +++ b/content/overview-embedded-youtube.md @@ -0,0 +1,17 @@ ++++ +title = "Embedded Youtube Videos" +date = 2021-05-08 + +[taxonomies] +categories = ["Features"] +tags = ["shortcodes","video"] ++++ + +Zola has many shortcodes, and new are easily added, this example shows youtube. + + +## Youtube + +with `yt(id="the_id_here" title="Vimeo - Gnome vs KDE")` + +{{ yt(id="32gyFIWecuw" title="Vimeo - Gnome vs KDE") }} diff --git a/content/overview-fonts-imagehover-shortcode/index.md b/content/overview-fonts-imagehover-shortcode/index.md index 655b6cd..448c7f0 100644 --- a/content/overview-fonts-imagehover-shortcode/index.md +++ b/content/overview-fonts-imagehover-shortcode/index.md @@ -7,9 +7,21 @@ categories = ["Features"] tags = ["shortcodes","image"] +++ -This shortcode accepts an array of images, the first element is the default, the remaining images are hover images. +This shortcode accepts an array of images, the first element is the one you are comparing to all the others. + +The first image in the array is displayed, hover you mouse over the image to display the one your comparing to. -with `imagehover(sources=["file1.jpg", "file2.jpg", "file3.jpg"])` +This can also be used to compare just one picture with another by passing only two files in the array: + +`imagehover(sources=["regular.png", "hover.png"] w=560 h=650 p=45` + +To Compare many images just add more images to the array: + +`imagehover(sources=["System.png", "DroidSans.png", "Roboto.png", "Arimo.png", "Lato.png", "Ubuntu.png"] w=560 h=650 p=45` + +- w is the width of the image. +- h is the height of the image. +- p is the percent size that you want the image to use on the page.(50 is the default) -{{ imagehover(sources=["System.png", "DroidSans.png", "Roboto.png", "Arimo.png", "Lato.png", "Ubuntu.png"]) }} +{{ imagehover(sources=["System.png", "DroidSans.png", "Roboto.png", "Arimo.png", "Lato.png", "Ubuntu.png"] w=560 h=650 p=45) }} diff --git a/content/overview-images/index.md b/content/overview-images/index.md index 0e623e5..d253932 100644 --- a/content/overview-images/index.md +++ b/content/overview-images/index.md @@ -1,6 +1,6 @@ +++ -title = "Images, Direct and Relative Path" -date = 2021-05-08 +title = "Image Examples" +date = 2021-05-09 [taxonomies] categories = ["Features"] @@ -9,12 +9,14 @@ tags = ["images"] Images can be embed using direct or relative paths. -Use `img()` to specify the relative path of image: +Use `img(path="./image.jpg", alt="Papaya")` to specify the relative path of image: -{{ img(path="./image.jpg", alt="") }} +{{ img(path="./image.jpg", alt="Papaya") }} This is an example note with direct image, without using shortcode: +`![Rust](rust.png)` + ![Rust](rust.png) This is an svg image: diff --git a/content/overview-markdown-syntax.md b/content/overview-markdown-syntax.md index a289f2a..add1d58 100644 --- a/content/overview-markdown-syntax.md +++ b/content/overview-markdown-syntax.md @@ -12,7 +12,7 @@ toc = true This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows if basic HTML elements are decorated with CSS in a Zola theme. -## Headings +# Headings The following HTML `

`—`

` elements represent six levels of section headings. `

` is the highest section level while `

` is the lowest. @@ -24,7 +24,7 @@ headings. `

` is the highest section level while `

` is the lowest. ##### H5 ###### H6 -## Paragraph +# Paragraph Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma @@ -40,18 +40,18 @@ tiustia prat. Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat. -## Blockquotes +# Blockquotes The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations. -#### Blockquote without attribution +## Blockquote without attribution > Tiam, ad mint andaepu dandae nostion secatur sequo quae. > **Note** that you can use *Markdown syntax* within a blockquote. -#### Blockquote with attribution +## Blockquote with attribution > Don't communicate by sharing memory, share memory by communicating.
> — Rob Pike[^1] @@ -59,7 +59,7 @@ and optionally with in-line changes such as annotations and abbreviations. > All men by nature desire to know.
> ― Aristotle[^2] -## Tables +# Tables Tables aren't part of the core Markdown spec, but Zola supports them out-of-the-box. @@ -72,13 +72,13 @@ out-of-the-box. John | 59 Kerry | 23 -#### Inline Markdown within tables +## Inline Markdown within tables | Italics | Bold | Code | StrikeThrough | | -------- | -------- | ------ | ----------------- | | *italics* | **bold** | `code` | ~~strikethrough~~ | -## Foldable Text +# Foldable Text
Title 1 @@ -90,13 +90,13 @@ out-of-the-box.

Stay awhile, and listen!

-## Code Blocks +# Code Blocks Code blocks.. ❤️ with automatic syntax highlighting ✨‍ See [the docs](https://www.getzola.org/documentation/content/syntax-highlighting/) for options. -#### Code block with backticks +## Code block with backticks ```html @@ -111,25 +111,25 @@ See [the docs](https://www.getzola.org/documentation/content/syntax-highlighting ``` -#### Inline Code block +## Inline Code block If we want, we can also `specify inline code` which is useful for `the small stuff`. -## List Types +# List Types -#### Ordered List +## Ordered List 1. First item 2. Second item 3. Third item -#### Unordered List +## Unordered List - List item - Another item - And another item -#### Nested list +## Nested list - Fruit - Apple @@ -139,7 +139,7 @@ If we want, we can also `specify inline code` which is useful for `the small stu - Milk - Cheese -## Other Elements — abbr, sub, sup, kbd, mark, link +# Other Elements — abbr, sub, sup, kbd, mark, link GIF is a bitmap image format. diff --git a/content/overview-math.md b/content/overview-math.md index df1b8b4..d8f50da 100644 --- a/content/overview-math.md +++ b/content/overview-math.md @@ -1,5 +1,5 @@ +++ -title = "Mathematical Notations Support" +title = "Mathematical Notations" date = 2021-05-05 updated = 2022-01-01 [taxonomies] @@ -13,7 +13,7 @@ You can use [$\KaTeX$](https://katex.org) to render mathematical notations. You can enable the $\KaTeX$ support globally, per-section or per-page basis. -### Enable Globally +## Enable Globally To enable the $\KaTeX$ support globally, add `math = true` under `[extra]` of the `config.toml` at your site root. Now every section and page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html). @@ -23,7 +23,7 @@ at your site root. Now every section and page of your site will load the KaTeX [ math = true ``` -### Per-section Basis +## Per-section Basis To enable the $\KaTeX$ support in a particular section, add `math = true` under `[extra]` in the `[SECTION_NAME]/_index.md`. Now every page under this section will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html). @@ -35,7 +35,7 @@ math = true +++ ``` -### Per-page Basis +## Per-page Basis To enable the $\KaTeX$ support in a particular page, add `math = true` under `[extra]` in the page's frontmatter. Now this page will load the $\KaTeX$ [autorender extension](https://katex.org/docs/autorender.html). diff --git a/templates/categories/list.html b/templates/categories/list.html index f85f732..10a8c8b 100644 --- a/templates/categories/list.html +++ b/templates/categories/list.html @@ -19,13 +19,15 @@

{{ terms | length }} Categories

-

{%- for term in terms %}[{{ term.name }}]   {%- endfor %}

+

{% for term in terms %} [{{ term.name }}] {% endfor %}

{%- for term in terms %}

{{ term.name }}

{%- for page in term.pages %} -

{{ page.title }} -

+

{{ page.title }} -

{%- endfor %} {%- endfor %}
{%- endblock content %} + + diff --git a/templates/categories/single.html b/templates/categories/single.html index f1c5cfe..b1cd680 100644 --- a/templates/categories/single.html +++ b/templates/categories/single.html @@ -21,7 +21,7 @@ {%- for year, posts in term.pages | group_by(attribute="year") %}

{{ year }}

{%- for page in posts %} -

{{ page.title }} -

+

{{ page.title }} -

{%- endfor %} {%- endfor %} diff --git a/templates/macros/macros.html b/templates/macros/macros.html index e4fcf73..541ebfe 100644 --- a/templates/macros/macros.html +++ b/templates/macros/macros.html @@ -17,7 +17,7 @@ {%- macro footer(page) %} -

Back to top

+

Back to top

{%- endmacro footer %} diff --git a/templates/posts.html b/templates/posts.html index bd5d0d8..e4f1d54 100644 --- a/templates/posts.html +++ b/templates/posts.html @@ -23,7 +23,7 @@ {%- for year, posts in section_item.pages | group_by(attribute="year") %}

{{ year }}

{%- for post in posts %} -

{{ post.title }} - {{ post.date | date(format="%F") }}

+

{{ post.title }} -

{%- endfor %} {%- endfor %} diff --git a/templates/shortcodes/imagehover.html b/templates/shortcodes/imagehover.html index 68f25be..99dd4e4 100644 --- a/templates/shortcodes/imagehover.html +++ b/templates/shortcodes/imagehover.html @@ -8,22 +8,33 @@ {%- else %}
## {{ sourcename }}
-
+
{%- endif %} {%- endfor %} +{%- if w and h and p %} + {%- set padding = h / w * p %} +{%- elif w and h %} + {%- set padding = h / w * 50 %} +{%- else %} + {%- set padding = 50 %} +{%- endif %} +