diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..5d1263484 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 000000000..95c13c79d --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,20 @@ +module.exports = { + root: true, + env: { + browser: true, + node: true, + }, + parserOptions: { + parser: 'babel-eslint', + }, + extends: [ + '@nuxtjs', + 'prettier', + 'prettier/vue', + 'plugin:prettier/recommended', + 'plugin:nuxt/recommended', + ], + plugins: ['prettier'], + // add your custom rules here + rules: {}, +} diff --git a/.gitignore b/.gitignore index c56949016..e8f682baf 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,90 @@ +# Created by .ignore support plugin (hsz.mobi) +### Node template +# Logs +/logs *.log -.cache -.DS_Store -src/.temp -node_modules -dist +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file .env -.env.* + +# parcel-bundler cache (https://parceljs.org/) +.cache + +# next.js build output +.next + +# nuxt.js build output +.nuxt + +# Nuxt generate +dist + +# vuepress build output +.vuepress/dist + +# Serverless directories +.serverless + +# IDE / Editor +.idea + +# Service worker +sw.* + +# macOS +.DS_Store + +# Vim swap files +*.swp diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..b2095be81 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "semi": false, + "singleQuote": true +} diff --git a/README.md b/README.md deleted file mode 100644 index d51fa73be..000000000 --- a/README.md +++ /dev/null @@ -1,15 +0,0 @@ -### DISCLAIMER -- I use Gridsome for sketching -- It won't be Gridsome after I finish the sketch -- It will be Nuxt -- No, it likely won't be not Nuxt -- Vue has 2 major concepts you need to grasp: components and reactivity. -Catch up on that, and you'll be understanding the code easily -- Node is performant enough, we will apply aggressive Nginx caching to it -to ensure that even more -- SSR is rendering as much HTML on the server as possible and sending -ready to display HTML to the client instead of JS creating it client-side -- Hydration is constructing vDOM from ready-to-display server- -or statically rendered HTML -- vDOM is a representation of DOM created by Vue to batch DOM changes for -performance reason diff --git a/src/assets/images/aof-mini.png b/assets/images/aof-mini.png similarity index 100% rename from src/assets/images/aof-mini.png rename to assets/images/aof-mini.png diff --git a/src/assets/images/avatar.jpg b/assets/images/avatar.jpg similarity index 100% rename from src/assets/images/avatar.jpg rename to assets/images/avatar.jpg diff --git a/src/assets/images/logo.png b/assets/images/logo.png similarity index 100% rename from src/assets/images/logo.png rename to assets/images/logo.png diff --git a/assets/styles/components.scss b/assets/styles/components.scss new file mode 100644 index 000000000..51b45cc94 --- /dev/null +++ b/assets/styles/components.scss @@ -0,0 +1,46 @@ +// Here lies π–„π–Š π•Έπ–†π–—π–Œπ–Žπ–“ π•Έπ–†π–Œπ–Žπ–ˆ +// which allows to have just one wrapper div +.iconified-input { + align-items: center; + display: inline-flex; + flex-direction: row-reverse; + + input { + padding-left: 2.5rem; + + &:hover { + &+svg { + color: var(--color-grey-6); + } + } + + &:focus { + &+svg { + color: var(--color-text); + } + } + } + + svg { + color: var(--color-grey-5); + margin-right: -2rem; + } +} + +.badge { + border-radius: 1rem; + font-size: 0.8rem; + font-weight: bold; + letter-spacing: 0.02rem; + padding: 0.25rem 0.5rem; + + &.red { + background-color: #fed7d7; + color: #9b2c2c; + } + + &.green { + background-color: #c6f6d5; + color: #276749; + } +} diff --git a/assets/styles/global.scss b/assets/styles/global.scss new file mode 100644 index 000000000..321b25533 --- /dev/null +++ b/assets/styles/global.scss @@ -0,0 +1,92 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); + +:root { + /** + * Colors + */ + --color-text: #1a202c; + --color-bg: #ffffff; + + --color-text-inverted: var(--color-bg); + --color-bg-inverted: var(--color-text); + + --color-brand: #4d9227; + + --color-grey-0: #f7fafc; + --color-grey-1: #edf2f7; + --color-grey-2: #e2e8f0; + --color-grey-3: #cbd5e0; + --color-grey-4: #a0aec0; + --color-grey-5: #718096; + --color-grey-6: #4a5568; + --color-grey-7: #2d3748; + + /** + * Sizes + */ + --size-rounded-sm: 0.25rem; + --size-rounded-md: 0.5rem; + --size-rounded-lg: 1rem; + + /** + * Defaults + */ + font-size: 18px; +} + +body { + background-color: var(--color-bg); + color: var(--color-text); + font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, + Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + margin: 0; + padding: 0; +} + +svg { + height: 24px; + width: 24px; +} + +a { + color: inherit; + text-decoration: none; +} + +h2 { + margin-top: 0; + margin-bottom: 1.5rem; +} + +h3 { + margin-top: 1rem; + margin-bottom: 0.5rem; +} + +input { + background: var(--color-bg); + border: 2px solid var(--color-grey-3); + border-radius: var(--size-rounded-sm); + color: var(--color-grey-9); + font-size: 1rem; + padding: 0.5rem 1rem; + width: 100%; + + &:focus, + &:hover { + border-color: var(--color-grey-4); + color: var(--color-text); + + &::placeholder { + color: var(--color-grey-7); + } + } + + &::placeholder { + color: var(--color-grey-6); + } +} + +@import "~assets/styles/layout.scss"; +@import "~assets/styles/utils.scss"; +@import "~assets/styles/components.scss"; diff --git a/assets/styles/layout.scss b/assets/styles/layout.scss new file mode 100644 index 000000000..397d154e7 --- /dev/null +++ b/assets/styles/layout.scss @@ -0,0 +1,9 @@ +.columns { + display: flex; + + @for $i from 1 through 4 { + .column-grow-#{$i} { + flex-grow: $i; + } + } +} diff --git a/assets/styles/utils.scss b/assets/styles/utils.scss new file mode 100644 index 000000000..059ad65ee --- /dev/null +++ b/assets/styles/utils.scss @@ -0,0 +1,3 @@ +.rounded-md { + border-radius: 0.5rem; +} diff --git a/gridsome.config.js b/gridsome.config.js deleted file mode 100644 index 9a199ae03..000000000 --- a/gridsome.config.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - siteName: 'Staging', - plugins: [] -} diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 000000000..29037a628 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "~/*": ["./*"], + "@/*": ["./*"], + "~~/*": ["./*"], + "@@/*": ["./*"] + } + }, + "exclude": ["node_modules", ".nuxt", "dist"] +} diff --git a/src/layouts/Default.vue b/layouts/default.vue similarity index 64% rename from src/layouts/Default.vue rename to layouts/default.vue index 95d36b24d..c2577e0b0 100644 --- a/src/layouts/Default.vue +++ b/layouts/default.vue @@ -2,135 +2,120 @@
--> -
- -
+ diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/favicon.png b/src/favicon.png deleted file mode 100644 index 1f371e256..000000000 Binary files a/src/favicon.png and /dev/null differ diff --git a/src/main.js b/src/main.js deleted file mode 100644 index 7d9c19dbf..000000000 --- a/src/main.js +++ /dev/null @@ -1,6 +0,0 @@ -import DefaultLayout from '~/layouts/Default.vue' -import '~/assets/styles/global.scss' - -export default function (Vue, { router, head, isClient }) { - Vue.component('Layout', DefaultLayout) -} diff --git a/src/pages/Index.vue b/src/pages/Index.vue deleted file mode 100644 index ca21b7ded..000000000 --- a/src/pages/Index.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/pages/dashboard/Analytics.vue b/src/pages/dashboard/Analytics.vue deleted file mode 100644 index f90205a95..000000000 --- a/src/pages/dashboard/Analytics.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 000000000..3632d0c89 Binary files /dev/null and b/static/favicon.ico differ