diff --git a/package.json b/package.json index c963090..92205c8 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,12 @@ { "name": "bruga-weather", - "version": "1.0.0", + "version": "1.0.1", "description": "A React.js personal project made for learning purposes", "main": "webpack.config.js", "scripts": { "start": "webpack-dev-server --open --config ./webpack.config.js --mode development", - "build": "webpack -p --mode production" + "build": "webpack -p --mode production", + "gh-pages": "webpack -p --mode production --publicPath bruga-weather" }, "keywords": [ "react" @@ -37,6 +38,7 @@ "html-loader": "^0.5.5", "mini-css-extract-plugin": "^0.5.0", "html-webpack-plugin": "^3.2.0", + "html-webpack-include-assets-plugin": "^1.0.6", "remote-file-webpack-plugin": "^1.0.2", "webpack": "^4.27.1", "webpack-cli": "^3.1.2", diff --git a/src/assets/styles/icons.less b/src/assets/styles/icons.less new file mode 100644 index 0000000..de3bfb1 --- /dev/null +++ b/src/assets/styles/icons.less @@ -0,0 +1,20 @@ +/** Icon assets: Check https://www.amcharts.com/free-animated-svg-weather-icons/ */ +@thunder: url('../amcharts-weather-icons/animated/thunder.svg'); +@rainy2: url('../amcharts-weather-icons/animated/rainy-2.svg'); +@rainy3: url('../amcharts-weather-icons/animated/rainy-3.svg'); +@rainy4: url('../amcharts-weather-icons/animated/rainy-4.svg'); +@rainy5: url('../amcharts-weather-icons/animated/rainy-5.svg'); +@rainy6: url('../amcharts-weather-icons/animated/rainy-6.svg'); +@rainy7: url('../amcharts-weather-icons/animated/rainy-7.svg'); +@snowy2: url('../amcharts-weather-icons/animated/snowy-2.svg'); +@snowy3: url('../amcharts-weather-icons/animated/snowy-3.svg'); +@snowy4: url('../amcharts-weather-icons/animated/snowy-4.svg'); +@snowy5: url('../amcharts-weather-icons/animated/snowy-5.svg'); +@snowy6: url('../amcharts-weather-icons/animated/snowy-6.svg'); +@day: url('../amcharts-weather-icons/animated/day.svg'); +@night: url('../amcharts-weather-icons/animated/night.svg'); +@cloudyDay1: url('../amcharts-weather-icons/animated/cloudy-day-1.svg'); +@cloudyDay3: url('../amcharts-weather-icons/animated/cloudy-day-3.svg'); +@cloudyNight1: url('../amcharts-weather-icons/animated/cloudy-night-1.svg'); +@cloudyNight3: url('../amcharts-weather-icons/animated/cloudy-night-3.svg'); +@cloudy: url('../amcharts-weather-icons/animated/cloudy.svg'); diff --git a/src/index.html b/src/index.html index 01e454b..f5328e0 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,6 @@ Bruga Weather -
diff --git a/src/ui/components/icon.js b/src/ui/components/icon.js index 5b7b0ad..9727819 100644 --- a/src/ui/components/icon.js +++ b/src/ui/components/icon.js @@ -1,27 +1,6 @@ import React from 'react'; import './icon.less'; -/** Icon assets: Check https://www.amcharts.com/free-animated-svg-weather-icons/ */ -import '@/assets/amcharts-weather-icons/animated/thunder.svg'; -import '@/assets/amcharts-weather-icons/animated/rainy-2.svg'; -import '@/assets/amcharts-weather-icons/animated/rainy-3.svg'; -import '@/assets/amcharts-weather-icons/animated/rainy-4.svg'; -import '@/assets/amcharts-weather-icons/animated/rainy-5.svg'; -import '@/assets/amcharts-weather-icons/animated/rainy-6.svg'; -import '@/assets/amcharts-weather-icons/animated/rainy-7.svg'; -import '@/assets/amcharts-weather-icons/animated/snowy-2.svg'; -import '@/assets/amcharts-weather-icons/animated/snowy-3.svg'; -import '@/assets/amcharts-weather-icons/animated/snowy-4.svg'; -import '@/assets/amcharts-weather-icons/animated/snowy-5.svg'; -import '@/assets/amcharts-weather-icons/animated/snowy-6.svg'; -import '@/assets/amcharts-weather-icons/animated/day.svg'; -import '@/assets/amcharts-weather-icons/animated/night.svg'; -import '@/assets/amcharts-weather-icons/animated/cloudy-day-1.svg'; -import '@/assets/amcharts-weather-icons/animated/cloudy-day-3.svg'; -import '@/assets/amcharts-weather-icons/animated/cloudy-night-1.svg'; -import '@/assets/amcharts-weather-icons/animated/cloudy-night-3.svg'; -import '@/assets/amcharts-weather-icons/animated/cloudy.svg'; - /** Icon CSS classes: check https://openweathermap.org/weather-conditions */ var classes = { thunderstorm: ['thunderstorm with light rain', 'thunderstorm with rain', 'thunderstorm with heavy rain', 'light thunderstorm', 'thunderstorm', 'heavy thunderstorm', 'ragged thunderstorm', 'ragged thunderstorm', 'thunderstorm with light drizzle', 'thunderstorm with drizzle', 'thunderstorm with heavy drizzle'], diff --git a/src/ui/components/icon.less b/src/ui/components/icon.less index 08024b2..12c5ba5 100644 --- a/src/ui/components/icon.less +++ b/src/ui/components/icon.less @@ -1,3 +1,5 @@ +@import (less, reference) "../../assets/styles/icons.less"; + .weather-icon { width: 100px; height: 100px; @@ -7,90 +9,90 @@ background-origin: padding-box; background-clip: border-box; background-size: contain; - background-image: url(/img/cloudy-day-1.svg); + background-image: @cloudyDay1; margin: -20px; margin-top: -6px; &.thunderstorm { - background-image: url(/img/thunder.svg); + background-image: @thunder; } &.lightrain { &.day { - background-image: url(/img/rainy-2.svg); + background-image: @rainy2; } &.night { - background-image: url(/img/rainy-4.svg); + background-image: @rainy4; } } &.rain { &.day { - background-image: url(/img/rainy-3.svg); + background-image: @rainy3; } &.night { - background-image: url(/img/rainy-5.svg); + background-image: @rainy5; } } &.heavyrain { - background-image: url(/img/rainy-6.svg); + background-image: @rainy6; } &.hail { - background-image: url(/img/rainy-7.svg); + background-image: @rainy7; } &.lightsnow { &.day { - background-image: url(/img/snowy-2.svg); + background-image: @snowy2; } &.night { - background-image: url(/img/snowy-4.svg); + background-image: @snowy4; } } &.snow { &.day { - background-image: url(/img/snowy-3.svg); + background-image: @snowy3; } &.night { - background-image: url(/img/snowy-5.svg); + background-image: @snowy5; } } &.heavysnow { - background-image: url(/img/snowy-6.svg); + background-image: @snowy6; } &.clear { &.day { - background-image: url(/img/day.svg); + background-image: @day; } &.night { - background-image: url(/img/night.svg); + background-image: @night; } } &.fewclouds { &.day { - background-image: url(/img/cloudy-day-1.svg); + background-image: @cloudyDay1; } &.night { - background-image: url(/img/cloudy-night-1.svg); + background-image: @cloudyNight1; } } &.clouds { &.day { - background-image: url(/img/cloudy-day-3.svg); + background-image: @cloudyDay3; } &.night { - background-image: url(/img/cloudy-night-3.svg); + background-image: @cloudyNight3; } } &.darkclouds { - background-image: url(/img/cloudy.svg); + background-image: @cloudy; } } diff --git a/src/ui/components/new-city-card.js b/src/ui/components/new-city-card.js index 79444c8..f0d6da6 100644 --- a/src/ui/components/new-city-card.js +++ b/src/ui/components/new-city-card.js @@ -1,11 +1,12 @@ import React from 'react'; +import rainy6 from '@/assets/amcharts-weather-icons/animated/rainy-6.svg'; import './new-city-card.less'; const NewCityCard = (props) => { return (
- +
diff --git a/webpack.config.js b/webpack.config.js index bc2ea48..3bcaea0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,10 +2,13 @@ const path = require('path'); const HtmlWebPackPlugin = require('html-webpack-plugin'); const RemoteFilePlugin = require('remote-file-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin'); module.exports = (env, args) => { const isProduction = args.mode === 'production'; + const publicPath = isProduction ? '/' + (args.publicPath ? args.publicPath + '/' : '') : '/'; + const config = { entry: './src/index.js', stats: { children: false }, @@ -71,22 +74,29 @@ module.exports = (env, args) => { ] }, plugins: [ - new HtmlWebPackPlugin({ - template: './src/index.html', - filename: './index.html', - favicon: './src/assets/logo.png', - inject: true - }), - new MiniCssExtractPlugin({ - filename: "styles/bundle.css?[hash]" - }), new RemoteFilePlugin([ { url: 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Roboto:100,300,400,500,700,900', filepath: 'styles/fonts.css', cache: true }, - ]) + ]), + new MiniCssExtractPlugin({ + filename: "styles/bundle.css?[hash]" + }), + new HtmlWebPackPlugin({ + template: './src/index.html', + filename: './index.html', + favicon: './src/assets/logo.png', + inject: true + }), + new HtmlWebpackIncludeAssetsPlugin({ + assets: ['styles/fonts.css'], + resolvePaths: true, + publicPath: true, + append: true, + hash: true + }) ], resolve: { alias: { @@ -96,7 +106,7 @@ module.exports = (env, args) => { }, output: { path: __dirname + '/dist', - publicPath: '/', + publicPath: publicPath, filename: 'js/bundle.js?[hash]' }, devServer: {