feat: add language as post property (#151)

* feat: add language as post property

* update frontmatter.json

* style: remove extra space

* fix: remove unnecessary replacements

* feat: add `language` field to `new-post.js`

* style: format code style

* fix: use `siteConfig.lang` in `jsonLd`

* fix: use `siteConfig` when `entry.data` was empty
This commit is contained in:
Alan Ye 2024-08-27 23:52:30 +08:00 committed by GitHub
parent 856c2bb2c0
commit f79ee3482d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 20 additions and 6 deletions

View File

@ -55,6 +55,11 @@
"title": "draft", "title": "draft",
"name": "draft", "name": "draft",
"type": "boolean" "type": "boolean"
},
{
"title": "language",
"name": "language",
"type": "string"
} }
] ]
} }

View File

@ -44,6 +44,7 @@ image: ''
tags: [] tags: []
category: '' category: ''
draft: false draft: false
language: ''
--- ---
` `

View File

@ -9,6 +9,7 @@ const postsCollection = defineCollection({
image: z.string().optional().default(''), image: z.string().optional().default(''),
tags: z.array(z.string()).optional().default([]), tags: z.array(z.string()).optional().default([]),
category: z.string().optional().default(''), category: z.string().optional().default(''),
language: z.string().optional().default(''),
/* For internal use */ /* For internal use */
prevTitle: z.string().default(''), prevTitle: z.string().default(''),

View File

@ -21,9 +21,10 @@ interface Props {
title?: string title?: string
banner?: string banner?: string
description?: string description?: string
lang?: string
} }
let { title, banner, description } = Astro.props let { title, banner, description, lang } = Astro.props
// apply a class to the body element to decide the height of the banner, only used for initial page load // apply a class to the body element to decide the height of the banner, only used for initial page load
// Swup can update the body for each page visit, but it's after the page transition, causing a delay for banner height change // Swup can update the body for each page visit, but it's after the page transition, causing a delay for banner height change
@ -52,7 +53,11 @@ if (title) {
const favicons: Favicon[] = const favicons: Favicon[] =
siteConfig.favicon.length > 0 ? siteConfig.favicon : defaultFavicons siteConfig.favicon.length > 0 ? siteConfig.favicon : defaultFavicons
const siteLang = siteConfig.lang.replace('_', '-') // const siteLang = siteConfig.lang.replace('_', '-')
if (!lang) {
lang = `${siteConfig.lang}`
}
const siteLang = lang.replace('_', '-')
--- ---
<!DOCTYPE html> <!DOCTYPE html>

View File

@ -11,15 +11,16 @@ interface Props {
title?: string title?: string
banner?: string banner?: string
description?: string description?: string
lang?: string
} }
const { title, banner, description } = Astro.props const { title, banner, description, lang } = Astro.props
const hasBannerCredit = const hasBannerCredit =
siteConfig.banner.enable && siteConfig.banner.credit.enable siteConfig.banner.enable && siteConfig.banner.credit.enable
const hasBannerLink = !!siteConfig.banner.credit.url const hasBannerLink = !!siteConfig.banner.credit.url
--- ---
<Layout title={title} banner={banner} description={description}> <Layout title={title} banner={banner} description={description} lang={lang}>
<slot slot="head" name="head"></slot> <slot slot="head" name="head"></slot>
<div class="max-w-[var(--page-width)] min-h-screen grid grid-cols-[17.5rem_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto] <div class="max-w-[var(--page-width)] min-h-screen grid grid-cols-[17.5rem_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto]
mx-auto gap-4 relative px-0 md:px-4" mx-auto gap-4 relative px-0 md:px-4"

View File

@ -11,7 +11,7 @@ import { Icon } from 'astro-icon/components'
import { licenseConfig } from 'src/config' import { licenseConfig } from 'src/config'
import PostMetadata from '../../components/PostMeta.astro' import PostMetadata from '../../components/PostMeta.astro'
import ImageWrapper from '../../components/misc/ImageWrapper.astro' import ImageWrapper from '../../components/misc/ImageWrapper.astro'
import { profileConfig } from '../../config' import { profileConfig, siteConfig } from '../../config'
import { formatDateToYYYYMMDD } from '../../utils/date-utils' import { formatDateToYYYYMMDD } from '../../utils/date-utils'
export async function getStaticPaths() { export async function getStaticPaths() {
@ -41,10 +41,11 @@ const jsonLd = {
url: Astro.site, url: Astro.site,
}, },
datePublished: formatDateToYYYYMMDD(entry.data.published), datePublished: formatDateToYYYYMMDD(entry.data.published),
inLanguage: (entry.data.language ? entry.data.language.replace('_', '-') : siteConfig.lang.replace('_', '-')),
// TODO include cover image here // TODO include cover image here
} }
--- ---
<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description}> <MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.language}>
<script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script> <script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4"> <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
<div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ", <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",