Takumi Matsunobu/Style_changelog

Created Sun, 06 Mar 2022 17:01:53 +0100 Modified Fri, 01 Sep 2023 13:52:32 +0200
1104 Words
miscellaneous

元祖 github-style からの変更履歴

  • アイコンを日替わりの identicon に設定 (6 March 2022)

  • Publication への固定リンクをメニューに追加 (layout/partials/menu.html) (6 March 2022)

  • ライトモード・ダークモードの切り替えトグルアイコンを現在の設定に応じて可変に　(6 March 2022)

<svg style="fill: var(--color-profile-color-modes-toggle-moon); margin: 7px 0 0 7px;" width="14"
    height="13" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path  id="toggleThemabutton" fill-rule="evenodd" clip-rule="evenodd" d="M4.069 13h-4.069v-2h4.069c-.041.328-.069.661-.069 1s.028.672.069 1zm1.618 3.897l-2.879 2.88 1.414 1.414 2.879-2.88c-.527-.411-1.001-.885-1.414-1.414zm1.416-11.209l-2.88-2.881-1.415 1.414 2.881 2.881c.411-.529.885-1.003 1.414-1.414zm11.208 1.414l2.881-2.881-1.414-1.414-2.881 2.881c.529.411 1.003.886 1.414 1.414zm-5.311-3.033v-4.069h-2v4.069c.328-.041.66-.069 1-.069.34 0 .672.028 1 .069zm3.898 14.243l2.88 2.88 1.415-1.414-2.881-2.88c-.411.528-.885 1.002-1.414 1.414zm3.033-7.312c.041.328.069.661.069 1s-.028.672-.069 1h4.069v-2h-4.069zm-8.931 8.931v4.069h2v-4.069c-.328.041-.66.069-1 .069-.34 0-.672-.028-1-.069zm7-7.931c0 3.314-2.686 6-6 6-3.315 0-6-2.686-6-6s2.685-6 6-6c3.314 0 6 2.686 6 6zm-2 0c0-2.19-1.818-3.963-4-3.994 2.533 1.816 2.61 6.119 0 7.988 2.182-.031 4-1.804 4-3.994z"/>
</svg>

  if (currentStyle === 'light') {
    setTheme('dark');
    if (iconElement) {
      iconElement.setAttribute('class', 'octicon');
      iconElement.setAttribute('color', '#f0f6fc');
    }
    document.getElementById("toggleThemabutton").setAttribute("d", "M12 10.999c1.437.438 2.562 1.564 2.999 3.001.44-1.437 1.565-2.562 3.001-3-1.436-.439-2.561-1.563-3.001-3-.437 1.436-1.562 2.561-2.999 2.999zm8.001.001c.958.293 1.707 1.042 2 2.001.291-.959 1.042-1.709 1.999-2.001-.957-.292-1.707-1.042-2-2-.293.958-1.042 1.708-1.999 2zm-1-9c-.437 1.437-1.563 2.562-2.998 3.001 1.438.44 2.561 1.564 3.001 3.002.437-1.438 1.563-2.563 2.996-3.002-1.433-.437-2.559-1.564-2.999-3.001zm-7.001 22c-6.617 0-12-5.383-12-12s5.383-12 12-12c1.894 0 3.63.497 5.37 1.179-2.948.504-9.37 3.266-9.37 10.821 0 7.454 5.917 10.208 9.37 10.821-1.5.846-3.476 1.179-5.37 1.179z")

  }
  else {
    setTheme('light');
    if (iconElement) {
      iconElement.removeAttribute('color');
      iconElement.removeAttribute('class');
    }
    document.getElementById("toggleThemabutton").setAttribute("d", "M4.069 13h-4.069v-2h4.069c-.041.328-.069.661-.069 1s.028.672.069 1zm1.618 3.897l-2.879 2.88 1.414 1.414 2.879-2.88c-.527-.411-1.001-.885-1.414-1.414zm1.416-11.209l-2.88-2.881-1.415 1.414 2.881 2.881c.411-.529.885-1.003 1.414-1.414zm11.208 1.414l2.881-2.881-1.414-1.414-2.881 2.881c.529.411 1.003.886 1.414 1.414zm-5.311-3.033v-4.069h-2v4.069c.328-.041.66-.069 1-.069.34 0 .672.028 1 .069zm3.898 14.243l2.88 2.88 1.415-1.414-2.881-2.88c-.411.528-.885 1.002-1.414 1.414zm3.033-7.312c.041.328.069.661.069 1s-.028.672-.069 1h4.069v-2h-4.069zm-8.931 8.931v4.069h2v-4.069c-.328.041-.66.069-1 .069-.34 0-.672-.028-1-.069zm7-7.931c0 3.314-2.686 6-6 6-3.315 0-6-2.686-6-6s2.685-6 6-6c3.314 0 6 2.686 6 6zm-2 0c0-2.19-1.818-3.963-4-3.994 2.533 1.816 2.61 6.119 0 7.988 2.182-.031 4-1.804 4-3.994z")
  }
}
  • 記事作成 or 変更自国の相対表示を変更 (24 Oct 2022)
function relativeTime(dateStr) {
  ...
  if (days < 366) {
    return `${days} days ago`;
  }
  // if (date.getFullYear() === now.getFullYear()) {
  //   return `${date.getDate()} ${months[date.getMonth()]}`;
  // }
  return `${date.getDate()} ${monthsfull[date.getMonth()]} ${date.getFullYear()}`;
}
  • Githubの草を投稿履歴ではなくいい感じのランダム生成タイルに (23 Aug 2023)
