Dark mode (#106)

* update some text

* update front-end source

* fix incorrect modification of article img

README.md

@@ -22,13 +22,9 @@
 ## Features
 
 - SPA built with [angular]
-- Custom accent color, background, fonts
+- Custom accent color, background, fonts, dark mode
 - Custom code syntax highlighting
-- Sub-page routes
-- Internationalization (i18n)
-  - :cn: Simplified Chinese & Traditional Chinese
-  - :us: English
-  - :jp: Japanese
+- Sub-page
 - Search
 - Comments
   - [Disqus]
@@ -47,10 +43,8 @@
   - [manifest.json]
   - Offline support ([workbox])
 - SEO
-  - Canonical link
   - Built-in `sitemap.xml`
   - [Structured Data]
-  - Open Graph Meta Tags
 
 ## Quick start
 

README_zh-Hans.md

@@ -21,13 +21,9 @@
 ## 特色
 
 - SPA built with [angular]
-- 自定义色调、背景、字体
+- 自定义色调、背景、字体、暗色主题
 - 自定义代码语法高亮
-- 可嵌套的 page 路由
-- 多语言 (i18n)
-  - :cn: Simplified Chinese & Traditional Chinese
-  - :us: English
-  - :jp: Japanese
+- 可嵌套 page 路由
 - 评论
   - [Disqus]
   - [LiveRe]
@@ -46,10 +42,8 @@
   - [manifest.json]
   - 离线支持 ([workbox])
 - SEO
-  - canonical link
   - 内置 `sitemap.xml`
   - [Structured Data]
-  - Open Graph Meta Tags
 
 ## 开始使用
 

_config.yml

@@ -19,6 +19,10 @@ appearance:
   #   - 'url(//www.toptal.com/designers/subtlepatterns/patterns/confectionary.png) #f5f7fa'
   #   - '#2a2b33'
 
+  # You can also set only the background when the sidebar is open.
+  # background:
+  #   - '#2a2b33'
+
   # Maximum width of content
   # content_width: 640
 
@@ -48,9 +52,9 @@ appearance:
     # Code and code block
     code: Inconsolata, monospace
 
-  # Code Highlight theme
+  # Code Syntax Highlighting
   # Uses an architecture called "base16" (https://github.com/chriskempson/base16),
-  # the default highlight theme is a customized Atelier Dune Light theme,
+  # the default theme is a customized Atelier Dune Light theme,
   # please feel free to explore more.
   highlight:
 
@@ -78,29 +82,38 @@ appearance:
   #   '#8abeb7', '#81a2be', '#b294bb', '#a3685a'
   # ]
 
+  # Mode
+  # Specify `dark` to apply a built-in dark mode,
+  # or fully custom colors: `[foreground color, card background, border-color]`
+  # Note, the middle value can be any valid css background value
+  # `mode: dark` is equivalent to `mode: ['#d8d8d8', '#252525', '#444']`
+  mode:
+
 # Sidebar profile
 profile:
-  # `email` will fallback to `hexo.config.email` if not specified
+  # `email` is used for gravatar(https://en.gravatar.com),
+  # fallback to `hexo.config.email` if not specified
   email:
 
-  # Avatar URL, email address will be used for gravatar(https://en.gravatar.com) avatar if not specified.
+  # You can set Avatar URL directly
   # avatar:
 
   bio: Awesome guy.
 
-# Sidebar menu
+# Sidebar navigation links
 menu:
   Home: /
   # About: /about
   # Links: /links
   # Github: https://github.com/username
 
-# Sidebar social media
+# Social media URL
 # Try to sort by changing the order of the keys
 sns:
   # `email` will fallback to `profile.email` if not specified
   email:
-  # `feed` will fallback to `hexo.config.feed.path` if not specified
+  # If you use hexo-generator-feed, `sns.feed` can be left blank
+  # and the theme will try to get `hexo.config.feed.path`.
   feed:
   github:
   twitter:
@@ -118,10 +131,10 @@ sns:
   weibo:
   qq:
 
-# Sidebar footer
+# Sidebar footer copyright info
 footer:
-  # Default to `©year • author`, set to false to disable.
-  # copyright:
+  # Set to false to hide.
+  # copyright: '&copy; 2019 • <a href="">John Doe</a>'
 
   # Set to false to hide Hexo link.
   # powered: false
@@ -154,13 +167,9 @@ page:
 post:
   # per_page: 10
 
-  # Display Table of content, default to `true`
+  # The following settings are the same as the page
   # toc: false
-
-  # Display reward, default to `false`
   # reward: true
-
-  # Display copyright notice, default to `false`
   # copyright: true
 
 # Archive

lib/configSchema.json

@@ -49,6 +49,20 @@
           "type": "array",
           "items": { "$ref": "#/definitions/color" },
           "minItems": 15
+        },
+        "mode": {
+          "oneOf": [
+            { "enum": ["dark"] },
+            {
+              "type": "array",
+              "items": [
+                { "$ref": "#/definitions/color" },
+                { "type": "string" },
+                { "$ref": "#/definitions/color" }
+              ],
+              "minItems": 3
+            }
+          ]
         }
       },
       "required": ["accent_color"],

