feat: add markdown and data fetching

.gitignore

@@ -125,11 +125,11 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
 data/
-client/src/graphql/generated/**
+generated/
 
 .image-cache
 
 styled-system
 .nx
 
-.strapi
+.strapi

apps/astro/.gitignore

@@ -19,4 +19,6 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
-.netlify
+.netlify
+
+generated/

apps/astro/codegen.prod.yml

@@ -0,0 +1,12 @@
+schema:
+  - 'https://api.ham-san.net/graphql'
+
+documents:
+  - ../../libs/graphql/**/*.gql
+
+generates:
+  src/graphql/generated/client.ts:
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-graphql-request'

apps/astro/codegen.yml

@@ -0,0 +1,12 @@
+schema:
+  - 'http://127.0.0.1:1337/graphql'
+
+documents:
+  - ../../libs/graphql/**/*.gql
+
+generates:
+  src/graphql/generated/server.ts:
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-graphql-request'

apps/astro/package.json

@@ -8,18 +8,24 @@
     "build": "astro check && astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "prepare": "panda codegen"
+    "prepare": "panda codegen",
+    "codegen": "graphql-codegen",
+    "codegen:prod": "graphql-codegen -c codegen.prod.yml"
   },
   "dependencies": {
     "@ark-ui/react": "^2.2.3",
     "@astrojs/check": "^0.5.10",
     "@astrojs/netlify": "^5.2.0",
     "@astrojs/react": "^3.1.0",
+    "@astropub/md": "^0.4.0",
     "@types/react": "^18.2.73",
     "@types/react-dom": "^18.2.23",
     "astro": "^4.5.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.0",
+    "remark-textr": "^6.1.0",
     "typescript": "^5.4.3"
   },
   "devDependencies": {

apps/astro/panda.config.ts

@@ -21,6 +21,11 @@ export default defineConfig({
   // Files to exclude
   exclude: [],
 
+  staticCss: {
+    recipes: {
+      text: ['*']
+    }
+  },
   // Useful for theme customization
   theme: {
     extend: theme

apps/astro/src/components/layout/Navigation.astro

@@ -13,8 +13,8 @@ const getURLWithLanguage = (value: string) => {
 };
 
 const getCurrentURLWithLanguage = (language: string) => {
-  const [, , currentPath] = Astro.url.pathname.split('/');
-  return `/${language}/${currentPath}`;
+  const [, , ...currentPath] = Astro.url.pathname.split('/');
+  return `/${language}/${currentPath.join('/')}`;
 };
 
 const NAVIGATION_LINKS = [

apps/astro/src/components/lib/Markdown.tsx

@@ -0,0 +1,55 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkTextr from 'remark-textr';
+import { Divider, styled } from 'styled-system/jsx';
+import { Code } from '../ui/code';
+import { Heading } from '../ui/heading';
+import { Link } from '../ui/link';
+import * as Table from '../ui/table';
+import { Text } from '../ui/text';
+// https://github.com/remarkjs/react-markdown
+export const Markdown = ({ content }: { content: string }) => {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkTextr, remarkGfm]}
+      components={{
+        h1: ({ node: _, ...props }) => <Heading as="h1" size="6xl" fontWeight="bold" {...props} />,
+        h2: ({ node: _, ...props }) => <Heading as="h2" size="5xl" fontWeight="bold" {...props} />,
+        h3: ({ node: _, ...props }) => <Heading as="h3" size="4xl" fontWeight="bold" {...props} />,
+        h4: ({ node: _, ...props }) => <Heading as="h4" size="3xl" fontWeight="bold" {...props} />,
+        h5: ({ node: _, ...props }) => <Heading as="h5" size="2xl" fontWeight="bold" {...props} />,
+        h6: ({ node: _, ...props }) => <Heading as="h6" size="xl" fontWeight="bold" {...props} />,
+        p: ({ node: _, ...props }) => <Text as="p" {...props} />,
+        strong: ({ ref: _, node: __, ...props }) => <Text as="span" fontWeight="bold" {...props} />,
+        a: ({ ref: _, node: __, ...props }) => <Link {...props} />,
+        hr: ({ ref: _, node: __, ...props }) => <Divider {...props} />,
+        blockquote: ({ ref: __, node: _, ...props }) => (
+          <styled.blockquote
+            borderLeftWidth="4px"
+            borderLeftStyle="solid"
+            borderLeftColor="border.default"
+            padding={4}
+            {...props}
+          />
+        ),
+        ul: ({ ref: _, node: __, ...props }) => (
+          <styled.ul pl="4" listStyleType="disc" {...props} />
+        ),
+        ol: ({ ref: _, node: __, ...props }) => (
+          <styled.ol pl="4" listStyleType="decimal" {...props} />
+        ),
+        li: ({ ref: _, node: __, ...props }) => <styled.li {...props} />,
+        code: ({ ref: _, node: __, ...props }) => <Code {...props} />,
+        table: ({ ref: _, node: __, ...props }) => <Table.Root {...props} />,
+        thead: ({ ref: _, node: __, ...props }) => <Table.Head {...props} />,
+        th: ({ ref: _, node: __, ...props }) => <Table.Header {...props} />,
+        tbody: ({ ref: _, node: __, ...props }) => <Table.Body {...props} />,
+        tr: ({ ref: _, node: __, ...props }) => <Table.Row {...props} />,
+        td: ({ ref: _, node: __, ...props }) => <Table.Cell {...props} />
+      }}
+    >
+      {/* {data} */}
+      {content}
+    </ReactMarkdown>
+  );
+};