mirror of
https://github.com/utterance/utterances.git
synced 2024-08-17 03:00:23 +03:00
implement theme picker
This commit is contained in:
parent
25b48035c6
commit
3932761cbf
21
CONTRIBUTING.md
Normal file
21
CONTRIBUTING.md
Normal file
@ -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*
|
@ -19,9 +19,9 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"clean": "rm -rf .cache & rm -rf dist",
|
"clean": "rm -rf .cache & rm -rf dist",
|
||||||
"prestart": "yarn run clean",
|
"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",
|
"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",
|
"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 'utteranc.es' > dist/CNAME",
|
||||||
"deploy": "gh-pages --dist dist"
|
"deploy": "gh-pages --dist dist"
|
||||||
@ -31,7 +31,6 @@
|
|||||||
"gh-pages": "^2.0.0",
|
"gh-pages": "^2.0.0",
|
||||||
"github-syntax-dark": "^0.5.0",
|
"github-syntax-dark": "^0.5.0",
|
||||||
"github-syntax-light": "^0.5.0",
|
"github-syntax-light": "^0.5.0",
|
||||||
"node-sass": "^4.9.3",
|
|
||||||
"parcel-bundler": "^1.10.1",
|
"parcel-bundler": "^1.10.1",
|
||||||
"posthtml-expressions": "^1.1.0",
|
"posthtml-expressions": "^1.1.0",
|
||||||
"posthtml-include": "^1.2.0",
|
"posthtml-include": "^1.2.0",
|
||||||
@ -42,6 +41,7 @@
|
|||||||
"primer-forms": "^2.1.4",
|
"primer-forms": "^2.1.4",
|
||||||
"primer-markdown": "^3.7.9",
|
"primer-markdown": "^3.7.9",
|
||||||
"primer-navigation": "^1.5.7",
|
"primer-navigation": "^1.5.7",
|
||||||
|
"sass": "^1.14.1",
|
||||||
"tslint": "^5.11.0",
|
"tslint": "^5.11.0",
|
||||||
"typescript": "^3.1.1"
|
"typescript": "^3.1.1"
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
export class ConfigurationComponent {
|
export class ConfigurationComponent {
|
||||||
public element: HTMLFormElement;
|
public readonly element: HTMLFormElement;
|
||||||
private script: HTMLDivElement;
|
private readonly script: HTMLDivElement;
|
||||||
private repo: HTMLInputElement;
|
private readonly repo: HTMLInputElement;
|
||||||
|
private readonly theme: HTMLSelectElement;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.element = document.createElement('form');
|
this.element = document.createElement('form');
|
||||||
@ -100,6 +101,18 @@ export class ConfigurationComponent {
|
|||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</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>
|
<h3>Enable Utterances</h3>
|
||||||
|
|
||||||
<p>Add the following script tag to your blog's template. Position it where you want the
|
<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.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;
|
const copyButton = this.element.querySelector('#copy-button') as HTMLButtonElement;
|
||||||
copyButton.addEventListener(
|
copyButton.addEventListener(
|
||||||
'click',
|
'click',
|
||||||
@ -142,6 +168,7 @@ export class ConfigurationComponent {
|
|||||||
this.script.innerHTML = this.makeConfigScript(
|
this.script.innerHTML = this.makeConfigScript(
|
||||||
this.makeConfigScriptAttribute('repo', this.repo.value === '' ? '[ENTER REPO HERE]' : this.repo.value) + '\n' +
|
this.makeConfigScriptAttribute('repo', this.repo.value === '' ? '[ENTER REPO HERE]' : this.repo.value) + '\n' +
|
||||||
mappingAttr + '\n' +
|
mappingAttr + '\n' +
|
||||||
|
this.makeConfigScriptAttribute('theme', this.theme.value) + '\n' +
|
||||||
this.makeConfigScriptAttribute('crossorigin', 'anonymous'));
|
this.makeConfigScriptAttribute('crossorigin', 'anonymous'));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5,7 +5,12 @@
|
|||||||
<meta name="description" content="A lightweight commenting system using GitHub issues.">
|
<meta name="description" content="A lightweight commenting system using GitHub issues.">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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="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="32x32" href="./icons/favicon-32x32.png">
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png">
|
<link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png">
|
||||||
@ -57,6 +62,7 @@
|
|||||||
repo="utterance/utterances"
|
repo="utterance/utterances"
|
||||||
issue-term="homepage"
|
issue-term="homepage"
|
||||||
crossorigin="anonymous"
|
crossorigin="anonymous"
|
||||||
|
theme="github-light"
|
||||||
async>
|
async>
|
||||||
</script>
|
</script>
|
||||||
</if>
|
</if>
|
||||||
@ -65,6 +71,7 @@
|
|||||||
repo="jdanyow/utterances-demo"
|
repo="jdanyow/utterances-demo"
|
||||||
issue-term="pathname"
|
issue-term="pathname"
|
||||||
crossorigin="anonymous"
|
crossorigin="anonymous"
|
||||||
|
theme="github-light"
|
||||||
async>
|
async>
|
||||||
</script>
|
</script>
|
||||||
</else>
|
</else>
|
||||||
|
@ -49,7 +49,8 @@ function readPageAttributes() {
|
|||||||
origin: params.origin,
|
origin: params.origin,
|
||||||
url: params.url,
|
url: params.url,
|
||||||
title: params.title,
|
title: params.title,
|
||||||
description: params.description
|
description: params.description,
|
||||||
|
theme: params.theme || 'github-light'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
16
src/theme.ts
Normal file
16
src/theme.ts
Normal file
@ -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`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
@ -5,7 +5,6 @@
|
|||||||
<meta name="description" content="A lightweight commenting system using GitHub issues.">
|
<meta name="description" content="A lightweight commenting system using GitHub issues.">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="./sass/themes/github-dark/utterances.scss">
|
|
||||||
<script>
|
<script>
|
||||||
if (!window.Promise || !window.fetch) {
|
if (!window.Promise || !window.fetch) {
|
||||||
if (Array.from === undefined) { Array.from = function(x) { return Array.prototype.slice.call(x); } }
|
if (Array.from === undefined) { Array.from = function(x) { return Array.prototype.slice.call(x); } }
|
||||||
|
@ -15,6 +15,7 @@ import { login } from './oauth';
|
|||||||
import { TimelineComponent } from './timeline-component';
|
import { TimelineComponent } from './timeline-component';
|
||||||
import { NewCommentComponent } from './new-comment-component';
|
import { NewCommentComponent } from './new-comment-component';
|
||||||
import { startMeasuring, scheduleMeasure } from './measure';
|
import { startMeasuring, scheduleMeasure } from './measure';
|
||||||
|
import { loadTheme } from './theme';
|
||||||
|
|
||||||
setRepoContext(page);
|
setRepoContext(page);
|
||||||
|
|
||||||
@ -25,21 +26,7 @@ function loadIssue(): Promise<Issue | null> {
|
|||||||
return loadIssueByTerm(page.issueTerm as string);
|
return loadIssueByTerm(page.issueTerm as string);
|
||||||
}
|
}
|
||||||
|
|
||||||
// function loadTheme() {
|
Promise.all([loadIssue(), loadUser(), loadTheme(page.theme, page.origin)])
|
||||||
// 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));
|
.then(([issue, user]) => bootstrap(issue, user));
|
||||||
|
|
||||||
function bootstrap(issue: Issue | null, user: User | null) {
|
function bootstrap(issue: Issue | null, user: User | null) {
|
||||||
|
Loading…
Reference in New Issue
Block a user