Better Markdawn and auto-generated tables of content #10

Merged
DrMint merged 4 commits from develop into main 2022-03-12 13:04:12 +00:00
7 changed files with 414 additions and 128 deletions
Showing only changes of commit 6d3a9c84b3 - Show all commits

View File

@ -109,6 +109,12 @@ query getWebsiteInterface($language_code: String) {
translation_notice
source_language
pronouns
no_category
item
items
content
result
results
}
}
}
@ -1142,3 +1148,77 @@ query getLanguages {
}
}
}
query getPost($slug: String, $language_code: String) {
posts(filters: { slug: { eq: $slug } }) {
data {
id
attributes {
slug
publishedAt
updatedAt
authors {
data {
id
attributes {
username
anonymize
anonymous_code
pronouns
bio(filters: { language: { code: { eq: $language_code } } }) {
bio
}
languages {
data {
attributes {
code
}
}
}
avatar {
data {
attributes {
name
alternativeText
caption
width
height
url
}
}
}
}
}
}
categories {
data {
id
attributes {
name
short
}
}
}
hidden
translations(filters: { language: { code: { eq: $language_code } } }) {
Status
title
excerpt
thumbnail {
data {
attributes {
name
alternativeText
caption
width
height
url
}
}
}
body
}
}
}
}
}

View File

@ -48,6 +48,13 @@ export enum Enum_Componentmetadatavideo_Resolution {
QuadHd_2160p = "QuadHD_2160p",
}
export enum Enum_Componenttranslationsposts_Status {
Incomplete = "Incomplete",
Draft = "Draft",
Review = "Review",
Done = "Done",
}
export enum Enum_Componenttranslationschronologyitem_Status {
Incomplete = "Incomplete",
Draft = "Draft",
@ -191,6 +198,12 @@ export type GetWebsiteInterfaceQuery = {
translation_notice: string;
source_language: string;
pronouns: string;
no_category: string;
item: string;
items: string;
content: string;
result: string;
results: string;
};
}>;
};
@ -1525,3 +1538,100 @@ export type GetLanguagesQuery = {
}>;
};
};
export type GetPostQueryVariables = Exact<{
slug: InputMaybe<Scalars["String"]>;
language_code: InputMaybe<Scalars["String"]>;
}>;
export type GetPostQuery = {
__typename: "Query";
posts: {
__typename: "PostEntityResponseCollection";
data: Array<{
__typename: "PostEntity";
id: string;
attributes: {
__typename: "Post";
slug: string;
publishedAt: any;
updatedAt: any;
hidden: boolean;
authors: {
__typename: "RecorderRelationResponseCollection";
data: Array<{
__typename: "RecorderEntity";
id: string;
attributes: {
__typename: "Recorder";
username: string;
anonymize: boolean;
anonymous_code: string;
pronouns: string;
bio: Array<{
__typename: "ComponentTranslationsBio";
bio: string;
}>;
languages: {
__typename: "LanguageRelationResponseCollection";
data: Array<{
__typename: "LanguageEntity";
attributes: { __typename: "Language"; code: string };
}>;
};
avatar: {
__typename: "UploadFileEntityResponse";
data: {
__typename: "UploadFileEntity";
attributes: {
__typename: "UploadFile";
name: string;
alternativeText: string;
caption: string;
width: number;
height: number;
url: string;
};
};
};
};
}>;
};
categories: {
__typename: "CategoryRelationResponseCollection";
data: Array<{
__typename: "CategoryEntity";
id: string;
attributes: {
__typename: "Category";
name: string;
short: string;
};
}>;
};
translations: Array<{
__typename: "ComponentTranslationsPosts";
Status: Enum_Componenttranslationsposts_Status;
title: string;
excerpt: string;
body: string;
thumbnail: {
__typename: "UploadFileEntityResponse";
data: {
__typename: "UploadFileEntity";
attributes: {
__typename: "UploadFile";
name: string;
alternativeText: string;
caption: string;
width: number;
height: number;
url: string;
};
};
};
}>;
};
}>;
};
};

View File

@ -23,6 +23,8 @@ import {
GetLibraryItemsPreviewQueryVariables,
GetLibraryItemsSlugsQuery,
GetLibraryItemsSlugsQueryVariables,
GetPostQuery,
GetPostQueryVariables,
GetWebsiteInterfaceQuery,
GetWebsiteInterfaceQueryVariables,
} from "graphql/operations-types";
@ -141,3 +143,10 @@ export async function getLanguages(
const query = getQueryFromOperations("getLanguages");
return await graphQL(query, JSON.stringify(variables));
}
export async function getPost(
variables: GetPostQueryVariables
): Promise<GetPostQuery> {
const query = getQueryFromOperations("getPost");
return await graphQL(query, JSON.stringify(variables));
}

View File

@ -1060,6 +1060,8 @@ input ComponentTranslationsPostsFiltersInput {
Status: StringFilterInput
title: StringFilterInput
excerpt: StringFilterInput
body: StringFilterInput
language: LanguageFiltersInput
and: [ComponentTranslationsPostsFiltersInput]
or: [ComponentTranslationsPostsFiltersInput]
not: ComponentTranslationsPostsFiltersInput
@ -1071,6 +1073,8 @@ input ComponentTranslationsPostsInput {
title: String
excerpt: String
thumbnail: ID
body: String
language: ID
}
type ComponentTranslationsPosts {
@ -1079,6 +1083,8 @@ type ComponentTranslationsPosts {
title: String!
excerpt: String
thumbnail: UploadFileEntityResponse
body: String
language: LanguageEntityResponse
}
enum ENUM_COMPONENTTRANSLATIONSSCANSET_STATUS {
@ -1648,6 +1654,7 @@ input CurrencyFiltersInput {
symbol: StringFilterInput
code: StringFilterInput
rate_to_usd: FloatFilterInput
display_decimals: BooleanFilterInput
createdAt: DateTimeFilterInput
updatedAt: DateTimeFilterInput
and: [CurrencyFiltersInput]
@ -1659,12 +1666,14 @@ input CurrencyInput {
symbol: String
code: String
rate_to_usd: Float
display_decimals: Boolean
}
type Currency {
symbol: String!
code: String!
rate_to_usd: Float
rate_to_usd: Float!
display_decimals: Boolean!
createdAt: DateTime
updatedAt: DateTime
}
@ -1916,6 +1925,7 @@ input LibraryItemFiltersInput {
digital: BooleanFilterInput
primary: BooleanFilterInput
submerchs: MerchItemFiltersInput
categories: CategoryFiltersInput
createdAt: DateTimeFilterInput
updatedAt: DateTimeFilterInput
and: [LibraryItemFiltersInput]
@ -1942,6 +1952,7 @@ input LibraryItemInput {
digital: Boolean
primary: Boolean
submerchs: [ID]
categories: [ID]
}
type LibraryItem {
@ -1987,6 +1998,11 @@ type LibraryItem {
pagination: PaginationArg = {}
sort: [String] = []
): MerchItemRelationResponseCollection
categories(
filters: CategoryFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): CategoryRelationResponseCollection
createdAt: DateTime
updatedAt: DateTime
}
@ -2107,6 +2123,7 @@ input PostFiltersInput {
authors: RecorderFiltersInput
slug: StringFilterInput
categories: CategoryFiltersInput
hidden: BooleanFilterInput
createdAt: DateTimeFilterInput
updatedAt: DateTimeFilterInput
publishedAt: DateTimeFilterInput
@ -2120,6 +2137,7 @@ input PostInput {
slug: String
categories: [ID]
translations: [ComponentTranslationsPostsInput]
hidden: Boolean
publishedAt: DateTime
}
@ -2140,6 +2158,7 @@ type Post {
pagination: PaginationArg = {}
sort: [String] = []
): [ComponentTranslationsPosts]
hidden: Boolean!
createdAt: DateTime
updatedAt: DateTime
publishedAt: DateTime
@ -2619,6 +2638,38 @@ input WebsiteInterfaceFiltersInput {
group_by: StringFilterInput
select_option_sidebar: StringFilterInput
group: StringFilterInput
settings: StringFilterInput
theme: StringFilterInput
light: StringFilterInput
auto: StringFilterInput
dark: StringFilterInput
font_size: StringFilterInput
player_name: StringFilterInput
currency: StringFilterInput
font: StringFilterInput
calculated: StringFilterInput
status_incomplete: StringFilterInput
status_draft: StringFilterInput
status_review: StringFilterInput
status_done: StringFilterInput
incomplete: StringFilterInput
draft: StringFilterInput
review: StringFilterInput
done: StringFilterInput
status: StringFilterInput
transcribers: StringFilterInput
translators: StringFilterInput
proofreaders: StringFilterInput
transcript_notice: StringFilterInput
translation_notice: StringFilterInput
source_language: StringFilterInput
pronouns: StringFilterInput
no_category: StringFilterInput
item: StringFilterInput
items: StringFilterInput
content: StringFilterInput
result: StringFilterInput
results: StringFilterInput
createdAt: DateTimeFilterInput
updatedAt: DateTimeFilterInput
and: [WebsiteInterfaceFiltersInput]
@ -2707,6 +2758,38 @@ input WebsiteInterfaceInput {
group_by: String
select_option_sidebar: String
group: String
settings: String
theme: String
light: String
auto: String
dark: String
font_size: String
player_name: String
currency: String
font: String
calculated: String
status_incomplete: String
status_draft: String
status_review: String
status_done: String
incomplete: String
draft: String
review: String
done: String
status: String
transcribers: String
translators: String
proofreaders: String
transcript_notice: String
translation_notice: String
source_language: String
pronouns: String
no_category: String
item: String
items: String
content: String
result: String
results: String
}
type WebsiteInterface {
@ -2790,6 +2873,38 @@ type WebsiteInterface {
group_by: String
select_option_sidebar: String
group: String
settings: String
theme: String
light: String
auto: String
dark: String
font_size: String
player_name: String
currency: String
font: String
calculated: String
status_incomplete: String
status_draft: String
status_review: String
status_done: String
incomplete: String
draft: String
review: String
done: String
status: String
transcribers: String
translators: String
proofreaders: String
transcript_notice: String
translation_notice: String
source_language: String
pronouns: String
no_category: String
item: String
items: String
content: String
result: String
results: String
createdAt: DateTime
updatedAt: DateTime
}

View File

@ -3,6 +3,7 @@ import PanelHeader from "components/PanelComponents/PanelHeader";
import { GetStaticProps } from "next";
import AppLayout from "components/AppLayout";
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
import NavOption from "components/PanelComponents/NavOption";
interface AboutUsProps extends AppStaticProps {}
@ -15,6 +16,15 @@ export default function AboutUs(props: AboutUsProps): JSX.Element {
title={langui.about_us}
description={langui.about_us_description}
/>
<NavOption title="Accords Handbook" url="/about-us/handbook" border />
<NavOption
title="Site information"
url="/about-us/site-information"
border
/>
<NavOption title="FAQ" url="/about-us/faq" border />
<NavOption title="Sharing Policy" url="/about-us/sharing-policy" border />
<NavOption title="Contact us" url="/about-us/contact" border />
</SubPanel>
);
return (

View File

@ -0,0 +1,60 @@
import AppLayout from "components/AppLayout";
import Markdawn from "components/Markdown/Markdawn";
import ReturnButton, {
ReturnButtonType,
} from "components/PanelComponents/ReturnButton";
import ContentPanel from "components/Panels/ContentPanel";
import { getPost } from "graphql/operations";
import { GetPostQuery } from "graphql/operations-types";
import { GetStaticProps } from "next";
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
import { prettySlug } from "queries/helpers";
interface SiteInfoProps extends AppStaticProps {
post: GetPostQuery["posts"]["data"][number]["attributes"];
}
export default function SiteInformation(props: SiteInfoProps): JSX.Element {
const { langui, post } = props;
const contentPanel = (
<ContentPanel>
<ReturnButton
href="/about-us"
displayOn={ReturnButtonType.Both}
langui={langui}
title={langui.about_us}
className="mb-10"
/>
{post.translations.length > 0 && (
<Markdawn text={post.translations[0].body} />
)}
</ContentPanel>
);
return (
<AppLayout
navTitle={
post.translations.length > 0
? post.translations[0].title
: prettySlug(post.slug)
}
contentPanel={contentPanel}
{...props}
/>
);
}
export const getStaticProps: GetStaticProps = async (context) => {
const props: SiteInfoProps = {
...(await getAppStaticProps(context)),
post: (
await getPost({
slug: "site-information",
language_code: context.locale || "en",
})
).posts.data[0].attributes,
};
return {
props: props,
};
};

View File

@ -1,146 +1,48 @@
import AppLayout from "components/AppLayout";
import Markdawn from "components/Markdown/Markdawn";
import ContentPanel from "components/Panels/ContentPanel";
import { getPost } from "graphql/operations";
import { GetPostQuery } from "graphql/operations-types";
import { GetStaticProps } from "next";
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
import { prettySlug } from "queries/helpers";
interface HomeProps extends AppStaticProps {}
interface HomeProps extends AppStaticProps {
post: GetPostQuery["posts"]["data"][number]["attributes"];
}
export default function Home(props: HomeProps): JSX.Element {
const { post } = props;
const contentPanel = (
<ContentPanel autoformat>
<div className="grid place-items-center place-content-center w-full gap-5 text-center">
<div className="[mask:url('/icons/accords.svg')] [mask-size:contain] [mask-repeat:no-repeat] [mask-position:center] w-32 aspect-square mobile:w-[50vw] bg-black" />
<h1 className="text-5xl mb-0">Accord&rsquo;s Library</h1>
<h2 className="mt-0">Discover Analyse Translate Archive</h2>
</div>
<h2>What is this?</h2>
<p>
Accord&rsquo;s Library aims at gathering and archiving all of Yoko
Taro&rsquo;s work. Yoko Taro is a Japanese video game director and
scenario writer. He is best-known for his work on the NieR and
Drakengard (Drag-on Dragoon) franchises. To complement his games, Yoko
Taro likes to publish side materials in the form of books, novellas,
artbooks, stage plays, manga, drama CDs, and comics. Those side
materials can be very difficult to find. His work goes all the way back
to 2003, and most of them are out of print after having been released
solely in Japan, sometimes in limited quantities. Their prices on the
second hand market have skyrocketed, ranging all the way to hundreds if
not thousand of dollars for the rarest items.&nbsp;
</p>
<p>
This is where this library takes its meaning, in trying to help the
community grow by providing translators, writers, and wiki&rsquo;s
contributors a simple way to access these records filled with stories,
artworks, and knowledge.
</p>
<p>
We are a small group of Yoko Taro&rsquo;s fans that decided to join
forces and create a website and a community. Our motto is{" "}
<strong>Discover Analyze Translate Archive</strong> (D.A.T.A. for
short). We started with the goal of gathering and archiving as much
side-materials/merch as possible. But since then, our ambition grew and
we decided to create a full-fledged website that will also include news
articles, lore, summaries, translations, and transcriptions. Hopefully
one day, we will be up there in the list of notable resources for
Drakengard and NieR fans.
</p>
<h2>What&rsquo;s on this website?</h2>
<p>
<strong>
<a href="https://accords-library.com/compendium/">The Compendium</a>
</strong>
: This is where we will list every NieR/DOD/other Yoko Tato merch,
games, books, novel, stage play, CD... well everything! For each, we
will provide photos and/or scans of the content, information about what
it is, when and how it was released, size, initial price...
</p>
<p>
<strong>
<a href="https://accords-library.com/news/">News</a>
</strong>
: Yes because we also want to create our own content! So there you will
find translations, transcriptions, unboxing, news about future
merch/game releases, maybe some guides. We don&rsquo;t see this website
as being purely a showcase of our work, but also of the community, and
as such, we will be accepting applications for becoming contributors on
the website. For the applicant, there is no deadline or article quota,
it merely means that we will have access to the website Post Writing
tools and will be able to submit a draft that can be published once
verified by an editor. Anyway, that&rsquo;s at least the plan, we will
think more about this until the website&rsquo;s official launch.
</p>
<p>
<strong>
<a href="https://accords-library.com/data/">Data</a>
</strong>
: There we will publish lore/knowledge about the Yokoverse: Dictionary,
Timeline, Weapons Stories, Game summaries... We have not yet decided how
deep we want to go as they are already quite a few resources out there.{" "}
</p>
<p>
<strong>
<a
href="https://gallery.accords-library.com/posts"
target="_blank"
rel="noreferrer noopener"
>
Gallery
</a>
</strong>
: A fully tagged Danbooru-styled gallery with currently more than a
thousand unique artworks. If you are unfamiliar with this kind of
gallery, it comes with a powerful search function that allows you to
search for specific images: want to search for images with both Caim and
Inuart, just type{" "}
<kbd>
<a
href="https://gallery.accords-library.com/posts/query=Caim%20Inuart"
target="_blank"
rel="noreferrer noopener"
>
Caim Inuart
</a>
</kbd>
. If you want images of Devola OR Popola, you can use a comma{" "}
<kbd>
<a
href="https://gallery.accords-library.com/posts/query=Popola%2CDevola"
data-type="URL"
data-id="https://gallery.accords-library.com/posts/query=Popola%2CDevola"
target="_blank"
rel="noreferrer noopener"
>
Popola,Devola
</a>
</kbd>
. You can also negate a tag: i.e. images of 9S without any pods around,
search for{" "}
<kbd>
<a
href="https://gallery.accords-library.com/posts/query=9S%20-Pods"
target="_blank"
rel="noreferrer noopener"
>
9S -Pods
</a>
</kbd>
. Anyway, there is a lot more to it, you can click on &quot;Syntax
help&quot; next to the Search button for even neater functions. Btw, you
can create an account to favorite, upvote/downvote posts, or if you want
to help tagging them. There isn&rsquo;t currently a way for new users to
upload images, you&rsquo;ll have to contact us first and we can decide
to enable this function on your account.
</p>
<ContentPanel>
{post.translations.length > 0 && (
<Markdawn text={post.translations[0].body} />
)}
</ContentPanel>
);
return <AppLayout navTitle={"Home"} contentPanel={contentPanel} {...props} />;
return (
<AppLayout
navTitle={
post.translations.length > 0
? post.translations[0].title
: prettySlug(post.slug)
}
contentPanel={contentPanel}
{...props}
/>
);
}
export const getStaticProps: GetStaticProps = async (context) => {
const props: HomeProps = {
...(await getAppStaticProps(context)),
post: (
await getPost({
slug: "home",
language_code: context.locale || "en",
})
).posts.data[0].attributes,
};
return {
props: props,