fonts+theminhg
This commit is contained in:
nicwands
parent
e219b7fce5
commit
ea19ac6189
25 changed files with 588 additions and 90 deletions
1
.env
1
.env
|
|
@ -0,0 +1 @@
|
|||
VITE_STRAPI_API_TOKEN=5934fb84b89fdca49ef58e4f493381848289fcfb09a5664c5a61d4673a6b81b10bdf1d364fa250d185049c14487b7297758c3653dbf37390f567d6d08d559b4c40aaf4dc10730a60b98011d6dc0553f2bd633b373739579d579e39a162f67ca6d8f0e5c5adb3537a7e94b303d79c4cb7f3f877e39158e37e5bd6838596ee9afe
|
||||
290
package-lock.json
generated
290
package-lock.json
generated
|
|
@ -9,6 +9,7 @@
|
|||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@fuzzco/font-loader": "^1.0.2",
|
||||
"@strapi/client": "^1.6.2",
|
||||
"@unhead/vue": "^2.0.19",
|
||||
"@vueuse/core": "^14.1.0",
|
||||
"gsap": "^3.13.0",
|
||||
|
|
@ -20,7 +21,8 @@
|
|||
"unplugin-vue-components": "^30.0.0",
|
||||
"vite-ssg": "^28.2.2",
|
||||
"vue": "^3.5.22",
|
||||
"vue-router": "^4.6.3"
|
||||
"vue-router": "^4.6.3",
|
||||
"vue-strapi-blocks-renderer": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
|
|
@ -1834,6 +1836,19 @@
|
|||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@strapi/client": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmjs.org/@strapi/client/-/client-1.6.2.tgz",
|
||||
"integrity": "sha512-yISbChmwyp0Br1i8iafli38SGy1um9vqN7tzzEHyehrQsx1rkVe1r5Wkgd1DOAYtJcMnH7QmX/owSrHqN4rHEw==",
|
||||
"license": "SEE LICENSE IN LICENSE",
|
||||
"dependencies": {
|
||||
"debug": "4.4.3",
|
||||
"qs": "6.15.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.18.2 <=24.x.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
|
||||
|
|
@ -2257,6 +2272,35 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bind-apply-helpers": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
||||
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bound": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
|
||||
"integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.2",
|
||||
"get-intrinsic": "^1.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/camel-case": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
|
||||
|
|
@ -2348,7 +2392,6 @@
|
|||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
|
||||
"integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"mdn-data": "2.27.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
|
|
@ -2486,6 +2529,20 @@
|
|||
"tslib": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"gopd": "^1.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.365",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.365.tgz",
|
||||
|
|
@ -2515,6 +2572,36 @@
|
|||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/es-define-property": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
|
||||
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-errors": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
|
||||
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-object-atoms": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
|
||||
"integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.27.7",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz",
|
||||
|
|
@ -2615,6 +2702,15 @@
|
|||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/gensync": {
|
||||
"version": "1.0.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
|
||||
|
|
@ -2625,6 +2721,55 @@
|
|||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/get-intrinsic": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
|
||||
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.2",
|
||||
"es-define-property": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"es-object-atoms": "^1.1.1",
|
||||
"function-bind": "^1.1.2",
|
||||
"get-proto": "^1.0.1",
|
||||
"gopd": "^1.2.0",
|
||||
"has-symbols": "^1.1.0",
|
||||
"hasown": "^2.0.2",
|
||||
"math-intrinsics": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dunder-proto": "^1.0.1",
|
||||
"es-object-atoms": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/gopd": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
|
||||
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/gsap": {
|
||||
"version": "3.15.0",
|
||||
"resolved": "https://registry.npmjs.org/gsap/-/gsap-3.15.0.tgz",
|
||||
|
|
@ -2640,6 +2785,30 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/has-symbols": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
|
||||
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/hasown": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
|
||||
"integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/hookable": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/hookable/-/hookable-6.1.1.tgz",
|
||||
|
|
@ -2987,6 +3156,15 @@
|
|||
"@jridgewell/sourcemap-codec": "^1.5.5"
|
||||
}
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.27.1",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
|
||||
|
|
@ -3083,6 +3261,18 @@
|
|||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/object-inspect": {
|
||||
"version": "1.13.4",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
|
||||
"integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/obug": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
|
||||
|
|
@ -3275,6 +3465,21 @@
|
|||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/qs": {
|
||||
"version": "6.15.2",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
|
||||
"integrity": "sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"side-channel": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/quansync": {
|
||||
"version": "0.2.11",
|
||||
"resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
|
||||
|
|
@ -3760,6 +3965,78 @@
|
|||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/side-channel": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
|
||||
"integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"object-inspect": "^1.13.3",
|
||||
"side-channel-list": "^1.0.0",
|
||||
"side-channel-map": "^1.0.1",
|
||||
"side-channel-weakmap": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/side-channel-list": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
|
||||
"integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"object-inspect": "^1.13.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/side-channel-map": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
|
||||
"integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bound": "^1.0.2",
|
||||
"es-errors": "^1.3.0",
|
||||
"get-intrinsic": "^1.2.5",
|
||||
"object-inspect": "^1.13.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/side-channel-weakmap": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
|
||||
"integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bound": "^1.0.2",
|
||||
"es-errors": "^1.3.0",
|
||||
"get-intrinsic": "^1.2.5",
|
||||
"object-inspect": "^1.13.3",
|
||||
"side-channel-map": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/sirv": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
|
||||
|
|
@ -4389,6 +4666,15 @@
|
|||
"vue": "^3.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-strapi-blocks-renderer": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-strapi-blocks-renderer/-/vue-strapi-blocks-renderer-1.1.1.tgz",
|
||||
"integrity": "sha512-75pbCMEZHvR9Y+kvtAZfNgbrAIx0y5Rg428klsuwaJKkc6pcNiCpOLsEFBx07yWHplyOifjJfHgqYa3QQmGyBg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"vue": ">=3.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/w3c-xmlserializer": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@fuzzco/font-loader": "^1.0.2",
|
||||
"@strapi/client": "^1.6.2",
|
||||
"@unhead/vue": "^2.0.19",
|
||||
"@vueuse/core": "^14.1.0",
|
||||
"gsap": "^3.13.0",
|
||||
|
|
@ -30,7 +31,8 @@
|
|||
"unplugin-vue-components": "^30.0.0",
|
||||
"vite-ssg": "^28.2.2",
|
||||
"vue": "^3.5.22",
|
||||
"vue-router": "^4.6.3"
|
||||
"vue-router": "^4.6.3",
|
||||
"vue-strapi-blocks-renderer": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
BIN
public/fonts/ibm-plex-mono-italic.woff
Normal file
BIN
public/fonts/ibm-plex-mono-italic.woff
Normal file
Binary file not shown.
BIN
public/fonts/ibm-plex-mono-italic.woff2
Normal file
BIN
public/fonts/ibm-plex-mono-italic.woff2
Normal file
Binary file not shown.
BIN
public/fonts/ibm-plex-mono.woff
Normal file
BIN
public/fonts/ibm-plex-mono.woff
Normal file
Binary file not shown.
BIN
public/fonts/ibm-plex-mono.woff2
Normal file
BIN
public/fonts/ibm-plex-mono.woff2
Normal file
Binary file not shown.
BIN
public/fonts/liberation-sans-italic.woff
Normal file
BIN
public/fonts/liberation-sans-italic.woff
Normal file
Binary file not shown.
BIN
public/fonts/liberation-sans-italic.woff2
Normal file
BIN
public/fonts/liberation-sans-italic.woff2
Normal file
Binary file not shown.
BIN
public/fonts/liberation-sans.woff
Normal file
BIN
public/fonts/liberation-sans.woff
Normal file
Binary file not shown.
BIN
public/fonts/liberation-sans.woff2
Normal file
BIN
public/fonts/liberation-sans.woff2
Normal file
Binary file not shown.
BIN
public/images/output_pixelated.gif
Normal file
BIN
public/images/output_pixelated.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
|
|
@ -24,8 +24,14 @@ onMounted(async () => {
|
|||
// Load fonts
|
||||
loadFonts([
|
||||
{
|
||||
name: 'Office Times',
|
||||
name: 'Liberation Sans',
|
||||
weights: [400],
|
||||
styles: ['normal', 'italic'],
|
||||
},
|
||||
{
|
||||
name: 'IBM Plex Mono',
|
||||
weights: [400],
|
||||
styles: ['normal', 'italic'],
|
||||
},
|
||||
])
|
||||
.then(() => {
|
||||
|
|
|
|||
1
src/components.d.ts
vendored
1
src/components.d.ts
vendored
|
|
@ -19,5 +19,6 @@ declare module 'vue' {
|
|||
MosaicViewport: typeof import('./components/MosaicViewport.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SiteHeader: typeof import('./components/site/Header.vue')['default']
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import _shuffle from 'lodash/shuffle'
|
||||
import { useMosaicLayout } from '@/composables/useMosaicLayout'
|
||||
|
||||
// Initialize mosaic layout generator
|
||||
|
|
@ -28,15 +29,19 @@ const generateGifContent = (cell) => {
|
|||
id: `gif-${cell.id}`,
|
||||
width: Math.floor(cell.width),
|
||||
height: Math.floor(cell.height),
|
||||
note: 'Curabitur euismod ultrices porttitor. Vivamus magna sapien, pretium at ullamcorper semper, sollicitudin et magna. Curabitur eget dolor a neque facilisis semper. Pellentesque euismod luctus urna, non aliquam justo aliquet id. Vestibulum quis lobortis diam.Nulla facilisi. Phasellus et rutrum lectus.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent mattis felis condimentum, gravida lacus id, pretium neque. Donec cursus augue a dui placerat porttitor.Vestibulum rhoncus lectus nisl, nec gravida ex sollicitudin vel. Etiam dictum ac lacus ac elementum. Donec turpis eros, aliquam in nibh a, posuere tristique neque. Nunc cursus molestie consectetur.Integer placerat lorem eu nunc semper porta.',
|
||||
note: _shuffle(
|
||||
'curabitur euismod ultrices porttitor. Vivamus magna sapien, pretium at ullamcorper semper, sollicitudin et magna curabitur eget dolor a neque facilisis semper pellentesque euismod luctus urna, non aliquam justo aliquet id vestibulum quis lobortis diam nulla facilisi phasellus et rutrum lectus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent mattis felis condimentum, gravida lacus id, pretium neque. Donec cursus augue a dui placerat porttitor.Vestibulum rhoncus lectus nisl, nec gravida ex sollicitudin vel etiam dictum ac lacus ac elementum donec turpis eros, aliquam in nibh a, posuere tristique neque. Nunc cursus molestie consectetur.Integer placerat lorem eu nunc semper porta.'.split(
|
||||
' ',
|
||||
),
|
||||
).join(' '),
|
||||
}
|
||||
}
|
||||
|
||||
// Generate mosaic content for each viewport
|
||||
const generateMosaicContent = async (index) => {
|
||||
// Calculate target number of cells based on viewport size and index
|
||||
const baseCellCount = 9
|
||||
const variance = Math.abs(index % 3) * 2
|
||||
const baseCellCount = 6
|
||||
const variance = Math.abs(index % 2) * 2
|
||||
const targetCells = baseCellCount + variance
|
||||
|
||||
// Generate layout with different parameters based on viewport index
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div class="layout">
|
||||
<site-header />
|
||||
|
||||
<main class="main-content">
|
||||
<infinite-scroll-demo />
|
||||
</main>
|
||||
|
|
@ -26,5 +28,14 @@ useSeoMeta({
|
|||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div {
|
||||
background: var(--theme-bg);
|
||||
color: var(--theme-fg);
|
||||
|
||||
code {
|
||||
background: var(--grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
59
src/components/site/Header.vue
Normal file
59
src/components/site/Header.vue
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<header class="site-header">
|
||||
<img class="logo" src="/images/output_pixelated.gif" />
|
||||
|
||||
<div class="info theme-red">
|
||||
<p class="h6">Nic Wands</p>
|
||||
<p class="description p-small">
|
||||
Amet proin sit eleifend enim. Sit cursus nec vel donec odio
|
||||
nullam placerat.
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<dl>
|
||||
<dt>Contact:</dt>
|
||||
<dd>nic@nicwands.com</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="scss">
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
padding: desktop-vw(27px);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
> * {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: desktop-vw(93px);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.info {
|
||||
background: var(--theme-bg);
|
||||
color: var(--theme-fg);
|
||||
width: desktop-vw(173px);
|
||||
border-radius: desktop-vw(10px);
|
||||
padding: desktop-vw(12px) desktop-vw(10px);
|
||||
|
||||
.description {
|
||||
margin: desktop-vw(6px) 0 desktop-vw(18px);
|
||||
}
|
||||
hr {
|
||||
border: 1px dashed currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -169,7 +169,7 @@ export const useInfiniteScroll = (options = {}) => {
|
|||
|
||||
// Calculate total height needed to accommodate all viewports
|
||||
// Add extra buffer above and below for infinite scroll
|
||||
const bufferViewports = 8
|
||||
const bufferViewports = 10
|
||||
const totalRange = maxIndex + bufferViewports
|
||||
state.totalHeight = totalRange * vpHeight.value
|
||||
}
|
||||
|
|
|
|||
109
src/libs/strapi.js
Normal file
109
src/libs/strapi.js
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import { strapi } from '@strapi/client'
|
||||
|
||||
export const strapiClient = strapi({
|
||||
baseURL: 'https://cms.nicwands.com/api',
|
||||
auth: import.meta.env.VITE_STRAPI_API_TOKEN,
|
||||
})
|
||||
|
||||
/**
|
||||
* Enhanced fetch function with preview support
|
||||
* @param {string} contentType - The Strapi content type (e.g., 'global', 'articles')
|
||||
* @param {object} options - Fetch options including preview settings
|
||||
* @param {boolean} options.isPreview - Whether this is a preview request
|
||||
* @param {string} options.status - Content status ('draft' or 'published')
|
||||
* @param {boolean} options.isSingle - Whether this is a single type or collection
|
||||
* @param {object} options.params - Additional query parameters
|
||||
* @returns {Promise} Strapi response
|
||||
*/
|
||||
export const fetchWithPreview = async (contentType, options = {}) => {
|
||||
const {
|
||||
isPreview = false,
|
||||
status = 'published',
|
||||
isSingle = false,
|
||||
params = {},
|
||||
...otherOptions
|
||||
} = options
|
||||
|
||||
const queryParams = { ...params }
|
||||
const headers = {}
|
||||
|
||||
// Add status parameter for draft content in preview mode
|
||||
if (isPreview && status) {
|
||||
queryParams.status = status
|
||||
}
|
||||
|
||||
// Enable content source maps for Live Preview
|
||||
if (isPreview) {
|
||||
headers['strapi-encode-source-maps'] = 'true'
|
||||
}
|
||||
|
||||
// Disable caching for preview requests
|
||||
if (isPreview) {
|
||||
headers['Cache-Control'] = 'no-cache'
|
||||
}
|
||||
|
||||
try {
|
||||
if (isSingle) {
|
||||
const manager = strapiClient.single(contentType)
|
||||
return await manager.find(queryParams, { headers, ...otherOptions })
|
||||
} else {
|
||||
const manager = strapiClient.collection(contentType)
|
||||
return await manager.find(queryParams, { headers, ...otherOptions })
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error fetching ${contentType}:`, error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch global content with preview support
|
||||
*/
|
||||
export const getGlobal = async (previewOptions = {}) => {
|
||||
return await fetchWithPreview('global', {
|
||||
isSingle: true,
|
||||
...previewOptions,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch a collection item by slug with preview support
|
||||
*/
|
||||
export const getBySlug = async (contentType, slug, previewOptions = {}) => {
|
||||
return await fetchWithPreview(contentType, {
|
||||
isSingle: false,
|
||||
params: {
|
||||
filters: { slug: { $eq: slug } },
|
||||
populate: '*',
|
||||
},
|
||||
...previewOptions,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch a single item by document ID (useful for preview)
|
||||
*/
|
||||
export const getByDocumentId = async (
|
||||
contentType,
|
||||
documentId,
|
||||
previewOptions = {},
|
||||
) => {
|
||||
const { isSingle = false } = previewOptions
|
||||
|
||||
if (isSingle) {
|
||||
return await fetchWithPreview(contentType, {
|
||||
isSingle: true,
|
||||
params: { documentId },
|
||||
...previewOptions,
|
||||
})
|
||||
} else {
|
||||
return await fetchWithPreview(contentType, {
|
||||
isSingle: false,
|
||||
params: {
|
||||
filters: { documentId: { $eq: documentId } },
|
||||
populate: '*',
|
||||
},
|
||||
...previewOptions,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,8 @@
|
|||
const colors = {
|
||||
black: '#000000',
|
||||
white: '#d9d9d9',
|
||||
pink: '#DAC3C3',
|
||||
green: '#D8E3D3',
|
||||
cream: '#F2F1F1',
|
||||
grey: '#2B2B2B',
|
||||
black: '#2b2b2b',
|
||||
white: '#eeeeee',
|
||||
grey: '#494949',
|
||||
red: '#ff1a1a',
|
||||
}
|
||||
|
||||
const themes = {
|
||||
|
|
@ -16,6 +14,10 @@ const themes = {
|
|||
bg: colors.black,
|
||||
fg: colors.white,
|
||||
},
|
||||
red: {
|
||||
bg: colors.red,
|
||||
fg: colors.white,
|
||||
},
|
||||
}
|
||||
|
||||
const breakpoints = {
|
||||
|
|
@ -25,11 +27,11 @@ const breakpoints = {
|
|||
const viewports = {
|
||||
mobile: {
|
||||
width: 440,
|
||||
height: 956,
|
||||
height: 800,
|
||||
},
|
||||
desktop: {
|
||||
width: 1728,
|
||||
height: 1117,
|
||||
width: 1440,
|
||||
height: 1024,
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,15 +17,41 @@
|
|||
}
|
||||
|
||||
@mixin h1 {
|
||||
font-family: var(--font-times);
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.1em;
|
||||
@include size-font(42px, 27px);
|
||||
line-height: 1.3;
|
||||
@include size-font(32px, 32px);
|
||||
}
|
||||
@mixin h6 {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
@include size-font(12px, 12px);
|
||||
}
|
||||
|
||||
@mixin p {
|
||||
font-family: var(--font-times);
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.03em;
|
||||
@include size-font(25px, 18px);
|
||||
line-height: 1.3;
|
||||
@include size-font(16px, 16px);
|
||||
}
|
||||
@mixin p-small {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
@include size-font(8px, 8px);
|
||||
}
|
||||
|
||||
@mixin label {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
@include size-font(7px, 7px);
|
||||
}
|
||||
|
||||
@mixin code {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
@include size-font(12px, 12px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,16 +11,43 @@
|
|||
900 - Black (Heavy)
|
||||
*/
|
||||
|
||||
/* OFFICE TIMES */
|
||||
/* Liberation Sans */
|
||||
@font-face {
|
||||
font-family: 'Office Times';
|
||||
font-family: 'Liberation Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
url('/fonts/OfficeTimesRound-Regular.woff2') format('woff2'),
|
||||
url('/fonts/OfficeTimesRound-Regular.woff') format('woff');
|
||||
url('/fonts/liberation-sans.woff2') format('woff2'),
|
||||
url('/fonts/liberation-sans.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Liberation Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src:
|
||||
url('/fonts/liberation-sans-italic.woff2') format('woff2'),
|
||||
url('/fonts/liberation-sans-italic.woff') format('woff');
|
||||
}
|
||||
|
||||
/* IBM Plex Mono */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
url('/fonts/ibm-plex-mono.woff2') format('woff2'),
|
||||
url('/fonts/ibm-plex-mono.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src:
|
||||
url('/fonts/ibm-plex-mono-italic.woff2') format('woff2'),
|
||||
url('/fonts/ibm-plex-mono-italic.woff') format('woff');
|
||||
}
|
||||
|
||||
:root {
|
||||
--font-times: 'Office Times', monospace;
|
||||
--font-sans: 'Liberation Sans', 'Arial', 'Helvetica', sans-serif;
|
||||
--font-mono: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@
|
|||
@use 'transitions' as *;
|
||||
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
|
||||
|
|
@ -34,78 +32,43 @@ h1,
|
|||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
h5 {
|
||||
@include h1;
|
||||
}
|
||||
.h6,
|
||||
h6,
|
||||
dd {
|
||||
@include h6;
|
||||
}
|
||||
.p,
|
||||
p,
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
pre {
|
||||
pre,
|
||||
span {
|
||||
@include p;
|
||||
}
|
||||
.p-small {
|
||||
@include p-small;
|
||||
}
|
||||
.label,
|
||||
dt {
|
||||
@include label;
|
||||
}
|
||||
.code,
|
||||
code {
|
||||
@include code;
|
||||
}
|
||||
|
||||
.entry {
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
p {
|
||||
min-height: 1px;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
& > * {
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
& > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
& > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
li {
|
||||
margin-bottom: 1em;
|
||||
width: desktop-vw(577px);
|
||||
}
|
||||
}
|
||||
ul {
|
||||
list-style: disc;
|
||||
padding-left: 1em;
|
||||
}
|
||||
/* DL styling */
|
||||
dl {
|
||||
grid-template-columns: desktop-vw(40px) 1fr;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
padding-top: desktop-vw(8px);
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
5% {
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 0;
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
}
|
||||
95% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bonk {
|
||||
0% {
|
||||
transform: rotate(calc(var(--bonk-angle) * -1));
|
||||
}
|
||||
50% {
|
||||
transform: rotate(var(--bonk-angle));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue