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": {
|
||||
"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"
|
||||
}
|
||||
|
@ -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'));
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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'
|
||||
};
|
||||
}
|
||||
|
||||
|
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 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); } }
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user