diff --git a/.eslintrc.js b/.eslintrc.js index 61ab14be01..30469021af 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -5,6 +5,8 @@ module.exports = { node: true, }, extends: [ + 'plugin:vue/recommended', + 'plugin:prettier-vue/recommended', '@nuxtjs/eslint-config-typescript', 'prettier', 'prettier/vue', diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml new file mode 100644 index 0000000000..6801060984 --- /dev/null +++ b/.github/workflows/nodejs.yml @@ -0,0 +1,27 @@ +# https://github.com/pixijs/pixi.js/blob/dev/.github/workflows/nodejs.yml +# https://github.com/actions/setup-node +name: Node.js CI + +on: + push: + branches: ['**'] + tags: ['**'] + release: + types: ['created'] + pull_request: + branches: ['**'] + +jobs: + build: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [12.x] + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: '12' + - run: yarn + - run: yarn lint + - run: yarn build diff --git a/.lintstagedrc.js b/.lintstagedrc.js index b58e845846..3eddf76e62 100644 --- a/.lintstagedrc.js +++ b/.lintstagedrc.js @@ -1,5 +1,5 @@ module.exports = { - '**/*.{js,ts,md,ts,json,vue}': [ + '**/*.{yml,yaml,js,ts,md,ts,json,vue}': [ 'use-cross-env prettier --ignore-path .prettierignore --ignore-unknown --write', ], '*.{scss,css,vue}': ['yarn run lint:style'], diff --git a/.prettierrc.js b/.prettierrc.js index 3d8bc6df9a..891b778178 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -16,6 +16,12 @@ const main = { proseWrap: 'always', }, }, + { + files: ['*.yaml', '*.yml'], + options: { + proseWrap: 'always', + }, + }, ], } diff --git a/.stylelintrc.js b/.stylelintrc.js new file mode 100644 index 0000000000..98229f62b3 --- /dev/null +++ b/.stylelintrc.js @@ -0,0 +1,8 @@ +/** + * https://stylelint.io/user-guide/configure + */ +const main = { + extends: 'stylelint-config-recommended', +} + +module.exports = main diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 2f4ec3786d..a3b7f00700 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -5,13 +5,15 @@ "dariofuzinato.vue-peek", "dbaeumer.vscode-eslint", "gamunu.vscode-yarn", - "humao.rest-client", "jasonnutter.search-node-modules", "kisstkondoros.vscode-codemetrics", "mrmlnc.vscode-attrs-sorter", "octref.vetur", "sdras.vue-vscode-snippets", "wix.vscode-import-cost", + "bradlc.vscode-tailwindcss", + "austenc.tailwind-docs", + "bourhaouta.tailwindshades", "bradlc.vscode-tailwindcss" ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 2ccbe96b7e..5b6e2d2c8f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -12,6 +12,15 @@ "eslint.enable": true, "eslint.packageManager": "yarn", "eslint.run": "onType", + "files.associations": { + "*.css": "vue-postcss" + }, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, + "[vue-postcss]": { + "breadcrumbs.showVariables": true + }, "[vue]": { "editor.formatOnSave": false }, @@ -34,8 +43,5 @@ ".nuxt/**": true, "dist/**": true, "node_modules": true - }, - "editor.codeActionsOnSave": { - "source.fixAll.eslint": true } } diff --git a/assets/styles/global.css b/assets/styles/global.css new file mode 100644 index 0000000000..dbb71b0c8a --- /dev/null +++ b/assets/styles/global.css @@ -0,0 +1,5 @@ +body { + background-color: var(--bg); + color: var(--color-title); + transition: background-color 0.3s; +} diff --git a/assets/styles/main.css b/assets/styles/main.css index 93e55c5070..7306c38e77 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -2,79 +2,56 @@ @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; -:root { - --color-sandwich-bg: #000; - --color-sandwich-text: #fff; - --color-container: #fff; - --color-backdrop: #e5e5e5; - --bg: var(--color-backdrop); - --color: #577f79; - --color-primary: #214761; - --color-secondary: #bb3f3f; - --color-tertiary: #cb7723; - --bg-secondary: #e5e5e5; - --border-color: #aaa; -} +/* purgecss start ignore */ +@import 'prism-themes/themes/prism-material-oceanic.css'; -.dark-mode { - --color-sandwich-bg: #000; - --color-sandwich-text: #fff; - --color-container: #577f79; - --color-backdrop: #214761; - --bg: var(--color-backdrop); - --color: #f4f7f3; - --color-primary: #577f79; - --color-secondary: #fdf9f3; - --bg-secondary: #214761; - --border-color: #061a17; -} +@import './vars.css'; +@import './global.css'; +@import './nuxt-content.css'; -body { - background-color: var(--bg); - color: var(--color); - transition: background-color 0.3s; +.zone__sandwich { + & .top { + @apply h-20; + } + & .middle { + @apply pt-20 pb-10; + } } -.zone__sandwich__top, -.zone__sandwich__bottom { - background-color: var(--color-sandwich-bg); - color: var(--color-sandwich-text); -} .zone__sandwich__meat { background-color: var(--color-container); } - -.document .title, -.app-side-bar__nav { - @apply italic font-serif; -} - -.taxonomy .taxonomy-label { - @apply sr-only; +.zone__sandwich__top { + background-color: var(--color-sandwich-bg); + color: var(--color-sandwich-text); + & .app-side-bar__nav { + @apply italic font-serif !important; + } } -.taxonomy .taxonomy-items li { - @apply inline-block text-gray-700 bg-gray-200 rounded-full px-3 py-1 mr-2 text-xs; +.zone__sandwich__bottom { + background-color: var(--color-sandwich-bg); + color: var(--color-sandwich-text); } -.document .title { - @apply text-xl; -} -.document .body { - @apply font-light; +.taxonomy { + & .taxonomy-label { + @apply sr-only; + } + & .taxonomy-items { + & li { + @apply inline-block bg-gray-200 rounded-full text-xs; + } + & li:hover { + @apply bg-gray-500; + } + } } -.document .body li { - @apply list-inside; - - color: inherit; -} -.document .body ul { - list-style-type: disc; -} -.document .body ol { - list-style-type: lower-roman; -} -.document .body li, -.document .body blockquote { - @apply pl-4; +.document { + & .title { + @apply italic font-serif text-2xl; + color: var(--color-title); + } } + +/* purgecss end ignore */ diff --git a/assets/styles/nuxt-content.css b/assets/styles/nuxt-content.css new file mode 100644 index 0000000000..dd5f6d7fe7 --- /dev/null +++ b/assets/styles/nuxt-content.css @@ -0,0 +1,97 @@ +/** + * copy-pasta of good starting point nuxt-content nested HTML + * Bookmark: + * - https://github.com/nuxt/content/blob/%40nuxt/content-theme-docs%400.6.0/packages/theme-docs/src/assets/css/main.css#L14-L88 + */ + +.nuxt-content { + @apply break-words font-light; + + & a { + @apply underline text-indigo-500; + } + & a:hover { + @apply text-indigo-800; + } + + & .nuxt-content-highlight { + @apply relative grid; + + /* Style filename span added by @nuxt/content */ + & > .filename { + @apply absolute right-0 top-0 text-gray-100 z-10 font-mono text-sm tracking-tight leading-none mr-4 mt-3; + } + + /* Add top padding to code blocks with filename */ + & > .filename + pre[class*='language-'] { + @apply pt-8 bg-gray-800 static; + } + + & pre { + @apply overflow-scroll break-all; + } + + /* Style copy button added in `pages/_.vue` */ + & > .copy { + @apply hidden absolute right-0 bottom-0 leading-none shadow-lg px-2 py-2 text-white bg-gray-800 text-sm uppercase rounded-md border border-white font-semibold mr-3 mb-3; + + &:hover { + @apply bg-gray-700; + } + + &:focus { + @apply outline-none bg-gray-600; + } + } + &:hover { + & > .copy { + @apply block; + } + } + } + + /** ***** **/ + + & h1, + & h2, + & h3, + & h4, + & h5, + & h6 { + @apply mt-5 mb-2 italic font-serif; + + color: var(--color-subtitle); + } + & h2, + & h1 { + color: var(--color-title); + } + & h2 { + @apply text-2xl; + } + & h3 { + @apply text-xl; + } + & h4, + & h5, + & h6 { + @apply text-lg; + } + & li { + @apply list-inside; + + color: inherit; + } + & ul { + list-style-type: disc; + } + & ol { + @apply italic; + + list-style-type: lower-roman; + } + & li, + & blockquote { + @apply pl-4; + } +} diff --git a/assets/styles/vars.css b/assets/styles/vars.css new file mode 100644 index 0000000000..f1d2b44ac0 --- /dev/null +++ b/assets/styles/vars.css @@ -0,0 +1,30 @@ +:root { + --color-sandwich-bg: #000; + --color-sandwich-text: #fff; + --color-container: #fff; + --color-backdrop: #e5e5e5; + --bg: var(--color-backdrop); + --color: #577f79; + --color-title: #262626; + --color-subtitle: #999; + --color-primary: #214761; + --color-secondary: #bb3f3f; + --color-tertiary: #cb7723; + --bg-secondary: #e5e5e5; + --border-color: #aaa; +} + +.dark-mode { + --color-sandwich-bg: #000; + --color-sandwich-text: #fff; + --color-container: #577f79; + --color-backdrop: #214761; + --bg: var(--color-backdrop); + --color: #f4f7f3; + --color-title: #262626; + --color-subtitle: #999; + --color-primary: #577f79; + --color-secondary: #fdf9f3; + --bg-secondary: #214761; + --border-color: #061a17; +} diff --git a/components/AppArticleTags.vue b/components/AppArticleTags.vue index 8ed78b9c4c..f71d490476 100644 --- a/components/AppArticleTags.vue +++ b/components/AppArticleTags.vue @@ -8,10 +8,8 @@ {{ labeler.label.textContent }}