From ad466232017fb4b5992911ed643dc42a93cc566c Mon Sep 17 00:00:00 2001 From: George Cushen Date: Mon, 24 Oct 2022 22:43:04 +0100 Subject: [PATCH] feat: add landing pages (aka widget pages v2) Closes #2049 --- modules/wowchemy/layouts/index.html | 4 +- modules/wowchemy/layouts/landing/single.html | 3 + .../layouts/partials/blocks/about.avatar.html | 4 +- .../layouts/partials/blocks/markdown.html | 7 +- .../partials/functions/parse_block_v2.html | 140 ++++++++++++++++++ .../layouts/partials/landing_page.html | 8 + starters/notes/content/_index.md | 32 ---- 7 files changed, 160 insertions(+), 38 deletions(-) create mode 100644 modules/wowchemy/layouts/landing/single.html create mode 100644 modules/wowchemy/layouts/partials/functions/parse_block_v2.html create mode 100644 modules/wowchemy/layouts/partials/landing_page.html delete mode 100644 starters/notes/content/_index.md diff --git a/modules/wowchemy/layouts/index.html b/modules/wowchemy/layouts/index.html index 0bf02b49..d58663c4 100644 --- a/modules/wowchemy/layouts/index.html +++ b/modules/wowchemy/layouts/index.html @@ -18,8 +18,10 @@ {{/* Generate homepage. */}} {{ if eq .Type "book" }} {{ partial "book_layout.html" . }} -{{ else }} +{{ else if eq .Type "widget_page" }} {{ partial "widget_page.html" . }} +{{ else }} + {{ partial "landing_page.html" . }} {{ end }} {{- end -}} diff --git a/modules/wowchemy/layouts/landing/single.html b/modules/wowchemy/layouts/landing/single.html new file mode 100644 index 00000000..3bf5952b --- /dev/null +++ b/modules/wowchemy/layouts/landing/single.html @@ -0,0 +1,3 @@ +{{- define "main" -}} + {{ partial "landing_page.html" . }} +{{- end -}} diff --git a/modules/wowchemy/layouts/partials/blocks/about.avatar.html b/modules/wowchemy/layouts/partials/blocks/about.avatar.html index 59a22dd7..741da9d0 100644 --- a/modules/wowchemy/layouts/partials/blocks/about.avatar.html +++ b/modules/wowchemy/layouts/partials/blocks/about.avatar.html @@ -10,7 +10,7 @@ {{ if .author }} {{ $author = .author }} {{ else }} - {{ $author = $block.Params.author }} + {{ $author = $block.Params.author | default $block.content.username }} {{end}} {{ $person_page_path := (printf "/authors/%s" $author) }} @@ -82,7 +82,7 @@ {{ end }} - {{ with $block.Content }} + {{ with $block.Content | default ($block.content.text | emojify | markdownify) }}
{{ . }}
diff --git a/modules/wowchemy/layouts/partials/blocks/markdown.html b/modules/wowchemy/layouts/partials/blocks/markdown.html index 0e92ab48..cc0a6de3 100644 --- a/modules/wowchemy/layouts/partials/blocks/markdown.html +++ b/modules/wowchemy/layouts/partials/blocks/markdown.html @@ -5,14 +5,15 @@ {{/* Initialise */}} {{ $page := .wcPage }} {{ $block := .wcBlock }} -{{ $columns := $block.Params.design.columns | default "2" }} +{{ $columns := $block.Params.design.columns | default $block.design.columns | default "2" }} +{{ $text := $block.Content | default ($block.content.text | emojify | markdownify) }} {{ if ne $columns "1" }}
- {{ $block.Content }} + {{ $text }}
{{ else }}
- {{ $block.Content }} + {{ $text }}
{{ end }} diff --git a/modules/wowchemy/layouts/partials/functions/parse_block_v2.html b/modules/wowchemy/layouts/partials/functions/parse_block_v2.html new file mode 100644 index 00000000..0a5d4fa0 --- /dev/null +++ b/modules/wowchemy/layouts/partials/functions/parse_block_v2.html @@ -0,0 +1,140 @@ +{{/* Wowchemy Block Parser */}} +{{/* Documentation: https://wowchemy.com/blocks/ */}} +{{/* License: https://github.com/wowchemy/wowchemy-hugo-themes/blob/main/LICENSE.md */}} + +{{ $page := .page }} +{{ $block := .block }} + +{{ $block_type := lower $block.block | default "markdown" }} +{{ $block_path := printf "blocks/%s.html" $block_type }} +{{ if not (templates.Exists (printf "partials/%s" $block_path)) }} + {{ errorf "%s uses a `%s` block but the `%s` block was not found at `layouts/partials/%s`" $block.File.Path $block_type $block_type $block_path }} +{{ end }} + +{{/* Workaround to make Hugo's .Page.Store.Set cascade up to the parent of headless pages */}} +{{ if $block.Page.Store.Get "has_mermaid" }} + {{ $page.Page.Store.Set "has_mermaid" true }} +{{ end }} + +{{/* Begin widget styling */}} +{{ $bg := $block.design.background }} +{{ $style := "" }} +{{ $style_bg := "" }} + +{{ if $bg.color }} + {{ $style_bg = printf "background-color: %s;" ($bg.color | default "transparent") }} +{{ end }} + +{{ if and $bg.gradient_start $bg.gradient_end }} + {{ $angle := string $bg.gradient_angle | default "90" }} + {{ $style_bg = printf "%sbackground-image: linear-gradient(%sdeg, %s, %s);" $style_bg $angle $bg.gradient_start $bg.gradient_end }} +{{ end }} + +{{ $bg_video := "" }} +{{ if $bg.video.path }} + {{ $bg_video = resources.Get (printf "media/%s" $bg.video.path) }} +{{ end }} +{{ $bg_video_class := "" }} +{{ if $bg.video.flip }} + {{ $bg_video_class = "flip" }} +{{ end }} + +{{ if $bg.image.filename }} + {{/* See Hugo note on linking assets in styles: https://github.com/gohugoio/hugoThemes#common-permalink-issues */}} + {{ $bg_img := resources.Get (printf "media/%s" $bg.image.filename) }} + {{ if $bg_img }} + {{/* Exception for SVG as Hugo doesn't yet support image processing on SVG. */}} + {{ if ne $bg_img.MediaType.SubType "svg" }} + {{ $bg_img = $bg_img.Fit "1920x1920 webp" }} + {{ end }} + {{ $style_bg = printf "%sbackground-image: url('%s');" $style_bg $bg_img.Permalink }} + {{ else }} + {{ errorf "Couldn't find `%s` in the `assets/media/` folder - please add it." $bg.image }} + {{ end }} + {{ with $bg.image.size }} + {{/* Allow sizes: actual, cover, and contain. */}} + {{ $style_bg = printf "%sbackground-size: %s;" $style_bg (replace . "actual" "auto") }} + {{ end }} + {{ with $bg.image.position }} + {{/* Allow valid CSS positions including left, center, and right. */}} + {{ $style_bg = printf "%sbackground-position: %s;" $style_bg . }} + {{ end }} +{{ end }} + +{{ with $bg.image.filters.brightness }} + {{ $style_bg = printf "%sfilter: brightness(%s);" $style_bg (string .) }} +{{ end }} + +{{ with $block.design.spacing.padding }} + {{ $style_pad := printf "padding: %s;" (delimit . " ") }} + {{ $style = print $style $style_pad }} +{{ end }} + +{{/* Support for clip path (design.clip_path) */}} +{{ with $block.design.clip_path }} + {{ $style_clip_path := printf "clip-path: %s;" . }} + {{ $style = print $style $style_clip_path }} +{{ end }} + +{{ with ($block.design.css_style | default $block.Params.advanced.css_style) }} + {{ $style = print $style . }} +{{ end }} + +{{/* Fix Hugo's ContentBaseName returning wrong file base name when page section is within a bundle. */}} +{{ $hash_id := replace $block.File.ContentBaseName "index" (path.Base .File.Dir) }} + +{{ $widget_args := dict "wcPage" $page "wcBlock" $block "wcIdentifier" $hash_id }} +{{ $css_classes := $block.design.css_class | default $block.Params.advanced.css_class | default "" }} +{{ $extra_attributes := "" }} +{{ $use_container := true }} + +{{/* Special case: Slider widget. */}} +{{ if in (slice "slider") $block_type }} + {{ $css_classes = print $css_classes " carousel slide" }} + {{ $extra_attributes = printf "data-ride=\"carousel\" data-interval=\"%s\"" (cond ($block.design.loop | default true) (string $block.design.interval | default "3000") "false") }} + {{ $use_container = false }} +{{ end }} + +{{ $widget_class := printf "wg-%s" (replace (replace $block_type "." "-") "_" "-") }} + +{{ $widget_config_file := printf "blocks/%s-config.html" $block_type }} +{{ if templates.Exists $widget_config_file }} + {{ $cfg := partial $widget_config_file $widget_args }} + {{ $use_container = $cfg.use_container }} +{{end}} + +{{ $columns := $block.design.columns | default "2" }} +{{ $use_cols := in (slice "collection" "experience" "accomplishments" "contact" "markdown" "tag_cloud" "portfolio") $block_type }} + +{{/* Dedicated child div for bg prevents parallax 100% height issue within new CSS grid page wrapper. */}} +
+
+ {{with $bg_video}}{{end}} +
+ {{if $use_container}}
{{end}} + + {{if $use_cols}} +
+ {{ if $block.Title }} + {{ if eq $columns "1" }} +
+ {{ with $block.Title }}

