...
 
Commits (7)
const licenseCcBy4 = {
'name': 'Creative Commons Attribution 4.0 International',
'spdx_identifier': 'CC-BY-4.0',
'identifier': 'CC-BY-4.0',
'url': 'https://spdx.org/licenses/CC-BY-4.0.html'
}
const licenseCcByNcSa4 = {
'name': 'Creative Commons Attribution Non Commercial Share Alike 4.0 International',
'spdx_identifier': 'CC-BY-NC-SA-4.0',
'identifier': 'CC-BY-NC-SA-4.0',
'url': 'https://spdx.org/licenses/CC-BY-NC-SA-4.0.html'
}
const licenseCcBySa4 = {
'name': 'Creative Commons Attribution Share Alike 4.0 International',
'spdx_identifier': 'CC-BY-SA-4.0',
'identifier': 'CC-BY-SA-4.0',
'url': 'https://spdx.org/licenses/CC-BY-SA-4.0.html'
}
const licenseCcZero1 = {
'name': 'Creative Commons Zero v1.0 Universal',
'spdx_identifier': 'CC0-1.0',
'identifier': 'CC0-1.0',
'url': 'https://spdx.org/licenses/CC0-1.0.html'
}
......
......@@ -49,7 +49,7 @@ export default [
'cover_image': {
'alt': 'Illustriertes Bild im 50er Stil auf dem eine Frau eine Schallplatte mit der Zange hält und vor einem Herd steht, dessen Heizflächen Plattenteller sind.',
'sources': [
{ 'size': 'sm', 'width': 320, 'height': 160, 'src': require('./images/cup_of_soul.jpg.jpg') },
{ 'size': 'sm', 'width': 320, 'height': 160, 'src': require('./images/cup_of_soul.jpg') },
{ 'size': 'md', 'width': 800, 'height': 400, 'src': require('./images/cup_of_soul.jpg') },
{ 'size': 'lg', 'width': 1200, 'height': 600, 'src': require('./images/cup_of_soul.jpg') }
]
......
......@@ -1911,6 +1911,15 @@
"integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
"dev": true
},
"axios": {
"version": "0.18.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
"integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
"requires": {
"follow-redirects": "^1.3.0",
"is-buffer": "^1.1.5"
}
},
"babel-code-frame": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
......@@ -5191,7 +5200,6 @@
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz",
"integrity": "sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==",
"dev": true,
"requires": {
"debug": "^3.2.6"
},
......@@ -5200,7 +5208,6 @@
"version": "3.2.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
......@@ -6635,8 +6642,7 @@
"is-buffer": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
"dev": true
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
},
"is-callable": {
"version": "1.1.4",
......@@ -7215,8 +7221,7 @@
"lodash.clonedeep": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
"integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
"dev": true
"integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
},
"lodash.defaultsdeep": {
"version": "4.6.0",
......@@ -7626,8 +7631,7 @@
"ms": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
"dev": true
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
},
"multicast-dns": {
"version": "6.2.3",
......@@ -11361,6 +11365,14 @@
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz",
"integrity": "sha512-mdHeHT/7u4BncpUZMlxNaIdcN/HIt1GsGG5LKByArvYG/v6DvHcOxvDCts+7SRdCoIRGllK8IMZvQtQXLppDYg=="
},
"vuex-rest-api": {
"version": "2.10.0",
"resolved": "https://registry.npmjs.org/vuex-rest-api/-/vuex-rest-api-2.10.0.tgz",
"integrity": "sha512-xzPXj7ytH+QF/rS6gTUq6tzDTY6pLF6JDajjJcNSQE0Uu1mKNNKsXaSooLBBcKHBLeswiPJbG39FEdY0HNz7dQ==",
"requires": {
"lodash.clonedeep": "4.5.x"
}
},
"watchpack": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
......
......@@ -10,11 +10,13 @@
"docker": "docker build . -t thekno && docker run -d -p 5000:5000 thekno"
},
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.6.9",
"vue-i18n": "^8.0.0",
"vue-router": "^3.0.1",
"vuetify": "^1.5.5",
"vuex": "^3.0.1"
"vuex": "^3.0.1",
"vuex-rest-api": "^2.10.0"
},
"devDependencies": {
"@kazupon/vue-i18n-loader": "^0.3.0",
......
<template>
<v-app dark>
<v-toolbar app>
<v-toolbar-title class="headline text-uppercase">
<span>Vuetify</span>
<span class="font-weight-light">MATERIAL DESIGN</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn
flat
href="https://github.com/vuetifyjs/vuetify/releases/latest"
target="_blank"
>
<span class="mr-2">Latest Release</span>
</v-btn>
</v-toolbar>
<toolbar/>
<v-content>
<HelloWorld/>
<router-view :key="$route.fullPath"></router-view>
</v-content>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld'
import Toolbar from './components/Toolbar'
export default {
name: 'App',
components: {
HelloWorld
},
data () {
return {
//
}
export default {
name: 'App',
components: { Toolbar }
}
}
</script>
<template>
<p>{{ $t('hello') }}</p>
</template>
<script>
export default {
name: 'HelloI18n'
}
</script>
<i18n>
{
"en": {
"hello": "Hello i18n in SFC!"
}
}
</i18n>
<template>
<v-container>
<v-layout
text-xs-center
wrap
>
<v-flex xs12>
<v-img
:src="require('../assets/logo.svg')"
class="my-3"
contain
height="200"
></v-img>
</v-flex>
<v-flex mb-4>
<h1 class="display-2 font-weight-bold mb-3">
thekno
</h1>
<p class="subheading font-weight-regular">
For help and collaboration with other Vuetify developers,
<br>please join our online
<a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a>
</p>
</v-flex>
<v-flex
mb-5
xs12
>
<h2 class="headline font-weight-bold mb-3">What's next?</h2>
<v-layout justify-center>
<a
v-for="(next, i) in whatsNext"
:key="i"
:href="next.href"
class="subheading mx-3"
target="_blank"
>
{{ next.text }}
</a>
</v-layout>
</v-flex>
<v-flex
xs12
mb-5
>
<h2 class="headline font-weight-bold mb-3">Important Links</h2>
<v-layout justify-center>
<a
v-for="(link, i) in importantLinks"
:key="i"
:href="link.href"
class="subheading mx-3"
target="_blank"
>
{{ link.text }}
</a>
</v-layout>
</v-flex>
<v-flex
xs12
mb-5
>
<h2 class="headline font-weight-bold mb-3">Ecosystem</h2>
<v-layout justify-center>
<a
v-for="(eco, i) in ecosystem"
:key="i"
:href="eco.href"
class="subheading mx-3"
target="_blank"
>
{{ eco.text }}
</a>
</v-layout>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
data: () => ({
ecosystem: [
{
text: 'vuetify-loader',
href: 'https://github.com/vuetifyjs/vuetify-loader'
},
{
text: 'github',
href: 'https://github.com/vuetifyjs/vuetify'
},
{
text: 'awesome-vuetify',
href: 'https://github.com/vuetifyjs/awesome-vuetify'
}
],
importantLinks: [
{
text: 'Documentation',
href: 'https://vuetifyjs.com'
},
{
text: 'Chat',
href: 'https://community.vuetifyjs.com'
},
{
text: 'Made with Vuetify',
href: 'https://madewithvuetifyjs.com'
},
{
text: 'Twitter',
href: 'https://twitter.com/vuetifyjs'
},
{
text: 'Articles',
href: 'https://medium.com/vuetify'
}
],
whatsNext: [
{
text: 'Explore components',
href: 'https://vuetifyjs.com/components/api-explorer'
},
{
text: 'Select a layout',
href: 'https://vuetifyjs.com/layout/pre-defined'
},
{
text: 'Frequently Asked Questions',
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions'
}
]
})
}
</script>
<style>
</style>
<template>
<v-card height="100%">
<v-img aspect-ratio="1.75"
:alt="series.cover_image.alt"
:src="series.cover_image.sources[0].src"/>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">{{ series.name }}</h3>
<div class="series-preview-description"
v-if="series.description">{{ series.description }}</div>
</div>
</v-card-title>
<v-card-actions align-end>
<v-btn flat>More info</v-btn>
</v-card-actions>
</v-card>
</template>
<script>
export default {
props: {
series: Object
}
}
</script>
<style scoped>
.series-preview-description {
--num-lines: 3;
--line-height: 1.3em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: var(--line-height);
height: calc(var(--num-lines) * var(--line-height));
-webkit-line-clamp: var(--num-lines);
-webkit-box-orient: vertical;
}
</style>
<template>
<v-toolbar app>
<v-toolbar-title class="headline text-uppercase orange--text">
<span>Lohro</span>
<span class="font-weight-light">thek</span>
</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
</template>
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
......@@ -11,15 +10,7 @@ export default new Router({
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
}
]
})
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})
import Vapi from 'vuex-rest-api'
export default ({ axios }) => {
const storeConfig = new Vapi({
baseURL: '/api/v1/broadcasts',
axios,
state: {
broadcasts: []
}
})
.get({
action: 'getBroadcasts',
property: 'broadcasts',
onSuccess (state, request) {
const { results } = request.data
state.broadcasts = results
}
})
.getStore()
return storeConfig
}
import createBroadcastsStore from './broadcasts'
import createRecordingsStore from './recordings'
import createSeriesStore from './series'
export default (options) => {
return {
namespaced: true,
modules: {
broadcasts: createBroadcastsStore(options),
recordings: createRecordingsStore(options),
series: createSeriesStore(options)
}
}
}
import Vapi from 'vuex-rest-api'
export default ({ axios }) => {
const storeConfig = new Vapi({
baseURL: '/api/v1/recordings',
axios,
state: {
recordings: []
}
})
.get({
action: 'getRecordings',
property: 'recordings',
onSuccess (state, request) {
const { results } = request.data
state.recordings = results
}
})
.getStore()
return storeConfig
}
import Vapi from 'vuex-rest-api'
export default ({ axios }) => {
const storeConfig = new Vapi({
baseURL: '/api/v1/series',
axios,
state: {
series: []
}
})
.get({
action: 'getSeries',
property: 'series',
onSuccess (state, request) {
const { results } = request.data
state.series = results
}
})
.getStore()
return storeConfig
}
import axios from 'axios'
const fixtures = {}
const localAxios = axios.create({})
function createResultData (dataset, url) {
return {
results: dataset,
count: dataset.length,
next: null,
previous: null
}
}
if (process.env.NODE_ENV !== 'production') {
fixtures.broadcasts = require('../../fixtures/broadcasts').default
fixtures.recordings = require('../../fixtures/recordings').default
fixtures.series = require('../../fixtures/series').default
localAxios.interceptors.response.use(null, error => {
if (error.config.url.startsWith('/api/v1/broadcasts')) {
return Promise.resolve({
data: createResultData(fixtures.broadcasts)
})
}
if (error.config.url.startsWith('/api/v1/recordings')) {
return Promise.resolve({
data: createResultData(fixtures.recordings)
})
}
if (error.config.url.startsWith('/api/v1/series')) {
return Promise.resolve({
data: createResultData(fixtures.series)
})
}
})
}
export default localAxios
import Vue from 'vue'
import Vuex from 'vuex'
import axios from './axios'
import createApiStore from './api'
Vue.use(Vuex)
const store = new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
modules: {
api: createApiStore({ axios })
}
})
store.dispatch('api/getBroadcasts')
store.dispatch('api/getRecordings')
store.dispatch('api/getSeries')
export default store
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<template>
<HelloWorld />
<div>
<v-container grid-list-xl>
<v-layout row wrap>
<v-flex xs12 sm6 lg4 xl3 grow
v-for="s in series" :key="s.id">
<SeriesPreview :series="s"/>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
import HelloWorld from '../components/HelloWorld'
import { mapState } from 'vuex'
import SeriesPreview from '../components/SeriesPreview'
export default {
components: {
HelloWorld
export default {
name: 'Home',
components: {SeriesPreview},
computed: {
...mapState('api', {
series: state => state.series.series
})
}
}
}
</script>
const proxyTarget = process.env.PROXY_TARGET || 'http://localhost:8000/'
module.exports = {
integrity: true,
outputDir: 'build/dist',
devServer: {
proxy: {
'/api/': {
target: proxyTarget
}
}
},
pluginOptions: {
i18n: {
locale: 'en',
......