Revised ProjectCards to be MagicCards so they can also be used for other sections of the site

README.md

@@ -6,6 +6,7 @@ This is the React re-write of the PSE website, formally just a landing page.
 ## Get Started with Development
 
 `npm install`
+
 `npm run start` serves a development server at [http://localhost:8081](http://localhost:8081)
 
 The components live under `/src/components`.

src/Utils.tsx

@@ -0,0 +1,8 @@
+export function shuffleFisherYates(array: []): [] {
+  let i = array.length;
+  while (i--) {
+    const ri = Math.floor(Math.random() * i);
+    [array[i], array[ri]] = [array[ri], array[i]];
+  }
+  return array;
+}

src/components/MagicCard.css

@@ -25,7 +25,7 @@
 .icon {
   height: 1.5rem;
   padding-block: 0.125rem;
-  padding-inline-end: 0.33rem;
+  padding-inline-end: 0.5rem;
 }
 
 .link-title {

src/components/MagicCard.tsx

@@ -3,14 +3,14 @@ import github from '../images/github.svg';
 import discord from '../images/discord.svg';
 import twitter from '../images/twitter.svg';
 import telegram from '../images/telegram.svg';
-import './ProjectCard.css';
+import './MagicCard.css';
 import ColorHash from 'color-hash'
 
-export interface ProjectProps {
+export interface CardProps {
   name: string;
   short_name?: string;
-  description: string;
+  description: string | string[];
-  long_description?: string;
+  long_description?: string | string[];
   image?: string;
   links?: Links[];
 }
@@ -45,7 +45,20 @@ function renderImage(name: string): any {
   );
 }
 
-function ProjectCard(props: ProjectProps) {
+function renderDescription(description: string | string[]): any {
+  if (typeof description === 'string') {
+    return (
+      <p className="card-text">{description}</p>
+    );
+  }
+  return description.map((text: string, index: number) => {
+    return (
+      <p className="card-text" key={index}>{text}</p>
+    );
+  });
+}
+
+function MagicCard(props: CardProps) {
   let links = props.links
     ? props.links.map((link) => {
         if (link.github) {
@@ -90,4 +103,4 @@ function ProjectCard(props: ProjectProps) {
   );
 }
 
-export default ProjectCard;
+export default MagicCard;

src/components/Projects.tsx

@@ -1,26 +1,19 @@
 import React, { useState, useEffect } from 'react';
-import ProjectCard, { ProjectProps } from './ProjectCard';
+import MagicCard, { CardProps } from './MagicCard';
+import { shuffleFisherYates } from '../Utils';
 import ProjectData from './Projects.json';
 import './Projects.css';
 
-function shuffleFisherYates(array: []): [] {
-  let i = array.length;
-  while (i--) {
-    const ri = Math.floor(Math.random() * i);
-    [array[i], array[ri]] = [array[ri], array[i]];
-  }
-  return array;
-}
 
 function Projects() {
-  let [projects, setProjects] = useState<ProjectProps[]>([]);
+  let [projects, setProjects] = useState<CardProps[]>([]);
 
   useEffect(() => {
     setProjects(ProjectData);
   }, []);
 
   let _projects = projects.map((project) => {
-    return (<ProjectCard key={project.name} {...project} />);
+    return (<MagicCard key={project.name} {...project} />);
   })
 
   _projects = shuffleFisherYates(_projects as []);