theme support

2024-08-17 03:00:23 +03:00 · 2018-09-30 18:58:33 -07:00 · 2018-09-30 18:58:33 -07:00 · 25b48035c6
commit 25b48035c6
parent 46f34c3630
20 changed files with 120 additions and 57 deletions
--- a/package.json
+++ b/package.json
@ -24,12 +24,12 @@
    "build": "parcel build src/*.html src/client.ts --experimental-scope-hoisting",
    "lint": "tslint --project tsconfig.json",
    "predeploy": "yarn run build && touch dist/.nojekyll && echo 'utteranc.es' > dist/CNAME",
-    "deploy": "gh-pages --dist dist",
-    "postinstall": "mv node_modules/github-syntax-light/lib/github-light.css node_modules/github-syntax-light/lib/github-light.scss"
+    "deploy": "gh-pages --dist dist"
  },
  "devDependencies": {
    "autoprefixer": "^9.1.5",
    "gh-pages": "^2.0.0",
+    "github-syntax-dark": "^0.5.0",
    "github-syntax-light": "^0.5.0",
    "node-sass": "^4.9.3",
    "parcel-bundler": "^1.10.1",
--- a/src/index.html
+++ b/src/index.html
@ -5,7 +5,7 @@
    <meta name="description" content="A lightweight commenting system using GitHub issues.">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="./index.scss">
+    <link rel="stylesheet" href="./sass/themes/github-dark/index.scss">
    <link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png">
--- a/src/new-comment-component.ts
+++ b/src/new-comment-component.ts
@ -47,7 +47,7 @@ export class NewCommentComponent {
          </nav>
        </header>
        <div class="comment-body">
-          <textarea placeholder="Leave a comment" aria-label="comment"></textarea>
+          <textarea class="form-control" placeholder="Leave a comment" aria-label="comment"></textarea>
          <div class="markdown-body" style="display: none">
            ${nothingToPreview}
          </div>
--- a/src/sass/index.scss
+++ b/src/sass/index.scss
@ -4,7 +4,6 @@
@import "primer-forms/lib/form-group";
@import "primer-forms/lib/input-group";
@import "primer-markdown/index";
-@import "github-syntax-light/lib/github-light";
@import "./util";
@import "./timeline";
@import "./timeline-comment";
--- a/src/sass/permalink-code.scss
+++ b/src/sass/permalink-code.scss
--- a/src/sass/themes/github-dark/button.scss
+++ b/src/sass/themes/github-dark/button.scss
@ -0,0 +1,14 @@
+.btn-primary {
+  background: linear-gradient(#407045, #305530);
+  border-color: #083;
+  color: #e2e2e2;
+}
+
+.btn-primary:hover {
+  background: linear-gradient(#508055, #407045);
+}
+
+.btn-primary:disabled {
+  background: linear-gradient(#203522, #152715);
+  border-color: #041;
+}
--- a/src/sass/themes/github-dark/index.scss
+++ b/src/sass/themes/github-dark/index.scss
@ -0,0 +1,4 @@
+@import "./variables";
+@import "../../index";
+@import "./syntax";
+@import "./button.scss";
--- a/src/sass/themes/github-dark/syntax.scss
+++ b/src/sass/themes/github-dark/syntax.scss
@ -0,0 +1 @@
+@import "github-syntax-dark/lib/github-dark";
--- a/src/sass/themes/github-dark/utterances.scss
+++ b/src/sass/themes/github-dark/utterances.scss
@ -0,0 +1,4 @@
+@import "./variables";
+@import "../../utterances";
+@import "./syntax";
+@import "./button.scss";
--- a/src/sass/themes/github-dark/variables.scss
+++ b/src/sass/themes/github-dark/variables.scss
@ -0,0 +1,13 @@
+$gray-100: #222;
+$gray-200: #24292e;
+$gray-300: #343434;
+$gray-600: #7b7b7b;
+$bg-white: #181818;
+$bg-gray: #202020;
+$bg-gray-light: darken($bg-gray, 5%);
+$border-gray: $gray-300;
+$border-gray-dark: $border-gray;
+$text-gray: #949494;
+$text-gray-dark: #c0c0c0;
+$text-blue: rgb(65, 131, 196);
+$bg-blue-light: #182030;
--- a/src/sass/themes/github-light/index.scss
+++ b/src/sass/themes/github-light/index.scss
@ -0,0 +1,2 @@
+@import "../../index";
+@import "./syntax";
--- a/src/sass/themes/github-light/syntax.scss
+++ b/src/sass/themes/github-light/syntax.scss
@ -0,0 +1,6 @@
+@import "github-syntax-light/lib/github-light";
+
+// adjust syntax highlighting to ensure WCAG AAA rating
+.pl-ent {
+  color: #196128;
+}
--- a/src/sass/themes/github-light/utterances.scss
+++ b/src/sass/themes/github-light/utterances.scss
@ -0,0 +1,2 @@
+@import "../../utterances";
+@import "./syntax";
--- a/src/sass/timeline-comment.scss
+++ b/src/sass/timeline-comment.scss
--- a/src/sass/timeline.scss
+++ b/src/sass/timeline.scss
--- a/src/sass/util.scss
+++ b/src/sass/util.scss
@ -12,8 +12,3 @@
 .markdown-body .highlight-source-js > pre {
  -webkit-overflow-scrolling: touch;
 }
-
-// adjust syntax highlighting to ensure WCAG AAA rating
-.pl-ent {
-  color: #196128;
-}
--- a/src/sass/utterances.scss
+++ b/src/sass/utterances.scss
@ -3,7 +3,7 @@
@import "primer-markdown/index";
@import "primer-alerts/index";
@import "primer-navigation/lib/tabnav";
-@import "github-syntax-light/lib/github-light";
+@import "primer-forms/lib/form-control";
@import "./util";
@import "./timeline";
@import "./timeline-comment";
@ -19,6 +19,10 @@ body {
  padding-bottom: 20px;
 }

+.form-control {
+  font-size: $body-font-size;
+}
+
 .flash-not-installed {
  margin-bottom: $spacer-3;
 }
--- a/src/utterances.html
+++ b/src/utterances.html
@ -5,7 +5,7 @@
    <meta name="description" content="A lightweight commenting system using GitHub issues.">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="./utterances.scss">
+    <link rel="stylesheet" href="./sass/themes/github-dark/utterances.scss">
    <script>
      if (!window.Promise || !window.fetch) {
        if (Array.from === undefined) { Array.from = function(x) { return Array.prototype.slice.call(x); } }
--- a/src/utterances.ts
+++ b/src/utterances.ts
@ -25,6 +25,20 @@ function loadIssue(): Promise<Issue | null> {
  return loadIssueByTerm(page.issueTerm as string);
 }

+// function loadTheme() {
+//   if (page.stylesheet) {
+//     return new Promise(resolve => {
+//       const link = document.createElement('link');
+//       link.rel = 'stylesheet';
+//       link.setAttribute('crossorigin', 'anonymous');
+//       link.onload = resolve;
+//       link.href = page.stylesheet;
+//       document.head.appendChild(link);
+//     });
+//   }
+//   return Promise.resolve();
+// }
+
 Promise.all([loadIssue(), loadUser()])
  .then(([issue, user]) => bootstrap(issue, user));

--- a/yarn.lock
+++ b/yarn.lock
@ -10,17 +10,17 @@
    "@babel/highlight" "^7.0.0"

 "@babel/core@^7.0.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.1.0.tgz#08958f1371179f62df6966d8a614003d11faeb04"
-  integrity sha512-9EWmD0cQAbcXSc+31RIoYgEHx3KQ2CCSMDBhnXrShWvo45TMw+3/55KVxlhkG53kw9tl87DqINgHDgFVhZJV/Q==
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.1.2.tgz#f8d2a9ceb6832887329a7b60f9d035791400ba4e"
+  integrity sha512-IFeSSnjXdhDaoysIlev//UzHZbdEmm7D0EIH2qtse9xK7mXEZQpYjs2P00XlP1qYsYvid79p+Zgg6tz1mp6iVw==
  dependencies:
    "@babel/code-frame" "^7.0.0"
-    "@babel/generator" "^7.0.0"
-    "@babel/helpers" "^7.1.0"
-    "@babel/parser" "^7.1.0"
-    "@babel/template" "^7.1.0"
+    "@babel/generator" "^7.1.2"
+    "@babel/helpers" "^7.1.2"
+    "@babel/parser" "^7.1.2"
+    "@babel/template" "^7.1.2"
    "@babel/traverse" "^7.1.0"
-    "@babel/types" "^7.0.0"
+    "@babel/types" "^7.1.2"
    convert-source-map "^1.1.0"
    debug "^3.1.0"
    json5 "^0.5.0"
@ -29,12 +29,12 @@
    semver "^5.4.1"
    source-map "^0.5.0"

-"@babel/generator@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0.tgz#1efd58bffa951dc846449e58ce3a1d7f02d393aa"
-  integrity sha512-/BM2vupkpbZXq22l1ALO7MqXJZH2k8bKVv8Y+pABFnzWdztDB/ZLveP5At21vLz5c2YtSE6p7j2FZEsqafMz5Q==
+"@babel/generator@^7.0.0", "@babel/generator@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.1.2.tgz#fde75c072575ce7abbd97322e8fef5bae67e4630"
+  integrity sha512-70A9HWLS/1RHk3Ck8tNHKxOoKQuSKocYgwDN85Pyl/RBduss6AKxUR7RIZ/lzduQMSYfWEM4DDBu6A+XGbkFig==
  dependencies:
-    "@babel/types" "^7.0.0"
+    "@babel/types" "^7.1.2"
    jsesc "^2.5.1"
    lodash "^4.17.10"
    source-map "^0.5.0"
@ -203,14 +203,14 @@
    "@babel/traverse" "^7.1.0"
    "@babel/types" "^7.0.0"

-"@babel/helpers@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.1.0.tgz#429bf0f0020be56a4242883432084e3d70a8a141"
-  integrity sha512-V1jXUTNdTpBn37wqqN73U+eBpzlLHmxA4aDaghJBggmzly/FpIJMHXse9lgdzQQT4gs5jZ5NmYxOL8G3ROc29g==
+"@babel/helpers@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.1.2.tgz#ab752e8c35ef7d39987df4e8586c63b8846234b5"
+  integrity sha512-Myc3pUE8eswD73aWcartxB16K6CGmHDv9KxOmD2CeOs/FaEAQodr3VYGmlvOmog60vNQ2w8QbatuahepZwrHiA==
  dependencies:
-    "@babel/template" "^7.1.0"
+    "@babel/template" "^7.1.2"
    "@babel/traverse" "^7.1.0"
-    "@babel/types" "^7.0.0"
+    "@babel/types" "^7.1.2"

 "@babel/highlight@^7.0.0":
  version "7.0.0"
@ -221,10 +221,10 @@
    esutils "^2.0.2"
    js-tokens "^4.0.0"

-"@babel/parser@^7.0.0", "@babel/parser@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.0.tgz#a7cd42cb3c12aec52e24375189a47b39759b783e"
-  integrity sha512-SmjnXCuPAlai75AFtzv+KCBcJ3sDDWbIn+WytKw1k+wAtEy6phqI2RqKh/zAnw53i1NR8su3Ep/UoqaKcimuLg==
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.2.tgz#85c5c47af6d244fab77bce6b9bd830e38c978409"
+  integrity sha512-x5HFsW+E/nQalGMw7hu+fvPqnBeBaIr0lWJ2SG0PPL2j+Pm9lYvCrsZJGIgauPIENx0v10INIyFjmSNUD/gSqQ==

 "@babel/plugin-proposal-async-generator-functions@^7.1.0":
  version "7.1.0"
@ -363,9 +363,9 @@
    "@babel/helper-plugin-utils" "^7.0.0"

 "@babel/plugin-transform-destructuring@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.0.0.tgz#68e911e1935dda2f06b6ccbbf184ffb024e9d43a"
-  integrity sha512-Fr2GtF8YJSXGTyFPakPFB4ODaEKGU04bPsAllAIabwoXdFrPxL0LVXQX5dQWoxOjjgozarJcC9eWGsj0fD6Zsg==
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.1.2.tgz#5fa77d473f5a0a3f5266ad7ce2e8c995a164d60a"
+  integrity sha512-cvToXvp/OsYxtEn57XJu9BvsGSEYjAh9UeUuXpoi7x6QHB7YdWyQ4lRU/q0Fu1IJNT0o0u4FQ1DMQBzJ8/8vZg==
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"

@ -590,20 +590,20 @@
    semver "^5.3.0"

 "@babel/runtime@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0.tgz#adeb78fedfc855aa05bc041640f3f6f98e85424c"
-  integrity sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.1.2.tgz#81c89935f4647706fc54541145e6b4ecfef4b8e3"
+  integrity sha512-Y3SCjmhSupzFB6wcv1KmmFucH6gDVnI30WjOcicV10ju0cZjak3Jcs67YLIXBrmZYw1xCrVeJPbycFwrqNyxpg==
  dependencies:
    regenerator-runtime "^0.12.0"

-"@babel/template@^7.0.0", "@babel/template@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.1.0.tgz#58cc9572e1bfe24fe1537fdf99d839d53e517e22"
-  integrity sha512-yZ948B/pJrwWGY6VxG6XRFsVTee3IQ7bihq9zFpM00Vydu6z5Xwg0C3J644kxI9WOTzd+62xcIsQ+AT1MGhqhA==
+"@babel/template@^7.0.0", "@babel/template@^7.1.0", "@babel/template@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.1.2.tgz#090484a574fef5a2d2d7726a674eceda5c5b5644"
+  integrity sha512-SY1MmplssORfFiLDcOETrW7fCLl+PavlwMh92rrGcikQaRq4iWPVH0MpwPpY3etVMx6RnDjXtr6VZYr/IbP/Ag==
  dependencies:
    "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
+    "@babel/parser" "^7.1.2"
+    "@babel/types" "^7.1.2"

 "@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0":
  version "7.1.0"
@ -620,10 +620,10 @@
    globals "^11.1.0"
    lodash "^4.17.10"

-"@babel/types@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0.tgz#6e191793d3c854d19c6749989e3bc55f0e962118"
-  integrity sha512-5tPDap4bGKTLPtci2SUl/B7Gv8RnuJFuQoWx26RJobS0fFrz4reUA3JnwIM+HVHEmWE0C1mzKhDtTp8NsWY02Q==
+"@babel/types@^7.0.0", "@babel/types@^7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.1.2.tgz#183e7952cf6691628afdc2e2b90d03240bac80c0"
+  integrity sha512-pb1I05sZEKiSlMUV9UReaqsCPUpgbHHHu2n1piRm7JkuBkm6QxcaIzKu6FMnMtCbih/cEYTR+RGYYC96Yk9HAg==
  dependencies:
    esutils "^2.0.2"
    lodash "^4.17.10"
@ -2421,6 +2421,11 @@ gh-pages@^2.0.0:
    graceful-fs "^4.1.11"
    rimraf "^2.6.2"

+github-syntax-dark@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/github-syntax-dark/-/github-syntax-dark-0.5.0.tgz#17046545ffaa041e582458001df968b7ec91c2ea"
+  integrity sha1-FwRlRf+qBB5YJFgAHflot+yRwuo=
+
 github-syntax-light@^0.5.0:
  version "0.5.0"
  resolved "https://registry.yarnpkg.com/github-syntax-light/-/github-syntax-light-0.5.0.tgz#17466fdd3c08d756ce3f016ed18a2a1343ce0729"
@ -3450,9 +3455,9 @@ ms@^2.1.1:
  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==

 nan@^2.0.7, nan@^2.10.0, nan@^2.9.2:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.11.0.tgz#574e360e4d954ab16966ec102c0c049fd961a099"
-  integrity sha512-F4miItu2rGnV2ySkXOQoA8FKz/SR2Q2sWP0sbTxNxz/tuokeC8WxOhPMcwi0qIyGtVn/rrSeLbvVkznqCdwYnw==
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.11.1.tgz#90e22bccb8ca57ea4cd37cc83d3819b52eea6766"
+  integrity sha512-iji6k87OSXa0CcrLl9z+ZiYSuR2o+c0bGuNmXdrhTQTakxytAFsC56SArGYoiHlJlFoHSnvmhpceZJaXkVuOtA==

 nanomatch@^1.2.9:
  version "1.2.13"
@ -5578,9 +5583,9 @@ tar@^4:
    yallist "^3.0.2"

 terser@^3.7.3, terser@^3.8.1:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-3.9.1.tgz#c018c12dce5e6de31e00e891ae789b289eb9c65f"
-  integrity sha512-ooRYGUP5p5pZvDQsPvNremx+/meS0tCLfxU5cfjVfnMnz1zBBsd2DcVhERpZIhOGZHzhL8y8lSYn+SlrEER8cQ==
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-3.9.2.tgz#d139d8292eb3a23091304c934fb539d9f456fb19"
+  integrity sha512-zOaL2PwflERZkVWbzv8rGbDR493fUaD/KXIUz/vjuvyH6Cxwu4pitM6con3Jy4bWtcQJwNOvN4rHltFeTEwZQA==
  dependencies:
    commander "~2.17.1"
    source-map "~0.6.1"
				`@ -0,0 +1 @@`
				`@import "github-syntax-dark/lib/github-dark";`