Hướng dẫn mã hóa bài viết Astro Blog

1
// Define blog collection
2
const blog = defineCollection({
3
  // Load Markdown and MDX files in the `src/content/blog/` directory.
4
  loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
5
  // Required
6
  schema: ({ image }) =>
7
    z.object({
8
      // Required
9
      title: z.string().max(60),
10
      description: z.string().max(160),
11
      publishDate: z.coerce.date(),
12
      // Optional
13
      updatedDate: z.coerce.date().optional(),
14
      heroImage: z
15
        .object({
16
          src: image(),
17
          alt: z.string().optional(),
18
          inferSize: z.boolean().optional(),
19
          width: z.number().optional(),
20
          height: z.number().optional(),
21
          color: z.string().optional()
22
        })
23
        .optional(),
24
      tags: z.array(z.string()).default([]).transform(removeDupsAndLowerCase),
25
      language: z.string().optional(),
26
      draft: z.boolean().default(false),
27
      // Special fields
28
      comment: z.boolean().default(true),
29
      // Thêm password
30
      password: z.array(
31
          z.object({
32
            question: z.string().min(1, 'Câu hỏi không được để trống'),
33
            answer: z.string().min(1, 'Câu trả lời không được để trống')
34
          })
35
        ).default([])
36
    })
37
})

1
import { render, type CollectionEntry } from 'astro:content'
2

3
import { getBlogCollection, sortMDByDate } from 'astro-inlove/server'
4
import PostLayout from '@/layouts/BlogPost.astro'
5

6
export const prerender = true
7

8
export async function getStaticPaths() {
9
  const posts = sortMDByDate(await getBlogCollection())
10
  return posts.map((post) => ({
11
    params: { id: post.id },
12
    props: { post, posts }
13
  }))
14
}
15

16
type Props = {
17
  post: CollectionEntry<'blog'>
18
  posts: CollectionEntry<'blog'>[]
19
}
20

21
const { post, posts } = Astro.props
22
const { Content, headings, remarkPluginFrontmatter } = await render(post)

1
import { render, type CollectionEntry } from 'astro:content'
2

3
import { getBlogCollection, sortMDByDate } from 'astro-inlove/server'
4
import PostLayout from '@/layouts/BlogPost.astro'
5

6
export const prerender = false
7

8
type Props = {
9
  post: CollectionEntry<'blog'>
10
  posts: CollectionEntry<'blog'>[]
11
}
12

13
const { id } = Astro.params
14
const allPosts = await getBlogCollection()
15
const posts = sortMDByDate(
16
  allPosts.filter((p) => p.collection === 'blog')
17
) as CollectionEntry<'blog'>[]
18
const post = posts.find((p) => p.id === id)
19
if (!post) {
20
  throw new Error(`Blog post not found: ${id}`)
21
}
22

23
const { Content, headings, remarkPluginFrontmatter } = await render(post)

1
<template>
2
    <div
3
        class="relative mb-8 pl-4 border-l-2 border-foreground/10 text-left text-sm sm:text-base text-muted-foreground leading-relaxed">
4
        Bài viết hiện tại là bài viết mã hóa<br />
5
        Vui lòng trả lời câu hỏi để có quyền xem bài viết
6
    </div>
7
    <div class="grid gap-3.5 sm:grid-cols-1 sm:gap-4 lg:grid-cols-2 [&>*:only-child]:lg:col-span-2">
8
        <div class="not-prose block relative rounded-2xl border px-5 py-3 transition-all hover:border-foreground/25 hover:shadow-sm cursor-pointer"
9
            v-for="(item, index) in questions" :key="index">
10
            <div class="flex flex-col gap-y-1.5">
11
                <div class="flex flex-col gap-y-0.5">
12
                    <h2 class="text-lg font-medium">Câu hỏi {{ index + 1 }}</h2>
13
                    <p class="text-muted-foreground">{{ item }}</p>
14
                </div>
15
                <div>
16
                    <input v-model="answers[index]" type="text"
17
                        class="flex-1 w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-1" />
18
                </div>
19
            </div>
20
        </div>
21
    </div>
22
    <div class="relative w-full text-end mt-3.5">
23
        <button
