Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Added better description

This commit is contained in:
DrMint 2022-06-08 23:04:27 +02:00
parent 46c4fece41
commit 97c8670924
6 changed files with 83 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/AppLayout.tsx
View File

@ -117,6 +117,8 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
const ogTitle = const ogTitle =
title ?? navTitle ?? prettySlug(router.asPath.split("/").pop()); title ?? navTitle ?? prettySlug(router.asPath.split("/").pop());
const metaTitle = `${titlePrefix} - ${ogTitle}`;
const metaDescription = description ?? langui.default_description ?? ""; const metaDescription = description ?? langui.default_description ?? "";
useEffect(() => { useEffect(() => {
@ -191,16 +193,16 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
mobile:grid-rows-[1fr_5rem] mobile:[grid-template-areas:'content''navbar']`} mobile:grid-rows-[1fr_5rem] mobile:[grid-template-areas:'content''navbar']`}
> >
<Head> <Head>
<title>{`${titlePrefix} - ${ogTitle}`}</title> <title>{metaTitle}</title>
<meta
name="twitter:title"
content={`${titlePrefix} - ${ogTitle}`}
></meta>
<meta name="description" content={metaDescription} /> <meta name="description" content={metaDescription} />
<meta name="twitter:description" content={metaDescription}></meta>
<meta name="twitter:title" content={metaTitle}></meta>
<meta name="twitter:description" content={metaDescription}></meta>
<meta name="twitter:card" content="summary_large_image"></meta>
<meta name="twitter:image" content={metaImage.image}></meta>
<meta property="og:title" content={metaTitle} />
<meta property="og:description" content={metaDescription} />
<meta property="og:image" content={metaImage.image}></meta> <meta property="og:image" content={metaImage.image}></meta>
<meta property="og:image:secure_url" content={metaImage.image}></meta> <meta property="og:image:secure_url" content={metaImage.image}></meta>
<meta <meta
@ -213,9 +215,6 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
></meta> ></meta>
<meta property="og:image:alt" content={metaImage.alt}></meta> <meta property="og:image:alt" content={metaImage.alt}></meta>
<meta property="og:image:type" content="image/jpeg"></meta> <meta property="og:image:type" content="image/jpeg"></meta>
<meta name="twitter:card" content="summary_large_image"></meta>
<meta name="twitter:image" content={metaImage.image}></meta>
</Head> </Head>
{/* Background when navbar is opened */} {/* Background when navbar is opened */}

6
src/components/PostPage.tsx
View File

@ -1,4 +1,5 @@
import { AppStaticProps } from "graphql/getAppStaticProps"; import { AppStaticProps } from "graphql/getAppStaticProps";
import { getDescription } from "helpers/description";
import { prettySlug } from "helpers/formatters"; import { prettySlug } from "helpers/formatters";
import { getStatusDescription } from "helpers/others"; import { getStatusDescription } from "helpers/others";
import { Immutable, PostWithTranslations } from "helpers/types"; import { Immutable, PostWithTranslations } from "helpers/types";
@ -168,6 +169,11 @@ export function PostPage(props: Immutable<Props>): JSX.Element {
return ( return (
<AppLayout <AppLayout
navTitle={title} navTitle={title}
description={getDescription({
langui: langui,
description: selectedTranslation?.excerpt,
categories: post.categories,
})}
contentPanel={contentPanel} contentPanel={contentPanel}
subPanel={subPanel} subPanel={subPanel}
thumbnail={thumbnail ?? undefined} thumbnail={thumbnail ?? undefined}

57
src/helpers/description.ts Normal file
View File

@ -0,0 +1,57 @@
import { AppStaticProps } from "graphql/getAppStaticProps";
import { prettySlug } from "./formatters";
import { Content, Immutable } from "./types";
interface Description {
langui: AppStaticProps["langui"];
description?: string | null | undefined;
type?: Immutable<Content["type"]>;
categories?: Immutable<Content["categories"]>;
}
export function getDescription(props: Description): string {
const { langui, description: text, type, categories } = props;
let description = "";
// TEXT
if (text) {
description += prettyMarkdown(text);
description += "\n\n";
}
// TYPE
if (type?.data) {
description += `${langui.type}: `;
description += `(${
type.data.attributes?.titles?.[0]?.title ??
prettySlug(type.data.attributes?.slug)
})`;
description += "\n";
}
// CATEGORIES
if (categories?.data && categories.data.length > 0) {
description += `${langui.categories}: `;
description += prettyChip(
categories.data.map((category) => category.attributes?.short)
);
description += "\n";
}
return description;
}
function prettyMarkdown(markdown: string): string {
return markdown.replace(/[*]/gu, "").replace(/[_]/gu, "");
}
function prettyChip(items: (string | undefined)[]): string {
return items
.filter((item) => item !== undefined)
.map((item) => `(${item})`)
.join(" ");
}

2
src/helpers/types.ts
View File

@ -9,7 +9,7 @@ export interface PostWithTranslations extends Omit<Post, "translations"> {
translations: NonNullable<Post["translations"]>; translations: NonNullable<Post["translations"]>;
} }
type Content = NonNullable< export type Content = NonNullable<
NonNullable<GetContentTextQuery["contents"]>["data"][number]["attributes"] NonNullable<GetContentTextQuery["contents"]>["data"][number]["attributes"]
>; >;

26
src/pages/contents/[slug]/index.tsx
View File

@ -18,6 +18,7 @@ import { ToolTip } from "components/ToolTip";
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps"; import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
import { getReadySdk } from "graphql/sdk"; import { getReadySdk } from "graphql/sdk";
import { getNextContent, getPreviousContent } from "helpers/contents"; import { getNextContent, getPreviousContent } from "helpers/contents";
import { getDescription } from "helpers/description";
import { import {
prettyinlineTitle, prettyinlineTitle,
prettyLanguage, prettyLanguage,
@ -389,24 +390,6 @@ export default function Content(props: Immutable<Props>): JSX.Element {
</ContentPanel> </ContentPanel>
); );
let description = "";
if (content.type?.data) {
description += `${langui.type}: `;
description +=
content.type.data.attributes?.titles?.[0]?.title ??
prettySlug(content.type.data.attributes?.slug);
description += "\n";
}
if (content.categories?.data && content.categories.data.length > 0) {
description += `${langui.categories}: `;
description += content.categories.data
.map((category) => category.attributes?.short)
.join(" | ");
description += "\n";
}
return ( return (
<AppLayout <AppLayout
navTitle={ navTitle={
@ -418,10 +401,15 @@ export default function Content(props: Immutable<Props>): JSX.Element {
) )
: prettySlug(content.slug) : prettySlug(content.slug)
} }
description={getDescription({
langui: langui,
description: selectedTranslation?.description,
type: content.type,
categories: content.categories,
})}
thumbnail={content.thumbnail?.data?.attributes ?? undefined} thumbnail={content.thumbnail?.data?.attributes ?? undefined}
contentPanel={contentPanel} contentPanel={contentPanel}
subPanel={subPanel} subPanel={subPanel}
description={description}
{...props} {...props}
/> />
); );

16
src/pages/contents/index.tsx
View File

@ -244,20 +244,8 @@ export async function getStaticProps(
}); });
if (!contents.contents) return { notFound: true }; if (!contents.contents) return { notFound: true };
contents.contents.data.sort((a, b) => { contents.contents.data.sort((a, b) => {
const titleA = a.attributes?.translations?.[0] const titleA = a.attributes?.slug ?? "";
? prettyinlineTitle( const titleB = b.attributes?.slug ?? "";
a.attributes.translations[0].pre_title,
a.attributes.translations[0].title,
a.attributes.translations[0].subtitle
)
: a.attributes?.slug ?? "";
const titleB = b.attributes?.translations?.[0]
? prettyinlineTitle(
b.attributes.translations[0].pre_title,
b.attributes.translations[0].title,
b.attributes.translations[0].subtitle
)
: b.attributes?.slug ?? "";
return titleA.localeCompare(titleB); return titleA.localeCompare(titleB);
}); });