add theme: nella-red (previous PR closed)

package.json

@@ -20,22 +20,25 @@
     "start": "parcel serve src/*.html src/client.ts src/stylesheets/themes/*/{index,utterances}.scss --no-hmr --port 4000",
     "build": "parcel build src/*.html src/client.ts src/stylesheets/themes/*/{index,utterances}.scss --experimental-scope-hoisting",
     "lint": "tslint --project tsconfig.json",
-    "predeploy": "yarn run build && touch dist/.nojekyll && echo 'utteranc.es' > dist/CNAME",
+    "predeploy": "yarn run build && touch dist/.nojekyll && echo 'utterances.allenfrostline.com' > dist/CNAME",
     "deploy": "gh-pages --dist dist"
   },
   "devDependencies": {
     "@primer/css": "^14.2.0",
     "autoprefixer": "^9.7.4",
+    "cssnano": "^4.1.10",
     "gh-pages": "^2.2.0",
     "github-syntax-dark": "^0.5.0",
     "github-syntax-light": "^0.5.0",
-    "parcel-bundler": "^1.12.4",
     "parcel-plugin-clean-dist": "^0.0.6",
     "posthtml-expressions": "^1.2.0",
     "posthtml-include": "^1.4.0",
     "posthtml-md": "^1.1.0",
     "sass": "^1.26.3",
     "tslint": "^6.1.0",
     "typescript": "^3.8.3"
+  },
+  "dependencies": {
+    "cfworker": "git+https://github.com/cfworker/cfworker.git"
   }
 }

src/client.ts

@@ -19,7 +19,7 @@ let script = document.currentScript as HTMLScriptElement;
 if (script === undefined) {
   // Internet Explorer :(
   // tslint:disable-next-line:max-line-length
-  script = document.querySelector('script[src^="https://utteranc.es/client.js"],script[src^="http://localhost:4000/client.js"]') as HTMLScriptElement;
+  script = document.querySelector('script[src^="https://utterances.allenfrostline.com/client.js"],script[src^="http://localhost:4000/client.js"]') as HTMLScriptElement;
 }
 
 // gather script element's attributes
