hybridモードのウェブサイトをAstro v5にアップグレードするまでの一部始終

1
import cloudflare from '@astrojs/cloudflare';
2
/* ... */
3

4
export default defineConfig({
5
  output: 'hybrid',
6
  adapter: cloudflare({
7
    platformProxy: {
8
      enabled: true,
9
      persist: true,
10
    },
11
  }),
12
  /* ... */
13
})

1
import { defineCollection, reference, z } from 'astro:content';
2
import { glob } from 'astro/loaders';
3

4
const blog = defineCollection({
5
  type: 'content',
6
  loader: glob({ pattern: '**/*.mdx', base: './src/content/blog' }),
7
  schema: z.object({
8
    title: z.string(),
9
    description: z.string().optional(),
10
    publishedAt: z.coerce.date(),
11
    updatedAt: z.coerce.date().optional(),
12
    category: z.object({
13
      metadata: reference('categories'),
14
      slug: z.string(),
15
    }),
16
    tags: z.object({
17
      metadata: reference('tags'),
18
      slugList: z.array(z.string()).optional(),
19
    }),
20
    draft: z.enum(['draft', 'in progress', 'published']),
21
    level: z
22
      .union([
23
        z.literal(1),
24
        z.literal(2),
25
        z.literal(3),
26
        z.literal(4),
27
        z.literal(5),
28
      ])
29
      .optional(),
30
    thumbnail: z.string().optional(),
31
  }),
32
});
33

34
const taxonomySchema = z.object({
35
  title: z.string(),
36
  slug: z.string(),
37
  ruby: z.string(),
38
});
39

40
const categories = defineCollection({
41
  type: 'data',
42
  loader: glob({
43
    pattern: '**/*.{yml,yaml}',
44
    base: './src/content/categories',
45
  }),
46
  schema: z.array(taxonomySchema),
47
});
48

49
const tags = defineCollection({
50
  type: 'data',
51
  loader: glob({ pattern: '**/*.{yml,yaml}', base: './src/content/tags' }),
52
  schema: z.array(taxonomySchema),
53
});
54

55
/* ... */
56

57
export const collections = { blog, categories, tags, /* ... */ };

1
---
2
import { render } from 'astro:content';
3
import BlogLayout from '@/layouts/BlogLayout.astro';
4
import { getSortedContentEntries } from '@/lib/collections/contents';
5
import { mdxComponents } from '@/lib/mdx-components';
6
import { getSlugWithoutLocale } from '@/utils/get-slug-without-locale';
7
import { getIdWithoutLocale } from '@/utils/get-id-without-locale';
8
import { defaultLocale } from '@/utils/i18n/data';
9
import type { GetStaticPaths } from 'astro';
10

11
export const getStaticPaths = (async () => {
12
  const entries = await getSortedContentEntries('blog', defaultLocale);
13

14
  return entries.map((entry) => {
15
    const slug = getSlugWithoutLocale(entry.slug);
16
    const id = getIdWithoutLocale(entry.id);
17

18
    return { params: { slug }, props: { entry } };
19
    return { params: { id }, props: { entry } };
20
  });
21
}) satisfies GetStaticPaths;
22

23
const { entry } = Astro.props;
24
const { Content, headings } = await render(entry);
25
---
26

27
<BlogLayout entry={{ ...entry }} {headings}>
28
  <Content components={mdxComponents} />
29
</BlogLayout>

1
---
2
import { getSortedContentEntries } from '@/lib/collections/contents';
3
import { getIdWithoutLocale } from '@/utils/get-id-without-locale';
4
import { defaultLocale } from '@/utils/i18n/data';
5
import type { GetStaticPaths } from 'astro';
6
/* ... */
7

8
export const getStaticPaths = (async () => {
9
  const entries = await getSortedContentEntries('blog', defaultLocale);
10

11
  return entries.map((entry) => {
12
    const id = getIdWithoutLocale(entry.id);
13

14
    return { params: { slug: id }, props: { entry } };
15
  });
16
}) satisfies GetStaticPaths;
17

18
/* ... */
19
---
20

21
{/* ... */}

1
---
2
import { render } from 'astro:content';
3
import BlogLayout from '@/layouts/BlogLayout.astro';
4
import { getSortedContentEntries } from '@/lib/collections/contents';
5
import { mdxComponents } from '@/lib/mdx-components';
6
import { getIdWithoutLocale } from '@/utils/get-id-without-locale';
7
import { defaultLocale } from '@/utils/i18n/data';
8
import type { GetStaticPaths } from 'astro';
9

10
export const getStaticPaths = (async () => {
11
  const entries = await getSortedContentEntries('blog', defaultLocale);
12

13
  return entries.map((entry) => {
14
    const id = getIdWithoutLocale(entry.id);
15

16
    return { params: { id }, props: { entry } };
17
  });
18
}) satisfies GetStaticPaths;
19

20
const { entry } = Astro.props;
21
const { Content, headings } = await entry.render();
22
const { Content, headings } = await render(entry);
23
---
24

25
<BlogLayout entry={{ ...entry }} {headings}>
26
  <Content components={mdxComponents} />
27
</BlogLayout>

1
/// <reference path="../.astro/types.d.ts" />
2
/// <reference types="astro/client" />
3

4
// 以下、カスタムで型定義などがあれば追加

1
{
2
  "$schema": "https://json.schemastore.org/tsconfig",
3
  "extends": "astro/tsconfigs/strictest",
4
  "compilerOptions": {
5
    /* ... */
6
  },
7
  "include": [
8
    ".astro/types.d.ts",
9
    "**/*"
10
  ],
11
  "exclude": [
12
    "./dist",
13
    "./node_modules",
14
  ],
15
}