diff --git a/.env b/.env index e69de29..4a8b17d 100644 --- a/.env +++ b/.env @@ -0,0 +1 @@ +VITE_STRAPI_API_TOKEN=5934fb84b89fdca49ef58e4f493381848289fcfb09a5664c5a61d4673a6b81b10bdf1d364fa250d185049c14487b7297758c3653dbf37390f567d6d08d559b4c40aaf4dc10730a60b98011d6dc0553f2bd633b373739579d579e39a162f67ca6d8f0e5c5adb3537a7e94b303d79c4cb7f3f877e39158e37e5bd6838596ee9afe diff --git a/package-lock.json b/package-lock.json index 06ed4b6..ca88d7b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index b75b772..8c48f8d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/public/fonts/OfficeTimesRound-Regular.woff b/public/fonts/OfficeTimesRound-Regular.woff deleted file mode 100755 index 63a4e12..0000000 Binary files a/public/fonts/OfficeTimesRound-Regular.woff and /dev/null differ diff --git a/public/fonts/OfficeTimesRound-Regular.woff2 b/public/fonts/OfficeTimesRound-Regular.woff2 deleted file mode 100755 index bd9ad24..0000000 Binary files a/public/fonts/OfficeTimesRound-Regular.woff2 and /dev/null differ diff --git a/public/fonts/ibm-plex-mono-italic.woff b/public/fonts/ibm-plex-mono-italic.woff new file mode 100644 index 0000000..ceda865 Binary files /dev/null and b/public/fonts/ibm-plex-mono-italic.woff differ diff --git a/public/fonts/ibm-plex-mono-italic.woff2 b/public/fonts/ibm-plex-mono-italic.woff2 new file mode 100644 index 0000000..3f10eb5 Binary files /dev/null and b/public/fonts/ibm-plex-mono-italic.woff2 differ diff --git a/public/fonts/ibm-plex-mono.woff b/public/fonts/ibm-plex-mono.woff new file mode 100644 index 0000000..f34db4c Binary files /dev/null and b/public/fonts/ibm-plex-mono.woff differ diff --git a/public/fonts/ibm-plex-mono.woff2 b/public/fonts/ibm-plex-mono.woff2 new file mode 100644 index 0000000..6e65245 Binary files /dev/null and b/public/fonts/ibm-plex-mono.woff2 differ diff --git a/public/fonts/liberation-sans-italic.woff b/public/fonts/liberation-sans-italic.woff new file mode 100644 index 0000000..ea71765 Binary files /dev/null and b/public/fonts/liberation-sans-italic.woff differ diff --git a/public/fonts/liberation-sans-italic.woff2 b/public/fonts/liberation-sans-italic.woff2 new file mode 100644 index 0000000..1cafdaf Binary files /dev/null and b/public/fonts/liberation-sans-italic.woff2 differ diff --git a/public/fonts/liberation-sans.woff b/public/fonts/liberation-sans.woff new file mode 100644 index 0000000..82d6df5 Binary files /dev/null and b/public/fonts/liberation-sans.woff differ diff --git a/public/fonts/liberation-sans.woff2 b/public/fonts/liberation-sans.woff2 new file mode 100644 index 0000000..80fd927 Binary files /dev/null and b/public/fonts/liberation-sans.woff2 differ diff --git a/public/images/output_pixelated.gif b/public/images/output_pixelated.gif new file mode 100644 index 0000000..981c312 Binary files /dev/null and b/public/images/output_pixelated.gif differ diff --git a/src/App.vue b/src/App.vue index 97d6854..5ea55a2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -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(() => { diff --git a/src/components.d.ts b/src/components.d.ts index e055a84..9ace4c9 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -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'] } } diff --git a/src/components/InfiniteScrollDemo.vue b/src/components/InfiniteScrollDemo.vue index a78f7f5..05a45b0 100644 --- a/src/components/InfiniteScrollDemo.vue +++ b/src/components/InfiniteScrollDemo.vue @@ -18,6 +18,7 @@ + + diff --git a/src/composables/useInfiniteScroll.js b/src/composables/useInfiniteScroll.js index f9f9909..981502b 100644 --- a/src/composables/useInfiniteScroll.js +++ b/src/composables/useInfiniteScroll.js @@ -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 } diff --git a/src/libs/strapi.js b/src/libs/strapi.js new file mode 100644 index 0000000..27897d5 --- /dev/null +++ b/src/libs/strapi.js @@ -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, + }) + } +} diff --git a/src/libs/theme.js b/src/libs/theme.js index 1772a00..80f5f97 100644 --- a/src/libs/theme.js +++ b/src/libs/theme.js @@ -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, }, } diff --git a/src/styles/_font-style.scss b/src/styles/_font-style.scss index 51af48e..fc8afc9 100644 --- a/src/styles/_font-style.scss +++ b/src/styles/_font-style.scss @@ -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); } diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 84679d8..c27938c 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -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; } diff --git a/src/styles/main.scss b/src/styles/main.scss index 06e1ca3..acd9de1 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -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)); - } -}