From dca20074fb93a1e58e5a7efbf51e975f9f360018 Mon Sep 17 00:00:00 2001 From: wappon28dev Date: Wed, 3 Jul 2024 01:23:59 +0900 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Head=20=E3=82=BF=E3=82=B0=E3=81=8C?= =?UTF-8?q?=E6=AD=A3=E3=81=97=E3=81=8F=E3=83=93=E3=83=AB=E3=83=89=E3=81=95?= =?UTF-8?q?=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/lib/assets/info.ts | 2 +- src/lib/components/HeadTags.svelte | 32 -------------------- src/lib/utils/types/microcms.ts | 4 +-- src/routes/+layout.svelte | 10 +++++-- src/routes/+layout.ts | 39 +++++++++++++++++++++++++ src/routes/+page.svelte | 4 --- src/routes/about/+page.server.ts | 12 ++++++++ src/routes/about/+page.svelte | 3 -- src/routes/blogs/+page.server.ts | 6 ++++ src/routes/blogs/+page.svelte | 3 -- src/routes/blogs/[slug]/+page.server.ts | 26 +++++++++++++++++ src/routes/blogs/[slug]/+page.svelte | 7 ----- 13 files changed, 95 insertions(+), 54 deletions(-) delete mode 100644 src/lib/components/HeadTags.svelte create mode 100644 src/routes/about/+page.server.ts diff --git a/package.json b/package.json index 95ac23e..ba29972 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "bits-ui": "^0.21.2", "cheerio": "^1.0.0-rc.12", "highlight.js": "^11.9.0", + "just-extend": "^6.2.0", "microcms-js-sdk": "^3.1.0", "nanostores": "^0.10.2", "the-new-css-reset": "^1.11.2" diff --git a/src/lib/assets/info.ts b/src/lib/assets/info.ts index 4bb8a24..df587d5 100644 --- a/src/lib/assets/info.ts +++ b/src/lib/assets/info.ts @@ -8,7 +8,7 @@ export const INFO = { title: "MISC - 愛工大名電 情報システム部", description: "愛工大名電 情報システム部の公式サイトです。", }, - url: "https://mise-mdn.dev", + url: "https://misc-mdn.dev", internal: { id: "misc-mdn", localStorageVersion: "1", diff --git a/src/lib/components/HeadTags.svelte b/src/lib/components/HeadTags.svelte deleted file mode 100644 index 12281f7..0000000 --- a/src/lib/components/HeadTags.svelte +++ /dev/null @@ -1,32 +0,0 @@ - - - diff --git a/src/lib/utils/types/microcms.ts b/src/lib/utils/types/microcms.ts index e2431b7..3fcda09 100644 --- a/src/lib/utils/types/microcms.ts +++ b/src/lib/utils/types/microcms.ts @@ -11,9 +11,9 @@ type DateType = { revisedAt: string; }; type Structure = T extends "get" - ? { id: string } & DateType & Required

+ ? { id: string } & DateType & P : T extends "gets" - ? GetsType<{ id: string } & DateType & Required

> + ? GetsType<{ id: string } & DateType & P> : Partial & (T extends "patch" ? Partial

: P); export type Blogs = Structure< diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 52d2c54..670bf0a 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,7 +1,9 @@ @@ -26,7 +32,7 @@ - +

diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts index e325c17..a0501f5 100644 --- a/src/routes/+layout.ts +++ b/src/routes/+layout.ts @@ -1,2 +1,41 @@ +import type { MetaTagsProps } from "svelte-meta-tags"; +import type { LayoutLoad } from "./$types"; +import { INFO } from "$lib/assets/info.js"; + +export const load: LayoutLoad = ({ url }) => { + const image = new URL("/images/ogp.png", INFO.url).href; + + const baseMetaTags = Object.freeze({ + title: INFO.about.title, + description: INFO.about.description, + canonical: new URL(url.pathname, url.origin).href, + openGraph: { + type: "website", + url: new URL(url.pathname, url.origin).href, + locale: "ja_JP", + title: INFO.about.title, + description: INFO.about.description, + siteName: INFO.about.title, + images: [ + { + url: image, + width: 1200, + height: 630, + }, + ], + }, + twitter: { + cardType: "summary_large_image", + title: INFO.about.title, + description: INFO.about.description, + image: image, + }, + } as const satisfies MetaTagsProps); + + return { + baseMetaTags, + }; +}; + export const prerender = true; export const trailingSlash = "always"; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index b80affd..ceb3d63 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,8 +1,6 @@ - -

夢が現実になる、未来への一歩を

diff --git a/src/routes/about/+page.server.ts b/src/routes/about/+page.server.ts new file mode 100644 index 0000000..eed1050 --- /dev/null +++ b/src/routes/about/+page.server.ts @@ -0,0 +1,12 @@ +import type { MetaTagsProps } from "svelte-meta-tags"; +import type { PageServerLoad } from "./$types"; + +export const load: PageServerLoad = async () => { + const pageMetaTags = Object.freeze({ + title: "About", + } as const satisfies MetaTagsProps); + + return { + pageMetaTags, + }; +}; diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index b4e58d3..d01ab5e 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -1,12 +1,9 @@ - -

about

diff --git a/src/routes/blogs/+page.server.ts b/src/routes/blogs/+page.server.ts index eaba214..3e47a5c 100644 --- a/src/routes/blogs/+page.server.ts +++ b/src/routes/blogs/+page.server.ts @@ -1,10 +1,16 @@ +import type { MetaTagsProps } from "svelte-meta-tags"; import type { PageServerLoad } from "./$types"; import { getContentList } from "$lib/utils/services/microcms"; export const load: PageServerLoad = async () => { const res = await getContentList("blogs"); + const pageMetaTags = Object.freeze({ + title: "Blogs", + } as const satisfies MetaTagsProps); + return { blogList: res, + pageMetaTags, }; }; diff --git a/src/routes/blogs/+page.svelte b/src/routes/blogs/+page.svelte index 07f6c3f..3945798 100644 --- a/src/routes/blogs/+page.svelte +++ b/src/routes/blogs/+page.svelte @@ -1,14 +1,11 @@ - -

blogs

diff --git a/src/routes/blogs/[slug]/+page.server.ts b/src/routes/blogs/[slug]/+page.server.ts index c44b1f1..16734bc 100644 --- a/src/routes/blogs/[slug]/+page.server.ts +++ b/src/routes/blogs/[slug]/+page.server.ts @@ -1,10 +1,36 @@ +import type { MetaTagsProps } from "svelte-meta-tags"; import type { PageServerLoad } from "./$types"; +import { INFO } from "$lib/assets/info"; import { getContentDetail } from "$lib/utils/services/microcms"; export const load: PageServerLoad = async ({ params }) => { const { slug } = params; const res = await getContentDetail("blogs", slug); + + const title = `${res.title} | Blogs | ${INFO.about.title}`; + const description = res.description ?? INFO.about.description; + const image = res.ogpImg?.url ?? new URL("/images/ogp.png", INFO.url).href; + const pageMetaTags = Object.freeze({ + title, + openGraph: { + title, + description, + images: [ + { + url: image, + }, + ], + }, + twitter: { + cardType: "summary_large_image", + title, + description, + image, + }, + } as const satisfies MetaTagsProps); + return { detail: res, + pageMetaTags, }; }; diff --git a/src/routes/blogs/[slug]/+page.svelte b/src/routes/blogs/[slug]/+page.svelte index e3bd894..7b09a07 100644 --- a/src/routes/blogs/[slug]/+page.svelte +++ b/src/routes/blogs/[slug]/+page.svelte @@ -1,15 +1,8 @@ - -