From 7a84d57157f25ea095f634a1ff4a8d17fa3bf909 Mon Sep 17 00:00:00 2001 From: Nicolas LARCHE Date: Tue, 12 Sep 2023 11:51:08 +0200 Subject: [PATCH] Add help --- package.json | 1 + pnpm-lock.yaml | 113 +++++++++++++++++++++++ src/assets/base.css | 35 +++++++ src/components/common/DiveModal.vue | 39 ++++++++ src/components/controls/DiveControls.vue | 7 ++ src/components/controls/DiveHelp.vue | 31 +++++++ src/components/icons/QuestionIcon.vue | 7 ++ vite.config.ts | 3 +- 8 files changed, 235 insertions(+), 1 deletion(-) create mode 100644 src/components/common/DiveModal.vue create mode 100644 src/components/controls/DiveHelp.vue create mode 100644 src/components/icons/QuestionIcon.vue diff --git a/package.json b/package.json index 04ab2b8..43a793a 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "prettier": "^3.0.0", "typescript": "~5.1.6", "vite": "^4.4.9", + "vite-plugin-markdown": "^2.1.0", "vitest": "^0.34.2", "vue-tsc": "^1.8.8" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index df806ab..49dcc96 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -64,6 +64,9 @@ devDependencies: vite: specifier: ^4.4.9 version: 4.4.9(@types/node@18.17.5)(sass@1.66.1) + vite-plugin-markdown: + specifier: ^2.1.0 + version: 2.1.0(vite@4.4.9) vitest: specifier: ^0.34.2 version: 0.34.2(jsdom@22.1.0)(sass@1.66.1) @@ -885,6 +888,12 @@ packages: normalize-path: 3.0.0 picomatch: 2.3.1 + /argparse@1.0.10: + resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==} + dependencies: + sprintf-js: 1.0.3 + dev: true + /argparse@2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} dev: true @@ -1216,6 +1225,18 @@ packages: esutils: 2.0.3 dev: true + /dom-serializer@1.4.1: + resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==} + dependencies: + domelementtype: 2.3.0 + domhandler: 4.3.1 + entities: 2.2.0 + dev: true + + /domelementtype@2.3.0: + resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} + dev: true + /domexception@4.0.0: resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==} engines: {node: '>=12'} @@ -1223,6 +1244,21 @@ packages: webidl-conversions: 7.0.0 dev: true + /domhandler@4.3.1: + resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==} + engines: {node: '>= 4'} + dependencies: + domelementtype: 2.3.0 + dev: true + + /domutils@2.8.0: + resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==} + dependencies: + dom-serializer: 1.4.1 + domelementtype: 2.3.0 + domhandler: 4.3.1 + dev: true + /editorconfig@1.0.4: resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==} engines: {node: '>=14'} @@ -1234,6 +1270,14 @@ packages: semver: 7.5.4 dev: true + /entities@2.1.0: + resolution: {integrity: sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==} + dev: true + + /entities@2.2.0: + resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==} + dev: true + /entities@4.5.0: resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} engines: {node: '>=0.12'} @@ -1472,6 +1516,12 @@ packages: eslint-visitor-keys: 3.4.3 dev: true + /esprima@4.0.1: + resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==} + engines: {node: '>=4'} + hasBin: true + dev: true + /esquery@1.5.0: resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==} engines: {node: '>=0.10'} @@ -1616,6 +1666,12 @@ packages: mime-types: 2.1.35 dev: true + /front-matter@4.0.2: + resolution: {integrity: sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==} + dependencies: + js-yaml: 3.14.1 + dev: true + /fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} dev: true @@ -1806,6 +1862,15 @@ packages: whatwg-encoding: 2.0.0 dev: true + /htmlparser2@6.1.0: + resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==} + dependencies: + domelementtype: 2.3.0 + domhandler: 4.3.1 + domutils: 2.8.0 + entities: 2.2.0 + dev: true + /http-proxy-agent@5.0.0: resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==} engines: {node: '>= 6'} @@ -2071,6 +2136,14 @@ packages: nopt: 6.0.0 dev: true + /js-yaml@3.14.1: + resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==} + hasBin: true + dependencies: + argparse: 1.0.10 + esprima: 4.0.1 + dev: true + /js-yaml@4.1.0: resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==} hasBin: true @@ -2150,6 +2223,12 @@ packages: type-check: 0.4.0 dev: true + /linkify-it@3.0.3: + resolution: {integrity: sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==} + dependencies: + uc.micro: 1.0.6 + dev: true + /load-json-file@4.0.0: resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==} engines: {node: '>=4'} @@ -2199,6 +2278,21 @@ packages: dependencies: '@jridgewell/sourcemap-codec': 1.4.15 + /markdown-it@12.3.2: + resolution: {integrity: sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==} + hasBin: true + dependencies: + argparse: 2.0.1 + entities: 2.1.0 + linkify-it: 3.0.3 + mdurl: 1.0.1 + uc.micro: 1.0.6 + dev: true + + /mdurl@1.0.1: + resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==} + dev: true + /memorystream@0.3.1: resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==} engines: {node: '>= 0.10.0'} @@ -2834,6 +2928,10 @@ packages: resolution: {integrity: sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w==} dev: true + /sprintf-js@1.0.3: + resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==} + dev: true + /stackback@0.0.2: resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} dev: true @@ -3068,6 +3166,10 @@ packages: engines: {node: '>=14.17'} hasBin: true + /uc.micro@1.0.6: + resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==} + dev: true + /ufo@1.3.0: resolution: {integrity: sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==} dev: true @@ -3137,6 +3239,17 @@ packages: - terser dev: true + /vite-plugin-markdown@2.1.0(vite@4.4.9): + resolution: {integrity: sha512-eWLlrWzYZXEX3/HaXZo/KLjRpO72IUhbgaoFrbwB07ueXi6QfwqrgdZQfUcXTSofJCkN7GhErMC1K1RTAE0gGQ==} + peerDependencies: + vite: ^2.0.0 || ^3.0.0 + dependencies: + front-matter: 4.0.2 + htmlparser2: 6.1.0 + markdown-it: 12.3.2 + vite: 4.4.9(@types/node@18.17.5)(sass@1.66.1) + dev: true + /vite@4.4.9(@types/node@18.17.5)(sass@1.66.1): resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==} engines: {node: ^14.18.0 || >=16.0.0} diff --git a/src/assets/base.css b/src/assets/base.css index b5346c3..bd91a51 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -71,3 +71,38 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + +h1 { + font-size: 2.2em; + margin-top: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 12px; + margin-top: 24px; +} + +h1, +h2, +h3, +h4, +h5, +h6, +b, +strong, +th { + font-weight: 600; +} + +blockquote, +q { + border-left: 4px solid rgb(47, 168, 239); + margin: 1.5em 0; + padding: 0.5em 1em; + font-style: italic; +} diff --git a/src/components/common/DiveModal.vue b/src/components/common/DiveModal.vue new file mode 100644 index 0000000..49231e0 --- /dev/null +++ b/src/components/common/DiveModal.vue @@ -0,0 +1,39 @@ + + + + + \ No newline at end of file diff --git a/src/components/controls/DiveControls.vue b/src/components/controls/DiveControls.vue index 52a9b4d..8c76cbd 100644 --- a/src/components/controls/DiveControls.vue +++ b/src/components/controls/DiveControls.vue @@ -3,6 +3,7 @@ import ManoMeter from './ManoMeter.vue'; import BuoyancyControlDevice from './BuoyancyControlDevice.vue'; import FlotabilityIndicator from './FlotabilityIndicator.vue'; import DiveComputer from './DiveComputer.vue'; +import DiveHelp from './DiveHelp.vue'; @@ -18,6 +20,7 @@ import DiveComputer from './DiveComputer.vue'; z-index: 1; position: absolute; width: 100%; + height: 100vh; display: grid; grid-template-columns: 1fr 4fr 1fr; grid-template-rows: repeat(4, 1fr); @@ -42,4 +45,8 @@ import DiveComputer from './DiveComputer.vue'; .thirdLeft { grid-area: 3 / 1 / 4 / 2; } + +.bottomLeft { + grid-area: 4 / 5 / 5 / 6; +} \ No newline at end of file diff --git a/src/components/controls/DiveHelp.vue b/src/components/controls/DiveHelp.vue new file mode 100644 index 0000000..845f81e --- /dev/null +++ b/src/components/controls/DiveHelp.vue @@ -0,0 +1,31 @@ + + + + + \ No newline at end of file diff --git a/src/components/icons/QuestionIcon.vue b/src/components/icons/QuestionIcon.vue new file mode 100644 index 0000000..28b5b43 --- /dev/null +++ b/src/components/icons/QuestionIcon.vue @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 1e5b619..8edf881 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,11 +2,12 @@ import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' +import mdPlugin, { Mode } from 'vite-plugin-markdown' // https://vitejs.dev/config/ export default defineConfig({ base: '/deep-dive/', - plugins: [vue()], + plugins: [vue(), mdPlugin({ mode: [Mode.VUE] })], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url))