parent
e79be6a73f
commit
8e5b1e5bbe
@ -0,0 +1 @@
|
||||
APP_PORT=3000
|
||||
@ -0,0 +1,17 @@
|
||||
{
|
||||
"/public/js/spritemap.js": "/public/js/spritemap.js?id=2dda73ecee3bb668b395026efda6524c",
|
||||
"/public/js/app.js": "/public/js/app.js?id=39ef7cf2ac3e6e0bbe9216057c0c83db",
|
||||
"/public/js/hub.js": "/public/js/hub.js?id=95df7e59663f51cd22f28582c9816866",
|
||||
"/public/css/styles.css": "/public/css/styles.css?id=87a9399e6a5ef7045066b025166b8827",
|
||||
"/public/css/demo.html": "/public/css/demo.html?id=a54a5d205e3152fb64b33dda63ffa555",
|
||||
"/public/css/IBMPlexMono-Bold.eot": "/public/css/IBMPlexMono-Bold.eot?id=ef1fadf711db80a00542b202ab14f7ee",
|
||||
"/public/css/IBMPlexMono-Bold.ttf": "/public/css/IBMPlexMono-Bold.ttf?id=e46cace25a93f48a2ec32800717827cb",
|
||||
"/public/css/IBMPlexMono-Bold.woff": "/public/css/IBMPlexMono-Bold.woff?id=8864bd7cb954c4646045e3fc0bdec90c",
|
||||
"/public/css/IBMPlexMono-Bold.woff2": "/public/css/IBMPlexMono-Bold.woff2?id=c6d3f08fe7a9fecab40d748b98c87cc5",
|
||||
"/public/css/IBMPlexMono.eot": "/public/css/IBMPlexMono.eot?id=d68f064d6b86ff47b38ad486a3362d82",
|
||||
"/public/css/IBMPlexMono.ttf": "/public/css/IBMPlexMono.ttf?id=60d8ae961dba3289c1d2d54e0b85c9b7",
|
||||
"/public/css/IBMPlexMono.woff": "/public/css/IBMPlexMono.woff?id=18a7a5a76b4176759e2e1b3e674a7f82",
|
||||
"/public/css/IBMPlexMono.woff2": "/public/css/IBMPlexMono.woff2?id=428bd06c5eb0362494016994c26188b4",
|
||||
"/public/css/OFL.txt": "/public/css/OFL.txt?id=5c7bb1d9d37e52d30b53224261c955b2",
|
||||
"/public/css/stylesheet.css": "/public/css/stylesheet.css?id=a3e561da46246c3c582cddec544ad25f"
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "filehub",
|
||||
"workspaces": [
|
||||
"packages/*"
|
||||
],
|
||||
"scripts": {
|
||||
"start": "yarn workspace server start",
|
||||
"build": "yarn workspace frontend build"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import * as riot from 'riot'
|
||||
|
||||
import TinyNotification from '@tiny-components/notification/src/notification.riot'
|
||||
riot.register('tiny-notification', TinyNotification)
|
||||
|
||||
import TinySidebarForm from '@tiny-components/sidebar-form/src/sidebarForm.riot'
|
||||
riot.register('tiny-sidebar-form', TinySidebarForm)
|
||||
|
||||
import AppHubIndex from './components/hub/index.riot'
|
||||
import AppHubCreate from './components/hub/create.riot'
|
||||
import AppHubForm from './components/hub/form.riot'
|
||||
|
||||
// register components
|
||||
riot.register('app-hub-index', AppHubIndex)
|
||||
riot.register('app-hub-create', AppHubCreate)
|
||||
riot.register('app-hub-form', AppHubForm)
|
||||
|
||||
// mount components
|
||||
riot.mount('app-hub-index')
|
||||
@ -0,0 +1,43 @@
|
||||
<app-file-index>
|
||||
<div class="view">
|
||||
<div class="file">
|
||||
<div class="file__item m-bottom-3" each={ file in state.files }>
|
||||
<a href="/file/{ file.name }">
|
||||
{ file.name }
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
import fileStore from './../../stores/file.js'
|
||||
|
||||
/**
|
||||
* handle open and close of form for tasks
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, <me@herr-hase.wtf>
|
||||
*
|
||||
*/
|
||||
|
||||
export default {
|
||||
|
||||
state: {
|
||||
files: []
|
||||
},
|
||||
|
||||
onMounted()
|
||||
{
|
||||
fileStore.on('update', (data) => {
|
||||
this.state.files = data
|
||||
this.update()
|
||||
})
|
||||
|
||||
fileStore.get(this.props.hubId)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</app-file-index>
|
||||
@ -0,0 +1,54 @@
|
||||
<app-hub-create>
|
||||
<button class="button m-bottom-0" onclick={ (event) => { handleOpen(event) } }>
|
||||
<svg class="icon fill-text m-top-1 m-right-3" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
{ state.text }
|
||||
</button>
|
||||
|
||||
<script>
|
||||
|
||||
import hubStore from './../../stores/hub.js'
|
||||
|
||||
/**
|
||||
* handle open and close of form for tasks
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, <me@herr-hase.wtf>
|
||||
*
|
||||
*/
|
||||
|
||||
export default {
|
||||
|
||||
state: {
|
||||
text: 'new'
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
onMounted()
|
||||
{
|
||||
// if props for text is set
|
||||
if (this.props.text) {
|
||||
this.state.text = this.props.text
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* trigger open in storage
|
||||
*
|
||||
*
|
||||
* @param {object} event
|
||||
*
|
||||
*/
|
||||
handleOpen(event, data = undefined)
|
||||
{
|
||||
hubStore.trigger('open', data)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</app-hub-create>
|
||||
@ -0,0 +1,207 @@
|
||||
<app-hub-form>
|
||||
|
||||
<tiny-sidebar-form form-id="app-hub-form" open={ state.isOpen } close={ () => { handleClose() }} loading={ state.isLoading }>
|
||||
|
||||
<!-- slot:title -->
|
||||
<span slot="title">
|
||||
<virtual if={ state.current._id }>
|
||||
Edit Task { state.current.name }
|
||||
</virtual>
|
||||
<virtual if={ !state.current._id }>
|
||||
New Task
|
||||
</virtual>
|
||||
</span>
|
||||
|
||||
<!-- slot:header -->
|
||||
<form id="app-hub-form" class="form" slot="form" onsubmit={ (event) => { state.isLoading = true; update(); state.validator.submit(event) } }>
|
||||
|
||||
<input type="hidden" name="_id" value="{ state.current._id }" if={ state.current._id } />
|
||||
<input type="hidden" name="_rev" value="{ state.current._rev }" if={ state.current._rev } />
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
name
|
||||
<input class="field-text" name="name" type="text" value="{ state.current.name }" />
|
||||
<field-error name="name"></field-error>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
directory
|
||||
<input class="field-text" name="directory" type="text" value="{ state.current.directory }" />
|
||||
<field-error name="directory"></field-error>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
description
|
||||
<textarea class="field-text" name="description">{ state.current.description }</textarea>
|
||||
<field-error name="description"></field-error>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</tiny-sidebar-form>
|
||||
|
||||
<script>
|
||||
|
||||
import * as riot from 'riot'
|
||||
|
||||
import FormValidator from '@tiny-components/validator/src/formValidator.js'
|
||||
|
||||
// stores
|
||||
import hubStore from './../../stores/hub.js'
|
||||
import notificationStore from '@tiny-components/notification/src/notificationStore.js'
|
||||
|
||||
// mixins
|
||||
import sidebarFormMixin from '@tiny-components/sidebar-form/src/sidebarFormMixin.js'
|
||||
|
||||
import FieldError from '@tiny-components/validator/src/fieldError.riot'
|
||||
riot.register('field-error', FieldError)
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, <me@herr-hase.wtf>
|
||||
*
|
||||
*/
|
||||
|
||||
export default () => {
|
||||
return {
|
||||
|
||||
...sidebarFormMixin, // adding basic funtion for sidebar
|
||||
|
||||
state: {
|
||||
requestHandlers: [],
|
||||
validator: undefined
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
onMounted()
|
||||
{
|
||||
// creating formValidator
|
||||
this.state.validator = new FormValidator(this.$('.form'), {
|
||||
'name': {
|
||||
'presence': true
|
||||
},
|
||||
'directory': {
|
||||
'presence': true
|
||||
},
|
||||
'description': {
|
||||
'presence': false
|
||||
}
|
||||
})
|
||||
|
||||
// adding on success
|
||||
this.state.validator.onSuccess((event, data) => {
|
||||
this.handleSuccess(event, data)
|
||||
})
|
||||
|
||||
// adding on success
|
||||
this.state.validator.onError((event, data) => {
|
||||
this.state.isLoading = false
|
||||
|
||||
// add notification
|
||||
notificationStore.danger('Error! Check your input!')
|
||||
|
||||
this.update()
|
||||
})
|
||||
|
||||
// if open event
|
||||
hubStore.on('open', (data) => {
|
||||
this.state.isOpen = true
|
||||
|
||||
if (data && data._id) {
|
||||
this.state.current = data
|
||||
}
|
||||
|
||||
this.update()
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*
|
||||
*/
|
||||
reset()
|
||||
{
|
||||
this.state.current = {
|
||||
name: '',
|
||||
directory: '',
|
||||
description: ''
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* send data to server
|
||||
*
|
||||
* @param {object} event
|
||||
* @param {object} data
|
||||
*
|
||||
*/
|
||||
handleSuccess(event, data)
|
||||
{
|
||||
event.preventDefault()
|
||||
|
||||
let method = 'POST'
|
||||
|
||||
// if data has id, change to method for update task
|
||||
if (this.state.current._id) {
|
||||
method = 'PUT'
|
||||
}
|
||||
|
||||
fetch('/api/hubs/v1', {
|
||||
'method': method,
|
||||
'body': JSON.stringify(data),
|
||||
'headers': {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((response) => {
|
||||
|
||||
// stop loading
|
||||
this.state.isLoading = false
|
||||
|
||||
// add id to current
|
||||
this.state.current._id = response.data.id
|
||||
this.state.current._rev = response.data.rev
|
||||
|
||||
this.state.current = Object.assign(this.state.current, data)
|
||||
|
||||
if (method === 'POST') {
|
||||
notificationStore.success('Success! Task created!')
|
||||
} else {
|
||||
notificationStore.success('Success! Task ' + response.data.name + ' created!')
|
||||
}
|
||||
|
||||
// fetch for new tasks of component:tasks
|
||||
hubStore.get()
|
||||
|
||||
this.update()
|
||||
|
||||
// if button has attribute close
|
||||
if (event.submitter.attributes.close) {
|
||||
this.handleClose()
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
|
||||
// stop loading
|
||||
this.state.isLoading = false
|
||||
|
||||
// show error message
|
||||
notificationStore.danger('Error! Server has a Error, Request can not proceed!')
|
||||
this.update()
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</app-hub-form>
|
||||
@ -0,0 +1,54 @@
|
||||
<app-hub-index>
|
||||
|
||||
<div class="view">
|
||||
<div class="m-top-3 m-bottom-4">
|
||||
<app-hub-create></app-hub-create>
|
||||
</div>
|
||||
<div class="hub">
|
||||
<div class="hub__item m-bottom-3" each={ hub in state.hubs }>
|
||||
<a href="/hub/{ hub._id }">
|
||||
<div class="panel">
|
||||
<div class="panel__body">
|
||||
<h3 class="h5 m-bottom-0">{ hub.name }</h3>
|
||||
<p if={ hub.description }>
|
||||
{ hub.description }
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<app-hub-form></app-hub-form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
import hubStore from './../../stores/hub.js'
|
||||
|
||||
/**
|
||||
* handle open and close of form for tasks
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, <me@herr-hase.wtf>
|
||||
*
|
||||
*/
|
||||
|
||||
export default {
|
||||
|
||||
state: {
|
||||
hubs: []
|
||||
},
|
||||
|
||||
onMounted()
|
||||
{
|
||||
hubStore.on('update', (data) => {
|
||||
this.state.hubs = data
|
||||
this.update()
|
||||
})
|
||||
|
||||
hubStore.get()
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</app-hub-index>
|
||||
@ -0,0 +1,12 @@
|
||||
import * as riot from 'riot'
|
||||
|
||||
import TinyNotification from '@tiny-components/notification/src/notification.riot'
|
||||
riot.register('tiny-notification', TinyNotification)
|
||||
|
||||
import AppFileIndex from './components/file/index.riot'
|
||||
|
||||
// register components
|
||||
riot.register('app-file-index', AppFileIndex)
|
||||
|
||||
// mount components
|
||||
riot.mount('app-file-index')
|
||||
@ -0,0 +1,34 @@
|
||||
/**
|
||||
*
|
||||
* Store for hub
|
||||
*
|
||||
*
|
||||
* @author Björn Hase
|
||||
*
|
||||
*/
|
||||
|
||||
import observable from '@riotjs/observable'
|
||||
import notificationStore from '@tiny-components/notification/src/notificationStore.js'
|
||||
|
||||
export default observable(
|
||||
{
|
||||
/**
|
||||
* getting all hubs,
|
||||
* trigger update after response
|
||||
*
|
||||
*
|
||||
* @param {object} data
|
||||
*
|
||||
*/
|
||||
get(id)
|
||||
{
|
||||
fetch('/api/files/v1/' + id)
|
||||
.then((response) => response.json())
|
||||
.then((response) => {
|
||||
this.trigger('update', response.data)
|
||||
})
|
||||
.catch(() => {
|
||||
notificationStore.danger('Error! Connection Problem!')
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,34 @@
|
||||
/**
|
||||
*
|
||||
* Store for hub
|
||||
*
|
||||
*
|
||||
* @author Björn Hase
|
||||
*
|
||||
*/
|
||||
|
||||
import observable from '@riotjs/observable'
|
||||
import notificationStore from '@tiny-components/notification/src/notificationStore.js'
|
||||
|
||||
export default observable(
|
||||
{
|
||||
/**
|
||||
* getting all hubs,
|
||||
* trigger update after response
|
||||
*
|
||||
*
|
||||
* @param {object} data
|
||||
*
|
||||
*/
|
||||
get()
|
||||
{
|
||||
fetch('/api/hubs/v1')
|
||||
.then((response) => response.json())
|
||||
.then((response) => {
|
||||
this.trigger('update', response.data)
|
||||
})
|
||||
.catch(() => {
|
||||
notificationStore.danger('Error! Connection Problem!')
|
||||
})
|
||||
}
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,25 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "frontend",
|
||||
"version": "0.1.0",
|
||||
"scripts": {
|
||||
"build": "npx mix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@riotjs/observable": "^4.1.1",
|
||||
"@tiny-components/loading": "^0.1.0",
|
||||
"@tiny-components/notification": "^0.1.0",
|
||||
"@tiny-components/plain-ui": "^0.6.0",
|
||||
"@tiny-components/sidebar-form": "^0.1.0",
|
||||
"@tiny-components/validator": "^0.2.0",
|
||||
"riot": "^6.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@riotjs/webpack-loader": "^6.0.0",
|
||||
"laravel-mix": "^6.0.49",
|
||||
"laravel-mix-purgecss": "^6.0.0",
|
||||
"sass": "^1.52.3",
|
||||
"sass-loader": "^12.6.0",
|
||||
"svg-spritemap-webpack-plugin": "^4.4.0"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
.breadcrumb {
|
||||
ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
&:after {
|
||||
font-size: 1.2rem;
|
||||
margin: 0 0.5em;
|
||||
content: "\21E2";
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:after {
|
||||
content: '';
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--danger);
|
||||
|
||||
&:hover {
|
||||
color: var(--text-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
// format list of errors
|
||||
.field-error {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0 0 0 1em;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
@import
|
||||
|
||||
'@tiny-components/plain-ui/src/scss/plain-ui',
|
||||
|
||||
'components/field-error',
|
||||
'components/breadcrumb';
|
||||
@ -0,0 +1,49 @@
|
||||
{% layout 'layout.liquid' %}
|
||||
|
||||
{% block app_header %}
|
||||
<div class="bar">
|
||||
<div class="bar__start">
|
||||
<div class="meta m-top-3 m-bottom-3">
|
||||
<div class="meta__title m-bottom-2">
|
||||
Urban Filehub
|
||||
</div>
|
||||
<div class="breadcrumb">
|
||||
<ul>
|
||||
<li><a href="/">home</a></li>
|
||||
<li><h1 class="h5 m-bottom-0">{{ data.name }}</h1></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block app_main %}
|
||||
<div class="container-full">
|
||||
{% if data.description %}
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="panel">
|
||||
<div class="panel__body">
|
||||
<div class="content last-child-margin-0">
|
||||
<p>
|
||||
{{ data.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<app-file-index hub-id="{{ data._id }}"></app-file-index>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script async src="/js/hub.js"></script>
|
||||
{% endblock %}
|
||||
@ -0,0 +1,15 @@
|
||||
{% layout 'layout.liquid' %}
|
||||
|
||||
{% block app_main %}
|
||||
<div class="container-full">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<app-hub-index></app-hub-index>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script async src="/js/app.js"></script>
|
||||
{% endblock %}
|
||||
@ -0,0 +1,70 @@
|
||||
<!doctype html>
|
||||
<html lang="en_EN">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>
|
||||
Urban Filehub
|
||||
</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link href="/css/styles.css" rel="stylesheet" type="text/css">
|
||||
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
{% block app_header %}
|
||||
<div class="bar">
|
||||
<div class="bar__start">
|
||||
<h1 class="m-top-4 m-bottom-4 h4">
|
||||
Urban Filehub
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<noscript>
|
||||
<div class="container-full">
|
||||
<div class="grid justify-center">
|
||||
<div class="col-12">
|
||||
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
|
||||
Only works with Javascript!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
{% block app_main %}{% endblock %}
|
||||
<tiny-notification></tiny-notification>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container-full">
|
||||
<div class="grid justify-center">
|
||||
<div class="col-12">
|
||||
<hr / class="m-top-8">
|
||||
<div class="group">
|
||||
<div class="group__item">
|
||||
Published under
|
||||
<strong>
|
||||
GPL License
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const csrfToken = '{{ csrfToken }}'
|
||||
</script>
|
||||
|
||||
{% block script %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,15 @@
|
||||
{% layout 'layout.liquid' %}
|
||||
|
||||
{% block app_main %}
|
||||
<div class="container">
|
||||
<div class="grid justify-center">
|
||||
<div class="col-12 col-md-8">
|
||||
<app-login></app-login>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script async src="/js/app.js"></script>
|
||||
{% endblock %}
|
||||
@ -0,0 +1,82 @@
|
||||
const mix = require('laravel-mix')
|
||||
const path = require('path')
|
||||
|
||||
require('laravel-mix-purgecss')
|
||||
|
||||
// plugins
|
||||
const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin')
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Mix Asset Management
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Mix provides a clean, fluent API for defining some Webpack build steps
|
||||
| for your Laravel applications. By default, we are compiling the CSS
|
||||
| file for the application as well as bundling up all the JS files.
|
||||
|
|
||||
*/
|
||||
|
||||
|
||||
mix.webpackConfig({
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.riot$/,
|
||||
use: [{
|
||||
loader: '@riotjs/webpack-loader',
|
||||
options: {
|
||||
hot: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
]},
|
||||
plugins: [
|
||||
new SvgSpritemapPlugin('./node_modules/@tiny-components/plain-ui/src/icons/mono-icons/svg/*.svg', {
|
||||
output: {
|
||||
filename: 'public/symbol-defs.svg',
|
||||
chunk: {
|
||||
keep: true
|
||||
},
|
||||
svgo: {
|
||||
plugins: [{
|
||||
name: 'convertStyleToAttrs',
|
||||
active: true
|
||||
},{
|
||||
name: 'removeStyleElement',
|
||||
active: true
|
||||
}, {
|
||||
name: 'removeAttrs',
|
||||
params: {
|
||||
attrs: 'fill'
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
sprite: {
|
||||
prefix: 'icon-'
|
||||
}
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
mix
|
||||
.setPublicPath('../../')
|
||||
.js('js/app.js', 'public/js')
|
||||
.js('js/hub.js', 'public/js')
|
||||
.sass('scss/styles.scss', 'public/css')
|
||||
.purgeCss({
|
||||
extend: {
|
||||
content: [
|
||||
path.join(__dirname, 'js/**/*.riot'),
|
||||
path.join(__dirname, 'views/*.liquid')
|
||||
]
|
||||
}
|
||||
})
|
||||
.options({
|
||||
terser: {
|
||||
extractComments: false,
|
||||
},
|
||||
processCssUrls: false
|
||||
})
|
||||
.copyDirectory('node_modules/@tiny-components/plain-ui/src/fonts/**', '../../public/css')
|
||||
.version()
|
||||
@ -0,0 +1,58 @@
|
||||
import fastify from 'fastify'
|
||||
import dotenv from 'dotenv'
|
||||
import path from 'path'
|
||||
import { EventEmitter } from 'events'
|
||||
|
||||
// getting .env
|
||||
dotenv.config({ path: path.join(path.resolve(), '/../../.env') })
|
||||
|
||||
// create server
|
||||
const server = fastify()
|
||||
|
||||
/**
|
||||
* Add liquidjs
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
import { Liquid } from 'liquidjs'
|
||||
import view from '@fastify/view'
|
||||
|
||||
const engine = new Liquid({
|
||||
root: path.join(path.resolve(), '/../frontend/views'),
|
||||
extname: '.liquid',
|
||||
})
|
||||
|
||||
server.register(view, {
|
||||
engine: {
|
||||
liquid: engine
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* add routes
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
import hubHttpApi from './http/api/hubs.js'
|
||||
import filesHttpApi from './http/api/files.js'
|
||||
|
||||
import hubHttp from './http/hub.js'
|
||||
import indexHttp from './http/index.js'
|
||||
import staticHttp from './http/static.js'
|
||||
|
||||
server
|
||||
.register(hubHttpApi, {
|
||||
'prefix': '/api/hubs/v1'
|
||||
})
|
||||
.register(filesHttpApi, {
|
||||
'prefix': '/api/files/v1'
|
||||
})
|
||||
.register(hubHttp, {
|
||||
'prefix': '/hub'
|
||||
})
|
||||
.register(indexHttp)
|
||||
.register(staticHttp)
|
||||
|
||||
export default server
|
||||
@ -0,0 +1,27 @@
|
||||
import PouchDB from 'pouchdb'
|
||||
import PouchDBfind from 'pouchdb-find'
|
||||
|
||||
// adding plugin for index
|
||||
PouchDB.plugin(PouchDBfind)
|
||||
|
||||
// create database
|
||||
const pouchdb = new PouchDB('./../storage/database', {
|
||||
revs_limit: 5
|
||||
})
|
||||
|
||||
// create fields for index
|
||||
const fields = [
|
||||
'type',
|
||||
'name'
|
||||
]
|
||||
|
||||
// adding index
|
||||
try {
|
||||
await pouchdb.db.createIndex({
|
||||
index: {
|
||||
fields: fields
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
import PouchDB from 'pouchdb'
|
||||
import PouchDBfind from 'pouchdb-find'
|
||||
|
||||
/**
|
||||
* PouchdbHandler
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/HerrHase/super-hog
|
||||
*
|
||||
*/
|
||||
|
||||
class PouchdbHandler {
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
constructor() {
|
||||
PouchDB.plugin(PouchDBfind)
|
||||
|
||||
this.db = new PouchDB('./../../storage/database', {
|
||||
revs_limit: 5
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default PouchdbHandler
|
||||
@ -0,0 +1,58 @@
|
||||
import FileStore from './../../store/file.js'
|
||||
import HubStore from './../../store/hub.js'
|
||||
|
||||
/**
|
||||
* handle webhook
|
||||
*
|
||||
* @author Björn Hase
|
||||
* @license hhttps://www.gnu.org/licenses/gpl-3.0.en.html GPL-3
|
||||
* @link https://gitea.node001.net/HerrHase/tellme-bot.git
|
||||
*
|
||||
*/
|
||||
|
||||
export default async function(fastify, opts)
|
||||
{
|
||||
/**
|
||||
* getting post getting allowed parser class and send over xmpp
|
||||
*
|
||||
* @param {object} request
|
||||
* @param {object} response
|
||||
*
|
||||
*/
|
||||
fastify.get('/:hubId([-a-zA-Z0-9]{0,255})', async function (request, reply)
|
||||
{
|
||||
// create store
|
||||
const hubStore = new HubStore()
|
||||
|
||||
// getting single hub
|
||||
const hub = await hubStore.findOneById(request.params.hubId)
|
||||
|
||||
// result for request
|
||||
const result = {
|
||||
|
||||
}
|
||||
|
||||
if (!hub) {
|
||||
return reply
|
||||
.code('404')
|
||||
.send()
|
||||
}
|
||||
|
||||
let path = hub.directory
|
||||
|
||||
// getting path
|
||||
// @TODO validate path and make sure it is present in homeDir
|
||||
if (request.query.path) {
|
||||
path += '/' + request.query.path
|
||||
}
|
||||
|
||||
const fileStore = new FileStore(path)
|
||||
const files = await fileStore.get()
|
||||
|
||||
result['data'] = files['files']
|
||||
|
||||
reply
|
||||
.code(200)
|
||||
.send(result)
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,97 @@
|
||||
import HubStore from './../../store/hub.js'
|
||||
|
||||
/**
|
||||
* handle hub
|
||||
*
|
||||
*
|
||||
* @author Björn Hase
|
||||
* @license hhttps://www.gnu.org/licenses/gpl-3.0.en.html GPL-3
|
||||
* @link https://gitea.node001.net/HerrHase/tellme-bot.git
|
||||
*
|
||||
*/
|
||||
|
||||
export default async function(fastify, opts)
|
||||
{
|
||||
/**
|
||||
* getting post getting allowed parser class and send over xmpp
|
||||
*
|
||||
* @param {object} request
|
||||
* @param {object} response
|
||||
*
|
||||
*/
|
||||
fastify.get('/', async function (request, reply)
|
||||
{
|
||||
const hubStore = new HubStore()
|
||||
|
||||
const results = await hubStore.find()
|
||||
|
||||
reply
|
||||
.code(200)
|
||||
.send({
|
||||
'data': results
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* getting post getting allowed parser class and send over xmpp
|
||||
*
|
||||
* @param {object} request
|
||||
* @param {object} response
|
||||
*
|
||||
*/
|
||||
fastify.get('/:hubId', async function (request, reply)
|
||||
{
|
||||
reply
|
||||
.code(200)
|
||||
.send()
|
||||
})
|
||||
|
||||
/**
|
||||
* getting post getting allowed parser class and send over xmpp
|
||||
*
|
||||
* @param {object} request
|
||||
* @param {object} response
|
||||
*
|
||||
*/
|
||||
fastify.post('/', async function (request, reply)
|
||||
{
|
||||
const hubStore = new HubStore()
|
||||
|
||||
//
|
||||
const hub = await hubStore.create(request.body)
|
||||
|
||||
reply
|
||||
.code(200)
|
||||
.send({
|
||||
'data': hub
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* getting post getting allowed parser class and send over xmpp
|
||||
*
|
||||
* @param {object} request
|
||||
* @param {object} response
|
||||
*
|
||||
*/
|
||||
fastify.put('/:hubId', async function (request, reply)
|
||||
{
|
||||
reply
|
||||
.code(200)
|
||||
.send()
|
||||
})
|
||||
|
||||
/**
|
||||
* getting post getting allowed parser class and send over xmpp
|
||||
*
|
||||
* @param {object} request
|
||||
* @param {object} response
|
||||
*
|
||||
*/
|
||||
fastify.delete('/:hubId', async function (request, reply)
|
||||
{
|
||||
reply
|
||||
.code(200)
|
||||
.send()
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
import HubStore from './../store/hub.js'
|
||||
|
||||
/**
|
||||
*
|
||||
* @author Björn Hase, <me@herr-hase.wtf>
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/HerrHase/filehub
|
||||
*
|
||||
*/
|
||||
|
||||
export default async function(fastify, opts) {
|
||||
|
||||
/**
|
||||
* get single hub
|
||||
*
|
||||
* @param {object} request
|
||||
* @param {object} response
|
||||
*
|
||||
*/
|
||||
fastify.get('/:id([-a-zA-Z0-9]{0,255})', async (request, response) => {
|
||||
|
||||
// create store
|
||||
const hubStore = new HubStore()
|
||||
|
||||
// getting single
|
||||
const result = await hubStore.findOneById(request.params.id)
|
||||
|
||||
return response.view('../frontend/views/hub', {
|
||||
'data': result
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
/**
|
||||
* index
|
||||
*
|
||||
* - home view
|
||||
* - logout user
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/HerrHase/super-hog
|
||||
*
|
||||
*/
|
||||
|
||||
export default async function(fastify, opts)
|
||||
{
|
||||
/**
|
||||
* home
|
||||
*
|
||||
* @param {object} request
|
||||
* @param {object} response
|
||||
*
|
||||
*/
|
||||
fastify.get('/', (request, response) =>
|
||||
{
|
||||
response.view('../frontend/views/index')
|
||||
})
|
||||
|
||||
/**
|
||||
* logout
|
||||
*
|
||||
* @param {object} request
|
||||
* @param {object} response
|
||||
*
|
||||
*/
|
||||
fastify.get('/logout', async function(request, response)
|
||||
{
|
||||
request.destroySession(() => {
|
||||
response.redirect('/')
|
||||
})
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
import fastifyStatic from '@fastify/static'
|
||||
import path from 'path'
|
||||
|
||||
/**
|
||||
* handle static
|
||||
*
|
||||
* @author Björn Hase, Tentakelfabrik
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://github.com/tentakelfabrik/fastify-lowdb-riotjs-lessons-learned
|
||||
*
|
||||
*/
|
||||
|
||||
export default async function(fastify, opts)
|
||||
{
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
fastify.register(fastifyStatic, {
|
||||
root: path.join(path.resolve(), '/../../public'),
|
||||
prefix: '/',
|
||||
preCompressed: true
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
import server from './_bootstrap.js'
|
||||
|
||||
// let it rain
|
||||
const start = async () => {
|
||||
try {
|
||||
await server.listen({
|
||||
port: process.env.APP_PORT
|
||||
})
|
||||
console.log('Server is running on port ' + process.env.APP_PORT)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
process.exit(1)
|
||||
}
|
||||
}
|
||||
|
||||
start()
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,19 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "server",
|
||||
"version": "0.1.0",
|
||||
"scripts": {
|
||||
"start": "node index.js"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@fastify/static": "^6.4.0",
|
||||
"@fastify/view": "^7.0.0",
|
||||
"dotenv": "^16.0.1",
|
||||
"fastify": "^4.0.1",
|
||||
"fastify-formbody": "^5.3.0",
|
||||
"liquidjs": "^9.37.0",
|
||||
"pouchdb": "^7.3.0",
|
||||
"pouchdb-find": "^7.3.0"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
import { readdir } from 'fs/promises'
|
||||
|
||||
/**
|
||||
* getting files
|
||||
*
|
||||
* @author Björn Hase
|
||||
* @license hhttps://www.gnu.org/licenses/gpl-3.0.en.html GPL-3
|
||||
* @link https://gitea.node001.net/HerrHase/tellme-bot.git
|
||||
*
|
||||
*/
|
||||
class File {
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {string} path
|
||||
*
|
||||
*/
|
||||
constructor(path) {
|
||||
this.path = path
|
||||
}
|
||||
|
||||
/**
|
||||
* getting alle files from
|
||||
*
|
||||
* @param {string} path
|
||||
* @return {object}
|
||||
*
|
||||
*/
|
||||
async get() {
|
||||
|
||||
const result = {
|
||||
files: [],
|
||||
errors: false
|
||||
}
|
||||
|
||||
try {
|
||||
const files = await readdir(this.path, {
|
||||
withFileTypes: true
|
||||
})
|
||||
|
||||
// run through all files, add options
|
||||
for (const file of files) {
|
||||
result['files'].push({
|
||||
name: file.name,
|
||||
isDirectory: file.isDirectory()
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
result['errors'] = error
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default File
|
||||
@ -0,0 +1,70 @@
|
||||
import PouchdbHandler from './../db/pouchdbHandler.js'
|
||||
|
||||
/**
|
||||
* getting files
|
||||
*
|
||||
* @author Björn Hase
|
||||
* @license hhttps://www.gnu.org/licenses/gpl-3.0.en.html GPL-3
|
||||
* @link https://gitea.node001.net/HerrHase/tellme-bot.git
|
||||
*
|
||||
*/
|
||||
class HubStore extends PouchdbHandler {
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {object} data
|
||||
* @return {object}
|
||||
*
|
||||
*/
|
||||
create(data)
|
||||
{
|
||||
data['type'] = 'hub'
|
||||
|
||||
return this.db.post(data)
|
||||
.then((response) => {
|
||||
return response
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
findOneById(id)
|
||||
{
|
||||
const query = {
|
||||
'selector': {
|
||||
'type': 'hub',
|
||||
'_id' : id
|
||||
}
|
||||
}
|
||||
|
||||
return this.db.find(query).then((documents) => {
|
||||
if (documents.docs.length === 0) {
|
||||
return null
|
||||
} else {
|
||||
return documents.docs[0]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
find()
|
||||
{
|
||||
const query = {
|
||||
'selector': {
|
||||
'type': 'hub'
|
||||
}
|
||||
}
|
||||
|
||||
return this.db.find(query).then((documents) => {
|
||||
return documents.docs
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default HubStore
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,93 @@
|
||||
Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
@ -0,0 +1,233 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, noarchive">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<title>Transfonter demo</title>
|
||||
<link href="stylesheet.css" rel="stylesheet">
|
||||
<style>
|
||||
/*
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
/* demo styles */
|
||||
body {
|
||||
background: #f0f0f0;
|
||||
color: #000;
|
||||
}
|
||||
.page {
|
||||
background: #fff;
|
||||
width: 920px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 20px 0 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.font-container {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
margin-bottom: 40px;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
h1 {
|
||||
position: relative;
|
||||
background: #444;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
margin: 0 -20px 12px -20px;
|
||||
}
|
||||
.letters {
|
||||
font-size: 25px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.s10:before {
|
||||
content: '10px';
|
||||
}
|
||||
.s11:before {
|
||||
content: '11px';
|
||||
}
|
||||
.s12:before {
|
||||
content: '12px';
|
||||
}
|
||||
.s14:before {
|
||||
content: '14px';
|
||||
}
|
||||
.s18:before {
|
||||
content: '18px';
|
||||
}
|
||||
.s24:before {
|
||||
content: '24px';
|
||||
}
|
||||
.s30:before {
|
||||
content: '30px';
|
||||
}
|
||||
.s36:before {
|
||||
content: '36px';
|
||||
}
|
||||
.s48:before {
|
||||
content: '48px';
|
||||
}
|
||||
.s60:before {
|
||||
content: '60px';
|
||||
}
|
||||
.s72:before {
|
||||
content: '72px';
|
||||
}
|
||||
.s10:before, .s11:before, .s12:before, .s14:before,
|
||||
.s18:before, .s24:before, .s30:before, .s36:before,
|
||||
.s48:before, .s60:before, .s72:before {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
color: #999;
|
||||
padding-right: 6px;
|
||||
}
|
||||
pre {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 9px;
|
||||
margin: 0 0 10px;
|
||||
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.428571429;
|
||||
color: #333;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
overflow-x: auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
pre:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
content: 'Usage';
|
||||
line-height: 1;
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
color: #767676;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
border-radius: 0 4px 0 4px;
|
||||
z-index: 10;
|
||||
}
|
||||
/* responsive */
|
||||
@media (max-width: 959px) {
|
||||
.page {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="demo">
|
||||
<h1 style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">IBM Plex Mono</h1>
|
||||
<pre>.your-style {
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">
|
||||
<p class="letters">
|
||||
abcdefghijklmnopqrstuvwxyz<br>
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||
</p>
|
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo">
|
||||
<h1 style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">IBM Plex Mono Bold</h1>
|
||||
<pre>.your-style {
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">
|
||||
<p class="letters">
|
||||
abcdefghijklmnopqrstuvwxyz<br>
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||
</p>
|
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,24 @@
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Mono';
|
||||
src: url('IBMPlexMono.eot');
|
||||
src: url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),
|
||||
url('IBMPlexMono.woff2') format('woff2'),
|
||||
url('IBMPlexMono.woff') format('woff'),
|
||||
url('IBMPlexMono.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Mono';
|
||||
src: url('IBMPlexMono-Bold.eot');
|
||||
src: url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('IBMPlexMono-Bold.woff2') format('woff2'),
|
||||
url('IBMPlexMono-Bold.woff') format('woff'),
|
||||
url('IBMPlexMono-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,13 @@
|
||||
(self["webpackChunkfrontend"] = self["webpackChunkfrontend"] || []).push([["spritemap"],{
|
||||
|
||||
/***/ "?c20d":
|
||||
/*!******************************!*\
|
||||
!*** spritemap-dummy-module ***!
|
||||
\******************************/
|
||||
/***/ (() => {
|
||||
|
||||
|
||||
|
||||
/***/ })
|
||||
|
||||
}]);
|
||||
|
After Width: | Height: | Size: 66 KiB |
Loading…
Reference in new issue