Update discovery location (#29)

* feat(pages/element): use image to display location of discovery instead
of using text only

* perf(images): use `priority` to load image first

* refactor(pages/element): rearrange the order of discovery and isolation

* test(snapshot): updated all element page snapshot with new discovery
location UI

* fix(pages/element): no renderring on empty value

* test(snapshot): updated all element page snapshot with conditional renderring on empty value (cpk color)

* update(desktop): updated version from `0.0.5` to `0.1.0`

apps/desktop/CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.1.0 (28 Apr 2024)
+
+-   (Feat) Updated `Discovery Location` to show flag instead of word. Rather than showing `UK/France`, it will show flag 🇬🇧🇫🇷
+
 # 0.0.5 (21 Apr 2024)
 
 -   (Fix) Removed flashing/flickering when selecting from compounds/block dropdown

apps/desktop/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@periotable/desktop",
-	"version": "0.0.5",
+	"version": "0.1.0",
 	"author": "PoolOfDeath20",
 	"private": true,
 	"license": "GPL",

apps/web/pages/elements/[name]/index.tsx

@@ -211,11 +211,11 @@ const Properties = (
 	}
 };
 
-const Color = (
-	props: Readonly<{
-		color: string | number;
-	}>
-) => {
+const Color = (color: string | number) => {
+	if (!color) {
+		return null;
+	}
+
 	return (
 		<Box display="flex" gap={2} alignItems="center">
 			<Box
@@ -224,12 +224,10 @@ const Color = (
 				height={16}
 				sx={{
 					backgroundColor:
-						typeof props.color === 'number'
-							? '#FFF'
-							: `#${props.color}`,
+						typeof color === 'number' ? '#FFF' : `#${color}`,
 				}}
 			/>
-			<Typography>{`#${typeof props.color === 'number' ? props.color : props.color.toUpperCase()}`}</Typography>
+			<Typography>{`#${typeof color === 'number' ? color : color.toUpperCase()}`}</Typography>
 		</Box>
 	);
 };
@@ -390,14 +388,15 @@ const listOfProperties = (props: GetStaticPropsType) => {
 				Appearance: capitalize(element.appearance),
 				Refractive_Index: element.refractive_index,
 				Phase_At_STP: element.phase_at_stp,
-				Spectrum_Image: element.spectrum ? (
+				Spectrum_Image: !element.spectrum ? null : (
 					<Image
+						priority
 						width={240}
 						height={41}
 						alt={`Spectrum image of ${element.name_en}`}
 						src={`${constants.images.generated.spectrum}/${obtainNameFromUrl(element.spectrum.replace('360', '240'))}`}
 					/>
-				) : null,
+				),
 				Source: (
 					<ExternalLink
 						aria-label={`Wikipedia page for ${element.name_en}`}
@@ -534,9 +533,9 @@ const listOfProperties = (props: GetStaticPropsType) => {
 		{
 			title: titles[7],
 			properties: {
-				Jmol: <Color color={element.jmol_color} />,
-				Molcas_Gv: <Color color={element.molcas_gv_color} />,
-				CPK: <Color color={element.cpk_color} />,
+				Jmol: Color(element.jmol_color),
+				Molcas_Gv: Color(element.molcas_gv_color),
+				CPK: Color(element.cpk_color),
 			},
 		},
 		{
@@ -736,7 +735,22 @@ const listOfProperties = (props: GetStaticPropsType) => {
 				'Observed/Predicted By': element.observed_predicted_by,
 				'Observed/Discovery Year':
 					element.observation_or_discovery_year,
-				Discovery_Location: element.discovery_location,
+				Discovery_Location: !element.countries.length ? null : (
+					<Stack direction="row" spacing={2}>
+						{element.countries.map((country) => {
+							return (
+								<Image
+									key={country.name}
+									priority
+									alt={country.name}
+									src={`${constants.images.generated.country}/${country.svg}`}
+									height={country.height}
+									width={country.width}
+								/>
+							);
+						})}
+					</Stack>
+				),
 				Isolated_Sample_By: element.isolated_sampled_by,
 				Isolated_Sample_Year: element.isolation_sample_year,
 				Named_By: element.named_by,

apps/web/script/assets/countries.ts

@@ -0,0 +1,33 @@
+import fs from 'fs';
+
+import axios from 'axios';
+
+import data from '@periotable/data';
+
+import constants from '../../src/web/constant';
+
+const element = () => {
+	const path = `${process.cwd()}/public${constants.images.generated.country}`;
+
+	if (!fs.existsSync(path)) {
+		fs.mkdirSync(path, {
+			recursive: true,
+		});
+	}
+
+	data.flatMap((data) => {
+		return data.countries;
+	}).forEach(async (country) => {
+		const response = await axios.get(country.link, {
+			responseType: 'arraybuffer',
+		});
+
+		fs.writeFile(`${path}/${country.svg}`, response.data, (error) => {
+			if (error) {
+				throw error;
+			}
+		});
+	});
+};
+
+export default element;

apps/web/script/assets/element.ts

@@ -0,0 +1,70 @@
+import fs from 'fs';
+
+import axios from 'axios';
+
+import { isNotUndefined } from '@poolofdeath20/util';
+
+import data from '@periotable/data';
+
+import constants from '../../src/web/constant';
+import { obtainNameFromUrl } from '../../src/web/util/asset';
+
+const element = () => {
+	const paths = [
+		`public${constants.images.generated.bohr.interactive}`,
+		`public${constants.images.generated.bohr.static}`,
+		`public${constants.images.generated.spectrum}`,
+	].map((path) => {
+		return `${process.cwd()}/${path}`;
+	});
+
+	paths.forEach((path) => {
+		if (!fs.existsSync(path)) {
+			fs.mkdirSync(path, {
+				recursive: true,
+			});
+		}
+	});
+
+	data.flatMap((element) => {
+		const {
+			spectrum,
+			bohrModel: { interactive, static: nonInteractive },
+		} = element;
+
+		const newSpectrum = spectrum?.replace('360', '240');
+
+		return [
+			!interactive
+				? undefined
+				: {
+						name: `${paths[0]}/${obtainNameFromUrl(interactive)}`,
+						url: interactive,
+					},
+			!nonInteractive
+				? undefined
+				: {
+						name: `${paths[1]}/${obtainNameFromUrl(nonInteractive)}`,
+						url: nonInteractive,
+					},
+			!newSpectrum
+				? undefined
+				: {
+						name: `${paths[2]}/${obtainNameFromUrl(newSpectrum)}`,
+						url: newSpectrum,
+					},
+		].filter(isNotUndefined);
+	}).forEach(async (props) => {
+		const response = await axios.get(props.url, {
+			responseType: 'arraybuffer',
+		});
+
+		fs.writeFile(props.name, response.data, (error) => {
+			if (error) {
+				throw error;
+			}
+		});
+	});
+};
+
+export default element;

apps/web/script/assets/images.ts

@@ -1,74 +1,9 @@
-import fs from 'fs';
-
-import axios from 'axios';
-
-import { isNotUndefined } from '@poolofdeath20/util';
-
-import data from '@periotable/data';
-
-import constants from '../../src/web/constant';
-import { obtainNameFromUrl } from '../../src/web/util/asset';
+import element from './element';
+import countries from './countries';
 
 const main = () => {
-	const paths = [
-		`public${constants.images.generated.bohr.interactive}`,
-		`public${constants.images.generated.bohr.static}`,
-		`public${constants.images.generated.spectrum}`,
-	].map((path) => {
-		return `${process.cwd()}/${path}`;
-	});
-
-	paths.forEach((path) => {
-		if (!fs.existsSync(path)) {
-			fs.mkdirSync(path, {
-				recursive: true,
-			});
-		}
-	});
-
-	Promise.all(
-		data
-			.flatMap((element) => {
-				const {
-					spectrum,
-					bohrModel: { interactive, static: nonInteractive },
-				} = element;
-
-				const newSpectrum = spectrum?.replace('360', '240');
-
-				return [
-					!interactive
-						? undefined
-						: {
-								name: `${paths[0]}/${obtainNameFromUrl(interactive)}`,
-								url: interactive,
-							},
-					!nonInteractive
-						? undefined
-						: {
-								name: `${paths[1]}/${obtainNameFromUrl(nonInteractive)}`,
-								url: nonInteractive,
-							},
-					!newSpectrum
-						? undefined
-						: {
-								name: `${paths[2]}/${obtainNameFromUrl(newSpectrum)}`,
-								url: newSpectrum,
-							},
-				].filter(isNotUndefined);
-			})
-			.map(async (props) => {
-				const response = await axios.get(props.url, {
-					responseType: 'arraybuffer',
-				});
-
-				fs.writeFile(props.name, response.data, (error) => {
-					if (error) {
-						throw error;
-					}
-				});
-			})
-	);
+	countries();
+	element();
 };
 
 main();

apps/web/src/web/components/bohr/two-dimensional.tsx

@@ -12,6 +12,7 @@ const BohrTwoDimensional = (
 
 	return (
 		<Image
+			priority
 			alt={`A 2D model of ${props.name}`}
 			src={props.src}
 			width={length}

apps/web/src/web/components/common/header/index.tsx

@@ -108,6 +108,7 @@ const Header = () => {
 					<InternalLink href="/" aria-label="Go to home page">
 						<Box>
 							<Image
+								priority
 								alt="logo"
 								src="/images/icons/android/android-launchericon-144-144.png"
 								width={size}

apps/web/src/web/constant/index.ts

@@ -10,6 +10,7 @@ const constants = {
 				static: '/images/generated/bohr/static',
 			},
 			spectrum: '/images/generated/spectrum',
+			country: '/images/generated/country',
 		},
 	},
 } as const;