Merge pull request #3 from deployn/directus

Directus

.astro/types.d.ts

@@ -143,6 +143,20 @@ declare module 'astro:content' {
   collection: "blog";
   data: InferEntrySchema<"blog">
 } & { render(): Render[".mdx"] };
+"comparing-mvc-frameworks.mdx": {
+	id: "comparing-mvc-frameworks.mdx";
+  slug: "comparing-mvc-frameworks";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
+"dockerizing-front-end-development.mdx": {
+	id: "dockerizing-front-end-development.mdx";
+  slug: "dockerizing-front-end-development";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
 "essential-frontend-tools-for-astro-js-developers.mdx": {
 	id: "essential-frontend-tools-for-astro-js-developers.mdx";
   slug: "essential-frontend-tools-for-astro-js-developers";

.env.example

@@ -0,0 +1,2 @@
+SITE_URL = "https://astro.deployn.de"
+DIRECTUS_URL = "https://directus.astro.deployn.de"

.gitignore

@@ -1,2 +1,3 @@
+.env
 node_modules/
 dist/

Dockerfile

@@ -17,6 +17,8 @@ FROM build-deps AS build
 COPY . .
 ARG SITE_URL
 ENV SITE_URL=${SITE_URL}
+ARG DIRECTUS_URL
+ENV DIRECTUS_URL=${DIRECTUS_URL}
 RUN pnpm run build
 
 FROM nginx:1.25-alpine AS runtime

Readme.md

@@ -10,6 +10,7 @@ A custom Astro.js template
 - 🐳 Docker integration
 - 🍃 Tailwind CSS
 - 🖊️ MDX Blog
+- 🐇 Directus CMS support
 - ⚛️ React.js
 - 🏔️ Alpine.js integration
 - 📘 TypeScript
@@ -27,6 +28,16 @@ cd new-astro-project
 - Update colors in tailwind.config.mjs
 - Update /src/\*
 
+### Directus
+
+If you don't want to use Directus CMS:
+
+- Delete /src/lib/directus.ts
+- Delete /src/pages/recipes.astro
+- `pnpm remove @directus/sdk`
+
+If you want to use Directus, make sure to grant the view permission to the public for the collection(s) you want to use and `directus_fields` in your Directus dashboard. Adjust the /src/lib/directus for your content.
+
 ### Add shadcn/ui components
 
 Visit <https://ui.shadcn.com/docs/> for a list of components
@@ -48,7 +59,7 @@ pnpm dev
 Production Build:
 
 ```sh
-sudo docker build . --build-arg SITE_URL=https://example.com -t astro-deploy
+sudo docker build . --build-arg SITE_URL=https://example.com --build-arg DIRECTUS_URL=https://example.directus.com -t astro-deploy
 docker run -d -p 1234:80 astro-deploy
 ```
 
@@ -73,6 +84,7 @@ All commands are run from the root of the project, from a terminal:
 - [Astro.js Basic Example](https://github.com/withastro/astro/tree/main/examples/basics)
 - [Astro.js Docs](https://docs.astro.build/)
 - [Astro Starter Kit](https://github.com/zankhq/astro-starter)
+- [Directus](https://directus.io/)
 - [Docker](https://www.docker.com/)
 - [Frontmatter CMS](https://frontmatter.codes/)
 - [Material-Tailwind](https://www.material-tailwind.com/)

astro.config.mjs

@@ -6,10 +6,14 @@ import sitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
 import icon from 'astro-icon';
 const SITE_URL = process.env.SITE_URL || 'https://astro.deployn.de';
+const DIRECTUS_URL = process.env.DIRECTUS_URL || 'https://directus.astro.deployn.de';
 
 // https://astro.build/config
 export default defineConfig({
 	site: SITE_URL,
+	image: {
+		domains: [DIRECTUS_URL.replace('https://', '')],
+	},
 	integrations: [
 		alpinejs(),
 		icon(),

package.json

@@ -31,6 +31,7 @@
     "@commitlint/cli": "^19.0.3",
     "@commitlint/config-conventional": "^19.0.3",
     "@commitlint/cz-commitlint": "^19.0.3",
+    "@directus/sdk": "^15.0.1",
     "@iconify-json/line-md": "^1.1.36",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",

pnpm-lock.yaml

@@ -46,6 +46,9 @@ devDependencies:
   '@commitlint/cz-commitlint':
     specifier: ^19.0.3
     version: 19.0.3(@types/node@20.11.24)(commitizen@4.3.0)(inquirer@9.2.15)(typescript@5.3.3)
+  '@directus/sdk':
+    specifier: ^15.0.1
+    version: 15.0.1
   '@iconify-json/line-md':
     specifier: ^1.1.36
     version: 1.1.36
@@ -880,6 +883,17 @@ packages:
       chalk: 5.3.0
     dev: true
 
+  /@directus/sdk@15.0.1:
+    resolution: {integrity: sha512-NuP+S2SZ23gmcSNnHiX7LxlUxkdIjX0mV3kFKqTdU07epj4OJNHk7ZXfSV2y67fnQjFrb7apTHe2LdWnU8Y6vQ==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      '@directus/system-data': 1.0.0
+    dev: true
+
+  /@directus/system-data@1.0.0:
+    resolution: {integrity: sha512-AKzYkLg39phx9AysQhcf7AmIGq1D/PIkor5B8Y5NB8R+jq+jkH1PBtg/l5Ev4hfsidpNBi5DmpuFy/xmQEYhHQ==}
+    dev: true
+
   /@emmetio/abbreviation@2.3.3:
     resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==}
     dependencies:

src/components/layout/Header.astro

@@ -8,6 +8,7 @@ import logoImage from '@/assets/images/logo.png';
 const navLinks = [
 	{ href: '/', label: 'Home' },
 	{ href: '/blog/', label: 'Blog' },
+	{ href: '/recipes/', label: 'Recipes' },
 ];
 ---
 

src/lib/directus.ts

@@ -0,0 +1,18 @@
+import { createDirectus, rest } from '@directus/sdk';
+
+const DIRECTUS_URL = process.env.DIRECTUS_URL || 'https://directus.astro.deployn.de';
+
+type Recipe = {
+	status: string;
+	name: string;
+	image: string;
+	description: string;
+};
+
+type Schema = {
+	Recipe: Recipe[];
+};
+
+const directus = createDirectus<Schema>(DIRECTUS_URL).with(rest());
+
+export default directus;

src/pages/blog.astro

@@ -9,6 +9,7 @@ const allBlogposts = await getCollection('blog');
 	<div class="container mx-auto px-4 py-16 sm:py-24 lg:px-8 lg:py-32 xl:max-w-7xl">
 		<div class="mb-12 text-center text-zinc-900 dark:text-zinc-200">
 			<Heading level={1}>Blog</Heading>
+			<p>Here are some blogposts, they are located in the repository as mdx files.</p>
 		</div>
 		<hr class="mb-12 dark:border-zinc-700/75" />
 		<div class="grid grid-cols-1 gap-8 md:grid-cols-2">

src/pages/recipes.astro

@@ -0,0 +1,46 @@
+---
+import directus from '@/lib/directus.ts';
+import { readItems } from '@directus/sdk';
+
+import { Image } from 'astro:assets';
+
+const DIRECTUS_URL = process.env.DIRECTUS_URL || 'https://directus.astro.deployn.de';
+
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import Heading from '@/components/ui/Heading.astro';
+
+const recipes = await directus.request(
+	readItems('Recipe', {
+		fields: ['name', 'description', 'image'],
+		sort: ['name'],
+	})
+);
+---
+
+<BaseLayout title="Recipes">
+	<div class="container mx-auto px-4 py-16 sm:py-24 lg:px-8 lg:py-32 xl:max-w-7xl">
+		<div class="mb-12 text-center text-zinc-900 dark:text-zinc-200">
+			<Heading level={1}>Recipes</Heading>
+			<p>Here are some of my favorite recipes. They are fetched through Directus CMS.</p>
+		</div>
+		<hr class="mb-12 dark:border-zinc-700/75" />
+		<ul class="grid gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3 xl:gap-x-8">
+			{
+				recipes.map((recipe) => (
+					<li class="overflow-hidden rounded-lg bg-white shadow dark:bg-zinc-800">
+						<Image
+							class="h-48 w-full object-cover"
+							src={`${DIRECTUS_URL}/assets/${recipe.image}`}
+							inferSize
+							alt={recipe.name}
+						/>
+						<div class="p-6">
+							<h2 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100">{recipe.name}</h2>
+							<p class="mt-2 text-base text-zinc-600 dark:text-zinc-400">{recipe.description}</p>
+						</div>
+					</li>
+				))
+			}
+		</ul>
+	</div>
+</BaseLayout>