From cd0210a074ccce177c8894d11ce41a79c81ec337 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Thu, 7 Feb 2019 21:18:25 +0900 Subject: [PATCH 1/4] Add Gatsby plugin and CSS rule to fix emphasis issue with Japanese characters --- gatsby-browser.js | 3 +++ gatsby-config.js | 1 + plugins/gatsby-remark-japanese-fix/index.js | 24 +++++++++++++++++++ .../gatsby-remark-japanese-fix/package.json | 4 ++++ src/css/ja-fix.css | 4 ++++ 5 files changed, 36 insertions(+) create mode 100644 plugins/gatsby-remark-japanese-fix/index.js create mode 100644 plugins/gatsby-remark-japanese-fix/package.json create mode 100644 src/css/ja-fix.css diff --git a/gatsby-browser.js b/gatsby-browser.js index 83d72722d..966a061af 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -15,6 +15,9 @@ require('./src/css/reset.css'); require('./src/prism-styles'); require('./src/css/algolia.css'); +// Import Japanese style fix CSS +require('./src/css/ja-fix.css'); + // Expose React and ReactDOM as globals for console playground window.React = React; window.ReactDOM = ReactDOM; diff --git a/gatsby-config.js b/gatsby-config.js index 456396f92..349e2e486 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -55,6 +55,7 @@ module.exports = { maxWidth: 840, }, }, + 'gatsby-remark-japanese-fix', 'gatsby-remark-header-custom-ids', { resolve: 'gatsby-remark-code-repls', diff --git a/plugins/gatsby-remark-japanese-fix/index.js b/plugins/gatsby-remark-japanese-fix/index.js new file mode 100644 index 000000000..bf69d8c37 --- /dev/null +++ b/plugins/gatsby-remark-japanese-fix/index.js @@ -0,0 +1,24 @@ +const toString = require('mdast-util-to-string'); +const visit = require('unist-util-visit'); + +const hasJapanese = str => { + return /[\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u30e0-\u9fcf。、]/.test(str); +}; + +/** + * Iterates over emphasises ('s) within the AST created by Markdown docs. + * Applies 'em-ja' class only when it contains some Japanese character, + * so that it can be displayed differently. + */ + +module.exports = ({ markdownAST }, options) => { + visit(markdownAST, 'emphasis', node => { + const nodeStr = toString(node); + if (hasJapanese(nodeStr)) { + node.data = node.data || {}; + node.data.hProperties = node.data.hProperties || {}; + node.data.hProperties.class = 'em-ja'; + } + }); + return markdownAST; +}; diff --git a/plugins/gatsby-remark-japanese-fix/package.json b/plugins/gatsby-remark-japanese-fix/package.json new file mode 100644 index 000000000..d3eb061f4 --- /dev/null +++ b/plugins/gatsby-remark-japanese-fix/package.json @@ -0,0 +1,4 @@ +{ + "name": "gatsby-remark-japanese-fix", + "version": "0.0.1" +} diff --git a/src/css/ja-fix.css b/src/css/ja-fix.css new file mode 100644 index 000000000..275ca0c07 --- /dev/null +++ b/src/css/ja-fix.css @@ -0,0 +1,4 @@ +.em-ja { + font-weight: bolder; + font-style: normal; +} \ No newline at end of file From 6b8efd81fcd9a3366003247dbd6ee4c3633db9b9 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Thu, 7 Feb 2019 21:39:08 +0900 Subject: [PATCH 2/4] Fix code style issue --- plugins/gatsby-remark-japanese-fix/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/gatsby-remark-japanese-fix/index.js b/plugins/gatsby-remark-japanese-fix/index.js index bf69d8c37..b932e4b27 100644 --- a/plugins/gatsby-remark-japanese-fix/index.js +++ b/plugins/gatsby-remark-japanese-fix/index.js @@ -11,7 +11,7 @@ const hasJapanese = str => { * so that it can be displayed differently. */ -module.exports = ({ markdownAST }, options) => { +module.exports = ({markdownAST}, options) => { visit(markdownAST, 'emphasis', node => { const nodeStr = toString(node); if (hasJapanese(nodeStr)) { From d17b7fe7a3ae41666205ad786661261a27b39af7 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Fri, 8 Feb 2019 01:35:44 +0900 Subject: [PATCH 3/4] Fix hasJapanese unicode codepoints --- plugins/gatsby-remark-japanese-fix/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/plugins/gatsby-remark-japanese-fix/index.js b/plugins/gatsby-remark-japanese-fix/index.js index b932e4b27..cd58d1584 100644 --- a/plugins/gatsby-remark-japanese-fix/index.js +++ b/plugins/gatsby-remark-japanese-fix/index.js @@ -2,7 +2,8 @@ const toString = require('mdast-util-to-string'); const visit = require('unist-util-visit'); const hasJapanese = str => { - return /[\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u30e0-\u9fcf。、]/.test(str); + // Detects katakana, hiragana, iteration mark (々), and CJK unified ideographs + return /[\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u4e00-\u9fea。、]/.test(str); }; /** From 27f15ce9212bfed7989d7b109e1b627f34320e2e Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Fri, 8 Feb 2019 01:40:31 +0900 Subject: [PATCH 4/4] Fix typo, comment, function rename --- plugins/gatsby-remark-japanese-fix/index.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/plugins/gatsby-remark-japanese-fix/index.js b/plugins/gatsby-remark-japanese-fix/index.js index cd58d1584..7a5c33e3c 100644 --- a/plugins/gatsby-remark-japanese-fix/index.js +++ b/plugins/gatsby-remark-japanese-fix/index.js @@ -1,21 +1,22 @@ const toString = require('mdast-util-to-string'); const visit = require('unist-util-visit'); -const hasJapanese = str => { - // Detects katakana, hiragana, iteration mark (々), and CJK unified ideographs +const hasJapaneseCharacter = str => { + // Detects katakana, hiragana, iteration marks, and CJK unified ideographs return /[\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u4e00-\u9fea。、]/.test(str); }; /** - * Iterates over emphasises ('s) within the AST created by Markdown docs. - * Applies 'em-ja' class only when it contains some Japanese character, - * so that it can be displayed differently. + * Iterates over emphases ('s) within the AST created by remark. + * Applies 'em-ja' class only when it contains a Japanese character, + * so that it can be displayed with a different style. */ module.exports = ({markdownAST}, options) => { visit(markdownAST, 'emphasis', node => { const nodeStr = toString(node); - if (hasJapanese(nodeStr)) { + if (hasJapaneseCharacter(nodeStr)) { + // Patch AST node.data = node.data || {}; node.data.hProperties = node.data.hProperties || {}; node.data.hProperties.class = 'em-ja';