Skip to content

W
wiki-js
Commit 4fd8dfbb authored by NGPixel's avatar NGPixel
Browse files
Options

refactor: switch to poi compiler

parent 74bd7221
Hide whitespace changes
Inline Side-by-side
Showing with 423 additions and 34 deletions
.babelrc
View file @ 4fd8dfbb
{
"comments": false,
"comments": true,
"presets": [
["env", {
"targets": {
......
assets/fonts/wiki-js.woff deleted 100644 → 0
View file @ 74bd7221
This diff was suppressed by a .gitattributes entry.
assets/fonts/wiki-js.woff2 deleted 100644 → 0
View file @ 74bd7221
This diff was suppressed by a .gitattributes entry.
assets/images/logo.png deleted 100644 → 0
View file @ 74bd7221
This diff was suppressed by a .gitattributes entry.
assets/svg/login-bg-dark.svg deleted 100644 → 0
View file @ 74bd7221
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1500 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M1500,543c0,0 -135.753,54.677 -252.197,101.577c-106.023,42.702 -223.596,47.2 -332.571,12.724c-56.088,-17.745 -118.404,-37.46 -173.999,-55.048c-103.773,-32.831 -216.376,-22.709 -312.631,28.103c0,0 0,0.001 0,0.001c-94.821,50.055 -206.441,57.476 -307.053,20.415c-63.317,-23.322 -121.549,-44.772 -121.549,-44.772l0,417l1500,0l0,-480Z" style="fill:#2d2d2d;fill-opacity:0.282609;"/>
<path d="M1510,580c0,0 -144.155,47.882 -252.311,83.806c-74.651,24.796 -156.199,17.958 -225.679,-18.923c0,0 0,0 0,0c-62.207,-33.021 -133.629,-44.415 -203.023,-32.389c-98.381,17.051 -244.859,42.438 -352.664,61.121c-92.259,15.99 -187.076,8.079 -275.41,-22.977c-93.342,-32.818 -200.913,-70.638 -200.913,-70.638l0,466l1500,0l10,-466Z" style="fill:#2d2d2d;fill-opacity:0.550725;"/>
<path d="M1500,650c0,0 -143.367,28.581 -239.425,47.731c-56.087,11.181 -113.694,12.508 -170.237,3.922c-74.75,-11.351 -183.318,-27.838 -261.719,-39.743c-65.252,-9.909 -131.707,-8.759 -196.577,3.4c-49.655,9.308 -109.704,20.564 -158.992,29.803c-63.125,11.833 -127.839,12.479 -191.188,1.911c-111.875,-18.665 -281.862,-47.024 -281.862,-47.024l0,430l1500,0l0,-430Z" style="fill:#2d2d2d;"/>
</svg>
assets/svg/login-bg-motif-error.svg deleted 100644 → 0
View file @ 74bd7221
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="105" viewBox="0 0 80 105">
<g fill-rule="evenodd">
<g id="death-star" fill="#000000" fill-opacity="0.05">
<path d="M20 10a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm15 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zM20 75a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zm30-65a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm0 65a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zM35 10a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zM5 45a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zm60 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10z" />
</g>
</g>
</svg>
client/js/app.js
View file @ 4fd8dfbb
......@@ -12,7 +12,6 @@ import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import store from './store'
import icons from '../svg/icons.svg'
// ====================================
// Load Modules
......@@ -172,5 +171,7 @@ document.addEventListener('DOMContentLoaded', ev => {
// Load Icons
// ====================================
document.body.insertAdjacentHTML('beforeend', icons)
import(/* webpackChunkName: "icons" */ '../svg/icons.svg').then(icons => {
document.body.insertAdjacentHTML('beforeend', icons)
})
})
client/js/components/login.vue
View file @ 4fd8dfbb
......@@ -196,3 +196,323 @@ export default {
}
}
</script>
<style lang="scss">
.login {
background-color: mc('blue', '800');
background-image: url('../../static/svg/login-bg-motif.svg');
background-repeat: repeat;
background-size: 200px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
animation: loginBgReveal 20s linear infinite;
@include keyframes(loginBgReveal) {
0% {
background-position-y: 0;
}
100% {
background-position-y: -800px;
}
}
&::before {
content: '';
position: absolute;
background-image: url('../../static/svg/login-bg.svg');
background-position: center bottom;
background-size: cover;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
@include until($tablet) {
display: none;
}
}
&::after {
content: '';
position: absolute;
background-image: linear-gradient(to bottom, rgba(mc('blue', '800'), 1) 0%, rgba(mc('blue', '800'), 0) 100%);
top: 0;
left: 0;
width: 100vw;
height: 25vh;
}
&-container {
position: relative;
display: flex;
width: 400px;
align-items: stretch;
box-shadow: 0 14px 28px rgba(0,0,0,0.2);
border-radius: 6px;
animation: zoomIn .5s ease;
&::after {
position: absolute;
top: 1rem;
right: 1rem;
content: " ";
@include spinner(mc('blue', '500'),0.5s,16px);
display: none;
}
&.is-expanded {
width: 650px;
.login-frame {
border-radius: 0 6px 6px 0;
border-left: none;
@include until($tablet) {
border-radius: 0;
}
}
}
&.is-loading::after {
display: block;
}
@include until($tablet) {
width: 100%;
border-radius: 0;
&.is-expanded {
width: 100%;
}
}
}
&-providers {
display: flex;
flex-direction: column;
width: 250px;
border-right: none;
border-radius: 6px 0 0 6px;
z-index: 1;
overflow: hidden;
@include until($tablet) {
width: 50px;
border-radius: 0;
}
button {
flex: 0 1 50px;
padding: 5px 15px;
border: none;
color: #FFF;
// background: linear-gradient(to right, rgba(mc('light-blue', '800'), .7), rgba(mc('light-blue', '800'), 1));
// border-top: 1px solid rgba(mc('light-blue', '900'), .5);
background: linear-gradient(to right, rgba(0,0,0, .5), rgba(0,0,0, .7));
border-top: 1px solid rgba(0,0,0, .2);
font-family: $core-font-standard;
font-weight: 600;
text-align: left;
min-height: 40px;
display: flex;
justify-content: flex-start;
align-items: center;
transition: all .4s ease;
&:focus {
outline: none;
}
@include until($tablet) {
justify-content: center;
}
&:hover {
background-color: rgba(0,0,0, .4);
}
&:first-child {
border-top: none;
&.is-active {
border-top: 1px solid rgba(255,255,255, .5);
}
}
&.is-active {
background-image: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,.77) 100%);
color: mc('grey', '800');
cursor: default;
&:hover {
background-color: transparent;
}
svg path {
fill: mc('grey', '800');
}
}
i {
margin-right: 10px;
font-size: 16px;
@include until($tablet) {
margin-right: 0;
font-size: 20px;
}
}
svg {
margin-right: 10px;
width: auto;
height: 20px;
max-width: 18px;
max-height: 20px;
path {
fill: #FFF;
}
@include until($tablet) {
margin-right: 0;
font-size: 20px;
}
}
span {
font-weight: 600;
@include until($tablet) {
display: none;
}
}
}
&-fill {
flex: 1 1 0;
background: linear-gradient(to right, rgba(mc('light-blue', '800'), .7), rgba(mc('light-blue', '800'), 1));
}
}
&-frame {
background-image: radial-gradient(circle at top center, rgba(255,255,255,1) 5%,rgba(255,255,255,.6) 100%);
border: 1px solid rgba(255,255,255, .5);
border-radius: 6px;
width: 400px;
padding: 1rem;
color: mc('grey', '700');
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
@include until($tablet) {
width: 100%;
border-radius: 0;
border: none;
}
h1 {
font-size: 2rem;
font-weight: 600;
color: mc('light-blue', '700');
text-shadow: 1px 1px 0 #FFF;
padding: 0;
margin: 0;
}
h2 {
font-size: 1.5rem;
font-weight: 300;
color: mc('grey', '700');
text-shadow: 1px 1px 0 #FFF;
padding: 0;
margin: 0 0 25px 0;
}
form {
display: flex;
flex-direction: column;
}
input[type=text], input[type=password] {
width: 100%;
border: 1px solid rgba(mc('blue-grey','500'), .5);
border-radius: 3px;
background-color: rgba(255,255,255,.9);
box-shadow: inset 0 0 0 3px rgba(255,255,255, .25);
padding: 0 15px;
height: 40px;
margin: 0 0 10px 0;
color: mc('grey', '700');
font-weight: 600;
font-size: .8rem;
transition: all 0.4s ease;
text-align: center;
&:focus {
outline: none;
border-color: mc('light-blue','500');
background-color: rgba(255,255,255,1);
box-shadow: inset 0 0 8px rgba(mc('light-blue','500'), .5);
color: mc('light-blue', '800');
}
}
.button {
background-image: linear-gradient(to bottom, mc('blue', '400') 0%, mc('blue', '600') 50%, mc('blue', '700') 100%);
background-repeat: no-repeat;
background-size: 100% 200%;
&:hover {
background-position-y: 100%;
}
}
}
&-tfa {
position: relative;
display: flex;
width: 400px;
align-items: stretch;
box-shadow: 0 14px 28px rgba(0,0,0,0.2);
border-radius: 6px;
animation: zoomIn .5s ease;
}
&-copyright {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
bottom: 10vh;
width: 100%;
z-index: 2;
color: mc('grey', '500');
font-weight: 400;
a {
font-weight: 600;
color: mc('blue', '500');
margin-left: .25rem;
@include until($tablet) {
color: mc('blue', '200');
}
}
@include until($tablet) {
color: mc('blue', '50');
}
}
}
</style>
client/scss/app.scss
View file @ 4fd8dfbb
@charset "utf-8";
$primary: 'indigo';
@import "base/variables";
@import "base/material";
@import "base/reset";
@import "base/mixins";
@import "base/fonts";
@import "base/icons";
@import "base/base";
@import "global";
@import "libs/animate";
......@@ -21,7 +11,6 @@ $primary: 'indigo';
@import 'components/grid';
@import 'components/hero';
@import 'components/history';
@import 'components/login';
@import 'components/markdown-content';
@import 'components/modal';
@import 'components/nav';
......
client/scss/components/setup.scss
View file @ 4fd8dfbb
.setup {
background-color: #1565c0;
background-image: url('../svg/config-bg.svg');
background-image: url('../static/svg/config-bg.svg');
width: 100%;
min-height: 100%;
padding-top: 1rem;
......
client/scss/global.scss 0 → 100644
View file @ 4fd8dfbb
@charset "utf-8";
$primary: 'indigo';
@import "base/variables";
@import "base/material";
@import "base/reset";
@import "base/mixins";
@import "base/fonts";
@import "base/icons";
@import "base/base";
\ No newline at end of file
assets/favicon.ico → client/static/favicon.ico
View file @ 4fd8dfbb
This diff was suppressed by a .gitattributes entry.
package.json
View file @ 4fd8dfbb
......@@ -7,8 +7,8 @@
"start": "node wiki start",
"stop": "node wiki stop",
"restart": "node wiki restart",
"build": "node dev/fuse --build",
"dev:client": "node dev/fuse --dev",
"build": "poi build",
"dev:client": "poi watch",
"dev:server": "nodemon",
"dev:server:alt": "node-dev server --no-deps --respawn --no-notify",
"test": "eslint --ext .js,.vue . && jest"
......@@ -168,8 +168,13 @@
"node-dev": "3.1.3",
"node-sass": "4.7.2",
"nodemon": "1.14.3",
"poi": "9.6.12",
"postcss-selector-parser": "3.1.1",
"pug-lint": "2.5.0",
"raw-loader": "0.5.1",
"sass-loader": "6.0.6",
"sass-resources-loader": "1.3.1",
"svg-sprite-loader": "3.6.2",
"twemoji-awesome": "1.0.6",
"typescript": "2.6.2",
"uglify-es": "3.2.2",
......
poi.config.js 0 → 100644
View file @ 4fd8dfbb
const path = require('path')
const _ = require('lodash')
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
module.exports = {
entry: 'client/index.js',
dist: 'assets',
staticFolder: 'client/static',
filename: {
js: 'js/[name].js',
css: 'css/bundle.css',
images: 'images/[name].[ext]',
fonts: 'fonts/[name].[ext]',
chunk: 'js/[name].chunk.js'
},
autoprefixer: {
browsers: [
'last 6 Chrome major versions',
'last 6 Firefox major versions',
'last 4 Safari major versions',
'last 4 Edge major versions',
'last 3 iOS major versions',
'last 3 Android major versions',
'last 2 ChromeAndroid major versions',
'Explorer 11'
]
},
html: false,
hash: false,
sourceMap: true,
extendWebpack (config) {
// Vue - Default SCSS Imports
config.module.rule('vue')
.use('vue-loader')
.tap(opts => {
opts.loaders.scss.push({
loader: 'sass-resources-loader',
options: {
resources: path.join(__dirname, './client/scss/global.scss')
}
})
return opts
})
// SVG Loader
config.module.rule('svg')
.exclude.add(path.join(__dirname, './client/svg')).end()
.use('file-loader')
.tap(opts => {
opts.name = '[name].[ext]'
opts.outputPath = 'svg/'
return opts
})
config.module.rule('svgSymbols')
.include.add(path.join(__dirname, './client/svg')).end()
.use('raw-loader')
.loader('raw-loader')
// config.module.rule('svg').uses.delete('file-loader')
// config.module.rule('svg')
// .use('svg-sprite-loader')
// .loader('svg-sprite-loader', {
// extract: true,
// spriteFilename: 'svg/symbols.svg'
// })
// config.plugin('svg-sprite-loader')
// .use(SpriteLoaderPlugin)
// Vue with Compiler Alias
config.resolve.alias.set('vue$', 'vue/dist/vue.common.js')
},
webpack (config) {
return config
}
}
server/views/master.pug
View file @ 4fd8dfbb
......@@ -22,8 +22,9 @@ html
var siteConfig = !{JSON.stringify(config.site)}
//- JS / CSS
script(type='text/javascript', src=config.site.path + 'js/libs.js')
script(type='text/javascript', src=config.site.path + 'js/app.js')
script(type='text/javascript', src=config.site.path + 'js/manifest.js')
script(type='text/javascript', src=config.site.path + 'js/vendor.js')
script(type='text/javascript', src=config.site.path + 'js/client.js')
block head
......
yarn.lock
View file @ 4fd8dfbb
This diff was suppressed by a .gitattributes entry.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment