Merge pull request #19 from noclocks/develop

[PR]: YouTube Embedding
noclocks · Jun 12, 2024 · f038e8c · f038e8c
2 parents 32bc19d + 8ed088a
commit f038e8c
Show file tree

Hide file tree

Showing 6 changed files with 201 additions and 139 deletions.
diff --git a/app/app/components/YouTubeEmbed.tsx b/app/app/components/YouTubeEmbed.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import '../styles/youtube.css';
+
+// import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+// import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
+
+interface YouTubeEmbedProps {
+    videoId: string;
+    title?: string;
+    width?: string;
+    height?: string;
+}
+
+export default function YouTubeEmbed({ videoId, title, width = "560", height = "315" }: YouTubeEmbedProps) {
+
+    const src = `https://www.youtube.com/embed/${videoId}?si=NT6nO5iaFP_2BEKp`;
+
+    return (
+        <div className="youtube-container">
+            <iframe
+                width={width}
+                height={height}
+                src={src} //{`https://www.youtube.com/embed/${videoId}`}
+                title={title}
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                referrerPolicy="strict-origin-when-cross-origin"
+                allowFullScreen
+            ></iframe>
+            {/* <LiteYouTubeEmbed
+                id={videoId || ''}
+                title={title || ''}
+                params=''
+                adNetwork={true}
+                playlist={false}
+                poster='hqdefault'
+                noCookie={true}
+                ref={null}
+            /> */}
+        </div>
+    );
+}
diff --git a/app/app/routes/_index.tsx b/app/app/routes/_index.tsx
@@ -1,6 +1,8 @@
 import {Header} from "../components/Header";
 import {Footer} from "../components/Footer";
 
+import YouTubeEmbed from "../components/YouTubeEmbed";
+
 // ASSETS //
 // Fonts
 import "../styles/typography.css"
@@ -15,6 +17,9 @@ import VillardImg from "../wp-content/uploads/sites/1302270/2022/06/Villard-S-Ba
 // Styles
 import "../styles/home.css";
 
