From 46acd4fae94d7ffb1800dc5bc31dc5fd5a3645f1 Mon Sep 17 00:00:00 2001
From: ppoffice <zrp1994@gmail.com>
Date: Mon, 9 Mar 2020 23:03:38 -0400
Subject: [PATCH] feat(style): make theme variant configurable

---
 include/hexo/filter/stylus.js                | 13 +++++++++++++
 include/register.js                          |  1 +
 include/schema/config.json                   |  9 +++++++++
 layout/common/head.jsx                       |  8 ++++----
 layout/plugin/back_to_top.jsx                |  2 +-
 source/css/cyberpunk.styl                    |  3 ++-
 source/css/default.styl                      |  3 +++
 source/js/{back-to-top.js => back_to_top.js} |  0
 8 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 include/hexo/filter/stylus.js
 create mode 100644 source/css/default.styl
 rename source/js/{back-to-top.js => back_to_top.js} (100%)

diff --git a/include/hexo/filter/stylus.js b/include/hexo/filter/stylus.js
new file mode 100644
index 0000000..923790f
--- /dev/null
+++ b/include/hexo/filter/stylus.js
@@ -0,0 +1,13 @@
+/**
+ * Add resolved variables to the theme config for stylus.
+ */
+module.exports = function (hexo) {
+    hexo.extend.filter.register('template_locals', locals => {
+        const fontcdn = hexo.extend.helper.get('fontcdn').bind(hexo);
+        hexo.theme.config['@fontface'] = {
+            default: fontcdn('Ubuntu:wght@400;600&family=Source+Code+Pro', 'css2'),
+            cyberpunk: fontcdn('Oxanium:wght@300;400;600&family=Roboto+Mono', 'css2')
+        };
+        return locals;
+    });
+};
diff --git a/include/register.js b/include/register.js
index 5b2e78b..6a5a4b7 100644
--- a/include/register.js
+++ b/include/register.js
@@ -3,6 +3,7 @@ const logger = require('hexo-log')();
 module.exports = hexo => {
     logger.info('=== Registering Hexo extensions ===');
     require('hexo-component-inferno/lib/hexo/filter/locals')(hexo);
+    require('./hexo/filter/stylus')(hexo);
     require('./hexo/generator/category')(hexo);
     require('./hexo/generator/insight')(hexo);
     require('hexo-component-inferno/lib/hexo/generator/categories')(hexo);
diff --git a/include/schema/config.json b/include/schema/config.json
index e6268cd..4bf7d06 100644
--- a/include/schema/config.json
+++ b/include/schema/config.json
@@ -9,6 +9,15 @@
             "description": "Version of the configuration file",
             "default": "3.0.0"
         },
+        "variant": {
+            "type": "string",
+            "description": "Icarus theme variant, can be \"default\" or \"cyberpunk\"",
+            "enum": [
+                "default",
+                "cyberpunk"
+            ],
+            "default": "default"
+        },
         "logo": {
             "type": [
                 "string",
diff --git a/layout/common/head.jsx b/layout/common/head.jsx
index 434a77c..a97b81b 100644
--- a/layout/common/head.jsx
+++ b/layout/common/head.jsx
@@ -30,13 +30,14 @@ function getPageTitle(page, siteTitle, helper) {
 module.exports = class extends Component {
     render() {
         const { env, site, config, helper, page } = this.props;
-        const { url_for, cdn, iconcdn, fontcdn, is_post } = helper;
+        const { url_for, cdn, iconcdn, is_post } = helper;
         const {
             url,
             meta_generator = true,
             head = {},
             article,
-            highlight
+            highlight,
+            variant = 'default'
         } = config;
         const {
             meta = [],
@@ -137,10 +138,9 @@ module.exports = class extends Component {
             {rss ? <link rel="alternative" href={url_for(rss)} title={config.title} type="application/atom+xml" /> : null}
             {favicon ? <link rel="icon" href={url_for(favicon)} /> : null}
             <link rel="stylesheet" href={iconcdn()} />
-            <link rel="stylesheet" href={fontcdn('Ubuntu:400,600|Source+Code+Pro')} />
             {hlTheme ? <link rel="stylesheet" href={cdn('highlight.js', '9.12.0', 'styles/' + hlTheme + '.css')} /> : null}
+            <link rel="stylesheet" href={url_for('/css/' + variant + '.css')} />
             <Plugins site={site} config={config} helper={helper} page={page} head={true} />
-            <link rel="stylesheet" href={url_for('/css/style.css')} />
 
             {adsenseClientId ? <script data-ad-client={adsenseClientId}
                 src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async={true}></script> : null}
diff --git a/layout/plugin/back_to_top.jsx b/layout/plugin/back_to_top.jsx
index a42d1a4..b25d7b4 100644
--- a/layout/plugin/back_to_top.jsx
+++ b/layout/plugin/back_to_top.jsx
@@ -22,7 +22,7 @@ BackToTop.Cacheable = cacheComponent(BackToTop, 'plugin.backtotop', props => {
     }
     return {
         title: helper.__('plugin.backtotop'),
-        jsUrl: helper.url_for('/js/back-to-top.js')
+        jsUrl: helper.url_for('/js/back_to_top.js')
     };
 });
 
diff --git a/source/css/cyberpunk.styl b/source/css/cyberpunk.styl
index 05f310a..4ee2e19 100644
--- a/source/css/cyberpunk.styl
+++ b/source/css/cyberpunk.styl
@@ -1,6 +1,7 @@
-@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;600&display=swap')
+@import url(hexo-config('@fontface.cyberpunk'))
 
 $family-sans-serif ?= 'Oxanium', Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif
+$family-code ?= 'Roboto Mono', monospace, 'Microsoft YaHei'
 // shadow and radius
 $shadow ?= none
 $radius ?= 0
diff --git a/source/css/default.styl b/source/css/default.styl
new file mode 100644
index 0000000..d89421d
--- /dev/null
+++ b/source/css/default.styl
@@ -0,0 +1,3 @@
+@import url(hexo-config('@fontface.default'))
+
+@import 'style'
diff --git a/source/js/back-to-top.js b/source/js/back_to_top.js
similarity index 100%
rename from source/js/back-to-top.js
rename to source/js/back_to_top.js