This repository has been archived on 2024-07-22. You can view files and clone it, but cannot push or open issues or pull requests.
Zaimki/routes/template.vue

158 lines
5.8 KiB
Vue
Raw Normal View History

2020-07-22 13:19:23 -07:00
<template>
<NotFound v-if="!selectedTemplate"/>
2020-10-23 11:24:43 -07:00
<div v-else class="container">
2020-09-11 03:17:29 -07:00
<h2>
2020-07-22 13:19:23 -07:00
<Icon v="tag"/>
<T>template.intro</T>:
2020-09-11 03:17:29 -07:00
</h2>
2020-07-22 13:19:23 -07:00
<section>
<div class="alert alert-primary">
<h2 class="text-center mb-0">
<strong v-if="nameOptions.length === 1">
{{ selectedTemplate.name(glue) }}
</strong>
<template v-else>
<template v-for="(nameOption, i) in nameOptions">
<nuxt-link :to="'/' + addSlash(nameOption)">
<strong>
{{ nameOption }}
</strong>
</nuxt-link>
<span v-if="i < nameOptions.length - 1">{{ glue }}</span>
</template>
</template>
2020-07-22 13:19:23 -07:00
</h2>
<p class="h6 small text-center mb-0 mt-2" v-if="selectedTemplate.description">
<em>
2020-07-26 04:14:25 -07:00
({{Array.isArray(selectedTemplate.description)
? ($t('template.alt.header') + ': ' + selectedTemplate.description.join(glue))
2020-07-26 04:14:25 -07:00
: selectedTemplate.description
}})
2020-07-22 13:19:23 -07:00
</em>
</p>
</div>
</section>
<section>
<h2 class="h4">
<Icon v="file-signature"/>
<T>template.examples</T>:
2020-07-22 13:19:23 -07:00
</h2>
<ul>
<li v-for="example in examples" class="my-1">
2020-09-13 13:15:44 -07:00
<Example :example="example" :template="selectedTemplate" :counter="counter"/>
</li>
2020-07-22 13:19:23 -07:00
</ul>
</section>
2020-09-28 09:29:13 -07:00
<GrammarTables :selectedTemplate="selectedTemplate" :counter="counter"/>
2020-08-03 10:47:53 -07:00
2020-07-24 11:21:30 -07:00
<section v-if="selectedTemplate.history">
2020-08-25 03:03:48 -07:00
<div class="alert alert-info" v-for="part in selectedTemplate.history.split('@')">
2020-07-24 11:21:30 -07:00
<Icon v="info-circle"/>
<LinkedText :text="part"/>
2020-07-24 11:21:30 -07:00
</div>
</section>
<section v-if="templateGroup && templateGroup.group.description">
<ul class="list-group mt-4">
<li class="list-group-item">
<p class="h5">
{{ templateGroup.group.name }}
</p>
<div class="small my-1">
<Icon v="info-circle"/>
<em v-html="templateGroup.group.description"></em>
</div>
<ul class="list-unstyled">
<li v-for="template in templateGroup.groupTemplates" :key="template.canonicalName">
<nuxt-link v-if="typeof template === 'string'" :to="'/' + template">
<strong>{{template.replace(/&/g, ' ' + $t('template.or') + ' ')}}</strong>
</nuxt-link>
<nuxt-link v-else :to="addSlash('/' + template.canonicalName)">
<strong>{{template.name(glue)}}</strong>
<small>{{template.description}}</small>
</nuxt-link>
<NormativeBadge v-if="template.normative"/>
</li>
</ul>
</li>
<nuxt-link to="/" class="list-group-item list-group-item-action text-center">
<Icon v="ellipsis-h-alt"/>
</nuxt-link>
</ul>
</section>
2020-07-24 05:14:37 -07:00
<section>
<Share :title="`${$t('template.intro')}: ${selectedTemplate.name(glue)}`"/>
2020-07-24 05:14:37 -07:00
</section>
<section v-if="Object.keys(sources).length">
<Literature :sources="sources"/>
2020-07-22 13:19:23 -07:00
</section>
<Separator icon="info"/>
<section class="mb-0">
<h2 class="h4">
<Icon v="info-circle"/>
<T>home.whatisit</T>:
2020-07-22 13:19:23 -07:00
</h2>
<T>home.about</T>
2020-07-22 13:19:23 -07:00
<Homepage align="center"/>
</section>
</div>
</template>
<script>
import { examples, templates, getSources, templateLibrary } from "~/src/data";
2020-09-11 06:59:05 -07:00
import { buildTemplate } from "../src/buildTemplate";
2020-09-23 12:29:55 -07:00
import { head } from "../src/helpers";
2020-10-12 06:49:33 -07:00
import GrammarTables from "../data/templates/GrammarTables";
import LinkedText from "../components/LinkedText";
2020-07-22 13:19:23 -07:00
export default {
components: {LinkedText, GrammarTables },
2020-07-22 13:19:23 -07:00
data() {
2020-10-28 08:22:29 -07:00
const selectedTemplate = this.config.template.enabled
? buildTemplate(templates, this.$route.path.substr(1).replace(/\/$/, ''))
: null;
2020-07-22 13:19:23 -07:00
return {
examples,
templates,
glue: ' ' + this.$t('template.or') + ' ',
2020-07-22 13:19:23 -07:00
selectedTemplate,
2020-10-12 15:15:19 -07:00
nameOptions: selectedTemplate ? selectedTemplate.nameOptions() : [],
templateGroup: templateLibrary.find(selectedTemplate),
2020-07-26 04:14:25 -07:00
counter: 0,
}
},
mounted() {
if (process.client) {
setInterval(_ => this.counter++, 1000);
2020-07-22 13:19:23 -07:00
}
},
head() {
2020-09-23 12:29:55 -07:00
return this.selectedTemplate ? head({
title: `${this.$t('template.intro')}: ${this.selectedTemplate.name(this.glue)}`,
2020-10-31 13:33:59 -07:00
banner: `api/banner${this.$route.path.replace(/\/$/, '')}.png`,
2020-09-23 12:29:55 -07:00
}) : {};
2020-07-22 13:19:23 -07:00
},
methods: {
addSlash(link) {
return link + (link.substr(link.length - 1) === '*' ? '/' : '');
},
},
computed: {
sources() {
return getSources(this.selectedTemplate);
},
},
2020-07-22 13:19:23 -07:00
}
</script>