Add paige-* classes and IDs to all HTML structures

master
Will Faught 2 years ago
parent b9650b0209
commit 5e50b4046f

@ -775,16 +775,60 @@ then replace that use of `paige/metadata.html` with your own design.
These optional CSS classes can be defined how you want: These optional CSS classes can be defined how you want:
<dl> <dl>
<dt><code>#paige-container</code></dt>
<dd>The outermost element in the body.</dd>
<dt><code>#paige-copyright</code></dt>
<dd>The copyright in the footer, if any.</dd>
<dt><code>#paige-credit</code></dt>
<dd>The credit in the footer, if any.</dd>
<dt><code>#paige-footer</code></dt>
<dd>The footer element in the container, if any.</dd>
<dt><code>#paige-header</code></dt>
<dd>The header element in the container, if any.</dd>
<dt><code>#paige-main</code></dt>
<dd>The main element in the container.</dd>
<dt><code>#paige-pages</code></dt>
<dd>The pages in the list and term layouts, if any.</dd>
<dt><code>#paige-pagination</code></dt>
<dd>The pagination links in the list and term layouts, if any.</dd>
<dt><code>.paige-article</code></dt>
<dd>The page article.</dd>
<dt><code>.paige-authors</code></dt>
<dd>The page authors, if any.</dd>
<dt><code>.paige-content</code></dt>
<dd>The page content, if any.</dd>
<dt><code>.paige-date</code></dt>
<dd>The page date, if any.</dd>
<dt><code>.paige-date-header</code></dt>
<dd>Date headers in list and term layouts.</dd>
<dt><code>.paige-description</code></dt>
<dd>The page description, if any.</dd>
<dt><code>.paige-draft</code></dt> <dt><code>.paige-draft</code></dt>
<dd>Applied to the title of draft pages in the list and term default layouts.</dd> <dd>Applied to the title of draft pages in the list and term layouts.</dd>
<dt><code>.paige-expired</code></dt> <dt><code>.paige-expired</code></dt>
<dd>Applied to the title of expired pages in the list and term default layouts.</dd> <dd>Applied to the title of expired pages in the list and term layouts.</dd>
<dt><code>.paige-future</code></dt> <dt><code>.paige-future</code></dt>
<dd>Applied to the title of future pages in the list and term default layouts.</dd> <dd>Applied to the title of future pages in the list and term layouts.</dd>
<dt><code>.paige-metadata</code></dt>
<dd>The page metadata section.</dd>
<dt><code>.paige-modified</code></dt> <dt><code>.paige-modified</code></dt>
<dd>Applied to the title of modified pages in the list and term default layouts.</dd> <dd>Applied to the title of modified pages in the list and term layouts.</dd>
<dt><code>.paige-page</code></dt>
<dd>A page in the pages in the list and term layouts, if any.</dd>
<dt><code>.paige-published</code></dt> <dt><code>.paige-published</code></dt>
<dd>Applied to the title of published pages in the list and term default layouts.</dd> <dd>Applied to the title of published pages in the list and term layouts.</dd>
<dt><code>.paige-summary</code></dt>
<dd>The page summary, if any.</dd>
<dt><code>.paige-reading-time</code></dt>
<dd>The page reading time, if any.</dd>
<dt><code>.paige-terms-inner</code></dt>
<dd>The page terms, if any.</dd>
<dt><code>.paige-terms-outer</code></dt>
<dd>The container of the page terms, if any.</dd>
<dt><code>.paige-title</code></dt>
<dd>The page title, if any.</dd>
<dt><code>.paige-toc</code></dt>
<dd>The page table of contents, if any.</dd>
<dt><code>.paige-unpublished</code></dt> <dt><code>.paige-unpublished</code></dt>
<dd>Applied to the title of unpublished (draft, expired, future) pages in the list and term default layouts.</dd> <dd>Applied to the title of unpublished (draft, expired, future) pages in the list and term default layouts.</dd>
</dl> </dl>

@ -13,12 +13,12 @@
{{ partial "paige/body-first.html" $page }} {{ partial "paige/body-first.html" $page }}
{{ end }} {{ end }}
<div class="container flex-fill"> <div class="container flex-fill" id="paige-container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
{{ partial "paige/header.html" $page }} {{ partial "paige/header.html" $page }}
<main> <main id="paige-main">
{{ if templates.Exists "partials/paige/main-first.html" }} {{ if templates.Exists "partials/paige/main-first.html" }}
{{ partial "paige/main-first.html" $page }} {{ partial "paige/main-first.html" $page }}
{{ end }} {{ end }}