lib/filter/post.js

@@ -2,7 +2,6 @@ const cheerio = require('cheerio');
 const { date } = require('hexo/lib/plugins/helper/date');
 const bounded = '<div class="article-bounded"></div>';
 const table = '<div class="article-table"></div>';
-const img = '<div class="article-img"></div>';
 const { snippet, getPagePath, parseToc, isObject, isEmptyObject, localeId, pick } = require('../utils');
 
 // cache
@@ -112,18 +111,17 @@ module.exports = function (data) {
     $('img').each(function () {
       const $img = $(this);
       const src = $img.attr('src');
-      const $parents = $img.parents();
 
       // assets & post_asset_folder
       src && $img.attr('src', uriReplacer(src, assetPath));
 
-      // definitely a block img
-      if (!$parents.length || !$parents.eq($parents.length - 1).text().trim()) {
+      if (
+        this.root // {% img %}
+        || (this.parent.tagName === 'p' && !$(this.parent).text().trim()) // \n![]()\n
+        || (this.parent.tagName === 'figure') // <figure><img></figure>
+      ) {
         // mark as zoomable
-        $img.attr('data-zoomable', '');
-
-        // wrap img to behave as a block
-        (!$parents.length ? $img : $parents.eq($parents.length - 1)).wrap(img);
+        $img.addClass('article-img');
       }
     });
 

lib/generator/theme.js

@@ -1,9 +1,9 @@
 const { md5 } = require('../utils');
-const generateTheme = require('../../source/_theme.js').default;
+const { $appearance } = require('../../source/_theme.js');
 
 module.exports = function () {
   const theme = this.theme.config;
-  const data = generateTheme(theme.appearance);
+  const data = $appearance(theme.appearance);
 
   theme.runtime.themeHash = md5(data);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-inside",
-  "version": "2.3.0-beta.3",
+  "version": "2.3.0-rc.0",
   "description": "❤️ SPA, flat and clean theme for Hexo.",
   "scripts": {
     "test": "jasmine --config=test/jasmine.json"

source/_resources.json

@@ -1 +1 @@
-{"styles":["styles.6413cb5fd384752f1714.css"],"scripts":["runtime.9c308a63d02029c20228.js","polyfills-es5.613d1909ec381c0aefb7.js","polyfills.23aa31104b29f3163090.js"],"locales":{"en":"main.c0d55e7428280128d494.en.js","zh-Hant":"main.12166a654353e0a82d68.zh-Hant.js","zh-Hans":"main.3a9ad2f49fd8634e7fa0.zh-Hans.js","ja":"main.e01c85758301d20058a7.ja.js"}}
+{"styles":["styles.b052e0427aa70b7d0587.css"],"scripts":["runtime.9c308a63d02029c20228.js","polyfills-es5.613d1909ec381c0aefb7.js","polyfills.23aa31104b29f3163090.js"],"locales":{"ja":"main.1c6c0dbb8fec445fc42a.ja.js","en":"main.7c07007d02c08b471cdf.en.js","zh-Hant":"main.9d756d57e227aba70f33.zh-Hant.js","zh-Hans":"main.d55b8d92fb07c381cd17.zh-Hans.js"}}

test/scripts/filters/post.js

@@ -132,15 +132,16 @@ describe('post', function () {
     const data = {
       layout: 'post',
       excerpt: '',
-      content: `<p><img></p><p>img<img></p><p><img><img></p>`,
+      content: `<p><img></p><p>img<img></p><p><img><img></p><figure><img></figure>`,
     };
 
     post.call(this.ctx, data);
 
     expect(data.content.replace(/\=\"\"/g, '')).toBe(
-      '<div class="article-img"><p><img data-zoomable></p></div>' +
+      '<p><img class="article-img"></p>' +
       '<p>img<img></p>' +
-      '<div class="article-img"><p><img data-zoomable><img data-zoomable></p></div>');
+      '<p><img class="article-img"><img class="article-img"></p>' +
+      '<figure><img class="article-img"></figure>');
   });
 
   it('add additional tag for script', function () {
@@ -169,7 +170,7 @@ describe('post', function () {
 
     post.call(this.ctx, data);
     expect(data.thumbnail).toBe('https://sample.com/img/sample.jpg?q=80')
-    expect(data.content).toBe('<img src="https://sample.com/img/sample.jpg?q=80">')
+    expect(data.content).toBe('<img src="https://sample.com/img/sample.jpg?q=80" class="article-img">')
 
     data.layout = 'page'
     post.call(this.ctx, data);
@@ -184,42 +185,41 @@ describe('post', function () {
       layout: 'post',
       thumbnail: 'data:image',
       excerpt: '',
-      content: '<img src="data:image">',
+      content: '<p>inline<img src="data:image"></p>',
     };
 
-    post.call(this.ctx, data);
+    post.call(this.ctx, { ...data });
 
     expect(data.thumbnail).toBe('data:image')
-    expect(data.content).toBe('<img src="data:image">')
+    expect(data.content).toBe('<p>inline<img src="data:image"></p>')
   });
 
   it('escape with absolute path', function () {
     const data = {
       layout: 'post',
       thumbnail: 'https://abc.com',
       excerpt: '',
-      content: '<img src="https://abc.com">',
+      content: '<p>inline<img src="https://abc.com"></p>',
     };
 
     post.call(this.ctx, data);
 
     expect(data.thumbnail).toBe('https://abc.com')
-    expect(data.content).toBe('<img src="https://abc.com">')
+    expect(data.content).toBe('<p>inline<img src="https://abc.com"></p>')
   });
 
   it('parses color', function () {
     const data = {
       layout: 'post',
       thumbnail: 'img/sample.jpg #000',
       excerpt: '',
-      content: '<img src="img/sample.jpg">',
+      content: '',
     };
 
     post.call(this.ctx, data);
 
     expect(data.thumbnail).toBe('https://sample.com/img/sample.jpg?q=80')
     expect(data.color).toBe('#000')
-    expect(data.content).toBe('<img src="https://sample.com/img/sample.jpg?q=80">')
   });
 
   it('don\'t parses color when `color` is specified', function () {
@@ -235,6 +235,6 @@ describe('post', function () {
 
     expect(data.thumbnail).toBe('https://sample.com/img/sample.jpg?q=80')
     expect(data.color).toBe('#fff')
-    expect(data.content).toBe('<img src="https://sample.com/img/sample.jpg?q=80">')
+    expect(data.content).toBe('<img src="https://sample.com/img/sample.jpg?q=80" class="article-img">')
   });
 });