添加 readme，修改 bug

README.md

@@ -1,20 +1,13 @@
 # github-style
 
-像素级抄袭 GitHub。
+已知问题
 
-目前完成：
+- 提交热力图的标签显示没有完全对齐
+- 多个可点击元素点击后会出现蓝色的边框
 
-- header 栏（还没有移动端的样式切换）
-- light/dark 模式切换
+TODO
 
-TODO:
-
-- 根据当前页面切换 `selected` 的菜单项。
-
-已知问题：
-
-- 因为没有服务器，无法在页面加载前就确定 light/dark 模式，因此需要尽早在 JS 中确认 theme。
-- light/dark 切换按钮点击时会出现蓝色边框。
+- 移动端适配
 
 ## Init hugo site
 
@@ -38,6 +31,13 @@ cd themes/github-style
 git pull
 ```
 
+## Setup readme
+
+```bash
+hugo new readme.md
+echo '`Hello World!`' > content/readme.md
+```
+
 ## Setup About page
 
 ```bash

config.template.toml

@@ -0,0 +1,23 @@
+baseURL = "https://meik2333.com/"
+languageCode = "zh-cn"
+title = "MeiK's blog"
+theme = "github-style"
+pygmentsCodeFences = true
+googleAnalytics = "UA-123456-789"
+
+[params]
+  contributions = "post"
+  author = "MeiK"
+  github = "MeiK2333"
+  description = "In solitude, where we are least alone."
+  twitter = "MeiK2333"
+  email = "meik2333@gmail.com"
+  utterances = "MeiK2333/MeiK2333.github.io"
+  facebook = "MeiK2333"
+  url = "https://meik2333.com"
+  keywords = "blog, google analytics"
+  rss = true
+  lastmod = true
+
+[frontmatter]
+  lastmod = ["lastmod", ":fileModTime", ":default"]

layouts/_default/about.html

@@ -1,11 +0,0 @@
-{{ define "content" }}
-<div class="application-main " data-commit-hovercards-enabled>
-  <main>
-    <div class="container-xl clearfix px-3 mt-4">
-
-      {{ partial "user-profile.html" . }}
-
-      {{ partial "about.html" .}}
-  </main>
-</div>
-{{end }}

layouts/partials/about.html

@@ -1,39 +0,0 @@
-{{ $mainSections := .Site.Params.mainSections | default (slice "post") }}
-{{ $section := where .Site.RegularPages "Section" "in" $mainSections }}
-{{ $section_count := len $section }}
-{{ $n_posts := $.Param "recent_posts_number" | default 6 }}
-<div class="col-lg-9 col-md-8 col-12 float-md-left pl-md-2">
-    <div class="UnderlineNav width-full user-profile-nav top-0 is-placeholder"
-        style="visibility: hidden; display: none; height: 56px;"></div>
-    <div class="UnderlineNav width-full user-profile-nav js-sticky top-0"
-        style="position: static; top: 0px; left: 330.5px; width: 911.5px;">
-        <nav class="UnderlineNav-body" aria-label="User profile">
-            <a aria-current="page" class="UnderlineNav-item mr-0 mr-md-1 mr-lg-3 " href="{{ .Site.BaseURL }}">
-                Overview
-            </a>
-            <a class="UnderlineNav-item mr-0 mr-md-1 mr-lg-3 " href="{{ absURL "posts/" }}">
-                Posts
-                <span class="Counter hide-lg hide-md hide-sm">
-                    {{ $section_count}}
-                </span>
-            </a>
-            <a class="UnderlineNav-item mr-0 mr-md-1 mr-lg-3 selected" href="{{ absURL "about/" }}">
-                About
-            </a>
-        </nav>
-    </div>
-
-    <div class="position-relative">
-        <div class="container-lg clearfix new-discussion-timeline experiment-repo-nav  p-responsive">
-            <div class="repository-content ">
-                <div class="Box mt-3 position-relative">
-                    <div id="readme" class="Box-body readme blob instapaper_body js-code-block-container">
-                        <article class="markdown-body entry-content p-3 p-md-6" itemprop="text">
-                            {{- .Content -}}
-                        </article>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

layouts/partials/header.html

@@ -9,7 +9,6 @@
         </svg>
       </a>
     </div>
-    <!-- TODO: fix theme -->
     <div class="Header-item Header-item--full">
       <div class="Header-search">
         <form target="_blank" action="https://www.google.com/search" accept-charset="UTF-8" method="get"

layouts/partials/menus.html

@@ -19,7 +19,8 @@
               </svg>
               Overview
             </a>
