diff --git a/.eslintrc b/.eslintrc index 6a08036..aff2336 100644 --- a/.eslintrc +++ b/.eslintrc @@ -19,18 +19,22 @@ "prettier/prettier": ["error", { "endOfLine": "auto" }], + "import/extensions": "off", "import/no-unresolved": 0, "import/no-extraneous-dependencies": 0, "vue/no-v-html": "off", "vue/max-attributes-per-line": "off", "vue/singleline-html-element-content-newline": "off", "vue/html-closing-bracket-newline": "off", - "vue/html-self-closing": ["error", { - "html": { - "void": "always", - "normal": "never", - "component": "any" + "vue/html-self-closing": [ + "error", + { + "html": { + "void": "always", + "normal": "never", + "component": "any" + } } - }] + ] } } diff --git a/.husky/.gitignore b/.husky/.gitignore deleted file mode 100644 index 31354ec..0000000 --- a/.husky/.gitignore +++ /dev/null @@ -1 +0,0 @@ -_ diff --git a/.husky/_/husky.sh b/.husky/_/husky.sh new file mode 100644 index 0000000..ca2720e --- /dev/null +++ b/.husky/_/husky.sh @@ -0,0 +1,30 @@ +#!/bin/sh +if [ -z "$husky_skip_init" ]; then + debug () { + [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1" + } + + readonly hook_name="$(basename "$0")" + debug "starting $hook_name..." + + if [ "$HUSKY" = "0" ]; then + debug "HUSKY env variable is set to 0, skipping hook" + exit 0 + fi + + if [ -f ~/.huskyrc ]; then + debug "sourcing ~/.huskyrc" + . ~/.huskyrc + fi + + export readonly husky_skip_init=1 + sh -e "$0" "$@" + exitCode="$?" + + if [ $exitCode != 0 ]; then + echo "husky - $hook_name hook exited with code $exitCode (error)" + exit $exitCode + fi + + exit 0 +fi diff --git a/.husky/pre-commit b/.husky/pre-commit deleted file mode 100644 index 36af219..0000000 --- a/.husky/pre-commit +++ /dev/null @@ -1,4 +0,0 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - -npx lint-staged diff --git a/.storybook/images/favicon.png b/.storybook/images/favicon.png new file mode 100644 index 0000000..aef9f15 Binary files /dev/null and b/.storybook/images/favicon.png differ diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..674e57d --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,55 @@ +const path = require('path') + +module.exports = { + core: { + builder: 'webpack5' + }, + stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: [ + '@storybook/preset-scss', + '@storybook/addon-links', + '@storybook/addon-essentials', + { + name: '@storybook/addon-docs', + options: { + vueDocgenOptions: { + alias: { + '@': path.resolve(__dirname, '../') + } + } + } + }, + { + name: '@storybook/addon-postcss', + options: { + cssLoaderOptions: { + // When you have splitted your css over multiple files + // and use @import('./other-styles.css') + importLoaders: 1 + }, + postcssLoaderOptions: { + implementation: require('postcss') + } + } + } + ], + webpackFinal: async (config) => { + config.resolve.alias['@'] = path.resolve(__dirname, '../src') + config.module.rules.push({ + test: /\.(s[ac]ss|css)$/, + use: [ + 'postcss-loader', + { + loader: 'sass-loader', + options: { + sassOptions: { + indentWidth: 4, + includePaths: [] + } + } + } + ] + }) + return config + } +} diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html new file mode 100644 index 0000000..10c347f --- /dev/null +++ b/.storybook/manager-head.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/.storybook/manager.js b/.storybook/manager.js new file mode 100644 index 0000000..e5aa7d6 --- /dev/null +++ b/.storybook/manager.js @@ -0,0 +1,6 @@ +import { addons } from '@storybook/addons' +import UnknownTheme from './unknown-theme' + +addons.setConfig({ + theme: UnknownTheme +}) diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000..7233fbd --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,17 @@ +import '../style/tailwind.scss' +import '../style/main.scss' + +import { themes } from '@storybook/theming' + +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/ + } + }, + docs: { + theme: themes.dark + } +} diff --git a/.storybook/unknown-theme.js b/.storybook/unknown-theme.js new file mode 100644 index 0000000..9edd0da --- /dev/null +++ b/.storybook/unknown-theme.js @@ -0,0 +1,10 @@ +import { create } from '@storybook/theming' + +export default create({ + base: 'dark', + brandTitle: 'IUnknown Storybook', + brandUrl: 'https://theunknown.ch', + fontBase: '"Roboto", sans-serif', + fontCode: 'monospace', + brandImage: 'https://theunknown.ch/version/1620234786727/static/images/unk-logo.png' +}) diff --git a/README.md b/README.md index 41411eb..85d9a7e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,5 @@ -# Vue Skeleton +# Vue Unknown ## A web framework based on Vue 3 -![Vue Skeleton](https://github.com/the-unknown-code/vue-skeleton/blob/main/static/images/vue-skeleton-logo-xs.png?raw=true) # Features - [Vuex](https://next.vuex.vuejs.org/) @@ -10,13 +9,13 @@ - [Webpack](https://webpack.js.org/) - [Tailwind CSS](https://tailwindcss.com/) - [Service Worker](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) +- [Storybook](https://storybook.js.org/) - [SCSS](https://sass-lang.com/) - [Favicon Generator](https://github.com/jantimon/favicons-webpack-plugin) -- [Axios](https://github.com/axios/axios) - [Airbnb Coding Standard](https://github.com/airbnb/javascript) - [Prettier](https://prettier.io/) - [Lint Staged](https://github.com/okonet/lint-staged) # Documentation -- [Vue Skeleton: Wiki](https://github.com/the-unknown-code/vue-skeleton/wiki/Documentation) -- [Vue Skeleton: Template generator]() +- [Vue Unknown: Wiki](https://github.com/the-unknown-code/vue-unknown/wiki/Documentation) +- [Vue Unknown: Template generator]() diff --git a/dev-tools/config/scripts/build.js b/dev-tools/config/scripts/build.js index 87fbb3a..e63cb83 100644 --- a/dev-tools/config/scripts/build.js +++ b/dev-tools/config/scripts/build.js @@ -8,7 +8,7 @@ const chalk = require('chalk') const webpack = require('webpack') const webpackConfig = require('../webpack.config.prod') -const spinner = ora('Vue Skeleton: Building for production') +const spinner = ora('Vue Unknown: Building for production') spinner.start() fs.emptyDirSync(webpackConfig.output.path) @@ -39,7 +39,7 @@ webpack(webpackConfig, (err, stats) => { ) console.log() - console.log(chalk.blue('Vue Skeleton: You can preview your build by running:'), chalk.blue.bold('yarn preview')) - console.log(chalk.blue('Vue Skeleton: You can analyze your build by running:'), chalk.blue.bold('yarn analyze')) + console.log(chalk.blue('Vue Unknown: You can preview your build by running:'), chalk.blue.bold('yarn preview')) + console.log(chalk.blue('Vue Unknown: You can analyze your build by running:'), chalk.blue.bold('yarn analyze')) console.log() }) diff --git a/dev-tools/config/webpack.config.dev.js b/dev-tools/config/webpack.config.dev.js index 3db843a..1da830e 100644 --- a/dev-tools/config/webpack.config.dev.js +++ b/dev-tools/config/webpack.config.dev.js @@ -17,13 +17,13 @@ module.exports = detectPort(config.devServer.port).then((port) => { devWebpackConfig.plugins.push( new FriendlyErrorsWebpackPlugin({ compilationSuccessInfo: { - messages: [`Vue Skeleton - Your application is running here: ${config.devServer.useHttps ? 'https' : 'http'}://localhost:${port}`] + messages: [`Vue Unknown - Your application is running here: ${config.devServer.useHttps ? 'https' : 'http'}://localhost:${port}`] } }) ) } else { // eslint-disable-next-line no-throw-literal - throw 'Vue Skeleton: Plugins not declared' + throw 'Vue Unknown: Plugins not declared' } return devWebpackConfig diff --git a/dev-tools/config/webpack.helpers.js b/dev-tools/config/webpack.helpers.js index c1827ef..5668d5d 100644 --- a/dev-tools/config/webpack.helpers.js +++ b/dev-tools/config/webpack.helpers.js @@ -7,5 +7,9 @@ exports.compose = (funcs) => { return funcs[0] } - return funcs.reduce((a, b) => (...args) => a(b(...args))) + return funcs.reduce( + (a, b) => + (...args) => + a(b(...args)) + ) } diff --git a/dev-tools/config/webpack.module.optimize.js b/dev-tools/config/webpack.module.optimize.js index 60f1693..2029771 100644 --- a/dev-tools/config/webpack.module.optimize.js +++ b/dev-tools/config/webpack.module.optimize.js @@ -1,44 +1,54 @@ const TerserPlugin = require('terser-webpack-plugin') const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') -module.exports = ({ config, isDevelopment }) => (webpackConfig) => ({ - ...webpackConfig, - optimization: isDevelopment - ? { - noEmitOnErrors: true - } - : { - minimize: true, - minimizer: [ - (compiler) => { - new TerserPlugin({ - parallel: true, - extractComments: false, - terserOptions: { - compress: { - drop_console: true +module.exports = + ({ config, isDevelopment }) => + (webpackConfig) => ({ + ...webpackConfig, + optimization: isDevelopment + ? { + noEmitOnErrors: true + } + : { + minimize: true, + minimizer: [ + (compiler) => { + new TerserPlugin({ + parallel: true, + extractComments: false, + terserOptions: { + compress: { + drop_console: true + } } - } - }).apply(compiler) - }, - new CssMinimizerPlugin() - ], - runtimeChunk: 'single', - splitChunks: { - cacheGroups: { - vendor: { - test: /[\\/]node_modules[\\/]/, - name: 'vendors', - chunks: 'all', - priority: -10, - reuseExistingChunk: true + }).apply(compiler) }, - default: { - minChunks: 2, - priority: -20, - reuseExistingChunk: true + new CssMinimizerPlugin() + ], + removeAvailableModules: false, + removeEmptyChunks: false, + splitChunks: false + + /* + splitChunks: { + chunks: 'all', + maxInitialRequests: Infinity, + minSize: 0, + cacheGroups: { + vendor: { + test: /[\\/]node_modules[\\/]/, + name(module) { + // get the name. E.g. node_modules/packageName/not/this/part.js + // or node_modules/packageName + const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1] + + // npm package names are URL-safe, but some servers don't like @ symbols + return `npm.${packageName.replace('@', '')}` + } + } } } + + */ } - } -}) + }) diff --git a/dev-tools/config/webpack.module.output.js b/dev-tools/config/webpack.module.output.js index 17f6c16..c794040 100644 --- a/dev-tools/config/webpack.module.output.js +++ b/dev-tools/config/webpack.module.output.js @@ -1,11 +1,13 @@ const path = require('path') -module.exports = ({ config, isDevelopment = true }) => (webpackConfig) => ({ - ...webpackConfig, - output: { - path: path.join(config.projectRoot, 'dist', config.dist.publicPath !== '/' ? config.dist.publicPath : ''), - publicPath: isDevelopment ? '/' : config.dist.publicPath, - filename: isDevelopment ? '[name].js' : path.posix.join('', `${config.dist.versionPath}js/[name].js`), - chunkFilename: isDevelopment ? '[id].js' : path.posix.join('', `${config.dist.versionPath}js/[id].js`) - } -}) +module.exports = + ({ config, isDevelopment = true }) => + (webpackConfig) => ({ + ...webpackConfig, + output: { + path: path.join(config.projectRoot, 'dist', config.dist.publicPath !== '/' ? config.dist.publicPath : ''), + publicPath: isDevelopment ? '/' : config.dist.publicPath, + filename: isDevelopment ? '[name].js' : path.posix.join('', `${config.dist.versionPath}js/[name].js`), + chunkFilename: isDevelopment ? '[id].js' : path.posix.join('', `${config.dist.versionPath}js/[id].js`) + } + }) diff --git a/dev-tools/config/webpack.module.plugins.js b/dev-tools/config/webpack.module.plugins.js index a55e4f1..ad96142 100644 --- a/dev-tools/config/webpack.module.plugins.js +++ b/dev-tools/config/webpack.module.plugins.js @@ -6,130 +6,120 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const WorkboxPlugin = require('workbox-webpack-plugin') const BeautifyHtmlWebpackPlugin = require('beautify-html-webpack-plugin') -const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin') const FaviconsWebpackPlugin = require('favicons-webpack-plugin') const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') const { CleanWebpackPlugin } = require('clean-webpack-plugin') const { VueLoaderPlugin } = require('vue-loader') -module.exports = ({ config, buildType, isDevelopment }) => (webpackConfig) => { - const plugins = [ - new CopyWebpackPlugin({ - patterns: [ - { - from: 'static', - to: isDevelopment ? 'static' : `${config.dist.versionPath}static` - }, - { - from: 'static-root', - to: '' - } - ] - }), - new HtmlWebpackPlugin( - isDevelopment - ? { - filename: config.devServer.indexHtml, - template: 'index.html', - inject: true, - version: config.dist.versionPath, - publicPath: config.dist.publicPath, - minify: { - removeComments: true, - collapseWhitespace: true, - removeAttributeQuotes: false - }, - chunksSortMode: 'none' - } - : { - publicPath: config.dist.publicPath, - filename: 'index.html', - template: 'index.html', - version: '/', - inject: 'body', - cache: true, - clean: true +module.exports = + ({ config, buildType, isDevelopment }) => + (webpackConfig) => { + const plugins = [ + new CopyWebpackPlugin({ + patterns: [ + { + from: 'static', + to: isDevelopment ? 'static' : `${config.dist.versionPath}static` + }, + { + from: 'static-root', + to: '' } - ), - new webpack.DefinePlugin({ - 'process.env': config.env[buildType], - __VUE_OPTIONS_API__: true, - __VUE_PROD_DEVTOOLS__: false - }), - - new CleanWebpackPlugin(), - new MiniCssExtractPlugin({ - filename: path.posix.join(config.dist.versionPath, 'css/[name].css') - }), - new WebpackBar(), - new VueLoaderPlugin(), - new ImageMinimizerPlugin({ - minimizerOptions: { - // Lossless optimization with custom option - // Feel free to experiment with options for better result for you - plugins: [ - ['gifsicle', { interlaced: true }], - ['jpegtran', { progressive: true }], - ['optipng', { optimizationLevel: 5 }] ] - } - }) - ] + }), + new HtmlWebpackPlugin( + isDevelopment + ? { + filename: config.devServer.indexHtml, + template: 'index.html', + inject: true, + version: config.dist.versionPath, + publicPath: config.dist.publicPath, + minify: { + removeComments: true, + collapseWhitespace: true, + removeAttributeQuotes: false + }, + chunksSortMode: 'none' + } + : { + publicPath: config.dist.publicPath, + filename: 'index.html', + template: 'index.html', + version: '/', + inject: 'body', + cache: true, + clean: true + } + ), + new webpack.DefinePlugin({ + 'process.env': config.env[buildType], + __VUE_OPTIONS_API__: true, + __VUE_PROD_DEVTOOLS__: false + }), - /* - * Hot Module Replacement (or HMR) is one of the most useful features offered by webpack. - * It allows all kinds of modules to be updated at runtime without the need for a full refresh. - */ - if (isDevelopment) { - plugins.push(new webpack.HotModuleReplacementPlugin()) - } else { - plugins.push( - new WorkboxPlugin.GenerateSW({ - // these options encourage the ServiceWorkers to get in there fast - // and not allow any straggling "old" SWs to hang around - clientsClaim: true, - skipWaiting: true + new CleanWebpackPlugin(), + new MiniCssExtractPlugin({ + filename: path.posix.join(config.dist.versionPath, 'css/[name].css') }), - new BeautifyHtmlWebpackPlugin() - ) + new WebpackBar(), + new VueLoaderPlugin() + ] - if (config.generateFavIcon) { + /* + * Hot Module Replacement (or HMR) is one of the most useful features offered by webpack. + * It allows all kinds of modules to be updated at runtime without the need for a full refresh. + */ + if (isDevelopment) { + plugins.push(new webpack.HotModuleReplacementPlugin()) + } else { plugins.push( - new FaviconsWebpackPlugin({ - logo: path.join(config.projectRoot, 'static/favicon.png'), - prefix: `${config.dist.versionPath}static/favicon/`, - cache: true, - inject: true, - favicons: { - icons: { - android: true, - appleIcon: true, - appleStartup: false, - coast: false, - favicons: true, - firefox: false, - opengraph: false, - twitter: false, - yandex: false, - windows: false + new WorkboxPlugin.GenerateSW({ + // these options encourage the ServiceWorkers to get in there fast + // and not allow any straggling "old" SWs to hang around + clientsClaim: true, + skipWaiting: true + }), + new BeautifyHtmlWebpackPlugin() + ) + + if (config.generateFavIcon) { + plugins.push( + new FaviconsWebpackPlugin({ + logo: path.join(config.projectRoot, 'static/favicon.png'), + prefix: `${config.dist.versionPath}static/favicon/`, + cache: true, + inject: true, + favicons: { + icons: { + android: true, + appleIcon: true, + appleStartup: false, + coast: false, + favicons: true, + firefox: false, + opengraph: false, + twitter: false, + yandex: false, + windows: false + } } - } + }) + ) + } + } + + // Visualize size of webpack output files with an interactive zoomable treemap. + if (config.enableBundleAnalyzer) { + plugins.push( + new BundleAnalyzerPlugin({ + defaultSizes: 'gzip' }) ) } - } - // Visualize size of webpack output files with an interactive zoomable treemap. - if (config.enableBundleAnalyzer) { - plugins.push( - new BundleAnalyzerPlugin({ - defaultSizes: 'gzip' - }) - ) - } - - return { - ...webpackConfig, - plugins + return { + ...webpackConfig, + plugins + } } -} diff --git a/dev-tools/config/webpack.module.resolve.js b/dev-tools/config/webpack.module.resolve.js index f8b8c18..2da7b58 100644 --- a/dev-tools/config/webpack.module.resolve.js +++ b/dev-tools/config/webpack.module.resolve.js @@ -1,17 +1,19 @@ const path = require('path') -module.exports = ({ config }) => (webpackConfig) => ({ - ...webpackConfig, - resolve: { - extensions: ['.ts', '.js', '.vue', '.json'], - alias: { - vue: 'vue/dist/vue.esm-bundler.js', - '@': path.resolve(config.projectRoot, 'src') - /* - * You are running the esm-bundler build of vue-i18n. - * It is recommended to configure your bundler to explicitly replace feature flag globals - * with boolean literals to get proper tree-shaking in the final bundle. - */ +module.exports = + ({ config }) => + (webpackConfig) => ({ + ...webpackConfig, + resolve: { + extensions: ['.ts', '.js', '.vue', '.json'], + alias: { + vue: 'vue/dist/vue.esm-bundler.js', + '@': path.resolve(config.projectRoot, 'src') + /* + * You are running the esm-bundler build of vue-i18n. + * It is recommended to configure your bundler to explicitly replace feature flag globals + * with boolean literals to get proper tree-shaking in the final bundle. + */ + } } - } -}) + }) diff --git a/dev-tools/config/webpack.module.rules.js b/dev-tools/config/webpack.module.rules.js index c0c7e48..0350f1b 100644 --- a/dev-tools/config/webpack.module.rules.js +++ b/dev-tools/config/webpack.module.rules.js @@ -2,123 +2,125 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin') const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin') const path = require('path') -module.exports = ({ config, isDevelopment }) => (webpackConfig) => ({ - ...webpackConfig, - module: { - rules: [ - isDevelopment - ? { - test: /\.(s[ac]ss|css)$/, - use: [ - 'style-loader', - 'css-loader', - 'postcss-loader', - { - loader: 'sass-loader', - options: { - sassOptions: { - indentWidth: 4, - includePaths: [] +module.exports = + ({ config, isDevelopment }) => + (webpackConfig) => ({ + ...webpackConfig, + module: { + rules: [ + isDevelopment + ? { + test: /\.(s[ac]ss|css)$/, + use: [ + 'style-loader', + 'css-loader', + 'postcss-loader', + { + loader: 'sass-loader', + options: { + sassOptions: { + indentWidth: 4, + includePaths: [] + } } } - } - ] - } - : { - test: /\.(s[ac]ss|css)$/, - use: [ - MiniCssExtractPlugin.loader, - 'css-loader', - 'postcss-loader', - { - loader: 'sass-loader', - options: { - sassOptions: { - indentWidth: 4, - includePaths: [] + ] + } + : { + test: /\.(s[ac]ss|css)$/, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + 'postcss-loader', + { + loader: 'sass-loader', + options: { + sassOptions: { + indentWidth: 4, + includePaths: [] + } } } - } - ] - }, - { - test: /\.vue$/, - loader: 'vue-loader' - }, - { - test: /\.js$/, - exclude: /node_modules/, - // use: ['babel-loader', 'eslint-loader'] + ] + }, + { + test: /\.vue$/, + loader: 'vue-loader' + }, + { + test: /\.js$/, + exclude: /node_modules/, + // use: ['babel-loader', 'eslint-loader'] - use: [ - { - loader: 'babel-loader', + use: [ + { + loader: 'babel-loader?cacheDirectory', + options: { + presets: ['@babel/preset-env'] + } + } + ] + }, + { + test: /\.ts$/, + exclude: /node_modules/, + use: [ + { + loader: 'babel-loader?cacheDirectory', + options: { babelrc: true } + }, + { + loader: 'ts-loader', + options: { appendTsSuffixTo: [/\.vue$/] } + } + ] + }, + { + test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + use: { + loader: 'file-loader', options: { - presets: ['@babel/preset-env'] + limit: 10000, + name: path.posix.join(isDevelopment ? '' : config.dist.versionPath, 'fonts/[name].[ext]') } } - ] - }, - { - test: /\.ts$/, - exclude: /node_modules/, - use: [ - { - loader: 'babel-loader', - options: { babelrc: true } - }, - { - loader: 'ts-loader', - options: { appendTsSuffixTo: [/\.vue$/] } - } - ] - }, - { - test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, - use: { - loader: 'file-loader', - options: { - limit: 10000, - name: path.posix.join(isDevelopment ? '' : config.dist.versionPath, 'fonts/[name].[ext]') - } - } - }, - { - test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i, - type: 'asset/resource' - }, - { - test: /\.(ico|gif|png|jpg|jpeg|svg)$/i, - use: [ - { - loader: ImageMinimizerPlugin.loader, - options: { - severityError: 'warning', // Ignore errors on corrupted images - minimizerOptions: { - plugins: ['gifsicle'] + }, + { + test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i, + type: 'asset/resource' + }, + { + test: /\.(ico|gif|png|jpg|jpeg|svg)$/i, + use: [ + { + loader: ImageMinimizerPlugin.loader, + options: { + severityError: 'warning', // Ignore errors on corrupted images + minimizerOptions: { + plugins: ['gifsicle'] + } } } - } - ] - }, - { - test: /\.svg$/, - use: [ - { - loader: 'file-loader' - }, - { - loader: 'svgo-loader', - options: { - multipass: true, - js2svg: { - indent: 2, - pretty: true + ] + }, + { + test: /\.svg$/, + use: [ + { + loader: 'file-loader' + }, + { + loader: 'svgo-loader', + options: { + multipass: true, + js2svg: { + indent: 2, + pretty: true + } } } - } - ] - } - ] - } -}) + ] + } + ] + } + }) diff --git a/dev-tools/config/webpack.module.server.js b/dev-tools/config/webpack.module.server.js index e47deef..d36d8b6 100644 --- a/dev-tools/config/webpack.module.server.js +++ b/dev-tools/config/webpack.module.server.js @@ -1,20 +1,22 @@ const fs = require('fs') -module.exports = ({ config }) => (webpackConfig) => ({ - ...webpackConfig, - devServer: { - https: config.devServer.useHttps, - clientLogLevel: 'info', - historyApiFallback: true, - hot: true, - compress: true, - host: 'localhost', - port: config.devServer.port, - disableHostCheck: true, - open: false, - overlay: { - warning: false, - errors: true +module.exports = + ({ config }) => + (webpackConfig) => ({ + ...webpackConfig, + devServer: { + https: config.devServer.useHttps, + clientLogLevel: 'info', + historyApiFallback: true, + hot: true, + compress: true, + host: '0.0.0.0', + port: config.devServer.port, + disableHostCheck: true, + open: false, + overlay: { + warning: false, + errors: true + } } - } -}) + }) diff --git a/dev-tools/scripts/bin/generate-component.js b/dev-tools/scripts/bin/generate-component.js index ea8ab0b..99bf6f4 100644 --- a/dev-tools/scripts/bin/generate-component.js +++ b/dev-tools/scripts/bin/generate-component.js @@ -29,7 +29,8 @@ if (fs.existsSync(targetFolder)) { copyFolderRecursiveSync(source, destination) renamePath(`${destination}{name_pc}`, `${destination}${componentName}`) -renamePath(`${destination}${componentName}\\{name_pc}.js`, `${destination}${componentName}\\${componentName}.js`) -renamePath(`${destination}${componentName}\\{name_pc}.vue`, `${destination}${componentName}\\${componentName}.vue`) -replaceInFile(`${destination}${componentName}\\${componentName}.js`, componentName) -replaceInFile(`${destination}${componentName}\\${componentName}.vue`, componentName) +renamePath(`${destination}${componentName}/{name_pc}.js`, `${destination}${componentName}/${componentName}.js`) +renamePath(`${destination}${componentName}/{name_pc}.vue`, `${destination}${componentName}/${componentName}.vue`) +replaceInFile(`${destination}${componentName}/index.js`, componentName) +replaceInFile(`${destination}${componentName}/${componentName}.js`, componentName) +replaceInFile(`${destination}${componentName}/${componentName}.vue`, componentName) diff --git a/dev-tools/scripts/bin/generate-page.js b/dev-tools/scripts/bin/generate-page.js index 4838d79..38ae135 100644 --- a/dev-tools/scripts/bin/generate-page.js +++ b/dev-tools/scripts/bin/generate-page.js @@ -29,7 +29,8 @@ if (fs.existsSync(targetFolder)) { copyFolderRecursiveSync(source, destination) renamePath(`${destination}{name_pc}`, `${destination}${pageName}`) -renamePath(`${destination}${pageName}\\{name_pc}.js`, `${destination}${pageName}\\${pageName}.js`) -renamePath(`${destination}${pageName}\\{name_pc}.vue`, `${destination}${pageName}\\${pageName}.vue`) -replaceInFile(`${destination}${pageName}\\${pageName}.js`, pageName) -replaceInFile(`${destination}${pageName}\\${pageName}.vue`, pageName) +renamePath(`${destination}${pageName}/name_pc}.js`, `${destination}${pageName}/${pageName}.js`) +renamePath(`${destination}${pageName}/{name_pc}.vue`, `${destination}${pageName}/${pageName}.vue`) +replaceInFile(`${destination}${pageName}/index.js`, pageName) +replaceInFile(`${destination}${pageName}/${pageName}.js`, pageName) +replaceInFile(`${destination}${pageName}/${pageName}.vue`, pageName) diff --git a/dev-tools/scripts/bin/generate.js b/dev-tools/scripts/bin/generate.js index dfa1f4d..b61ea87 100644 --- a/dev-tools/scripts/bin/generate.js +++ b/dev-tools/scripts/bin/generate.js @@ -2,7 +2,7 @@ const program = require('commander') const chalk = require('chalk') -console.log(chalk.blue('Vue Skeleton Generator')) +console.log(chalk.blue('Vue Unknown Generator')) console.log() program diff --git a/dev-tools/scripts/package.json b/dev-tools/scripts/package.json index 577cf75..683ee2d 100644 --- a/dev-tools/scripts/package.json +++ b/dev-tools/scripts/package.json @@ -1,8 +1,7 @@ { - "name": "vue-skeleton-generator", - "version": "1.0.0", - "description": "A Vue CLI generator to create code based on templates", - "preferGlobal": true, - "license": "MIT" - } - \ No newline at end of file + "name": "vue-unknown-generator", + "version": "1.0.0", + "description": "A Vue CLI generator to create code based on templates", + "preferGlobal": true, + "license": "MIT" +} diff --git a/dev-tools/scripts/templates/component/{name_pc}/index.js b/dev-tools/scripts/templates/component/{name_pc}/index.js new file mode 100644 index 0000000..4888712 --- /dev/null +++ b/dev-tools/scripts/templates/component/{name_pc}/index.js @@ -0,0 +1,3 @@ +import {{name_pc}} from './{{name_pc}}.vue' + +export default {{name_pc}} \ No newline at end of file diff --git a/dev-tools/scripts/templates/directive/{name_pc}.js b/dev-tools/scripts/templates/directive/{name_pc}.js deleted file mode 100644 index f500f71..0000000 --- a/dev-tools/scripts/templates/directive/{name_pc}.js +++ /dev/null @@ -1,7 +0,0 @@ -// Directive template - -export default { - name: '{{name_pc}}', - beforeMount(el, binding, vnode) {}, - beforeUnmount(el, binding, vnode) {} -} diff --git a/dev-tools/scripts/templates/page/index.js b/dev-tools/scripts/templates/page/index.js new file mode 100644 index 0000000..4888712 --- /dev/null +++ b/dev-tools/scripts/templates/page/index.js @@ -0,0 +1,3 @@ +import {{name_pc}} from './{{name_pc}}.vue' + +export default {{name_pc}} \ No newline at end of file diff --git a/dev-tools/scripts/templates/store/{name_pc}/{name_pc}.js b/dev-tools/scripts/templates/store/{name_pc}/{name_pc}.js deleted file mode 100644 index 12cd6a2..0000000 --- a/dev-tools/scripts/templates/store/{name_pc}/{name_pc}.js +++ /dev/null @@ -1,8 +0,0 @@ -const namespace = '{{name_pc}}' - -export default { - state: {}, - getters: {}, - mutations: {}, - actions: {} -} diff --git a/index.html b/index.html index 830f529..ee53688 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,16 @@ - - - - - Vue Skeleton - - - -
- - + + + + + Vue Unknown + + + + +
+ + + \ No newline at end of file diff --git a/package.json b/package.json index 1be0be5..8e93a98 100644 --- a/package.json +++ b/package.json @@ -1,27 +1,27 @@ { - "name": "vue-skeleton", - "version": "0.2.5", - "description": "A Vue Framework", - "author": "TheUnknown hello@theunknown.ch", - "homepage": "https://github.com/the-unknown-code/vue-skeleton", + "name": "vue-unknown", + "version": "0.8.0", + "description": "A Vue Skeleton Framework", + "author": "Andrea Giuffrida hello@unk.digital", + "homepage": "https://github.com/the-unknown-code/vue-unknown", "scripts": { "build": "cross-env NODE_ENV=production node dev-tools/config/scripts/build.js", "analyze": "npm run build -- --analyze", "dev": "cross-env NODE_ENV=development webpack serve --devtool inline-source-map --config dev-tools/config/webpack.config.dev.js", - "preinstall": "npx use-yarn", "prettify": "prettier --write \"src/**/*.{js,ts,scss}\"", "preview": "node dev-tools/config/scripts/preview.js", - "prepare": "husky install", "generate": "node dev-tools/scripts/bin/generate.js", "patch": "npm version patch --no-git-tag-version", "minor": "npm version minor --no-git-tag-version", "major": "npm version major --no-git-tag-version", - "test-routes": "node dev-tools/config/scripts/prerender.routes.js" + "test-routes": "node dev-tools/config/scripts/prerender.routes.js", + "storybook": "start-storybook -p 6006 -s ./.storybook/images", + "build-storybook": "build-storybook" }, "license": "ISC", "main": "src/bootstrap.js", "dependencies": { - "axios": "^0.21.1", + "@vueuse/core": "^8.0.1", "core-js": "^3.10.2", "gsap": "^3.0.0-beta.11", "mitt": "^2.1.0", @@ -29,13 +29,24 @@ "vue": "^3.0.11", "vue-i18n": "^9.1.6", "vue-router": "^4.0.6", - "vuex": "^4.0.0", - "vuex-router-sync": "^6.0.0-rc.1" + "vuex": "^4.0.0" }, "devDependencies": { "@babel/core": "^7.13.15", "@babel/preset-env": "^7.13.15", "@intlify/vue-i18n-loader": "^2.1.0", + "@storybook/addon-actions": "^6.3.7", + "@storybook/addon-docs": "^6.4.0-alpha.33", + "@storybook/addon-essentials": "^6.3.7", + "@storybook/addon-links": "^6.3.7", + "@storybook/addon-postcss": "^2.0.0", + "@storybook/addons": "^6.3.7", + "@storybook/builder-webpack5": "^6.3.7", + "@storybook/manager-webpack5": "^6.3.7", + "@storybook/preset-scss": "^1.0.3", + "@storybook/theming": "^6.3.7", + "@storybook/vue": "^6.3.7", + "@storybook/vue3": "^6.3.7", "@tailwindcss/line-clamp": "^0.2.0", "@tailwindcss/typography": "^0.4.0", "@vue/cli-plugin-babel": "^4.5.12", @@ -74,8 +85,7 @@ "git-revision-webpack-plugin": "^3.0.6", "html-webpack-plugin": "^5.3.1", "http": "^0.0.1-security", - "husky": "^6.0.0", - "image-minimizer-webpack-plugin": "^2.2.0", + "image-minimizer-webpack-plugin": "^3.2.3", "imagemin-gifsicle": "^7.0.0", "imagemin-jpegtran": "^7.0.0", "imagemin-optipng": "^8.0.0", @@ -101,14 +111,14 @@ "stylelint-config-standard": "^21.0.0", "stylelint-scss": "^3.19.0", "svgo-loader": "^3.0.0", - "tailwindcss": "^2.1.2", + "tailwindcss": "^3.0.23", "terser-webpack-plugin": "^5.1.1", "ts-loader": "^9.0.2", "tslint": "^6.1.3", "typescript": "^4.2.4", "url-loader": "^4.1.1", "vue-cli-plugin-i18n": "~2.1.0", - "vue-loader": "^16.2.0", + "vue-loader": "^16.5.0", "vue-style-loader": "^4.1.3", "webpack": "^5.34.0", "webpack-bundle-analyzer": "^4.4.1", @@ -118,4 +128,4 @@ "webpackbar": "^5.0.0-3", "workbox-webpack-plugin": "^6.1.5" } -} +} \ No newline at end of file diff --git a/src/app/App.js b/src/app/App.js index 5990a50..15a9f51 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -1,24 +1,25 @@ -import { defineComponent } from 'vue' -import { mapActions, mapMutations } from 'vuex' -import { SET_STAGE, CHANGE_LOCALE } from '@/store/modules/Application' +import { defineComponent, ref } from 'vue' +import { useStore } from 'vuex' +import { useResizeObserver, useDebounceFn } from '@vueuse/core' +import { SET_STAGE } from '@/store/modules/Application' export default defineComponent({ name: 'App', - created() { - window.addEventListener(this.Events.RESIZE, this.onResizeHandler) - this.onResizeHandler() - }, - methods: { - ...mapActions({ - changeLanguage: CHANGE_LOCALE - }), - ...mapMutations({ - setStage: SET_STAGE - }), - onResizeHandler() { - const { innerWidth, innerHeight } = window - this.setStage({ sw: innerWidth, sh: innerHeight }) - this.$eventBus.$emit(this.Events.RESIZE) + setup() { + const store = useStore() + const app = ref(null) + + // Resize Handler + const onResizeHandler = useDebounceFn((entries) => { + const entry = entries[0] + const { width, height } = entry.contentRect + store.commit(SET_STAGE, { width, height }) + }, 40) + + useResizeObserver(app, onResizeHandler) + + return { + app } } }) diff --git a/src/app/App.vue b/src/app/App.vue index ec35580..86d17ec 100644 --- a/src/app/App.vue +++ b/src/app/App.vue @@ -1,6 +1,7 @@ diff --git a/src/bootstrap.js b/src/bootstrap.js index e39fee7..1adf459 100644 --- a/src/bootstrap.js +++ b/src/bootstrap.js @@ -1,24 +1,18 @@ import '../style/tailwind.scss' import '../style/main.scss' -import axios from 'axios' import { createApp } from 'vue' -import { sync } from 'vuex-router-sync' import router from '@/router' import { RouteNames } from '@/router/routes' import getStore from '@/store' import i18nSetup, { loadLocale } from '@/plugins/i18n' -import vueHead from '@/plugins/vue-head' import InstallPlugin from '@/utils/InstallPlugin' import RegisterPlugin from '@/utils/RegisterPlugin' import WaitForStylesheetsLoaded from '@/utils/WaitForStylesheetsLoaded' -import createPath from '@/utils/RouteUtils' import { getVersioned, getStatic } from '@/utils/AssetPath' -import MediaTracker, { MediaState } from '@/utils/MediaTracker' import config, { Property, Variable, Environment, Theme } from '@/config' import $eventBus, { Events } from '@/events' -import { SET_LOCALE, SET_THEME_MODE } from '@/store/modules/Application' -import directives from '@/directives' +import { SET_LOCALE } from '@/store/modules/Application' import components from '@/components' import App from './app/App.vue' @@ -29,32 +23,21 @@ const store = getStore() const app = createApp(App) // Register global directives and components -RegisterPlugin.registerDirectives(app, directives) RegisterPlugin.registerComponents(app, components) const $devMode = process.env.NODE_ENV === Environment.DEVELOPMENT -const startup = async () => { - sync(store, router) - - // store theme mode - store.commit(SET_THEME_MODE, config.variables[Variable.THEME_MODE]) +const startup = async () => { // store the current locale store.commit(SET_LOCALE, config.properties[Property.DEFAULT_LOCALE]) - app.use(vueHead) app.use(InstallPlugin, { - $http: axios, $vRoot: config.variables[Variable.VERSIONED_STATIC_ROOT], $sRoot: config.variables[Variable.STATIC_ROOT], - $mediaTracker: new MediaTracker(store), $eventBus, $devMode, Events, - Theme, RouteNames, - MediaState, - createPath, getVersioned, getStatic }) diff --git a/src/components/Introduction.stories.mdx b/src/components/Introduction.stories.mdx new file mode 100644 index 0000000..3939612 --- /dev/null +++ b/src/components/Introduction.stories.mdx @@ -0,0 +1,7 @@ +import { Meta } from '@storybook/addon-docs' + + + + + +# Welcome to Vue Unknown Storybook diff --git a/src/components/Utils/DebugInfo/DebugInfo.js b/src/components/Utils/DebugInfo/DebugInfo.js deleted file mode 100644 index a6aed6c..0000000 --- a/src/components/Utils/DebugInfo/DebugInfo.js +++ /dev/null @@ -1,13 +0,0 @@ -// Vue @component -import { defineComponent } from 'vue' -import AbstractComponent from '@/components/AbstractComponent' - -export default defineComponent({ - name: 'DebugInfo', - extends: AbstractComponent, - setup() { - return { - version: `${process.env.VERSION}` - } - } -}) diff --git a/src/components/Utils/DebugInfo/DebugInfo.vue b/src/components/Utils/DebugInfo/DebugInfo.vue deleted file mode 100644 index 780375c..0000000 --- a/src/components/Utils/DebugInfo/DebugInfo.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/src/components/index.js b/src/components/index.js index 05614b9..e4eb16b 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,6 +1,3 @@ // Register global components -import DebugInfo from '@/components/Utils/DebugInfo/DebugInfo.vue' -export default { - DebugInfo -} +export default {} diff --git a/src/config/index.js b/src/config/index.js index faf8e43..4fc0c30 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -48,7 +48,7 @@ export default { [Variable.THEME_MODE_ENABLED]: true, [Variable.THEME_MODE]: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? Theme.DARK : Theme.LIGHT, [Variable.SERVICE_WORKER_ENABLED]: true, - [Variable.LOCALE_ENABLED]: true, + [Variable.LOCALE_ENABLED]: false, [Variable.LOCALE_ROUTING_ENABLED]: true, [Variable.VERSIONED_STATIC_ROOT]: `${window.webpackPublicPath || process.env.PUBLIC_PATH}${process.env.VERSIONED_STATIC_ROOT}`, [Variable.STATIC_ROOT]: `${window.webpackPublicPath || process.env.PUBLIC_PATH}${process.env.STATIC_ROOT}`, diff --git a/src/config/useGlobals.js b/src/config/useGlobals.js new file mode 100644 index 0000000..73e98dc --- /dev/null +++ b/src/config/useGlobals.js @@ -0,0 +1,6 @@ +import { getCurrentInstance } from 'vue' + +export default () => { + const instance = getCurrentInstance() + return instance.appContext.config.globalProperties +} diff --git a/src/directives/ResizeObserver.js b/src/directives/ResizeObserver.js deleted file mode 100644 index 3e3e49d..0000000 --- a/src/directives/ResizeObserver.js +++ /dev/null @@ -1,19 +0,0 @@ -export default { - name: 'ResizeObserver', - // eslint-disable-next-line consistent-return - beforeMount(el, binding) { - if (!binding.value) { - // eslint-disable-next-line no-console - console.warn("Resize function haven't been set") - return false - } - const callback = binding.value - const { $eventBus, Events } = binding.instance - $eventBus.$on(Events.RESIZE, callback) - }, - beforeUnmount(el, binding) { - const callback = binding.value - const { $eventBus, Events } = binding.instance - $eventBus.$off(Events.RESIZE, callback) - } -} diff --git a/src/directives/index.js b/src/directives/index.js deleted file mode 100644 index df7e91a..0000000 --- a/src/directives/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import ResizeObserver from '@/directives/ResizeObserver' - -export default { - ResizeObserver -} diff --git a/src/events/index.js b/src/events/index.js index 715ccac..ef96dd0 100644 --- a/src/events/index.js +++ b/src/events/index.js @@ -10,6 +10,8 @@ export default { } export const Events = { + PAGE_CREATED: 'page-created', CLICK: 'click', - RESIZE: 'resize' + RESIZE: 'resize', + SCROLL: 'scroll' } diff --git a/src/locale/en.json b/src/locale/en.json index 7b1e3f3..9e26dfe 100644 --- a/src/locale/en.json +++ b/src/locale/en.json @@ -1,7 +1 @@ -{ - "title": "Vue Skeleton", - "subtitle": "A Web Framework based on Vue 3", - "description": "Vue skeleton comes packaged with a variety of tools for creating a (multilingual) SPA. The skeleton allows to get up and running in a matter of minutes.", - "documentation": "Documentation", - "author-website": "Author Website" -} \ No newline at end of file +{} \ No newline at end of file diff --git a/src/pages/AbstractPage.js b/src/pages/AbstractPage.js index 79e74e5..6e9d328 100644 --- a/src/pages/AbstractPage.js +++ b/src/pages/AbstractPage.js @@ -11,6 +11,6 @@ export default defineComponent({ }) }, mounted() { - document.dispatchEvent(new Event('page-created')) + document.dispatchEvent(new Event(this.Events.PAGE_CREATED)) } }) diff --git a/src/pages/Homepage/Homepage.vue b/src/pages/Homepage/Homepage.vue index 7023bef..f580838 100644 --- a/src/pages/Homepage/Homepage.vue +++ b/src/pages/Homepage/Homepage.vue @@ -1,26 +1,7 @@ diff --git a/src/plugins/vue-head.js b/src/plugins/vue-head.js deleted file mode 100644 index 961a117..0000000 --- a/src/plugins/vue-head.js +++ /dev/null @@ -1,92 +0,0 @@ -/* eslint-disable func-names */ -/* eslint-disable object-shorthand */ - -/* - * Simplified VueHead based on https://github.com/ktquez/vue-head/blob/master/vue-head.js - */ - -const KeyType = { - TITLE: 'title', - META: 'meta' -} - -const Util = { - abbr: { - ch: 'charset', - n: 'name', - ip: 'itemprop', - c: 'content', - p: 'property', - r: 'rel', - h: 'href', - s: 'src', - a: 'async', - d: 'defer' - }, - - getNode: (node) => document.getElementsByTagName(node)[0], - - prepareElement: function (obj, el) { - Object.keys(obj).forEach((prop) => { - const abbr = this.abbr[prop] || prop - if (abbr.match(/(body|undo|replace)/g)) return - el.setAttribute(abbr, obj[prop]) - }) - - return el - }, - - addNode: function (el, parent) { - parent.appendChild(el) - }, - - [KeyType.TITLE]: function (title) { - if (!title) return - document.title = title - }, - - [KeyType.META]: function (arr, tag, node, update = true) { - if (!arr) return - arr.forEach((obj) => { - const parent = obj.body ? this.getNode('body') : this.getNode(node) - let el = document.getElementById(obj.id) - if (!el) { - el = document.createElement(tag) - // eslint-disable-next-line no-param-reassign - update = false - } - - if (el.hasAttribute('id')) { - this.prepareElement(obj, el) - return - } - - el = this.prepareElement(obj, el) - this.addNode(el, parent) - }) - } -} - -export default { - install: (app) => { - app.mixin({ - // eslint-disable-next-line consistent-return - created() { - const head = typeof this.$options.head === 'function' ? this.$options.head.bind(this)() : this.$options.head - if (!head) return - - Object.keys(head).forEach((key) => { - const prop = head[key] - if (!prop) return - const obj = typeof prop === 'function' ? head[key].bind(this)() : head[key] - if (key === KeyType.TITLE) { - Util[key](obj) - return - } - - Util.meta(obj, key, 'head') - }) - } - }) - } -} diff --git a/src/router/index.js b/src/router/index.js index b85fec1..6d83690 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -59,7 +59,6 @@ const router = createRouter({ if (isLocaleEnabled) { const store = getStore() router.beforeEach(async (to, from, next) => { - console.log(to) if (to.params.lang && availableLanguages.includes(to.params.lang)) { currentLocale = to.params.lang store.dispatch(CHANGE_LOCALE, currentLocale) diff --git a/src/store/modules/Application/index.js b/src/store/modules/Application/index.js index 9a6b935..81becd8 100644 --- a/src/store/modules/Application/index.js +++ b/src/store/modules/Application/index.js @@ -18,14 +18,15 @@ export default { themeMode: null, locale: null, mediaState: null, - sw: window.innerWidth, - sh: window.innerHeight + stage: { + width: window.innerWidth, + height: window.innerHeight + } }, getters: {}, mutations: { - [SET_STAGE](state, { sw, sh }) { - state.sw = sw - state.sh = sh + [SET_STAGE](state, { width, height }) { + state.stage = { width, height } }, [SET_LOCALE](state, locale) { state.locale = locale diff --git a/src/utils/MediaTracker.js b/src/utils/MediaTracker.js deleted file mode 100644 index b943b7b..0000000 --- a/src/utils/MediaTracker.js +++ /dev/null @@ -1,57 +0,0 @@ -import { SET_MEDIA_STATE } from '@/store/modules/Application' - -export const MediaQueries = { - xs: '(max-width: 639px)', - sm: '(min-width: 640px)', - md: '(min-width: 768px)', - lg: '(min-width: 1024px)', - xl: '(min-width: 1280px)' -} - -export const MediaState = { - xs: 1, - sm: 2, - md: 3, - lg: 4, - xl: 5 -} - -export default class MediaTracker { - constructor(store) { - this.$store = store - this.state = MediaState.xs - this.queryList = [] - - Object.keys(MediaQueries).map((prop) => { - this.queryList[MediaQueries[prop]] = false - const mq = window.matchMedia(MediaQueries[prop]) - mq.addListener(this.onMediaStateChange.bind(this)) - this.onMediaStateChange(mq) - return prop - }) - } - - onMediaStateChange({ media, matches }) { - this.queryList[media] = matches - this.getMediaState() - } - - getMediaState() { - let stateProp = 'xs' - - Object.keys(this.queryList).map((query) => { - if (this.queryList[query]) { - Object.keys(MediaQueries).map((prop) => { - if (MediaQueries[prop] === query) { - stateProp = prop - } - return prop - }) - } - return query - }) - - this.state = MediaState[stateProp] - this.$store.commit(SET_MEDIA_STATE, this.state) - } -} diff --git a/static/favicon.png b/static/favicon.png index 9fbf685..72a3ad8 100644 Binary files a/static/favicon.png and b/static/favicon.png differ diff --git a/static/images/vue-skeleton-logo-xs.png b/static/images/vue-skeleton-logo-xs.png deleted file mode 100644 index 2ef4b1e..0000000 Binary files a/static/images/vue-skeleton-logo-xs.png and /dev/null differ diff --git a/static/images/vue-skeleton-logo.png b/static/images/vue-skeleton-logo.png deleted file mode 100644 index f279fe1..0000000 Binary files a/static/images/vue-skeleton-logo.png and /dev/null differ diff --git a/static/images/vue-unknown-logo.png b/static/images/vue-unknown-logo.png new file mode 100644 index 0000000..9ce543f Binary files /dev/null and b/static/images/vue-unknown-logo.png differ diff --git a/style/base/fonts.scss b/style/base/fonts.scss index 6336a08..af4b10c 100644 --- a/style/base/fonts.scss +++ b/style/base/fonts.scss @@ -1,3 +1,4 @@ +/* @font-face { font-family: 'Break'; src: url('./fonts/Break-ExtraLight.woff2') format('woff2'), url('./fonts/Break-ExtraLight.woff') format('woff'); @@ -5,3 +6,4 @@ font-style: normal; font-display: swap; } +*/ diff --git a/style/fonts/Break-ExtraLight.woff b/style/fonts/Break-ExtraLight.woff deleted file mode 100644 index 9a45124..0000000 Binary files a/style/fonts/Break-ExtraLight.woff and /dev/null differ diff --git a/style/fonts/Break-ExtraLight.woff2 b/style/fonts/Break-ExtraLight.woff2 deleted file mode 100644 index 556cd7c..0000000 Binary files a/style/fonts/Break-ExtraLight.woff2 and /dev/null differ diff --git a/style/layout/all.scss b/style/layout/all.scss new file mode 100644 index 0000000..adcea51 --- /dev/null +++ b/style/layout/all.scss @@ -0,0 +1 @@ +@import 'utils'; diff --git a/style/layout/utils.scss b/style/layout/utils.scss new file mode 100644 index 0000000..8337712 --- /dev/null +++ b/style/layout/utils.scss @@ -0,0 +1 @@ +//