Commit 1acc9b37 authored by Manuel Tancoigne's avatar Manuel Tancoigne

Translate and improve views

parent 44e4f31c
......@@ -2,26 +2,26 @@
<i-layout id="app">
<i-navbar variant="dark" class="_margin-bottom-1">
<i-navbar-brand to="/">
<logo size="navbar" />
<logo variant="navbar" />
Typing Monkey
</i-navbar-brand>
<i-navbar-items>
<i-nav>
<i-nav-item :to="{ name: 'about' }">
About
{{ $t('app.about') }}
</i-nav-item>
<i-nav-item :to="{ name: 'help' }">
Help on templates
{{ $t('app.help_on_templates') }}
</i-nav-item>
</i-nav>
<i-nav>
<locale-selector/>
<locale-selector />
</i-nav>
</i-navbar-items>
</i-navbar>
<router-view />
<i-layout-footer class="_margin-top-1 _text-right" fixed>
<a href="https://gitlab.com/experimentslabs/typing-monkey" target="_blank">Propose your templates on Gitlab!</a>
<a href="https://gitlab.com/experimentslabs/typing-monkey" target="_blank">{{ $t('app.propose') }}</a>
</i-layout-footer>
</i-layout>
</template>
......@@ -33,3 +33,9 @@ export default {
components: { LocaleSelector, Logo },
}
</script>
<style lang="scss">
html {
background-color: #F8F9FA;
}
</style>
......@@ -4,7 +4,7 @@
height="531.429"
viewBox="0 0 140.607 140.607"
class="logo"
:class="`logo--${size}`">
:class="`logo--${variant}`">
<g transform="translate(-11.717 10.673)">
<circle class="logo_background"
cx="82.021"
......@@ -22,7 +22,7 @@
export default {
name: 'Logo',
props: {
size: { required: false, type: String, default: '' },
variant: { required: false, type: String, default: '' },
},
}
</script>
......@@ -44,5 +44,12 @@ export default {
height: $logo-size-navbar;
width: $logo-size-navbar;
}
&--home {
.logo_computer,
.logo_monkey {
fill: #333;
}
}
}
</style>
{
"message": "hello i18n !!"
}
\ No newline at end of file
"404": {
"title": "404 - Page not found"
},
"about": {
"contribute_content": "You can contribute to the code or the templates by forking the above repository and create merge requests.",
"contribute_header": "Contribute!",
"licenses_content": "This service uses opensource software with their own licenses:",
"licenses_content_other": "And others...",
"licenses_header": "Licenses",
"logo_derivative": "The logo is derived from {0}, which is in public domain.",
"privacy_content": "We don't use cookies. We don't store anything you type in the document creator. We don't store anything on your computer.",
"privacy_header": "Privacy",
"source_availability": "Code is available under the MIT license on {0}. Templates are available on the same repository too, under their respective license.",
"title": "About",
"tos_content": "TL;DR, you can use the service to generate your annoying documents.",
"tos_header": "Terms of service"
},
"app": {
"about": "About",
"help_on_templates": "Help on templates",
"propose": "Propose your templates on Gitlab!"
},
"home": {
"site_description": "A collection of templates for annoying documents.",
"title": "Available templates"
},
"locales": {
"en": "English",
"fr": "Français"
},
"renderer": {
"buttons": {
"render": "Render",
"edit_on_gitlab": "Edit on Gitlab",
"source": "Source"
},
"description": "Description:",
"name": "Name:",
"sections": "Sections",
"variables": "Variables"
}
}
{
"404": {
"title": "404 - Page non trouvée"
},
"about": {
"contribute_content": "Vous pouvez contribuer au code ou aux modèles en forkant le dépot ci-dessus et en créant des merge requests.",
"contribute_header": "Contribuez !",
"licenses_content": "Ce service utilise des logiciels opensources ayant leur propre licence :",
"licenses_content_other": "Et bien d'autres...",
"licenses_header": "Licences",
"logo_derivative": "Le logo est dérivé de {0}, qui appartient au domaine public.",
"privacy_content": "Nous n'utilisons pas de cookies. Nous ne sauvegardons pas ce que vous tapez. Nous ne stockons rien sur votre ordinateur.",
"privacy_header": "Vie privée",
"source_availability": "Le code est disponible sous license MIT sur {0}. Les modèles sont disponibles dans le même dépot, sous leur license respective",
"title": "À propos",
"tos_content": "Pour faire court, vous pouvez utiliser ce service pour générer vos documents ennuyeux.",
"tos_header": "Conditions d'utilisation"
},
"app": {
"about": "À propos",
"help_on_templates": "Aide pour les modèles",
"propose": "Proposez vos modèles sur Gitlab!"
},
"home": {
"site_description": "Une collection de modèles pour documents ennuyeux.",
"title": "Modèles disponibles"
},
"locales": {
"en": "English",
"fr": "Français"
},
"renderer": {
"buttons": {
"render": "Rendu",
"edit_on_gitlab": "Éditer sur Gitlab",
"source": "Source"
},
"description": "Description:",
"name": "Nom:",
"sections": "Sections",
"variables": "Variables"
}
}
<template>
<div>
<h1>404 - File not found</h1>
<h1>{{ $t('404.title') }}</h1>
</div>
</template>
<template>
<div>
<h1>About</h1>
<h2>Terms of service</h2>
<h2>Licenses</h2>
https://en.wikipedia.org/wiki/Infinite_monkey_theorem#/media/File:Chimpanzee_seated_at_typewriter.jpg
</div>
<i-container>
<h1>{{ $t('about.title') }}</h1>
<i18n path="about.source_availability" tag="p">
<a href="https://gitlab.com/experimentslabs/typing-monkey"
target="_blank"
rel="noopener noreferrer">Gitlab</a>
</i18n>
<h2>{{ $t('about.contribute_header') }}</h2>
<p>{{ $t('about.contribute_content') }}</p>
<h2>{{ $t('about.tos_header') }}</h2>
<p>{{ $t('about.tos_content') }}</p>
<h2>{{ $t('about.privacy_header') }}</h2>
<p>{{ $t('about.privacy_content') }}</p>
<h2>{{ $t('about.licenses_header') }}</h2>
<p>{{ $t('about.licenses_content') }}</p>
<ul>
<li>
<a href="https://vuejs.org"
target="_blank"
rel="noopener noreferrer">VueJS</a>
</li>
<li>
<a href="https://kazupon.github.io/vue-i18n"
target="_blank"
rel="noopener noreferrer">Vue-i18n</a>
</li>
<li>
<a href="https://inkline.io"
target="_blank"
rel="noopener noreferrer">Inkline</a>
</li>
<li>
<a href="https://gitlab.com/experimentslabs/typing-monkey/blob/master/package.json"
target="_blank"
rel="noopener noreferrer">{{ $t('about.licenses_content_other') }}</a>
</li>
</ul>
<i18n path="about.logo_derivative" tag="p">
<a href="https://en.wikipedia.org/wiki/Infinite_monkey_theorem#/media/File:Chimpanzee_seated_at_typewriter.jpg"
target="_blank"
rel="noopener noreferrer">Chimpanzee_seated_at_typewriter.jpg</a>
</i18n>
</i-container>
</template>
<template>
<i-container>
<h1>Help on creating templates</h1>
<p>For now, we only support Markdown files as templates, which get rendered as HTML or Markdown.</p>
<section>
<h1>Help on creating templates</h1>
<h2>Blocks</h2>
<p>Blocks have this format:</p>
<pre>[[BLOCK &lt;BLOCK_NAME&gt;] &lt;Block description&gt;]
The block description will appear near the option to enable/disable the block
[[END &lt;BLOCK_NAME&gt;]]
</pre>
<p>Blocks can be one-liners, to prevent the line breaks.</p>
<pre>[[BLOCK INLINE_CONTENT] Block with inline content]works too.[[END INLINE_CONTENT]]</pre>
<p>Blocks can have children</p>
<pre>[[BLOCK WITH_CHILDREN] Block can have children]
And disabling a parent prevents its children from being shown
[[BLOCK IM_A_CHILD] Children block]
This is a children block
[[END IM_A_CHILD]]
[[END WITH_CHILDREN]]
</pre>
<p>
If a block is missing a end, it will be transformed into something like <code>[[ERROR: BLOCK_NAME has no
end]]</code>.
</p>
<p>As the content is rendered as markdown, be careful about the blocks indentation.</p>
<p>
You can use a block multiple times once it has been defined using this declaration:
<code>[[BLOCK_NAME]]</code>
Blocks can be seen as sections of your document. Any portion defined as <em>block</em> will be toggleable in
the side panel.
</p>
<p>They have this format:</p>
<pre v-html="codeBlock('NAME', 'Description', 'Content')"></pre>
<ul>
<li><code>NAME</code> must be capitalized letters and use underscores.</li>
<li>
<code>Description</code> can be anything but <code>]</code>. It will appear in the edition panel to
describe the block.
</li>
<li><code>Content</code> is basically the block content. It can include other blocks too.</li>
</ul>
<i-alert variant="info">
Even if indenting your template inside blocks is tempting, it is not a good idea as the
generated code is parsed as-is.
</i-alert>
<i-alert variant="warning">
If a block is missing a end, it will be transformed into something like <code>[[ERROR: BLOCK_NAME has no
end]]</code>.
</i-alert>
</section>
<section>
<h2>Variables</h2>
<p>Define variables with a string like <code>[&lt;TYPE&gt; &lt;NAME&gt; &lt;Description&gt;</code></p>
<p>
The type is used in the menu to determine the widget to show. In can be <code>STRING</code>,
<code>TEXT</code>
or
<code>NUMBER</code>.
</p>
<p>Only the name is mandatory.</p>
<p>Variables will be shown on their definition too.</p>
<p>Use variables with <code>[~&lt;VARIABLE&gt;]</code></p>
<p>
If you define a variable multiple times, the last definition will be used if the preceding ones have no
description.
</p>
<p>Variables are small portions of text that needs customization. You can define a variable and use it multiple
times in your document; they will appear in the edition panel</p>
<p>Example</p>
<pre>Hello [STRING NAME Your name],
<p>To define a variable, use this format:</p>
Welcome on [SITE_NAME The site name].
[~SITE_NAME] will help you generate the documents you don't like to write.</pre>
will be rendered as
<pre>Hello _______,
Welcome on _______.
_______ will help you generate the documents you don't like to write.</pre>
<pre v-html="codeVar('NAME', 'Description', 'TYPE')"></pre>
<ul>
<li>
<code>TYPE</code> is optional. It can be either <code>STRING</code>,
<code>TEXT</code> or <code>NUMBER</code>, and defaults to <code>STRING</code>.
The type defines the widget used in the side panel (text input, textarea or number input).
</li>
<li><code>NAME</code> must be capitalized letters and use underscores.</li>
<li>
<code>Description</code> can be anything but <code>]</code>. It will appear in the edition panel to
describe the variable. If you don't provide a description, the variable name will be used in edition panel.
</li>
</ul>
<i-alert variant="info">
If you define the same variable multiple times, the last definition with a description
will override the others.
</i-alert>
<i-alert variant="info">
If you don't like defining variable in the template flow, you can add an HTML comment at the beginning of
it with all the definitions:
<pre>&lt;!-- Variables used:
[TEXT FIRST_VAR The first var]
[OTHER_VAR An other var]
--&gt;
<span class="code-content">Template content that uses</span> [FIRST_VAR] <span class="code-content">and</span> [OTHER_VAR]</pre>
</i-alert>
<i-alert variant="info">
You can also use <code>[~MY_VAR]</code> format to display a variable. Be aware that it will not define it.
</i-alert>
</section>
<section>
<h2>Conditional rendering</h2>
<p>You may display things given certain blocks; it's possible with `IF/UNLESS` blocks.</p>
<pre>[[IF SOME_BLOCK]]This will be displayed if <code>SOME_BLOCK</code> is enabled[[ENDIF SOME_BLOCK]]</pre>
<pre>[[UNLESS SOME_BLOCK]]This will be displayed unless <code>SOME_BLOCK</code> is enabled[[ENDUNLESS SOME_BLOCK]]</pre>
<p>You can have conditional elements in conditions</p>
<pre>[[IF SOME_BLOCK]]
Some content
[[IF SOME_OTHER_BLOCK]]Some other content[[ENDIF SOME_OTHER_BLOCK]]
[[ENDIF SOME_BLOCK]]</pre>
<p>
Note that you can't test the same condition twice: <code>[[IF BLOCK]] [[IF BLOCK]]Some content[[ENDIF
BLOCK]][ENDIF
BLOCK]]</code> will produce an error
</p>
<p>You can display things given the state of blocks.</p>
<pre
v-html="codeCondition('IF', 'SOME_BLOCK', 'This will be displayed if <code>SOME_BLOCK</code> is enabled</span>')">
</pre>
<pre
v-html="codeCondition('UNLESS', 'SOME_BLOCK', 'This will be displayed unless <code>SOME_BLOCK</code> is enabled</span>')">
</pre>
<p>You can nest conditional blocks.</p>
<pre
v-html="codeCondition('IF', 'SOME_BLOCK', `Some content${codeCondition('IF', 'OTHER_BLOCK', 'Some other content')}`)">
</pre>
</section>
</i-container>
</template>
......@@ -81,5 +97,94 @@ Some content
<script>
export default {
name: 'HelpView',
methods: {
// Methods used to generate colored code for examples.
codeElement (type, content) { return `<span class="code-${type}">${content}</span>` },
codeContent (content) { return this.codeElement('content', content) },
codeBlockName (name) { return this.codeElement('block-name', name) },
codeBlockDesc (description) { return this.codeElement('block-description', description) },
codeBlock (name, description, content) {
const nameTag = this.codeBlockName(name)
const descriptionTag = this.codeBlockDesc(description)
const contentTag = this.codeContent(content)
return this.codeElement('block', `[[BLOCK ${nameTag}] ${descriptionTag}]${contentTag}[[BLOCK ${nameTag}]]`)
},
codeVarName (name) { return this.codeElement('var-name', name) },
codeVarDescription (description) { return description.length > 0 ? this.codeElement('var-description', ` ${description}`) : '' },
codeVarType (type) { return type.length > 0 ? this.codeElement('var-type', `${type} `) : '' },
codeVar (name, description = '', type = '') {
const nameTag = this.codeVarName(name)
const descriptionTag = this.codeVarDescription(description)
const typeTag = this.codeVarType(type)
return this.codeElement('var', `[${typeTag}${nameTag}${descriptionTag}]`)
},
codeConditionType (name) { return this.codeElement('condition-type', name) },
codeConditionBlock (type) { return type.length > 0 ? this.codeElement('condition-block', `${type} `) : '' },
codeCondition (type = '', blockName, content) {
const typeTag = this.codeConditionType(type)
const endTypeTag = this.codeConditionType(`END${type}`)
const blockNameTag = this.codeConditionBlock(blockName)
const contentTag = this.codeContent(content)
return this.codeElement('condition', `[[${typeTag} ${blockNameTag}]]${contentTag}[[${endTypeTag} ${blockNameTag}]]`)
},
},
}
</script>
<style lang="scss">
.alert {
margin-bottom: 1rem;
}
.code {
&-content {
color: lighten(#333, 40%);
}
&-block {
$color: #796036;
color: $color;
&-name {
color: lighten($color, 20%);
}
&-description {
color: lighten($color, 40%);
}
}
&-var {
$color: #594f79;
color: $color;
&-name {
color: lighten($color, 20%);
}
&-description {
color: lighten($color, 40%);
}
&type {
color: $color
}
}
&-condition {
$color: #407935;
color: $color;
&-type {
color: lighten($color, 20%);
}
&-block {
color: lighten($color, 40%);
}
}
}
</style>
<template>
<i-container>
<ul>
<li v-for="(template, key) in templates" :key="key">
<strong>
<router-link :to="{ name: 'renderer', params: { content: key} }">{{ template.name }}</router-link>
</strong>
<p>{{ template.description }}</p>
</li>
</ul>
<h1>{{ $t('home.site_description') }}</h1>
<i-row>
<i-column sm="6" class="_text-center">
<logo variant="home" />
</i-column>
<i-column sm="6">
<h2>{{ $t('home.title') }}</h2>
<ul>
<li v-for="(template, key) in templates" :key="key">
<strong>
<router-link :to="{ name: 'renderer', params: { content: key} }">{{ template.name }}</router-link>
</strong>
<p>{{ template.description }}</p>
</li>
</ul>
</i-column>
</i-row>
</i-container>
</template>
<script>
import templates from '../templates'
import Logo from '../components/Logo'
export default {
name: 'Home',
components: { Logo },
data () {
return {
templates,
......
<template>
<i-layout vertical>
<i-layout-aside>
<i-layout-aside class="aside">
<i-container v-if="ready">
<section class="small _margin-bottom-1">
<strong>{{ $t('renderer.name') }}</strong> {{ templateMeta.name }}<br>
<strong>{{ $t('renderer.description') }}</strong> {{ templateMeta.description }}
</section>
<section>
<h2 class="h3 _margin-y-0">
Description
</h2>
<p class="small">
<strong>Name:</strong> {{ templateMeta.name }}<br>
<strong>Description:</strong> {{ templateMeta.description }}
</p>
<i-alert dismissible size="sm">
Fill the variables, check the desired <br>
sections and copy the final content !
</i-alert>
</section>
<i-form size="sm">
<section>
<h2 class="h3 _margin-y-0">
Variables
{{ $t('renderer.variables') }}
</h2>
<variable v-for="variable in variables"
:key="variable.name"
......@@ -23,7 +24,7 @@
</section>
<section>
<h2 class="h3 _margin-y-0">
Sections
{{ $t('renderer.sections') }}
</h2>
<block v-for="block in blocks" :key="block.name" :block="block" @update="updateBlock" />
</section>
......@@ -38,7 +39,7 @@
<i-button :active="displayTab === 'render'"
:variant="displayTab === 'render' ? 'primary' : ''"
@click.prevent="displayTab = 'render'">
Render
{{ $t('renderer.buttons.render') }}
</i-button>
<i-button :active="displayTab === 'html'"
:variant="displayTab === 'html' ? 'primary' : ''"
......@@ -53,13 +54,13 @@
<i-button :active="displayTab === 'source'"
:variant="displayTab === 'source' ? 'primary' : ''"
@click.prevent="displayTab = 'source'">
Source
{{ $t('renderer.buttons.source') }}
</i-button>
</i-button-group>
</i-column>
<i-column class="_text-right">
<i-button v-show="displayTab === 'source'" variant="primary">
Edit on Gitlab
{{ $t('renderer.buttons.edit_on_gitlab') }}
</i-button>
</i-column>
</i-row>
......@@ -358,4 +359,13 @@ export default {
max-height: calc(100vh - 13rem);
overflow-y: auto;
}
.aside {
width: 20rem !important;
background-color: whitesmoke !important;
margin-top: -1rem;
margin-bottom: -1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
</style>
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