-            <a class="UnderlineNav-item {{ if .IsSection }} selected {{ end }}{{ if eq .Type "tags" }} selected {{ end }}" href="/post/">
+            <a class="UnderlineNav-item {{ if .IsSection }} selected {{ end }}{{ if eq .Type "tags" }} selected {{ end }}"
+              href="/post/">
               <svg class="octicon octicon-repo UnderlineNav-octicon hide-sm" height="16" viewBox="0 0 16 16"
                 version="1.1" width="16">
                 <path fill-rule="evenodd"

layouts/partials/overview.html

@@ -8,10 +8,31 @@
 {{ $section = where .Site.RegularPages "Section" "in" (slice "post") }}
 {{ $section_title = "Popular posts" }}
 {{ end }}
-<!-- TODO: about me -->
 <div class="flex-shrink-0 col-12 col-md-9 mb-4 mb-md-0">
   <div>
     <div class="position-relative">
+      {{ with .Site.GetPage "/readme"  }}
+      <div class="Box mt-4">
+        <div class="Box-body p-4">
+          <div class="d-flex flex-justify-between">
+            <div class="text-mono text-small mb-3">
+              <svg class="octicon octicon-octoface" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+                <path fill-rule="evenodd"
+                  d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z">
+                </path>
+                <path
+                  d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z">
+                </path>
+              </svg>
+              README<span class="text-gray-light">.md</span>
+            </div>
+          </div>
+          <article class="markdown-body entry-content container-lg f5">
+            {{- .Content -}}
+          </article>
+        </div>
+      </div>
+      {{ end }}
       <div class="mt-4">
         <div class="js-pinned-items-reorder-container">
           <h2 class="f4 mb-2 text-normal">
@@ -115,7 +136,6 @@
             Post activity
           </h2>
 
-          <!-- TODO: fix me, 点击时出现蓝色边框 -->
           <div id="posts-activity">
           </div>
         </div>

layouts/partials/post.html

@@ -1,78 +1,82 @@
-<!-- TODO -->
-<div class="application-main " data-commit-hovercards-enabled="">
-  <div itemscope="" itemtype="http://schema.org/SoftwareSourceCode" class="">
+<div>
   <main>
-      <div class="pagehead repohead instapaper_ignore readability-menu experiment-repo-nav pt-0 pt-lg-4 ">
-        <div class="repohead-details-container clearfix container-lg p-responsive d-none d-lg-block">
-          <div class="mb-3 d-flex">
-            <h1 class="public css-truncate float-none flex-auto width-fit pl-0">
-              <a class="avatar mr-1" href="{{ absURL "about/" }}">
-                {{ with $.Site.Params.avatar }}
-                <img src="{{  $.Site.Params.avatar  }}" width="26" height="26">
-                {{ else }}
-                <img src="{{ "images/avatar.png" | absURL }}" width="26" height="26">
-                {{ end }}
-              </a>
-              <span class="author"><a href="{{ .Site.BaseURL }}">{{ .Site.Params.author }}</a></span>
-              <span class="path-divider">/</span>
-              <strong itemprop="name" class="css-truncate-target" style="max-width: 410px"><a
+    <div class="gisthead pagehead bg-gray-light pb-0 pt-3 mb-4">
+      <div class="px-0">
+        <div class="mb-3 d-flex px-3 px-md-3 px-lg-5">
+          <div class="flex-auto min-width-0 width-fit mr-3">
+            <div class="d-flex">
+              <div class="d-none d-md-block">
+                <a class="avatar mr-2 flex-shrink-0" href="{{ .Site.BaseURL }}">
+                  <img class=" avatar-user"
+                    src="{{ with $.Site.Params.avatar }}{{ $.Site.Params.avatar }}{{ else }}{{ "images/avatar.png" | absURL }}{{ end }}"
+                    width="32" height="32"></a>
+              </div>
+              <div class="d-flex flex-column">
+                <h1 class="break-word f3 text-normal mb-md-0 mb-1">
+                  <span class="author">
+                    <a href="{{ .Site.BaseURL }}">{{ .Site.Params.author }}</a></span><span
+                    class="path-divider">/</span><strong class="css-truncate-target mr-1" style="max-width: 410px"><a
                       href="{{ .Permalink }}">{{ .Title }}</a></strong>
-
-              <div class="d-block text-small text-gray">
-                Created <time-ago datetime="{{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}"
-                  class="no-wrap">
-                  Mon, 02 Jan 2006 15:04:05 -0700</time-ago>
-                <span class="file-info-divider"></span>
-                Modified <time-ago datetime="{{ .Lastmod.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}" class="no-wrap">
-                  Mon, 02 Jan 2006 15:04:05 -0700</time-ago>
-              </div>
                 </h1>
