diff --git a/.gitignore b/.gitignore index a547bf3..99e677f 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,4 @@ dist-ssr *.njsproj *.sln *.sw? +*~ diff --git a/package-lock.json b/package-lock.json index 6aee093..8f654a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "studynotes", "version": "0.0.0", "dependencies": { + "highlight.js": "^11.8.0", "vue": "^3.3.4" }, "devDependencies": { @@ -15,6 +16,7 @@ "sass": "^1.63.6", "typescript": "^5.0.2", "vite": "^4.4.0", + "vite-plugin-mkcert": "^1.16.0", "vue-tsc": "^1.8.3" } }, @@ -386,6 +388,177 @@ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" }, + "node_modules/@octokit/auth-token": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.4.tgz", + "integrity": "sha512-TWFX7cZF2LXoCvdmJWY7XVPi74aSY0+FfBZNSXEXFkMpjcqsQwDSYVv5FhRFaI0V1ECnwbz4j59T/G+rXNWaIQ==", + "dev": true, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@octokit/core": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.2.4.tgz", + "integrity": "sha512-rYKilwgzQ7/imScn3M9/pFfUf4I1AZEH3KhyJmtPdE2zfaXAn2mFfUy4FbKewzc2We5y/LlKLj36fWJLKC2SIQ==", + "dev": true, + "dependencies": { + "@octokit/auth-token": "^3.0.0", + "@octokit/graphql": "^5.0.0", + "@octokit/request": "^6.0.0", + "@octokit/request-error": "^3.0.0", + "@octokit/types": "^9.0.0", + "before-after-hook": "^2.2.0", + "universal-user-agent": "^6.0.0" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@octokit/endpoint": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.6.tgz", + "integrity": "sha512-5L4fseVRUsDFGR00tMWD/Trdeeihn999rTMGRMC1G/Ldi1uWlWJzI98H4Iak5DB/RVvQuyMYKqSK/R6mbSOQyg==", + "dev": true, + "dependencies": { + "@octokit/types": "^9.0.0", + "is-plain-object": "^5.0.0", + "universal-user-agent": "^6.0.0" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@octokit/graphql": { + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.6.tgz", + "integrity": "sha512-Fxyxdy/JH0MnIB5h+UQ3yCoh1FG4kWXfFKkpWqjZHw/p+Kc8Y44Hu/kCgNBT6nU1shNumEchmW/sUO1JuQnPcw==", + "dev": true, + "dependencies": { + "@octokit/request": "^6.0.0", + "@octokit/types": "^9.0.0", + "universal-user-agent": "^6.0.0" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@octokit/openapi-types": { + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-18.0.0.tgz", + "integrity": "sha512-V8GImKs3TeQRxRtXFpG2wl19V7444NIOTDF24AWuIbmNaNYOQMWRbjcGDXV5B+0n887fgDcuMNOmlul+k+oJtw==", + "dev": true + }, + "node_modules/@octokit/plugin-paginate-rest": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-6.1.2.tgz", + "integrity": "sha512-qhrmtQeHU/IivxucOV1bbI/xZyC/iOBhclokv7Sut5vnejAIAEXVcGQeRpQlU39E0WwK9lNvJHphHri/DB6lbQ==", + "dev": true, + "dependencies": { + "@octokit/tsconfig": "^1.0.2", + "@octokit/types": "^9.2.3" + }, + "engines": { + "node": ">= 14" + }, + "peerDependencies": { + "@octokit/core": ">=4" + } + }, + "node_modules/@octokit/plugin-request-log": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz", + "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==", + "dev": true, + "peerDependencies": { + "@octokit/core": ">=3" + } + }, + "node_modules/@octokit/plugin-rest-endpoint-methods": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-7.2.3.tgz", + "integrity": "sha512-I5Gml6kTAkzVlN7KCtjOM+Ruwe/rQppp0QU372K1GP7kNOYEKe8Xn5BW4sE62JAHdwpq95OQK/qGNyKQMUzVgA==", + "dev": true, + "dependencies": { + "@octokit/types": "^10.0.0" + }, + "engines": { + "node": ">= 14" + }, + "peerDependencies": { + "@octokit/core": ">=3" + } + }, + "node_modules/@octokit/plugin-rest-endpoint-methods/node_modules/@octokit/types": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-10.0.0.tgz", + "integrity": "sha512-Vm8IddVmhCgU1fxC1eyinpwqzXPEYu0NrYzD3YZjlGjyftdLBTeqNblRC0jmJmgxbJIsQlyogVeGnrNaaMVzIg==", + "dev": true, + "dependencies": { + "@octokit/openapi-types": "^18.0.0" + } + }, + "node_modules/@octokit/request": { + "version": "6.2.8", + "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.8.tgz", + "integrity": "sha512-ow4+pkVQ+6XVVsekSYBzJC0VTVvh/FCTUUgTsboGq+DTeWdyIFV8WSCdo0RIxk6wSkBTHqIK1mYuY7nOBXOchw==", + "dev": true, + "dependencies": { + "@octokit/endpoint": "^7.0.0", + "@octokit/request-error": "^3.0.0", + "@octokit/types": "^9.0.0", + "is-plain-object": "^5.0.0", + "node-fetch": "^2.6.7", + "universal-user-agent": "^6.0.0" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@octokit/request-error": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.3.tgz", + "integrity": "sha512-crqw3V5Iy2uOU5Np+8M/YexTlT8zxCfI+qu+LxUB7SZpje4Qmx3mub5DfEKSO8Ylyk0aogi6TYdf6kxzh2BguQ==", + "dev": true, + "dependencies": { + "@octokit/types": "^9.0.0", + "deprecation": "^2.0.0", + "once": "^1.4.0" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@octokit/rest": { + "version": "19.0.13", + "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.13.tgz", + "integrity": "sha512-/EzVox5V9gYGdbAI+ovYj3nXQT1TtTHRT+0eZPcuC05UFSWO3mdO9UY1C0i2eLF9Un1ONJkAk+IEtYGAC+TahA==", + "dev": true, + "dependencies": { + "@octokit/core": "^4.2.1", + "@octokit/plugin-paginate-rest": "^6.1.2", + "@octokit/plugin-request-log": "^1.0.4", + "@octokit/plugin-rest-endpoint-methods": "^7.1.2" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@octokit/tsconfig": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@octokit/tsconfig/-/tsconfig-1.0.2.tgz", + "integrity": "sha512-I0vDR0rdtP8p2lGMzvsJzbhdOWy405HcGovrspJ8RRibHnyRgggUSNO5AIox5LmqiwmatHKYsvj6VGFHkqS7lA==", + "dev": true + }, + "node_modules/@octokit/types": { + "version": "9.3.2", + "resolved": "https://registry.npmjs.org/@octokit/types/-/types-9.3.2.tgz", + "integrity": "sha512-D4iHGTdAnEEVsB8fl95m1hiz7D5YiRdQ9b/OEb3BYRVwbLsGHcRVPz+u+BgRLNk0Q0/4iZCBqDN96j2XNxfXrA==", + "dev": true, + "dependencies": { + "@octokit/openapi-types": "^18.0.0" + } + }, "node_modules/@vitejs/plugin-vue": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz", @@ -575,12 +748,35 @@ "node": ">= 8" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "dev": true + }, + "node_modules/axios": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz", + "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==", + "dev": true, + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/before-after-hook": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz", + "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==", + "dev": true + }, "node_modules/binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", @@ -638,6 +834,18 @@ "fsevents": "~2.3.2" } }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dev": true, + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", @@ -649,6 +857,38 @@ "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==", "dev": true }, + "node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "dev": true, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/deprecation": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz", + "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==", + "dev": true + }, "node_modules/esbuild": { "version": "0.18.11", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.11.tgz", @@ -703,6 +943,40 @@ "node": ">=8" } }, + "node_modules/follow-redirects": { + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dev": true, + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -738,6 +1012,14 @@ "he": "bin/he" } }, + "node_modules/highlight.js": { + "version": "11.8.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz", + "integrity": "sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/immutable": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", @@ -786,6 +1068,15 @@ "node": ">=0.12.0" } }, + "node_modules/is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", @@ -809,6 +1100,27 @@ "node": ">=12" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dev": true, + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "9.0.3", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", @@ -824,6 +1136,12 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, "node_modules/muggle-string": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz", @@ -847,6 +1165,26 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/node-fetch": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz", + "integrity": "sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==", + "dev": true, + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, "node_modules/normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -856,6 +1194,15 @@ "node": ">=0.10.0" } }, + "node_modules/once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dev": true, + "dependencies": { + "wrappy": "1" + } + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -900,6 +1247,12 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "dev": true + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -980,6 +1333,12 @@ "node": ">=8.0" } }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", + "dev": true + }, "node_modules/typescript": { "version": "5.1.6", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz", @@ -993,6 +1352,12 @@ "node": ">=14.17" } }, + "node_modules/universal-user-agent": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz", + "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==", + "dev": true + }, "node_modules/vite": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.2.tgz", @@ -1048,6 +1413,24 @@ } } }, + "node_modules/vite-plugin-mkcert": { + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/vite-plugin-mkcert/-/vite-plugin-mkcert-1.16.0.tgz", + "integrity": "sha512-5r+g8SB9wZzLNUFekGwZo3e0P6QlS6rbxK5p9z/itxNAimsYohgjK/YfVPVxM9EuglP9hjridq0lUejo9v1nVg==", + "dev": true, + "dependencies": { + "@octokit/rest": "^19.0.5", + "axios": "^1.2.2", + "debug": "^4.3.4", + "picocolors": "^1.0.0" + }, + "engines": { + "node": ">=v16.7.0" + }, + "peerDependencies": { + "vite": ">=3" + } + }, "node_modules/vue": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz", @@ -1087,6 +1470,28 @@ "typescript": "*" } }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", + "dev": true + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "dev": true, + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, + "node_modules/wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "dev": true + }, "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", diff --git a/package.json b/package.json index 460814d..aa590db 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "dependencies": { + "highlight.js": "^11.8.0", "vue": "^3.3.4" }, "devDependencies": { @@ -16,6 +17,7 @@ "sass": "^1.63.6", "typescript": "^5.0.2", "vite": "^4.4.0", + "vite-plugin-mkcert": "^1.16.0", "vue-tsc": "^1.8.3" } } diff --git a/public/fonts/Basier-Circle-Mono/basiercirclemono-regular-webfont.woff b/public/fonts/Basier-Circle-Mono/basiercirclemono-regular-webfont.woff new file mode 100755 index 0000000..c4e58dc Binary files /dev/null and b/public/fonts/Basier-Circle-Mono/basiercirclemono-regular-webfont.woff differ diff --git a/public/fonts/Basier-Circle-Mono/basiercirclemono-regular-webfont.woff2 b/public/fonts/Basier-Circle-Mono/basiercirclemono-regular-webfont.woff2 new file mode 100755 index 0000000..5deec16 Binary files /dev/null and b/public/fonts/Basier-Circle-Mono/basiercirclemono-regular-webfont.woff2 differ diff --git a/public/fonts/Basier-Circle/basiercircle-medium-webfont.woff b/public/fonts/Basier-Circle/basiercircle-medium-webfont.woff new file mode 100755 index 0000000..a6c7e7a Binary files /dev/null and b/public/fonts/Basier-Circle/basiercircle-medium-webfont.woff differ diff --git a/public/fonts/Basier-Circle/basiercircle-medium-webfont.woff2 b/public/fonts/Basier-Circle/basiercircle-medium-webfont.woff2 new file mode 100755 index 0000000..2e62d4c Binary files /dev/null and b/public/fonts/Basier-Circle/basiercircle-medium-webfont.woff2 differ diff --git a/public/fonts/Basier-Circle/basiercircle-regular-webfont.woff b/public/fonts/Basier-Circle/basiercircle-regular-webfont.woff new file mode 100755 index 0000000..eeed2c9 Binary files /dev/null and b/public/fonts/Basier-Circle/basiercircle-regular-webfont.woff differ diff --git a/public/fonts/Basier-Circle/basiercircle-regular-webfont.woff2 b/public/fonts/Basier-Circle/basiercircle-regular-webfont.woff2 new file mode 100755 index 0000000..a93daad Binary files /dev/null and b/public/fonts/Basier-Circle/basiercircle-regular-webfont.woff2 differ diff --git a/public/fonts/Basier-Circle/basiercircle-regularitalic-webfont.woff b/public/fonts/Basier-Circle/basiercircle-regularitalic-webfont.woff new file mode 100755 index 0000000..83cf8f6 Binary files /dev/null and b/public/fonts/Basier-Circle/basiercircle-regularitalic-webfont.woff differ diff --git a/public/fonts/Basier-Circle/basiercircle-regularitalic-webfont.woff2 b/public/fonts/Basier-Circle/basiercircle-regularitalic-webfont.woff2 new file mode 100755 index 0000000..56223f0 Binary files /dev/null and b/public/fonts/Basier-Circle/basiercircle-regularitalic-webfont.woff2 differ diff --git a/public/fonts/Basier-Circle/basiercircle-semibold-webfont.woff b/public/fonts/Basier-Circle/basiercircle-semibold-webfont.woff new file mode 100755 index 0000000..8b7d729 Binary files /dev/null and b/public/fonts/Basier-Circle/basiercircle-semibold-webfont.woff differ diff --git a/public/fonts/Basier-Circle/basiercircle-semibold-webfont.woff2 b/public/fonts/Basier-Circle/basiercircle-semibold-webfont.woff2 new file mode 100755 index 0000000..321551f Binary files /dev/null and b/public/fonts/Basier-Circle/basiercircle-semibold-webfont.woff2 differ diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/highlight.ts b/src/highlight.ts new file mode 100644 index 0000000..bdbb518 --- /dev/null +++ b/src/highlight.ts @@ -0,0 +1,10 @@ +import 'highlight.js/styles/github.css'; +import hljs from 'highlight.js' + +const highlightAllCodeBlocks = () => { + document.querySelectorAll('pre > code').forEach((el) => { + hljs.highlightElement(el) + }) +} + +export { highlightAllCodeBlocks } diff --git a/src/main.ts b/src/main.ts index 63c7c98..901abfc 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,4 +2,11 @@ import { createApp } from 'vue' import './style/style.scss' import App from './App.vue' -createApp(App).mount('#app') +import { highlightAllCodeBlocks } from '@/highlight.ts' + +addEventListener('load', () => { + highlightAllCodeBlocks() +}) + +const app = createApp(App) +app.mount('#app') diff --git a/src/style/abstracts/_breakpoints.scss b/src/style/abstracts/_breakpoints.scss new file mode 100644 index 0000000..86ce8b4 --- /dev/null +++ b/src/style/abstracts/_breakpoints.scss @@ -0,0 +1,4 @@ +$md: 768px; +$xl: 1200px; +$lg: 992px; +$xl: 1200px; diff --git a/src/style/abstracts/_colors.scss b/src/style/abstracts/_colors.scss new file mode 100644 index 0000000..e98c8b6 --- /dev/null +++ b/src/style/abstracts/_colors.scss @@ -0,0 +1,7 @@ +$tiffany: #63C7B2; +$tiffany-light: #ABDBD4; +$light: #FFF; +$grey-light: #F9F8FA; +$grey: #9C9CA5; +$grey-dark: #454955; +$copy: #0D0A0B; diff --git a/src/style/abstracts/_fonts.scss b/src/style/abstracts/_fonts.scss new file mode 100644 index 0000000..10682a1 --- /dev/null +++ b/src/style/abstracts/_fonts.scss @@ -0,0 +1,41 @@ +@font-face { + font-family: "Basier Circle"; + src: + url("../fonts/Basier-Circle/basiercircle-regular-webfont.woff") format("woff") + url("../fonts/Basier-Circle/basiercircle-regular-webfont.woff2") format("woff2"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: "Basier Circle"; + src: + url("../fonts/Basier-Circle/basiercircle-regularitalic-webfont.woff") format("woff") + url("../fonts/Basier-Circle/basiercircle-regularitalic-webfont.woff2") format("woff2"); + font-weight: 400; + font-style: italic; +} +@font-face { + font-family: "Basier Circle"; + src: + url("../fonts/Basier-Circle/basiercircle-medium-webfont.woff") format("woff") + url("../fonts/Basier-Circle/basiercircle-medium-webfont.woff2") format("woff2"); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: "Basier Circle"; + src: + url("../fonts/Basier-Circle/basiercircle-semibold-webfont.woff") format("woff") + url("../fonts/Basier-Circle/basiercircle-semibold-webfont.woff2") format("woff2"); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: "Basier Circle Mono"; + src: + url("../fonts/Basier-Circle-Mono/basiercirclemono-regular-webfont.woff") format("woff") + url("../fonts/Basier-Circle-Mono/basiercirclemono-regular-webfont.woff2") format("woff2"); + font-weight: 400; + font-style: normal; +} diff --git a/src/style/abstracts/_functions.scss b/src/style/abstracts/_functions.scss new file mode 100644 index 0000000..7abb31f --- /dev/null +++ b/src/style/abstracts/_functions.scss @@ -0,0 +1,11 @@ +@function pow($base, $exponent) { + $value: 1; + + @if $exponent > 0 { + @for $i from 1 through $exponent { + $value: $value * $base; + } + } + + @return $value; +} diff --git a/src/style/abstracts/_index.scss b/src/style/abstracts/_index.scss new file mode 100644 index 0000000..3c79e98 --- /dev/null +++ b/src/style/abstracts/_index.scss @@ -0,0 +1,5 @@ +@forward "colors"; +@forward "sizes"; +@forward "fonts"; +@forward "mixins"; +@forward "functions"; diff --git a/src/style/abstracts/_mixins.scss b/src/style/abstracts/_mixins.scss new file mode 100644 index 0000000..9a3e8cc --- /dev/null +++ b/src/style/abstracts/_mixins.scss @@ -0,0 +1,42 @@ +@use "breakpoints" as bp; +@use "sizes" as *; +@use "colors" as *; + +@mixin sm { @media (max-width: #{$w4}) { @content; } } +@mixin md { @media (max-width: #{bp.$md}) { @content; } } +@mixin md-min { @media (min-width: #{bp.$md}) { @content; } } +@mixin lg { @media (max-width: #{bp.$lg}) { @content; } } +@mixin xl { @media (max-width: #{bp.$xl}) { @content; } } + +@mixin scrollbar( $foreground-color: $grey, $background-color: transparent ) { + // For Chrome & Safari + &::-webkit-scrollbar { + width: 6px; height: 6px; + } + &::-webkit-scrollbar-thumb { + border-radius: 100px; + background: $foreground-color; + } + &::-webkit-scrollbar-track { + background: $background-color; + } + + // Standard version (Firefox only for now) + scrollbar-color: $foreground-color $background-color; +} +@mixin transition( $t, $easing: linear, $property: all) { + transition: $property $t $easing; + -webkit-transition: $property $t $easing; + -moz-transition: $property $t $easing; + -o-transition: $property $t $easing; +} +@mixin box-shadow($x, $y, $blur, $spread, $color) { + -webkit-box-shadow: $x $y $blur $spread $color; + box-shadow: $x $y $blur $spread $color; +} +@mixin background-image($src, $pos: center, $size: auto, $repeat: no-repeat) { + background-image: $src; + background-position: $pos; + background-size: $size; + background-repeat: $repeat; +} diff --git a/src/style/abstracts/_sizes.scss b/src/style/abstracts/_sizes.scss new file mode 100644 index 0000000..b07aaeb --- /dev/null +++ b/src/style/abstracts/_sizes.scss @@ -0,0 +1,13 @@ +// spacing +$lg: 5.33rem; +$md: 4rem; +$sm: 2.66rem; +$xs: 1.88rem; +$xxs: 0.94rem; + +// widths +$whero: 1200px; +$w1: 1090px; +$w2: 900px; +$w3: 650px; +$w4: 500px; diff --git a/src/style/base/_buttons.scss b/src/style/base/_buttons.scss new file mode 100644 index 0000000..e55c5a0 --- /dev/null +++ b/src/style/base/_buttons.scss @@ -0,0 +1,65 @@ +@use "../abstracts" as a; +@use "typography" as *; + +%outline { + border: 2px solid; + background-color: a.$light; +} + +button, +.button { + pointer-events: all; + cursor: pointer; + padding: calc(a.$xxs/2) a.$xxs; + border-radius: 10px; + text-decoration: none; + + @extend %outline; + @include a.transition(0.2s, ease-out); + + &:not(.small) { + padding: a.$xxs a.$xs; + @extend %h6; + + &.large { + padding: a.$xxs a.$sm; + @extend %h4; + + &:not(.fill) { border-width: 3px; } + } + } + + &:hover { + color: lighten(a.$grey-dark, 20%); + border-color: lighten(a.$grey-dark, 20%); + } + + &.color { + color: a.$tiffany; + border-color: a.$tiffany; + + &:not(.fill):hover { + color: lighten(a.$tiffany, 20%); + border-color: lighten(a.$tiffany, 20%); + } + + &.fill { + background-color: a.$tiffany; + + &:hover { background-color: lighten(a.$tiffany, 10%); } + } + } + + &.fill { + border: none; + color: a.$light; + background-color: a.$grey-dark; + + &:hover { background-color: darken(a.$grey-dark, 10%); } + } + + &.disabled { + pointer-events: none; + opacity: 0.3; + } +} diff --git a/src/style/base/_container.scss b/src/style/base/_container.scss new file mode 100644 index 0000000..7b29b8f --- /dev/null +++ b/src/style/base/_container.scss @@ -0,0 +1,60 @@ +@use "../abstracts" as a; + +.c-primary-dark { color: a.$grey; } +.c-primary { color: a.$tiffany; } +.c-secondary { color: a.$copy; } +.c-secondary-light { color: a.$grey; } +.c-light { color: a.$light; } +.c-copy { color: a.$copy; } + +.bg-dark { + background-color: a.$grey; + color: a.$light; +} + +.bg-light { + background-color: a.$light; + color: a.$copy; +} + +.space-lg { padding-bottom: a.$lg; } +.space-md { padding-bottom: a.$md; } +.space-sm { padding-bottom: a.$sm; } +.space-xs { padding-bottom: a.$xs; } +.space-xxs { padding-bottom: a.$xxs; } + +.whero, +.w1, +.w2, +.w3, +.w4 { + max-width: 100%; + margin: 0 auto; +} + +.whero { width: a.$whero; } +.w1 { width: a.$w1; } +.w2 { width: a.$w2; } +.w3 { width: a.$w3; } +.w4 { width: a.$w4; } + +.gutter-xs { + @include a.lg { + padding-right: a.$xs; + padding-left: a.$xs; + } +} + +.center { + display: flex; + flex-direction: row; + justify-content: center; +} + +.hide { display: none; } + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} diff --git a/src/style/base/_index.scss b/src/style/base/_index.scss new file mode 100644 index 0000000..fdfd36a --- /dev/null +++ b/src/style/base/_index.scss @@ -0,0 +1,4 @@ +@forward "buttons"; +@forward "container"; +@forward "typography"; +@forward "tables"; diff --git a/src/style/base/_tables.scss b/src/style/base/_tables.scss new file mode 100644 index 0000000..3525443 --- /dev/null +++ b/src/style/base/_tables.scss @@ -0,0 +1,26 @@ +@use "../abstracts" as a; +@use "typography" as *; + +table { + margin-top: a.$sm; + margin-bottom: a.$sm; + background-color: a.$light; + border-collapse: collapse; + + tbody { + padding: a.$xs; + + tr { + td { + padding: calc(a.$xs / 2); + border: 2px solid #fff; + } + + th { + @extend .h3; + padding: a.$xs calc(a.$xs / 2); + line-height: 1em; + } + } + } +} diff --git a/src/style/base/_typography.scss b/src/style/base/_typography.scss new file mode 100644 index 0000000..0dd6a6d --- /dev/null +++ b/src/style/base/_typography.scss @@ -0,0 +1,198 @@ +@use "../abstracts" as a; + +$type-mult: 1.333; + +%mono { + font-family: "Basier Circle Mono", monospace; + font-size: 0.9rem; +} + +html { + font-family: "Basier Circle", Inter, system-ui, Arial, sans-serif; + font-weight: 400; + font-size: 16px; + color: a.$copy; + + @include a.md { font-size: 14px; } + + @include a.sm { font-size: 12px; } +} + +p, +.copy { + font-size: 1rem; + font-weight: 400; + line-height: 1.6em; + margin-bottom: a.$xxs; + + &.mono, + &.small { @extend %mono; } + &.big { font-size: 1.2rem; } + + @include a.md { font-size: 1.15rem; } + + @include a.sm { font-size: 1.35rem; } +} + +a { + color: a.$grey-dark; + border-bottom: 1.5px solid a.$grey; + text-decoration: none; + transition: 0.25s ease-out; +} + +%lowercase { text-transform: lowercase; } + +%heading { + line-height: 1em; + overflow-wrap: anywhere; + &.light { font-weight: 400; } + + a { + color: inherit; + border-bottom-color: a.$copy; + } +} + +.text, +.article { + %heading { + margin-top: max(a.$xs, 0.15em); + margin-bottom: max(a.$xxs, 0.05em); + } +} + +%h1 { + font-size: calc( a.pow($type-mult, 5) * 1rem); + font-weight: 400; +} +h1, +.h1 { @extend %h1, %heading, %lowercase; } + +%h2 { + font-size: calc( a.pow($type-mult, 4) * 1rem); + font-weight: 600; +} +h2, +.h2 { @extend %h2, %heading, %lowercase; } + +%h3 { + font-size: calc( a.pow($type-mult, 3) * 1rem); + font-weight: 600; +} +h3, +.h3 { @extend %h3, %heading, %lowercase; } + +%h4 { + font-size: calc( a.pow($type-mult, 2) * 1rem); + font-weight: 500; +} +h4, +.h4 { @extend %h4, %heading; } + +%h5 { + font-size: calc( a.pow($type-mult, 1) * 1rem); + font-weight: 600; +} +h5, +.h5 { @extend %h5, %heading; } + +%h6 { + font-size: 1rem; + font-weight: 500; +} +h6, +.h6 { @extend %h6, %heading; } + +.subtitle, +.subtitle * { + @extend %h5; + + line-height: 1.6em; + font-weight: 400; +} + +a:hover { + color: a.$grey; + border-color: a.$grey-light; +} + +b, +.bold { font-weight: 500; } + +em, +i { font-style: italic; } + +.regular { font-weight: 400; } + +%code { + @extend %mono; + color: a.$grey-dark; +} + +/* Inline */ +p, +ul li, +ol li { + code, + .code { + @extend %code; + + padding: calc(a.$xxs / 4) calc(0.75 * a.$xxs); + background-color: a.$grey-light; + border-radius: 2px; + } +} + +pre { + code, + .code { + @extend %code; + + display: block; + overflow: auto; + padding: a.$xs; + color: a.$copy; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + background: a.$grey-light; + border-radius: 5px; + } +} + + +ul { + list-style-type: disc; + + ul { + list-style-type: circle; + ul { list-style-type: revert; } + } +} + +ol { + list-style-type: decimal; + + ol { + list-style-type: lower-alpha; + ol { list-style-type: upper-roman; } + } +} + +ul, +ol { + list-style-position: outside; + padding-left: 1em; + + li { + margin: a.$xxs 0; + + ul, + ol { + margin-left: 1.5em; + } + } +} diff --git a/src/style/layouts/_index.scss b/src/style/layouts/_index.scss new file mode 100644 index 0000000..aad9730 --- /dev/null +++ b/src/style/layouts/_index.scss @@ -0,0 +1,30 @@ +@use "../abstracts" as *; +@use "../base" as *; + +:root { + color-scheme: light; + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; + + > #app { + width: 100%; + + @include md { + padding-top: $lg; + padding-bottom: 0; + } + + @include sm { padding-top: $md; } + } +} diff --git a/src/style/style.scss b/src/style/style.scss index 7294765..a05ffb9 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -1,80 +1,3 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -.card { - padding: 2em; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} +@use "abstracts" as *; +// @use "components" as *; +@use "layouts" as *; diff --git a/tsconfig.json b/tsconfig.json index f82888f..f84f9b1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,25 +1,31 @@ { - "compilerOptions": { - "target": "ES2020", - "useDefineForClassFields": true, - "module": "ESNext", - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "skipLibCheck": true, + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + }, + + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "preserve", + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true - }, - "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], - "references": [{ "path": "./tsconfig.node.json" }] + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + + "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], + "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/tsconfig.node.json b/tsconfig.node.json index 42872c5..8e91e53 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -1,10 +1,15 @@ { - "compilerOptions": { - "composite": true, - "skipLibCheck": true, - "module": "ESNext", - "moduleResolution": "bundler", - "allowSyntheticDefaultImports": true - }, - "include": ["vite.config.ts"] + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + + "include": ["vite.config.ts"] } diff --git a/vite.config.ts b/vite.config.ts index 05c1740..26d9945 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,22 @@ import { defineConfig } from 'vite' +import path from 'path' +import mkcert from 'vite-plugin-mkcert' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [vue()], + base: '', + resolve: { + alias: { + '@': path.resolve(__dirname, '/src'), + }, + }, + server: { + host: true, + https: true, + }, + plugins: [ + mkcert(), + vue() + ], })