diff --git a/404.html b/404.html new file mode 100644 index 0000000..0c105b1 --- /dev/null +++ b/404.html @@ -0,0 +1,25 @@ +--- +layout: default +description: "你来到了没有知识的荒原 🙊" +header-img: "img/404-bg.jpg" +permalink: /404.html +--- + + + +
+
+
+
+
+

404

+ {{ page.description }} +
+
+
+
+
+ + diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..92a7adf --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,73 @@ +module.exports = function(grunt) { + + // Project configuration. + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + uglify: { + main: { + src: 'js/<%= pkg.name %>.js', + dest: 'js/<%= pkg.name %>.min.js' + } + }, + less: { + expanded: { + options: { + paths: ["css"] + }, + files: { + "css/<%= pkg.name %>.css": "less/<%= pkg.name %>.less" + } + }, + minified: { + options: { + paths: ["css"], + cleancss: true + }, + files: { + "css/<%= pkg.name %>.min.css": "less/<%= pkg.name %>.less" + } + } + }, + banner: '/*!\n' + + ' * <%= pkg.title %> v<%= pkg.version %> (<%= pkg.homepage %>)\n' + + ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' + + ' */\n', + usebanner: { + dist: { + options: { + position: 'top', + banner: '<%= banner %>' + }, + files: { + src: ['css/<%= pkg.name %>.css', 'css/<%= pkg.name %>.min.css', 'js/<%= pkg.name %>.min.js'] + } + } + }, + watch: { + scripts: { + files: ['js/<%= pkg.name %>.js'], + tasks: ['uglify'], + options: { + spawn: false, + }, + }, + less: { + files: ['less/*.less'], + tasks: ['less'], + options: { + spawn: false, + } + }, + }, + }); + + // Load the plugins. + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-less'); + grunt.loadNpmTasks('grunt-banner'); + grunt.loadNpmTasks('grunt-contrib-watch'); + + // Default task(s). + grunt.registerTask('default', ['uglify', 'less', 'usebanner']); + +}; diff --git a/README.md b/README.md new file mode 100644 index 0000000..31682ce --- /dev/null +++ b/README.md @@ -0,0 +1,282 @@ + + +![](https://raw.githubusercontent.com/qiubaiying/qiubaiying.github.io/master/img/readme-home.png) + +[![Build Status](https://travis-ci.org/qiubaiying/qiubaiying.github.io.svg?branch=master)](https://travis-ci.org/qiubaiying/qiubaiying.github.io) +[![codebeat badge](https://codebeat.co/badges/5f031df3-f6c1-4ec0-911a-ff6617ca50b9)](https://codebeat.co/projects/github-com-qiubaiying-qiubaiying-github-io-master) +[![GitHub issues](https://img.shields.io/github/issues/qiubaiying/qiubaiying.github.io.svg?style=flat)](https://github.com/qiubaiying/qiubaiying.github.io/issues) +[![License MIT](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://github.com/home-assistant/home-assistant-iOS/blob/master/LICENSE) +[![](https://img.shields.io/github/stars/qiubaiying/qiubaiying.github.io.svg?style=social&label=Star)](https://github.com/qiubaiying/qiubaiying.github.io) +[![](https://img.shields.io/github/forks/qiubaiying/qiubaiying.github.io.svg?style=social&label=Fork)](https://github.com/qiubaiying/qiubaiying.github.io) + + +博客的搭建教程修改自 [Hux](https://github.com/Huxpro/huxpro.github.io) + +更为详细的教程戳这 [《利用 GitHub Pages 快速搭建个人博客》](http://www.jianshu.com/p/e68fba58f75c) 或 [wiki](https://github.com/qiubaiying/qiubaiying.github.io/wiki/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E8%AF%A6%E7%BB%86%E6%95%99%E7%A8%8B) + +> +### [查看博客戳这里 👆](http://qiubaiying.github.io) + + + +## 使用 + +* 开始 + * [环境](#环境) + * [开始](#开始) + * [撰写博文](#撰写博文) +* 组件 + * [侧边栏](#侧边栏) + * [迷你关于我](#mini-about-me) + * [推荐标签](#featured-tags) + * [好友链接](#friends) + * [HTML5 演示文档布局](#keynote-layout) +* 评论与 Google/Baidu Analytics + * [评论](#comment) + * [网站分析](#analytics) +* 高级部分 + * [自定义](#customization) + * [标题底图](#header-image) + * [搜索展示标题-头文件](#seo-title) + + + +### 环境 + +如果你安装了 [jekyll](http://jekyllcn.com/)，那你只需要在命令行输入`jekyll serve` 或 `jekyll s`就能在本地浏览器中输入`http://127.0.0.1:4000/`预览主题，对主题的修改也能实时展示（需要强刷浏览器）。 + + + +### 开始 + +你可以通用修改 `_config.yml`文件来轻松的开始搭建自己的博客: + +``` +# Site settings +title: BY Blog # 你的博客网站标题 +SEOTitle: 柏荧的博客 | BY Blog # SEO 标题 +description: "Hey" # 随便说点，描述一下 + +# SNS settings +github_username: qiubaiying # 你的github账号 +jianshu_username: e71990ada2fd # 你的简书ID。 + +# Build settings +# paginate: 10 # 一页你准备放几篇文章 +``` + +Jekyll官方网站还有很多的参数可以调，比如设置文章的链接形式...网址在这里：[Jekyll - Official Site](http://jekyllrb.com/) 中文版的在这里：[Jekyll中文](http://jekyllcn.com/). + +### 撰写博文 + +要发表的文章一般以 **Markdown** 的格式放在这里`_posts/`，你只要看看这篇模板里的文章你就立刻明白该如何设置。 + +yaml 头文件长这样: + +``` +--- +layout: post +title: 定时器 你真的会使用吗？ +subtitle: iOS定时器详解 +date: 2016-12-13 +author: BY +header-img: img/post-bg-ios9-web.jpg +catalog: true +tags: + - iOS + - 定时器 +--- + +``` + +### 侧边栏 + +看右边: +![](https://raw.githubusercontent.com/qiubaiying/qiubaiying.github.io/master/img/readme-side.png) + +设置是在 `_config.yml`文件里面的`Sidebar settings`那块。 + +``` +# Sidebar settings +sidebar: true #添加侧边栏 +sidebar-about-description: "简单的描述一下你自己" +sidebar-avatar: /img/avatar-by.jpg #你的大头贴，请使用绝对地址.注意：名字区分大小写！后缀名也是 +``` + +侧边栏是响应式布局的，当屏幕尺寸小于992px的时候，侧边栏就会移动到底部。具体请见bootstrap栅格系统 + + +### Mini About Me + +Mini-About-Me 这个模块将在你的头像下面，展示你所有的社交账号。这个也是响应式布局，当屏幕变小时候，会将其移动到页面底部，只不过会稍微有点小变化，具体请看代码。 + +### Featured Tags + +看到这个网站 [Medium](http://medium.com) 的推荐标签非常的炫酷，所以我将他加了进来。 +这个模块现在是独立的，可以呈现在所有页面，包括主页和发表的每一篇文章标题的头上。 + +``` +# Featured Tags +featured-tags: true +featured-condition-size: 1 # A tag will be featured if the size of it is more than this condition value +``` + +唯一需要注意的是`featured-condition-size`: 如果一个标签的 SIZE，也就是使用该标签的文章数大于上面设定的条件值，这个标签就会在首页上被推荐。 + +内部有一个条件模板 `{% if tag[1].size > {{site.featured-condition-size}} %}` 是用来做筛选过滤的. + +### Social-media Account + +在下面输入的社交账号，没有的添加的不会显示在侧边框中。新加入了[简书](https:/www.jianshu.com)链接, + + # SNS settings + RSS: false + jianshu_username: jianshu_id + zhihu_username: username + facebook_username: username + github_username: username + # weibo_username: username + + + +![](http://ww4.sinaimg.cn/large/006tKfTcgy1fgrgbgf77aj308i02v748.jpg) + +### Friends + +好友链接部分。这会在全部页面显示。 + +设置是在 `_config.yml`文件里面的`Friends`那块，自己加吧。 + +``` +# Friends +friends: [ + { + title: "BY Blog", + href: "https://qiubaiying.github.io/" + }, + { + title: "Apple", + href: "https://apple.com/" + } +] +``` + + +### Keynote Layout + +HTML5幻灯片的排版： + +![](https://camo.githubusercontent.com/f30347a118171820b46befdf77e7b7c53a5641a9/687474703a2f2f6875616e677875616e2e6d652f696d672f626c6f672d6b65796e6f74652e6a7067) + +这部分是用于占用html格式的幻灯片的，一般用到的是 Reveal.js, Impress.js, Slides, Prezi 等等.我认为一个现代化的博客怎么能少了放html幻灯的功能呢~ + +其主要原理是添加一个 `iframe`，在里面加入外部链接。你可以直接写到头文件里面去，详情请见下面的yaml头文件的写法。 + +``` +--- +layout: keynote +iframe: "http://huangxuan.me/js-module-7day/" +--- +``` + +iframe在不同的设备中，将会自动的调整大小。保留内边距是为了让手机用户可以向下滑动，以及添加更多的内容。 + + +### Comment + +博客不仅支持 [Disqus](http://disqus.com) 评论系统,还加入了 [Gitalk](https://gitalk.github.io/) 评论系统，[支持 Markdwon 语法](https://guides.github.com/features/mastering-markdown/)，cool~ + +#### Disqus + +优点：国际比较流行，界面也很大气、简洁，如果有人评论，还能实时通知，直接回复通知的邮件就行了； + +缺点：评论必须要去注册一个disqus账号，分享一般只有Facebook和Twitter，另外在墙内加载速度略慢了一点。想要知道长啥样，可以看以前的版本点[这里](http://brucezhaor.github.io/about.html) 最下面就可以看到。 + +> Node：有很多人反映 Disqus 插件加载不出来，可能墙又架高了，有条件的话翻个墙就好了~ + +**使用：** + +**首先**，你需要去注册一个Disqus帐号。**不要直接使用我的啊！** + +**其次**，你只需要在下面的 yaml 头文件中设置一下就可以了。 + +``` +# 评论系统 +# Disqus（https://disqus.com/） +disqus_username: qiubaiying +``` + +#### Gitalk + +优点：界面干净简洁，利用 Github issue API 做的评论插件，使用 Github 帐号进行登录和评论，最喜欢的支持 Markdown 语法，对于程序员来说真是太 cool 了。 + +缺点：配置比较繁琐，每篇文章的评论都需要初始化。 + +**使用：** + +参考我的这篇文章：[《为博客添加 Gitalk 评论插件》](http://qiubaiying.top/2017/12/19/%E4%B8%BA%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0-Gitalk-%E8%AF%84%E8%AE%BA%E6%8F%92%E4%BB%B6/) + + +### Analytics + +网站分析，现在支持百度统计和Google Analytics。需要去官方网站注册一下，然后将返回的code贴在下面： + +``` +# Baidu Analytics +ba_track_id: 4cc1f2d8f3067386cc5cdb626a202900 + +# Google Analytics +ga_track_id: 'UA-49627206-1' # 你用Google账号去注册一个就会给你一个这样的id +ga_domain: huangxuan.me # 默认的是 auto, 这里我是自定义了的域名，你如果没有自己的域名，需要改成auto。 +``` + +### Customization + +如果你喜欢折腾，你可以去自定义这个模板的 Code。 + +**如果你可以理解 `_include/` 和 `_layouts/`文件夹下的代码（这里是整个界面布局的地方），你就可以使用 Jekyll 使用的模版引擎 [Liquid](https://github.com/Shopify/liquid/wiki)的语法直接修改/添加代码，来进行更有创意的自定义界面啦！** + +### Header Image + +博客每页的标题底图是可以自己选的，看看几篇示例post你就知道如何设置了。 + +标题底图的选取完全是看个人的审美了。每一篇文章可以有不同的底图，你想放什么就放什么，最后宽度要够，大小不要太大，否则加载慢啊。 + +> 上传的图片最好先压缩，这里推荐 imageOptim 图片压缩软件，让你的博客起飞。 + +但是需要注意的是本模板的标题是**白色**的，所以背景色要设置为**灰色**或者**黑色**，总之深色系就对了。当然你还可以自定义修改字体颜色，总之，用github pages就是可以完全的个性定制自己的博客。 + +### SEO Title + +我的博客标题是 **“BY Blog”** 但是我想要在搜索的时候显示 **“柏荧的博客 | BY Blog”** ，这个就需要 SEO Title 来定义了。 + +其实这个 SEO Title 就是定义了标题这个里面的东西和多说分享的标题，你可以自行修改的。 + +### 关于收到"Page Build Warning"的 Email + +由于jekyll升级到3.0.x,对原来的 pygments 代码高亮不再支持，现只支持一种-rouge，所以你需要在 `_config.yml`文件中修改`highlighter: rouge`.另外还需要在`_config.yml`文件中加上`gems: [jekyll-paginate]`. + +同时,你需要更新你的本地 jekyll 环境. + +使用`jekyll server`的同学需要这样： + +1. `gem update jekyll` # 更新jekyll +2. `gem update github-pages` #更新依赖的包 + +使用`bundle exec jekyll server`的同学在更新 jekyll 后，需要输入`bundle update`来更新依赖的包. + +> Note： +> 可以使用 `jekyll -s` 命令在本地实时配置博客，提高效率。详见 [Jekyll.com](http://jekyllcn.com/) + +参考文档：[using jekyll with pages](https://help.github.com/articles/using-jekyll-with-pages/) & [Upgrading from 2.x to 3.x](http://jekyllrb.com/docs/upgrading/2-to-3/) + + +## 致谢 + +1. 这个模板是从这里 [Hux](https://github.com/Huxpro/huxpro.github.io) fork 的, 感谢这个作者。 +2. 感谢 Jekyll、Github Pages 和 Bootstrap! + +## License + +遵循 MIT 许可证。有关详细,请参阅 [LICENSE](https://github.com/qiubaiying/qiubaiying.github.io/blob/master/LICENSE)。 + diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..78b8f78 --- /dev/null +++ b/_config.yml @@ -0,0 +1,111 @@ +# Site settings +title: My Blog +SEOTitle: 我的博客 | My Blog +header-img: img/post-bg-desk.jpg +email: 暂无 +description: "写一句你想写的话" +keyword: "我的博客" +url: "http://name.github.io" # your host, for absolute URL +baseurl: "" # for example, '/blog' if your blog hosted on 'host/blog' +github_repo: "https://github.com/name/name.github.io.git" # you code repository + +# Sidebar settings +sidebar: true # whether or not using Sidebar. +sidebar-about-description: "苟利国家生死以，岂因祸福避趋之~" +sidebar-avatar: /img/avatar_binggan.jpg # use absolute URL, seeing it's used in both `/` and `/about/` + + + +# SNS settings +RSS: false +# weibo_username: 暂无 +zhihu_username: 暂无 +github_username: 暂无 +facebook_username: 暂无 +jianshu_username: 暂无 +#twitter_username: 暂无 + + + + +# Build settings +# from 2016, 'pygments' is unsupported on GitHub Pages. Use 'rouge' for highlighting instead. +permalink: pretty +paginate: 10 +exclude: ["less","node_modules","Gruntfile.js","package.json","README.md"] +anchorjs: true # if you want to customize anchor. check out line:181 of `post.html` + + + +# Gems +# from PR#40, to support local preview for Jekyll 3.0 +gems: [jekyll-paginate] + + + + +# Markdown settings +# replace redcarpet to kramdown, +# although redcarpet can auto highlight code, the lack of header-id make the catalog impossible, so I switch to kramdown +# document: http://jekyllrb.com/docs/configuration/#kramdown +markdown: kramdown +highlighter: rouge +#redcarpet: +# extensions: [ "hard_wrap","autolink", "tables", "strikethrough", "superscript", "with_toc_data", "highlight", "prettify","no_intra_emphasis"] +kramdown: + input: GFM # use Github Flavored Markdown !important + + + +# Gitalk +gitalk: + enable: true #是否开启Gitalk评论 + clientID: #生成的clientID + clientSecret: #生成的clientSecret + repo: name.github.io #仓库名称 + owner: #github用户名 + admin: + distractionFreeMode: true #是否启用类似FB的阴影遮罩 + + +# 统计 + +# Analytics settings +# Baidu Analytics +ba_track_id: +# Google Analytics +ga_track_id: # Format: UA-xxxxxx-xx +ga_domain: # 默认的是 auto, 这里我是自定义了的域名，你如果没有自己的域名，需要改成auto + + + + + +# Featured Tags +featured-tags: true # 是否使用首页标签 +featured-condition-size: 1 # 相同标签数量大于这个数，才会出现在首页 + + + +# Progressive Web Apps +chrome-tab-theme-color: "#000000" +service-worker: true + + + +# Friends +friends: [ + { + title: "WP", + href: "https://wangpei.ink" + },{ + title: "简书·BY", + href: "http://www.jianshu.com/u/e71990ada2fd" + },{ + title: "Apple", + href: "https://apple.com" + },{ + title: "Apple Developer", + href: "https://developer.apple.com/" + } +] diff --git a/about.html b/about.html new file mode 100644 index 0000000..1b72750 --- /dev/null +++ b/about.html @@ -0,0 +1,126 @@ +--- +layout: page +title: "About" +description: "Hey, this is WangPei." +header-img: "img/post-bg-rwd.jpg" +--- + + + + + +
+ + +

冰冻三尺 非一日之寒
+ 积土成山 非斯须之作

+ +

你好，我是某某，来自……。

+ +

介绍一下你自己。

+ + + +

+ +
Talks
+ + +
+ + + + + + + +{% if site.gitalk.enable %} + + + + +
+ +{% endif %} + + + +{% if site.disqus.enable %} + +
+
+
+
+ + + + + +{% endif %} + diff --git a/codecov.yml b/codecov.yml new file mode 100644 index 0000000..2fbfde4 --- /dev/null +++ b/codecov.yml @@ -0,0 +1,2 @@ +codecov: + token: d8b2c89f-64a9-4b9a-ac44-da4e871caeff diff --git a/feed.xml b/feed.xml new file mode 100644 index 0000000..022378b --- /dev/null +++ b/feed.xml @@ -0,0 +1,30 @@ +--- +layout: null +--- + + + + {{ site.title | xml_escape }} + {{ site.description | xml_escape }} + {{ site.url }}{{ site.baseurl }}/ + + {{ site.time | date_to_rfc822 }} + {{ site.time | date_to_rfc822 }} + Jekyll v{{ jekyll.version }} + {% for post in site.posts limit:10 %} + + {{ post.title | xml_escape }} + {{ post.content | xml_escape }} + {{ post.date | date_to_rfc822 }} + {{ post.url | prepend: site.baseurl | prepend: site.url }} + {{ post.url | prepend: site.baseurl | prepend: site.url }} + {% for tag in post.tags %} + {{ tag | xml_escape }} + {% endfor %} + {% for cat in post.categories %} + {{ cat | xml_escape }} + {% endfor %} + + {% endfor %} + + diff --git a/index.html b/index.html index dc17f7f..c68e461 100644 --- a/index.html +++ b/index.html @@ -1 +1,42 @@ -"HelloWorld" +--- +layout: page +description: "填上一句你想填的话，在index.html中更改" +--- + +{% for post in paginator.posts %} +
+ +

+ {{ post.title }} +

+ {% if post.subtitle %} +

+ {{ post.subtitle }} +

+ {% endif %} +
+ {{ post.content | strip_html | truncate:200 }} +
+ +

+ Posted by {% if post.author %}{{ post.author }}{% else %}{{ site.title }}{% endif %} on {{ post.date | date: "%B %-d, %Y" }} +

+
+
+{% endfor %} + + +{% if paginator.total_pages > 1 %} + +{% endif %} diff --git a/offline.html b/offline.html new file mode 100644 index 0000000..e9adccb --- /dev/null +++ b/offline.html @@ -0,0 +1,25 @@ +--- +layout: default +description: "网络似乎出现了问题 😥" +header-img: "img/404-bg.jpg" +permalink: /offline.html +--- + + + +
+
+
+
+
+

Offline

+ {{ page.description }} +
+
+
+
+
+ + diff --git a/package.json b/package.json new file mode 100644 index 0000000..19d4450 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "wp-blog", + "title": "WP Blog", + "author": "WP ", + "version": "1.7.0", + "homepage": "http://xiaokeai18.github.io", + "repository": { + "type": "git", + "url": "https://github.com/xiaokeai18/xiaokeai18.github.io" + }, + "bugs": "https://github.com/xiaokeai18/xiaokeai18.github.io/issues", + "devDependencies": { + "grunt": "~0.4.5", + "grunt-contrib-less": "~0.11.4", + "grunt-contrib-watch": "~0.6.1", + "grunt-banner": "~0.2.3", + "grunt-contrib-uglify": "~0.5.1" + }, + "scripts": { + "preview": "cd _site; python -m SimpleHTTPServer 8020", + "py3view": "cd _site; python3 -m http.server 8020", + "watch" : "grunt watch & npm run preview & jekyll serve -w", + "py3wa" : "grunt watch & npm run py3view & jekyll serve -w", + "boil" : "git push boilerplate boilerplate:master", + "push" : "git push origin master --tag", + "cafe" : "git co gitcafe-pages; git merge master; git push gitcafe gitcafe-pages:gitcafe-pages --tag; git co master;" + } +} diff --git a/sw.js b/sw.js new file mode 100644 index 0000000..adf7d39 --- /dev/null +++ b/sw.js @@ -0,0 +1,148 @@ +/* =========================================================== + * sw.js + * =========================================================== + * Copyright 2016 @huxpro + * Licensed under Apache 2.0 + * Register service worker. + * ========================================================== */ + +const PRECACHE = 'precache-v1'; +const RUNTIME = 'runtime'; +const HOSTNAME_WHITELIST = [ + self.location.hostname, + "huangxuan.me", + "yanshuo.io", + "cdnjs.cloudflare.com" +] + + +// The Util Function to hack URLs of intercepted requests +const getFixedUrl = (req) => { + var now = Date.now(); + url = new URL(req.url) + + // 1. fixed http URL + // Just keep syncing with location.protocol + // fetch(httpURL) belongs to active mixed content. + // And fetch(httpRequest) is not supported yet. + url.protocol = self.location.protocol + + // 2. add query for caching-busting. + // Github Pages served with Cache-Control: max-age=600 + // max-age on mutable content is error-prone, with SW life of bugs can even extend. + // Until cache mode of Fetch API landed, we have to workaround cache-busting with query string. + // Cache-Control-Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=453190 + url.search += (url.search ? '&' : '?') + 'cache-bust=' + now; + return url.href +} + +// The Util Function to detect and polyfill req.mode="navigate" +// request.mode of 'navigate' is unfortunately not supported in Chrome +// versions older than 49, so we need to include a less precise fallback, +// which checks for a GET request with an Accept: text/html header. +const isNavigationReq = (req) => (req.mode === 'navigate' || (req.method === 'GET' && req.headers.get('accept').includes('text/html'))) + +// The Util Function to detect if a req is end with extension +// Accordin to Fetch API spec +// Any HTML's navigation has consistently mode="navigate" type="" and destination="document" +// including requesting an img (or any static resources) from URL Bar directly. +// So It ends up with that regExp is still the king of URL routing ;) +// P.S. An url.pathname has no '.' can not indicate it ends with extension (e.g. /api/version/1.2/) +const endWithExtension = (req) => Boolean(new URL(req.url).pathname.match(/\.\w+$/)) + +// Redirect in SW manually fixed github pages arbitray 404s on things?blah +// what we want: +// repo?blah -> !(gh 404) -> sw 302 -> repo/?blah +// .ext?blah -> !(sw 302 -> .ext/?blah -> gh 404) -> .ext?blah +// If It's a navigation req and it's url.pathname isn't end with '/' or '.ext' +// it should be a dir/repo request and need to be fixed (a.k.a be redirected) +// Tracking https://twitter.com/Huxpro/status/798816417097224193 +const shouldRedirect = (req) => (isNavigationReq(req) && new URL(req.url).pathname.substr(-1) !== "/" && !endWithExtension(req)) + +// The Util Function to get redirect URL +// `${url}/` would mis-add "/" in the end of query, so we use URL object. +// P.P.S. Always trust url.pathname instead of the whole url string. +const getRedirectUrl = (req) => { + url = new URL(req.url) + url.pathname += "/" + return url.href +} + +/** + * @Lifecycle Install + * Precache anything static to this version of your app. + * e.g. App Shell, 404, JS/CSS dependencies... + * + * waitUntil() : installing ====> installed + * skipWaiting() : waiting(installed) ====> activating + */ +self.addEventListener('install', e => { + e.waitUntil( + caches.open(PRECACHE).then(cache => { + return cache.add('offline.html') + .then(self.skipWaiting()) + .catch(err => console.log(err)) + }) + ) +}); + + +/** + * @Lifecycle Activate + * New one activated when old isnt being used. + * + * waitUntil(): activating ====> activated + */ +self.addEventListener('activate', event => { + console.log('service worker activated.') + event.waitUntil(self.clients.claim()); +}); + + +/** + * @Functional Fetch + * All network requests are being intercepted here. + * + * void respondWith(Promise r); + */ +self.addEventListener('fetch', event => { + // logs for debugging + console.log(`fetch ${event.request.url}`) + //console.log(` - type: ${event.request.type}; destination: ${event.request.destination}`) + //console.log(` - mode: ${event.request.mode}, accept: ${event.request.headers.get('accept')}`) + + // Skip some of cross-origin requests, like those for Google Analytics. + if (HOSTNAME_WHITELIST.indexOf(new URL(event.request.url).hostname) > -1) { + + // Redirect in SW manually fixed github pages 404s on repo?blah + if(shouldRedirect(event.request)){ + event.respondWith(Response.redirect(getRedirectUrl(event.request))) + return; + } + + // Stale-while-revalidate + // similar to HTTP's stale-while-revalidate: https://www.mnot.net/blog/2007/12/12/stale + // Upgrade from Jake's to Surma's: https://gist.github.com/surma/eb441223daaedf880801ad80006389f1 + const cached = caches.match(event.request); + const fixedUrl = getFixedUrl(event.request); + const fetched = fetch(fixedUrl, {cache: "no-store"}); + const fetchedCopy = fetched.then(resp => resp.clone()); + + // Call respondWith() with whatever we get first. + // If the fetch fails (e.g disconnected), wait for the cache. + // If there’s nothing in cache, wait for the fetch. + // If neither yields a response, return offline pages. + event.respondWith( + Promise.race([fetched.catch(_ => cached), cached]) + .then(resp => resp || fetched) + .catch(_ => caches.match('offline.html')) + ); + + // Update the cache with the version we fetched (only for ok status) + event.waitUntil( + Promise.all([fetchedCopy, caches.open(RUNTIME)]) + .then(([response, cache]) => response.ok && cache.put(event.request, response)) + .catch(_ => {/* eat any errors */}) + ); + } +}); diff --git a/tags.html b/tags.html new file mode 100644 index 0000000..b928004 --- /dev/null +++ b/tags.html @@ -0,0 +1,70 @@ +--- +title: Tags +layout: default +description: keep hungry keep foolish +header-img: "img/tag-bg.jpg" +--- + + +
+
+
+
+
+

{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}

+ {{ page.description }} +
+
+
+
+
+ + +
+
+
+ +
+ {% for tag in site.tags %} + {{ tag[0] }} + {% endfor %} +
+ + + + + {% for tag in site.tags %} +
+ + {{ tag[0] }} + + {% for post in tag[1] %} + +
+ +

+ {{ post.title }} +

+ {% if post.subtitle %} +

+ {{ post.subtitle }} +

+ {% endif %} + + +
+
+ {% endfor %} +
+ {% endfor %} + +
+
+