phyks/cygnal
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix OpenGraph icon, OG does not support SVG

Browse Source
This commit is contained in:
Lucas Verney 2018-07-11 16:53:29 +02:00
parent 037d4627e9
commit e9b4593abf
9 changed files with 41 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/utils.js
View File

@ -95,7 +95,7 @@ exports.createNotifierCallback = () => {
title: packageConfig.name, title: packageConfig.name,
message: severity + ': ' + error.name, message: severity + ': ' + error.name,
subtitle: filename || '', subtitle: filename || '',
icon: path.join(__dirname, 'static/icon.svg') icon: path.join(__dirname, '../src/assets/logo.svg')
}) })
} }
} }

12
build/webpack.dev.conf.js
View File

@ -1,4 +1,5 @@
'use strict' 'use strict'
const svg2png = require('svg2png')
const utils = require('./utils') const utils = require('./utils')
const webpack = require('webpack') const webpack = require('webpack')
const config = require('../config') const config = require('../config')
@ -53,7 +54,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(), new webpack.NoEmitOnErrorsPlugin(),
new AppManifestWebpackPlugin({ new AppManifestWebpackPlugin({
logo: path.resolve(__dirname, '../static/icon.svg'), logo: path.resolve(__dirname, '../src/assets/logo.svg'),
prefix: '.', prefix: '.',
output: '/static/icons-[hash:8]/', output: '/static/icons-[hash:8]/',
inject: true, inject: true,
@ -77,9 +78,16 @@ const devWebpackConfig = merge(baseWebpackConfig, {
new CopyWebpackPlugin([ new CopyWebpackPlugin([
{ {
from: path.resolve(__dirname, '../static'), from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory, to: config.build.assetsSubDirectory,
ignore: ['.*'] ignore: ['.*']
}, },
{
from: path.resolve(__dirname, '../src/assets/logo.svg'),
to: path.join(config.build.assetsSubDirectory, 'ogIcon.png'),
transform (content, path) {
return Promise.resolve(svg2png(content, { width: 400, height: 400 }));
}
},
{ {
from: path.resolve(__dirname, '../humans.txt'), from: path.resolve(__dirname, '../humans.txt'),
to: config.build.assetsRoot, to: config.build.assetsRoot,

10
build/webpack.prod.conf.js
View File

@ -1,5 +1,6 @@
'use strict' 'use strict'
const path = require('path') const path = require('path')
const svg2png = require('svg2png')
const utils = require('./utils') const utils = require('./utils')
const webpack = require('webpack') const webpack = require('webpack')
const config = require('../config') const config = require('../config')
@ -59,7 +60,7 @@ const webpackConfig = merge(baseWebpackConfig, {
: { safe: true } : { safe: true }
}), }),
new AppManifestWebpackPlugin({ new AppManifestWebpackPlugin({
logo: path.resolve(__dirname, '../static/icon.svg'), logo: path.resolve(__dirname, '../src/assets/logo.svg'),
prefix: '.', prefix: '.',
output: '/static/icons-[hash:8]/', output: '/static/icons-[hash:8]/',
inject: true, inject: true,
@ -132,6 +133,13 @@ const webpackConfig = merge(baseWebpackConfig, {
to: config.build.assetsSubDirectory, to: config.build.assetsSubDirectory,
ignore: ['.*'] ignore: ['.*']
}, },
{
from: path.resolve(__dirname, '../src/assets/logo.svg'),
to: path.join(config.build.assetsSubDirectory, 'ogIcon.png'),
transform (content, path) {
return Promise.resolve(svg2png(content, { width: 400, height: 400 }));
}
},
{ {
from: path.resolve(__dirname, '../humans.txt'), from: path.resolve(__dirname, '../humans.txt'),
to: config.build.assetsRoot, to: config.build.assetsRoot,

2
config/index.js
View File

@ -75,6 +75,6 @@ module.exports = {
// OpenGraph-related variables // OpenGraph-related variables
ogURL: 'https://cyclo.phyks.me', ogURL: 'https://cyclo.phyks.me',
ogImage: 'https://cyclo.phyks.me/static/icon.svg', ogImage: 'https://cyclo.phyks.me/static/ogIcon.png',
} }
} }

3
index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" prefix="og: http://ogp.me/ns#">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
@ -7,6 +7,7 @@
<meta name="description" content="Track and share issues (work, interruption in routes, parked cars) on bike lanes in realtime!"> <meta name="description" content="Track and share issues (work, interruption in routes, parked cars) on bike lanes in realtime!">
<meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@PhyksIsHere" /> <meta name="twitter:creator" content="@PhyksIsHere" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Cyclassist: your bike companion!" /> <meta property="og:title" content="Cyclassist: your bike companion!" />
<meta property="og:description" content="Track and share issues (work, interruption in routes, parked cars) on bike lanes in realtime!" /> <meta property="og:description" content="Track and share issues (work, interruption in routes, parked cars) on bike lanes in realtime!" />
<meta property="og:url" content="<%= htmlWebpackPlugin.options.ogURL %>" /> <meta property="og:url" content="<%= htmlWebpackPlugin.options.ogURL %>" />

3
package.json
View File

@ -11,7 +11,6 @@
"build": "node build/build.js" "build": "node build/build.js"
}, },
"dependencies": { "dependencies": {
"app-manifest-webpack-plugin": "^1.1.3",
"es6-promise": "^4.2.4", "es6-promise": "^4.2.4",
"isomorphic-fetch": "^2.2.1", "isomorphic-fetch": "^2.2.1",
"leaflet": "^1.3.1", "leaflet": "^1.3.1",
@ -29,6 +28,7 @@
"vuex": "^3.0.1" "vuex": "^3.0.1"
}, },
"devDependencies": { "devDependencies": {
"app-manifest-webpack-plugin": "^1.1.3",
"autoprefixer": "^7.1.2", "autoprefixer": "^7.1.2",
"babel-core": "^6.22.1", "babel-core": "^6.22.1",
"babel-eslint": "^7.1.1", "babel-eslint": "^7.1.1",
@ -63,6 +63,7 @@
"rimraf": "^2.6.0", "rimraf": "^2.6.0",
"semver": "^5.3.0", "semver": "^5.3.0",
"shelljs": "^0.7.6", "shelljs": "^0.7.6",
"svg2png": "^4.1.1",
"uglifyjs-webpack-plugin": "^1.1.1", "uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8", "url-loader": "^0.5.8",
"vue-loader": "^13.3.0", "vue-loader": "^13.3.0",

0
static/icon.svg → src/assets/logo.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

2
src/views/Map.vue
View File

@ -2,7 +2,7 @@
<v-container fluid fill-height class="no-padding"> <v-container fluid fill-height class="no-padding">
<v-layout v-if="isIntro" row wrap class="text-xs-center blue lighten-2"> <v-layout v-if="isIntro" row wrap class="text-xs-center blue lighten-2">
<v-flex xs8 offset-xs2> <v-flex xs8 offset-xs2>
<p><img src="static/icon.svg" alt="Logo"/></p></p> <p><img src="@/assets/logo.svg" alt="Logo"/></p></p>
<p>{{ $t('about.summary') }}</p> <p>{{ $t('about.summary') }}</p>
<v-btn role="button" round color="green" dark @click="introButtonClick">{{ $t('intro.start') }}</v-btn> <v-btn role="button" round color="green" dark @click="introButtonClick">{{ $t('intro.start') }}</v-btn>
</v-flex> </v-flex>

17
yarn.lock
View File

@ -2648,6 +2648,10 @@ file-type@^3.1.0, file-type@^3.8.0:
version "3.9.0" version "3.9.0"
resolved "https://registry.yarnpkg.com/file-type/-/file-type-3.9.0.tgz#257a078384d1db8087bc449d107d52a52672b9e9" resolved "https://registry.yarnpkg.com/file-type/-/file-type-3.9.0.tgz#257a078384d1db8087bc449d107d52a52672b9e9"
file-url@^2.0.0:
version "2.0.2"
resolved "https://registry.yarnpkg.com/file-url/-/file-url-2.0.2.tgz#e951784d79095127d3713029ab063f40818ca2ae"
filename-regex@^2.0.0: filename-regex@^2.0.0:
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26" resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@ -4815,7 +4819,7 @@ performance-now@^2.1.0:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
phantomjs-prebuilt@^2.1.10: phantomjs-prebuilt@^2.1.10, phantomjs-prebuilt@^2.1.14:
version "2.1.16" version "2.1.16"
resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.16.tgz#efd212a4a3966d3647684ea8ba788549be2aefef" resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.16.tgz#efd212a4a3966d3647684ea8ba788549be2aefef"
dependencies: dependencies:
@ -6183,6 +6187,15 @@ supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0:
dependencies: dependencies:
has-flag "^3.0.0" has-flag "^3.0.0"
svg2png@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/svg2png/-/svg2png-4.1.1.tgz#6b9e0398aa418778b6436e127a2fb7f00d499c28"
dependencies:
file-url "^2.0.0"
phantomjs-prebuilt "^2.1.14"
pn "^1.0.0"
yargs "^6.5.0"
svg2png@~3.0.1: svg2png@~3.0.1:
version "3.0.1" version "3.0.1"
resolved "https://registry.yarnpkg.com/svg2png/-/svg2png-3.0.1.tgz#a2644d68b0231ac00af431aa163714ff17106447" resolved "https://registry.yarnpkg.com/svg2png/-/svg2png-3.0.1.tgz#a2644d68b0231ac00af431aa163714ff17106447"
@ -6940,7 +6953,7 @@ yargs-parser@^7.0.0:
dependencies: dependencies:
camelcase "^4.1.0" camelcase "^4.1.0"
yargs@6.6.0: yargs@6.6.0, yargs@^6.5.0:
version "6.6.0" version "6.6.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208" resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
dependencies: dependencies: