implement theme picker

CONTRIBUTING.md

@@ -0,0 +1,21 @@
+## Contributing
+
+1. Install yarn: https://yarnpkg.com
+2. Clone the repo:
+    ```bash
+    git clone https://github.com/utterance/utterances
+    ```
+3. Install the project's dependencies using yarn:
+    ```bash
+    cd utterances
+    yarn install
+    ```
+4. Start developing!
+    ```bash
+    yarn start
+    ```
+    This command transpile the source files and start a development webserver. Any change you make to the source TypeScript, HTML and SCSS files will automatically be recompiled. Go to http://localhost:4000/index.html to view your changes.
+
+## Theme Development
+
+Each theme is located in a subdirectory of `src/stylesheets/themes`. Themes must have an `index.scss` and `utterances.scss` files. These are the entrypoint stylesheets for the utterances homepage and utterances widget respectively. *Todo: more instructions*

package.json

@@ -19,9 +19,9 @@
   "scripts": {
     "clean": "rm -rf .cache & rm -rf dist",
     "prestart": "yarn run clean",
-    "start": "parcel serve src/*.html src/client.ts --no-hmr --port 4000",
+    "start": "parcel serve src/*.html src/client.ts src/stylesheets/themes/*/{index,utterances}.scss --no-hmr --port 4000",
     "prebuild": "yarn run clean",
-    "build": "parcel build src/*.html src/client.ts --experimental-scope-hoisting",
+    "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",
     "deploy": "gh-pages --dist dist"
@@ -31,7 +31,6 @@
     "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",
     "posthtml-expressions": "^1.1.0",
     "posthtml-include": "^1.2.0",
@@ -42,6 +41,7 @@
     "primer-forms": "^2.1.4",
     "primer-markdown": "^3.7.9",
     "primer-navigation": "^1.5.7",
+    "sass": "^1.14.1",
     "tslint": "^5.11.0",
     "typescript": "^3.1.1"
   }

src/configuration-component.ts

@@ -1,7 +1,8 @@
 export class ConfigurationComponent {
-  public element: HTMLFormElement;
-  private script: HTMLDivElement;
-  private repo: HTMLInputElement;
+  public readonly element: HTMLFormElement;
+  private readonly script: HTMLDivElement;
+  private readonly repo: HTMLInputElement;
+  private readonly theme: HTMLSelectElement;
 
   constructor() {
     this.element = document.createElement('form');
@@ -100,6 +101,18 @@ export class ConfigurationComponent {
         </div>
       </fieldset>
 
+      <h3>Theme</h3>
+      <p>
+        Choose an Utterances theme that matches your blog.
+        Can't find a theme you like?
+        <a href="https://github.com/utterance/utterances/blob/master/CONTRIBUTING.md">Contribute</a> a custom theme.
+      </p>
+
+      <select id="theme" class="form-select" value="github-light">
+        <option value="github-light">GitHub Light</option>
+        <option value="github-dark">GitHub Dark</option>
+      </select>
+
       <h3>Enable Utterances</h3>
 
       <p>Add the following script tag to your blog's template. Position it where you want the
@@ -118,6 +131,19 @@ export class ConfigurationComponent {
 
     this.repo = this.element.querySelector('#repo') as HTMLInputElement;
 
+    this.theme = this.element.querySelector('#theme') as HTMLSelectElement;
+
+    const themeStylesheet = document.getElementById('theme-stylesheet') as HTMLLinkElement;
+    this.theme.addEventListener('change', () => {
+      themeStylesheet.href = `/stylesheets/themes/${this.theme.value}/index.css`;
+      const message = {
+        type: 'set-theme',
+        theme: this.theme.value
+      };
+      const utterances = document.querySelector('iframe')!;
+      utterances.contentWindow!.postMessage(message, location.origin);
+    });
+
     const copyButton = this.element.querySelector('#copy-button') as HTMLButtonElement;
     copyButton.addEventListener(
       'click',
@@ -142,6 +168,7 @@ export class ConfigurationComponent {
     this.script.innerHTML = this.makeConfigScript(
       this.makeConfigScriptAttribute('repo', this.repo.value === '' ? '[ENTER REPO HERE]' : this.repo.value) + '\n' +
       mappingAttr + '\n' +
+      this.makeConfigScriptAttribute('theme', this.theme.value) + '\n' +
       this.makeConfigScriptAttribute('crossorigin', 'anonymous'));
   }
 

src/index.html

@@ -5,7 +5,12 @@
     <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="./sass/themes/github-dark/index.scss">
+    <if condition="NODE_ENV === 'production'">
+      <link id="theme-stylesheet" rel="stylesheet" href="https://utteranc.es/stylesheets/themes/github-light/index.css">
+    </if>
+    <else>
+      <link id="theme-stylesheet" rel="stylesheet" href="http://localhost:4000/stylesheets/themes/github-light/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">
     <link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png">
@@ -57,6 +62,7 @@
               repo="utterance/utterances"
               issue-term="homepage"
               crossorigin="anonymous"
+              theme="github-light"
               async>
       </script>
     </if>
@@ -65,6 +71,7 @@
               repo="jdanyow/utterances-demo"
               issue-term="pathname"
               crossorigin="anonymous"
+              theme="github-light"
               async>
       </script>
     </else>

src/page-attributes.ts

@@ -49,7 +49,8 @@ function readPageAttributes() {
     origin: params.origin,
     url: params.url,
     title: params.title,
-    description: params.description
+    description: params.description,
+    theme: params.theme || 'github-light'
   };
 }
 

src/theme.ts

@@ -0,0 +1,16 @@
+export function loadTheme(theme: string, origin: string) {
+  return new Promise(resolve => {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.setAttribute('crossorigin', 'anonymous');
+    link.onload = resolve;
+    link.href = `/stylesheets/themes/${theme}/utterances.css`;
+    document.head.appendChild(link);
+
+    addEventListener('message', event => {
+      if (event.origin === origin && event.data.type === 'set-theme') {
+        link.href = `/stylesheets/themes/${event.data.theme}/utterances.css`;
+      }
+    });
+  });
+}

src/utterances.html

@@ -5,7 +5,6 @@
     <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="./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); } }

src/utterances.ts

@@ -15,6 +15,7 @@ import { login } from './oauth';
 import { TimelineComponent } from './timeline-component';
 import { NewCommentComponent } from './new-comment-component';
 import { startMeasuring, scheduleMeasure } from './measure';
+import { loadTheme } from './theme';
 
 setRepoContext(page);
 
@@ -25,21 +26,7 @@ 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()])
+Promise.all([loadIssue(), loadUser(), loadTheme(page.theme, page.origin)])
   .then(([issue, user]) => bootstrap(issue, user));
 
 function bootstrap(issue: Issue | null, user: User | null) {