From 3cfec6d8f245e545569c3dd7e04de167634a6b06 Mon Sep 17 00:00:00 2001 From: Matt Isenhower Date: Tue, 31 Jul 2018 12:14:27 -0700 Subject: [PATCH] Use Vue CLI to build assets --- .babelrc | 3 - .env.example | 2 +- babel.config.js | 5 + docker/nginx/conf.d/default.conf | 2 +- package.json | 70 +- postcss.config.js | 5 - .../icons => public}/apple-touch-icon.png | Bin .../assets/icons => public}/favicon-16x16.png | Bin .../assets/icons => public}/favicon-32x32.png | Bin {src/web/assets/icons => public}/favicon.ico | Bin public/index.html | 22 +- .../icons => public}/safari-pinned-tab.svg | 0 public/screenshots.html | 4 - src/common/regions.esm.js | 94 + src/common/regions.js | 3 +- src/web/analytics.js | 19 +- src/web/components/Main.vue | 2 +- .../screenshots/splatfest/Splatfest.vue | 2 +- .../splatoon/SplatfestHistoryDialog.vue | 2 +- src/web/main.js | 2 + src/web/screenshots.js | 2 + src/web/store/actions.js | 2 +- vue.config.js | 67 + webpack.config.js | 140 - yarn.lock | 4990 +++++++++++------ 25 files changed, 3631 insertions(+), 1807 deletions(-) delete mode 100644 .babelrc create mode 100644 babel.config.js delete mode 100644 postcss.config.js rename {src/web/assets/icons => public}/apple-touch-icon.png (100%) rename {src/web/assets/icons => public}/favicon-16x16.png (100%) rename {src/web/assets/icons => public}/favicon-32x32.png (100%) rename {src/web/assets/icons => public}/favicon.ico (100%) rename {src/web/assets/icons => public}/safari-pinned-tab.svg (100%) create mode 100644 src/common/regions.esm.js create mode 100644 vue.config.js delete mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 1d34837..0000000 --- a/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - presets: ['env', 'stage-2'] -} diff --git a/.env.example b/.env.example index ae01bd2..f66dd7a 100644 --- a/.env.example +++ b/.env.example @@ -7,7 +7,7 @@ NINTENDO_SESSION_ID_JP= SPLATNET_USER_AGENT= # (Optional) Google Analytics tracking ID -GOOGLE_ANALYTICS_ID= +VUE_APP_GOOGLE_ANALYTICS_ID= # (Optional) Sentry error reporting (https://sentry.io) SENTRY_DSN= diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..5f710a5 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,5 @@ +module.exports = { + presets: [ + '@vue/app' + ], +} diff --git a/docker/nginx/conf.d/default.conf b/docker/nginx/conf.d/default.conf index 75f3f89..7ea8c06 100644 --- a/docker/nginx/conf.d/default.conf +++ b/docker/nginx/conf.d/default.conf @@ -28,7 +28,7 @@ server { add_header Content-Type text/calendar; } - # CORS (for third-party integrations) + # CORS (for modern ES module support and third-party integrations) location /assets/ { add_header Access-Control-Allow-Origin *; } diff --git a/package.json b/package.json index 5fb018d..d44307e 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { + "name": "splatoon2.ink", "private": true, "scripts": { - "dev": "webpack", - "watch": "npm run dev -- --watch", - "build": "webpack -p --env production", - "serve": "webpack-dev-server --hot --content-base dist/", + "serve": "vue-cli-service serve", + "build": "vue-cli-service build --modern --no-clean", + "lint": "vue-cli-service lint", "splatnet": "node src/app splatnet", "twitter": "node src/app twitter", "twitter:test": "node src/app twitterTest", @@ -15,28 +15,15 @@ "locale-man": "node node_modules/locale-man/ -l en,es,es-MX,fr,fr-CA,de,nl,it,ru,ja -o src/locale" }, "dependencies": { - "autoprefixer": "^7.1.2", "axios": "^0.17.1", - "babel-core": "^6.25.0", - "babel-loader": "^7.1.1", - "babel-polyfill": "^6.23.0", - "babel-preset-env": "^1.6.0", - "babel-preset-stage-2": "^6.24.1", "bulma": "^0.6.1", "bulma-tooltip": "^2.0.1", - "clean-webpack-plugin": "^0.1.16", "console-stamp": "^0.2.5", - "copy-webpack-plugin": "^4.0.1", "cozy-ical": "^1.1.22", "cron": "^1.2.1", - "css-loader": "^0.28.4", "delay": "^2.0.0", "dotenv": "^4.0.0", - "extract-text-webpack-plugin": "^3.0.0", - "file-loader": "^1.1.5", "he": "^1.1.1", - "html-loader": "^0.5.0", - "html-webpack-plugin": "^2.30.1", "json-stable-stringify": "^1.0.1", "jsonpath": "^1.0.0", "lodash": "^4.17.4", @@ -44,31 +31,54 @@ "mkdirp": "^0.5.1", "module-alias": "^2.1.0", "moment-timezone": "^0.5.13", - "node-sass": "^4.5.3", - "postcss-loader": "^2.0.6", "puppeteer": "^0.13.0", - "purify-css": "^1.2.5", - "purifycss-webpack": "^0.7.0", "raven": "^2.1.1", - "sass-loader": "^6.0.6", - "style-loader": "^0.19.0", "twitter": "^1.7.1", "v-click-outside": "^1.0.0", "vue": "^2.4.2", "vue-clipboard2": "^0.2.0", - "vue-loader": "^13.0.2", "vue-router": "^3.0.1", - "vue-template-compiler": "^2.4.2", "vuex": "^3.0.1", - "vuex-i18n": "^1.8.0", - "webpack": "^3.4.1", - "webpack-dev-server": "^2.6.1" + "vuex-i18n": "^1.8.0" }, "devDependencies": { + "@vue/cli-plugin-babel": "^3.0.0-rc.9", + "@vue/cli-plugin-eslint": "^3.0.0-rc.9", + "@vue/cli-service": "^3.0.0-rc.9", "locale-man": "^0.0.5", - "shipit-cli": "^3.0.0" + "node-sass": "^4.9.2", + "purify-css": "^1.2.5", + "purifycss-webpack": "^0.7.0", + "sass-loader": "^7.0.3", + "shipit-cli": "^3.0.0", + "vue-template-compiler": "^2.5.16" }, "_moduleAliases": { "@": "src" - } + }, + "eslintConfig": { + "root": true, + "env": { + "node": true + }, + "extends": [ + "plugin:vue/essential", + "eslint:recommended" + ], + "rules": {}, + "parserOptions": { + "parser": "babel-eslint" + } + }, + "postcss": { + "plugins": { + "autoprefixer": {} + } + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "firefox esr", + "not dead" + ] } diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index 1d492f3..0000000 --- a/postcss.config.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - plugins: [ - require('autoprefixer'), - ], -} diff --git a/src/web/assets/icons/apple-touch-icon.png b/public/apple-touch-icon.png similarity index 100% rename from src/web/assets/icons/apple-touch-icon.png rename to public/apple-touch-icon.png diff --git a/src/web/assets/icons/favicon-16x16.png b/public/favicon-16x16.png similarity index 100% rename from src/web/assets/icons/favicon-16x16.png rename to public/favicon-16x16.png diff --git a/src/web/assets/icons/favicon-32x32.png b/public/favicon-32x32.png similarity index 100% rename from src/web/assets/icons/favicon-32x32.png rename to public/favicon-32x32.png diff --git a/src/web/assets/icons/favicon.ico b/public/favicon.ico similarity index 100% rename from src/web/assets/icons/favicon.ico rename to public/favicon.ico diff --git a/public/index.html b/public/index.html index 7b57cd7..e912c05 100644 --- a/public/index.html +++ b/public/index.html @@ -8,25 +8,25 @@ - + - <% for (var css in htmlWebpackPlugin.files.chunks.main.css) { %> - - <% } %> - - - + + + - - + + + <% if (process.env.VUE_APP_GOOGLE_ANALYTICS_ID) { %> + + + + <% } %>
- - diff --git a/src/web/assets/icons/safari-pinned-tab.svg b/public/safari-pinned-tab.svg similarity index 100% rename from src/web/assets/icons/safari-pinned-tab.svg rename to public/safari-pinned-tab.svg diff --git a/public/screenshots.html b/public/screenshots.html index c3b4887..eef0ba3 100644 --- a/public/screenshots.html +++ b/public/screenshots.html @@ -4,12 +4,8 @@ - <% for (var css in htmlWebpackPlugin.files.chunks.screenshots.css) { %> - - <% } %>
- diff --git a/src/common/regions.esm.js b/src/common/regions.esm.js new file mode 100644 index 0000000..891412e --- /dev/null +++ b/src/common/regions.esm.js @@ -0,0 +1,94 @@ +// This is the same as regions.js but formatted for ES6 modules. +// Temporary fix for importing with vue-cli until I find something that works with nodejs as well. + +export const splatoonRegions = [ + { key: null, name: 'Global', demonym: 'Global' }, + { key: 'na', name: 'North America & Oceania', demonym: 'North American & Oceanian' }, + { key: 'eu', name: 'Europe', demonym: 'European' }, + { key: 'jp', name: 'Japan', demonym: 'Japanese' }, +]; + +export const languages = [ + { region: 'NA', language: 'en', name: 'English' }, + { region: 'EU', language: 'en', name: 'English (UK)' }, + { region: 'EU', language: 'es', name: 'Español' }, + { region: 'NA', language: 'es-MX', name: 'Español (MX)' }, + { region: 'EU', language: 'fr', name: 'Français' }, + { region: 'NA', language: 'fr-CA', name: 'Français (CA)' }, + { region: 'EU', language: 'de', name: 'Deutsch' }, + { region: 'EU', language: 'nl', name: 'Nederlands' }, + { region: 'EU', language: 'it', name: 'Italiano' }, + { region: 'EU', language: 'ru', name: 'Pусский' }, + { region: 'JP', language: 'ja', name: '日本語' }, +]; + +export function getRegionByKey(key) { + return splatoonRegions.find(r => r.key == key); +} + +export function detectSplatoonLanguage() { + let browserLanguages = window.navigator.languages || [window.navigator.language]; + browserLanguages = browserLanguages.map(l => l.toLowerCase()); + let availableLanguages = languages.map(l => l.language.toLowerCase()); + + // Try to find a match based on the first part of the available languages (i.e., match "es" for "es-ES") + for (let language of browserLanguages) { + for (let availableLanguage of availableLanguages) { + if (language.startsWith(availableLanguage)) + return availableLanguage; + } + } +} + +export function detectSplatoonRegion() { + if (window.navigator && window.navigator.language) + return detectSplatoonRegionFromLanguage(window.navigator.language); + return null; +} + +function detectSplatoonRegionFromLanguage(language) { + switch (language) { + case 'en-US': // USA + case 'en-CA': // Canada (English) + case 'fr-CA': // Canada (French) + case 'es-MX': // Mexico + case 'en-AU': // Australia + case 'en-NZ': // New Zealand + return 'na'; + + case 'de-AT': // Austria + case 'nl-BE': // Belgium (Dutch) + case 'fr-BE': // Belgium (French) + case 'cs-CZ': // Czech Republic + case 'da-DK': // Denmark + case 'de': // Germany + case 'de-DE': // Germany + case 'es-ES': // Spain + case 'fi-FI': // Finland + case 'fr': // France + case 'fr-FR': // France + case 'el-GR': // Greece + case 'hu-HU': // Hungary + case 'it-IT': // Italy + case 'nl': // Netherlands + case 'nl-NL': // Netherlands + case 'nb-NO': // Norway + case 'pl-PL': // Poland + case 'pt-PT': // Portugal + case 'ru-RU': // Russia + case 'en-ZA': // South Africa + case 'sv-SE': // Sweden + case 'de-CH': // Switzerland (German) + case 'fr-CH': // Switzerland (French) + case 'it-CH': // Switzerland (Italian) + case 'en-GB': // United Kingdom + case 'en-IE': // Ireland + return 'eu'; + + case 'ja': // Japan + case 'ja-JP': // Japan + return 'jp'; + } + + return null; +} diff --git a/src/common/regions.js b/src/common/regions.js index 92d28cf..2c8b1bb 100644 --- a/src/common/regions.js +++ b/src/common/regions.js @@ -24,7 +24,8 @@ function getRegionByKey(key) { } function detectSplatoonLanguage() { - let browserLanguages = window.navigator.languages.map(l => l.toLowerCase()); + let browserLanguages = window.navigator.languages || [window.navigator.language]; + browserLanguages = browserLanguages.map(l => l.toLowerCase()); let availableLanguages = languages.map(l => l.language.toLowerCase()); // Try to find a match based on the first part of the available languages (i.e., match "es" for "es-ES") diff --git a/src/web/analytics.js b/src/web/analytics.js index a947c97..cc38999 100644 --- a/src/web/analytics.js +++ b/src/web/analytics.js @@ -1,12 +1,11 @@ -window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; - -if (GOOGLE_ANALYTICS_ID) { - ga('create', GOOGLE_ANALYTICS_ID, 'auto'); - ga('send', 'pageview'); -} - export default { - event() { - ga('send', 'event', ...arguments); + event(category, action, label = undefined) { + if (window.gtag) { + window.gtag('event', { + event_category: category, + event_action: action, + event_label: label, + }); + } }, -} +}; diff --git a/src/web/components/Main.vue b/src/web/components/Main.vue index 2cd3afc..12f120f 100644 --- a/src/web/components/Main.vue +++ b/src/web/components/Main.vue @@ -181,7 +181,7 @@