なんかもうめっちゃ変えた

This commit is contained in:
syuilo 2017-12-17 14:35:30 +09:00
parent 5fe7fcd3a0
commit 02370d280f
21 changed files with 185 additions and 118 deletions

View file

@ -20,16 +20,8 @@ import * as mocha from 'gulp-mocha';
import * as replace from 'gulp-replace';
import * as htmlmin from 'gulp-htmlmin';
const uglifyes = require('uglify-es');
import * as fontawesome from '@fortawesome/fontawesome';
import * as regular from '@fortawesome/fontawesome-free-regular';
import * as solid from '@fortawesome/fontawesome-free-solid';
import * as brands from '@fortawesome/fontawesome-free-brands';
// Add icons
fontawesome.library.add(regular);
fontawesome.library.add(solid);
fontawesome.library.add(brands);
import { fa } from './src/common/build/fa';
import version from './src/version';
import config from './src/conf';
@ -179,7 +171,7 @@ gulp.task('build:client:pug', [
.pipe(pug({
locals: {
themeColor: constants.themeColor,
facss: fontawesome.dom.css(),
facss: fa.dom.css(),
//hljscss: fs.readFileSync('./node_modules/highlight.js/styles/default.css', 'utf8')
hljscss: fs.readFileSync('./src/web/assets/code-highlight.css', 'utf8')
}

57
src/common/build/fa.ts Normal file
View file

@ -0,0 +1,57 @@
/**
* Replace fontawesome symbols
*/
import * as fontawesome from '@fortawesome/fontawesome';
import * as regular from '@fortawesome/fontawesome-free-regular';
import * as solid from '@fortawesome/fontawesome-free-solid';
import * as brands from '@fortawesome/fontawesome-free-brands';
// Add icons
fontawesome.library.add(regular);
fontawesome.library.add(solid);
fontawesome.library.add(brands);
export const pattern = /%fa:(.+?)%/g;
export const replacement = (_, key) => {
const args = key.split(' ');
let prefix = 'fas';
const classes = [];
let transform = '';
let name;
args.forEach(arg => {
if (arg == 'R' || arg == 'S' || arg == 'B') {
prefix =
arg == 'R' ? 'far' :
arg == 'S' ? 'fas' :
arg == 'B' ? 'fab' :
'';
} else if (arg[0] == '.') {
classes.push('fa-' + arg.substr(1));
} else if (arg[0] == '-') {
transform = arg.substr(1).split('|').join(' ');
} else {
name = arg;
}
});
const icon = fontawesome.icon({ prefix, iconName: name }, {
classes: classes
});
if (icon) {
icon.transform = fontawesome.parse.transform(transform);
return `<i data-fa class="${name}">${icon.html[0]}</i>`;
} else {
console.warn(`'${name}' not found in fa`);
return '';
}
};
export default (src: string) => {
return src.replace(pattern, replacement);
};
export const fa = fontawesome;

50
src/common/build/i18n.ts Normal file
View file

@ -0,0 +1,50 @@
/**
* Replace i18n texts
*/
import locale from '../../../locales';
export default class Replacer {
private lang: string;
public pattern = /"%i18n:(.+?)%"|'%i18n:(.+?)%'|%i18n:(.+?)%/g;
constructor(lang: string) {
this.lang = lang;
this.get = this.get.bind(this);
this.replacement = this.replacement.bind(this);
}
private get(key: string) {
let text = locale[this.lang];
// Check the key existance
const error = key.split('.').some(k => {
if (text.hasOwnProperty(k)) {
text = text[k];
return false;
} else {
return true;
}
});
if (error) {
console.warn(`key '${key}' not found in '${this.lang}'`);
return key; // Fallback
} else {
return text;
}
}
public replacement(match, a, b, c) {
const key = a || b || c;
if (match[0] == '"') {
return '"' + this.get(key).replace(/"/g, '\\"') + '"';
} else if (match[0] == "'") {
return '\'' + this.get(key).replace(/'/g, '\\\'') + '\'';
} else {
return this.get(key);
}
}
}

View file

@ -1,4 +1,4 @@
@import "../app"
@import "../../const"
button
font-family sans-serif

4
src/web/const.styl Normal file
View file

@ -0,0 +1,4 @@
json('../const.json')
$theme-color = themeColor
$theme-color-foreground = themeColorForeground

View file

@ -7,6 +7,7 @@ section
h2 自分の所有するアカウントからAPIにアクセスする場合
p 「設定 > API」で、APIにアクセスするのに必要なAPIキーを取得してください。
p APIにアクセスする際には、リクエストにAPIキーを「i」というパラメータ名で含めます。
div.ui.info.warn: p %fa:exclamation-triangle%アカウントを不正利用される可能性があるため、このトークンは第三者に教えないでください(アプリなどにも入力しないでください)。
p APIの詳しい使用法は「Misskey APIの利用」セクションをご覧ください。
section
@ -15,7 +16,7 @@ section
| 直接ユーザーのAPIキーをアプリケーションが扱うのは危険なので、
| アプリケーションからAPIを利用する際には、アプリケーションとアプリケーションを利用するユーザーが結び付けられた専用のトークン(アクセストークン)をMisskeyに発行してもらい、
| そのトークンをリクエストのパラメータに含める必要があります。
| (アクセストークンは、ユーザーが自分のアカウントにあなたのアプリケーションがアクセスすることを許可した場合のみ発行されます)
div.ui.info: p %fa:info-circle%アクセストークンは、ユーザーが自分のアカウントにあなたのアプリケーションがアクセスすることを許可した場合のみ発行されます
p それでは、アクセストークンを取得するまでの流れを説明します。
@ -46,9 +47,8 @@ section
td 権限
td あなたのアプリケーションやWebサービスが要求する権限。ここで要求した機能だけがAPIからアクセスできます。
p
| 登録が済むとアプリケーションのシークレットキーが入手できます。このシークレットキーは後で使用します。
| アプリに成りすまされる可能性があるため、極力このシークレットキーは公開しないようにしてください。
p 登録が済むとアプリケーションのシークレットキーが入手できます。このシークレットキーは後で使用します。
div.ui.info.warn: p %fa:exclamation-triangle%アプリに成りすまされる可能性があるため、極力このシークレットキーは公開しないようにしてください。
section
h3 2.ユーザーに認証させる

View file

@ -17,7 +17,7 @@ block main
p#desc= desc[lang] || desc['ja']
section
h2= common.i18n[lang]['docs']['api']['endpoints']['params']
h2 %i18n:docs.api.endpoints.params%
+propTable(params)
if paramDefs
@ -28,5 +28,5 @@ block main
if res
section
h2= common.i18n[lang]['docs']['api']['endpoints']['res']
h2 %i18n:docs.api.endpoints.res%
+propTable(res)

View file

@ -10,7 +10,7 @@ block main
p#desc= desc[lang] || desc['ja']
section
h2= common.i18n[lang]['docs']['api']['entities']['properties']
h2 %i18n:docs.api.entities.properties%
+propTable(props)
if propDefs

View file

@ -10,13 +10,16 @@ import * as pug from 'pug';
import * as yaml from 'js-yaml';
import * as mkdirp from 'mkdirp';
import locales from '../../../../locales';
import I18nReplacer from '../../../common/build/i18n';
import fa from '../../../common/build/fa';
import config from './../../../conf';
import generateVars from '../vars';
const commonVars = generateVars();
const langs = Object.keys(commonVars.i18n);
const langs = Object.keys(locales);
const kebab = string => string.replace(/([a-z])([A-Z])/g, '$1-$2').replace(/\s+/g, '-').toLowerCase();
@ -124,6 +127,9 @@ gulp.task('doc:api:endpoints', () => {
console.error(renderErr);
return;
}
const i18n = new I18nReplacer(lang);
html = html.replace(i18n.pattern, i18n.replacement);
html = fa(html);
const htmlPath = `./built/web/docs/${lang}/api/endpoints/${ep.endpoint}.html`;
mkdirp(path.dirname(htmlPath), (mkdirErr) => {
if (mkdirErr) {
@ -164,6 +170,9 @@ gulp.task('doc:api:entities', () => {
console.error(renderErr);
return;
}
const i18n = new I18nReplacer(lang);
html = html.replace(i18n.pattern, i18n.replacement);
html = fa(html);
const htmlPath = `./built/web/docs/${lang}/api/entities/${kebab(entity.name)}.html`;
mkdirp(path.dirname(htmlPath), (mkdirErr) => {
if (mkdirErr) {

View file

@ -1,10 +1,10 @@
mixin propTable(props)
table.props
thead: tr
th= common.i18n[lang]['docs']['api']['props']['name']
th= common.i18n[lang]['docs']['api']['props']['type']
th= common.i18n[lang]['docs']['api']['props']['optional']
th= common.i18n[lang]['docs']['api']['props']['description']
th %i18n:docs.api.props.name%
th %i18n:docs.api.props.type%
th %i18n:docs.api.props.optional%
th %i18n:docs.api.props.description%
tbody
each prop in props
tr
@ -31,7 +31,7 @@ mixin propTable(props)
| (Date)
td.optional
if prop.optional
= common.i18n[lang]['docs']['api']['props']['yes']
| %i18n:docs.api.props.yes%
else
= common.i18n[lang]['docs']['api']['props']['no']
| %i18n:docs.api.props.no%
td.desc!= prop.desc[lang] || prop.desc['ja']

View file

@ -7,13 +7,12 @@ import * as path from 'path';
import * as glob from 'glob';
import * as gulp from 'gulp';
import * as pug from 'pug';
//import * as yaml from 'js-yaml';
import * as mkdirp from 'mkdirp';
import stylus = require('gulp-stylus');
import cssnano = require('gulp-cssnano');
//import config from './../../conf';
import I18nReplacer from '../../common/build/i18n';
import fa from '../../common/build/fa';
import generateVars from './vars';
require('./api/gulpfile.ts');
@ -53,6 +52,9 @@ gulp.task('doc:docs', () => {
console.error(renderErr2);
return;
}
const i18n = new I18nReplacer(lang);
html = html.replace(i18n.pattern, i18n.replacement);
html = fa(html);
const htmlPath = `./built/web/docs/${lang}/${name}.html`;
mkdirp(path.dirname(htmlPath), (mkdirErr) => {
if (mkdirErr) {

View file

@ -9,6 +9,9 @@ html(lang= lang)
link(rel="stylesheet" href="/assets/style.css")
block meta
//- FontAwesome style
style #{common.facss}
body
nav
ul
@ -33,6 +36,6 @@ html(lang= lang)
footer
p
= common.i18n[lang]['docs']['edit-this-page-on-github']
a(href=src target="_blank")= common.i18n[lang]['docs']['edit-this-page-on-github-link']
| %i18n:docs.edit-this-page-on-github%
a(href=src target="_blank") %i18n:docs.edit-this-page-on-github-link%
small= common.copyright

View file

@ -1,4 +1,5 @@
@import "../style"
@import "./ui"
body
margin 0

19
src/web/docs/ui.styl Normal file
View file

@ -0,0 +1,19 @@
.ui.info
display block
margin 1em 0
padding 0 1em
font-size 90%
color rgba(#000, 0.87)
background #f8f8f9
border-radius 4px
overflow hidden
> p
opacity 0.8
> [data-fa]:first-child
margin-right 0.25em
&.warn
color #573a08
background #FFFAF3

View file

@ -1,7 +1,8 @@
import * as fs from 'fs';
import * as glob from 'glob';
import * as yaml from 'js-yaml';
import langs from '../../../locales';
import { fa } from '../../common/build/fa';
import config from '../../conf';
const constants = require('../../const.json');
@ -37,9 +38,9 @@ export default function(): { [key: string]: any } {
vars['config'] = config;
vars['i18n'] = langs;
vars['copyright'] = constants.copyright;
vars['facss'] = fa.dom.css();
return vars;
}

View file

@ -1,9 +1,6 @@
json('../const.json')
@charset 'utf-8'
$theme-color = themeColor
$theme-color-foreground = themeColorForeground
@import "./const"
/*
::selection

View file

@ -1,5 +1,5 @@
import rules from './rules';
export default (lang, locale) => ({
rules: rules(lang, locale)
export default lang => ({
rules: rules(lang)
});

View file

@ -3,16 +3,7 @@
*/
const StringReplacePlugin = require('string-replace-webpack-plugin');
import * as fontawesome from '@fortawesome/fontawesome';
import * as regular from '@fortawesome/fontawesome-free-regular';
import * as solid from '@fortawesome/fontawesome-free-solid';
import * as brands from '@fortawesome/fontawesome-free-brands';
// Add icons
fontawesome.library.add(regular);
fontawesome.library.add(solid);
fontawesome.library.add(brands);
import { pattern, replacement } from '../../../src/common/build/fa';
export default () => ({
enforce: 'pre',
@ -20,41 +11,7 @@ export default () => ({
exclude: /node_modules/,
loader: StringReplacePlugin.replace({
replacements: [{
pattern: /%fa:(.+?)%/g, replacement: (_, key) => {
const args = key.split(' ');
let prefix = 'fas';
const classes = [];
let transform = '';
let name;
args.forEach(arg => {
if (arg == 'R' || arg == 'S' || arg == 'B') {
prefix =
arg == 'R' ? 'far' :
arg == 'S' ? 'fas' :
arg == 'B' ? 'fab' :
'';
} else if (arg[0] == '.') {
classes.push('fa-' + arg.substr(1));
} else if (arg[0] == '-') {
transform = arg.substr(1).split('|').join(' ');
} else {
name = arg;
}
});
const icon = fontawesome.icon({ prefix, iconName: name }, {
classes: classes
});
if (icon) {
icon.transform = fontawesome.parse.transform(transform);
return `<i data-fa class="${name}">${icon.html[0]}</i>`;
} else {
console.warn(`'${name}' not found in fa`);
return '';
}
}
pattern, replacement
}]
})
});

View file

@ -3,28 +3,10 @@
*/
const StringReplacePlugin = require('string-replace-webpack-plugin');
import Replacer from '../../../src/common/build/i18n';
export default (lang, locale) => {
function get(key: string) {
let text = locale;
// Check the key existance
const error = key.split('.').some(k => {
if (text.hasOwnProperty(k)) {
text = text[k];
return false;
} else {
return true;
}
});
if (error) {
console.warn(`key '${key}' not found in '${lang}'`);
return key; // Fallback
} else {
return text;
}
}
export default lang => {
const replacer = new Replacer(lang);
return {
enforce: 'pre',
@ -32,14 +14,7 @@ export default (lang, locale) => {
exclude: /node_modules/,
loader: StringReplacePlugin.replace({
replacements: [{
pattern: /"%i18n:(.+?)%"/g, replacement: (_, key) =>
'"' + get(key).replace(/"/g, '\\"') + '"'
}, {
pattern: /'%i18n:(.+?)%'/g, replacement: (_, key) =>
'\'' + get(key).replace(/'/g, '\\\'') + '\''
}, {
pattern: /%i18n:(.+?)%/g, replacement: (_, key) =>
get(key)
pattern: replacer.pattern, replacement: replacer.replacement
}]
})
};

View file

@ -7,8 +7,8 @@ import tag from './tag';
import stylus from './stylus';
import typescript from './typescript';
export default (lang, locale) => [
i18n(lang, locale),
export default lang => [
i18n(lang),
license(),
fa(),
base64(),

View file

@ -8,7 +8,7 @@ import plugins from './plugins';
import langs from '../locales';
import version from '../src/version';
module.exports = Object.entries(langs).map(([lang, locale]) => {
module.exports = Object.keys(langs).map(lang => {
// Chunk name
const name = lang;
@ -32,7 +32,7 @@ module.exports = Object.entries(langs).map(([lang, locale]) => {
return {
name,
entry,
module: module_(lang, locale),
module: module_(lang),
plugins: plugins(version, lang),
output,
resolve: {