diff --git a/app/app/components/YouTubeEmbed.tsx b/app/app/components/YouTubeEmbed.tsx new file mode 100644 index 0000000..2b2b11e --- /dev/null +++ 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 ( +
+ + {/* */} +
+ ); +} diff --git a/app/app/routes/_index.tsx b/app/app/routes/_index.tsx index 4856add..7c5c8fb 100644 --- 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() { +
diff --git a/app/app/styles/youtube.css b/app/app/styles/youtube.css new file mode 100644 index 0000000..4efa30c --- /dev/null +++ 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 index e69de29..5970f61 100644 --- a/docs/techstack.md +++ b/docs/techstack.md @@ -0,0 +1,139 @@ + +
+ +# 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") +

+|18
Tools used|03/08/24
Report generated| +|------|------| +
+ +## Languages (3) + + + + + + + + +
+ CSS 3 +
+ CSS 3 +
+ +
+ JavaScript +
+ JavaScript +
+ +
+ TypeScript +
+ TypeScript +
+ +
+ +## Frameworks (1) + + + + +
+ React +
+ React +
+ v18.2.0 +
+ +## DevOps (4) + + + + + + + + + + +
+ ESLint +
+ ESLint +
+ +
+ Git +
+ Git +
+ +
+ Vite +
+ Vite +
+ +
+ npm +
+ npm +
+ +
+ + +## Open source packages (10) + +## 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| + +
+
+ +Generated via [Stack File](https://github.com/marketplace/stack-file) diff --git a/techstack.yml b/docs/techstack.yml similarity index 100% rename from techstack.yml rename to docs/techstack.yml diff --git a/techstack.md b/techstack.md deleted file mode 100644 index 5970f61..0000000 --- a/techstack.md +++ /dev/null @@ -1,139 +0,0 @@ - -
- -# 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") -

-|18
Tools used|03/08/24
Report generated| -|------|------| -
- -## Languages (3) - - - - - - - - -
- CSS 3 -
- CSS 3 -
- -
- JavaScript -
- JavaScript -
- -
- TypeScript -
- TypeScript -
- -
- -## Frameworks (1) - - - - -
- React -
- React -
- v18.2.0 -
- -## DevOps (4) - - - - - - - - - - -
- ESLint -
- ESLint -
- -
- Git -
- Git -
- -
- Vite -
- Vite -
- -
- npm -
- npm -
- -
- - -## Open source packages (10) - -## 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| - -
-
- -Generated via [Stack File](https://github.com/marketplace/stack-file)