@ -1,6 +1,34 @@
{{ $page := . }} {{ $page := . }}
<article> {{ $class := slice "paige-article" }}
{{ $draft := $page.Draft }}
{{ $expired := and $page.ExpiryDate (lt $page.ExpiryDate now) }}
{{ $future := and $page.PublishDate (gt $page.PublishDate now) }}
{{ $modified := and $page.PublishDate $page.Lastmod (lt $page.PublishDate $page.Lastmod) }}
{{ if $draft }}
{{ $class = $class | append "paige-draft" "paige-unpublished" }}
{{ end }}
{{ if $expired }}
{{ $class = $class | append "paige-expired" "paige-unpublished" }}
{{ end }}
{{ if $future }}
{{ $class = $class | append "paige-future" "paige-unpublished" }}
{{ end }}
{{ if $modified }}
{{ $class = $class | append "paige-modified" }}
{{ end }}
{{ if not (or $draft $expired $future) }}
{{ $class = $class | append "paige-published" }}
{{ end }}
{{ $class = delimit ($class | uniq) " " }}
<article class="{{ $class }}">
<div class="align-items-center d-flex flex-column mb-0"> <div class="align-items-center d-flex flex-column mb-0">
{{ partial "paige/metadata.html" $page }} {{ partial "paige/metadata.html" $page }}
{{ partial "paige/toc.html" $page }} {{ partial "paige/toc.html" $page }}

@ -6,17 +6,17 @@
{{ $last := templates.Exists "partials/paige/footer-last.html" }} {{ $last := templates.Exists "partials/paige/footer-last.html" }}
{{ if or $copyright $credit $first $last }} {{ if or $copyright $credit $first $last }}
<footer> <footer id="paige-footer">
{{ if $first }} {{ if $first }}
{{ partial "paige/footer-first.html" . }} {{ partial "paige/footer-first.html" . }}
{{ end }} {{ end }}
{{ if $copyright }} {{ if $copyright }}
<p class="{{ if $credit }} mb-0 {{ end }} text-center text-secondary">{{ $copyright | markdownify }}</p> <p class="{{ if $credit }} mb-0 {{ end }} text-center text-secondary" id="paige-copyright">{{ $copyright | markdownify }}</p>
{{ end }} {{ end }}
{{ if $credit }} {{ if $credit }}
<p class="text-center"><a class="link-secondary text-decoration-none" href="https://github.com/willfaught/paige">Paige Theme</a></p> <p class="text-center"><a class="link-secondary text-decoration-none" href="https://github.com/willfaught/paige" id="paige-credit">Paige Theme</a></p>
{{ end }} {{ end }}
{{ if $last }} {{ if $last }}

@ -5,7 +5,7 @@
{{ $menu := site.Menus.main }} {{ $menu := site.Menus.main }}
{{ if or $first $last $menu }} {{ if or $first $last $menu }}
<header> <header id="paige-header">
{{ if $first }} {{ if $first }}
{{ partial "paige/header-first.html" $page }} {{ partial "paige/header-first.html" $page }}
{{ end }} {{ end }}

