{{ define "meta_tags" }}

<meta property="og:site_name" content="{{ .Site.Title }}" />
<meta property="og:title" content="{{ .Site.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="{{ substr .Description 0 130 | plainify }}" />
  <meta property="twitter:description" content="{{ substr .Description 0 130 | plainify }}" />
{{- else if .Summary }}
  <meta property="og:description" content="{{ substr .Summary 0 130 | plainify }}" />
  <meta property="twitter:description" content="{{ substr .Summary 0 130 | plainify }}" />
{{- else if .Site.Params.description }}
  <meta property="og:description" content="{{ substr .Site.Params.description 0 130 | plainify }}" />
  <meta property="twitter:description" content="{{ substr .Site.Params.description 0 130 | plainify }}" />
{{- end }}
{{ end }}

{{ define "main" }}
<div class="flex">
    <div class="w-full lg:w-3/4 px-2 dark:text-white">
        <div class="bg-white dark:bg-warmgray-700 lg:flex p-7 rounded-t-xl">
            {{ if .Params.image }}
            <img class="rounded mx-auto w-auto h-48 lg:ml-0 lg:mr-8" src="{{ .Params.image | relURL }}" alt="thumbnail"/>
            {{ else }}
            <img class="rounded mx-auto w-auto h-48 lg:ml-0 lg:mr-8" src="{{ "/img/novel.png" | relURL }}" alt="thumbnail"/>
            {{ end }}
            <div>
                <h1 class="title text-xl my-3">{{ .Title }}</h1>
                <p class="mb-3 text-xs opacity-70">{{ .Content | countwords }} {{ i18n "words" }}（{{ if eq .Site.Language.Lang "ja" }}読了目安: {{ end }}{{ math.Round (div (countwords .Content)
                    220.0) }}{{ i18n "minutes" }}）
                </p>
                <p class="text-sm opacity-80">{{ replaceRE "(https?://[a-zA-Z0-9\\-._~:/?#\\[\\]@!\\$&'()*\\+,;%=]+)" "<a href=\"$1\" class=\"text-blue-500 opacity-100 hover:text-blue-700 focus:text-blue-700\">$1</a>" .Description | safeHTML }}</p>
                {{ with .Params.tags }}
                <div id="tags">
                    {{ range . }}
                    <span
                        class="text-sm inline-flex my-2 mr-2 leading-4 mb-2 content-center justify-center h-8 text-blue-500"><a
                            href="{{ "tags" | absURL}}/{{ . | urlize }}">#{{ . }}</a></span>
                    {{ end }}
                </div>
                {{ end }}
                <h4 id="date" class="text-sm">{{ .Date.Format "2006/1/2 15:04" }}</h4>
            </div>
        </div>
        <div class="bg-white dark:bg-warmgray-800 pt-14 border-t border-b dark:border-warmgray-800">
            <div class="mx-auto max-w-2xl">
                <div class="prose lg:prose-xl dark:prose-dark text-lg py-3 px-5">
                    {{ .Content }}
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-warmgray-800 pt-2 pb-12 px-4">
            <a href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}" target="_blank" title="Twitter" class="float-right mt-1">
                <svg width="24" height="24" viewBox="0 0 24 24" class="w-6 h-6 fill-current dark:text-white"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
            </a>
            <a href="https://getpocket.com/edit?url={{ .Permalink }}&title={{ .Title }}" target="_blank" title="Pocket" class="float-right inline-block mr-4">
                <svg width="32" height="32" viewBox="0 0 32 32" class="w-8 h-8 fill-current dark:text-white"><path d="M 7 5 C 5.355469 5 4 6.355469 4 8 L 4 15 C 4 21.617188 9.382813 27 16 27 C 22.617188 27 28 21.617188 28 15 L 28 8 C 28 6.355469 26.644531 5 25 5 Z M 7 7 L 25 7 C 25.566406 7 26 7.433594 26 8 L 26 15 C 26 20.535156 21.535156 25 16 25 C 10.464844 25 6 20.535156 6 15 L 6 8 C 6 7.433594 6.433594 7 7 7 Z M 10.65625 11.40625 C 10.273438 11.40625 9.886719 11.582031 9.59375 11.875 C 9.007813 12.460938 9.007813 13.382813 9.59375 13.96875 L 15 19.375 C 15.28125 19.65625 15.664063 19.8125 16.0625 19.8125 C 16.460938 19.8125 16.84375 19.65625 17.125 19.375 L 22.40625 14.125 C 22.992188 13.539063 22.992188 12.585938 22.40625 12 C 21.820313 11.414063 20.867188 11.414063 20.28125 12 L 16.0625 16.21875 L 11.71875 11.875 C 11.425781 11.582031 11.039063 11.40625 10.65625 11.40625 Z"/></svg>
            </a>
            <a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}&t={{ .Title }}" target="_blank" title="Facebook" class="float-right inline-block mr-3 mt-1">
                <svg width="24" height="24" viewBox="0 0 24 24" class="w-6 h-6 fill-current dark:text-white"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg>
            </a>
        </div>
        <div class="bg-white dark:bg-warmgray-700 p-7 rounded-b-xl">
            <div class="mx-auto max-w-2xl">
                {{ template "_internal/disqus.html" . }}
            </div>
        </div>
    </div>
    <div class="mt-8 ml-5 lg:w-1/4 font-bold lg:block hidden">
        {{ if .Params.author }}
        <div class="px-4 dark:text-white lg:flex">
            <div>
                {{ if .Params.avatar }}
                <img src="{{ .Params.avatar }}" class="w-11 rounded-full" />
                {{ else }}
                <img src="/img/avatar.png" class="w-11 rounded-full" />
                {{ end }}
            </div>
            <p class="mt-2 ml-2">{{ .Params.author }}</p>
        </div>
        {{ end }}
        <div class="mt-7">
            {{ $filteredPosts := where .Site.RegularPages "Type" "in" site.Params.mainSections }}
            {{ $relatedPosts := shuffle $filteredPosts | first 5 }}
            {{- if $relatedPosts }}
            <div class="rounded-xl panel mb-3 pb-5">
                <p class="mx-4 text-base text-gray-700 dark:text-white pt-5">{{ i18n "posts" }}</p>
                <div class="mx-4">
                    {{ range $relatedPosts }}
                    <a href="{{ .RelPermalink }}" class="">
                        <div class="px-2 py-1 rounded w-full block dark:hover:bg-warmgray-800 hover:bg-gray-200 duration-200">
                            <div class="text-gray-900 dark:text-gray-100 text-base">{{.Title}}</div>
                        </div>
                        {{- end }}
                    </a>
                    {{- end }}
                </div>
            </div>
        </div>
    </div>
</div>
{{ end }}