diff --git a/.astro/types.d.ts b/.astro/types.d.ts index c134edb..704bc1b 100644 --- a/.astro/types.d.ts +++ b/.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"; diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..43ebd40 --- /dev/null +++ b/.env.example @@ -0,0 +1,2 @@ +SITE_URL = "https://astro.deployn.de" +DIRECTUS_URL = "https://directus.astro.deployn.de" diff --git a/.gitignore b/.gitignore index b947077..ddc3c2a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ +.env node_modules/ dist/ diff --git a/Dockerfile b/Dockerfile index 9c8910b..8b82215 100644 --- a/Dockerfile +++ b/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 diff --git a/Readme.md b/Readme.md index 0b7cd05..0f08dc8 100644 --- a/Readme.md +++ b/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 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/) diff --git a/astro.config.mjs b/astro.config.mjs index 3f32944..61f66fc 100644 --- a/astro.config.mjs +++ b/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(), diff --git a/package.json b/package.json index d4fbb9d..6876c59 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f835185..d6b02f8 100644 --- a/pnpm-lock.yaml +++ b/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: diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro index 4b0b4d2..fb4ef89 100644 --- a/src/components/layout/Header.astro +++ b/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' }, ]; --- diff --git a/src/lib/directus.ts b/src/lib/directus.ts new file mode 100644 index 0000000..b9d2700 --- /dev/null +++ b/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(DIRECTUS_URL).with(rest()); + +export default directus; diff --git a/src/pages/blog.astro b/src/pages/blog.astro index 8d80e2e..85d7f0c 100644 --- a/src/pages/blog.astro +++ b/src/pages/blog.astro @@ -9,6 +9,7 @@ const allBlogposts = await getCollection('blog');
Blog +

Here are some blogposts, they are located in the repository as mdx files.

diff --git a/src/pages/recipes.astro b/src/pages/recipes.astro new file mode 100644 index 0000000..1603ed3 --- /dev/null +++ b/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'], + }) +); +--- + + +
+
+ Recipes +

Here are some of my favorite recipes. They are fetched through Directus CMS.

+
+
+
    + { + recipes.map((recipe) => ( +
  • + {recipe.name} +
    +

    {recipe.name}

    +

    {recipe.description}

    +
    +
    • + )) + } +
+
+