Merge pull request #32 from tatsutakein-jp/feature/GH-28

feat: ニュース一覧・詳細ページを追加

.env.sample

@@ -0,0 +1 @@
+BACKEND_URL=https://graphql-engine.asis-be.orb.local/v1/graphql

.github/workflows/cd.yml

@@ -17,6 +17,7 @@ jobs:
       branch: 'main'
       gh-app-id: ${{ vars.BOT_APP_ID }}
       pr-comment-enabled: false
+      backend-url: ${{ vars.STG_BACKEND_URL }}
     secrets:
       cloudflare-account-id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
       cloudflare-api-token: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.github/workflows/preview.yml

@@ -20,6 +20,7 @@ jobs:
       branch: 'preview'
       gh-app-id: ${{ vars.BOT_APP_ID }}
       pr-comment-enabled: true
+      backend-url: ${{ vars.DEV_BACKEND_URL }}
     secrets:
       cloudflare-account-id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
       cloudflare-api-token: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.github/workflows/production.yml

@@ -18,6 +18,7 @@ jobs:
       branch: 'main'
       gh-app-id: ${{ vars.BOT_APP_ID }}
       pr-comment-enabled: false
+      backend-url: ${{ vars.PROD_BACKEND_URL }}
     secrets:
       cloudflare-account-id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
       cloudflare-api-token: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.github/workflows/wc-deploy-cloudflare-pages.yml

@@ -15,6 +15,9 @@ on:
       pr-comment-enabled:
         required: true
         type: boolean
+      backend-url:
+        required: true
+        type: string
     secrets:
       gh-app-private-key:
         required: true
@@ -43,6 +46,9 @@ jobs:
       - name: Install deps
         run: bun install --frozen-lockfile
 
+      - name: Generate env
+        run: bun plop env -- --backendUrl "${{ inputs.backend-url }}"
+
       - name: Build
         run: bun run build
 

astro.config.mjs

@@ -1,9 +1,11 @@
-import { defineConfig } from 'astro/config'
-
+import cloudflare from '@astrojs/cloudflare'
 import sitemap from '@astrojs/sitemap'
+import { defineConfig } from 'astro/config'
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://asis.quest',
-  integrations: [sitemap()]
+  integrations: [sitemap()],
+  output: 'server',
+  adapter: cloudflare()
 })

package.json

@@ -21,9 +21,9 @@
     "plop": "plop"
   },
   "dependencies": {
+    "@astrojs/cloudflare": "11.0.1",
     "@astrojs/sitemap": "3.1.6",
-    "astro": "4.11.3",
-    "sharp": "0.33.4"
+    "astro": "4.11.3"
   },
   "devDependencies": {
     "@astrojs/check": "0.7.0",

plopfile.mjs

@@ -4,19 +4,40 @@
 export default function (plop) {
   plop.setGenerator('sample', {
     description: 'sample',
-    prompts: [{
-      type: 'input',
-      name: 'name',
-      message: 'sample name please'
-    }],
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'sample name please'
+      }
+    ],
     actions: [
       {
         type: 'addMany',
         templateFiles: 'templates/sample/**',
         destination: './sample/{{name}}',
         base: 'templates/sample',
-        abortOnFail: true,
-      },
+        abortOnFail: true
+      }
+    ]
+  })
+
+  plop.setGenerator('env', {
+    description: 'env',
+    prompts: [
+      {
+        type: 'input',
+        name: 'backendUrl',
+        message: 'backend url please'
+      }
+    ],
+    actions: [
+      {
+        type: 'add',
+        templateFile: 'templates/env/.env.hbs',
+        path: '.env',
+        force: true
+      }
     ]
-  });
-};
+  })
+}

src/components/For.astro

@@ -0,0 +1,23 @@
+---
+import Show from './Show.astro';
+
+interface Props<T> {
+	each: Iterable<T>;
+}
+
+const { each } = Astro.props;
+---
+
+{
+	(async function* () {
+		for await (const value of each) {
+			let html = await Astro.slots.render('default', [value]);
+			yield <Fragment set:html={html} />;
+			yield '\n';
+		}
+	})()
+}
+
+<Show when={!each.length}>
+	<slot name="fallback" />
+</Show>

