diff --git a/layouts/partials/home.html b/layouts/partials/home.html index 1a39be0..8278e37 100644 --- a/layouts/partials/home.html +++ b/layouts/partials/home.html @@ -2,6 +2,6 @@
{{ partial "user-profile.html" . }} - + {{ partial "overview.html" .}}
\ No newline at end of file diff --git a/layouts/partials/menus.html b/layouts/partials/menus.html index a32f11f..81756e2 100644 --- a/layouts/partials/menus.html +++ b/layouts/partials/menus.html @@ -1,5 +1,4 @@ -{{ $mainSections := .Site.Params.mainSections | default (slice "post") }} -{{ $section := where .Site.RegularPages "Section" "in" $mainSections }} +{{ $section := where .Site.RegularPages "Section" "in" (slice "post") }} {{ $section_count := len $section }}
-
- -
-
-
-
-

- Pinned -

+{{ define "overview" }} +{{ $pinned := where .Site.Pages "Params.pin" true }} +
+
+
+
-
    - {{ range (first $n_posts $section) }} -
  1. -
    -
    -
    - - - - - {{ .Title }} - -
    -
    - {{ .Summary | safeHTML }} -
    -
    - Updated - Mon, 02 Jan 2006 15:04:05 -0700 + {{ if ne (len $pinned) 0 }} +
    +

    + Pinned +

    + +
      + {{ range (first 6 $pinned) }} +
    1. +
      +
      +
      + + + + + + {{ .Title }} + +
      + + +
      + {{ .Summary | safeHTML }} +
      + + +

      + + + + + + 999 + +

      -
    -
    2. - {{ end }} -
+ + {{ end }} + +
+ {{ else }} +
+

+ Popular posts +

+ +
    + {{ range (first 6 (where .Site.RegularPages "Section" "in" (slice "post"))) }} +
  1. +
    +
    +
    + + + + + + {{ .Title }} + +
    + + +
    + {{ .Summary | safeHTML }} +
    + + +

    + + + + + + 999 + +

    +
    +
    +
    2. + {{ end }} +
+
+ {{ end }}
-
- {{ $mainSections := .Site.Params.mainSections | default (slice "post") }} - {{ $section := where .Site.RegularPages "Section" "in" $mainSections }} -
-
-

-

-
- -
-
+

+
+ class="js-calendar-graph mx-md-2 mx-3 d-flex flex-column flex-items-end flex-xl-items-center overflow-hidden pt-1 is-graph-loading graph-canvas calendar-graph height-full text-center">
-
+
+
+
Less
    -
  • -
  • -
  • -
  • -
  • +
  • +
  • +
  • +
  • +
More
@@ -98,41 +139,288 @@
+
- -
+
-

- Post activity +

+ Contribution activity

-
+
+
+

+ December 2020 +

