Pre-launch: Animation

layouts/index.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<section class="section pb-0">
+<section class="section pb-0" role="banner">
   <div class="container">
     <div class="row justify-content-between align-items-center">
       <div class="col-lg-7 text-center text-lg-start pe-lg-5">
@@ -29,7 +29,7 @@
 </section>
 
 <!-- topics -->
-<section class="section pb-0">
+<section class="section pb-0" role="main">
   <div class="container">
     <h2 class="section-title">{{ i18n "topics" }}</h2>
     <div class="row">
@@ -38,9 +38,9 @@
         <div class="card h-100">
           <div class="card-body py-5">
               
-            <h4 class="card-title h4"><i class="{{ .Params.Icon }}"></i> {{ .Title }}</h4>
+            <h3 class="card-title h4"><i class="{{ .Params.Icon }}"></i> {{ .Title }}</h3>
             <p class="card-text">{{ .Params.Description | markdownify }}</p>
-            <a href="{{ .Permalink }}" class="stretched-link"></a>
+            <a href="{{ .Permalink }}" class="stretched-link" aria-label="{{ .Title }}"></a>
           </div>
         </div>
       </div>

layouts/partials/basic-seo-tools.html

@@ -0,0 +1,168 @@
+<!-- base url -->
+{{ if or (eq site.BaseURL "/") (eq site.BaseURL "http://localhost:1313/") }}
+{{ else }}
+  <base href="{{ .Permalink }}" />
+{{ end }}
+
+
+<!-- checking title -->
+{{ $title := site.Title }}
+<!-- checking page meta title -->
+{{ if .Params.meta_title }}
+  {{ $title = .Params.meta_title }}
+  <!-- checking page title -->
+{{ else if .Params.title }}
+  {{ $title = .Params.title }}
+{{ end }}
+
+
+<!-- checking description -->
+{{ $description := .Summary }}
+{{ if .Params.meta_description }}
+  {{ $description = .Params.meta_description }}
+  <!-- checking page description -->
+{{ else if .Params.description }}
+  {{ $description = .Params.description }}
+  <!-- checking page description -->
+{{ else if site.Params.metadata.description }}
+  {{ $description = site.Params.metadata.description }}
+{{ end }}
+
+
+<!-- checking og image -->
+{{ $imagePath := site.Params.metadata.image }}
+{{ if .Params.meta_image }}
+  {{ $imagePath = .Params.meta_image }}
+  <!-- checking multiple images -->
+{{ else if .Params.images }}
+  {{ range first 1 .Params.images }}
+    {{ $imagePath = . }}
+  {{ end }}
+  <!-- checking single images -->
+{{ else if .Params.image }}
+  {{ $imagePath = .Params.image }}
+{{ end }}
+
+<!-- title -->
+<title>{{ $title }}</title>
+
+<!-- meta noindex -->
+{{ if .Param "noindex" }}
+  <meta name="robots" content="noindex,nofollow" />
+{{ end }}
+
+
+<!-- meta canonical -->
+{{ with .Params.canonical }}
+  <link rel="canonical" href="{{ . }}" itemprop="url" />
+{{ end }}
+
+
+<!-- multilingual SEO optimizations -->
+{{ if .IsTranslated }}
+  {{ range .AllTranslations }}
+    <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}" />
+  {{ end }}
+  <link rel="alternate" hreflang="x-default" href="{{ .Permalink }}" />
+{{ end }}
+
+
+<!-- meta keywords -->
+{{ if .Params.keywords }}
+  <meta name="keywords" content="{{ delimit .Params.keywords `, ` }}" />
+{{ else if site.Params.metadata.keywords }}
+  <meta
+    name="keywords"
+    content="{{ delimit site.Params.metadata.keywords `, ` }}" />
+{{ end }}
+
+
+<!-- meta description -->
+<meta name="description" content="{{ $description }}" />
+
+<!-- meta author -->
+{{ with site.Params.metadata.author }}
+  <meta name="author" content="{{ . }}" />
+{{ end }}
+
+
+<!-- ######### OpenGraph and Twitter image meta ############## -->
+
+<!-- check cdn/static image -->
+{{ if or (hasPrefix $imagePath "http") (fileExists (add `static/` (string $imagePath))) }}
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:image" content="{{ $imagePath | absURL }}" />
+  <meta property="og:image" content="{{ $imagePath | absURL }}" />
+{{ else }}
+  <!-- check cdn/static image -->
+
+  <!-- content and assets image path variable -->
+  {{ $contentImage:= .Resources.GetMatch (printf "*%s*" $imagePath) }}
+  {{ $assetImage:= fileExists (add `assets/` (string $imagePath)) }}
+
+
+  <!-- check image existence -->
+  {{ if or $contentImage $assetImage }}
+    <!-- content or assets folder detection -->
+    {{ if $contentImage }}
+      {{ .Scratch.Set "image-exists" $contentImage }}
+    {{ else if $assetImage }}
+      {{ .Scratch.Set "image-exists" (resources.Get $imagePath) }}
+    {{ end }}
+
+    {{ $image:= .Scratch.Get "image-exists" }}
+
+
+    <!-- image extension -->
+    {{ $imageExt:= path.Ext $image }}
+
+
+    <!-- If not SVG  -->
+    {{ if ne $imageExt `.svg` }}
+      {{ $imageWidth := $image.Width }}
+      {{ $imageHeight := $image.Height }}
+      {{ if (and (gt $imageWidth 144) (gt $imageHeight 144)) }}
+        <meta property="og:image" content="{{ $image.Permalink }}" />
+        <meta name="twitter:image" content="{{ $image.Permalink }}" />
+        <meta
+          name="twitter:card"
+          content="{{- if (and (gt $imageWidth 300) (gt $imageHeight 157) (not (eq $imageWidth $imageHeight))) -}}summary_large_image{{- else -}}summary{{- end -}}" />
+      {{ end }}
+      <!-- /if image gt 144px -->
+      <meta property="og:image:width" content="{{ $imageWidth }}" />
+      <meta property="og:image:height" content="{{ $imageHeight }}" />
+    {{ end }}
+
+
+    <!-- /if not svg -->
+    <meta
+      property="og:image:type"
+      content="image/{{- if eq $imageExt `.svg` -}}
+        svg+xml
+      {{- else -}}
+        {{- replaceRE `^jpg$` `jpeg` $imageExt -}}
+      {{- end -}}" />
+  {{ end }}
+
+
+  <!-- /if image exist -->
+{{ end }}
+<!-- /check cdn/static image -->
+<!-- ######### /OpenGraph and Twitter image meta ############## -->
+
+<!-- ######### OpenGraph others meta ############## -->
+<meta property="og:title" content="{{ $title }}" />
+<meta property="og:description" content="{{ $description }}" />
+<meta property="og:type" content="website" />
+<meta property="og:url" content="{{ .Permalink }}" />
+
+<!-- ########## twitter others meta ############### -->
+<meta name="twitter:title" content="{{ $title }}" />
+<meta name="twitter:description" content="{{ $description }}" />
+
+{{ with site.Params.metadata.twitter }}
+  <meta name="twitter:site" content="@{{ . }}" />
+{{ end }}
+{{ with site.Params.metadata.author }}
+  <meta name="twitter:creator" content="@{{ . }}" />
+{{ end }}