24
            class="rounded-lg bg-muted px-8 py-2 text-muted-foreground text-sm hover:bg-primary-foreground transition"
25
            :disabled="loading" @click="verifyAnswer">
26
            {{ loading ? 'Đang xác thực...' : 'Xác thực' }}
27
        </button>
28
    </div>
29
</template>
30

31
<script setup lang="ts">
32
import { reactive, ref } from 'vue';
33
import { showToast } from '@/plugins/toast'
34

35
const loading = ref(false);
36

37
const props = defineProps<{
38
    slug: string;
39
    questions: string[];
40
}>();
41

42
const answers = reactive<string[]>(Array(props.questions.length).fill(''));
43

44
async function verifyAnswer() {
45
    loading.value = true
46
    const path = window.location.pathname
47
    const formData = new FormData()
48
    answers.forEach((a, i) => formData.append(`answer_${i}`, a))
49
    formData.append(`path`, path)
50
    const res = await fetch(`/api/verify?slug=${props.slug}`, {
51
        method: 'POST',
52
        body: formData,
53
        credentials: 'same-origin',
54
    });
55
    const data = await res.json()
56
    if (res.ok && data.success) {
57
        window.location.reload()
58
    } else {
59
        showToast({ message: data.error || 'Xác thực thất bại' })
60
    }
61
    loading.value = false
62
}
63
</script>

1
import crypto from 'crypto'
2
import type { APIRoute } from 'astro'
3
import { getCollection } from 'astro:content'
4

5
const SECRET =
6
  process.env.COOKIE_SECRET || 'q1W2e3R4t5Y6u7I8o9P0aBcDeFgHiJkLmNoPqRsTuVwXyZ0123456789-_'
7

8
// Dùng HMAC signature
9
function sign(value: string) {
10
  return crypto.createHmac('sha256', SECRET).update(value).digest('base64url')
11
}
12

13
// Tạo giá trị cookie đã ký
14
function makeSignedCookieValue(slug: string, maxAgeSec = 86400) {
15
  const expires = Math.floor(Date.now() / 1000) + maxAgeSec
16
  const payload = `${slug}:${expires}`
17
  const sig = sign(payload)
18
  return `${payload}:${sig}`
19
}
20

21
// Xác thực giá trị cookie đã ký
22
export function verifySignedCookieValue(cookieValue: string | null | undefined) {
23
  if (!cookieValue) return false
24
  const parts = cookieValue.split(':')
25
  if (parts.length !== 3) return false
26
  const [slug, expiresStr, sig] = parts
27
  const payload = `${slug}:${expiresStr}`
28
  const expectedSig = sign(payload)
29
  if (!crypto.timingSafeEqual(Buffer.from(sig), Buffer.from(expectedSig))) return false
30
  if (parseInt(expiresStr, 10) < Math.floor(Date.now() / 1000)) return false
31
  return slug
32
}
33

34
export const POST: APIRoute = async ({ request, url }) => {
35
  const slug = new URL(url).searchParams.get('slug')
36
  if (!slug)
37
    return new Response(JSON.stringify({ error: 'Yêu cầu không hợp lệ' }), {
38
      status: 400,
39
      headers: { 'Content-Type': 'application/json' }
40
    })
41
  const posts = await getCollection<'blog'>('blog')
42
  const post = posts.find((p) => p.id === slug)
43
  if (!post)
44
    return new Response(JSON.stringify({ error: 'Bài viết không tồn tại' }), {
45
      status: 404,
46
      headers: { 'Content-Type': 'application/json' }
47
    })
48
  const formData = await request.formData()
49
  const password = post.data.password || []
50
  const correct = password.every((p, i) => {
51
    const answer = formData.get(`answer_${i}`)?.toString().trim().toLowerCase()
52
    return answer === p.answer.trim().toLowerCase()
53
  })
54
  if (!correct) {
55
    return new Response(JSON.stringify({ error: 'Câu trả lời sai' }), {
56
      status: 401,
57
      headers: { 'Content-Type': 'application/json' }
58
    })
59
  }
60
  const path = formData.get(`path`)?.toString().trim()
61
  const cookieVal = makeSignedCookieValue(slug, 24 * 3600)
62
  const headers = new Headers()
63
  headers.append(
64
    'Set-Cookie',
65
    `verified-${slug}=${cookieVal}; Path=${path}; HttpOnly; Secure; SameSite=Lax; Max-Age=86400`
66
  )
67
  return new Response(JSON.stringify({ success: true }), {
68
    status: 200,
69
    headers: {
70
      'Content-Type': 'application/json',
71
      'Set-Cookie': `verified-${slug}=${cookieVal}; Path=${path}; HttpOnly; Secure; SameSite=Lax; Max-Age=86400`
72
    }
73
  })
74
}