+                <div class="note m-0">
+                  Created <relative-time datetime="{{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}"
+                    class="no-wrap">
+                    {{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}</relative-time>
+
+                  {{ if .Site.Params.lastmod }}
+                  <span class="file-info-divider"></span>
+                  Modified <relative-time datetime="{{ .Lastmod.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}"
+                    class="no-wrap">
+                    {{ .Lastmod.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}</relative-time>
+                  {{ end }}
                 </div>
               </div>
             </div>
-      <div class="container-lg clearfix new-discussion-timeline experiment-repo-nav  p-responsive">
-        <div class="repository-content ">
-          <div class="Box mt-3 position-relative">
-            <div class="Box-header py-2 d-flex flex-column flex-shrink-0 flex-md-row flex-md-items-center">
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-lg px-3 new-discussion-timeline">
+      <div class="repository-content gist-content">
+        <div>
+          <div class="js-gist-file-update-container js-task-list-container file-box">
+            <div id="file-pytest" class="file my-2">
+              <div class="file-header d-flex flex-md-items-center flex-items-start">
+                <div class="file-info d-flex flex-md-items-center flex-items-start flex-order-1 flex-auto">
                   <div class="text-mono f6 flex-auto pr-3 flex-order-2 flex-md-order-1 mt-2 mt-md-0">
                     {{ countwords .Content }} Words
                     <!-- <span class="file-info-divider"></span>
                                         {{ .ReadingTime }} min -->
+
+                  </div>
+                  <div class="file-actions flex-order-2 pt-0">
+                    {{ with .Params.tags }}
+                    {{ range $tag := . }}
+                    <a class="muted-link mr-3" href="{{ relURL (print "/tags/" . | urlize) }}">
+                      <svg class="octicon octicon-tag" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+                        <path fill-rule="evenodd"
+                          d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z">
+                        </path>
+                      </svg>
+                      {{ $tag }}
+                    </a>
+                    {{ end }}
+                    {{ end }}
+                  </div>
                 </div>
               </div>
 
-            <div id="readme" class="Box-body readme blob instapaper_body js-code-block-container">
-              <article class="markdown-body entry-content p-3 p-md-6" itemprop="text">
+
+              <div class="Box-body px-5 pb-5">
+                <article class="markdown-body entry-content container-lg">
                   {{- .Content -}}
                 </article>
               </div>
             </div>
           </div>
         </div>
-    </main>
       </div>
+    </div>
+  </main>
 </div>
-{{ if .Site.Params.utterances }}
-<div class="utterances"></div>
-<!-- <script src="https://utteranc.es/client.js"
-        repo="{{ .Site.Params.utterances }}"
-        issue-term="title"
-        theme="github-light"
-        crossorigin="anonymous"
-        async>
-</script> -->
-<script>
-  var systemThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-  var systemTheme = systemThemeMediaQuery.matches ? 'dark' : 'light';
-  var utterancesTheme = systemTheme === 'dark' ? 'github-dark' : 'github-light';
-  var utterancesScript = document.createElement('script');
-  utterancesScript.src = 'https://utteranc.es/client.js';
-  utterancesScript.setAttribute('repo', '{{ .Site.Params.utterances }}');
-  utterancesScript.setAttribute('issue-term', 'title');
-  utterancesScript.setAttribute('theme', utterancesTheme);
-  utterancesScript.setAttribute('crossorigin', 'anonymous');
-  utterancesScript.setAttribute('async', '');
-  document.querySelector('.utterances').appendChild(utterancesScript);
-</script>
-<noscript>Please enable JavaScript to view the comments</noscript>
-{{ end }}

layouts/partials/posts.html

@@ -54,11 +54,10 @@
                 {{ end }}
                 {{ end }}
 
-                <!-- TODO: format date -->
-                Updated
-                <relative-time datetime="{{ .Lastmod.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}" class="no-wrap"
-                  title="{{ .Lastmod.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}">
-                  {{ .Lastmod.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}
+                Created
+                <relative-time datetime="{{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}" class="no-wrap"
+                  title="{{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}">
+                  {{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" }}
                 </relative-time>
               </div>
             </div>

layouts/partials/user-profile.html

@@ -3,17 +3,30 @@
   <div class="gutter-condensed gutter-lg flex-column flex-md-row d-flex">
     <div class="flex-shrink-0 col-12 col-md-3 mb-4 mb-md-0">
       <div class="h-card mt-md-n5">
+        <div class="user-profile-sticky-bar js-user-profile-sticky-bar d-none d-md-block" id="headerStuck">
+          <div class="user-profile-mini-vcard d-table">
+            <span class="user-profile-mini-avatar d-table-cell v-align-middle lh-condensed-ultra pr-2">
+              {{ with $.Site.Params.avatar }}
+              <img class="rounded-1 avatar-user" height="32" width="32" src="{{ $.Site.Params.avatar }}">
+              {{ else }}
+              <img class="rounded-1 avatar-user" height="32" width="32" src="{{ "images/avatar.png" | absURL }}">
+              {{ end }}
+            </span>
+            <span class="d-table-cell v-align-middle lh-condensed">
+              <strong>{{ .Site.Params.author }}</strong>
+            </span>
+          </div>
+        </div>
         <div class="clearfix d-flex d-md-block flex-items-center mb-4 mb-md-0">
           <div class="position-relative d-inline-block col-2 col-md-12 mr-3 mr-md-0 flex-shrink-0" style="z-index:4;">
-            <!-- TODO: 页面上移后的样式变化 -->
             {{ with $.Site.Params.avatar }}
             <a href="{{ $.Site.Params.avatar }}">
-              <img style="height:auto;" alt="Avatar" width="260" height="260"
+              <img style="height:auto;" alt="Avatar" width="260" height="260" id="headerImg"
                 class="avatar avatar-user width-full border bg-white" src="{{ $.Site.Params.avatar }}">
             </a>
             {{ else }}
             <a href="{{ "images/avatar.png" | absURL }}">
-              <img style="height:auto;" alt="Avatar" width="260" height="260"
+              <img style="height:auto;" alt="Avatar" width="260" height="260" id="headerImg"
                 class="avatar avatar-user width-full border bg-white" src="{{ "images/avatar.png" | absURL }}">
             </a>
             {{ end }}
@@ -97,7 +110,7 @@
           {{ end }}
 
           {{ if .Site.Params.rss }}
-          <a class="avatar-group-item" href="{{ "posts/index.xml" | absURL }}">
+          <a class="avatar-group-item" href="{{ "/index.xml" | absURL }}">
             <img alt="@rss" width="32" height="32" src="{{ "images/rss.png" | absURL }}" class="avatar">
           </a>
           {{ end }}

static/css/github-style.css

@@ -38,14 +38,13 @@ body {
 
 .Header-search {
   max-width: 272px;
+  width: 100%;
   transition: .2s ease-in-out;
   transition-property: max-width, padding-bottom, padding-top;
 }
 
 .Header-search:focus-within {
   max-width: 544px;
-  transition: .2s ease-in-out;
-  transition-property: max-width, padding-bottom, padding-top;
 }
 
 .Header-search-label {

static/js/github-style.js

@@ -4,6 +4,7 @@ const now = new Date();
 let contributions;
 
 (() => {
+  setRelativeTime();
   const dom = document.querySelector('#contributions');
   if (!dom) {
     return;
@@ -260,7 +261,6 @@ function svgTip(elem, count, dateStr) {
   } else {
     svgElem.innerHTML = `<strong>No posts</strong> on ${dateFmt}`;
   }
-  // TODO: 计算位置
   svgElem.style.top = `${rect.top - 50}px`;
   svgElem.style.left = `${rect.left - 78}px`;
   svgElem.style.display = 'block';
@@ -288,3 +288,46 @@ function getCoords(elem) {
 
   return { top: Math.round(top), left: Math.round(left) };
 }
+
+function relativeTime(dateStr) {
+  const now = new Date();
+  const date = new Date(dateStr);
+  const diff = Math.floor((now.getTime() - date.getTime()) / 1000);
+  const seconds = Math.floor(diff);
+  const minutes = Math.floor(diff / 60);
+  const hours = Math.floor(diff / 60 / 60);
+  const days = Math.floor(diff / 60 / 60 / 24);
+  if (seconds < 60) {
+    return `${seconds} seconds ago`;
+  }
+  if (minutes < 60) {
+    return `${minutes} minutes ago`;
+  }
+  if (hours < 24) {
+    return `${hours} hours ago`;
+  }
+  if (days < 30) {
+    return `${days} days ago`;
+  }
+  if (date.getFullYear() == now.getFullYear()) {
+    return `${date.getDate()} ${months[date.getMonth()]}`;
+  }
+  return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
+}
+
+function setRelativeTime() {
+  document.querySelectorAll('relative-time').forEach(elem => {
+    const dateStr = elem.getAttribute('datetime');
+    elem.innerHTML = relativeTime(dateStr);
+    elem.setAttribute('title', new Date(dateStr).toLocaleString());
+  });
+}
+
+window.onscroll = function (e) {
+  const headerImg = document.querySelector('#headerImg');
+  if (headerImg.getBoundingClientRect().bottom <= 0) {
+    document.querySelector('#headerStuck').classList.add('is-stuck');
+  } else {
+    document.querySelector('#headerStuck').classList.remove('is-stuck');
+  }
+};