function graph2(year, posts, startDate, endDate) {
  let html = ``;

  // iterate over every post and put the date as a key into "count" dictionary
  const count = {};
  const monthPos = [];
  let startMonth = -1;
  const weekday = startDate.getDay();
  for (let i = 0; i < 53; i++) { // week
    html += `<g transform="translate(${i * 16}, 0)">`;

    // loop over each of day in a week
    for (let j = 0; j < 7; j++) { // days
      const date = new Date(startDate.getTime() + (i * 7 + j - weekday) * 24 * 60 * 60 * 1000);
      const dataDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
      if (date < startDate || date > endDate) {
        continue;
      }

      if (j === 0) {
        if (i <= 51) {
          if (startMonth !== date.getMonth()) {
            monthPos.push(i);
            startMonth = date.getMonth();
          }
        }
      }

      let c;
      c = Math.round((Math.random() - 0.5)*10);
      let color;
      switch (c) {
        case -1:
          color = "var(--color-calendar-graph-day-Lm1-bg)";
          break;
        case -2:
          color = "var(--color-calendar-graph-day-Lm2-bg)";
          break;
        case -3:
          color = "var(--color-calendar-graph-day-Lm3-bg)";
          break;
        case 0:
          color = "var(--color-calendar-graph-day-m-bg)";
          break;
        case 1:
          color = "var(--color-calendar-graph-day-Lp1-bg)";
          break;
        case 2:
          color = "var(--color-calendar-graph-day-Lp2-bg)";
          break;
        case 3:
          color = "var(--color-calendar-graph-day-Lp3-bg)";
          break;
        default:
          if (c < 0) {
          color = "var(--color-calendar-graph-day-Lm4-bg)";
          }else{
          color = "var(--color-calendar-graph-day-Lp4-bg)";
          }
      }
      html += `<rect class="day" width="11" height="11" x="${16 - i}" y="${j * 15}"
      fill="${color}" onmouseover="svgTip(this, ${c}, '${dataDate}')" onmouseleave="hideTip()"></rect>`;
    }
    html += '</g>';
  }
  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 += `<text x="${15 * month + 16}" y="-9"
    class="month">${months[(i + startDate.getMonth()) % 12]}</text>`;
  }
  html += `
<text text-anchor="start" class="wday" dx="-10" dy="8"
style="display: none;">Sun</text>
<text text-anchor="start" class="wday" dx="-10" dy="25">Mon</text>
<text text-anchor="start" class="wday" dx="-10" dy="32"
style="display: none;">Tue</text>
<text text-anchor="start" class="wday" dx="-10" dy="56">Wed</text>
<text text-anchor="start" class="wday" dx="-10" dy="57"
style="display: none;">Thu</text>
<text text-anchor="start" class="wday" dx="-10" dy="85">Fri</text>
<text text-anchor="start" class="wday" dx="-10" dy="81"
style="display: none;">Sat</text>
`;
  document.querySelector('#graph-svg').innerHTML = html;
}

--color-calendar-graph-day-Lm1-bg: #a5e7ff;
  --color-calendar-graph-day-Lm1-border: rgba(27, 31, 35, 0.06);
  --color-calendar-graph-day-Lm2-bg: #63a9f9;
  --color-calendar-graph-day-Lm2-border: rgba(27, 31, 35, 0.06);
  --color-calendar-graph-day-Lm3-bg: #006bbc;
  --color-calendar-graph-day-Lm3-border: rgba(27, 31, 35, 0.06);
  --color-calendar-graph-day-Lm4-bg: #003582;
  --color-calendar-graph-day-Lm4-border: rgba(27, 31, 35, 0.06);
  --color-calendar-graph-day-Lp1-bg: #f0dfcf;
  --color-calendar-graph-day-Lp1-border: rgba(27, 31, 35, 0.06);
  --color-calendar-graph-day-Lp2-bg: #f0ab9e;
  --color-calendar-graph-day-Lp2-border: rgba(27, 31, 35, 0.06);
  --color-calendar-graph-day-Lp3-bg: #ef776f;
  --color-calendar-graph-day-Lp3-border: rgba(27, 31, 35, 0.06);
  --color-calendar-graph-day-Lp4-bg: #ee4044;
  --color-calendar-graph-day-Lp4-border: rgba(27, 31, 35, 0.06);
  --color-calendar-graph-day-m-bg: #ababae;
  --color-calendar-graph-day-m-border: rgba(27, 31, 35, 0.06);
  • トップページのいい感じタイルをミュンヘン空港の日平均気温の気候値からの偏差に (1 Sep 2023)

偏差の計算: うるう日を除いた365日カレンダーで1993-2022年の30年間を参照期間とした。ミュンヘン空港が1992年開業のため。Hourly dataから日平均を取得し、カレンダー日ごとに30年分を単純平均した。時間方向にLanczos(sinusoidal)フィルターをかけると偏差の平均値が+0.7となり温暖化シグナルが強く出過ぎる。

実装: json化した時系列データをfetchで非同期読み込みし、描画を行う関数graph2loopをfetchブロック内で呼び出し。もっと良い方法があると思う。

Source: DWD climate Data Center
stundenwerte_TU_01262_19920517_20221231_hist.zip in https://opendata.dwd.de/climate_environment/CDC/observations_germany/climate/hourly/air_temperature/historical/

  // read local JSON file in javascript
  fetch("./data.json")
		.then( function(response){ return response.json() ;})
		.then(function (data) {
      // console.log(data['data_vars']['TT_TU'].data[year - 1993]);
      console.log(year, 1993, year - 1993);
      cvalues = data['data_vars']['TT_TU'].data[year - 1993];

    graph2loop(html, cvalues, startDate, endDate);
  });