-
- {archive.map((ele) => (
-
+ {popUp !== null &&
setPopUp(null)} />}
+ {Archive(showPopUp)}
+
+
+ );
+}
+const Archive = (showPopUp: any) => {
+ return (
+ <>
+
Archive
+
+ {archive.length === 0
+ ? "No archive items available."
+ : archive.map(Quarter(showPopUp))}
+
+
+ );
+};
+
+const Quarter = (showPopUp: any) => (props: QuarterArchive) => {
+ return (
+ <>
+
{props.name}
+
+ {props.series.length === 0
+ ? "No series available."
+ : props.series.map(Series(showPopUp))}
+
+
+ );
+};
+
+const Series = (showPopUp: any) => (props: SeriesArchive) => {
+ return (
+
+
{props.name}
+
{props.description}
+
+ {props.events.length === 0
+ ? "No events available."
+ : props.events.map(Event(showPopUp))}
+
+
+ );
+};
+
+const Event = (showPopUp: any) => (props: EventArchive) => {
+ return (
+
+ );
+};
+
+type PopupProps = {
+ event: EventArchive;
+ close: () => void;
+};
+
+const PopUp = ({ event, close }: PopupProps) => {
+ const [mounted, setMounted] = useState(false);
+ useEffect(() => setMounted(true), []);
+ return (
+
+
+
+
+
+
+
+
{event.name}
+
{event.date.toDateString()}
+
{event.location}
+
+ Tags:
+ {event.tags.map((e) => (
+
))}
+
{event.description}
+
+
+ {event.recording !== undefined ? (
+
+ ) : null}
+ {event.slides !== undefined ? (
+
+ ) : null}
+
-
+
);
-}
+};
diff --git a/pages/events.tsx b/pages/events.tsx
index a406b4a..bd856c7 100644
--- a/pages/events.tsx
+++ b/pages/events.tsx
@@ -65,7 +65,11 @@ const EventPopup = ({ close, event }: EventPopupProps) => {
-
+
{event.name}
{event.date.toDateString()}
diff --git a/public/images/slides.svg b/public/images/slides.svg
index 8656ede..7054bf8 100644
--- a/public/images/slides.svg
+++ b/public/images/slides.svg
@@ -1,1909 +1,791 @@
diff --git a/public/images/utube.svg b/public/images/utube.svg
index 7d1882e..27dfb6f 100644
--- a/public/images/utube.svg
+++ b/public/images/utube.svg
@@ -1,2506 +1,1428 @@
diff --git a/styles/Archive.module.scss b/styles/Archive.module.scss
index 414c91c..3922a58 100644
--- a/styles/Archive.module.scss
+++ b/styles/Archive.module.scss
@@ -1,9 +1,123 @@
-.description {
- width: 90%;
- margin-left: auto;
- margin-right: auto;
+.archive {
+ padding-bottom: 3.5rem;
}
-// .description li {
-// list-style-type: none;
-// }
+.quarter {
+ padding-bottom: 0.5rem;
+}
+
+.series {
+ padding: 0.5rem;
+}
+
+.event {
+ display: inline-flex; /* keep the inline nature of buttons */
+ align-items: flex-start; /* this is default */
+ background-color: var(--cyber-black);
+ margin: 1rem;
+ border: var(--cyber-gold) 2px solid;
+ border-radius: 2rem;
+ width: 20rem;
+ height: 15rem;
+ text-align: left;
+
+ &:hover {
+ cursor: pointer;
+ box-shadow: 0 0 10px var(--cyber-gold);
+ }
+}
+
+.eventContent {
+ display: block;
+ width: 100%;
+}
+
+.graphic {
+ vertical-align: top;
+ border-top-left-radius: 2rem;
+ border-top-right-radius: 2rem;
+ width: 100%;
+ height: 8rem;
+ object-fit: cover;
+}
+
+.title {
+ vertical-align: top;
+ font-size: 1.25rem;
+ font-weight: bold;
+ color: var(--cyber-gold);
+ margin: 0.7rem 1rem 0.5rem 1rem;
+}
+
+.date {
+ vertical-align: top;
+ font-size: 1rem;
+ color: var(--organic-oranges);
+ margin: 0rem 1rem 0.7rem 1rem;
+}
+
+.links {
+ vertical-align: top;
+ margin: 0rem 1.5rem 0.7rem 1rem;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+
+.link {
+ position: relative;
+ font-size: 1rem;
+ text-align: justify;
+ color: white;
+}
+
+.link:hover {
+ text-decoration: underline;
+}
+
+.nolink {
+ display: inline-block;
+ color: white;
+ line-height: 1.3rem !important;
+ font-size: 1rem !important;
+}
+
+.icon {
+ width: 1.5rem;
+ height: 1.5rem;
+ margin-right: 0.25rem;
+ vertical-align: bottom;
+}
+
+.hyperlink {
+ text-decoration: underline;
+ color: var(--cyber-gold);
+ overflow-wrap: break-word;
+ &:hover {
+ cursor: pointer;
+ color: var(--flag-pink);
+ }
+}
+
+.section {
+ margin: 0.75rem 0 0.5rem 0;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ span {
+ line-height: 1.5rem !important;
+ }
+}
+
+.tags {
+ margin: 1rem 0 1rem 0;
+}
+
+.seriesArchive > h3 {
+ margin: 0.5rem 0 0 1rem;
+}
+
+.seriesDescription {
+ margin: 0.5rem 0 0 1rem;
+}
diff --git a/styles/ArchiveSection.module.scss b/styles/ArchiveSection.module.scss
deleted file mode 100644
index a6413f4..0000000
--- a/styles/ArchiveSection.module.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.main {
- margin-top: 1rem;
-
- text-align: left;
-}
diff --git a/styles/Archiveitem.module.scss b/styles/Archiveitem.module.scss
deleted file mode 100644
index d762ee7..0000000
--- a/styles/Archiveitem.module.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-.main {
- font-size: large;
- margin: auto;
- display: grid;
-
- &:hover {
- box-shadow: var(--card-border-expanded);
- }
-}
-
-.listItem {
- display: inline-flex; /* keep the inline nature of buttons */
- align-items: flex-start; /* this is default */
- background-color: var(--cyber-black);
- margin: 1.5rem 1rem;
- border: var(--cyber-gold) 2px solid;
- border-radius: 2rem;
- transition: box-shadow 0.2s;
- width: 20rem;
- height: 12rem;
- font-family: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
- text-align: left;
-
- &:hover {
- cursor: pointer;
- box-shadow: 0 0 10px var(--cyber-gold);
- }
-}
-
-.section {
- display: block;
- width: 100%;
-}
-
-.graphic {
- vertical-align: top;
- border-top-left-radius: 2rem;
- border-top-right-radius: 2rem;
- width: 100%;
- height: 5rem;
- object-fit: cover;
-}
-.title {
- vertical-align: top;
- font-size: 1.25rem;
- font-weight: bold;
- color: var(--cyber-gold);
- margin: 0.7rem 1rem 0.5rem 1rem;
-}
-.date {
- vertical-align: top;
- font-size: 1rem;
- color: var(--organic-oranges);
- margin: 0rem 1rem 0.7rem 1rem;
-}
-
-.link {
- margin: 0rem 0rem 0rem 1.5rem;
-}
-.icon {
- width: 1.125rem;
- height: 1.125rem;
-}
-.icon:hover {
- opacity: 0.5;
-}
diff --git a/styles/Events.module.scss b/styles/Events.module.scss
index efbaf5f..89cc003 100644
--- a/styles/Events.module.scss
+++ b/styles/Events.module.scss
@@ -140,7 +140,7 @@
justify-content: center;
background-color: var(--soul-dark);
color: white;
- min-width: 30vw;
+ width: 50vw;
// start out popup smol, will become beeg when .mounted on popup-container
transform-origin: center;
@@ -198,3 +198,19 @@
transform: rotate(360deg);
}
}
+
+.date {
+ color: var(--organic-oranges);
+}
+.description {
+ margin: 0.5rem 0;
+}
+
+.graphic {
+ vertical-align: top;
+ border-top-left-radius: var(--border-radius);
+ border-top-right-radius: var(--border-radius);
+ width: 100%;
+ height: 25vw;
+ object-fit: cover;
+}
diff --git a/styles/Tag.module.scss b/styles/Tag.module.scss
index 4262863..b9c8eb9 100644
--- a/styles/Tag.module.scss
+++ b/styles/Tag.module.scss
@@ -1,9 +1,9 @@
.main {
- border-radius: 5px;
+ border-radius: 5px !important;
font-size: 0.8rem;
- padding: 0.5rem;
+ padding: 0.25rem;
margin: 0rem 0.6rem 0rem 0rem;
color: white;
font-weight: bold;
- background-color: #f44d89;
+ background-color: var(--flag-pink);
}
diff --git a/utils/BlogPostData.tsx b/utils/BlogPostData.tsx
index 3bdacbe..6277f40 100644
--- a/utils/BlogPostData.tsx
+++ b/utils/BlogPostData.tsx
@@ -13,34 +13,27 @@ export async function getPostIds(): Promise
{
export async function getPostMetadata(id: string): Promise {
const fullPath = path.join(process.cwd(), POSTS_DIRECTORY, `${id}.md`);
- const fileContents = await fs.readFile(fullPath, "utf8");
- let dateStr = fullPath.split("/")[fullPath.split("/").length - 1].split("-").slice(0, 3);
- let dateArr = new Date(`${dateStr[1]}/${dateStr[2]}/${dateStr[0]}`).toDateString().split(" ");
- let date = `${dateArr[1]} ${dateArr[2]}, ${dateArr[3]}`;
-
- // Use gray-matter to parse the post metadata section
- const matterResult = matter(fileContents).data as PostData;
-
- let authors = matterResult.authors.join(", ");
- if (authors.length >= 30) {
- authors = authors.slice(0, 26)
- authors += " ...";
- }
- let authorsArr = authors.split(", ");
-
- if (matterResult.image !== undefined) {
- return {
- title: matterResult.title,
- authors: authorsArr,
- date: date,
- category: matterResult.category,
- tags: matterResult.tags,
- description: matterResult.description,
- image: matterResult.image,
- };
- }
-
- // Combine the data with the id and contentHtml
+ const fileContents = await fs.readFile(fullPath, "utf8");
+ let dateStr = fullPath
+ .split("/")
+ [fullPath.split("/").length - 1].split("-")
+ .slice(0, 3);
+ let dateArr = new Date(`${dateStr[1]}/${dateStr[2]}/${dateStr[0]}`)
+ .toDateString()
+ .split(" ");
+ let date = `${dateArr[1]} ${dateArr[2]}, ${dateArr[3]}`;
+
+ // Use gray-matter to parse the post metadata section
+ const matterResult = matter(fileContents).data as PostData;
+
+ let authors = matterResult.authors.join(", ");
+ if (authors.length >= 30) {
+ authors = authors.slice(0, 26);
+ authors += " ...";
+ }
+ let authorsArr = authors.split(", ");
+
+ if (matterResult.image !== undefined) {
return {
title: matterResult.title,
authors: authorsArr,
@@ -48,7 +41,19 @@ export async function getPostMetadata(id: string): Promise {
category: matterResult.category,
tags: matterResult.tags,
description: matterResult.description,
+ image: matterResult.image,
};
+ }
+
+ // Combine the data with the id and contentHtml
+ return {
+ title: matterResult.title,
+ authors: authorsArr,
+ date: date,
+ category: matterResult.category,
+ tags: matterResult.tags,
+ description: matterResult.description,
+ };
}
export interface PostData {
+ 
+