feat: hook up to katharostech directus.

Author: zicklag

deno.json

@@ -0,0 +1,5 @@
+{
+  "imports": {
+    "crypto": "node:crypto"
+  }
+}

deno.lock

@@ -26,12 +26,14 @@
     "@astrojs/sitemap": "^3.2.1",
     "@astrolib/analytics": "^0.6.1",
     "@astrolib/seo": "^1.0.0-beta.8",
+    "@directus/sdk": "^19.0.0",
     "@fontsource-variable/inter": "^5.1.1",
     "astro": "^5.1.8",
     "astro-embed": "^0.9.0",
     "astro-icon": "^1.1.5",
     "limax": "4.1.0",
     "lodash.merge": "^4.6.2",
+    "marked": "^15.0.6",
     "unpic": "^3.22.0"
   },
   "devDependencies": {

package.json

@@ -3,7 +3,7 @@ import { Icon } from 'astro-icon/components';
 
 import Image from '~/components/common/Image.astro';
 import PostTags from '~/components/blog/Tags.astro';
-import SocialShare from '~/components/common/SocialShare.astro';
+// import SocialShare from '~/components/common/SocialShare.astro';
 
 import { getPermalink } from '~/utils/permalinks';
 import { getFormattedDate } from '~/utils/utils';
@@ -15,7 +15,7 @@ export interface Props {
   url: string | URL;
 }
 
-const { post, url } = Astro.props;
+const { post /*, url*/ } = Astro.props;
 ---
 
 <section class="py-8 sm:py-16 lg:py-20 mx-auto">
@@ -97,7 +97,7 @@ const { post, url } = Astro.props;
     </div>
     <div class="mx-auto px-6 sm:px-6 max-w-3xl mt-8 flex justify-between flex-col sm:flex-row">
       <PostTags tags={post.tags} class="mr-5 rtl:mr-0 rtl:ml-5" />
-      <SocialShare url={url} text={post.title} class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600" />
+      <!-- <SocialShare url={url} text={post.title} class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600" /> -->
     </div>
   </article>
 </section>

src/components/blog/SinglePost.astro

@@ -1,22 +1,22 @@
 site:
-  name: AstroWind
-  site: 'https://astrowind.vercel.app'
+  name: KTech Studio
+  site: 'https://ktech.studio'
   base: '/'
   trailingSlash: false
 
-  googleSiteVerificationId: orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M
+  # googleSiteVerificationId: orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M
 
 # Default SEO metadata
 metadata:
   title:
-    default: AstroWind
-    template: '%s — AstroWind'
-  description: "\U0001F680 Suitable for Startups, Small Business, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs."
+    default: KTech Studio
+    template: '%s — KTech Studio'
+  description: "Indie game development."
   robots:
     index: true
     follow: true
   openGraph:
-    site_name: AstroWind
+    site_name: KTech Studio
     images:
       - url: '~/assets/images/default.png'
         width: 1200
@@ -69,4 +69,4 @@ analytics:
       id: null # or "G-XXXXXXXXXX"
 
 ui:
-  theme: 'system' # Values: "system" | "light" | "dark" | "light:only" | "dark:only"
+  theme: 'dark:only' # Values: "system" | "light" | "dark" | "light:only" | "dark:only"

src/config.yaml

@@ -1,5 +1,6 @@
 import { z, defineCollection } from 'astro:content';
-import { glob } from 'astro/loaders';
+import { marked } from 'marked';
+import { getArticles } from '~/lib/directus';
 
 const metadataDefinition = () =>
   z
@@ -47,7 +48,26 @@ const metadataDefinition = () =>
     .optional();
 
 const postCollection = defineCollection({
-  loader: glob({ pattern: ['*.md', '*.mdx'], base: 'src/data/post' }),
+  loader: async () => {
+    const data = await getArticles();
+
+    return data.articles.map((x) => {
+      const findEnglish = (t: { languages_id: { code: string } }) => t.languages_id.code.startsWith('en');
+      const translation = x.translations.find(findEnglish)!;
+      return {
+        id: x.slug,
+        title: translation.title,
+        publishDate: new Date(x.published_date),
+        content: marked(translation.body),
+        tags: x.tags.map((tag) => tag.tags_id.slug),
+        image: translation.feature_image?.id
+          ? `https://directus.katharostech.com/assets/${translation.feature_image.id}`
+          : undefined,
+      };
+    });
+  },
+  // loader: glob({ pattern: ['*.md', '*.mdx'], base: 'src/data/post' }),
+
   schema: z.object({
     publishDate: z.date().optional(),
     updateDate: z.date().optional(),
@@ -60,6 +80,7 @@ const postCollection = defineCollection({
     category: z.string().optional(),
     tags: z.array(z.string()).optional(),
     author: z.string().optional(),
+    content: z.string(),
 
     metadata: metadataDefinition(),
   }),

src/content/config.ts

@@ -2,7 +2,7 @@
 import Layout from '~/layouts/Layout.astro';
 import Header from '~/components/widgets/Header.astro';
 import Footer from '~/components/widgets/Footer.astro';
-import Announcement from '~/components/widgets/Announcement.astro';
+// import Announcement from '~/components/widgets/Announcement.astro';
 
 import { headerData, footerData } from '~/navigation';
 
@@ -17,7 +17,7 @@ const { metadata } = Astro.props;
 
 <Layout metadata={metadata}>
   <slot name="announcement">
-    <Announcement />
+    <!-- <Announcement /> -->
   </slot>
   <slot name="header">
     <Header {...headerData} isSticky showRssFeed showToggleTheme />

src/layouts/PageLayout.astro

@@ -0,0 +1,89 @@
+import { createDirectus, graphql } from '@directus/sdk';
+
+type Author = {
+  directus_users_id: {
+    display_name: string;
+    slug: string;
+  };
+};
+
+type ArticleTranslation = {
+  title: string;
+  body: string;
+  feature_image: {
+    id: string;
+  };
+  languages_id: {
+    code: string,
+  }
+};
+
+type Tag = {
+  id: string;
+  tags_id: {
+    slug: string;
+    translations: {
+      title: string;
+      languages_code: {
+        code: string;
+      };
+    }[];
+  };
+};
+
+type Article = {
+  id: string;
+  slug: string;
+  published_date: string;
+  authors: Author[];
+  tags: Tag[];
+  translations: ArticleTranslation[];
+};
+
+type Schema = {
+  articles: Article[];
+};
+
+const directus = createDirectus<Schema>('https://directus.katharostech.com').with(graphql());
+
+export default directus;
+
+export async function getArticles() {
+  return await directus.query<{ articles: Article[] }>(`
+    query {
+  articles {
+    id
+    slug
+    published_date
+    authors {
+    	directus_users_id {
+        display_name
+        slug
+      }
+    }
+    tags {
+      id
+      tags_id {
+        slug
+        translations {
+          title
+          languages_code {
+            code
+          }
+        }
+      }
+    }
+    translations {
+      title
+      body 
+      feature_image {
+        id
+      }
+      languages_id {
+        code
+      }
+    }
+  }
+}   
+  `);
+}