@ -1,22 +1,22 @@
{{ $page := . }} {{ $page := . }}
{{ $authors := cond ($page.Param "paige.main.metadata.authors.hide" | not) (partial "paige/func-authors.html" $page) "" }} {{ $authors := cond ($page.Param "paige.main.metadata.authors.hide" | not) (partial "paige/func-authors.html" $page) "" }}
{{ $authorsclass := $page.Param "paige.main.metadata.authors.class" | default "text-center text-secondary" }} {{ $authorsclass := $page.Param "paige.main.metadata.authors.class" | default "paige-authors text-center text-secondary" }}
{{ $categories := cond ($page.Param "paige.main.metadata.terms.hide" | not) ($page.Params.categories | default slice) slice | uniq }} {{ $categories := cond ($page.Param "paige.main.metadata.terms.hide" | not) ($page.Params.categories | default slice) slice | uniq }}
{{ $date := cond ($page.Param "paige.main.metadata.date.hide" | not) $page.PublishDate "" }} {{ $date := cond ($page.Param "paige.main.metadata.date.hide" | not) $page.PublishDate "" }}
{{ $dateclass := $page.Param "paige.main.metadata.date.class" | default "text-center text-secondary" }} {{ $dateclass := $page.Param "paige.main.metadata.date.class" | default "paige-date text-center text-secondary" }}
{{ $dateformat := $page.Param "paige.main.metadata.date.format" | default ":date_long" }} {{ $dateformat := $page.Param "paige.main.metadata.date.format" | default ":date_long" }}
{{ $description := cond ($page.Param "paige.main.metadata.description.hide" | not) ($page.Description | markdownify) "" }} {{ $description := cond ($page.Param "paige.main.metadata.description.hide" | not) ($page.Description | markdownify) "" }}
{{ $descriptionclass := $page.Param "paige.main.metadata.description.class" | default "lead text-center" }} {{ $descriptionclass := $page.Param "paige.main.metadata.description.class" | default "lead paige-description text-center" }}
{{ $nogap := "mb-0" }} {{ $nogap := "mb-0" }}
{{ $readingtime := cond ($page.Param "paige.main.metadata.reading_time.hide" | not) $page.ReadingTime "" }} {{ $readingtime := cond ($page.Param "paige.main.metadata.reading_time.hide" | not) $page.ReadingTime "" }}
{{ $readingtimeclass := $page.Param "paige.main.metadata.reading_time.class" | default "text-center text-secondary" }} {{ $readingtimeclass := $page.Param "paige.main.metadata.reading_time.class" | default "paige-reading-time text-center text-secondary" }}
{{ $sectionclass := "paige-metadata w-100" }} {{ $sectionclass := "paige-metadata w-100" }}
{{ $tags := cond ($page.Param "paige.main.metadata.terms.hide" | not) ($page.Params.tags | default slice) slice | uniq }} {{ $tags := cond ($page.Param "paige.main.metadata.terms.hide" | not) ($page.Params.tags | default slice) slice | uniq }}
{{ $termsinnerclass := $page.Param "paige.main.metadata.terms.inner_class" | default "badge text-bg-secondary text-decoration-none" }} {{ $termsinnerclass := $page.Param "paige.main.metadata.terms.inner_class" | default "badge paige-terms-inner text-bg-secondary text-decoration-none" }}
{{ $termsouterclass := $page.Param "paige.main.metadata.terms.outer_class" | default "text-center" }} {{ $termsouterclass := $page.Param "paige.main.metadata.terms.outer_class" | default "paige-terms-outer text-center" }}
{{ $title := cond ($page.Param "paige.main.metadata.title.hide" | not) ($page.Title | markdownify) "" }} {{ $title := cond ($page.Param "paige.main.metadata.title.hide" | not) ($page.Title | markdownify) "" }}
{{ $titleclass := $page.Param "paige.main.metadata.title.class" | default "display-5 fw-bold text-center" }} {{ $titleclass := $page.Param "paige.main.metadata.title.class" | default "display-5 fw-bold paige-title text-center" }}
{{ $titlelink := $page.Params.link }} {{ $titlelink := $page.Params.link }}
{{ $titlepage := $page.RelPermalink }} {{ $titlepage := $page.RelPermalink }}

