├── .gitignore
├── .vscode
    ├── extensions.json
    └── launch.json
├── astro.config.mjs
├── package-lock.json
├── package.json
├── public
    └── favicon.svg
├── src
    ├── components
    │   ├── APICard.tsx
    │   └── Card.astro
    ├── content
    │   ├── config.ts
    │   └── product
    │   │   ├── 1.yaml
    │   │   ├── 2.yaml
    │   │   ├── 3.yaml
    │   │   ├── 4.yaml
    │   │   └── 5.yaml
    ├── data
    │   ├── data3.json
    │   ├── data3.md
    │   ├── data3.ts
    │   └── data3_example2.md
    ├── env.d.ts
    └── pages
    │   ├── endpoint.json.ts
    │   └── index.astro
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | # generated types
 4 | .astro/
 5 | 
 6 | # dependencies
 7 | node_modules/
 8 | 
 9 | # logs
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | 
16 | # environment variables
17 | .env
18 | .env.production
19 | 
20 | # macOS-specific files
21 | .DS_Store
22 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["astro-build.astro-vscode"],
3 |   "unwantedRecommendations": []
4 | }
5 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "command": "./node_modules/.bin/astro dev",
 6 |       "name": "Development server",
 7 |       "request": "launch",
 8 |       "type": "node-terminal"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'astro/config';
