using collections

fxadilima · Sep 15, 2023 · 88d4dff · 88d4dff
1 parent 4a788a7
commit 88d4dff
Show file tree

Hide file tree

Showing 10 changed files with 452 additions and 18 deletions.
diff --git a/src/components/Navigations.astro b/src/components/Navigations.astro
@@ -1,9 +1,14 @@
 ---
-
+interface Props {
+    title: string,
+    author: string,
+    description: string
+}
+const {title, author, description} = Astro.props;
 ---
 
 <!-- Sidebar (hidden by default) -->
-<nav class="w3-sidebar w3-bar-block w3-card w3-top w3-xlarge w3-animate-left" 
+<nav class="w3-sidebar w3-bar-block w3-card w3-top w3-large w3-animate-left" 
     style="display:none;z-index:2;width:40%;min-width:300px" 
     id="mySidebar">
     <a href="javascript:void(0)" 
@@ -19,8 +24,8 @@
 <div class="w3-top">
     <div class="w3-white w3-xlarge" style="max-width:1200px;margin:auto">
         <div class="w3-button w3-padding-16 w3-left" onclick="w3_open()">☰</div>
-        <div class="w3-right w3-padding-16">Mail</div>
-        <div class="w3-center w3-padding-16">My Food</div>
+        <div class="w3-right w3-padding-16">{author}</div>
+        <div class="w3-center w3-padding-16">{title}</div>
     </div>
 </div>
 

diff --git a/src/content/config.ts b/src/content/config.ts
@@ -1,9 +1,48 @@
 // 1. Import utilities from `astro:content`
-import { defineCollection } from 'astro:content';
+import { z, defineCollection } from 'astro:content';
+import { optional } from 'zod';
 // 2. Define your collection(s)
-const dokumentasiCollection = defineCollection({ /* ... */ });
+const blogCollection = defineCollection({
+    type: 'content',
+    schema: z.object({
+        title: z.string(),
+        tags: z.array(z.string()),
+        image: z.array(z.string().optional())
+    })
+});
+const docCollection = defineCollection({
+    type: 'content',
+    schema: z.object({
+        title: z.string(),
+        tags: z.array(z.string()),
+        image: z.array(z.string().optional())
+    })
+});
+const newsCollection = defineCollection({
+    type: 'content',
+    schema: z.object({
+        title: z.string(),
+        author: z.string(),
+        description: z.string(),
+        tags: z.array(z.string()),
+    })
+});
+const tutorialCollection = defineCollection({
+    type: 'content',
+    schema: z.object({
+        title: z.string(),
+        author: z.string(),
+        description: z.string(),
+        tags: z.array(z.string()),
+        image: z.array(z.string().optional())
+    })
+});
+
 // 3. Export a single `collections` object to register your collection(s)
 //    This key should match your collection directory name in "src/content"
 export const collections = {
-    'dokumentasi': dokumentasiCollection,
+    'blogs': blogCollection,
+    'documents': docCollection,
+    'newsletter': newsCollection,
+    'tutorials': tutorialCollection
 };
diff --git a/src/content/dokumentasi/collection.md b/src/content/dokumentasi/collection.md
@@ -1,2 +1,8 @@
+---
+---
+
 # Collection
 
+Ini dokumen mengenai Astro Collections.
+
+
diff --git a/src/content/newsletter/topik-1.md b/src/content/newsletter/topik-1.md
diff --git a/src/content/tutorials/template-1.md b/src/content/tutorials/template-1.md
@@ -0,0 +1,12 @@
+---
+title: Food Blogs Template By W3.CSS
+author: FX. Adi Lima
+description: Contoh template dari W3.CSS
+tags: [blogs, collections, content]
+image: [/images/rompi-berduri.jpg]
+---
+
+# W3.CSS Template Food Blogs
+
+Belum ditulis, [kembali ke Astro Collections](/docs/astro-collections).
+
diff --git a/src/env.d.ts b/src/env.d.ts
@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/src/pages/docs/astro-collections.astro b/src/pages/docs/astro-collections.astro
@@ -1,27 +1,45 @@
 ---
-const {frontmatter} = Astro.props;
 import Navigations from '../../components/Navigations.astro';
+import {getCollection, getEntry} from 'astro:content';
+
+const tutorialEntries = await getCollection('tutorials');
+const topik1 = await getEntry('newsletter', 'topik-1');
+const {Content, headings} = await topik1.render();
 ---
 
 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="utf-8"/>
         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-        <title>{frontmatter.title}</title>
+        <title>Dokumentasi</title>
         <meta name="generator" content={Astro.generator} />
-		<meta name="author" content={frontmatter.author} />
-        <meta name="description" content="Astro description">
+        <meta name="description" content={topik1.data.description}>
 		<link rel="icon" type="image/png" href="/favicon.png" />
         <link href="/styles/w3.css" rel="stylesheet"/>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
     </head>
     <body>
-        <Navigations />
-        <main class="w3-main">
-            <div class="w3-content">
+        <Navigations title={topik1.data.title} author={topik1.data.author} description={topik1.data.description}/>
+        <main class="w3-main w3-container w3-padding-32">
+            <div class="w3-content w3-padding-32">
+                <div class="w3-container">
+                    <Content />
+                </div>
                 <div class="w3-container">
-                    <p>Testing...</p>
+                    <h2>Tutorial</h2>
+                    <p>
+                        Berikut ini adalah dokumen yang kita tulis menggunakan <em>plain markdown</em>.
+                    </p>
+                    <ul>
+                        {
+                            tutorialEntries.map(tutorialPostEntry => (
+                                <li>
+                                    <a href={`/docs/tutorials/${tutorialPostEntry.slug}`}>{tutorialPostEntry.data.title}</a>
+                                </li>
+                            ))
+                        }
+                    </ul>
                 </div>
             </div>
         </main>

diff --git a/src/pages/docs/tutorials/template-1.astro b/src/pages/docs/tutorials/template-1.astro
@@ -0,0 +1,38 @@
+---
+import { getEntry } from 'astro:content';
+const entry = await getEntry('tutorials', 'template-1');
+const { Content, headings } = await entry.render();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <title>{entry.data.title}</title>
+        <meta name="generator" content={Astro.generator} />
+		<meta name="author" content="FX. Adi Lima" />
+        <meta name="description" content="Astro description">
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link href="/styles/w3.css" rel="stylesheet"/>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
+    </head>
+    <body>
+        <main class="w3-main">
+            <div class="w3-content">
+                <div class="w3-container">
+                    <article class="w3-panel">
+                        <p><strong>{entry.data.title}</strong></p>
+                        <p>Tags: {
+                            entry.data.tags.forEach(element => {
+                                <span class="w3-tag">${element}</span>                                
+                            })}
+                        </p>
+                        <Content />
+                    </article>
+                </div>
+            </div>
+        </main>
+    </body>
+</html>
+
diff --git a/src/pages/tokoh-sejarah.md b/src/pages/tokoh-sejarah.md
@@ -298,4 +298,11 @@ our understanding of the problem.
 
 [^yinque]: Chen Yinque (陈寅恪), Three Books of Reading Notes for History (Dushi zhaji sanbian 读史札记三集) (Beijing: Sanlian shudian, 2001).
 
+### Food
+
+Ini sekedar test untuk id 'food'.
+
+### About
+
+Ini sekedar test untuk id 'about'.
 
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,3 +1,8 @@
 {
-  "extends": "astro/tsconfigs/base"
-}
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    /* Null Check */
+    "strictNullChecks": true,
+    "allowJs": true
+  }
+}