@@ -76,7 +76,7 @@ document.head.insertAdjacentHTML(
   </style>`);
 
 // create the comments iframe and it's responsive container
-const utterancesOrigin = script.src.match(/^https:\/\/utteranc\.es|http:\/\/localhost:\d+/)![0];
+const utterancesOrigin = script.src.match(/^https:\/\/utterances\.allenfrostline.com|http:\/\/localhost:\d+/)![0];
 const url = `${utterancesOrigin}/utterances.html`;
 script.insertAdjacentHTML(
   'afterend',

src/configuration-component.ts

@@ -137,6 +137,7 @@ export class ConfigurationComponent {
         <option value="dark-blue">Dark Blue</option>
         <option value="photon-dark">Photon Dark</option>
         <option value="boxy-light">Boxy Light</option>
+        <option value="nella-red">Nella Red</option>
       </select>
 
       <h3 id="heading-enable">Enable Utterances</h3>
@@ -212,7 +213,7 @@ export class ConfigurationComponent {
 
   private makeConfigScript(attrs: string) {
     // tslint:disable-next-line:max-line-length
-    return `<pre><span class="pl-s1">&lt;<span class="pl-ent">script</span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>https://utteranc.es/client.js<span class="pl-pds">"</span></span></span>\n${attrs}\n<span class="pl-s1">        <span class="pl-e">async</span>&gt;</span>\n<span class="pl-s1">&lt;/<span class="pl-ent">script</span>&gt;</span></pre>`;
+    return `<pre><span class="pl-s1">&lt;<span class="pl-ent">script</span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>https://utterances.allenfrostline.com/client.js<span class="pl-pds">"</span></span></span>\n${attrs}\n<span class="pl-s1">        <span class="pl-e">async</span>&gt;</span>\n<span class="pl-s1">&lt;/<span class="pl-ent">script</span>&gt;</span></pre>`;
   }
 
   private copyTextToClipboard(text: string) {

src/index.html

@@ -8,10 +8,10 @@
     <link rel="preconnect" href="https://api.github.com">
     <link rel="preconnect" href="https://avatars3.githubusercontent.com">
     <if condition="NODE_ENV === 'production'">
-      <link id="theme-stylesheet" rel="stylesheet" href="https://utteranc.es/stylesheets/themes/github-light/index.css">
+      <link id="theme-stylesheet" rel="stylesheet" href="https://utterances.allenfrostline.com/stylesheets/themes/nella-red/index.css">
     </if>
     <else>
-      <link id="theme-stylesheet" rel="stylesheet" href="http://localhost:4000/stylesheets/themes/github-light/index.css">
+      <link id="theme-stylesheet" rel="stylesheet" href="http://localhost:4000/stylesheets/themes/nella-red/index.css">
     </else>
     <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">
@@ -20,7 +20,7 @@
     <link rel="mask-icon" href="./icons/safari-pinned-tab.svg" color="#4c2889">
     <link rel="shortcut icon" href="./icons/favicon.ico">
     <if condition="NODE_ENV === 'production'">
-      <link rel="canonical" href="https://utteranc.es">
+      <link rel="canonical" href="https://utterances.allenfrostline.com">
     </if>
     <else>
       <link rel="canonical" href="http://localhost:4000/index.html">
@@ -67,11 +67,11 @@
     <script src="./index.ts"></script>
 
     <if condition="NODE_ENV === 'production'">
-      <script src="https://utteranc.es/client.js"
-              repo="utterance/utterances"
-              issue-term="homepage"
+      <script src="https://utterances.allenfrostline.com/client.js"
+              repo="allenfrostline/allenfrostline.github.io"
+              issue-term="pathname"
               crossorigin="anonymous"
-              theme="github-light"
+              theme="nella-red"
               async>
       </script>
     </if>
@@ -81,7 +81,7 @@
               issue-term="pathname"
               label="💬 comment"
               crossorigin="anonymous"
-              theme="github-light"
+              theme="nella-red"
               async>
       </script>
     </else>

src/stylesheets/themes/nella-red/button.scss

@@ -0,0 +1,55 @@
+.btn-primary {
+  display: inline-block;
+  padding: 5px 8px;
+  background: $red-normal;
+  border-bottom: 4px solid $red-dark;
+  border-right: 4px solid $red-dark;
+  border-top-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  font-weight: 600;
+  font-size: 16px;
+  position: relative;
+  height: 34px;
+  line-height: 20px;
+  outline-width: 0px;
+  vertical-align: middle;
+  color: $white;
+}
+
+.btn-primary:hover {
+  background: $red-light;
+}
+
+.btn-primary:active {
+  background: $red-dark2;
+}
+
+.btn-primary:disabled {
+  background: $red-normal;
+  opacity: 0.4;
+}
+
+.btn-outline {
+    color: $gray-dark;
+    background: none;
+    vertical-align: middle;
+    border-width: 0px;
+    padding: 8px 6px!important;
+}
+
+.btn-outline:hover {
+    color: $black;
+    background: $red-lighter;
+    border-width: 0px;
+}
+
+.btn-outline:disabled {
+    color: $white;
+    border-width: 0px;
+}
+
+.reactions-popover summary {
+  padding: 8px 10px!important;
+}

src/stylesheets/themes/nella-red/font.scss

@@ -0,0 +1,4 @@
+body, .markdown-body, .textarea {
+    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Source Han Sans CN', 'Source Han Serif', 'Songti SC', serif;
+    font-size: 16px!important;
+}

src/stylesheets/themes/nella-red/index.scss

@@ -0,0 +1,4 @@
+@import "./variables";
+@import "../../index";
+@import "./syntax";
+@import "./button.scss";

src/stylesheets/themes/nella-red/misc.scss

@@ -0,0 +1,51 @@
+.timeline summary:hover {
+    color: $red-light;
+}
+
+.timeline a {
+    text-decoration: none;
+}
+
+.current-user .comment-header {
+    background: $red-lighter!important;
+}
+
+.author-association-badge {
+    border-color: $gray-dark!important;
+}
+
+.markdown-body a {
+    color: $red-light;
+}
+
+.markdown-body pre, code {
+    font-size: 14px!important;
+}
+
+.markdown-info svg {
+    vertical-align: -4px!important;
+    padding-left: 2px;
+}
+
+.timeline-comment button {
+    font-size: 14px;
+}
+
+.timeline-comment textarea {
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.comment-footer {
+    border-width: 0;
+    line-height: 25px;
+    height: 40px!important;
+}
+
+.timeline-header em {
+    display: none;
+}
+
+.timeline-header .text-link {
+    font-style: italic;
+}

src/stylesheets/themes/nella-red/syntax.scss

@@ -0,0 +1 @@
+@import "github-syntax-light/lib/github-light";

src/stylesheets/themes/nella-red/utterances.scss

@@ -0,0 +1,6 @@
+@import "./variables";
+@import "../../utterances";
+@import "./syntax";
+@import "./button.scss";
+@import "./font.scss";
+@import "./misc.scss"

src/stylesheets/themes/nella-red/variables.scss

@@ -0,0 +1,21 @@
+$white: #ffffff;
+$black: #000000;
+$gray: #eeeeee;
+$gray-dark: #999999;
+$gray-darker: #444444;
+$red-dark: #5E0001;
+$red-dark2: #940002;
+$red-normal: #B40203;
+$red-light: #C80004;
+$red-lighter: #FFF3F0;
+
+$bg-white: $white;
+$bg-gray: $white;
+$bg-gray-light: $white;
+$border-gray: $gray;
+$border-gray-dark: $gray;
+$text-gray: $black;
+$text-gray-dark: $black;
+$button-normal: $red-normal;
+$button-hover: $red-light;
+$button-pressed: $red-dark;

src/utterances-api.ts

@@ -1,2 +1,2 @@
 // export const UTTERANCES_API = 'http://localhost:7000';
-export const UTTERANCES_API = 'https://api.utteranc.es';
+export const UTTERANCES_API = 'https://utterances-oauth.allenfrostline.workers.dev';

utterances.json

@@ -1,3 +1,3 @@
 {
-  "origins": ["https://utteranc.es"]
+  "origins": ["https://utterances.allenfrostline.com"]
 }