public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: dynamic title/description

Browse Source 
Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
Corentin Thomasset 2020-06-07 12:05:08 +02:00
parent d22988ba4e
commit 8a054561bc
10 changed files with 54 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@ -6242,6 +6242,11 @@
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true "dev": true
}, },
"headful": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/headful/-/headful-1.0.3.tgz",
"integrity": "sha512-vF9Vfddn1QWmziliht2mji6ayI78+hUuSC+Kt0GEqLw/51zWgi1KF7oLtIQf3nlkg8sQQOlznkkIaF4W9lIt9w=="
},
"hex-color-regex": { "hex-color-regex": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
@ -12164,6 +12169,14 @@
} }
} }
}, },
"vue-headful": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/vue-headful/-/vue-headful-2.1.0.tgz",
"integrity": "sha512-HXMdJfVDgD3eoh8qk9Laz2wGraPVGYDbvfXd7+i1MVziWMXGHUm8gpRC2p11ugYYXKRAcaS2g6ycq4Pr+eqb7g==",
"requires": {
"headful": "^1.0.3"
}
},
"vue-hot-reload-api": { "vue-hot-reload-api": {
"version": "2.3.4", "version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz", "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

1
package.json
View File

@ -17,6 +17,7 @@
"roboto-fontface": "*", "roboto-fontface": "*",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-cryptojs": "^2.1.4", "vue-cryptojs": "^2.1.4",
"vue-headful": "^2.1.0",
"vue-router": "^3.1.6", "vue-router": "^3.1.6",
"vuetify": "^2.2.11", "vuetify": "^2.2.11",
"vuetify-toast-snackbar": "^0.6.1" "vuetify-toast-snackbar": "^0.6.1"

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
public/img/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

10
public/index.html
View File

@ -6,6 +6,16 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<meta itemprop="name">
<meta property="og:title">
<meta name="twitter:title">
<meta name="description"/>
<meta itemprop="description">
<meta property="og:description">
<meta name="twitter:description">
<meta itemprop="image">
<meta property="og:image">
<meta name="twitter:image">
</head> </head>
<body> <body>
<noscript> <noscript>

23
src/App.vue
View File

@ -1,5 +1,11 @@
<template> <template>
<v-app id="inspire"> <v-app id="inspire">
<vue-headful
:title="currentRoute ? `${currentRoute.text} - IT-Tools` : 'IT-Tools'"
:description="currentRoute ? currentRoute.description: 'Aggregated set of useful tools that every developer may need once in a while.'"
:keywords="currentRoute ? currentRoute.keywords: null"
image="/img/banner.png"
/>
<v-navigation-drawer v-model="drawer" app clipped> <v-navigation-drawer v-model="drawer" app clipped>
<SearchBar class="hidden-sm-and-up" /> <SearchBar class="hidden-sm-and-up" />
@ -92,11 +98,26 @@
data: () => ({ data: () => ({
appVersion: 'v' + process.env.APPLICATION_VERSION, appVersion: 'v' + process.env.APPLICATION_VERSION,
drawer: null, drawer: null,
items: toolsComponents items: toolsComponents,
currentRoute:{}
}), }),
mounted() {
this.setTitle()
},
created() { created() {
this.$vuetify.theme.dark = true this.$vuetify.theme.dark = true
}, },
methods:{
setTitle(){
const path = this.$router.currentRoute.path;
this.currentRoute = toolsComponents.map(p => p.child).flat().find(p => p.path === path)
}
},
watch:{
'$route'(){
this.setTitle()
}
}
} }
</script> </script>

1
src/main.js
View File

@ -7,6 +7,7 @@ import 'roboto-fontface/css/roboto/roboto-fontface.css'
import '@fortawesome/fontawesome-free/css/all.css' import '@fortawesome/fontawesome-free/css/all.css'
import './plugins/crypto-js' import './plugins/crypto-js'
import './plugins/toast-snackbar' import './plugins/toast-snackbar'
import './plugins/vue-headful'
Vue.config.productionTip = false Vue.config.productionTip = false

4
src/plugins/vue-headful.js Normal file
View File

@ -0,0 +1,4 @@
import Vue from 'vue';
import vueHeadful from 'vue-headful';
Vue.component('vue-headful', vueHeadful);

3
src/router.js
View File

@ -24,7 +24,8 @@ const toolsComponents = [
text: 'Token generator', text: 'Token generator',
path: '/token-generator', path: '/token-generator',
component: TokenGenerator, component: TokenGenerator,
keywords: ['token', 'random', 'string', 'alphanumeric'] keywords: ['token', 'random', 'string', 'alphanumeric'],
description: 'Generate random tokens.'
}, },
{ {
icon: 'fa-fingerprint', icon: 'fa-fingerprint',

2
src/routes/tools/TextStats.vue
View File

@ -43,7 +43,7 @@
return { return {
Blob: Blob, Blob: Blob,
formatBytes, formatBytes,
inputText: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', inputText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
} }
}, },
computed: { computed: {