feat: Update design and structure for new schema format (0c47da88) · Commits · Research Enablement / Sites / Research

src/components/Catalog.astro

+34 −27

Original line number	Diff line number	Diff line
		@@ -21,7 +21,17 @@ const { items } = Astro.props;
		h4 {
		font-size: 1.2rem;
		color: #666;
		margin: 20px 10px 10px 10px;
		margin: 10px;
		}
		.item-container {
		transition: background-color 0.5s ease;
		background-color: var(--background-color);
		padding: 10px 10px 20px 10px;
		border-left: 6px solid var(--background-color);
		&:hover {
		background-color: var(--background-first-section);
		border-left: 6px solid var(--primary);
		}
		}
		.item-title-container>h4::before {
		content: url("/assets/logo_ornl_leaf.svg");
		@@ -40,21 +50,22 @@ const { items } = Astro.props;
		justify-content: space-between;
		}
		#catalog-toggle-palette {
		width: 200px;
		background: none;
		border: 2px solid #CCC;
		background: var(--hale-navy);
		border: 2px solid var(--hale-navy);
		border-radius: 5px;
		box-sizing: border-box;
		color: #555;
		color: var(--background-color);
		cursor: pointer;
		display: inline;
		font-size: 1.2rem;
		outline: none;
		padding: 9px 24px 10px 17px;
		margin: 0 5px;
		padding: 0 1rem;
		position: relative;
		transition: all 0.1s ease-in-out;
		&:hover {
		border: 2px solid var(--primary);
		color: var(--primary);
		border: 2px solid var(--hale-navy);
		background-color: var(--background-color);
		color: var(--hale-navy);
		}
		}
		#catalog-search-input {
		@@ -86,21 +97,6 @@ const { items } = Astro.props;
		color: var(--primary);
		}
		}
		.AccordionItem {
		background-color: var(--alternate);
		border: none;
		padding-left: 30px;
		margin: 20px 0;
		&[data-state = open] {
		background-color: var(--background-color);
		border-left: 3px solid var(--alternate);
		& h3 {
		color: var(--alternate);
		transition: color 50ms;
		margin-left: 7px;
		}
		}
		}
		.label-container {
		display: flex;
		flex-direction: row;
		@@ -111,15 +107,26 @@ const { items } = Astro.props;
		}
		}
		.label-container>.label {
		border: 1px solid #CCC;
		border-color: green;
		border: none;
		color: #999;
		cursor: pointer;
		font-size: 0.9rem;
		margin: 0 2px;
		padding: 1px 5px 0px 5px;
		&:hover {
		color: red;
		}
		}
		.item-container>.label-container>.label {
		border: 1px solid #AAA;
		border-radius: 5px;
		color: green;
		color: #999;
		cursor: pointer;
		font-size: 0.9rem;
		margin: 0 2px;
		padding: 1px 10px 0px 10px;
		&:hover {
		border: 1px solid green;
		background-color: green;
		color: white;
		}

src/components/Controls.tsx

+8 −2

Original line number	Diff line number	Diff line
		@@ -27,6 +27,7 @@ import { useEffect, useState } from 'react';
		import { BsQrCode } from 'react-icons/bs';
		import { Button } from '@/components/ui/button';
		import { CgSearchFound } from 'react-icons/cg';
		import { Command } from 'lucide-react';
		import Fuse from 'fuse.js';
		import { GiOakLeaf } from 'react-icons/gi';
		import { Input } from '@/components/ui/input';
		@@ -82,7 +83,12 @@ const LoadingSpinner = () => {
		return <Spinner />;
		};
		const ToggleButton = ({ onClick }) => {
		return <Button id="catalog-toggle-palette" onClick={onClick}>Explore & Share</Button>;
		return (
		<Button id="catalog-toggle-palette" onClick={onClick}>
		Explore & Share
		<Command />
		</Button>
		);
		};
		const SearchInput = () => {
		const [input, setInput] = useState('');
		@@ -269,7 +275,7 @@ const Crumbs = ({ pages }) => {
		const Projects = ({ items }) => {
		const action = {
		cursor: 'pointer',
		paddingLeft: '10px',
		paddingLeft: '20px',
		};
		return (
		<CommandGroup heading="Projects">

src/components/Graphic.astro

+8 −9

Original line number	Diff line number	Diff line
		---
		import type { ImageMetadata } from "astro";
		import { Debug } from "astro/components";
		import { Image } from "astro:assets";
		import { TbTextCaption } from "react-icons/tb";
		import Lightbox from "../components/Lightbox.astro";
		import GraphicCornerLabel from "./GraphicCornerLabel.astro";

		const { path, data } = Astro.props;
		const { href, caption } = data;
		const { contentUrl, caption } = data;
		const DEFAULT_IMAGE_PATH = "/src/assets/default.png";
		const images = import.meta.glob<{ default: ImageMetadata }>("src/*/.{png,jpg,jpeg}", { import: 'default' });
		const re = new RegExp(`/src/data/${path}/${href}`);
		const re = new RegExp(`/src/data/${path}/${contentUrl}`);
		const maybeImagePath = Object.keys(images).find((key) => re.test(key));
		const src = images[maybeImagePath ? maybeImagePath : DEFAULT_IMAGE_PATH]();
		---

		<script>
		const lightbox = document.getElementById("lightbox-overlay");
		const graphic = document.getElementsByClassName("graphic-wrapper")[0];
		const show = () => (lightbox.style.visibility = "visible");
		graphic.addEventListener("click", show);
		</script>
		<div class="graphic-wrapper">
		<GraphicCornerLabel />
		<Image src={src} title={caption} alt={caption} width={380} height={200} />
		@@ -35,6 +28,12 @@ const src = images[maybeImagePath ? maybeImagePath : DEFAULT_IMAGE_PATH]();
		}
		</div>
		<Lightbox src={src} title={caption} caption={caption} />
		<script>
		const lightbox = document.getElementById("lightbox-overlay");
		const graphic = document.getElementsByClassName("graphic-wrapper")[0];
		const show = () => (lightbox.style.visibility = "visible");
		graphic.addEventListener("click", show);
		</script>
		<style>
		.graphic-wrapper {
		cursor: pointer;

src/components/Header.astro

+6 −5

Original line number	Diff line number	Diff line
		@@ -22,7 +22,7 @@ const { title, subtitle, isAboutPage } = Astro.props;
		<style is:inline>
		:root {
		--logo-size: 40px;
		--header-width: 60vw;
		--header-width: 50vw;
		}
		h1 {
		margin: 0;
		@@ -30,16 +30,17 @@ const { title, subtitle, isAboutPage } = Astro.props;
		header {
		color: #FFF;
		font-family: var(--font-family);
		margin-top: 4px;
		padding: 0;
		width: 100%;
		& > .wrapper {
		border-radius: 0 0 10px 10px;
		border-radius: 0 0 3px 3px;
		background-blend-mode: mulitply;
		background-position: bottom left;
		background-size: cover;
		height: 300px;
		height: 250px;
		margin: 0 auto;
		max-width: 2000px;
		max-width: 1500px;
		min-width: 1000px;
		padding: 40px;
		width: var(--header-width);
		@@ -73,7 +74,7 @@ const { title, subtitle, isAboutPage } = Astro.props;
		z-index: 1;
		& .NavigationMenuLink {
		font-size: 1.2rem;
		padding: 20px;
		padding: 10px;
		}
		}
		@media screen and (max-width: 400px) {

src/components/Lightbox.astro

+7 −6

Original line number	Diff line number	Diff line
		@@ -4,12 +4,6 @@ import { Image } from "astro:assets";
		const { caption, src, title } = Astro.props;
		---

		<script>
		const lightbox = document.getElementById("lightbox-overlay");
		const image = lightbox.querySelector("img");
		const hide = () => (lightbox.style.visibility = "hidden");
		[lightbox, image].forEach((el) => el.addEventListener("click", hide));
		</script>
		<div id="lightbox-overlay">
		<div id="lightbox-image-wrapper">
		<Image
		@@ -22,6 +16,12 @@ const { caption, src, title } = Astro.props;
		<div id="lightbox-caption">{caption}</div>
		</div>
		</div>
		<script>
		const lightbox = document.getElementById("lightbox-overlay");
		const image = lightbox.querySelector("img");
		const hide = () => (lightbox.style.visibility = "hidden");
		[lightbox, image].forEach((el) => el.addEventListener("click", hide));
		</script>
		<style>
		#lightbox-overlay {
		position: fixed;
		@@ -34,6 +34,7 @@ const { caption, src, title } = Astro.props;
		width: 100%;
		height: 100%;
		visibility: hidden;
		z-index: 100;
		}
		#lightbox-image-wrapper {
		display: block;