Changed boxshadow to dropshadow to support transparency

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 (
+    <>
+      <div className="grid place-items-center gap-12  mb-12">
+        <div className="drop-shadow-dark-lg">
+          <Image
+            className=" rounded-xl"
+            src={getAssetURL(content.thumbnail.data.attributes.url)}
+            alt={content.thumbnail.data.attributes.alternativeText}
+            width={content.thumbnail.data.attributes.width}
+            height={content.thumbnail.data.attributes.height}
+          />
+        </div>
+        <div className="grid place-items-center">
+          <p className="text-2xl">{content.titles[0].pre_title}</p>
+          <h1 className="text-3xl">{content.titles[0].title}</h1>
+          <h2 className="text-2xl">{content.titles[0].subtitle}</h2>
+        </div>
+      </div>
+
+      <div className="grid grid-flow-col gap-8">
+        {content.type ? (
+          <div className="grid place-items-center place-content-start gap-2">
+            <h3 className="text-xl">Type</h3>
+            <Button>{prettySlug(content.type.data.attributes.slug)}</Button>
+          </div>
+        ) : (
+          ""
+        )}
+
+        {content.categories.data.length > 0 ? (
+          <div className="grid place-items-center place-content-start gap-2">
+            <h3 className="text-xl">Categories</h3>
+            {content.categories.data.map((category) => (
+              <Button key={category.id}>{category.attributes.name}</Button>
+            ))}
+          </div>
+        ) : (
+          ""
+        )}
+      </div>
+    </>
+  );
+}

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 (
     <Link href={"/library/" + item.slug} passHref>
-      <div className="cursor-pointer grid items-end relative hover:rounded-3xl [--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform">
+      <div className="drop-shadow-dark-xl cursor-pointer grid items-end hover:rounded-3xl [--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform">
-        <div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-xl"></div>
         {item.thumbnail.data ? (
           <Image
             src={getAssetURL(item.thumbnail.data.attributes.url)}
@@ -24,7 +30,7 @@ export default function LibraryItemComponent(
             width={item.thumbnail.data.attributes.width}
           />
         ) : (
-          <div className="w-full aspect-[21/29.7]"></div>
+          <div className="w-full aspect-[21/29.7] bg-light rounded-lg"></div>
         )}
         <div className="linearbg-1 shadow-[0_0_1em_rgb(0,0,0,0.2)] absolute bottom-0 left-0 right-0 h-auto opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-4 text-left">
           <div>
@@ -37,7 +43,7 @@ export default function LibraryItemComponent(
                 <span className="material-icons !text-base translate-y-[.15em] mr-1">
                   event
                 </span>
-                {prettyDate(item.release_date)}
+                {item.release_date ? prettyDate(item.release_date) : ""}
               </p>
             ) : (
               ""

src/components/Markdown/SceneBreak.tsx

@@ -0,0 +1,7 @@
+type ScenBreakProps = {
+  className?: string;
+};
+
+export default function SceneBreak(props: ScenBreakProps): JSX.Element {
+  return <div className={"h-0 text-center text-3xl text-dark mt-16 mb-20" + " " + props.className}>* * *</div>;
+}

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<Data>
 ) {
-  res.status(200).json({ name: 'John Lenon' })
+  res.status(200).json({ name: "John Lenon" });
 }

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 ThumbnailHeader from "components/Content/ThumbnailHeader";
-import ReturnButton from "components/PanelComponents/ReturnButton";
 
 type Props = {
   content: GetContentQuery;
@@ -26,61 +25,30 @@ export default function Library(props: Props): JSX.Element {
     <>
       <ContentPanel>
         <div className="grid place-items-center">
-          <div className="grid place-items-center gap-12  mb-12">
+          <ThumbnailHeader content={content} />
-            <div>
-              <Image
-                className="rounded-lg"
-                src={getAssetURL(content.thumbnail.data.attributes.url)}
-                alt={content.thumbnail.data.attributes.alternativeText}
-                width={content.thumbnail.data.attributes.width}
-                height={content.thumbnail.data.attributes.height}
-              />
-            </div>
-            <div className="grid place-items-center">
-              <p className="text-2xl">{content.titles[0].pre_title}</p>
-              <h1 className="text-3xl">{content.titles[0].title}</h1>
-              <h2 className="text-2xl">{content.titles[0].subtitle}</h2>
-            </div>
-          </div>
-
-          <div className="grid grid-flow-col gap-8">
-            {content.type ? (
-              <div className="grid place-items-center">
-                <h3 className="text-xl">Type</h3>
-                <Button>{prettySlug(content.type.data.attributes.slug)}</Button>
-              </div>
-            ) : (
-              ""
-            )}
-
-            {content.categories.data.length > 0 ? (
-              <div className="grid place-items-center">
-                <h3 className="text-xl">Categories</h3>
-                {content.categories.data.map((category) => (
-                  <Button key={category.id}>{category.attributes.name}</Button>
-                ))}
-              </div>
-            ) : (
-              ""
-            )}
-          </div>
 
           <HorizontalLine />
 
           {content.text_set.length > 0 ? (
-            <Button href={`/content/${content.slug}/read/`}>Read content</Button>
+            <Button href={`/content/${content.slug}/read/`}>
+              Read content
+            </Button>
           ) : (
             ""
           )}
 
           {content.audio_set.length > 0 ? (
-            <Button href={`/content/${content.slug}/listen/`}>Listen content</Button>
+            <Button href={`/content/${content.slug}/listen/`}>
+              Listen content
+            </Button>
           ) : (
             ""
           )}
 
           {content.video_set.length > 0 ? (
-            <Button href={`/content/${content.slug}/watch/`}>View content</Button>
+            <Button href={`/content/${content.slug}/watch/`}>
+              View content
+            </Button>
           ) : (
             ""
           )}
@@ -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({

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 {
       </SubPanel>
       <ContentPanel>
         <div className="grid place-items-center">
-          <div className="grid place-items-center gap-12 mb-12">
+          <ThumbnailHeader content={content} />
-            <div>
-              <Image
-                className="rounded-lg"
-                src={getAssetURL(content.thumbnail.data.attributes.url)}
-                alt={content.thumbnail.data.attributes.alternativeText}
-                width={content.thumbnail.data.attributes.width}
-                height={content.thumbnail.data.attributes.height}
-              />
-            </div>
-            <div className="grid place-items-center">
-              <p className="text-2xl">{content.titles[0].pre_title}</p>
-              <h1 className="text-3xl">{content.titles[0].title}</h1>
-              <h2 className="text-2xl">{content.titles[0].subtitle}</h2>
-            </div>
-          </div>
-
-          <div className="grid grid-flow-col gap-8">
-            {content.type ? (
-              <div className="grid place-items-center">
-                <h3 className="text-xl">Type</h3>
-                <Button>{prettySlug(content.type.data.attributes.slug)}</Button>
-              </div>
-            ) : (
-              ""
-            )}
-
-            {content.categories.data.length > 0 ? (
-              <div className="grid place-items-center">
-                <h3 className="text-xl">Categories</h3>
-                {content.categories.data.map((category) => (
-                  <Button key={category.id}>{category.attributes.name}</Button>
-                ))}
-              </div>
-            ) : (
-              ""
-            )}
-          </div>
 
           <HorizontalLine />
 
           {content.text_set.length > 0 ? (
-            <div className="prose prose-lg text-black">
+            <Markdown
-              <Markdown>{content.text_set[0].text}</Markdown>
+              className="prose prose-lg text-black pt-12"
-            </div>
+              options={{ overrides: { hr: { component: SceneBreak } } }}
+            >
+              {content.text_set[0].text}
+            </Markdown>
           ) : (
             ""
           )}
@@ -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: {

src/pages/gallery/index.tsx

@@ -8,7 +8,10 @@ applyCustomAppProps(Chronology, {
 export default function Chronology(): JSX.Element {
   return (
     <>
-    <iframe className="w-full h-screen" src="https://gallery.accords-library.com/posts"></iframe>
+      <iframe
+        className="w-full h-screen"
+        src="https://gallery.accords-library.com/posts"
+      ></iframe>
     </>
   );
 }

src/pages/library/[slug].tsx

@@ -77,8 +77,7 @@ export default function Library(props: Props): JSX.Element {
       </SubPanel>
       <ContentPanel width={ContentPanelWidthSizes.large}>
         <div className="grid place-items-center gap-12">
-          <div className="cursor-pointer grid items-end relative w-96 max-w-full mb-16">
+          <div className="drop-shadow-dark-xl w-96 max-w-full mb-16">
-            <div className="bg-light absolute inset-1 rounded-lg shadow-dark shadow-xl"></div>
             {item.thumbnail.data ? (
               <Image
                 src={getAssetURL(item.thumbnail.data.attributes.url)}
@@ -308,7 +307,10 @@ export default function Library(props: Props): JSX.Element {
               <h2 className="text-2xl">Subitems</h2>
               <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
                 {item.subitems.data.map((subitem) => (
-                  <LibraryItemComponent key={subitem.id} item={subitem} />
+                  <LibraryItemComponent
+                    key={subitem.id}
+                    item={subitem.attributes}
+                  />
                 ))}
               </div>
             </div>
@@ -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 {

src/pages/library/index.tsx

@@ -32,7 +32,7 @@ export default function Library(props: Props): JSX.Element {
       <ContentPanel width={ContentPanelWidthSizes.large}>
         <div className="grid gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
           {props.libraryItems.libraryItems.data.map((item) => (
-            <LibraryItemComponent key={item.id} item={item} />
+            <LibraryItemComponent key={item.id} item={item.attributes} />
           ))}
         </div>
       </ContentPanel>

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.substring(parentSlug.length + 1);
-  slug = slug.replace(new RegExp("-", 'g'), " ");
+  slug = slug.replace(new RegExp("-", "g"), " ");
-  slug = slug.replace(new RegExp("_", 'g'), " ");
+  slug = slug.replace(new RegExp("_", "g"), " ");
-  return capitalizeString(slug)
+  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(
+  words = words.map((word) => (word = capitalizeWord(word)));
-    (word) => (word = capitalizeWord(word))
-  );
   return words.join(" ");
 }
 

tailwind.config.js

@@ -4,10 +4,10 @@ module.exports = {
   content: ["./src/**/*.{tsx,ts}"],
   theme: {
     colors: {
-      light: "#ffedd8",
+      light: "rgb(255, 237, 216)",
-      mid: "#f0d1b3",
+      mid: "rgb(240, 209, 179)",
-      dark: "#9c6644",
+      dark: "rgb(156, 102, 68)",
-      black: "#1B1811",
+      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": {