2 | 
3 | import react from "@astrojs/react";
4 | 
5 | // https://astro.build/config
6 | export default defineConfig({
7 |   integrations: [react()]
8 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "working-with-data",
 3 |   "type": "module",
 4 |   "version": "0.0.1",
 5 |   "scripts": {
 6 |     "dev": "astro dev",
 7 |     "start": "astro dev",
 8 |     "build": "astro build",
 9 |     "preview": "astro preview",
10 |     "astro": "astro"
11 |   },
12 |   "dependencies": {
13 |     "@astrojs/react": "^3.0.2",
14 |     "@types/react": "^18.0.21",
15 |     "@types/react-dom": "^18.0.6",
16 |     "astro": "^3.1.0",
17 |     "react": "^18.0.0",
18 |     "react-dom": "^18.0.0"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
 2 |     <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
 3 |     <style>
 4 |         path { fill: #000; }
 5 |         @media (prefers-color-scheme: dark) {
 6 |             path { fill: #FFF; }
 7 |         }
 8 |     </style>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/src/components/APICard.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | 
 3 | type Data = {
 4 |   id: string;
 5 |   collection: "product";
 6 |   data: {
 7 |     name: string;
 8 |     price: number;
 9 |     color: string;
10 |     brand: string;
11 |     category:
12 |       | "Automotive"
13 |       | "Home & Garden"
14 |       | "Fashion"
15 |       | "Electronics"
16 |       | "Toys";
17 |   };
18 | };
19 | 
20 | const APICard = () => {
21 |   const [products, setProducts] = useState([]);
22 | 
23 |   const handleClick = async () => {
24 |     const res = await fetch("/endpoint.json");
25 |     const data = await res.json();
26 |     setProducts(data);
27 |   };
28 |   return (
29 |     <div>
30 |       <p>Get more items</p>
31 |       {products.length > 0 &&
32 |         products.map((p: Data) => <p key={p.id}>{p.data.name}</p>)}
33 |       <button onClick={handleClick}>Get it</button>
34 |     </div>
35 |   );
36 | };
37 | export default APICard;
38 | 


--------------------------------------------------------------------------------
/src/components/Card.astro:
--------------------------------------------------------------------------------
 1 | <div class="card">
 2 |   <slot />
 3 | </div>
 4 | 
 5 | <style>
 6 |   .card {
 7 |     box-shadow: var(--shadow-3);
 8 |     border-radius: var(--radius-3);
 9 |     padding: var(--size-4);
10 |     max-width: fit-content;
11 |   }
12 | </style>
13 | 


--------------------------------------------------------------------------------
/src/content/config.ts:
--------------------------------------------------------------------------------
 1 | import { z, defineCollection } from "astro:content";
 2 | 
 3 | const product = defineCollection({
 4 |   type: "data",
 5 |   schema: z.object({
 6 |     name: z.string().max(50, {
 7 |       message: "You must keep the name to 50 characters or less",
 8 |     }),
 9 |     price: z.number(),
10 |     color: z.string(),
11 |     brand: z.string(),
12 |     category: z.enum([
13 |       "Automotive",
14 |       "Home & Garden",
15 |       "Fashion",
16 |       "Electronics",
17 |       "Toys",
18 |     ]),
19 |   }),
20 | });
21 | 
22 | export const collections = {
23 |   product,
24 | };
25 | 


--------------------------------------------------------------------------------
/src/content/product/1.yaml:
--------------------------------------------------------------------------------
1 | name: Product 1
2 | price: 9.99
3 | color: Red
4 | brand: ABC Company
5 | category: Electronics
6 | 


--------------------------------------------------------------------------------
/src/content/product/2.yaml:
--------------------------------------------------------------------------------
1 | name: Product 2
2 | price: 19.99
3 | color: Blue
4 | brand: XYZ Corporation
5 | category: Home & Garden
6 | 


--------------------------------------------------------------------------------
/src/content/product/3.yaml:
--------------------------------------------------------------------------------
1 | name: "Product 3"
2 | price: 49.99
3 | color: Black
4 | brand: DEF Enterprises
5 | category: Fashion
6 | 


--------------------------------------------------------------------------------
/src/content/product/4.yaml:
--------------------------------------------------------------------------------
1 | name: Product 4
2 | price: 12.99
3 | color: Green
4 | brand: 123 Industries
5 | category: Toys
6 | 


--------------------------------------------------------------------------------
/src/content/product/5.yaml:
--------------------------------------------------------------------------------
1 | name: Product 5
2 | price: 29.99
3 | color: Silver
4 | brand: GHI Corporation
5 | category: Automotive
6 | 


--------------------------------------------------------------------------------
/src/data/data3.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "name": "Jane Austen",
 4 |     "age": 41,
 5 |     "nationality": "British",
 6 |     "genre": ["Classic", "Romance"]
 7 |   },
 8 |   {
 9 |     "name": "Ernest Hemingway",
10 |     "age": 61,
11 |     "nationality": "American",
12 |     "genre": ["Literary Fiction"]
13 |   },
14 |   {
15 |     "name": "Toni Morrison",
16 |     "age": 88,
17 |     "nationality": "American",
18 |     "genre": ["Literary Fiction"]
19 |   },
20 |   {
21 |     "name": "Leo Tolstoy",
22 |     "age": 82,
23 |     "nationality": "Russian",
24 |     "genre": ["Classic", "Realism"]
25 |   },
26 |   {
27 |     "name": "Maya Angelou",
28 |     "age": 86,
29 |     "nationality": "American",
30 |     "genre": ["Autobiography", "Poetry"]
31 |   }
32 | ]
33 | 


--------------------------------------------------------------------------------
/src/data/data3.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | 
 3 | This is a list from my markdown file:
 4 | 
 5 | **name: Jane Austen**
 6 | 
 7 | - age: 41
 8 | - nationality: British
 9 | - genre: - Classic - Romance
10 | 
11 | **name: Ernest Hemingway**
12 | 
13 | - age: 61
14 | - nationality: American
15 | - genre:
16 |   - Literary Fiction
17 | 


--------------------------------------------------------------------------------
/src/data/data3.ts:
--------------------------------------------------------------------------------
 1 | const authors = [
 2 |   {
 3 |     name: "J.K. Rowling",
 4 |     age: 56,
 5 |     nationality: "British",
 6 |     genre: ["Fantasy", "Young Adult"],
 7 |   },
 8 |   {
 9 |     name: "Stephen King",
10 |     age: 74,
11 |     nationality: "American",
12 |     genre: ["Horror", "Thriller"],
13 |   },
14 |   {
15 |     name: "Haruki Murakami",
16 |     age: 72,
17 |     nationality: "Japanese",
18 |     genre: ["Fiction", "Magical Realism"],
19 |   },
20 |   {
21 |     name: "Agatha Christie",
22 |     age: 85,
23 |     nationality: "British",
24 |     genre: ["Mystery", "Detective Fiction"],
25 |   },
26 |   {
27 |     name: "Gabriel Garcia Marquez",
28 |     age: 87,
29 |     nationality: "Colombian",
30 |     genre: ["Magic Realism", "Literary Fiction"],
31 |   },
32 | ];
33 | 
34 | export default authors;
35 | 


--------------------------------------------------------------------------------
/src/data/data3_example2.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | 
 3 | This is a list from a second markdown file:
 4 | 
 5 | ### This is a heading 3
 6 | 
 7 | **name: Jane Austen**
 8 | 
 9 | - something
10 | - something else
11 | 


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference path="../.astro/types.d.ts" />
2 | /// <reference types="astro/client" />
3 | 


--------------------------------------------------------------------------------
/src/pages/endpoint.json.ts:
--------------------------------------------------------------------------------
 1 | import { getCollection } from "astro:content";
 2 | 
 3 | const products = await getCollection("product");
 4 | 
 5 | export const GET = async ({}) => {
 6 |   return new Response(JSON.stringify(products), {
 7 |     headers: {
 8 |       "content-type": "application/json",
 9 |     },
10 |     status: 200,
11 |   });
12 | };
13 | 


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
  1 | ---
  2 | import { getCollection } from "astro:content";
  3 | import Card from "../components/Card.astro";
  4 | import APICard from "../components/APICard";
  5 | 
  6 | // Data Method 1: Local Frontmatter Data
  7 | const data1 = ["Chris", "Jon", "Jes"];
  8 | 
  9 | // Data Method 2: Fetch Remote Data
 10 | type Post = {
 11 |   userId: number;
 12 |   id: number;
 13 |   title: string;
 14 |   body: string;
 15 | };
 16 | const res = await fetch("https://jsonplaceholder.typicode.com/posts");
 17 | const data2: Post[] = await res.json();
 18 | 
 19 | // Data Method 3: Import Local Files
 20 | import data3Json from "../data/data3.json";
 21 | import data3Ts from "../data/data3.ts";
 22 | const data3Glob = await Astro.glob("../data/**/*.md");
 23 | 
 24 | // Data Method 4: Content Collections
 25 | const data4 = await getCollection("product");
 26 | ---
 27 | 
 28 | <html lang="en">
 29 |   <head>
 30 |     <meta charset="utf-8" />
 31 |     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 32 |     <meta name="viewport" content="width=device-width" />
 33 |     <meta name="generator" content={Astro.generator} />
 34 |     <link rel="stylesheet" href="https://unpkg.com/open-props" />
 35 |     <link
 36 |       rel="stylesheet"
 37 |       href="https://unpkg.com/open-props/normalize.min.css"
 38 |     />
 39 | 
 40 |     <title>Astro</title>
 41 |   </head>
 42 |   <body>
 43 |     <h1>Astro Data Options</h1>
 44 |     <div class="card-wrapper">
 45 |       <Card>
 46 |         <h2>1: Local Frontmatter Data</h2>
 47 |         <ul>
 48 |           {data1.map((i) => <li>{i}</li>)}
 49 |         </ul>
 50 |       </Card>
 51 |       <Card>
 52 |         <h2>2: Fetch Remote Data</h2>
 53 |         <ul>
 54 |           {data2.slice(0, 4).map((i) => <li>{i.title}</li>)}
 55 |         </ul>
 56 |       </Card>
 57 |       <Card>
 58 |         <h2>3: Import Local Files</h2>
 59 |         <ul>
 60 |           {data3Json.map((i) => <li>{i.name}</li>)}
 61 |         </ul>
 62 |         <ul>
 63 |           {data3Ts.map((i) => <li>{i.name}</li>)}
 64 |         </ul>
 65 | 
 66 |         <!-- <Fragment set:html={data3Glob.map((post) => post.compiledContent())} />
 67 |         {
 68 |           data3Glob.map((post) => {
 69 |             const Content = post.Content;
 70 |             return <Content />;
 71 |           })
 72 |         } -->
 73 |       </Card>
 74 |       <Card>
 75 |         <h2>4: Content Collections</h2>
 76 |         <ul>
 77 |           {data4.map((i) => <li>{i.data.name}</li>)}
 78 |         </ul>
 79 |       </Card>
 80 |       <Card>
 81 |         <h2>5: Create JSON endpoints</h2>
 82 |         <APICard client:load />
 83 |       </Card>
 84 |     </div>
 85 |   </body>
 86 | </html>
 87 | 
 88 | <style is:global>
 89 |   body {
 90 |     padding: var(--size-4);
 91 |   }
 92 | 
 93 |   .card-wrapper {
 94 |     display: flex;
 95 |     flex-wrap: wrap;
 96 |     gap: var(--size-4);
 97 |     margin-block: var(--size-4);
 98 |   }
 99 | 
100 |   ul {
101 |     padding: var(--size-2);
102 |   }
103 | 
104 |   li {
105 |     display: flex;
106 |     flex-wrap: wrap;
107 |     place-items: center;
108 |     gap: var(--size-2);
109 |   }
110 | </style>
111 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "astro/tsconfigs/strict",
3 |   "compilerOptions": {
4 |     "jsx": "react-jsx",
5 |     "jsxImportSource": "react"
6 |   }
7 | }


--------------------------------------------------------------------------------