From 7db1485762e6e0dbbc3115cccd735c4712d021ae Mon Sep 17 00:00:00 2001 From: the-unknown-code Date: Fri, 11 Jun 2021 16:43:24 +0200 Subject: [PATCH 01/13] clean up --- README.md | 1 - dev-tools/config/webpack.module.optimize.js | 20 +++++++++++--------- package.json | 4 +--- src/bootstrap.js | 5 ----- src/events/index.js | 1 + src/pages/AbstractPage.js | 2 +- static/images/unk-logo.png | Bin 0 -> 4366 bytes 7 files changed, 14 insertions(+), 19 deletions(-) create mode 100644 static/images/unk-logo.png diff --git a/README.md b/README.md index 41411eb..523c772 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,6 @@ - [Service Worker](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) - [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) diff --git a/dev-tools/config/webpack.module.optimize.js b/dev-tools/config/webpack.module.optimize.js index 60f1693..ca8cea0 100644 --- a/dev-tools/config/webpack.module.optimize.js +++ b/dev-tools/config/webpack.module.optimize.js @@ -25,18 +25,20 @@ module.exports = ({ config, isDevelopment }) => (webpackConfig) => ({ ], runtimeChunk: 'single', splitChunks: { + chunks: 'all', + maxInitialRequests: Infinity, + minSize: 0, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, - name: 'vendors', - chunks: 'all', - priority: -10, - reuseExistingChunk: true - }, - default: { - minChunks: 2, - priority: -20, - reuseExistingChunk: true + 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/package.json b/package.json index 1be0be5..d9aae6a 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,6 @@ "license": "ISC", "main": "src/bootstrap.js", "dependencies": { - "axios": "^0.21.1", "core-js": "^3.10.2", "gsap": "^3.0.0-beta.11", "mitt": "^2.1.0", @@ -29,8 +28,7 @@ "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", diff --git a/src/bootstrap.js b/src/bootstrap.js index e39fee7..784fefc 100644 --- a/src/bootstrap.js +++ b/src/bootstrap.js @@ -1,9 +1,7 @@ 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' @@ -34,8 +32,6 @@ 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]) @@ -44,7 +40,6 @@ const startup = async () => { 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), diff --git a/src/events/index.js b/src/events/index.js index 715ccac..182c762 100644 --- a/src/events/index.js +++ b/src/events/index.js @@ -10,6 +10,7 @@ export default { } export const Events = { + PAGE_CREATED: 'page-created', CLICK: 'click', RESIZE: 'resize' } 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/static/images/unk-logo.png b/static/images/unk-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..034d3f4755fb319d6ae500ca052a79308eabeca6 GIT binary patch literal 4366 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 literal 0 HcmV?d00001 From db2c60747078486fe66d59a92abf1ebeab5fa306 Mon Sep 17 00:00:00 2001 From: the-unknown-code <83239498+the-unknown-code@users.noreply.github.com> Date: Wed, 1 Sep 2021 15:40:16 +0200 Subject: [PATCH 02/13] storybook init --- .storybook/main.js | 47 ++++++++++++++++++ .storybook/preview.js | 12 +++++ package.json | 14 +++++- src/components/Introduction.stories.mdx | 5 ++ .../Utils/DebugInfo/DebugInfo.stories.js | 20 ++++++++ src/locale/en.json | 12 ++--- src/pages/Homepage/Homepage.vue | 10 ++-- static/favicon.png | Bin 7646 -> 7153 bytes static/images/vue-skeleton-logo-xs.png | Bin 6927 -> 0 bytes static/images/vue-skeleton-logo.png | Bin 15623 -> 0 bytes static/images/vue-unknown-logo.png | Bin 0 -> 4514 bytes 11 files changed, 107 insertions(+), 13 deletions(-) create mode 100644 .storybook/main.js create mode 100644 .storybook/preview.js create mode 100644 src/components/Introduction.stories.mdx create mode 100644 src/components/Utils/DebugInfo/DebugInfo.stories.js delete mode 100644 static/images/vue-skeleton-logo-xs.png delete mode 100644 static/images/vue-skeleton-logo.png create mode 100644 static/images/vue-unknown-logo.png diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..390be94 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,47 @@ +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-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: [] + } + } + } + ] + }) + + console.log(config.resolve.alias) + return config + } +} diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000..56cfad5 --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,12 @@ +import '../style/tailwind.scss' +import '../style/main.scss' + +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/ + } + } +} diff --git a/package.json b/package.json index 1be0be5..9809ecf 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,9 @@ "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", + "build-storybook": "build-storybook" }, "license": "ISC", "main": "src/bootstrap.js", @@ -36,6 +38,14 @@ "@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-essentials": "^6.3.7", + "@storybook/addon-links": "^6.3.7", + "@storybook/addon-postcss": "^2.0.0", + "@storybook/builder-webpack5": "^6.3.7", + "@storybook/manager-webpack5": "^6.3.7", + "@storybook/preset-scss": "^1.0.3", + "@storybook/vue3": "^6.3.7", "@tailwindcss/line-clamp": "^0.2.0", "@tailwindcss/typography": "^0.4.0", "@vue/cli-plugin-babel": "^4.5.12", @@ -108,7 +118,7 @@ "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", diff --git a/src/components/Introduction.stories.mdx b/src/components/Introduction.stories.mdx new file mode 100644 index 0000000..97de555 --- /dev/null +++ b/src/components/Introduction.stories.mdx @@ -0,0 +1,5 @@ +import { Meta } from '@storybook/addon-docs' + + + +# Welcome to Vue Unknown Storybook diff --git a/src/components/Utils/DebugInfo/DebugInfo.stories.js b/src/components/Utils/DebugInfo/DebugInfo.stories.js new file mode 100644 index 0000000..e56d1e8 --- /dev/null +++ b/src/components/Utils/DebugInfo/DebugInfo.stories.js @@ -0,0 +1,20 @@ +import DebugInfo from './DebugInfo.vue' + +export default { + title: 'Utils/DebugInfo', + component: DebugInfo +} + +const Template = (args) => ({ + // Components used in your story `template` are defined in the `components` object + components: { DebugInfo }, + // The story's `args` need to be mapped into the template through the `setup()` method + setup() { + // Story args can be spread into the returned object + return { ...args } + }, + // Then, the spread values can be accessed directly in the template + template: '' +}) + +export const Default = Template.bind({}) diff --git a/src/locale/en.json b/src/locale/en.json index 7b1e3f3..88c1eda 100644 --- a/src/locale/en.json +++ b/src/locale/en.json @@ -1,7 +1,7 @@ { - "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 + "title": "Vue Unknown", + "subtitle": "A Web Framework based on Vue 3 and TailwindCSS", + "description": "Vue UNK comes packaged with a variety of tools for creating a (multilingual) SPA. The scaffold allows to get up and running in a matter of minutes.", + "documentation": "Documentation", + "author-website": "Author Website" +} diff --git a/src/pages/Homepage/Homepage.vue b/src/pages/Homepage/Homepage.vue index 7023bef..fd7136d 100644 --- a/src/pages/Homepage/Homepage.vue +++ b/src/pages/Homepage/Homepage.vue @@ -1,15 +1,15 @@