1
---
2
import type { MarkdownHeading } from 'astro'
3
import type { CollectionEntry } from 'astro:content'
4

5
// Plugin styles
6
import 'katex/dist/katex.min.css'
7

8
import { MediumZoom } from 'astro-inlove/advanced'
9
import { ArticleBottom, Hero } from 'astro-inlove/components/pages'
10
import PageLayout from '@/layouts/ContentLayout.astro'
11
import { verifySignedCookieValue } from '@/pages/api/verify'
12
import Copyright from '@/components/custom/Copyright.astro'
13
import TOC from '@/components/custom/TOC.astro'
14
import PasswordForm from '@/components/vue/PasswordForm.vue'
15
import { Comment, PageInfo } from '@/components/waline'
16
import { integ } from '@/site-config'
17

18
interface Props {
19
  post: CollectionEntry<'blog'>
20
  posts: CollectionEntry<'blog'>[]
21
  headings: MarkdownHeading[]
22
  remarkPluginFrontmatter: Record<string, unknown>
23
}
24

25
const {
26
  post: { id, data },
27
  posts,
28
  headings,
29
  remarkPluginFrontmatter
30
} = Astro.props
31

32
const {
33
  description,
34
  heroImage,
35
  publishDate,
36
  title,
37
  updatedDate,
38
  draft: isDraft,
39
  comment: enableComment
40
} = data
41

42
const socialImage = heroImage
43
  ? typeof heroImage.src === 'string'
44
    ? heroImage.src
45
    : heroImage.src.src
46
  : '/images/social-card.png'
47
const articleDate = updatedDate?.toISOString() ?? publishDate.toISOString()
48
const primaryColor = data.heroImage?.color ?? 'hsl(var(--primary) / var(--un-text-opacity))'
49

50
// Đọc cookie và xác thực
51
const cookieHeader = Astro.request.headers.get('cookie')
52
let verified = false
53
if (cookieHeader) {
54
  const cookies = Object.fromEntries(
55
    cookieHeader.split(';').map((s) => {
56
      const [k, v] = s.trim().split('=')
57
      return [k, v]
58
    })
59
  )
60
  const result = verifySignedCookieValue(cookies[`verified-${id}`])
61
  if (result && result === id) verified = true
62
}
63

64
const password = data.password || []
65
const questions = password.map((p) => p.question)
66
if (questions.length == 0) {
67
  verified = true
68
}
69
---
70

71
<PageLayout
72
  meta={{ articleDate, description, ogImage: socialImage, title }}
73
  highlightColor={primaryColor}
74
  back='/blog'
75
>
76
  {verified && !!headings.length && <TOC {headings} slot='sidebar' />}
77

78
  <Hero {data} {remarkPluginFrontmatter} slot='header'>
79
    <Fragment slot='description'>
80
      {!isDraft && enableComment && <PageInfo comment class='mt-1' />}
81
    </Fragment>
82
  </Hero>
83

84
  {verified ? <slot /> : <PasswordForm slug={id} questions={questions} client:load />}
85

86
  <Fragment slot='bottom'>
87
    {/* Copyright */}
88
    <Copyright {data} />
89
    {/* Article recommend */}
90
    <ArticleBottom collections={posts} {id} class='mt-3 sm:mt-6' />
91
    {/* Comment */}
92
    {!isDraft && enableComment && <Comment class='mt-3 sm:mt-6' />}
93
  </Fragment>
94

95
  <slot name='bottom-sidebar' slot='bottom-sidebar' />
96
</PageLayout>
97

98
{integ.mediumZoom.enable && <MediumZoom />}