snippet

• Implement the environments
• Add the schema template in the head

Re-enable the cache for the partial

Strategy

Use 100% widgets for the main part of the footer.
Hard coded copyright part.

Content

• About,
• Links,
• Follow-me,
• Licences ? (in the links)

Generation (Go)

• Config entries structure,
• Implement the widget Page,
• Same code for each section => Internal template ?
• Robustness if the configuration is not done properly,
• Implement the widget Folllow-me,
• Others ???

Example

• Frequency: Copyright, and follow-me in the bottom
• Blogy

References:

• (Netlify) Hugo tips: How to create author pages
• Universe theme

See Blogy for the style guide page.

• 3 to 4 colors max,
• the text color is equal to the darker background color,
• Title are in the same colors than the text (even when they are links)
• One of the color is very very light

Possible palettes

• Coolors 1
• Coolors 2

##Todo

Way 1

• Setup Primary, secondary color,
• Check the consequences,

Way 2

• Search the term color in the Boostrap variables file,
• Set these variables to the theme color.

Two tracks

• HTML 5 / CSS
• Generation

HTML 5 / CSS

• Remove borders,
• Overall structure,
• Styles,
• Centralization of the gallery without centralize thumbnails => Move to the next version

Generation

• Rename the thumbs ? => No possible

• Parameters (to be improve ?) => Move to the next version

• Robustness (to be tested) => Move to the next version

• Do we have a better way to store the caption than the Front-matter ?

• Hugo Short Gallery
  * Define the ID of the gallery automatically
  * Sidecar file

• Hugo Easy Gallery
  * Style with auto-hide caption, and zoom

• Documentation (list of fields used, for example)
• Test the limit field in config.toml
• Review the LicenceURL field

List of possible widgets

Common

• Re-alignment of all widgets on the parameter management
• Add a parameter in config.toml for cached (and put default for some of them in the code, but how ?).
• Widgetify the bottom of the single template
• Heading level as parameter ?
• Remove card-title from the heading of popular-posts, related-posts, sections, and last-posts
• Display errors if something is wrong, or nothing can be displayed (auto-documentation ?)
• Do we merge post and page ? method = slug or title value = name of the page ...

{{- $heading_level := .param.heading | default 3 | int -}}
{{- $heading_title := prinf "h%d" $heading_level -}}
{{- $heading_subtitle := prinf "h%d" (add $heading_level 1) -}}

<{{- $heading_title -}}>{{- $title -}}</{{- $heading_title -}}>
<{{- $heading_subtitle -}}>{{- .Title -}}</{{- $heading_subtitle -}}>

Random

{{ range first 3 (shuffle (where .Site.RegularPages "Section" "blog")) }}

Default values

How to implement default widgets for footer, and single /!\

• What means default values ?
• Which pages can be displayed by default ?
• Move back the default to the config.toml ? or keep JSON in data (at site level, not theme)
• Default can be configured => Last posts, sections, and related-posts, featured or Edito
• Bottomline => Can be configured also (tags, ..., )
• But the footer cannot.

Last posts

• More link (but to which link ? Create an "archive" page for listing all the posts ?)

Post

• Select a post per field
• Select a post per tag

Follow-me

• Format CSS to be done => Style for the widget itself, splitted from the style of where it is
• Parameters: full-inline, or vertical ?

Related posts

• Two versions: 1 using grid structure, with images, and the other using ul / li ?
• manage class for columns
• What happen if related posts are not activated ?
• Two styles for the two versions

Most popular posts

• File format => Ok. JSON mandatory, as CSV cannot be in /data.
• Two versions: 1 using grid structure, with images, and the other using ul / li ?
• Robustness test: bad file name
• Robustness test: bad post id
• manage class for columns
• Two styles for the two versions

For displaying

1. Summary
2. Image
3. Content (without the summary)