@ -1,7 +1,5 @@
{{ $page := . }} {{ $page := . }}
{{ $class := "mb-0 text-center" }}
{{ if $page.Pages }} {{ if $page.Pages }}
{{ if $page.Param "paige.list.content.show" }} {{ if $page.Param "paige.list.content.show" }}
{{ $p := $page.Paginate $page.Pages }} {{ $p := $page.Paginate $page.Pages }}
@ -12,7 +10,7 @@
{{ end }} {{ end }}
</section> </section>
{{ if or $p.HasPrev $p.HasNext }} {{ if or $p.HasPrev $p.HasNext }}
<section> <section id="paige-pagination">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
{{ partial "paige/pagination.html" $page }} {{ partial "paige/pagination.html" $page }}
</div> </div>
@ -20,35 +18,35 @@
{{ end }} {{ end }}
{{ else }} {{ else }}
{{ $p := $page.Paginate ($page.Pages.ByDate.Reverse.GroupByDate "January 2006") }} {{ $p := $page.Paginate ($page.Pages.ByDate.Reverse.GroupByDate "January 2006") }}
<section> <section id="paige-pages">
{{ range $p.PageGroups }} {{ range $p.PageGroups }}
{{ if $page.Param "paige.list.date_header.hide" | not }} {{ if $page.Param "paige.list.date_header.hide" | not }}
<p class="{{ $.Param `paige.list.date_header.class` | default `h5 text-center` }}">{{ .Key }}</p> <p class="{{ $.Param `paige.list.date_header.class` | default `h5 paige-date-header text-center` }}">{{ .Key }}</p>
{{ end }} {{ end }}
{{ range .Pages }} {{ range .Pages }}
{{ $authors := cond ($page.Param "paige.list.authors.hide" | not) (partial "paige/func-authors.html" .) "" }} {{ $authors := cond ($page.Param "paige.list.authors.hide" | not) (partial "paige/func-authors.html" .) "" }}
{{ $authorsclass := $page.Param "paige.list.authors.class" | default (print $class " text-secondary") }} {{ $authorsclass := $page.Param "paige.list.authors.class" | default "mb-0 paige-authors text-center text-secondary" }}
{{ $categories := cond ($page.Param "paige.list.terms.hide" | not) (.Params.categories | default slice) slice | uniq }} {{ $categories := cond ($page.Param "paige.list.terms.hide" | not) (.Params.categories | default slice) slice | uniq }}
{{ $date := cond ($page.Param "paige.list.date.hide" | not) .PublishDate "" }} {{ $date := cond ($page.Param "paige.list.date.hide" | not) .PublishDate "" }}
{{ $dateclass := $page.Param "paige.list.date.class" | default (print $class " text-secondary") }} {{ $dateclass := $page.Param "paige.list.date.class" | default "mb-0 paige-date text-center text-secondary" }}
{{ $dateformat := $page.Param "paige.list.date.format" | default ":date_long" }} {{ $dateformat := $page.Param "paige.list.date.format" | default ":date_long" }}
{{ $description := cond ($page.Param "paige.list.description.hide" | not) (.Description | markdownify) "" }} {{ $description := cond ($page.Param "paige.list.description.hide" | not) (.Description | markdownify) "" }}
{{ $descriptionclass := $page.Param "paige.list.description.class" | default $class }} {{ $descriptionclass := $page.Param "paige.list.description.class" | default "mb-0 paige-description text-center" }}
{{ $draft := .Draft }} {{ $draft := .Draft }}
{{ $expired := and .ExpiryDate (lt .ExpiryDate now) }} {{ $expired := and .ExpiryDate (lt .ExpiryDate now) }}
{{ $flags := slice }} {{ $flags := slice }}
{{ $future := and .PublishDate (gt .PublishDate now) }} {{ $future := and .PublishDate (gt .PublishDate now) }}
{{ $modified := and .PublishDate .Lastmod (lt .PublishDate .Lastmod) }} {{ $modified := and .PublishDate .Lastmod (lt .PublishDate .Lastmod) }}
{{ $readingtime := cond ($page.Param "paige.list.reading_time.hide" | not) .ReadingTime "" }} {{ $readingtime := cond ($page.Param "paige.list.reading_time.hide" | not) .ReadingTime "" }}
{{ $readingtimeclass := $page.Param "paige.list.reading_time.class" | default (print $class " text-secondary") }} {{ $readingtimeclass := $page.Param "paige.list.reading_time.class" | default "mb-0 paige-reading-time text-center text-secondary" }}
{{ $sectionclass := $page.Param "paige.list.section.class" | default "mb-3 w-100" }} {{ $sectionclass := $page.Param "paige.list.section.class" | default "mb-3 paige-page w-100" }}
{{ $summary := cond ($page.Param "paige.list.summary.hide" | not) (.Summary | strings.TrimPrefix "<p>" | strings.TrimSuffix "</p>" | htmlUnescape | plainify) "" }} {{ $summary := cond ($page.Param "paige.list.summary.hide" | not) (.Summary | strings.TrimPrefix "<p>" | strings.TrimSuffix "</p>" | htmlUnescape | plainify) "" }}
{{ $summaryclass := $page.Param "paige.list.summary.class" | default (print "fst-italic " $class) }} {{ $summaryclass := $page.Param "paige.list.summary.class" | default "fst-italic mb-0 paige-summary text-center" }}
{{ $tags := cond ($page.Param "paige.list.terms.hide" | not) (.Params.tags | default slice) slice | uniq }} {{ $tags := cond ($page.Param "paige.list.terms.hide" | not) (.Params.tags | default slice) slice | uniq }}
{{ $termsinnerclass := $page.Param "paige.list.terms.inner_class" | default "badge text-bg-secondary text-decoration-none" }} {{ $termsinnerclass := $page.Param "paige.list.terms.inner_class" | default "badge paige-terms-inner text-bg-secondary text-decoration-none" }}
{{ $termsouterclass := $page.Param "paige.list.terms.outer_class" | default $class }} {{ $termsouterclass := $page.Param "paige.list.terms.outer_class" | default "mb-0 paige-terms-outer text-center" }}
{{ $title := cond ($page.Param "paige.list.title.hide" | not) (.Title | markdownify) "" }} {{ $title := cond ($page.Param "paige.list.title.hide" | not) (.Title | markdownify) "" }}
{{ $titleclass := $page.Param "paige.list.title.class" | default $class }} {{ $titleclass := $page.Param "paige.list.title.class" | default "mb-0 paige-title text-center" }}
{{ $titlelink := .RelPermalink }} {{ $titlelink := .RelPermalink }}
{{ if $draft }} {{ if $draft }}
@ -123,7 +121,7 @@
{{ end }} {{ end }}
</section> </section>
{{ if or $p.HasPrev $p.HasNext }} {{ if or $p.HasPrev $p.HasNext }}
<section> <section id="paige-pagination">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
{{ partial "paige/pagination.html" $page }} {{ partial "paige/pagination.html" $page }}
</div> </div>

Loading…
Cancel
Save