Merge pull request #1517 from CyC2018/learn-daily

Add daily interview question to home

website/README.md

@@ -45,6 +45,8 @@ verify_updates.py 在临时副本中修改文章、替换配图、新增文章
 
 学习站（定级、每日计划、间隔复习）的代码不在本仓库，网站工作流从私有仓库检出到 learn/；learn/ 存在时，build.py 调用 learn/build.py 生成到 dist/learn/，随网站一起发布，并在首页、侧边栏和三条学习路线的文章开头加入口，学习站中有题的笔记在文章末尾提示“读完练一练”（search-paths.js 中的 CS_NOTES_LEARN_TOPICS 记录每篇笔记的题号）；已经在学的读者，入口和首页横幅读取同一网站下的学习记录（localStorage 的 cs-learn-v1，不上传），写出练过几道、今天有几道到期；有题的小节标题下列出这一节的面试题（CS_NOTES_LEARN_SECTIONS：笔记 → 锚点 → 题号、题目、热度），点进去只练这一节；不存在时只构建笔记，没有入口。
 
+首页学习站横幅下面是“今日面试题”：每天按日期从面试最常问的题中换一道，链接到这道题在学习站中的页面。
+
 构建时在根目录写入 robots.txt，指向学习站的站点地图（learn/sitemap.xml，列出每道题的静态页面）。
 
 ## 自动更新与发布

website/templates/site.css

@@ -53,6 +53,8 @@ body { color: #34495e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI
 .learn-q-label { flex: none; padding: 1px 7px; border-radius: 5px; background: #e3f2ea; color: var(--theme-color); font-size: 12px; font-weight: 600; }
 .learn-q-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #34495e; }
 .learn-q-go { flex: none; color: var(--theme-color); font-weight: 600; }
+.learn-daily { margin: -8px 0 18px; }
+.learn-daily .learn-q-text { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
 .learn-q.due .learn-q-go { color: #c2410c; }
 @media (min-width: 769px) { .content { padding-top: 12px; } .article-toc { display: none; } }
 .page-toc-block { margin: 0 0 18px; padding: 0 0 14px 18px; border-bottom: 1px solid #e2e3dc; }

website/templates/site.js

@@ -225,6 +225,32 @@
     banner.querySelector('.learn-banner-text span').textContent = (due ? '今天有 ' + due + ' 道题到了该复习的时候，' : '') + '已经学完 ' + done + ' 天' + (due ? '' : '，接着学下一天');
     banner.querySelector('.learn-banner-go').textContent = '继续';
   }
+  // 首页的“今日面试题”：每天按日期换一道面试最常问的题（同一天所有读者看到的一样），链接到这道题的页面，先想再看要点
+  function dailyQuestion(section) {
+    var banner = section && section.querySelector('.learn-banner'), sections = window.CS_NOTES_LEARN_SECTIONS;
+    if (!banner || !sections || section.querySelector('.learn-daily')) return;
+    var seen = {}, hot = [];
+    Object.keys(sections).forEach(function (note) {
+      Object.keys(sections[note]).forEach(function (anchor) {
+        sections[note][anchor].forEach(function (q) { if (q[2] > 1 && !seen[q[0]]) { seen[q[0]] = true; hot.push(q); } });
+      });
+    });
+    if (!hot.length) return;
+    hot.sort(function (a, b) { return a[0] < b[0] ? -1 : 1; });
+    var p = localDay().split('-').map(Number), q = hot[Math.floor(Date.UTC(p[0], p[1] - 1, p[2]) / 864e5) % hot.length];
+    var record = learnRecord(), done = record && record.cards[q[0]] && record.cards[q[0]].last === localDay();
+    var link = document.createElement('a'), label = document.createElement('span'), text = document.createElement('span'), go = document.createElement('span');
+    link.className = 'learn-q learn-daily';
+    link.href = '/learn/q/' + q[0] + '.html';
+    label.className = 'learn-q-label';
+    label.textContent = '今日面试题';
+    text.className = 'learn-q-text';
+    text.textContent = q[1];
+    go.className = 'learn-q-go';
+    go.textContent = done ? '今天练过了' : '想一想';
+    link.appendChild(label); link.appendChild(text); link.appendChild(go);
+    banner.insertAdjacentElement('afterend', link);
+  }
   // 小节标题下列出这一节的面试题（显示第一道的题目和题数），点进去只练这一节；练过的显示已练或到期
   function sectionQuestions(vm, section) {
     var match = decode(vm.route.path).match(/^\/notes\/(.+)$/), note = match && match[1];
@@ -304,6 +330,7 @@
         practiceCallout(vm, document.querySelector('.markdown-section'));
         sectionQuestions(vm, document.querySelector('.markdown-section'));
         learnBanner(document.querySelector('.markdown-section'));
+        dailyQuestion(document.querySelector('.markdown-section'));
         document.querySelectorAll('.article-toc').forEach(function (toc) {
           toc.open = window.matchMedia('(min-width: 769px)').matches;
         });