From 621aafcd10b442372811e4ce7456703b74c01a10 Mon Sep 17 00:00:00 2001 From: Keegan Lenz Date: Mon, 2 Oct 2023 18:56:59 -0700 Subject: [PATCH] Overhauled content structure --- src/components/home_page/content.tsx | 14 ++-- src/components/home_page/content/projects.tsx | 7 -- src/components/project_page/content.tsx | 44 +++++------- .../project_page/content/project1.tsx | 10 --- .../project_page/content/project2.tsx | 10 --- .../project_page/content/project3.tsx | 10 --- .../project_page/content/project_paths.tsx | 9 --- .../project_page/content/projects_array.tsx | 16 ----- src/{ => content}/assets/demo_img.png | Bin src/content/projects_content.tsx | 68 ++++++++++++++++++ src/index.scss | 4 +- src/index.tsx | 9 ++- vite.config.ts | 2 +- 13 files changed, 100 insertions(+), 103 deletions(-) delete mode 100644 src/components/home_page/content/projects.tsx delete mode 100644 src/components/project_page/content/project1.tsx delete mode 100644 src/components/project_page/content/project2.tsx delete mode 100644 src/components/project_page/content/project3.tsx delete mode 100644 src/components/project_page/content/project_paths.tsx delete mode 100644 src/components/project_page/content/projects_array.tsx rename src/{ => content}/assets/demo_img.png (100%) create mode 100644 src/content/projects_content.tsx diff --git a/src/components/home_page/content.tsx b/src/components/home_page/content.tsx index 1dae48d..e0e5a19 100644 --- a/src/components/home_page/content.tsx +++ b/src/components/home_page/content.tsx @@ -1,15 +1,15 @@ -import React, { useEffect } from "react"; import {Link} from "react-router-dom"; -import Projects from "./content/projects"; +import Projects_Content from "../../content/projects_content"; function Content() { let content_list: any[] = []; - for (let i = 0; i < Projects.length; i += 3) { - const image: string = Projects[i]; - const title: string = Projects[i + 1]; - const descritpion: string = Projects[i + 2]; - const path: string = "/" + title.replace(/\s/g, "-"); + for (let i = 0; i < Projects_Content.length; i++) { + const path: string = "/" + Projects_Content[i][1][1].replace(/\s/g, "-"); + + const image: string = Projects_Content[i][0][0]; + const title: string = Projects_Content[i][0][1]; + const descritpion: string = Projects_Content[i][0][1]; content_list.push(
diff --git a/src/components/home_page/content/projects.tsx b/src/components/home_page/content/projects.tsx deleted file mode 100644 index b21f758..0000000 --- a/src/components/home_page/content/projects.tsx +++ /dev/null @@ -1,7 +0,0 @@ -const Projects = [ - "src/assets/demo_img.png", "Project Title 1", "Short Description 1", - "src/assets/demo_img.png", "Project Title 2", "Short Description 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", - "src/assets/demo_img.png", "Project Title 3", "Short Description 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." -]; - -export default Projects; \ No newline at end of file diff --git a/src/components/project_page/content.tsx b/src/components/project_page/content.tsx index 3545652..4c789a3 100644 --- a/src/components/project_page/content.tsx +++ b/src/components/project_page/content.tsx @@ -1,34 +1,16 @@ -import Project1 from "./content/project1"; -import Project2 from "./content/project2"; -import Project3 from "./content/project3"; - -// import Projects_Array from "./content/projects_array"; +import Projects_Content from "../../content/projects_content"; function Content() { let url: string = window.location.pathname; - // console.log(url); + console.log(url); + let content: string[] = []; - switch (url) { - case "/Project-Title-1": - content = Project1 - break; - case "/Project-Title-2": - content = Project2 - break; - case "/Project-Title-3": - content = Project3 - break; + for (let i = 0; i < Projects_Content.length; i++) { + if ("/" + Projects_Content[i][1][1].replace(/\s/g, "-") == url) { + content = Projects_Content[i][1]; + } } - // let content = null; - // for (let i = 0; i < Projects_Array.length; i++) { - // if ("/" + Projects_Array[i][1].replace(/\s/g, "-") === projectId) { - // content = Projects_Array[i]; - // break; - // } - // } - - // let content: string[] = Project1; let title: string = ""; let youtube: string = ""; let image: string = ""; @@ -46,19 +28,25 @@ function Content() { case "Y": youtube = content[i + 1]; content_list.push( - +
+ +
) break; case "I": image = content[i + 1]; content_list.push( - +
+ +
); break; case "P": paragraph = content[i + 1]; content_list.push( -

{paragraph}

+
+

{paragraph}

+
); break; } diff --git a/src/components/project_page/content/project1.tsx b/src/components/project_page/content/project1.tsx deleted file mode 100644 index 7e151a3..0000000 --- a/src/components/project_page/content/project1.tsx +++ /dev/null @@ -1,10 +0,0 @@ -const Project1 = [ - "T", "Project 1 Title", - "Y", "https://www.youtube.com/embed/tgbNymZ7vqY", - "I", "src/assets/demo_img.png", - "P", "Paragraph 1", - "P", "Paragraph 2", - "P", "Paragraph 3" -] - -export default Project1; \ No newline at end of file diff --git a/src/components/project_page/content/project2.tsx b/src/components/project_page/content/project2.tsx deleted file mode 100644 index 90b6b93..0000000 --- a/src/components/project_page/content/project2.tsx +++ /dev/null @@ -1,10 +0,0 @@ -const Project2 = [ - "T", "Project 2 Title", - "Y", "https://www.youtube.com/embed/tgbNymZ7vqY", - "I", "src/assets/demo_img.png", - "P", "Paragraph 1", - "P", "Paragraph 2", - "P", "Paragraph 3" -] - -export default Project2; \ No newline at end of file diff --git a/src/components/project_page/content/project3.tsx b/src/components/project_page/content/project3.tsx deleted file mode 100644 index 15d84b9..0000000 --- a/src/components/project_page/content/project3.tsx +++ /dev/null @@ -1,10 +0,0 @@ -const Project2 = [ - "T", "Project 3 Title", - "Y", "https://www.youtube.com/embed/tgbNymZ7vqY", - "I", "src/assets/demo_img.png", - "P", "Paragraph 1", - "P", "Paragraph 2", - "P", "Paragraph 3" -] - -export default Project2; \ No newline at end of file diff --git a/src/components/project_page/content/project_paths.tsx b/src/components/project_page/content/project_paths.tsx deleted file mode 100644 index f47d57c..0000000 --- a/src/components/project_page/content/project_paths.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import Projects from "../../home_page/content/projects" - -let Project_Paths: string[] = []; -for (let i = 0; i < Projects.length; i += 3) { - const project_path: string = "/:" + Projects[i + 1].replace(/\s/g, ""); // Replace spaces with dashes for url - Project_Paths.push(project_path); -} - -export default Project_Paths; \ No newline at end of file diff --git a/src/components/project_page/content/projects_array.tsx b/src/components/project_page/content/projects_array.tsx deleted file mode 100644 index d212c54..0000000 --- a/src/components/project_page/content/projects_array.tsx +++ /dev/null @@ -1,16 +0,0 @@ -declare const require: { - context( - directory: string, - useSubdirectories?: boolean, - regExp?: RegExp - ): { - keys(): string[]; - (id: string): T; - }; -}; - - -const context = require.context('./', false, /\.tsx$/); -const Projects_Array = context.keys().map(context); - -export default Projects_Array; \ No newline at end of file diff --git a/src/assets/demo_img.png b/src/content/assets/demo_img.png similarity index 100% rename from src/assets/demo_img.png rename to src/content/assets/demo_img.png diff --git a/src/content/projects_content.tsx b/src/content/projects_content.tsx new file mode 100644 index 0000000..24a3f20 --- /dev/null +++ b/src/content/projects_content.tsx @@ -0,0 +1,68 @@ +// This is where all website project content updates should be made + +// Array of all project content +const Projects_Content = [ + // First Project + [ + // Fist Project Card + [ + // Card Image + "src/content/assets/demo_img.png", + // Card Title + "Project Title 1", + // Card Paragraph + "Short Description 1" + ], + + // First Project Page + [ + // T = title + // Y = youtube link (don't forget embed) + // I = image + // P = paragraph + "T", "Project 1 Title", + "Y", "https://www.youtube.com/embed/tgbNymZ7vqY", + "P", "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", + "I", "src/content/assets/demo_img.png", + "P", "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.", + "P", "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like)." + ] + ], + + [ + [ + "src/content/assets/demo_img.png", + "Project Title 2", + "Short Description 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", + ], + + [ + "T", "Project 2 Title", + "Y", "https://www.youtube.com/embed/tgbNymZ7vqY", + "P", "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", + "I", "src/content/assets/demo_img.png", + "P", "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.", + "P", "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like)." + ] + ], + + [ + [ + "src/content/assets/demo_img.png", + "Project Title 3", + "Short Description 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." + ], + + [ + "T", "Project 3 Title", + "I", "src/content/assets/demo_img.png", + "Y", "https://www.youtube.com/embed/tgbNymZ7vqY", + "P", "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", + "I", "src/content/assets/demo_img.png", + "P", "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.", + "P", "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like)." + ] + ] +]; + +export default Projects_Content; \ No newline at end of file diff --git a/src/index.scss b/src/index.scss index 0a0d09c..318da18 100644 --- a/src/index.scss +++ b/src/index.scss @@ -171,8 +171,8 @@ $max-width: 1230px; iframe{ border: none; - width: 66%; - aspect-ratio: 4/3; + width: 80%; + aspect-ratio: 16/9; } } diff --git a/src/index.tsx b/src/index.tsx index 6fe6a53..d41f7ca 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,13 +4,16 @@ import Project from "./pages/project" import About from "./pages/about"; import Contact from "./pages/contact"; import Navigation_Bar from "./components/nav_bar"; -import Project_Paths from "./components/project_page/content/project_paths"; +import Projects_Content from "./content/projects_content"; function App() { + // let project_path: string = ""; let project_routes: any[] = []; - for (let i = 0; i < Project_Paths.length; i++) { + for (let i = 0; i < Projects_Content.length; i++) { + // project_path = "/:" + Projects_Content[i][1][1].replace(/\s/g, "-"); // Replace spaces with dashes for url project_routes.push ( - }> + // Project_Content[i][1][1] gets first element after descriptor from project page (should probably be a title) + }> ) } diff --git a/vite.config.ts b/vite.config.ts index af3c518..5d61d3c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,6 +3,6 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ - base: "/Club-Website", + base: "/", // Why are we changing this? plugins: [react()], })