{{ . | markdownify | emojify }}

{{ end }} + {{ with $block.Params.subtitle }}

{{ . | markdownify | emojify }}

{{ end }} +
+ {{else}} +
+ {{ with $block.Title }}

{{ . | markdownify | emojify }}

{{ end }} + {{ with $block.Params.subtitle }}

{{ . | markdownify | emojify }}

{{ end }} +
+ {{end}} + {{end}} + {{end}} + + {{ partial $block_path $widget_args }} + + {{if $use_cols}} +
+ {{end}} + + {{if $use_container}}
{{end}} +
diff --git a/modules/wowchemy/layouts/partials/landing_page.html b/modules/wowchemy/layouts/partials/landing_page.html new file mode 100644 index 00000000..b772e27f --- /dev/null +++ b/modules/wowchemy/layouts/partials/landing_page.html @@ -0,0 +1,8 @@ +{{/* Notify JS that this is a widget page */}} + + + +{{/* Load Wowchemy blocks */}} +{{ range $index, $block := .Params.sections }} + {{ partial "functions/parse_block_v2" (dict "page" $ "block" $block) }} +{{ end }} diff --git a/starters/notes/content/_index.md b/starters/notes/content/_index.md deleted file mode 100644 index 613da4b4..00000000 --- a/starters/notes/content/_index.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: ✍️ Notes -type: book # Do not modify. -toc: false - -cover: - image: covers/nasa-Q1p7bh3SHj8-unsplash.jpg - caption: NASA ---- - -Welcome to the _Notes_ template! - -The **Notes** starter template empowers you to easily create **personal notes** and **knowledge bases** in a future-proof way. - -- It is your second brain 🧠, stored in future-proof Markdown files -- Supports audio, video, images, math, code, [Mermaid](https://mermaid.live/) diagrams, and [much more](https://wowchemy.com/docs/content/writing-markdown-latex/) -- Edit your notes online in GitHub, or any Git-connected Markdown app such as [Obsidian](https://obsidian.md/) or [Visual Studio Code](https://vscode.dev/) - -## Public vs Private Second Brain - -Choose between **publishing and sharing your knowledge online or creating a private second brain**. - -To create an **open second brain**, share your notes as a website [by deploying the Note template](https://wowchemy.com/hugo-themes/). - -To create a **private second brain** either: - -- After deploying your Notes site above, [password protect your online second brain](https://docs.netlify.com/visitor-access/password-protection/) and configure your GitHub repo as **private** -- [Download this template](https://github.com/wowchemy/hugo-notes-theme) and [run the tool locally](https://wowchemy.com/docs/getting-started/install-hugo-extended/) - -## Example notebook - -{{< cta cta_text="👉 Check out the Machine Learning notebook" cta_link="machine-learning" >}}