Implement Videos Page

gatsby-config.ts

@@ -31,6 +31,14 @@ const config: GatsbyConfig = {
             },
             __key: "pages",
         },
+        {
+            resolve: `gatsby-source-youtube-v3`,
+            options: {
+                channelId: ["UCCoZp-6_P3CVFj4clQ6uaeg"],
+                apiKey: process.env.YOUTUBE_API_KEY,
+                maxVideos: 60,
+            },
+        },
     ],
 };
 

package.json

@@ -26,6 +26,7 @@
     "gatsby-plugin-sass": "^6.2.0",
     "gatsby-plugin-sharp": "^5.2.0",
     "gatsby-source-filesystem": "^5.2.0",
+    "gatsby-source-youtube-v3": "^3.0.2",
     "gatsby-transformer-sharp": "^5.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/_global.scss

@@ -5,6 +5,7 @@
     --layout-width: 1000px;
     --layout-padding: 20px;
     --layout-slant: -30deg;
+    --layout-radius: 20px;
 
     /*
     --color-base: #190b22;

src/pages/videos.module.scss

@@ -0,0 +1,95 @@
+@import "../global";
+
+.container {
+    @include boxConstraints;
+    padding: var(--layout-padding);
+
+    h1 {
+        font-size: 3em;
+        font-weight: 800;
+    }
+
+    > .videos {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+
+        a {
+            --video-width: 400px;
+
+            width: var(--video-width);
+            margin: calc(var(--layout-padding));
+
+            text-decoration: none;
+
+            display: flex;
+            flex-direction: column;
+
+            .imageContainer {
+                width: var(--video-width);
+                height: calc((var(--video-width) / 16) * 9);
+                position: relative;
+
+                .borderBox {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    border: 3px solid var(--color-splash);
+                    border-radius: var(--layout-radius);
+                    transition: top 0.25s, left 0.25s;
+                }
+
+                [data-gatsby-image-wrapper=""] {
+                    position: absolute;
+                    top: 3px;
+                    left: 3px;
+                    height: calc(100% - 6px);
+                    width: calc(100% - 6px);
+
+                    border-radius: var(--layout-radius);
+                    border: 3px solid var(--color-base);
+                    z-index: 20;
+                    transition: top 0.25s, left 0.25s;
+                }
+            }
+
+            .info {
+                flex-grow: 1;
+                display: flex;
+                flex-direction: column;
+                text-align: right;
+
+                .title {
+                    font-size: 1.5em;
+                    font-weight: 800;
+                    display: block;
+                    margin-top: var(--layout-padding);
+                    flex-grow: 1;
+                }
+
+                .timestamp {
+                    font-variation-settings: "wdth" 151;
+                    display: block;
+                }
+            }
+
+            &:hover,
+            &:focus,
+            &:focus-within {
+                .imageContainer {
+                    [data-gatsby-image-wrapper=""] {
+                        top: -5px;
+                        left: 5px;
+                    }
+
+                    .borderBox {
+                        top: 5px;
+                        left: -5px;
+                    }
+                }
+            }
+        }
+    }
+}

src/pages/videos.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { graphql, HeadFC, PageProps } from "gatsby";
+import Layout from "../layout/Layout";
+
+import * as styles from "./videos.module.scss";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
+
+const VideosPage: React.FC<PageProps> = ({ data }) => {
+    return (
+        <Layout>
+            <div className={styles.container}>
+                <h1>Videos</h1>
+                <div className={styles.videos}>
+                    {data.allYoutubeVideo.nodes.map((video) => {
+                        return (
+                            <a
+                                href={`https://youtube.com/watch?v=${video.videoId}`}
+                                title={video.title}
+                            >
+                                <div className={styles.imageContainer}>
+                                    <div className={styles.borderBox} />
+                                    <GatsbyImage
+                                        image={
+                                            video.localThumbnail.children[0]
+                                                .gatsbyImageData
+                                        }
+                                        alt={`Video Thumbnail for ${video.title}`}
+                                        objectFit={"cover"}
+                                    ></GatsbyImage>
+                                </div>
+
+                                <div className={styles.info}>
+                                    <span className={styles.title}>
+                                        {video.title
+                                            .replaceAll("| Unkn0wnCat", "")
+                                            .trim()}
+                                    </span>
+                                    <span className={styles.timestamp}>
+                                        {video.publishedAt}
+                                    </span>
+                                </div>
+                            </a>
+                        );
+                    })}
+                </div>
+            </div>
+        </Layout>
+    );
+};
+
+export const query = graphql`
+    query {
+        allYoutubeVideo {
+            nodes {
+                channelTitle
+                title
+                videoId
+                localThumbnail {
+                    children {
+                        ... on ImageSharp {
+                            gatsbyImageData(placeholder: BLURRED)
+                        }
+                    }
+                }
+                description
+                publishedAt(fromNow: true)
+            }
+        }
+    }
+`;
+
+export default VideosPage;
+
+export const Head: HeadFC = () => <title>Videos | Unkn0wnCat.net</title>;