diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8cbae2dcc4..6521eeb8d1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -352,6 +352,9 @@ importers: '@ianvs/prettier-plugin-sort-imports': specifier: 4.7.0 version: 4.7.0(content-tag@4.0.0)(prettier-plugin-ember-template-tag@2.1.2(prettier@3.7.4))(prettier@3.7.4) + '@poppanator/sveltekit-svg': + specifier: ^6.0.1 + version: 6.0.1(svelte@5.46.0)(vite@7.2.7(@types/node@24.10.3)(jiti@2.6.1)(terser@5.44.1)(yaml@2.8.2)) '@sveltejs/adapter-static': specifier: 3.0.10 version: 3.0.10(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.46.0)(vite@7.2.7(@types/node@24.10.3)(jiti@2.6.1)(terser@5.44.1)(yaml@2.8.2)))(svelte@5.46.0)(vite@7.2.7(@types/node@24.10.3)(jiti@2.6.1)(terser@5.44.1)(yaml@2.8.2))) @@ -2043,6 +2046,21 @@ packages: '@polka/url@1.0.0-next.29': resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==} + '@poppanator/sveltekit-svg@6.0.1': + resolution: {integrity: sha512-XlRiIYQ2WuyJy+9tOXZ4sI5qt/32Gdt+FSqo4Q4XiwuEAXcTqFnpaEcP99rsRNmIvdjyINffSXRterhCA6Lz3w==} + peerDependencies: + svelte: '>=5.x' + vite: '>=5.x || >= 6.x' + + '@rollup/pluginutils@5.1.4': + resolution: {integrity: sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + '@rollup/wasm-node@4.53.4': resolution: {integrity: sha512-DrRa/kpp8buB0tzzmuBom4nCfu1mvGentblZihLsI3BViEUGLkybfZ4w8ro6kDOtdtJGKMIzbsHkeGXpggIaag==} engines: {node: '>=18.0.0', npm: '>=8.0.0'} @@ -3384,6 +3402,10 @@ packages: resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} engines: {node: '>= 0.8'} + commander@11.1.0: + resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==} + engines: {node: '>=16'} + commander@14.0.2: resolution: {integrity: sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==} engines: {node: '>=20'} @@ -3765,6 +3787,10 @@ packages: resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==} engines: {node: '>=8.0.0'} + css-tree@2.2.1: + resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} + css-tree@3.1.0: resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} @@ -3793,6 +3819,10 @@ packages: resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==} engines: {node: '>=8.0.0'} + csso@5.0.5: + resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} + cssom@0.3.8: resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==} @@ -4751,6 +4781,9 @@ packages: resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==} engines: {node: '>=4.0'} + estree-walker@2.0.2: + resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + estree-walker@3.0.3: resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} @@ -6128,6 +6161,9 @@ packages: mdn-data@2.0.14: resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==} + mdn-data@2.0.28: + resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==} + mdn-data@2.0.4: resolution: {integrity: sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==} @@ -7429,6 +7465,9 @@ packages: sax@1.2.4: resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==} + sax@1.4.3: + resolution: {integrity: sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==} + saxes@5.0.1: resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==} engines: {node: '>=10'} @@ -7841,6 +7880,11 @@ packages: deprecated: This SVGO version is no longer supported. Upgrade to v2.x.x. hasBin: true + svgo@4.0.0: + resolution: {integrity: sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==} + engines: {node: '>=16'} + hasBin: true + symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} @@ -10836,6 +10880,21 @@ snapshots: '@polka/url@1.0.0-next.29': {} + '@poppanator/sveltekit-svg@6.0.1(svelte@5.46.0)(vite@7.2.7(@types/node@24.10.3)(jiti@2.6.1)(terser@5.44.1)(yaml@2.8.2))': + dependencies: + '@rollup/pluginutils': 5.1.4 + svelte: 5.46.0 + svgo: 4.0.0 + vite: 7.2.7(@types/node@24.10.3)(jiti@2.6.1)(terser@5.44.1)(yaml@2.8.2) + transitivePeerDependencies: + - rollup + + '@rollup/pluginutils@5.1.4': + dependencies: + '@types/estree': 1.0.8 + estree-walker: 2.0.2 + picomatch: 4.0.3 + '@rollup/wasm-node@4.53.4': dependencies: '@types/estree': 1.0.8 @@ -12637,6 +12696,8 @@ snapshots: dependencies: delayed-stream: 1.0.0 + commander@11.1.0: {} + commander@14.0.2: {} commander@2.20.3: {} @@ -12871,6 +12932,11 @@ snapshots: mdn-data: 2.0.14 source-map: 0.6.1 + css-tree@2.2.1: + dependencies: + mdn-data: 2.0.28 + source-map-js: 1.2.1 + css-tree@3.1.0: dependencies: mdn-data: 2.12.2 @@ -12892,6 +12958,10 @@ snapshots: dependencies: css-tree: 1.1.3 + csso@5.0.5: + dependencies: + css-tree: 2.2.1 + cssom@0.3.8: {} cssom@0.4.4: {} @@ -14520,6 +14590,8 @@ snapshots: estraverse@5.3.0: {} + estree-walker@2.0.2: {} + estree-walker@3.0.3: dependencies: '@types/estree': 1.0.8 @@ -16161,6 +16233,8 @@ snapshots: mdn-data@2.0.14: {} + mdn-data@2.0.28: {} + mdn-data@2.0.4: {} mdn-data@2.12.2: {} @@ -17539,6 +17613,8 @@ snapshots: sax@1.2.4: {} + sax@1.4.3: {} + saxes@5.0.1: dependencies: xmlchars: 2.2.0 @@ -18071,6 +18147,16 @@ snapshots: unquote: 1.1.1 util.promisify: 1.0.1 + svgo@4.0.0: + dependencies: + commander: 11.1.0 + css-select: 5.2.2 + css-tree: 3.1.0 + css-what: 6.2.2 + csso: 5.0.5 + picocolors: 1.1.1 + sax: 1.4.3 + symbol-tree@3.2.4: {} symlink-or-copy@1.3.1: {} diff --git a/svelte/package.json b/svelte/package.json index 4d94e60767..74d68f98e9 100644 --- a/svelte/package.json +++ b/svelte/package.json @@ -19,6 +19,7 @@ "@eslint/compat": "2.0.0", "@eslint/js": "9.39.1", "@ianvs/prettier-plugin-sort-imports": "4.7.0", + "@poppanator/sveltekit-svg": "^6.0.1", "@sveltejs/adapter-static": "3.0.10", "@sveltejs/kit": "2.49.2", "@sveltejs/vite-plugin-svelte": "6.2.1", diff --git a/svelte/src/app.d.ts b/svelte/src/app.d.ts index 520c4217a1..29267b13a3 100644 --- a/svelte/src/app.d.ts +++ b/svelte/src/app.d.ts @@ -1,3 +1,5 @@ +import '@poppanator/sveltekit-svg/dist/svg.d.ts'; + // See https://svelte.dev/docs/kit/types#app.d.ts // for information about these interfaces declare global { diff --git a/svelte/src/lib/assets/lock.svg b/svelte/src/lib/assets/lock.svg new file mode 100644 index 0000000000..6889bf6c56 --- /dev/null +++ b/svelte/src/lib/assets/lock.svg @@ -0,0 +1,3 @@ + + + diff --git a/svelte/src/lib/components/Header.svelte b/svelte/src/lib/components/Header.svelte index cc82d64895..fcda33189d 100644 --- a/svelte/src/lib/components/Header.svelte +++ b/svelte/src/lib/components/Header.svelte @@ -2,6 +2,7 @@ import { resolve } from '$app/paths'; import logo from '$lib/assets/cargo.png'; + import LockIcon from '$lib/assets/lock.svg?component'; // TODO: import ColorSchemeMenu from './ColorSchemeMenu.svelte'; // TODO: import Dropdown from './Dropdown.svelte'; @@ -10,7 +11,6 @@ // TODO: import UserAvatar from './UserAvatar.svelte'; // TODO: import session service - // TODO: import lock icon SVG interface Props { hero?: boolean; @@ -57,7 +57,7 @@ @@ -245,13 +245,11 @@ */ } - /* TODO: uncomment when lock icon is added - .login-icon { + .login-button :global(svg) { width: 1em; margin-right: var(--space-2xs); opacity: 0.5; } - */ /* TODO: uncomment when UserAvatar is implemented .avatar { diff --git a/svelte/vite.config.ts b/svelte/vite.config.ts index ededb7453c..128aedc15d 100644 --- a/svelte/vite.config.ts +++ b/svelte/vite.config.ts @@ -1,9 +1,10 @@ +import svg from '@poppanator/sveltekit-svg'; import { sveltekit } from '@sveltejs/kit/vite'; import { playwright } from '@vitest/browser-playwright'; import { defineConfig } from 'vitest/config'; export default defineConfig({ - plugins: [sveltekit()], + plugins: [sveltekit(), svg()], test: { expect: { requireAssertions: true },