From a30a17adac2b7815300d8c871a801efe0eb5ef0e Mon Sep 17 00:00:00 2001 From: Jewgeni Lewash Date: Tue, 5 Mar 2024 14:41:59 +0100 Subject: [PATCH 01/12] chore(deps): install directus sdk --- package.json | 1 + pnpm-lock.yaml | 14 ++++++++++++++ 2 files changed, 15 insertions(+) diff --git a/package.json b/package.json index 85bb17b..1add360 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 56f06f2..16e1695 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: From 0ffdc5307f582bb947b8ea41f8e797fe8dbaf565 Mon Sep 17 00:00:00 2001 From: Jewgeni Lewash Date: Tue, 5 Mar 2024 14:50:20 +0100 Subject: [PATCH 02/12] chore(git): ignore .env file --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index b947077..ddc3c2a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ +.env node_modules/ dist/ From 61a50db08e6f86e0c397221d4ad850fbb191630e Mon Sep 17 00:00:00 2001 From: Jewgeni Lewash Date: Tue, 5 Mar 2024 14:54:00 +0100 Subject: [PATCH 03/12] chore(directus): create helper for SDK --- Dockerfile | 2 ++ src/lib/directus.ts | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+) create mode 100644 src/lib/directus.ts 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/src/lib/directus.ts b/src/lib/directus.ts new file mode 100644 index 0000000..b0679b0 --- /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 = { + recipes: Recipe[]; +}; + +const directus = createDirectus(DIRECTUS_URL).with(rest()); + +export default directus; From 3a9c4da429ce05b320c3c6b63dd3b802d487eac7 Mon Sep 17 00:00:00 2001 From: Jewgeni Lewash Date: Tue, 5 Mar 2024 15:59:55 +0100 Subject: [PATCH 04/12] feat(directus): use directus cms --- .astro/types.d.ts | 14 ++++++++++++++ src/lib/directus.ts | 2 +- src/pages/recipes.astro | 32 ++++++++++++++++++++++++++++++++ 3 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 src/pages/recipes.astro 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/src/lib/directus.ts b/src/lib/directus.ts index b0679b0..b9d2700 100644 --- a/src/lib/directus.ts +++ b/src/lib/directus.ts @@ -10,7 +10,7 @@ type Recipe = { }; type Schema = { - recipes: Recipe[]; + Recipe: Recipe[]; }; const directus = createDirectus(DIRECTUS_URL).with(rest()); diff --git a/src/pages/recipes.astro b/src/pages/recipes.astro new file mode 100644 index 0000000..1bf1012 --- /dev/null +++ b/src/pages/recipes.astro @@ -0,0 +1,32 @@ +--- +import directus from '@/lib/directus.ts'; +import { readItems } from '@directus/sdk'; + +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.

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

    {recipe.name}

    +

    {recipe.description}

    + {recipe.name} +
    • + )) + } +
+ From da108a149e508f9705781c2ac39ba4bff5f1e8b0 Mon Sep 17 00:00:00 2001 From: Jewgeni Lewash Date: Tue, 5 Mar 2024 16:09:01 +0100 Subject: [PATCH 05/12] chore(recipes): improve ui --- src/pages/recipes.astro | 37 ++++++++++++++++++++++++------------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/src/pages/recipes.astro b/src/pages/recipes.astro index 1bf1012..6706010 100644 --- a/src/pages/recipes.astro +++ b/src/pages/recipes.astro @@ -16,17 +16,28 @@ const recipes = await directus.request( --- - Recipes -

Here are some of my favorite recipes.

-
    - { - recipes.map((recipe) => ( -
  • -

    {recipe.name}

    -

    {recipe.description}

    - {recipe.name} -
    • - )) - } -
+
+
+ Recipes +

Here are some of my favorite recipes.

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

    {recipe.name}

    +

    {recipe.description}

    +
    +
    • + )) + } +
+
From a2c2eeb715d026674553b9c6a3df02ef009a7f3a Mon Sep 17 00:00:00 2001 From: Jewgeni Lewash Date: Tue, 5 Mar 2024 16:10:56 +0100 Subject: [PATCH 06/12] chore(readme): update features --- Readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Readme.md b/Readme.md index 0b7cd05..e60cecc 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 From 1e7dbe29492956ad3e258c019b235171cb354599 Mon Sep 17 00:00:00 2001 From: Jewgeni Lewash Date: Tue, 5 Mar 2024 22:10:11 +0100 Subject: [PATCH 07/12] chore: add example env file --- .env.example | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .env.example 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" From 3becaf633a583c93c8f5a3101ff158fbef3062d1 Mon Sep 17 00:00:00 2001 From: Jewgeni Lewash Date: Tue, 5 Mar 2024 22:30:10 +0100 Subject: [PATCH 08/12] chore(readme): add directus information --- Readme.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/Readme.md b/Readme.md index e60cecc..4d05863 100644 --- a/Readme.md +++ b/Readme.md @@ -28,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 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 @@ -49,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 ``` @@ -74,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/) From e3bb3b34e46123c3d0e906a027f986ff415ed72b Mon Sep 17 00:00:00 2001 From: Jewgeni Lewash Date: Tue, 5 Mar 2024 22:30:58 +0100 Subject: [PATCH 09/12] chore(readme): update readme --- Readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Readme.md b/Readme.md index 4d05863..0f08dc8 100644 --- a/Readme.md +++ b/Readme.md @@ -36,7 +36,7 @@ If you don't want to use Directus CMS: - 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 and `directus_fields` in your Directus dashboard. Adjust the /src/lib/directus for your content. +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 From 54dcefbf25002be51b5f134d7a8f74df5ef96474 Mon Sep 17 00:00:00 2001 From: Jewgeni Lewash Date: Tue, 5 Mar 2024 22:35:41 +0100 Subject: [PATCH 10/12] fix(header): add additional navlink --- src/components/layout/Header.astro | 1 + 1 file changed, 1 insertion(+) 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' }, ]; --- From 9e7cbd144f05a2a46e51c033a171fc557951b3eb Mon Sep 17 00:00:00 2001 From: Jewgeni Lewash Date: Tue, 5 Mar 2024 22:36:36 +0100 Subject: [PATCH 11/12] fix: add source description --- src/pages/blog.astro | 1 + src/pages/recipes.astro | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/blog.astro b/src/pages/blog.astro index f82cb04..cdd95bb 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 index 6706010..48221da 100644 --- a/src/pages/recipes.astro +++ b/src/pages/recipes.astro @@ -19,7 +19,7 @@ const recipes = await directus.request(
Recipes -

Here are some of my favorite recipes.

+

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

    From 5cb223718734b1d7b502e7dd331eae6ebb493f36 Mon Sep 17 00:00:00 2001 From: Jewgeni Lewash Date: Tue, 5 Mar 2024 22:49:42 +0100 Subject: [PATCH 12/12] feat: use image optimization for Directus --- astro.config.mjs | 4 ++++ src/pages/recipes.astro | 7 +++++-- 2 files changed, 9 insertions(+), 2 deletions(-) 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/src/pages/recipes.astro b/src/pages/recipes.astro index 48221da..1603ed3 100644 --- a/src/pages/recipes.astro +++ b/src/pages/recipes.astro @@ -2,6 +2,8 @@ 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'; @@ -26,9 +28,10 @@ const recipes = await directus.request( { recipes.map((recipe) => (
  • - {recipe.name}