diff --git a/src/components/Content/ThumbnailHeader.tsx b/src/components/Content/ThumbnailHeader.tsx new file mode 100644 index 0000000..95893ea --- /dev/null +++ b/src/components/Content/ThumbnailHeader.tsx @@ -0,0 +1,62 @@ +import { GetContentQuery } from "graphql/operations-types"; +import { getAssetURL, prettySlug } from "queries/helpers"; +import Image from "next/image"; +import Button from "components/Button"; + +export type ThumbnailHeaderProps = { + content: { + thumbnail: GetContentQuery["contents"]["data"][number]["attributes"]["thumbnail"]; + titles: GetContentQuery["contents"]["data"][number]["attributes"]["titles"]; + type: GetContentQuery["contents"]["data"][number]["attributes"]["type"]; + categories: GetContentQuery["contents"]["data"][number]["attributes"]["categories"]; + }; +}; + +export default function ThumbnailHeader( + props: ThumbnailHeaderProps +): JSX.Element { + const content = props.content; + + return ( + <> +
+
+ {content.thumbnail.data.attributes.alternativeText} +
+
+

{content.titles[0].pre_title}

+

{content.titles[0].title}

+

{content.titles[0].subtitle}

+
+
+ +
+ {content.type ? ( +
+

Type

+ +
+ ) : ( + "" + )} + + {content.categories.data.length > 0 ? ( +
+

Categories

+ {content.categories.data.map((category) => ( + + ))} +
+ ) : ( + "" + )} +
+ + ); +} diff --git a/src/components/Library/LibraryItemComponent.tsx b/src/components/Library/LibraryItemComponent.tsx index df51c63..3129cfa 100644 --- a/src/components/Library/LibraryItemComponent.tsx +++ b/src/components/Library/LibraryItemComponent.tsx @@ -4,18 +4,24 @@ import { getAssetURL, prettyDate, prettyPrice } from "queries/helpers"; import Image from "next/image"; export type LibraryItemComponentProps = { - item: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]; + item: { + slug: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["slug"]; + thumbnail: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["thumbnail"]; + title: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["title"]; + subtitle: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["subtitle"]; + price?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"]; + release_date?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"]; + }; }; export default function LibraryItemComponent( props: LibraryItemComponentProps ): JSX.Element { - const item = props.item.attributes; + const item = props.item; return ( -
-
+
{item.thumbnail.data ? ( ) : ( -
+
)}
@@ -37,7 +43,7 @@ export default function LibraryItemComponent( event - {prettyDate(item.release_date)} + {item.release_date ? prettyDate(item.release_date) : ""}

) : ( "" diff --git a/src/components/Markdown/SceneBreak.tsx b/src/components/Markdown/SceneBreak.tsx new file mode 100644 index 0000000..8ff82f1 --- /dev/null +++ b/src/components/Markdown/SceneBreak.tsx @@ -0,0 +1,7 @@ +type ScenBreakProps = { + className?: string; +}; + +export default function SceneBreak(props: ScenBreakProps): JSX.Element { + return
* * *
; +} diff --git a/src/pages/api/hello.ts b/src/pages/api/hello.ts index aa953fa..e406545 100644 --- a/src/pages/api/hello.ts +++ b/src/pages/api/hello.ts @@ -1,13 +1,13 @@ // Next.js API route support: https://nextjs.org/docs/api-routes/introduction -import type { NextApiRequest, NextApiResponse } from 'next' +import type { NextApiRequest, NextApiResponse } from "next"; type Data = { - name: string -} + name: string; +}; export default function handler( req: NextApiRequest, res: NextApiResponse ) { - res.status(200).json({ name: 'John Lenon' }) + res.status(200).json({ name: "John Lenon" }); } diff --git a/src/pages/content/[slug]/index.tsx b/src/pages/content/[slug]/index.tsx index 8056e0b..263897d 100644 --- a/src/pages/content/[slug]/index.tsx +++ b/src/pages/content/[slug]/index.tsx @@ -7,8 +7,7 @@ import Image from "next/image"; import { getAssetURL, prettySlug } from "queries/helpers"; import Button from "components/Button"; import HorizontalLine from "components/HorizontalLine"; -import SubPanel from "components/Panels/SubPanel"; -import ReturnButton from "components/PanelComponents/ReturnButton"; +import ThumbnailHeader from "components/Content/ThumbnailHeader"; type Props = { content: GetContentQuery; @@ -26,61 +25,30 @@ export default function Library(props: Props): JSX.Element { <>
-
-
- {content.thumbnail.data.attributes.alternativeText} -
-
-

{content.titles[0].pre_title}

-

{content.titles[0].title}

-

{content.titles[0].subtitle}

-
-
- -
- {content.type ? ( -
-

Type

- -
- ) : ( - "" - )} - - {content.categories.data.length > 0 ? ( -
-

Categories

- {content.categories.data.map((category) => ( - - ))} -
- ) : ( - "" - )} -
+ {content.text_set.length > 0 ? ( - + ) : ( "" )} {content.audio_set.length > 0 ? ( - + ) : ( "" )} {content.video_set.length > 0 ? ( - + ) : ( "" )} @@ -93,6 +61,8 @@ export default function Library(props: Props): JSX.Element { export const getStaticProps: GetStaticProps = async (context) => { if (context.params) { if (context.params.slug && context.locale) { + if (context.params.slug instanceof Array) + context.params.slug = context.params.slug.join(""); return { props: { content: await getContent({ diff --git a/src/pages/content/[slug]/read.tsx b/src/pages/content/[slug]/read.tsx index 0682dfa..bbd22db 100644 --- a/src/pages/content/[slug]/read.tsx +++ b/src/pages/content/[slug]/read.tsx @@ -10,6 +10,8 @@ import HorizontalLine from "components/HorizontalLine"; import Markdown from "markdown-to-jsx"; import SubPanel from "components/Panels/SubPanel"; import ReturnButton from "components/PanelComponents/ReturnButton"; +import SceneBreak from "components/Markdown/SceneBreak"; +import ThumbnailHeader from "components/Content/ThumbnailHeader"; type Props = { content: GetContentTextQuery; @@ -30,51 +32,17 @@ export default function Library(props: Props): JSX.Element {
-
-
- {content.thumbnail.data.attributes.alternativeText} -
-
-

{content.titles[0].pre_title}

-

{content.titles[0].title}

-

{content.titles[0].subtitle}

-
-
- -
- {content.type ? ( -
-

Type

- -
- ) : ( - "" - )} - - {content.categories.data.length > 0 ? ( -
-

Categories

- {content.categories.data.map((category) => ( - - ))} -
- ) : ( - "" - )} -
+ {content.text_set.length > 0 ? ( -
- {content.text_set[0].text} -
+ + {content.text_set[0].text} + ) : ( "" )} @@ -86,6 +54,8 @@ export default function Library(props: Props): JSX.Element { export const getStaticProps: GetStaticProps = async (context) => { if (context.params) { + if (context.params.slug instanceof Array) + context.params.slug = context.params.slug.join(""); if (context.params.slug && context.locale) { return { props: { diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index 747a58d..6b93ef0 100644 --- a/src/pages/gallery/index.tsx +++ b/src/pages/gallery/index.tsx @@ -8,7 +8,10 @@ applyCustomAppProps(Chronology, { export default function Chronology(): JSX.Element { return ( <> - + ); } diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx index 9927e66..20249e4 100644 --- a/src/pages/library/[slug].tsx +++ b/src/pages/library/[slug].tsx @@ -77,8 +77,7 @@ export default function Library(props: Props): JSX.Element {
-
-
+
{item.thumbnail.data ? ( Subitems
{item.subitems.data.map((subitem) => ( - + ))}
@@ -416,6 +418,8 @@ export default function Library(props: Props): JSX.Element { export const getStaticProps: GetStaticProps = async (context) => { if (context.params) { if (context.params.slug && context.locale) { + if (context.params.slug instanceof Array) + context.params.slug = context.params.slug.join(""); return { props: { libraryItem: await getLibraryItem({ @@ -439,6 +443,7 @@ export const getStaticPaths: GetStaticPaths = async () => { const data = await getLibraryItemsSlugs({}); const paths: Path[] = []; data.libraryItems.data.map((item) => { + console.log(item.attributes.slug); paths.push({ params: { slug: item.attributes.slug } }); }); return { diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index 378b19b..d99d875 100644 --- a/src/pages/library/index.tsx +++ b/src/pages/library/index.tsx @@ -32,7 +32,7 @@ export default function Library(props: Props): JSX.Element {
{props.libraryItems.libraryItems.data.map((item) => ( - + ))}
diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts index f493a7f..a35919b 100644 --- a/src/queries/helpers.ts +++ b/src/queries/helpers.ts @@ -30,30 +30,31 @@ export function prettyPrice( export function prettySlug(slug: string, parentSlug?: string): string { if (parentSlug && slug.startsWith(parentSlug)) - slug = slug.substring(parentSlug.length + 1); - slug = slug.replace(new RegExp("-", 'g'), " "); - slug = slug.replace(new RegExp("_", 'g'), " "); - return capitalizeString(slug) + slug = slug.substring(parentSlug.length + 1); + slug = slug.replace(new RegExp("-", "g"), " "); + slug = slug.replace(new RegExp("_", "g"), " "); + return capitalizeString(slug); } -export function prettyinlineTitle(pretitle:string, title: string, subtitle:string): string { +export function prettyinlineTitle( + pretitle: string, + title: string, + subtitle: string +): string { let result = ""; - if (pretitle) result += pretitle + ": " + if (pretitle) result += pretitle + ": "; result += title; if (subtitle) result += " - " + subtitle; return result; } - -export function capitalizeString(string:string):string { +export function capitalizeString(string: string): string { function capitalizeWord(word: string): string { return word.charAt(0).toUpperCase() + word.substring(1); } let words = string.split(" "); - words = words.map( - (word) => (word = capitalizeWord(word)) - ); + words = words.map((word) => (word = capitalizeWord(word))); return words.join(" "); } diff --git a/tailwind.config.js b/tailwind.config.js index 640393b..84bb11e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,10 +4,10 @@ module.exports = { content: ["./src/**/*.{tsx,ts}"], theme: { colors: { - light: "#ffedd8", - mid: "#f0d1b3", - dark: "#9c6644", - black: "#1B1811", + light: "rgb(255, 237, 216)", + mid: "rgb(240, 209, 179)", + dark: "rgb(156, 102, 68)", + black: "rgb(27, 24, 17)", }, fontFamily: { body: ["Zen Maru Gothic"], @@ -49,6 +49,23 @@ module.exports = { }); }), + // Colored Dropshadow + plugin(function ({ addUtilities }) { + addUtilities({ + ".drop-shadow-dark-lg": { + filter: + "drop-shadow(0 10px 8px rgb(156 102 68 / 0.2)) drop-shadow(0 4px 3px rgb(156 102 68 / 0.8))", + }, + ".drop-shadow-dark-xl": { + filter: + "drop-shadow(0 20px 13px rgb(156 102 68 / 0.25)) drop-shadow(0 8px 5px rgb(156 102 68 / 0.7))", + }, + ".drop-shadow-dark-2xl": { + filter: "drop-shadow(0 25px 25px rgb(156 102 68 / 0.8))", + }, + }); + }), + plugin(function ({ addUtilities }) { addUtilities({ ".linearbg-1": {