diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..cbc1dfd
--- /dev/null
+++ b/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*
\ No newline at end of file
diff --git a/package.json b/package.json
index dca0396..6b17157 100644
--- a/package.json
+++ b/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"
}
diff --git a/src/configuration-component.ts b/src/configuration-component.ts
index 29d59a3..69106a0 100644
--- a/src/configuration-component.ts
+++ b/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 {
+ Theme
+
+ Choose an Utterances theme that matches your blog.
+ Can't find a theme you like?
+ Contribute a custom theme.
+
+
+
+
Enable Utterances
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'));
}
diff --git a/src/index.html b/src/index.html
index 355253a..99bb56c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,7 +5,12 @@
-
+
+
+
+
+
+
@@ -57,6 +62,7 @@
repo="utterance/utterances"
issue-term="homepage"
crossorigin="anonymous"
+ theme="github-light"
async>
@@ -65,6 +71,7 @@
repo="jdanyow/utterances-demo"
issue-term="pathname"
crossorigin="anonymous"
+ theme="github-light"
async>
diff --git a/src/page-attributes.ts b/src/page-attributes.ts
index 6fe8297..a54564a 100644
--- a/src/page-attributes.ts
+++ b/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'
};
}
diff --git a/src/sass/index.scss b/src/stylesheets/index.scss
similarity index 100%
rename from src/sass/index.scss
rename to src/stylesheets/index.scss
diff --git a/src/sass/permalink-code.scss b/src/stylesheets/permalink-code.scss
similarity index 100%
rename from src/sass/permalink-code.scss
rename to src/stylesheets/permalink-code.scss
diff --git a/src/sass/themes/github-dark/button.scss b/src/stylesheets/themes/github-dark/button.scss
similarity index 100%
rename from src/sass/themes/github-dark/button.scss
rename to src/stylesheets/themes/github-dark/button.scss
diff --git a/src/sass/themes/github-dark/index.scss b/src/stylesheets/themes/github-dark/index.scss
similarity index 100%
rename from src/sass/themes/github-dark/index.scss
rename to src/stylesheets/themes/github-dark/index.scss
diff --git a/src/sass/themes/github-dark/syntax.scss b/src/stylesheets/themes/github-dark/syntax.scss
similarity index 100%
rename from src/sass/themes/github-dark/syntax.scss
rename to src/stylesheets/themes/github-dark/syntax.scss
diff --git a/src/sass/themes/github-dark/utterances.scss b/src/stylesheets/themes/github-dark/utterances.scss
similarity index 100%
rename from src/sass/themes/github-dark/utterances.scss
rename to src/stylesheets/themes/github-dark/utterances.scss
diff --git a/src/sass/themes/github-dark/variables.scss b/src/stylesheets/themes/github-dark/variables.scss
similarity index 100%
rename from src/sass/themes/github-dark/variables.scss
rename to src/stylesheets/themes/github-dark/variables.scss
diff --git a/src/sass/themes/github-light/index.scss b/src/stylesheets/themes/github-light/index.scss
similarity index 100%
rename from src/sass/themes/github-light/index.scss
rename to src/stylesheets/themes/github-light/index.scss
diff --git a/src/sass/themes/github-light/syntax.scss b/src/stylesheets/themes/github-light/syntax.scss
similarity index 100%
rename from src/sass/themes/github-light/syntax.scss
rename to src/stylesheets/themes/github-light/syntax.scss
diff --git a/src/sass/themes/github-light/utterances.scss b/src/stylesheets/themes/github-light/utterances.scss
similarity index 100%
rename from src/sass/themes/github-light/utterances.scss
rename to src/stylesheets/themes/github-light/utterances.scss
diff --git a/src/sass/timeline-comment.scss b/src/stylesheets/timeline-comment.scss
similarity index 100%
rename from src/sass/timeline-comment.scss
rename to src/stylesheets/timeline-comment.scss
diff --git a/src/sass/timeline.scss b/src/stylesheets/timeline.scss
similarity index 100%
rename from src/sass/timeline.scss
rename to src/stylesheets/timeline.scss
diff --git a/src/sass/util.scss b/src/stylesheets/util.scss
similarity index 100%
rename from src/sass/util.scss
rename to src/stylesheets/util.scss
diff --git a/src/sass/utterances.scss b/src/stylesheets/utterances.scss
similarity index 100%
rename from src/sass/utterances.scss
rename to src/stylesheets/utterances.scss
diff --git a/src/theme.ts b/src/theme.ts
new file mode 100644
index 0000000..840e008
--- /dev/null
+++ b/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`;
+ }
+ });
+ });
+}
diff --git a/src/utterances.html b/src/utterances.html
index 26c0eff..938e1e1 100644
--- a/src/utterances.html
+++ b/src/utterances.html
@@ -5,7 +5,6 @@
-