add tella theme

2023-08-07 10:59:23 +02:00
parent 35bc0c2cac
commit e203dc7597
107 changed files with 4495 additions and 0 deletions
--- a/themes/tella/layouts/404.html
+++ b/themes/tella/layouts/404.html
--- a/themes/tella/layouts/_default/baseof.html
+++ b/themes/tella/layouts/_default/baseof.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+  {{- partial "head.html" . -}}
+  {{ block "meta_tags" . }}{{end}}
+</head>
+
+<body class="flex flex-col min-h-screen">
+  <main class="flex-grow">
+    {{- partial "header.html" . -}}
+    <div class="scroll-top rounded-full">
+      <span class="icon-keyboard_arrow_up text-2xl"></span>
+    </div>
+    {{- block "main" . }}{{- end }}
+  </main>
+  {{- partial "footer.html" . -}}
+</body>
+
+</html>
--- a/themes/tella/layouts/_default/list.html
+++ b/themes/tella/layouts/_default/list.html
@@ -0,0 +1,48 @@
+{{ define "meta_tags" }}
+
+<meta property="og:site_name" content="{{ .Site.Title }}" />
+<meta property="og:title" content="{{ .Title }} | {{ .Site.Title }}" />
+<meta property="og:type" content="website" />
+<meta property="og:url" content="{{ .Permalink }}" />
+<meta property="og:locale" content="ja_JP" />
+<meta name="twitter:card" content="summary_large_image">
+<meta property="twitter:title" content="{{ .Title }}">
+
+{{ if .Params.image }}
+{{ with .Params.image }}
+<meta property="og:image" content="{{ . | absURL }}">
+<meta property="og:image:url" content="{{ . | absURL }}">
+{{ end }}
+{{ else }}
+<meta property="og:image" content="{{ .Site.Params.homepage_meta_tags.meta_og_image | absURL }}">
+<meta property="og:image:url" content="{{ .Site.Params.homepage_meta_tags.meta_og_image | absURL }}">
+{{ end }}
+
+{{- if .Description }}
+<meta property="og:description" content="{{ .Description }}" />
+<meta property="twitter:description" content="{{ .Description }}" />
+{{- else if .Summary }}
+<meta property="og:description" content="{{ .Summary }}" />
+<meta property="twitter:description" content="{{ .Summary }}" />
+{{- else if .Site.Params.description }}
+<meta property="og:description" content="{{ .Site.Params.description }}" />
+<meta property="twitter:description" content="{{ .Site.Params.description }}" />
+{{- end }}
+
+{{ end }}
+
+{{ define "main" }}
+<div class="mx-auto my-10 max-w-6xl">
+  <div class="mx-3 col-span-3 lg:col-span-2 px-2">
+    <h1 class="title text-5xl mb-4">{{.Title}}</h1>
+    <div class="content py-1">{{.Content}}</div>
+    {{ $paginator := .Paginate (where .Data.Pages "Type" "in" site.Params.mainSections) 6 }}
+    {{ range $paginator.Pages }}
+    <a href="{{ .Permalink }}">
+      <div>{{ partial "summary.html" . }}</div>
+    </a>
+    {{ end }}
+  </div>
+  {{ partial "paginator.html" . }}
+</div>
+{{ end }}
--- a/themes/tella/layouts/_default/single.html
+++ b/themes/tella/layouts/_default/single.html
@@ -0,0 +1,41 @@
+{{ define "meta_tags" }}
+
+<meta property="og:site_name" content="{{ .Site.Title }}" />
+<meta property="og:title" content="{{ .Title }} | {{ .Site.Title }}" />
+<meta property="og:type" content="website" />
+<meta property="og:url" content="{{ .Permalink }}" />
+<meta property="og:locale" content="ja_JP" />
+<meta name="twitter:card" content="summary_large_image">
+<meta property="twitter:title" content="{{ .Title }}">
+
+{{ if .Params.image }}
+{{ with .Params.image }}
+<meta property="og:image" content="{{ . | absURL }}">
+<meta property="og:image:url" content="{{ . | absURL }}">
+{{ end }}
+{{ else }}
+<meta property="og:image" content="{{ .Site.Params.homepage_meta_tags.meta_og_image | absURL }}">
+<meta property="og:image:url" content="{{ .Site.Params.homepage_meta_tags.meta_og_image | absURL }}">
+{{ end }}
+
+{{- if .Description }}
+<meta property="og:description" content="{{ .Description }}" />
+<meta property="twitter:description" content="{{ .Description }}" />
+{{- else if .Summary }}
+<meta property="og:description" content="{{ .Summary }}" />
+<meta property="twitter:description" content="{{ .Summary }}" />
+{{- else if .Site.Params.description }}
+<meta property="og:description" content="{{ .Site.Params.description }}" />
+<meta property="twitter:description" content="{{ .Site.Params.description }}" />
+{{- end }}
+
+{{ end }}
+
+{{ define "main" }}
+<div class="mx-auto my-10 max-w-6xl">
+  <div class="mx-3 col-span-3 lg:col-span-2 px-2">
+    <h1 class="title text-5xl mb-4">{{.Title}}</h1>
+    <div class="content prose md:prose-lg lg:prose-xl max-w-none py-1">{{.Content}}</div>
+  </div>
+</div>
+{{ end }}
--- a/themes/tella/layouts/blog/single.html
+++ b/themes/tella/layouts/blog/single.html
@@ -0,0 +1,106 @@
+{{ define "meta_tags" }}
+<meta property="og:title" content="{{site.Title}}{{if not .IsHome}} | {{.Title}}{{end}}" />
+{{ partial "seo/print.html" . }}
+
+{{- with .Site.Params.facebookAppId }}
+<meta property="fb:app_id" content="{{ . }}" />
+{{- end }}
+<meta name="twitter:title" content="{{ .Title }}">
+<link rel="preload" href='{{ "/css/sweetalert2.min.css" | relURL }}' as="style"
+    onload="this.onload=null;this.rel='stylesheet'">
+{{ end }}
+{{ define "main" }}
+<div class="mx-auto my-10 max-w-6xl">
+    <div class="mx-3 col-span-3 lg:col-span-2 px-2">
+        <h1 class="title text-5xl font-bold mb-3">{{.Title}}</h1>
+        <section class="mb-4 text-lg">
+            <h4 id="date" class="flex flex-row items-center"><span class="icon-access_time text-2xl mr-2"></span>
+                {{ .Date.Format "2006/01/02" }} </h4>
+            {{ if .Params.author }}
+            <h4 class="flex flex-row items-center"><span class="icon-person text-2xl mr-2"></span>{{.Params.author}}
+            </h4>
+            {{ end }}
+            {{ with .Params.categories }}
+            <div id="categories" class="flex flex-row items-center">
+                <span class="icon-folder text-2xl mr-1"></span>
+                {{ range . }}
+                <span
+                    class="inline-flex py-1 leading-4 content-center justify-center px-1 text-blue-600 hover:text-blue-800 duration-200"><a
+                        href='{{ "categories" | absURL}}/{{ . | urlize }}'>{{ . }}</a></span>
+                {{ end }}
+            </div>
+            {{ end }}
+        </section>
+        {{ if .Params.image }}
+        <img class="my-4" src="{{ .Params.image | absURL }}">
+        {{ end }}
+        <div class="content prose md:prose-lg lg:prose-xl max-w-none py-1">{{.Content}}</div>
+        <div class="share m-2 grid grid-cols-2 lg:grid-cols-3 gap-2">
+            <a href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}" target="_blank"
+                title="Tweet" class="share-button twitter">
+                <div class="text-white text-center">
+                    <span class="icon-twitter text-lg mr-2"></span>Twitter
+                </div>
+            </a>
+            <a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}&t={{ .Title }}" target="_blank"
+                title="Facebook" class="share-button facebook">
+                <div class="text-white text-center">
+                    <span class="icon-facebook text-lg mr-2"></span>Facebook
+                </div>
+            </a>
+            <a href="https://b.hatena.ne.jp/add?mode=confirm&url={{ .Permalink }}&title={{ .Title }}" target="_blank"
+                title="hatena" class="share-button hatena">
+                <div class="text-white text-center">
+                    <span class="icon-hatenabookmark text-lg mr-2"></span>Hatena
+                </div>
+            </a>
+            <a href="https://getpocket.com/edit?url={{ .Permalink }}&title={{ .Title }}" target="_blank" title="pocket"
+                class="share-button pocket">
+                <div class="text-white text-center">
+                    <span class="icon-get-pocket text-lg mr-2"></span>Pocket
+                </div>
+            </a>
+            <a href="https://timeline.line.me/social-plugin/share?url={{ .Permalink }}" class="share-button line">
+                <div class="text-white text-center">
+                    <span class="icon-line text-lg mr-2"></span>LINE
+                </div>
+            </a>
+            <a href="javascript:OnClickURL();" class="share-button url" title="Copy to Clipboard"
+                data-clipboard-text="{{ .Title }} {{ .Permalink }}" id="url">
+                <div class="text-white text-center">
+                    <span class="icon-link text-lg mr-2"></span>Copy
+                </div>
+            </a>
+        </div>
+        <hr class="py-4">
+        {{- with .Site.Params.disqusShortname }}
+        <div class="mb-3">
+            {{ template "_internal/disqus.html" . }}
+        </div>
+        <hr class="py-4">
+        {{ end }}
+        <aside id="meta">
+            <div class="grid grid-cols-2">
+                <div class="col-span-1">
+                    {{ with .PrevInSection }}
+                    <a class="previous lg:text-2xl" href="{{.Permalink}}">
+                        <div
+                            class="transition-colors duration-300 border border-gray-600 hover:border-black h-auto m-3 text-center py-3 lg:py-1">
+                            <span class="icon-keyboard_arrow_left"></span> {{.Title}}
+                        </div>
+                    </a>
+                    {{ end }}
+                </div>
+                {{ with .NextInSection }}
+                <a class="next lg:text-2xl" href="{{.Permalink}}">
+                    <div
+                        class="transition-colors duration-300 col-span-1 border border-gray-600 hover:border-black h-auto m-3 text-center py-3 lg:py-1">
+                        {{.Title}} <span class="icon-keyboard_arrow_right"></span>
+                    </div>
+                </a>
+                {{ end }}
+            </div>
+        </aside>
+    </div>
+</div>
+{{ end }}
--- a/themes/tella/layouts/index.html
+++ b/themes/tella/layouts/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    {{- partial "head.html" . -}}
+    <meta name="description" content="{{ .Site.Params.homepage_meta_tags.meta_og_description }}" />
+    <meta property="og:title" content="{{ .Site.Params.homepage_meta_tags.meta_og_title }}" />
+    <meta property="og:type" content="{{ .Site.Params.homepage_meta_tags.meta_og_type }}" />
+    <meta property="og:url" content="{{ .Site.Params.homepage_meta_tags.meta_og_url }}" />
+    <meta property="og:image" content="{{ .Site.Params.homepage_meta_tags.meta_og_image }}" />
+    <meta property="og:description" content="{{ .Site.Params.homepage_meta_tags.meta_og_description }}" />
+    <meta name="twitter:card" content="{{ .Site.Params.homepage_meta_tags.meta_twitter_card }}" />
+    <meta name="twitter:site" content="{{ .Site.Params.homepage_meta_tags.meta_twitter_site }}" />
+    <meta name="twitter:creator" content="{{ .Site.Params.homepage_meta_tags.meta_twitter_creator }}" />
+</head>
+
+<body>
+    {{- partial "alert.html" . -}}
+    {{- partial "header.html" . -}}
+    <div class="scroll-top rounded-full">
+        <span class="icon-keyboard_arrow_up text-2xl"></span>
+    </div>
+    {{- partial "slide.html" . -}}
+    {{- partial "strip.html" . -}}
+    {{ if ne .Site.Params.showBlog false }}
+    <div class="mx-auto my-10 max-w-6xl">
+        <h2 class="text-4xl ml-2">Blog</h2>
+        {{- partial "recent.html" . -}}
+    </div>
+    {{ end }}
+    {{- partial "footer.html" . -}}
+    <script src="{{ "/js/swiper-bundle.min.js" | relURL }}"></script>
+    <script>
+        var mySwiper = new Swiper(".swiper-container", {
+            direction: "horizontal",
+            loop: true,
+            speed: 550,
+            autoplay: {
+                delay: 6000,
+            },
+            pagination: {
+                el: ".swiper-pagination",
+            },
+            navigation: {
+                nextEl: ".swiper-button-next",
+                prevEl: ".swiper-button-prev",
+            },
+        });
+    </script>
+</body>
+
+</html>
--- a/themes/tella/layouts/partials/alert.html
+++ b/themes/tella/layouts/partials/alert.html
@@ -0,0 +1,7 @@
+{{if .Site.Data.alert}}
+<div class="bg-red-600 py-2">
+    {{ range .Site.Data.alert }}
+    <p class="ml-2 text-md text-white">>> {{ .date }} {{ .alert }}</p>
+    {{ end }}
+</div>
+{{end}}
--- a/themes/tella/layouts/partials/analytics.html
+++ b/themes/tella/layouts/partials/analytics.html
@@ -0,0 +1,13 @@
+{{ if not .Site.IsServer }}
+{{ with .Site.GoogleAnalytics }}
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', '{{ . }}');
+</script>
+{{ end }}
+{{ end }}
--- a/themes/tella/layouts/partials/footer.html
+++ b/themes/tella/layouts/partials/footer.html
@@ -0,0 +1,67 @@
+<footer class="bg-tlgray-100">
+  {{ if not .IsHome }}
+  <script src='{{ "/js/clipboard.min.js" | relURL }}'></script>
+  <script src='{{ "/js/highlight.min.js" | relURL }}'></script>
+  <script src='{{ "/js/highlightjs-line-numbers.min.js" | relURL }}'></script>
+  <script src='{{ "/js/sweetalert2.min.js" | relURL }}'></script>
+  <script>
+    hljs.initHighlightingOnLoad();
+    hljs.initLineNumbersOnLoad();
+    new ClipboardJS('.url');
+
+    function OnClickURL() {
+      Swal.fire({
+        icon: 'success',
+        title: 'Copied!',
+        text: 'Copied the URL and title.'
+      })
+    }
+  </script>
+  {{ end }}
+  <script>
+    function toggleNav() {
+      var hamburger = document.getElementById("hamburgerbtn");
+      var overlay = document.getElementById("overlay");
+      var body = document.body;
+
+      hamburger.addEventListener("click", function () {
+        overlay.classList.toggle("open");
+        hamburger.classList.toggle("is-open");
+        body.classList.toggle("scroll-lock");
+      });
+    }
+    toggleNav();
+
+    document.querySelector('.scroll-top').addEventListener('click', () => {
+      document.documentElement.scrollTop = 0;
+    });
+  </script>
+  {{ if .Site.Params.googleFonts }}
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans&display=swap" rel="stylesheet" />
+  {{ else }}
+  <link href='{{ "css/webfonts.min.css" | relURL }}' rel="stylesheet" />
+  {{ end }}
+  <div class="flex items-center justify-between flex-wrap bg-gray-800 p-8 text-white">
+    <div class="items-center text-xl text-grey-900 mr-6">
+      {{ .Site.Params.site.name }}
+    </div>
+    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto" id="mobileMenu">
+      <div class="text-lg lg:flex-grow">
+      </div>
+      <div class="flex flex-row items-center text-lg">
+        {{ range .Site.Menus.footer }}
+        <a href="{{ .URL }}" class="block mt-4 lg:inline-block lg:mt-0 text-gray-300 hover:text-white mr-8">
+          {{ if not .Pre }}
+          {{ .Name }}
+          {{ else }}
+          {{ .Pre }}
+          {{ end }}
+        </a>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+  <div class="copy pl-8 py-5 bg-tlgray-700 text-white text-md">
+    &copy; {{site.Title}} {{ now.Year }} All Rights Reserved.
+  </div>
+</footer>
--- a/themes/tella/layouts/partials/head.html
+++ b/themes/tella/layouts/partials/head.html
@@ -0,0 +1,23 @@
+{{- partial "analytics" . -}}
+<meta charset="utf-8">
+<title>{{site.Title}}{{if not .IsHome}} | {{.Title}}{{end}}</title>
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<link rel="apple-touch-icon" sizes="180x180" href='{{ "apple-touch-icon.png" | relURL }}'>
+<link rel="icon" type="image/png" sizes="32x32" href='{{ "favicon-32x32.png" | relURL }}'>
+<link rel="icon" type="image/png" sizes="16x16" href='{{ "favicon-16x16.png" | relURL }}'>
+<link rel="manifest" href='{{ "site.webmanifest" | relURL }}'>
+{{ if .Site.Params.icon.fontawesome }}
+<link href='{{ "/css/fa6.min.css" | relURL }}' rel="stylesheet" type="text/css">
+{{ end }}
+{{ $styles := resources.Get "css/style.css" | postCSS }}
+{{ if .Site.IsServer }}
+<link rel="stylesheet" href="{{ $styles.RelPermalink }}">
+{{ else }}
+{{ $styles := $styles | minify | fingerprint | resources.PostProcess }}
+<link rel="stylesheet" href="{{ $styles.RelPermalink }}" />
+{{ end }}
+{{ if .IsHome }}
+<link rel="stylesheet" href='{{ "/css/swiper-bundle.min.css" | relURL }}'>
+{{ end }}
+<link href='{{ "/css/style.min.css" | relURL }}' rel="stylesheet" type="text/css">
+<link rel="stylesheet" href='{{ "/css/custom.css" | relURL }}'>
--- a/themes/tella/layouts/partials/header.html
+++ b/themes/tella/layouts/partials/header.html
@@ -0,0 +1,38 @@
+<header>
+    <div id="overlay">
+        <ul class="text-center list-none text-white text-3xl">
+            {{ range .Site.Menus.main }}
+            <li class="p-2">
+                <a href="{{ .URL | safeURL }}">
+                    <span>{{ .Name }}</span>
+                </a>
+            </li>
+            {{ end }}
+        </ul>
+    </div>
+    <nav class="flex items-center justify-between flex-wrap bg-opacity-100 p-8">
+        <div class="flex items-center flex-shrink-0 text-xl text-grey-900 mr-6">
+            <a href="{{ .Site.BaseURL }}"><img alt="{{ .Site.Params.logo.alt }}"
+                    class="{{ .Site.Params.logo.size }} mr-3" src="{{ .Site.Params.logo.main | relURL }}"></a>
+        </div>
+        <div class="block lg:hidden">
+            <div id="hamburgerbtn" class="flex cursor-pointer items-center w-14 h-10 py-2 rounded mopen">
+                <span class="top"></span>
+                <span class="middle"></span>
+                <span class="bottom"></span>
+            </div>
+        </div>
+        <div class="hidden w-full block flex-grow lg:flex lg:items-center lg:w-auto" id="mobileMenu">
+            <div class="text-lg lg:flex-grow">
+            </div>
+            <div class="text-lg">
+                {{ range .Site.Menus.main }}
+                <a href="{{ .URL | safeURL }}"
+                    class="duration-200 block mt-4 lg:inline-block lg:mt-0 text-black hover:opacity-60 mr-8">
+                    {{ .Name }}
+                </a>
+                {{ end }}
+            </div>
+        </div>
+    </nav>
+</header>
--- a/themes/tella/layouts/partials/navsp.html
+++ b/themes/tella/layouts/partials/navsp.html
--- a/themes/tella/layouts/partials/paginator.html
+++ b/themes/tella/layouts/partials/paginator.html
@@ -0,0 +1,53 @@
+{{ $pag := $.Paginator }}
+{{ if gt $pag.TotalPages 1 }}
+<nav aria-label="page navigation">
+  <ul class="flex list-none my-5 p-0 justify-center">
+    <!-- Don't show on 1st and 2nd page -->
+    {{ if and (ne $pag.PageNumber 1) (ne $pag.PageNumber 2) }}
+    <li><a href="{{ $pag.First.URL }}" rel="first"
+        class="shadow-md mx-2 py-3 px-5 rounded-full relative block border-white border-0 duration-100 bg-white text-blue-600 hover:shadow-sm dark:bg-warmgray-900 dark:border-gray-600 dark:hover:bg-warmgray-700">First</a>
+    </li>
+    {{ end }}
+
+    {{ if $pag.HasPrev }}
+    <li><a href="{{ $pag.Prev.URL }}" rel="prev"
+        class="shadow-md mx-2 py-3 px-5 rounded-full relative block border-white border-0 duration-100 bg-white text-blue-600 hover:shadow-sm dark:bg-warmgray-900 dark:border-gray-600 dark:hover:bg-warmgray-700">Prev</a>
+    </li>
+    {{ end }}
+
+    {{ range $pag.Pagers }}
+    {{ if eq . $pag }}
+    <!-- Current Page -->
+    <li><a href="{{ .URL }}"
+        class="shadow-md mx-2 py-3 px-5 rounded-full relative block border-white border-0 duration-100 bg-blue-600 border-blue-600 text-white hover:border-blue-700 dark:border-gray-600">{{
+        .PageNumber }}</a></li>
+    {{ else if and (ge .PageNumber (sub $pag.PageNumber 2)) (le .PageNumber (add $pag.PageNumber 2)) }}
+    {{ $.Scratch.Set "dot_rendered" false }}
+    <!-- Render prev 2 page and next 2 pages -->
+    <li><a href="{{ .URL }}"
+        class="shadow-md mx-2 py-3 px-5 rounded-full relative block border-white border-0 duration-100 bg-white text-blue-600 hover:shadow-sm dark:bg-warmgray-900 dark:border-gray-600 dark:hover:bg-warmgray-700">{{
+        .PageNumber }}</a></li>
+    {{ else if eq ($.Scratch.Get "dot_rendered") false }}
+    <!-- render skip pages -->
+    {{ $.Scratch.Set "dot_rendered" true }}
+    <li><a class="shadow-md mx-2 py-3 px-5 rounded-full relative block border-white border-0 cursor-auto Class
+                Properties
+                pointer-events-none">...</a></li>
+    {{ end }}
+    {{ end }}
+
+    {{ if $pag.HasNext }}
+    <li><a href="{{ $pag.Next.URL }}" rel="next"
+        class="shadow-md mx-2 py-3 px-5 rounded-full relative block border-white border-0 duration-100  bg-white text-blue-600 hover:shadow-sm dark:bg-warmgray-900 dark:border-gray-600 dark:hover:bg-warmgray-700">Next</a>
+    </li>
+    {{ end }}
+
+    <!-- Don't show on last and 2nd last page -->
+    {{ if and (ne $pag.PageNumber $pag.TotalPages) ((ne $pag.PageNumber (sub $pag.TotalPages 1))) }}
+    <li class="page-item"><a href="{{ $pag.Last.URL }}" rel="last"
+        class="shadow-md mx-2 py-3 px-5 rounded-full relative block border-white border-0 duration-100 bg-white text-blue-600 hover:shadow-sm dark:bg-warmgray-900 dark:border-gray-600 dark:hover:bg-warmgray-700">Last</a>
+    </li>
+    {{ end }}
+  </ul>
+</nav>
+{{ end }}
--- a/themes/tella/layouts/partials/recent.html
+++ b/themes/tella/layouts/partials/recent.html
@@ -0,0 +1,10 @@
+{{ range first 3 (where site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
+<a href="{{ .Permalink }}">{{ partial "summary.html" . }}</a>
+{{ end }}
+
+<div class="flex flex-wrap justify-center text-gray-300 my-5">
+    <a href="blog/"
+        class="duration-200 px-6 py-3 bg-tlgray-800 hover:opacity-80 hover:text-white relative block focus:outline-none text-md text-center">
+        All Posts >
+    </a>
+</div>
--- a/themes/tella/layouts/partials/seo/extend.html
+++ b/themes/tella/layouts/partials/seo/extend.html
@@ -0,0 +1,25 @@
+{{/* 
+	Add/Edit SEO Scratch Object
+	
+	@author The New Dynamic
+	
+	@access public
+
+	@context Page 
+
+	User does not load the partial, as the component will. 
+	This allows to overwrite some SEO object keys with project's own.
+	Project's partial should live under `layouts/partials/seo/extend.html`
+
+	@example - In Partial
+		{{- if eq "Type" "recipe" -}}
+		{{- .Scratch.SetInMap "seo" "type" "article" -}}
+		{{- end -}}
+
+		{{- $locales := dict "fr" "fr_FR" "en" "en_US" -}}
+		{{- .Scratch.SetInMap "seo" "locale" (index $locales .Lang) -}}
+
+		{{- if .IsHome -}}
+		{{- .Scratch.SetInMap "seo" "title" "Welcome Home" -}}
+		{{- end -}}
+ */}}
--- a/themes/tella/layouts/partials/seo/print.html
+++ b/themes/tella/layouts/partials/seo/print.html
@@ -0,0 +1,87 @@
+{{- $.Scratch.Set "seo" dict -}}
+
+{{/* 日付 */}}
+{{- if not .PublishDate.IsZero -}}
+{{- $.Scratch.SetInMap "seo" "published_time" (.PublishDate.Format "2006-01-02T15:04:05-07:00") -}}
+{{- else if not .Date.IsZero -}}
+{{- $.Scratch.SetInMap "seo" "published_time" (.Date.Format "2006-01-02T15:04:05-07:00") -}}
+{{- end -}}
+{{- if not .Lastmod.IsZero -}}
+{{- $.Scratch.SetInMap "seo" "updated_time" (.Lastmod.Format "2006-01-02T15:04:05-07:00") -}}
+{{- end -}}
+
+ 
+{{/* 説明 */}}
+{{ $description := "" }}
+{{/* 1. SEO Description */}}
+{{- if .Params.seo.description -}}
+	{{- $description = .Params.seo.description -}}
+{{/* 2. Description
+	    As it could potentially contain HTML tags, we strip them with plainify */}}
+{{- else if .Params.description -}}
+	{{- $description = .Params.description | plainify -}}
+{{/* 3. Summary  */}}
+{{- else if .Summary -}}
+	{{- $description = substr .Summary 0 60 | plainify -}}
+{{- else -}}
+{{/* 4. site description  */}}
+	{{ $description = .Site.Params.Description }}
+{{- end -}}
+
+{{- $.Scratch.SetInMap "seo" "description" $description -}}
+
+{{/* サイト名 */}}
+{{- with .Param "seo.site_name" -}}
+	{{- $.Scratch.SetInMap "seo" "site_name" . -}}
+{{- else -}}
+	{{- $.Scratch.SetInMap "seo" "site_name" .Site.Title -}}
+{{- end -}}
+
+{{/* Twitter */}}
+{{/* Default twitter_card is "summary_large_image" */}}
+{{- $.Scratch.SetInMap "seo" "twitter_card" "summary_large_image" -}}
+
+{{/* We check the site config sports a Social.twitter and use as handle */}}
+{{- with .Site.Social.twitter -}}
+	{{- $.Scratch.SetInMap "seo" "twitter_handle" (printf "@%s" .) -}}
+{{- end -}}
+
+{{/* 種類 */}}
+{{- $.Scratch.SetInMap "seo" "type" "website" -}}
+
+{{- if in (slice "blog" "news") .Type -}}
+	{{- $.Scratch.SetInMap "seo" "type" "article" -}}
+{{ else if in (slice "article") .Type }}
+	{{- $.Scratch.SetInMap "seo" "type" "event" -}}
+{{- end -}}
+
+{{/* 言語 */}}
+{{- $.Scratch.SetInMap "seo" "locale" "ja_JP" -}}
+
+{{/* Canonical */}}
+{{ with .Params.seo.canonical }}
+  {{- $.Scratch.SetInMap "seo" "canonical" (. | absURL) -}}
+{{ else }}
+{{- $.Scratch.SetInMap "seo" "canonical" .Permalink -}}
+{{ end }}
+
+{{- partial "seo/extend" . -}}
+
+{{ partial "seo/tags" (dict "page" $ "seo" ($.Scratch.Get "seo")) }}
+{{ with .Site.Params.seo.jsonld }}
+	{{ partial "seo/jsonld" (dict "page" $ "seo" ($.Scratch.Get "seo")) }}
+{{ end }}
+
+{{ with .Site.Params.seo.debug }}
+	{{ partial "seo/debug" $ }}
+{{ end }}
+
+{{ if .Params.image }}
+    {{ with .Params.image }}
+<meta property="og:image" content="{{ . | absURL }}">
+<meta property="og:image:url" content="{{ . | absURL }}">
+    {{ end }}
+{{ else }}
+<meta property="og:image" content="{{ .Site.Params.og_image | absURL }}">
+<meta property="og:image:url" content="{{ .Site.Params.og_image | absURL }}">
+{{ end }}
--- a/themes/tella/layouts/partials/seo/tags.html
+++ b/themes/tella/layouts/partials/seo/tags.html
@@ -0,0 +1,18 @@
+{{- $seo := .seo -}}
+<meta name="description" content="{{ $seo.description }}">
+<meta property="og:title" content="{{ .Title }} | {{ .Site.Title }}" />
+<meta property="og:site_name" content="{{ $seo.site_name }}">
+<meta property="og:description" content="{{ $seo.description }}">
+<meta property="og:url" content="{{ .page.Permalink }}">
+<meta property="og:type" content="{{ $seo.type }}">
+<meta property="og:locale" content="{{ $seo.locale }}">
+<meta name="twitter:card" content="{{ $seo.twitter_card }}">
+<meta name="twitter:site" content="@tech_chiba">
+{{ with $seo.canonical }}
+<link rel="canonical" href="{{ . }}">
+{{ end }}
+<meta name="twitter:description" content="{{- $seo.description }}">
+<meta property="article:published_time" content="{{- $seo.published_time }}">
+{{- with $seo.updated_time }}
+<meta property="article:updated_time" content="{{- $seo.updated_time }}">
+{{- end }}
--- a/themes/tella/layouts/partials/slide.html
+++ b/themes/tella/layouts/partials/slide.html
@@ -0,0 +1,14 @@
+<div class="swiper-container">
+    <div class="swiper-wrapper">
+        {{ range .Site.Data.slide }}
+        <div class="swiper-slide">
+            <img src="{{ .image }}" alt="">
+            <div class="s-fade-txt">
+                <h1 class="text-4xl {{ or .color "text-white" }}">{{ .title }}</h1>
+            </div>
+        </div>
+        {{ end }}
+    </div>
+    <div class="swiper-button-prev"></div>
+    <div class="swiper-button-next"></div>
+</div>
--- a/themes/tella/layouts/partials/strip.html
+++ b/themes/tella/layouts/partials/strip.html
@@ -0,0 +1,23 @@
+{{if .Site.Data.features}}
+<div class="bg-tlgray-200 py-6 md:py-10">
+    <div class="container mx-auto max-w-7xl">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+            {{ range .Site.Data.features }}
+            {{if .link }}<a href="{{ .link }}">{{ end }}
+                <div
+                    class="bg-white text-center mx-2 px-4 py-10 flex flex-row justify-center items-center duration-300 transform h-full hover:-translate-y-1 hover:shadow-lg">
+                    <div class="p-1">
+                        {{if .icon }}
+                        <span class="{{ .icon }} text-5xl"></span>
+                        {{ end }}
+                        <h2 class="text-2xl">{{ .title }}</h2>
+                        <p class="sans">{{ .description | markdownify }}</p>
+                    </div>
+                </div>
+                {{if .link }}
+            </a>{{ end }}
+            {{ end }}
+        </div>
+    </div>
+</div>
+{{end}}
--- a/themes/tella/layouts/partials/summary.html
+++ b/themes/tella/layouts/partials/summary.html
@@ -0,0 +1,18 @@
+<div
+  class="sans w-full px-2 lg:max-w-full lg:flex mt-3 lg:px-0 duration-500 transform hover:-translate-y-1 hover:shadow-md">
+  {{ if .Params.image }}
+  <img id="thumb" alt="{{.Title}}" class="aspect-video object-cover w-auto lg:h-44"
+    src="{{ .Params.image | relURL }}" />
+  {{ else }}
+  <img id="thumb" alt="{{.Title}}" class="aspect-video object-cover w-auto lg:h-44"
+    src='{{ "/img/default.jpg" | relURL }}'>
+  {{ end }}
+  <div
+    class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 relative pl-4 p-6 justify-between leading-normal max-w-full w-full">
+    <div class="text-gray-900 font-bold text-xl mb-2">{{ .Title }}</div>
+    <p class="text-gray-700 text-base pb-5">{{ substr .Summary 0 130 | plainify | htmlUnescape }}...</p>
+    <p class="text-sm text-gray-600 items-center">
+      <time>{{ .Date.Format "2006/01/02" }}</time>
+    </p>
+  </div>
+</div>
--- a/themes/tella/layouts/products/list.html
+++ b/themes/tella/layouts/products/list.html
@@ -0,0 +1,13 @@
+{{ define "main" }}
+<div class="mx-auto my-10 max-w-6xl">
+    <div class="mx-3 col-span-3 lg:col-span-2 px-2">
+        <h1 class="title text-5xl mb-4">{{.Title}}</h1>
+        <div class="content py-1">{{.Content}}</div>
+        <div class="grid grid-cols-1 md:grid-cols-2 mb-2 gap-2">
+        {{ range .Pages.ByWeight }}
+        {{ .Render "summary" }}
+        {{ end }}
+        </div>
+    </div>
+</div>
+{{ end }}
--- a/themes/tella/layouts/products/summary.html
+++ b/themes/tella/layouts/products/summary.html
@@ -0,0 +1,8 @@
+<a href="{{ .Permalink }}">
+    <div class="summary border p-3">
+        <h2 class="text-3xl">
+            {{ .Title }}
+        </h2>
+        <p>{{ .Description }}</p>
+    </div>
+</a>
--- a/themes/tella/layouts/shortcodes/begin-task-list.html
+++ b/themes/tella/layouts/shortcodes/begin-task-list.html
@@ -0,0 +1 @@
+<span class="begin-task-list"></span>
--- a/themes/tella/layouts/shortcodes/form.html
+++ b/themes/tella/layouts/shortcodes/form.html
@@ -0,0 +1,15 @@
+<form name="contact" action="https://getform.io/" method="POST">
+    <div class="input">
+        <input type="text" placeholder="Name" name="name" class="p-4 bg-gray-200 border border-gray-200 focus:outline-none focus:bg-white focus:border-gray-500" required>
+    </div>
+    <div class="input">
+        <input type="text" placeholder="Email" name="mail" class="p-4 bg-gray-200 border border-gray-200 focus:outline-none focus:bg-white focus:border-gray-500" required>
+    </div>
+    <div class="input">
+        <input type="text" placeholder="Title" name="title" class="p-4 bg-gray-200 border border-gray-200 focus:outline-none focus:bg-white focus:border-gray-500" required>
+    </div>
+    <div class="input">
+        <textarea rows="5" cols="30" placeholder="Message" name="message" class="p-4 bg-gray-200 border border-gray-200 focus:outline-none focus:bg-white focus:border-gray-500" required></textarea>
+    </div>
+    <input type="submit" value="Submit" class="px-8 py-2 duration-200 bg-gray-800 text-white cursor-pointer transition-colors hover:bg-gray-400">
+</form>
--- a/themes/tella/layouts/shortcodes/img.html
+++ b/themes/tella/layouts/shortcodes/img.html
@@ -0,0 +1,14 @@
+{{ $name := .Get "src" }}
+{{ $extention := .Get "ext" | default "jpg" }}
+{{ $alt := .Get "alt" }}
+{{ $width := .Get "width" | default "auto" }}
+{{ $minipath := printf "/posts/%s/%s.%s" .Page.File.ContentBaseName $name $extention }}
+{{ $path := printf "content%s.webp" $minipath }}
+{{- if (fileExists $path) -}}
+<picture>
+    <source type="image/webp" srcset="{{ $minipath }}.webp">
+    <img src="{{ $minipath }}" />
+</picture>
+{{- else -}}
+<img src="{{ $minipath }}" />
+{{- end -}}