Merge pull request #52 from tilde-lab/#181

Inline images in Optimade.Science
tilde-lab · May 15, 2022 · cec994f · cec994f
2 parents e490dd8 + 9113580
commit cec994f
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 51 deletions.
diff --git a/esbuild.js b/esbuild.js
@@ -16,7 +16,7 @@ build({
 	minify: !DEV,
 	incremental: DEV,
 	sourcemap: DEV && 'inline',
-	loader: { '.svg': 'text' },
+	loader: { '.png': 'dataurl' },
 	legalComments: 'none',
 	logLevel: 'debug',
 	mainFields: [
@@ -46,7 +46,7 @@ build({
 
 		}),
 		eslintPlugin(),
-		copy({ from: './src/assets', to: '../assets' }),
+		copy({ from: './src/assets/logo.svg', to: '../logo.svg' }),
 		html({ in: 'src/index.html', out: 'dist/index.html', dev: DEV }),
 	]
 

diff --git a/html.js b/html.js
@@ -1,4 +1,4 @@
-import { readFile, writeFile } from "fs/promises";
+import { readFile, writeFile } from 'fs/promises';
 
 export default function html(options = {}) {
 	return {

diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
 		"url": "git://github.com/tilde-lab/optimade.science.git"
 	},
 	"scripts": {
-		"build": "rm -rf dist/build && node esbuild",
+		"build": "rm -rf dist && node esbuild",
 		"dev": "node esbuild --dev",
 		"start": "npx derver --production --port=5000 dist",
 		"format": "prettier --write 'src/**/*.{ts,md,svelte,json,html,css,scss}'",

diff --git a/src/App.svelte b/src/App.svelte
@@ -22,15 +22,6 @@
 	<Footer />
 </Spectre>
 
-<!-- <footer>
-    This
-    <a href="https://github.com/tilde-lab/optimade.science" target="_blank"
-        >open-source</a
-    >
-    app is possible thanks to the
-    <a href="http://www.optimade.org" target="_blank">OPTIMADE</a>
-    standard &mdash; Open Databases Integration for Materials Design.
-</footer> -->
 <script lang="ts" context="module">
 	import { click, prefs, query } from 'svelte-pathfinder';
 

diff --git a/src/assets/logo-orig.svg b/src/assets/logo-orig.svg
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/assets/providers/2DM.png → src/assets/providers/DM2.png b/src/assets/providers/2DM.png → src/assets/providers/DM2.png
diff --git a/src/components/Logo.svelte b/src/components/Logo.svelte
@@ -1,6 +1,32 @@
 <div class="logo">
 	<div class:spin in:receive={{ key, duration }} out:send={{ key, duration }} style="width: {dim}px; height: {dim}px;">
-		{@html logo}
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55">
+			<path stroke="#9ed700" stroke-width="1.15" d="m27 14.5 11-6.553" />
+			<path stroke="#00acd9" stroke-width="1.15" d="M37.825 33.25 38 46.053" />
+			<path stroke="#7a2dd0" stroke-width="1.15" d="M16.175 33.25 5 27" />
+			<path stroke="#00acd9" stroke-width="1.15" d="M49 27 38 46.053" />
+			<path stroke="#f1f1f1" stroke-width="2" d="M38 46.053H16" />
+			<path stroke="#7a2dd0" stroke-width="1.15" d="M16 46.053 5 27" />
+			<path stroke="#f1f1f1" stroke-width="2" d="M5 27 16 7.947" />
+			<path stroke="#9ed700" stroke-width="1.15" d="M16 7.947h22" />
+			<path stroke="#f1f1f1" stroke-width="2" d="M38 7.947 49 27" />
+			<circle cx="49" cy="27" r="3.5" fill="#00acd9" />
+			<circle cx="38" cy="46.053" r="3.5" fill="#00acd9" />
+			<circle cx="16" cy="46.053" r="3.5" fill="#7a2dd0" />
+			<circle cx="5" cy="27" r="3.5" fill="#7a2dd0" />
+			<circle cx="16" cy="7.947" r="3.5" fill="#9ed700" />
+			<circle cx="38" cy="7.947" r="3.5" fill="#9ed700" />
+			<path
+				stroke="#ff414d"
+				d="m27 39.5-10.825-6.25M16.175 33.25v-12.5M16.175 20.75 27 14.5M27 14.5l10.825 6.25M37.825 20.75v12.5M37.825 33.25 27 39.5"
+			/>
+			<circle cx="27" cy="39.5" r="2.5" fill="#ff414d" />
+			<circle cx="16.175" cy="33.25" r="2.5" fill="#ff414d" />
+			<circle cx="16.175" cy="20.75" r="2.5" fill="#ff414d" />
+			<circle cx="27" cy="14.5" r="2.5" fill="#ff414d" />
+			<circle cx="37.825" cy="20.75" r="2.5" fill="#ff414d" />
+			<circle cx="37.825" cy="33.25" r="2.5" fill="#ff414d" />
+		</svg>
 	</div>
 </div>
 
@@ -32,8 +58,6 @@
 </script>
 
 <script lang="ts">
-	import logo from '@/assets/logo.svg';
-
 	export let key: string | number = 'logo';
 	export let duration: number;
 	export let size: Zoom = '1x';

diff --git a/src/index.html b/src/index.html
@@ -7,12 +7,15 @@
 -->
 <!DOCTYPE html>
 <html lang="en">
+
 	<head>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
+		<meta name="viewport"
+			content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
 		<title>Aggregated Search for Materials</title>
-		<link rel="icon" type="image/svg" href="assets/logo.svg" />
+		<link rel="icon" type="image/svg" href="/logo.svg" />
 	</head>
 
 	<body></body>
+
 </html>
diff --git a/src/views/Providers.svelte b/src/views/Providers.svelte
@@ -47,17 +47,39 @@
 	import { media } from '@/stores/media';
 
 	import * as Loader from '@/components/loaders';
-
 	import providers, { selectedProviders, providersSync } from '@/stores/providers';
 
+	// @ts-ignore
+	import mcloud from '@/assets/providers/mcloud.png';
+	// @ts-ignore
+	import COD from '@/assets/providers/COD.png';
+	// @ts-ignore
+	import MP from '@/assets/providers/MP.png';
+	// @ts-ignore
+	import MPDS from '@/assets/providers/MPDS.png';
+	// @ts-ignore
+	import NMD from '@/assets/providers/NMD.png';
+	// @ts-ignore
+	import OPT from '@/assets/providers/OPT.png';
+	// @ts-ignore
+	import TCO from '@/assets/providers/TCO.png';
+	// @ts-ignore
+	import DM2 from '@/assets/providers/DM2.png';
+
 	import type { Types } from 'optimade';
+
+	interface Logos {
+		[key: string]: string;
+	}
 </script>
 
 <script lang="ts">
 	let width = 0,
 		exclusiveId: null,
 		augmentationMode = false;
 
+	const logos: Logos = { COD: COD, MP: MP, MPDS: MPDS, NMD: NMD, OPT: OPT, TCO: TCO, '2DM': DM2 };
+
 	function statusing(item: Types.Provider) {
 		return $selectedProviders.includes(item.id) ? 'online' : 'offline';
 	}
@@ -66,9 +88,7 @@
 		const words = item.attributes.name.replace('.', '/').match(/\b(\w)|([A-Z])|(\/)/g);
 		const initials = getPredefinedInitials(item.id, words.slice(0, 3).join('').toUpperCase());
 
-		const logos = ['COD', 'MP', 'MPDS', 'NMD', 'OPT', 'TCO', '2DM'];
-
-		item.attributes.img = `/assets/providers/${logos.includes(initials) ? initials : 'mcloud'}.png`;
+		item.attributes.img = logos[initials] ? logos[initials] : mcloud;
 
 		return `${initials.toUpperCase()} v${item.attributes.api_version}`;
 	}