Import index.html from teaser and split its head partial to be DRY

Author: yasulab

_includes/google-analytics.html

@@ -8,10 +8,11 @@
   <title>{{ site.title }} {{ site.year }} | {{ site.subtitle }}</title>
   {% endif %}
 
-  <!-- Meta -------------------------- -->
-  <meta property="fb:app_id" content="1750803431730303" />
-  <meta name="twitter:card"  content="summary_large_image" />
-  <meta name="twitter:site"  content="@DojoConJapan" />
+  <!-- OGP for Social Services -->
+  <meta property="fb:admins" content="715330868">
+  <meta property="fb:app_id" content="805184859580207">
+  <meta name="twitter:card"  content="summary" />
+  <!--<meta name="twitter:site"  content="@??????" />-->
   {% if page.title %}
   <meta name="twitter:title" content="{{ page.title | strip_html }} | {{ site.title }} {{ site.year }}" />
   <meta property="og:title"  content="{{ page.title | strip_html }} | {{ site.title }} {{ site.year }}" />
@@ -24,8 +25,8 @@
   <meta name="twitter:image" content="{{ site.url }}{{ page.thumbnail }}" />
   <meta property="og:image"  content="{{ site.url }}{{ page.thumbnail }}" />
   {% else %}
-  <meta name="twitter:image" content="{{ site.url }}/img/ogp/ogp.jpg" />
-  <meta property="og:image"  content="{{ site.url }}/img/ogp/ogp.jpg" />
+  <meta name="twitter:image" content="{{ site.url }}/img/ogp.jpg" />
+  <meta property="og:image"  content="{{ site.url }}/img/ogp.jpg" />
   {% endif %}
 
   {% if page.url != "/" %}
@@ -34,7 +35,6 @@
   <meta property="og:type" content="website" />
   {% endif %}
 
-  <meta property="og:url"          content="{{ site.url }}{{ page.url }}" />
   {% if page.description %}
   <meta property="og:description"  content="{{ page.description | strip_html | escape }}" />
   <meta name="twitter:description" content="{{ page.description | strip_html | escape }}" />
@@ -45,16 +45,25 @@
   <meta name="description"         content="{{ site.description | strip_html | escape }}" />
   {% endif %}
 
-  <!-- Google Analytics -------------------------- -->
+  <!-- Google Analytics and Tag Manager (gtag.js) only in Production-->
   {% if jekyll.environment == 'production' %}
-  {% include google-analytics.html %}
+  <!-- TODO: Set gtag.js when it gets ready.
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-0123456789"></script>
+  <script>
+   window.dataLayer = window.dataLayer || [];
+   function gtag(){dataLayer.push(arguments);}
+   gtag('js', new Date());
+
+   gtag('config', 'G-0123456789');
+  </script>
+  -->
   {% endif %}
 
   <!-- Favicon -------------------------- -->
-  <link rel="icon" href="/img/favicon/favicon.svg" sizes="any" type="image/svg+xml">
-  <link rel="icon" href="/img/favicon/favicon.webp" sizes="512" type="image/webp">
-  <link rel="apple-touch-icon" href="/img/favicon/apple-touch-icon.png"> <!-- 192x192px -->
-  <!-- favicon.ico をルートディレクトリにそっと置く。しかしheadには書かない。 -->
+  <link rel="icon" href="/img/coderdojo.svg"  sizes="any" type="image/svg+xml">
+  <link rel="icon" href="/img/coderdojo.webp" sizes="512" type="image/webp">
+  <link rel="apple-touch-icon" href="/img/apple-touch-icon.png"> <!-- 192x192px -->
+  <!-- MEMO: デフォルト用に favicon.ico をルートディレクトリにも置く: /favicon.ico -->
 
   <!-- CSS Framework -------------------------- -->
   <!-- Font Awasome https://fontawesome.com/ -->
@@ -63,6 +72,32 @@
   <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/[email protected]" integrity="sha512-M4ecs0CyhBq7W0PeumwMxVaA9pWbhuD4mCqGTe7/357R8/avaeGSJAtk2dYCgFrZyWvjq1Sju0Wcyf2jnP941Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
   <!-- CSS -------------------------- -->
-  <!-- DojoCon CSS -->
-  <link rel="stylesheet" href="/css/main.css?3ba454d" />
+  <link rel="stylesheet" href='/css/main.css?v={{ "now" | date: "%Y-%m-%d_%H-%M-%S" }}' />
+  <style type="text/css">
+    @import"https://fonts.googleapis.com/css2?family=Space+Mono&display=swap";
+    html { scroll-behavior:smooth }
+    body {
+      font-family:"Roboto","Noto Sans JP",sans-serif;
+      margin:0;
+      text-align:center;
+      color:#046;
+      padding-top:60px;
+    }
+    .container {
+      text-align: center;
+      font-size: 4vw;
+      font-family: 'Space Mono';
+    }
+  
+    .cursor::after{
+      content:"_";
+      animation: blink 1s infinite
+    }
+    @keyframes blink{
+      0%   { opacity:0 }
+      50%  { opacity:0 }
+      51%  { opacity:1 }
+      100% { opacity:1 }
+    }
+  </style>
 </head>

_includes/head.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="ja" dir="ltr">
+  {% include head.html %}
+
+  {{ content }}
+
+
+  <!--
+  <body class="bg-linear-106 from-[#9d1e29] to-[#d4932a] text-[#262626] tracking-wider min-h-dvh p-4 flex">
+    <div class="bg-white rounded-2xl min-h-full flex-grow flex flex-col">
+      <div class="flex-grow">
+	TODO: content
+      </div>
+    </div>
+
+    TODO: include footer.html
+  </body>
+  -->
+
+</html>