feat: cms

app.vue

@@ -76,7 +76,15 @@ const navs: { name: string; path: string }[] = [
 * {
 	border: none;
 }
-
+.font-bebas {
+	font-family: "Bebas Neue";
+}
+.font-poppins {
+	font-family: "Poppins";
+}
+.font-ibm {
+	font-family: "IBM Plex Sans";
+}
 body {
 	background-color: var(--primary);
 	background-image: url(/GoopRepeat.png);

nuxt.config.ts

@@ -1,10 +1,11 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
 	devtools: { enabled: true },
-	googleFonts: {
-		families: { "IBM Plex Sans": true, "Bebas Neue": true, Poppins: true },
-		preload: true,
-	},
+	fonts: {},
+	// googleFonts: {
+	// 	families: { "IBM Plex Sans": true, "Bebas Neue": true, Poppins: true },
+	// 	preload: true,
+	// },
 	routeRules: {
 		"/scopes": { robots: "noindex" },
 		"/login": { robots: "noindex" },
@@ -26,6 +27,7 @@ export default defineNuxtConfig({
 		"notivue/nuxt",
 		"nuxt-build-cache",
 		"@nuxtjs/seo",
+		"@nuxt/fonts",
 	],
 	site: {
 		url: "https://greasygang.co",
@@ -53,9 +55,13 @@ export default defineNuxtConfig({
 		},
 	},
 	image: {
-		domains: [process.env.API_BASE?.replace(/(^\w+:|^)\/\//, "") ?? ""],
+		domains: [
+			process.env.API_BASE?.replace(/(^\w+:|^)\/\//, "") ?? "",
+			"cms.greasygang.co",
+		],
 		alias: {
 			content: process.env.API_BASE ?? "",
+			cms: "https://cms.greasygang.co",
 		},
 		quality: 90,
 		densities: [1, 2],
@@ -80,4 +86,5 @@ export default defineNuxtConfig({
 	experimental: {
 		viewTransition: true,
 	},
+	compatibilityDate: "2024-09-18",
 });

package.json

@@ -17,6 +17,7 @@
 	"devDependencies": {
 		"@nuxt/content": "^2.12.1",
 		"@nuxt/eslint-config": "^0.2.0",
+		"@nuxt/fonts": "^0.8.0",
 		"@nuxtjs/google-fonts": "^3.1.3",
 		"@nuxtjs/seo": "2.0.0-rc.10",
 		"@types/node": "^20.11.25",
@@ -34,6 +35,7 @@
 	},
 	"packageManager": "[email protected]",
 	"dependencies": {
+		"@directus/sdk": "^17.0.1",
 		"@fortawesome/fontawesome-svg-core": "^6.5.1",
 		"@fortawesome/free-brands-svg-icons": "^6.5.1",
 		"@fortawesome/free-solid-svg-icons": "^6.5.1",

pages/index.vue

@@ -36,40 +36,28 @@ const buttons = [
 		href: "https://open.spotify.com/playlist/21phkh5dZrZtO4E9Bf9qUy",
 	},
 ];
-import type { z } from "zod";
-import Sponsor from "~/schemas/sponsor";
-const sponsor = ref<z.infer<typeof Sponsor>>();
-try {
-	sponsor.value = JSON.parse(
-		(
-			await GqlGetContent({
-				path: "/website/sponsor",
-			})
-		).content
-	);
-} catch {
-	//
-}
-// sponsor.value = { ...sponsor.value, enabled: false };
+
+const { data: sponsor } = useAsyncData("sponsor", () =>
+	cms(readItem("Sponsor", 1))
+);
 </script>
 <template>
 	<main
 		class="font-poppins text-white mx-5 flex min-h-screen justify-center items-center"
 	>
-		<div class="pt-20 pb-10 grid lg:grid-cols-2 gap-5 max-w-7xl">
+		<div class="pt-20 pb-10 grid lg:grid-cols-2 gap-5 w-full max-w-7xl">
 			<div
 				:class="{ 'h-3xl': sponsor?.enabled, 'lt-lg:h-lg': !sponsor?.enabled }"
 				class="grid w-full xs:grid-rows-5 gap-5"
 			>
 				<div v-if="sponsor && sponsor.enabled" class="flex flex-col row-span-2">
 					<div class="flex h-full relative row-span-4">
 						<NuxtImg
-							width="600"
-							height="200"
 							densities="x1 x2"
-							:src="$ContentImage(sponsor.image)"
+							layout="responsive"
+							:src="$cmsImage(sponsor.image) + '/sponsor'"
 							class="rounded-xl rounded-tl-[clamp(3rem,10vw,10rem)] w-full h-full object-left object-cover"
-							:style="'object-position:' + sponsor.imageCoverMode"
+							:style="'object-position:' + sponsor.imagePosition"
 						>
 						</NuxtImg>
 
@@ -94,6 +82,8 @@ try {
 								</p>
 							</div>
 							<NuxtLink
+								densities="x1 x2"
+								layout="responsive"
 								:href="sponsor.url"
 								target="_blank"
 								class="w-70 select-none"
@@ -118,7 +108,7 @@ try {
 					}"
 				>
 					<NuxtImg
-						:src="$ContentImage('mac/babe.png')"
+						:src="$cmsImage('777b4597-5c15-4835-b291-fdf8b9af3524/mac-babe')"
 						class="w-full h-full object-cover rounded-xl"
 					></NuxtImg>
 				</div>

plugins/helpers.ts

@@ -17,6 +17,7 @@ export default defineNuxtPlugin(() => {
 
 				return loginURL.href;
 			},
+			cmsImage: (path: string) => `/cms/assets/${path}`,
 			ContentImage: (path: string) =>
 				`/content/image/${config.branch}/website/images/${path}`,
 			PreContentImage: (path: string, width?: number, height?: number) => {