+ + +
+ +
+ + + + +
+
+
+ + + Created 16 + commits in + 4 + repositories + + + + + + + + + + + + +
+ +
+
+
+
+ + + + + + + + +
+ +
+ + + + +
+
+
+ + + Opened 1 + + pull request in + 1 + repository + + + + + + + + + + + + +
+
+ +
+ MeiK2333/headful-chrome-launch +
+ + 1 + merged + + +
+ +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
- - - - - -
+
+ +
+
-
+
-
\ No newline at end of file + + +{{ end }} \ No newline at end of file diff --git a/layouts/partials/posts.html b/layouts/partials/posts.html index 904b033..883b0d1 100644 --- a/layouts/partials/posts.html +++ b/layouts/partials/posts.html @@ -1,7 +1,4 @@ -{{ $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 }} +{{ define "posts" }}
@@ -48,4 +45,5 @@ {{ end }}
-
\ No newline at end of file +
+{{ end }} \ No newline at end of file diff --git a/layouts/partials/user-profile.html b/layouts/partials/user-profile.html index 63e76d0..00e4636 100644 --- a/layouts/partials/user-profile.html +++ b/layouts/partials/user-profile.html @@ -103,5 +103,10 @@
+ {{ if .IsHome }} + {{ block "overview" . }}{{ end }} + {{ else }} + {{ block "posts" . }}{{ end }} + {{ end }}
\ No newline at end of file diff --git a/static/js/github-style.js b/static/js/github-style.js index f1eeb03..c440c67 100644 --- a/static/js/github-style.js +++ b/static/js/github-style.js @@ -1,2 +1,284 @@ +const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; +const now = new Date(); +let contributions; + (() => { -})(); \ No newline at end of file + const dom = document.querySelector('#contributions'); + if (!dom) { + return; + } + + contributions = JSON.parse(dom.getAttribute('data')); + let year = 0; + for (const item of contributions) { + item.publishDate = decodeURI(item.publishDate).replace(' ', 'T'); + item.date = new Date(item.publishDate); + if (item.date.getFullYear() > year) { + year = item.date.getFullYear(); + } + item.title = decodeURI(item.title); + } + + yearList(); + switchYear(year.toString()); +})(); + +function switchYear(year) { + let startDate; + let endDate; + if (year != now.getFullYear().toString()) { + const date = new Date(year); + startDate = new Date(date.getTime() - date.getDay() * 24 * 60 * 60 * 1000); + endDate = new Date(date.getFullYear(), 11, 31); + } else { + endDate = now; + startDate = new Date(endDate.getTime() - 364 * 24 * 60 * 60 * 1000 - endDate.getDay() * 24 * 60 * 60 * 1000); + } + startDate.setHours(0, 0, 0, 0); + endDate.setHours(23, 59, 59, 999); + const posts = []; + const ms = []; + for (const item of contributions) { + if (item.date >= startDate && item.date <= endDate) { + posts.push(item); + if (!ms.includes(item.date.getMonth())) { + ms.push(item.date.getMonth()); + } + } + } + posts.sort((a, b) => { return b - a }); + document.querySelector('#posts-activity').innerHTML = ''; + for (const month of ms) { + const node = document.createElement('div'); + node.innerHTML = monthly(year, month, posts); + document.querySelector('#posts-activity').appendChild(node); + } + + graph(year, posts, startDate, endDate); + + const yearList = document.querySelectorAll('.js-year-link'); + for (const elem of yearList) { + if (elem.innerText == year) { + elem.classList.add('selected'); + } else { + elem.classList.remove('selected'); + } + } +} + +function monthly(year, month, posts) { + const monthPosts = posts.filter(post => + post.date.getFullYear().toString() === year && post.date.getMonth() === month + ); + let liHtml = ''; + for (const post of monthPosts) { + liHtml += `
  • + + + + ${post.title} + +
    • `; + } + let html = ` +
    +
    +

    + ${months[month]} ${monthPosts.length > 0 ? monthPosts[0].date.getFullYear() : year} +

    +
    + + +
      + ${liHtml} +
    +
    +
    +
    + `; + return html; +} + +function yearList() { + const years = []; + for (const item of contributions) { + const year = item.date.getFullYear(); + if (!years.includes(year)) { + years.push(year); + } + } + years.sort((a, b) => { return b - a }); + + for (let i = 0; i < years.length; i++) { + const year = years[i]; + const node = document.createElement('li'); + node.innerHTML = `
  • ${year}
    • `; + document.querySelector('#year-list').appendChild(node); + } +} + +function graph(year, posts, startDate, endDate) { + const postsStr = posts.length === 1 ? "post" : "posts"; + if (year == now.getFullYear().toString()) { + document.querySelector('#posts-count').innerText = `${posts.length} ${postsStr} in the last year`; + } else { + document.querySelector('#posts-count').innerText = `${posts.length} ${postsStr} in ${year}`; + } + + let html = ``; + const count = {}; + for (const post of posts) { + const date = `${post.date.getFullYear()}-${(post.date.getMonth() + 1).toString().padStart(2, '0')}-${post.date.getDate().toString().padStart(2, '0')}`; + if (count[date] == undefined) { + count[date] = 1; + } else { + count[date]++; + } + } + const monthPos = []; + let startMonth = -1; + for (let i = 0; i < 53; i++) { + html += ``; + for (let j = 0; j < 7; j++) { + const date = new Date(startDate.getTime() + (i * 7 + j) * 24 * 60 * 60 * 1000); + const dataDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`; + if (date > endDate) { + continue; + } + + if (j == 0) { + if (i <= 51) { + if (startMonth != date.getMonth()) { + monthPos.push(i); + startMonth = date.getMonth(); + } + } + } + + let c; + if (count[dataDate] == undefined) { + c = 0; + } else { + c = count[dataDate]; + } + let color; + switch (c) { + case 0: + color = "var(--color-calendar-graph-day-bg)"; + break; + case 1: + color = "var(--color-calendar-graph-day-L1-bg)"; + break; + case 2: + color = "var(--color-calendar-graph-day-L2-bg)"; + break; + case 3: + color = "var(--color-calendar-graph-day-L3-bg)"; + break; + default: + color = "var(--color-calendar-graph-day-L4-bg)"; + } + html += ``; + } + html += ''; + } + if (monthPos[1] - monthPos[0] < 2) { + monthPos[0] = -1; + } + for (let i = 0; i < monthPos.length; i++) { + const month = monthPos[i]; + if (month == -1) { + continue; + } + html += `${months[(i + startDate.getMonth()) % 12]}`; + } + html += ` +Sun +Mon +Tue +Wed +Thu +Fri +Sat +`; + document.querySelector('#graph-svg').innerHTML = html; +} + +let svgElem; + +function svgTip(elem, count, dateStr) { + svgElem = document.createElement('div'); + svgElem.style.cssText = 'pointer-events: none; display: none;'; + svgElem.classList.add(...["svg-tip", "svg-tip-one-line"]); + const rect = getCoords(elem); + const date = new Date(dateStr); + const dateFmt = `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`; + if (count) { + svgElem.innerHTML = `${count} posts on ${dateFmt}`; + } else { + svgElem.innerHTML = `No posts on ${dateFmt}`; + } + svgElem.style.top = `${rect.top - 50}px`; + svgElem.style.left = `${rect.left - 78}px`; + svgElem.style.display = 'block'; + document.body.appendChild(svgElem); +} + +function hideTip() { + svgElem.remove(); +} + +function getCoords(elem) { + var box = elem.getBoundingClientRect(); + + var body = document.body; + var docEl = document.documentElement; + + var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; + var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; + + var clientTop = docEl.clientTop || body.clientTop || 0; + var clientLeft = docEl.clientLeft || body.clientLeft || 0; + + var top = box.top + scrollTop - clientTop; + var left = box.left + scrollLeft - clientLeft; + + return { top: Math.round(top), left: Math.round(left) }; +} \ No newline at end of file diff --git a/static/js/theme-mode.js b/static/js/theme-mode.js index 83c5fdf..58b58a1 100644 --- a/static/js/theme-mode.js +++ b/static/js/theme-mode.js @@ -10,7 +10,6 @@ function switchTheme() { } function setTheme(style) { - console.log(`set theme ${style}`); document.querySelectorAll('.isInitialToggle').forEach(elem => { elem.classList.remove('isInitialToggle'); });