OGP向けにインスタンスのバナー画像を提供するように

author: syuilo <syuilotan@yahoo.co.jp> 2018-12-15 23:19:04 +0900
committer: syuilo <syuilotan@yahoo.co.jp> 2018-12-15 23:19:04 +0900
commit: be1125dcb92d8c6e972e00ac4697e136d0fec2bd (patch)
tree: 76e69a0fadf42b6e880ab604cb2f86860ab24896
parent: Update index.ts (#3624) (diff)
download: misskey-be1125dcb92d8c6e972e00ac4697e136d0fec2bd.tar.gz
misskey-be1125dcb92d8c6e972e00ac4697e136d0fec2bd.tar.bz2
misskey-be1125dcb92d8c6e972e00ac4697e136d0fec2bd.zip
10 files changed, 28 insertions, 82 deletions
diff --git a/gulpfile.ts b/gulpfile.ts
index 7aa582abf9..08175914a1 100644
--- a/gulpfile.ts
+++ b/gulpfile.ts
@@ -11,14 +11,12 @@ import tslint from 'gulp-tslint';
 const cssnano = require('gulp-cssnano');
 const stylus = require('gulp-stylus');
 import * as uglifyComposer from 'gulp-uglify/composer';
-import pug = require('gulp-pug');
 import * as rimraf from 'rimraf';
 import chalk from 'chalk';
 const imagemin = require('gulp-imagemin');
 import * as rename from 'gulp-rename';
 import * as mocha from 'gulp-mocha';
 import * as replace from 'gulp-replace';
-import * as htmlmin from 'gulp-htmlmin';
 const uglifyes = require('uglify-es');
 
 const locales = require('./locales');
@@ -34,8 +32,6 @@ if (isDebug) {
 	console.warn(chalk.yellow.bold('         built script will not be compressed.'));
 }
 
-const constants = require('./src/const.json');
-
 gulp.task('build', [
 	'build:ts',
 	'build:copy',
@@ -109,7 +105,7 @@ gulp.task('default', ['build']);
 gulp.task('build:client', [
 	'build:ts',
 	'build:client:script',
-	'build:client:pug',
+	'build:client:styles',
 	'copy:client'
 ]);
 
@@ -148,52 +144,6 @@ gulp.task('copy:client', [
 			.pipe(gulp.dest('./built/client/assets/'))
 );
 
-gulp.task('build:client:pug', [
-	'copy:client',
-	'build:client:script',
-	'build:client:styles'
-], () =>
-		gulp.src('./src/client/app/base.pug')
-			.pipe(pug({
-				locals: {
-					themeColor: constants.themeColor
-				}
-			}))
-			.pipe(htmlmin({
-				// 真理値属性の簡略化 e.g.
-				// <input value="foo" readonly="readonly"> to
-				// <input value="foo" readonly>
-				collapseBooleanAttributes: true,
-
-				// テキストの一部かもしれない空白も削除する e.g.
-				// <div> <p>    foo </p>    </div> to
-				// <div><p>foo</p></div>
-				collapseWhitespace: true,
-
-				// タグ間の改行を保持する
-				preserveLineBreaks: true,
-
-				// (できる場合は)属性のクォーテーション削除する e.g.
-				// <p class="foo-bar" id="moo" title="blah blah">foo</p> to
-				// <p class=foo-bar id=moo title="blah blah">foo</p>
-				removeAttributeQuotes: true,
-
-				// 省略可能なタグを省略する e.g.
-				// <html><p>yo</p></html> ro
-				// <p>yo</p>
-				removeOptionalTags: true,
-
-				// 属性の値がデフォルトと同じなら省略する e.g.
-				// <input type="text"> to
-				// <input>
-				removeRedundantAttributes: true,
-
-				// CSSも圧縮する
-				minifyCSS: true
-			}))
-			.pipe(gulp.dest('./built/client/app/'))
-);
-
 gulp.task('locales', () =>
 	gulp.src('./locales/*.yml')
 		.pipe(yaml({ schema: 'DEFAULT_SAFE_SCHEMA' }))
diff --git a/package.json b/package.json
index 8ea7773def..e88fe20323 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,6 @@
 		"@types/elasticsearch": "5.0.29",
 		"@types/file-type": "5.2.2",
 		"@types/gulp": "3.8.36",
-		"@types/gulp-htmlmin": "1.3.32",
 		"@types/gulp-mocha": "0.0.32",
 		"@types/gulp-rename": "0.0.33",
 		"@types/gulp-replace": "0.0.31",
@@ -120,10 +119,8 @@
 		"fuckadblock": "3.2.1",
 		"gulp": "3.9.1",
 		"gulp-cssnano": "2.1.3",
-		"gulp-htmlmin": "5.0.1",
 		"gulp-imagemin": "4.1.0",
 		"gulp-mocha": "6.0.0",
-		"gulp-pug": "4.0.1",
 		"gulp-rename": "1.4.0",
 		"gulp-replace": "1.0.0",
 		"gulp-sourcemaps": "2.6.4",
diff --git a/src/client/app/common/views/components/analog-clock.vue b/src/client/app/common/views/components/analog-clock.vue
index 43ae2ca933..8795076bb3 100644
--- a/src/client/app/common/views/components/analog-clock.vue
+++ b/src/client/app/common/views/components/analog-clock.vue
@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { themeColor } from '../../../config';
+import * as tinycolor from 'tinycolor2';
 
 export default Vue.extend({
 	props: {
@@ -75,7 +75,7 @@ export default Vue.extend({
 			return this.dark ? '#fff' : '#777';
 		},
 		hHandColor(): string {
-			return themeColor;
+			return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toHexString();
 		},
 
 		ms(): number {
diff --git a/src/client/app/config.ts b/src/client/app/config.ts
index 0374ff0f95..c88214d3b3 100644
--- a/src/client/app/config.ts
+++ b/src/client/app/config.ts
@@ -16,7 +16,6 @@ export const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://
 export const lang = window.lang;
 export const langs = _LANGS_;
 export const locale = JSON.parse(localStorage.getItem('locale'));
-export const themeColor = _THEME_COLOR_;
 export const copyright = _COPYRIGHT_;
 export const version = _VERSION_;
 export const clientVersion = _CLIENT_VERSION_;
diff --git a/src/const.json b/src/const.json
index af9a22bce8..d067ad363e 100644
--- a/src/const.json
+++ b/src/const.json
@@ -1,5 +1,3 @@
 {
-	"copyright": "Copyright (c) 2014-2018 syuilo",
-	"themeColor": "#fb4e4e",
-	"themeColorForeground": "#fff"
+	"copyright": "Copyright (c) 2014-2018 syuilo"
 }
diff --git a/src/server/web/index.ts b/src/server/web/index.ts
index 42292cd398..5a5029c7fb 100644
--- a/src/server/web/index.ts
+++ b/src/server/web/index.ts
@@ -15,7 +15,7 @@ import parseAcct from '../../misc/acct/parse';
 import config from '../../config';
 import Note, { pack as packNote } from '../../models/note';
 import getNoteSummary from '../../misc/get-note-summary';
-const consts = require('../../const.json');
+import fetchMeta from '../../misc/fetch-meta';
 
 const client = `${__dirname}/../../client/`;
 
@@ -26,8 +26,7 @@ const app = new Koa();
 app.use(views(__dirname + '/views', {
 	extension: 'pug',
 	options: {
-		config,
-		themeColor: consts.themeColor
+		config
 	}
 }));
 
@@ -120,10 +119,11 @@ router.get('/notes/:note', async ctx => {
 
 // Render base html for all requests
 router.get('*', async ctx => {
-	await send(ctx, `app/base.html`, {
-		root: client,
-		maxage: ms('5m')
+	const meta = await fetchMeta();
+	await ctx.render('base', {
+		img: meta.bannerUrl
 	});
+	ctx.set('Cache-Control', 'public, max-age=86400');
 });
 
 // Register router
diff --git a/src/client/app/base.pug b/src/server/web/views/base.pug
index ee9d4b6f6d..dd9660b73f 100644
--- a/src/client/app/base.pug
+++ b/src/server/web/views/base.pug
@@ -9,7 +9,6 @@ html
 	head
 		meta(charset='utf-8')
 		meta(name='application-name' content='Misskey')
-		meta(name='theme-color' content=themeColor)
 		meta(name='referrer' content='origin')
 		meta(property='og:site_name' content='Misskey')
 		link(rel='manifest' href='/manifest.json')
@@ -23,16 +22,16 @@ html
 
 		block meta
 
+		block og
+			meta(property='og:image' content=img)
+
 		style
-			include ./../../../built/client/assets/init.css
+			include ./../../../../built/client/assets/init.css
 		script
-			include ./../../../built/client/assets/boot.js
+			include ./../../../../built/client/assets/boot.js
 
 		script
-			include ./../../../built/client/assets/safe.js
-
-		//- FontAwesome style
-		style #{facss}
+			include ./../../../../built/client/assets/safe.js
 
 	body
 		noscript: p
@@ -41,5 +40,5 @@ html
 			| Please turn on your JavaScript
 		div#ini.
 			<svg viewBox="0 0 50 50">
-				<path fill=#{themeColor} d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" />
+				<path fill=#fb4e4e d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" />
 			</svg>
diff --git a/src/server/web/views/note.pug b/src/server/web/views/note.pug
index 234ecabe22..5a5496fff7 100644
--- a/src/server/web/views/note.pug
+++ b/src/server/web/views/note.pug
@@ -1,4 +1,4 @@
-extends ../../../../src/client/app/base
+extends ./base
 
 block vars
 	- const user = note.user;
@@ -11,14 +11,16 @@ block title
 block desc
 	meta(name='description' content= summary)
 
-block meta
-	meta(name='twitter:card'       content='summary')
+block og
 	meta(property='og:type'        content='article')
 	meta(property='og:title'       content= title)
 	meta(property='og:description' content= summary)
 	meta(property='og:url'         content= url)
 	meta(property='og:image'       content= user.avatarUrl)
 
+block meta
+	meta(name='twitter:card' content='summary')
+
 	if note.prev
 		link(rel='prev' href=`${config.url}/notes/${note.prev}`)
 	if note.next
diff --git a/src/server/web/views/user.pug b/src/server/web/views/user.pug
index 22c76c143b..71c03d5052 100644
--- a/src/server/web/views/user.pug
+++ b/src/server/web/views/user.pug
@@ -1,4 +1,4 @@
-extends ../../../../src/client/app/base
+extends ./base
 
 block vars
 	- const title = user.name ? `${user.name} (@${user.username})` : `@${user.username}`;
@@ -11,14 +11,16 @@ block title
 block desc
 	meta(name='description' content= user.description)
 
-block meta
-	meta(name='twitter:card'       content='summary')
+block og
 	meta(property='og:type'        content='blog')
 	meta(property='og:title'       content= title)
 	meta(property='og:description' content= user.description)
 	meta(property='og:url'         content= url)
 	meta(property='og:image'       content= img)
-	
+
+block meta
+	meta(name='twitter:card' content='summary')
+
 	if !user.host
 		link(rel='alternate' href=`${config.url}/users/${user._id}` type='application/activity+json')
 	if user.uri
diff --git a/webpack.config.ts b/webpack.config.ts
index dc74c96d94..3c7a112a80 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -114,7 +114,6 @@ module.exports = {
 			clear: false
 		}),
 		new webpack.DefinePlugin({
-			_THEME_COLOR_: JSON.stringify(constants.themeColor),
 			_COPYRIGHT_: JSON.stringify(constants.copyright),
 			_VERSION_: JSON.stringify(meta.version),
 			_CLIENT_VERSION_: JSON.stringify(version),
author	syuilo <syuilotan@yahoo.co.jp>	2018-12-15 23:19:04 +0900
committer	syuilo <syuilotan@yahoo.co.jp>	2018-12-15 23:19:04 +0900
commit	be1125dcb92d8c6e972e00ac4697e136d0fec2bd (patch)
tree	76e69a0fadf42b6e880ab604cb2f86860ab24896
parent	Update index.ts (#3624) (diff)
download	misskey-be1125dcb92d8c6e972e00ac4697e136d0fec2bd.tar.gz misskey-be1125dcb92d8c6e972e00ac4697e136d0fec2bd.tar.bz2 misskey-be1125dcb92d8c6e972e00ac4697e136d0fec2bd.zip