src/components/Show.astro

@@ -0,0 +1,9 @@
+---
+interface Props<T> {
+	when: T | number | boolean | undefined | null;
+}
+
+const { when } = Astro.props;
+---
+
+{!!when ? <slot /> : <slot name="fallback" />}

src/lib/api.ts

@@ -0,0 +1,88 @@
+import type { News } from '@/types.ts'
+
+/**
+ * Fetches the GraphQL API
+ * @param operationsDoc
+ * @param operationName
+ * @param variables
+ */
+async function fetchGraphQL(
+  operationsDoc: string,
+  operationName: string,
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  variables: Record<string, any>
+) {
+  const result = await fetch(`${import.meta.env.BACKEND_URL}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      query: operationsDoc,
+      variables,
+      operationName
+    })
+  })
+  return await result.json()
+}
+
+/**
+ * Fetches the list of news
+ */
+export async function fetchNewsList(): Promise<News[]> {
+  const { errors, data } = await fetchGraphQL(
+    `
+query GetNewsList {
+  news {
+    title
+    slug
+    publishedAt
+    excerpt
+    coverImageUrl
+    content
+  }
+}
+`,
+    'GetNewsList',
+    {}
+  )
+
+  if (errors) {
+    // handle those errors like a pro
+    console.error(errors)
+  }
+
+  console.log(data)
+  return data.news as News[]
+}
+
+/**
+ * Fetches the list of news
+ */
+export async function fetchNewsBySlug(slug: string): Promise<News> {
+  const { errors, data } = await fetchGraphQL(
+    `
+query GetNewsBySlug($slug: String) {
+  news(where: {slug: {_eq: $slug}}) {
+    title
+    slug
+    publishedAt
+    excerpt
+    coverImageUrl
+    content
+  }
+}
+`,
+    'GetNewsBySlug',
+    {
+      slug
+    }
+  )
+
+  if (errors) {
+    // handle those errors like a pro
+    console.error(errors)
+  }
+
+  console.log(data)
+  // biome-ignore lint/style/noNonNullAssertion: <explanation>
+  return (data.news as News[])[0]!
+}

src/pages/404.astro

@@ -1,6 +1,8 @@
 ---
 import Hero from '../components/Hero.astro'
 import BaseLayout from '../layouts/BaseLayout.astro'
+
+export const prerender = true
 ---
 
 <BaseLayout title="Not Found" description="404 Error — this page was not found">

src/pages/index.astro

@@ -7,6 +7,8 @@ import Hero from '../components/Hero.astro'
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
+
+export const prerender = true
 ---
 
 <BaseLayout>

src/pages/news/[slug].astro

@@ -0,0 +1,16 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import { fetchNewsBySlug } from '../../lib/api'
+
+const { slug } = Astro.params as { slug: string }
+
+const news = await fetchNewsBySlug(slug)
+---
+
+<BaseLayout>
+  <div class="stack gap-20 lg:gap-48">
+    <h2>{news.title}</h2>
+    <p>{news.publishedAt}</p>
+    <div set:html={news.content} />
+  </div>
+</BaseLayout>

src/pages/news/index.astro

@@ -0,0 +1,22 @@
+---
+import For from '@/components/For.astro'
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import { fetchNewsList } from '@/lib/api'
+import type { News } from '@/types'
+
+const newsList = await fetchNewsList()
+---
+
+<BaseLayout>
+  <ul class="stack gap-20 lg:gap-48">
+    <For each={newsList}>{(news: News) => (
+      <li>
+        <a href=`news/${news.slug}`>
+          <h2>{news.title}</h2>
+          <p>{news.publishedAt}</p>
+          <p>{news.excerpt}</p>
+        </a>
+      </li>
+    )}</For>
+  </ul>
+</BaseLayout>

src/types.ts

@@ -0,0 +1,8 @@
+export interface News {
+  title: string
+  slug: string
+  publishedAt: number
+  excerpt: string
+  coverImageUrl: string
+  content: string
+}

templates/env/.env.hbs

@@ -0,0 +1 @@
+BACKEND_URL={{backendUrl}}