{{ $both := split .RawContent "<!--more-->" }}
<div class="summary">{{ index $both 0 | markdownify }}</div>
<div class="content">{{ index $both 1 | markdownify }}</div>```

How to Open a Link in a New Tab – HTML target blank Attribute Explained https://www.freecodecamp.org/news/how-to-open-a-link-in-a-new-tab/

Default values / Parameters

• Build the file structure
• baseof
• RSS
• Single
• contact
• List
• index
• indx.webmanifest
• search
• tags.terms
• authors.terms
• Render-image
• Render-link
• sitepage/single
• breadcrumb.html
• breadcrumb_with_paginator.html => to be removed
• class-columns.html
• favicons.html
• footer.html
• head.html
• header.html
• headline.html
• image.html
• js.html
• meta.html
• opengraph.html
• pagination-single.html
• piwikpro.html
• schema-common.html
• schema.html
• search-form.html
• styles.html
• twitter.html
• 404

Homepage

• Sections : Can we add an icon ? (parameter in a front-matter)
• Add a widget to get the information of the homepage (root _index.md)

Icons

• camera,
• blog: pencil, pencil-square, vector-pen
• architecture: tools, wrench-adjustable-circle, grid-3x3-gap
• project: bar-chart-steps

Widgets

• Author-list widget (for the home page for example) => with a link to the author's page.
• Last posts per section,
• Last galleries,
• Default values (how to do),
• Do we merge post and page ? method = slug or title value = name of the page ...
• Series or related ? => in order to have two columns (with tags, and share)

Lists

• Do we display the summary and / or the description ?

Single

• Markup for headings ?

<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="anchor-header">{{ .Text | safeHTML }} <a class="anchor-link" href="#{{ .Anchor | safeURL }}" aria-label="{{ .Text | safeHTML }}">
<svg xmlns="http://www.w3.org/2000/svg" class="anchor-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
  <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
</svg>
</a></h{{ .Level }}>

Gallery

• Centralization of the gallery without centralize thumbnails
• Parameters (to be improve ?)
• Robustness (to be tested)

Social media

• Add WhatsApp, with the test of mobile,
• Remove comments on socials media in the bootstrap icon font
• Add a mobile detection for displaying WhatsApp, Pocket, ...

Common

• Giscus for comments
• (Next version) Extract référence to box them in a widget (or card) (but the reference in the front-matter) => list of references
• Same for the licences if we use an image CC SA
• Use of reflect.IsSlice (especially for images),
• Remove themecolor from the head ???
• A single file for all default values ? toml to have everything like .data.defaults.<value>
• Tests with different versions (menu to select the site, and the version, or command line). Tests from 0.83 to .98.

Structure

• Edito
• Latest,
• Most popular
• Categories (with description)
• Default values

Styles

• class / id structure: for each section: class="homepage-widget" id="home-xxx"
• Add vertical spaces between the widgets => Make the vertical spaces responsive
• What about the titles ?
• Try to add borders to the cards => Remove

Others

• Bug fix: row-cols-0
• Bug Fix: last posts empty

• Check the option we could put in the markup,
• Typically how to display EXIF data,
• Check the sidecar JSON file for the images

Shortcodes used in the current content

Shortcodes completion

• imggallery,
• attachments,
• tags-list,
• series-list,
• categories-list,
• sections-list
• gdocs => First check if this shortcode is really used.

General

• Check .HasShortcode (for loading the scripts only when needed)
• Is there any shortcodes fallbacks? (if the shortcodes doesn't exists ?) => No
• for all widgets including lists and titles, do we put options for the heading tags (h2, h3, h4)

Image gallery

• Review the format, get best practices for HTML 5 code,
• Include EXIF extraction

attachments

• Add the column title,
• Add parameter for selecting the field we want (title, filename, size, icon, with default, all of these info
• Change the approach (ul/li list, as inner content, as fallback ?)

Todo

• Internal templates vs theme templates: improve: .Site.Params.OpenGraph = Internal | theme | none (default internal)
• Same for Twitter, Facebook, Schema,
• RSS feeds => lien vers la section, et/ou (?) vers la home ?
• manifest file (can we rename the file after the processing ? automatically ?)

Documentation

• Head
• Get the last post of a section

Sub-pages / metalinks

Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de Google's webmaster tools - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.

CleanWhite #

<!--  Custom CSS  -->
    {{ range .Site.Params.custom_css -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
    {{- end }}

Same for JS.

{{ if .Params.thumbnail }}
    <meta property="og:image" content="{{ .Site.BaseURL }}{{ .Params.thumbnail }}">
    <meta property="twitter:image" content="{{ .Site.BaseURL }}{{ .Params.thumbnail }}" />
    {{ else }}
    <meta property="og:image" content="{{ .Site.BaseURL }}/{{ .Site.Params.header_image }}">
    <meta property="twitter:image" content="{{ .Site.BaseURL }}/{{ .Site.Params.header_image }}" />
    {{ end }}

Same for title, description, ...

Universal

Use of their own code for Facebook and Twitter.

Ananke #

Check if we are on production or not.

List of media to be implemented

Todo

• Tests
• Review the list of media (Wix, Tumblr, Dig, really used ?
• Be careful about the icons
• Review the Facebook link
• Remove Whatsapp from the list => Move to the next version

Technical part

• CSS-Tricks

Facebook

https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fstackoverflow.com%2Fq%2F20956229%2F1101509&picture=http%3A%2F%2Fwww.applezein.net%2Fwordpress%2Fwp-content%2Fuploads%2F2015%2F03%2Ffacebook-logo.jpg&title=A+nice+question+about+Facebook&quote=Does+anyone+know+if+there+have+been+recent+changes+which+could+have+suddenly+stopped+this+from+working%3F&description=Apparently%2C+the+accepted+answer+is+not+correct.

Content

• Author description / Bio
• Site description
• [ ]

Common

• Review the card strategy for widgets
• Replace .Site.x and $.Site.x with site.x.
• Favicons

Possible approach

<div class="col">
    <aside class="widget">
        <div class="widget-inner">
            <img class="img-fluid widget-img" />
            <hx class="widget-title"></hx>
            <div class="widget-content"></div>
        </div>
    </aside>
</div>

Author list

• Assess some other themes to see how authors are managed
• Clean-up the front-matter of the /content/authors/_index.md, and /content/authors/<author>/_index.md
• Test all authors pages
• Remove comments on socials media in the bootstrap icon font => Next version

Homepage

• Try to reduce the number of posts to 3
• Add series or authors ?
• Align the widgets mechanism with the the one used in bottomline => Use a common template ? (with the config, and default ?)

Footer

• Improve the content (on the right mainly)
• Align the widgets mechanism with the one done in bottomline
• Licence policy to show explicitely in the footer
• Link to the theme

Possible structure

• Top
  • Series
  • Tags (simplified view ? => flat tag cloud order by count) => Tags cloud is no more used
  • logo
  • follow-me
• Main
  • About
  • Links: contact, legals, development, theme
  • See Ministry of Type

Is there a way to use list group ? No
Use standard CSS styles to manage the ul/li lists

Meta

meta = { "top" = { 1 = "section" }, "middle" = { 1 = "date", 2 = "reading" }, "bottom" = { 1 = "tags", 2 = "series"  } }
[params.single.meta]
    top       =  { 1 = "section" }
    middle  = { 1 = "date", 2 = "reading" }
    bottom = { 1 = "tags", 2 = "series"  }

To be used

{{- partial "partials/meta.html" (dict "context" . "meta" .meta.top ) -}}

Single

• Try to build something like the Ministry of Type
• Meta parameters
• Improve the style, remove the no wrap, align-right, display: block, ...
• Finalize the bottomline (related, series, what if no series ? => Popular-posts ? last-posts ?)
• Table of content => To be done later
• (Next version) Extract référence to box them in a widget (or card) (but the reference in the front-matter)
• Same for the licences if we use an image CC SA

<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="anchor-header">{{ .Text | safeHTML }} <a class="anchor-link" href="#{{ .Anchor | safeURL }}" aria-label="{{ .Text | safeHTML }}">
<svg xmlns="http://www.w3.org/2000/svg" class="anchor-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
  <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
  <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
</svg>
</a></h{{ .Level }}>

Lists

• Do we display the summary and / or the description ?
• Comments integration

Styles

• Styles for Print
• Update the color scheme (gray, black, and red)

SEO, and HEAD

• Google webmaster tool
• Bing webmaster tool => next version
• Sitemap.xml (do we need something in robots.txt ?)
• Production environment check
• PiwikPro

Checking the environment

{{ $production := eq (getenv "HUGO_ENV") "production" | or (eq site.Params.env "production") }}
{{ $production := eq (getenv "HUGO_ENV") "production" | or hugo.IsPoduction }}

Different color according the environment

A parameter to enable this behavior.

 <body class="ma0 {{ $.Param "body_classes"  | default "avenir bg-near-white"}}{{ with getenv "HUGO_ENV" }} {{ . }}{{ end }}">

• Review the index.md at root level
• Push edito to the blog part
• Work on a text for the home page

• Title
• Description
• Summary, and content

Actions / steps

• Clean the content on the existing blog
  * Wrong or missing images,
  * Size of the logo images must fit with the ratio selected
• Create the content on the existing blog
  * Edito
• Review the size of the images(how to get the list ?
• Review the licences of the images (exif tool ?)

When to update the widgets content, licences (page to bundle), search page, ...

Content

• edito-20210401
• edito-20210501
• edito-20210628
• edito-20211121
• edito-20220104
• edito-20220227
• edito-20220522
• typography
• developpements
• licences
• mentions-legales
• content/pages
• search
• data/popularposts.json
• static/assets/img/creative_commons.png
• static/assets/img/site-logo-old.png
• static/assets/img/site-logo_small.png
• images manquantes ou mauvaises (section photo)
• Poids des images
• Licence sur toutes les images (sauf les entetes, et les "externes")

Head

• Google verify (webmastertools) ? google-site-verification

config.toml