Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
syuilo 2018-12-15 23:19:04 +09:00
parent 9ab34c2301
commit be1125dcb9
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
10 changed files with 28 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
gulpfile.ts
View file

@ -11,14 +11,12 @@ import tslint from 'gulp-tslint';
const cssnano = require('gulp-cssnano'); const cssnano = require('gulp-cssnano');
const stylus = require('gulp-stylus'); const stylus = require('gulp-stylus');
import * as uglifyComposer from 'gulp-uglify/composer'; import * as uglifyComposer from 'gulp-uglify/composer';
import pug = require('gulp-pug');
import * as rimraf from 'rimraf'; import * as rimraf from 'rimraf';
import chalk from 'chalk'; import chalk from 'chalk';
const imagemin = require('gulp-imagemin'); const imagemin = require('gulp-imagemin');
import * as rename from 'gulp-rename'; import * as rename from 'gulp-rename';
import * as mocha from 'gulp-mocha'; import * as mocha from 'gulp-mocha';
import * as replace from 'gulp-replace'; import * as replace from 'gulp-replace';
import * as htmlmin from 'gulp-htmlmin';
const uglifyes = require('uglify-es'); const uglifyes = require('uglify-es');
const locales = require('./locales'); const locales = require('./locales');
@ -34,8 +32,6 @@ if (isDebug) {
console.warn(chalk.yellow.bold(' built script will not be compressed.')); console.warn(chalk.yellow.bold(' built script will not be compressed.'));
} }
const constants = require('./src/const.json');
gulp.task('build', [ gulp.task('build', [
'build:ts', 'build:ts',
'build:copy', 'build:copy',
@ -109,7 +105,7 @@ gulp.task('default', ['build']);
gulp.task('build:client', [ gulp.task('build:client', [
'build:ts', 'build:ts',
'build:client:script', 'build:client:script',
'build:client:pug', 'build:client:styles',
'copy:client' 'copy:client'
]); ]);
@ -148,52 +144,6 @@ gulp.task('copy:client', [
.pipe(gulp.dest('./built/client/assets/')) .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.task('locales', () =>
gulp.src('./locales/*.yml') gulp.src('./locales/*.yml')
.pipe(yaml({ schema: 'DEFAULT_SAFE_SCHEMA' })) .pipe(yaml({ schema: 'DEFAULT_SAFE_SCHEMA' }))

3
package.json
View file

@ -37,7 +37,6 @@
"@types/elasticsearch": "5.0.29", "@types/elasticsearch": "5.0.29",
"@types/file-type": "5.2.2", "@types/file-type": "5.2.2",
"@types/gulp": "3.8.36", "@types/gulp": "3.8.36",
"@types/gulp-htmlmin": "1.3.32",
"@types/gulp-mocha": "0.0.32", "@types/gulp-mocha": "0.0.32",
"@types/gulp-rename": "0.0.33", "@types/gulp-rename": "0.0.33",
"@types/gulp-replace": "0.0.31", "@types/gulp-replace": "0.0.31",
@ -120,10 +119,8 @@
"fuckadblock": "3.2.1", "fuckadblock": "3.2.1",
"gulp": "3.9.1", "gulp": "3.9.1",
"gulp-cssnano": "2.1.3", "gulp-cssnano": "2.1.3",
"gulp-htmlmin": "5.0.1",
"gulp-imagemin": "4.1.0", "gulp-imagemin": "4.1.0",
"gulp-mocha": "6.0.0", "gulp-mocha": "6.0.0",
"gulp-pug": "4.0.1",
"gulp-rename": "1.4.0", "gulp-rename": "1.4.0",
"gulp-replace": "1.0.0", "gulp-replace": "1.0.0",
"gulp-sourcemaps": "2.6.4", "gulp-sourcemaps": "2.6.4",

4
src/client/app/common/views/components/analog-clock.vue
View file

@ -32,7 +32,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { themeColor } from '../../../config'; import * as tinycolor from 'tinycolor2';
export default Vue.extend({ export default Vue.extend({
props: { props: {
@ -75,7 +75,7 @@ export default Vue.extend({
return this.dark ? '#fff' : '#777'; return this.dark ? '#fff' : '#777';
}, },
hHandColor(): string { hHandColor(): string {
return themeColor; return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toHexString();
}, },
ms(): number { ms(): number {

1
src/client/app/config.ts
View file

@ -16,7 +16,6 @@ export const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://
export const lang = window.lang; export const lang = window.lang;
export const langs = _LANGS_; export const langs = _LANGS_;
export const locale = JSON.parse(localStorage.getItem('locale')); export const locale = JSON.parse(localStorage.getItem('locale'));
export const themeColor = _THEME_COLOR_;
export const copyright = _COPYRIGHT_; export const copyright = _COPYRIGHT_;
export const version = _VERSION_; export const version = _VERSION_;
export const clientVersion = _CLIENT_VERSION_; export const clientVersion = _CLIENT_VERSION_;

4
src/const.json
View file

@ -1,5 +1,3 @@
{ {
"copyright": "Copyright (c) 2014-2018 syuilo", "copyright": "Copyright (c) 2014-2018 syuilo"
"themeColor": "#fb4e4e",
"themeColorForeground": "#fff"
} }

12
src/server/web/index.ts
View file

@ -15,7 +15,7 @@ import parseAcct from '../../misc/acct/parse';
import config from '../../config'; import config from '../../config';
import Note, { pack as packNote } from '../../models/note'; import Note, { pack as packNote } from '../../models/note';
import getNoteSummary from '../../misc/get-note-summary'; import getNoteSummary from '../../misc/get-note-summary';
const consts = require('../../const.json'); import fetchMeta from '../../misc/fetch-meta';
const client = `${__dirname}/../../client/`; const client = `${__dirname}/../../client/`;
@ -26,8 +26,7 @@ const app = new Koa();
app.use(views(__dirname + '/views', { app.use(views(__dirname + '/views', {
extension: 'pug', extension: 'pug',
options: { options: {
config, config
themeColor: consts.themeColor
} }
})); }));
@ -120,10 +119,11 @@ router.get('/notes/:note', async ctx => {
// Render base html for all requests // Render base html for all requests
router.get('*', async ctx => { router.get('*', async ctx => {
await send(ctx, `app/base.html`, { const meta = await fetchMeta();
root: client, await ctx.render('base', {
maxage: ms('5m') img: meta.bannerUrl
}); });
ctx.set('Cache-Control', 'public, max-age=86400');
}); });
// Register router // Register router

15
src/client/app/base.pug → src/server/web/views/base.pug
View file

@ -9,7 +9,6 @@ html
head head
meta(charset='utf-8') meta(charset='utf-8')
meta(name='application-name' content='Misskey') meta(name='application-name' content='Misskey')
meta(name='theme-color' content=themeColor)
meta(name='referrer' content='origin') meta(name='referrer' content='origin')
meta(property='og:site_name' content='Misskey') meta(property='og:site_name' content='Misskey')
link(rel='manifest' href='/manifest.json') link(rel='manifest' href='/manifest.json')
@ -23,16 +22,16 @@ html
block meta block meta
block og
meta(property='og:image' content=img)
style style
include ./../../../built/client/assets/init.css include ./../../../../built/client/assets/init.css
script script
include ./../../../built/client/assets/boot.js include ./../../../../built/client/assets/boot.js
script script
include ./../../../built/client/assets/safe.js include ./../../../../built/client/assets/safe.js
//- FontAwesome style
style #{facss}
body body
noscript: p noscript: p
@ -41,5 +40,5 @@ html
| Please turn on your JavaScript | Please turn on your JavaScript
div#ini. div#ini.
<svg viewBox="0 0 50 50"> <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> </svg>

8
src/server/web/views/note.pug
View file

@ -1,4 +1,4 @@
extends ../../../../src/client/app/base extends ./base
block vars block vars
- const user = note.user; - const user = note.user;
@ -11,14 +11,16 @@ block title
block desc block desc
meta(name='description' content= summary) meta(name='description' content= summary)
block meta block og
meta(name='twitter:card' content='summary')
meta(property='og:type' content='article') meta(property='og:type' content='article')
meta(property='og:title' content= title) meta(property='og:title' content= title)
meta(property='og:description' content= summary) meta(property='og:description' content= summary)
meta(property='og:url' content= url) meta(property='og:url' content= url)
meta(property='og:image' content= user.avatarUrl) meta(property='og:image' content= user.avatarUrl)
block meta
meta(name='twitter:card' content='summary')
if note.prev if note.prev
link(rel='prev' href=`${config.url}/notes/${note.prev}`) link(rel='prev' href=`${config.url}/notes/${note.prev}`)
if note.next if note.next

10
src/server/web/views/user.pug
View file

@ -1,4 +1,4 @@
extends ../../../../src/client/app/base extends ./base
block vars block vars
- const title = user.name ? `${user.name} (@${user.username})` : `@${user.username}`; - const title = user.name ? `${user.name} (@${user.username})` : `@${user.username}`;
@ -11,14 +11,16 @@ block title
block desc block desc
meta(name='description' content= user.description) meta(name='description' content= user.description)
block meta block og
meta(name='twitter:card' content='summary')
meta(property='og:type' content='blog') meta(property='og:type' content='blog')
meta(property='og:title' content= title) meta(property='og:title' content= title)
meta(property='og:description' content= user.description) meta(property='og:description' content= user.description)
meta(property='og:url' content= url) meta(property='og:url' content= url)
meta(property='og:image' content= img) meta(property='og:image' content= img)
block meta
meta(name='twitter:card' content='summary')
if !user.host if !user.host
link(rel='alternate' href=`${config.url}/users/${user._id}` type='application/activity+json') link(rel='alternate' href=`${config.url}/users/${user._id}` type='application/activity+json')
if user.uri if user.uri

1
webpack.config.ts
View file

@ -114,7 +114,6 @@ module.exports = {
clear: false clear: false
}), }),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
_THEME_COLOR_: JSON.stringify(constants.themeColor),
_COPYRIGHT_: JSON.stringify(constants.copyright), _COPYRIGHT_: JSON.stringify(constants.copyright),
_VERSION_: JSON.stringify(meta.version), _VERSION_: JSON.stringify(meta.version),
_CLIENT_VERSION_: JSON.stringify(version), _CLIENT_VERSION_: JSON.stringify(version),