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 { +
+ Choose an Utterances theme that matches your blog. + Can't find a theme you like? + Contribute a custom theme. +
+ + +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 @@
-
+