+const YoutubeVideoId = "fdi_z9NLT_w?si=iSeO4L8snTfPbG5H";
+const YouTubeVideoTitle = "Villard Bastien"
+
 export default function Index() {
   return (
     <>
@@ -239,6 +244,10 @@ export default function Index() {
                           </div>
                         </div>
                       </div>
+                      <YouTubeEmbed
+                        videoId={YoutubeVideoId}
+                        title={YouTubeVideoTitle}
+                      />
                       <div className="et_pb_section et_pb_section_2 content-section fl-home-sec-4 et_pb_with_background et_section_regular">
                         <div className="et_pb_row et_pb_row_2">
                           <div className="et_pb_column et_pb_column_1_2 et_pb_column_2  et_pb_css_mix_blend_mode_passthrough">

diff --git a/app/app/styles/youtube.css b/app/app/styles/youtube.css
@@ -0,0 +1,11 @@
+.youtube-container {
+    display: flex;
+    justify-content: center;
+    padding: 20px;
+    background-color: #f0f0f0;
+}
+
+iframe {
+    border: 2px solid #000;
+    border-radius: 8px;
+}
diff --git a/docs/techstack.md b/docs/techstack.md
@@ -0,0 +1,139 @@
+<!--
+&lt;--- Readme.md Snippet without images Start ---&gt;
+## Tech Stack
+noclocks/bastienlaw-remix is built on the following main stack:
+
+- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) – Languages
+- [TypeScript](http://www.typescriptlang.org) – Languages
+- [React](https://reactjs.org/) – Javascript UI Libraries
+- [ESLint](http://eslint.org/) – Code Review
+- [Vite](https://vitejs.dev/) – JS Build Tools / JS Task Runners
+
+Full tech stack [here](/techstack.md)
+
+&lt;--- Readme.md Snippet without images End ---&gt;
+
+&lt;--- Readme.md Snippet with images Start ---&gt;
+## Tech Stack
+noclocks/bastienlaw-remix is built on the following main stack:
+
+- <img width='25' height='25' src='https://img.stackshare.io/service/1209/javascript.jpeg' alt='JavaScript'/> [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) – Languages
+- <img width='25' height='25' src='https://img.stackshare.io/service/1612/bynNY5dJ.jpg' alt='TypeScript'/> [TypeScript](http://www.typescriptlang.org) – Languages
+- <img width='25' height='25' src='https://img.stackshare.io/service/1020/OYIaJ1KK.png' alt='React'/> [React](https://reactjs.org/) – Javascript UI Libraries
+- <img width='25' height='25' src='https://img.stackshare.io/service/3337/Q4L7Jncy.jpg' alt='ESLint'/> [ESLint](http://eslint.org/) – Code Review
+- <img width='25' height='25' src='https://img.stackshare.io/service/21547/default_1aeac791cde11ff66cc0b20dcc6144eeb185c905.png' alt='Vite'/> [Vite](https://vitejs.dev/) – JS Build Tools / JS Task Runners
+
+Full tech stack [here](/techstack.md)
+
+&lt;--- Readme.md Snippet with images End ---&gt;
+-->
+<div align="center">
+
+# Tech Stack File
+![](https://img.stackshare.io/repo.svg "repo") [noclocks/bastienlaw-remix](https://github.com/noclocks/bastienlaw-remix)![](https://img.stackshare.io/public_badge.svg "public")
+<br/><br/>
+|18<br/>Tools used|03/08/24 <br/>Report generated|
+|------|------|
+</div>
+
+## <img src='https://img.stackshare.io/languages.svg'/> Languages (3)
+<table><tr>
+  <td align='center'>
+  <img width='36' height='36' src='https://img.stackshare.io/service/6727/css.png' alt='CSS 3'>
+  <br>
+  <sub><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3">CSS 3</a></sub>
+  <br>
+  <sub></sub>
+</td>
+
+<td align='center'>
+  <img width='36' height='36' src='https://img.stackshare.io/service/1209/javascript.jpeg' alt='JavaScript'>
+  <br>
+  <sub><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a></sub>
+  <br>
+  <sub></sub>
+</td>
+
+<td align='center'>
+  <img width='36' height='36' src='https://img.stackshare.io/service/1612/bynNY5dJ.jpg' alt='TypeScript'>
+  <br>
+  <sub><a href="http://www.typescriptlang.org">TypeScript</a></sub>
+  <br>
+  <sub></sub>
+</td>
+
+</tr>
+</table>
+
+## <img src='https://img.stackshare.io/frameworks.svg'/> Frameworks (1)
+<table><tr>
+  <td align='center'>
+  <img width='36' height='36' src='https://img.stackshare.io/service/1020/OYIaJ1KK.png' alt='React'>
+  <br>
+  <sub><a href="https://reactjs.org/">React</a></sub>
+  <br>
+  <sub>v18.2.0</sub>
+</td>
+
+</tr>
+</table>
+
+## <img src='https://img.stackshare.io/devops.svg'/> DevOps (4)
+<table><tr>
+  <td align='center'>
+  <img width='36' height='36' src='https://img.stackshare.io/service/3337/Q4L7Jncy.jpg' alt='ESLint'>
+  <br>
+  <sub><a href="http://eslint.org/">ESLint</a></sub>
+  <br>
+  <sub></sub>
+</td>
+
+<td align='center'>
+  <img width='36' height='36' src='https://img.stackshare.io/service/1046/git.png' alt='Git'>
+  <br>
+  <sub><a href="http://git-scm.com/">Git</a></sub>
+  <br>
+  <sub></sub>
+</td>
+
+<td align='center'>
+  <img width='36' height='36' src='https://img.stackshare.io/service/21547/default_1aeac791cde11ff66cc0b20dcc6144eeb185c905.png' alt='Vite'>
+  <br>
+  <sub><a href="https://vitejs.dev/">Vite</a></sub>
+  <br>
+  <sub></sub>
+</td>
+
+<td align='center'>
+  <img width='36' height='36' src='https://img.stackshare.io/service/1120/lejvzrnlpb308aftn31u.png' alt='npm'>
+  <br>
+  <sub><a href="https://www.npmjs.com/">npm</a></sub>
+  <br>
+  <sub></sub>
+</td>
+
+</tr>
+</table>
+
+
+## <img src='https://img.stackshare.io/group.svg' /> Open source packages (10)</h2>
+
+## <img width='24' height='24' src='https://img.stackshare.io/service/1120/lejvzrnlpb308aftn31u.png'/> npm (10)
+
+|NAME|VERSION|LAST UPDATED|LAST UPDATED BY|LICENSE|VULNERABILITIES|
+|:------|:------|:------|:------|:------|:------|
+|[@types/react](https://www.npmjs.com/@types/react)|v18.2.20|02/22/24|Patrick Howard |MIT|N/A|
+|[@types/react-dom](https://www.npmjs.com/@types/react-dom)|v18.2.7|02/22/24|Patrick Howard |MIT|N/A|
+|[@typescript-eslint/eslint-plugin](https://www.npmjs.com/@typescript-eslint/eslint-plugin)|v6.7.4|02/22/24|Patrick Howard |MIT|N/A|
+|[eslint-import-resolver-typescript](https://www.npmjs.com/eslint-import-resolver-typescript)|v3.6.1|02/22/24|Patrick Howard |ISC|N/A|
+|[eslint-plugin-import](https://www.npmjs.com/eslint-plugin-import)|v2.28.1|02/22/24|Patrick Howard |MIT|N/A|
+|[eslint-plugin-jsx-a11y](https://www.npmjs.com/eslint-plugin-jsx-a11y)|v6.7.1|02/22/24|Patrick Howard |MIT|N/A|
+|[eslint-plugin-react](https://www.npmjs.com/eslint-plugin-react)|v7.33.2|02/22/24|Patrick Howard |MIT|N/A|
+|[eslint-plugin-react-hooks](https://www.npmjs.com/eslint-plugin-react-hooks)|v4.6.0|02/22/24|Patrick Howard |MIT|N/A|
+|[react-dom](https://www.npmjs.com/react-dom)|v18.2.0|02/22/24|Patrick Howard |MIT|N/A|
+|[vite](https://www.npmjs.com/vite)|v5.1.4|02/22/24|Patrick Howard |N/A|N/A|
+
+<br/>
+<div align='center'>
+
+Generated via [Stack File](https://github.com/marketplace/stack-file)
diff --git a/techstack.yml → docs/techstack.yml b/techstack.yml → docs/techstack.yml
diff --git a/techstack.md b/techstack.md