mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
Update MeltUI, install MeltUI preprocessor, update Tabs on portfolio for breaking changes.
This commit is contained in:
parent
9d88669526
commit
89b20c86e2
4 changed files with 82 additions and 45 deletions
|
|
@ -19,6 +19,7 @@
|
|||
"@iconify-icons/mdi": "^1.2.47",
|
||||
"@iconify-icons/radix-icons": "^1.2.9",
|
||||
"@iconify-icons/simple-icons": "^1.2.70",
|
||||
"@melt-ui/pp": "^0.1.2",
|
||||
"@playwright/test": "^1.28.1",
|
||||
"@sveltejs/adapter-static": "^2.0.3",
|
||||
"@sveltejs/adapter-vercel": "^1.0.6",
|
||||
|
|
@ -47,6 +48,7 @@
|
|||
"svelte-check": "^3.4.6",
|
||||
"svelte-lazy-loader": "^1.0.0",
|
||||
"svelte-preprocess": "^5.0.4",
|
||||
"svelte-sequential-preprocessor": "^2.0.1",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.2.2",
|
||||
"vanilla-lazyload": "^17.8.4",
|
||||
|
|
@ -56,7 +58,7 @@
|
|||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@melt-ui/svelte": "^0.19.1",
|
||||
"@melt-ui/svelte": "^0.50.0",
|
||||
"@types/nprogress": "^0.2.1",
|
||||
"ioredis": "^5.3.2",
|
||||
"nprogress": "^0.2.0"
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ settings:
|
|||
|
||||
dependencies:
|
||||
'@melt-ui/svelte':
|
||||
specifier: ^0.19.1
|
||||
version: 0.19.1(svelte@4.2.1)
|
||||
specifier: ^0.50.0
|
||||
version: 0.50.0(svelte@4.2.1)
|
||||
'@types/nprogress':
|
||||
specifier: ^0.2.1
|
||||
version: 0.2.1
|
||||
|
|
@ -31,6 +31,9 @@ devDependencies:
|
|||
'@iconify-icons/simple-icons':
|
||||
specifier: ^1.2.70
|
||||
version: 1.2.70
|
||||
'@melt-ui/pp':
|
||||
specifier: ^0.1.2
|
||||
version: 0.1.2(@melt-ui/svelte@0.50.0)(svelte@4.2.1)
|
||||
'@playwright/test':
|
||||
specifier: ^1.28.1
|
||||
version: 1.36.2
|
||||
|
|
@ -115,6 +118,9 @@ devDependencies:
|
|||
svelte-preprocess:
|
||||
specifier: ^5.0.4
|
||||
version: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.30)(sass@1.65.1)(svelte@4.2.1)(typescript@5.2.2)
|
||||
svelte-sequential-preprocessor:
|
||||
specifier: ^2.0.1
|
||||
version: 2.0.1
|
||||
tslib:
|
||||
specifier: ^2.6.2
|
||||
version: 2.6.2
|
||||
|
|
@ -981,15 +987,19 @@ packages:
|
|||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
dev: true
|
||||
|
||||
/@floating-ui/core@1.3.1:
|
||||
resolution: {integrity: sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==}
|
||||
dev: false
|
||||
|
||||
/@floating-ui/dom@1.4.4:
|
||||
resolution: {integrity: sha512-21hhDEPOiWkGp0Ys4Wi6Neriah7HweToKra626CIK712B5m9qkdz54OP9gVldUg+URnBTpv/j/bi/skmGdstXQ==}
|
||||
/@floating-ui/core@1.5.0:
|
||||
resolution: {integrity: sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==}
|
||||
dependencies:
|
||||
'@floating-ui/core': 1.3.1
|
||||
dev: false
|
||||
'@floating-ui/utils': 0.1.4
|
||||
|
||||
/@floating-ui/dom@1.5.3:
|
||||
resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
|
||||
dependencies:
|
||||
'@floating-ui/core': 1.5.0
|
||||
'@floating-ui/utils': 0.1.4
|
||||
|
||||
/@floating-ui/utils@0.1.4:
|
||||
resolution: {integrity: sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==}
|
||||
|
||||
/@humanwhocodes/config-array@0.11.10:
|
||||
resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==}
|
||||
|
|
@ -1103,17 +1113,28 @@ packages:
|
|||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@melt-ui/svelte@0.19.1(svelte@4.2.1):
|
||||
resolution: {integrity: sha512-LjPZWkUxkNbpE7LCarQFDAiBuBWYhse1JB4Kw4JbPT66t+KCPcDlKLzJJQ5AVx8A2Aey1mngAdE1q3zVu4REDA==}
|
||||
/@melt-ui/pp@0.1.2(@melt-ui/svelte@0.50.0)(svelte@4.2.1):
|
||||
resolution: {integrity: sha512-GZeqp7UWLNZUC2dJpREnZrWMR88vy27WO7C3cIBz4KW3/CFD19FjNkd3VbSRfcRryrMkdnEs9nu2VUa8/0u58w==}
|
||||
engines: {pnpm: '>=8.6.3'}
|
||||
peerDependencies:
|
||||
'@melt-ui/svelte': '>= 0.29.0'
|
||||
svelte: ^3.55.0 || ^4.0.0
|
||||
dependencies:
|
||||
'@melt-ui/svelte': 0.50.0(svelte@4.2.1)
|
||||
svelte: 4.2.1
|
||||
dev: true
|
||||
|
||||
/@melt-ui/svelte@0.50.0(svelte@4.2.1):
|
||||
resolution: {integrity: sha512-NcWwxwStXq77/yOuBfnGkuJdUta3M4SwqZECdaRpAQ61BHI3qz7WW2ZM42JmDvGSs9W6ww2kZFNF8XNTO92CdA==}
|
||||
peerDependencies:
|
||||
svelte: '>=3 <5'
|
||||
dependencies:
|
||||
'@floating-ui/core': 1.3.1
|
||||
'@floating-ui/dom': 1.4.4
|
||||
focus-trap: 7.5.2
|
||||
'@floating-ui/core': 1.5.0
|
||||
'@floating-ui/dom': 1.5.3
|
||||
dequal: 2.0.3
|
||||
focus-trap: 7.5.3
|
||||
nanoid: 4.0.2
|
||||
svelte: 4.2.1
|
||||
dev: false
|
||||
|
||||
/@nodelib/fs.scandir@2.1.5:
|
||||
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
|
||||
|
|
@ -2452,11 +2473,10 @@ packages:
|
|||
resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
|
||||
dev: true
|
||||
|
||||
/focus-trap@7.5.2:
|
||||
resolution: {integrity: sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==}
|
||||
/focus-trap@7.5.3:
|
||||
resolution: {integrity: sha512-7UsT/eSJcTPF0aZp73u7hBRTABz26knRRTJfoTGFCQD5mUImLIIOwWWCrtoQdmWa7dykBi6H+Cp5i3S/kvsMeA==}
|
||||
dependencies:
|
||||
tabbable: 6.2.0
|
||||
dev: false
|
||||
|
||||
/follow-redirects@1.15.3:
|
||||
resolution: {integrity: sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==}
|
||||
|
|
@ -3027,7 +3047,6 @@ packages:
|
|||
resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==}
|
||||
engines: {node: ^14 || ^16 || >=18}
|
||||
hasBin: true
|
||||
dev: false
|
||||
|
||||
/napi-build-utils@1.0.2:
|
||||
resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
|
||||
|
|
@ -4219,6 +4238,14 @@ packages:
|
|||
typescript: 5.2.2
|
||||
dev: true
|
||||
|
||||
/svelte-sequential-preprocessor@2.0.1:
|
||||
resolution: {integrity: sha512-N5JqlBni6BzElxmuFrOPxOJnjsxh1cFDACLEVKs8OHBcx8ZNRO1p5SxuQex1m3qbLzAC8G99EHeWcxGkjyKjLQ==}
|
||||
engines: {node: '>=16'}
|
||||
dependencies:
|
||||
svelte: 4.2.1
|
||||
tslib: 2.6.2
|
||||
dev: true
|
||||
|
||||
/svelte@4.2.1:
|
||||
resolution: {integrity: sha512-LpLqY2Jr7cRxkrTc796/AaaoMLF/1ax7cto8Ot76wrvKQhrPmZ0JgajiWPmg9mTSDqO16SSLiD17r9MsvAPTmw==}
|
||||
engines: {node: '>=16'}
|
||||
|
|
@ -4239,7 +4266,6 @@ packages:
|
|||
|
||||
/tabbable@6.2.0:
|
||||
resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
|
||||
dev: false
|
||||
|
||||
/tar-fs@2.1.1:
|
||||
resolution: {integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { createTabs } from '@melt-ui/svelte';
|
||||
import { createTabs, melt } from '@melt-ui/svelte';
|
||||
import GitHub from '@iconify-icons/simple-icons/github';
|
||||
import SEO from '$lib/components/SEO.svelte';
|
||||
import Portfolio from '$lib/components/Portfolio.svelte';
|
||||
|
|
@ -13,24 +13,30 @@
|
|||
import OldWebsite from '$lib/content/portfolio/personal/old-website.md';
|
||||
import ExternalLink from '$lib/components/ExternalLink.svelte';
|
||||
|
||||
const { root, list, content, trigger } = createTabs({
|
||||
value: 'personal',
|
||||
const {
|
||||
elements: { root, list, content, trigger }
|
||||
} = createTabs({
|
||||
defaultValue: 'personal'
|
||||
});
|
||||
|
||||
const triggers = [
|
||||
{ id: 'personal', title: 'Personal Sites' },
|
||||
{ id: 'professional', title: 'Professional Sites'}
|
||||
];
|
||||
</script>
|
||||
|
||||
<SEO title="Portfolio" />
|
||||
|
||||
<h1>Portfolio!</h1>
|
||||
<div {...$root} class="root tab-group">
|
||||
<div {...$list} aria-label="tabs portfolios" class="list tab-list">
|
||||
<button {...$trigger('personal')} use:trigger class="trigger">
|
||||
<h2>Personal Sites</h2>
|
||||
</button>
|
||||
<button {...$trigger('professional')} use:trigger value="professional-sites" class="trigger">
|
||||
<h2>Professional Sites</h2>
|
||||
<div use:melt={$root} class="root tab-group">
|
||||
<div use:melt={$list} aria-label="tabs portfolios" class="list tab-list">
|
||||
{#each triggers as triggerItem}
|
||||
<button use:melt={$trigger(triggerItem.id)} class="trigger" type="button">
|
||||
<h2>{triggerItem.title}</h2>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<div {...$content('personal')} class="content">
|
||||
<div use:melt={$content('personal')} class="content">
|
||||
<Portfolio name="Personal Website"
|
||||
style="max-height: 640px;"
|
||||
src={personalSite}
|
||||
|
|
@ -69,7 +75,7 @@
|
|||
<OldWebsite slot="portfolio-details" />
|
||||
</Portfolio>
|
||||
</div>
|
||||
<div {...$content('professional')} class="content">
|
||||
<div use:melt={$content('professional')} class="content">
|
||||
<Portfolio name="Mark Shellnut Architect"
|
||||
style="max-height: 640px;"
|
||||
src={shellnutArchitectWebsite}
|
||||
|
|
@ -111,17 +117,19 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.trigger[data-state='active'] {
|
||||
& h2 {
|
||||
.trigger {
|
||||
&[data-state='active'] {
|
||||
h2 {
|
||||
border-bottom: 2px solid var(--shellYellow);
|
||||
}
|
||||
}
|
||||
|
||||
.trigger[data-state='inactive'] {
|
||||
& h2 {
|
||||
&[data-state='inactive'] {
|
||||
h2 {
|
||||
border-bottom: 2px solid var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(img) {
|
||||
border-radius: 3px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import adapter from '@sveltejs/adapter-vercel';
|
||||
import { vitePreprocess } from '@sveltejs/kit/vite';
|
||||
import { preprocessMeltUI } from '@melt-ui/pp';
|
||||
import { mdsvex } from 'mdsvex';
|
||||
import mdsvexConfig from './mdsvex.config.js';
|
||||
import relativeImages from 'mdsvex-relative-images';
|
||||
|
|
@ -10,7 +11,7 @@ const config = {
|
|||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
extensions: ['.svelte', ...mdsvexConfig.extensions],
|
||||
preprocess: [vitePreprocess(), mdsvex(mdsvexConfig)],
|
||||
preprocess: [vitePreprocess(), mdsvex(mdsvexConfig), preprocessMeltUI()],
|
||||
vitePlugin: {
|
||||
inspector: true,
|
||||
toggleKeyCombo: 'control-alt-shift'
|
||||
|
|
|
|||
Loading…
Reference in a new issue