Adding Video and Featured Project components for the resources page

.prettierrc

@@ -11,7 +11,6 @@
   "requirePragma": false,
   "insertPragma": false,
   "proseWrap": "preserve",
-  "parser": "babel",
   "overrides": [
     {
       "files": "*.js",

components/FeaturedProject.tsx

@@ -0,0 +1,28 @@
+import { Image } from './Image';
+import styles from '@components/FeaturedProject.module.scss';
+
+export interface FeaturedProjectProps {
+  title: string;
+  image: any; //to do create a global image type that can be reused
+  href: string;
+  caption: string;
+}
+
+function FeaturedProject({ title, image, href, caption }: FeaturedProjectProps) {
+  console.log(image);
+  return (
+    <div style={{ display: 'grid', rowGap: '8px' }}>
+      <Image image={image} layout="fill" />
+      <h3 className={styles.h3}>{title}</h3>
+      <p className={styles.source}>
+        <a href={href} className={styles.link}>
+          Source
+        </a>
+      </p>
+
+      <p>{caption}</p>
+    </div>
+  );
+}
+
+export default FeaturedProject;

components/Image.tsx

@@ -0,0 +1,19 @@
+import NextImage from 'next/image';
+
+export function Image({ image, layout, props }: any) {
+  //to do : add a placeholder image if src is undefined
+  const { altText, height, src, width } = image;
+
+  return (
+    <NextImage
+      {...props}
+      {...(layout !== 'fill' && {
+        height,
+        width,
+      })}
+      alt={altText}
+      src={src}
+      unoptimized={true}
+    />
+  );
+}

components/Video.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+export const enum VIDEO_FORMAT_ENUM {
+  IFRAME = 'iframe',
+  VIDEO = 'video',
+}
+
+export default function Video({ src, title, format }) {
+  switch (format) {
+    case VIDEO_FORMAT_ENUM.VIDEO:
+      return (
+        <video
+          width="100%"
+          height="100%"
+          autoPlay
+          muted
+          controls
+          loop
+          style={{
+            objectFit: 'cover',
+            objectPosition: 'contain',
+            left: 0,
+            top: 0,
+          }}
+        >
+          <source src={src} type="video/mp4" />
+        </video>
+      );
+      // case VIDEO_FORMAT_ENUM.IFRAME:
+      //   return (
+      //     <iframe
+      //       style={{ gridColumn: '2/3' }}
+      //       width="560"
+      //       height="315"
+      //       src={src}
+      //       title={title}
+      //       frameborder="0"
+      //       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      //       allowfullscreen
+      //     />
+      //   );
+      break;
+  }
+}

fixtures/resources.tsx

@@ -0,0 +1,118 @@
+import { VIDEO_FORMAT_ENUM } from '@root/components/Video';
+
+export const RESOURCE_PAGE_VIDEOS_FIXTURE = [
+  {
+    format: VIDEO_FORMAT_ENUM.IFRAME,
+    src: 'https://www.youtube.com/embed/AHAMHbpioGw',
+    title: 'Estuary: Getting Started',
+  },
+  {
+    format: VIDEO_FORMAT_ENUM.IFRAME,
+    src: 'https://www.youtube.com/watch?v=uiseAYCGOKU',
+    title: 'Estuary Ecosystem February 2022 Deep Dive: Command Line Programs to Manage Files on Cloud Storage',
+  },
+  {
+    format: VIDEO_FORMAT_ENUM.IFRAME,
+    src: 'https://www.youtube.com/watch?v=uiseAYCGOKU',
+    title: 'Estuary - A reliable way to upload public data onto Filecoin and pin it to IPFS',
+  },
+  {
+    format: VIDEO_FORMAT_ENUM.IFRAME,
+    src: 'https://youtu.be/Oidvj-BvMGU',
+    title: 'Ecosystem-WG March 2022 Deep Dive: Working with Estuary Collections [ARG]',
+  },
+  {
+    format: VIDEO_FORMAT_ENUM.IFRAME,
+    src: 'How We Made Slate',
+    title: '',
+  },
+];
+
+export const RESOURCE_PAGE_FEATURED_PROJECTS_FIXTURE = [
+  {
+    caption: 'Slate is a search tool designed to help you remember and keep track of things you care about on the web.',
+    github: 'https://github.com/filecoin-project/slate',
+    href: 'https://slate.host/',
+    image: 'https://blog.ipfs.tech/assets/img/slate-textile.aeb9e6be.jpg',
+    title: 'Slate',
+  },
+  {
+    caption: '',
+    href: '',
+    image: '',
+    title: 'Hackathon Project 2',
+  },
+  {
+    caption: '',
+    href: '',
+    image: '',
+    title: 'Hackathon Project 1',
+  },
+  {
+    caption: '',
+    href: '',
+    image: '',
+    title: 'Light Version of Estuary',
+  },
+  {
+    caption: 'Storage.Market is an information hub on data storage products, showing analytics on the storage market and recent news.',
+    github: 'https://github.com/application-research/storage.market',
+    href: 'https://storage.market',
+    image: '',
+    title: 'Storage Market',
+  },
+];
+
+export const GLOSSARY_FIXTURE = [
+  {
+    term: 'CID',
+    definition: '',
+    furthurReading: '',
+  },
+
+  {
+    term: 'On Chain',
+    definition: '',
+    furthurReading: '',
+  },
+  {
+    term: 'Off Chain',
+    definition: '',
+    furthurReading: '',
+  },
+  {
+    term: 'Sealed',
+    definition: '',
+    furthurReading: '',
+  },
+  {
+    term: 'Unsealed',
+    definition: '',
+    furthurReading: '',
+  },
+  {
+    term: 'Deals',
+    definition: '',
+    furthurReading: '',
+  },
+  {
+    term: 'Gateway',
+    definition: '',
+    furthurReading: '',
+  },
+  {
+    term: 'Pinned',
+    definition: '',
+    furthurReading: '',
+  },
+  {
+    term: 'Unpinned',
+    definition: '',
+    furthurReading: '',
+  },
+  {
+    term: 'AutoRetrieve',
+    definition: '',
+    furthurReading: '',
+  },
+];

pages/resources.module.scss

@@ -0,0 +1,27 @@
+.body {
+  display: grid;
+  row-gap: 48px;
+}
+
+.videoGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.column {
+  grid-column: 2 / 3;
+}
+
+.h2 {
+  font-family: 'Parabole';
+}
+
+.featuredProjectsGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-gap: 16px;
+}
+
+.featuredProjectsGridColumn {
+  grid-column: span 2;
+}

pages/resources.tsx

@@ -0,0 +1,46 @@
+import Hero from '@root/components/Hero';
+import styles from '@pages/resources.module.scss';
+import Video from '@root/components/Video';
+import FeaturedProject from '@root/components/FeaturedProject';
+import { RESOURCE_PAGE_FEATURED_PROJECTS_FIXTURE, RESOURCE_PAGE_VIDEOS_FIXTURE } from '@root/fixtures/resources';
+
+//add small medium, large sizes to hero
+
+export default function Resources() {
+  const videos = RESOURCE_PAGE_VIDEOS_FIXTURE;
+  const featuredProjects = RESOURCE_PAGE_FEATURED_PROJECTS_FIXTURE;
+  return (
+    <div>
+      <Hero heading="Resources" caption="lorem ipsum" gradient={true} />
+
+      <div className={styles.body}>
+        <h2 className={styles.h2}>Video Tutorials</h2>
+        <div className={styles.videoGrid}>
+          {videos.map((video, index) => {
+            return (
+              <div className={styles.colum}>
+                <Video src={video.src} title={video.title} format={video.format} key={index} />
+              </div>
+            );
+          })}
+        </div>
+        <h2 className={styles.h2}>Featured Projects</h2>
+
+        <div className={styles.featuredProjectsGrid}>
+          {featuredProjects.map((featuredProject, index) => {
+            const { title, image, href, caption } = featuredProject;
+            return (
+              <div className={styles.featuredProjectsGridColumn}>
+                <FeaturedProject title={title} image={image} href={href} caption={caption} key={index} />
+              </div>
+            );
+          })}
+        </div>
+
+        <h2 className={styles.h2}>Glossary</h2>
+        <p> retrievals on chain sealed unsealed deals CID gateway pinned & unpinned auto retrive (link to auto retrieve docs)</p>
+        <h2 className={styles.h2}>Further Reading</h2>
+      </div>
+    </div>
+  );
+}