Skip to content

Commit 6601fe0

Browse files
ValexrValexr
committed
Inline images in Optimade.Science
1 parent e490dd8 commit 6601fe0

File tree

10 files changed

+99
-51
lines changed

10 files changed

+99
-51
lines changed

‎esbuild.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ build({
1616
minify: !DEV,
1717
incremental: DEV,
1818
sourcemap: DEV && 'inline',
19-
loader: { '.svg': 'text' },
19+
loader: { '.png': 'dataurl' },
2020
legalComments: 'none',
2121
logLevel: 'debug',
2222
mainFields: [
@@ -46,7 +46,7 @@ build({
4646

4747
}),
4848
eslintPlugin(),
49-
copy({ from: './src/assets', to: '../assets' }),
49+
copy({ from: './src/assets/logo.svg', to: '../logo.svg' }),
5050
html({ in: 'src/index.html', out: 'dist/index.html', dev: DEV }),
5151
]
5252

‎html.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { readFile, writeFile } from "fs/promises";
1+
import { readFile, mkdir, writeFile } from 'fs/promises';
2+
import { dirname } from 'path';
3+
import { constants } from 'fs';
24

35
export default function html(options = {}) {
46
return {
@@ -20,6 +22,13 @@ export default function html(options = {}) {
2022
.replace('</body>', () => `<script>\n${js.text}</script>\n</body>`);
2123
}
2224

25+
const dirpath = dirname(options.out);
26+
try {
27+
await access(dirpath, constants.R_OK | constants.W_OK);
28+
} catch {
29+
mkdir(dirpath);
30+
}
31+
2332
await writeFile(options.out, html, { encoding: 'utf8' });
2433
});
2534
},

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"url": "git://github.com/tilde-lab/optimade.science.git"
1212
},
1313
"scripts": {
14-
"build": "rm -rf dist/build && node esbuild",
14+
"build": "rm -rf dist && node esbuild",
1515
"dev": "node esbuild --dev",
1616
"start": "npx derver --production --port=5000 dist",
1717
"format": "prettier --write 'src/**/*.{ts,md,svelte,json,html,css,scss}'",

‎src/App.svelte‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,6 @@
2222
<Footer />
2323
</Spectre>
2424

25-
<!-- <footer>
26-
This
27-
<a href="https://github.com/tilde-lab/optimade.science" target="_blank"
28-
>open-source</a
29-
>
30-
app is possible thanks to the
31-
<a href="http://www.optimade.org" target="_blank">OPTIMADE</a>
32-
standard &mdash; Open Databases Integration for Materials Design.
33-
</footer> -->
3425
<script lang="ts" context="module">
3526
import { click, prefs, query } from 'svelte-pathfinder';
3627

‎src/assets/logo-orig.svg‎

Lines changed: 29 additions & 0 deletions
Loading

‎src/assets/logo.svg‎

Lines changed: 1 addition & 29 deletions
Loading

src/assets/providers/2DM.png renamed to src/assets/providers/DM2.png

File renamed without changes.

‎src/components/Logo.svelte‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,32 @@
11
<div class="logo">
22
<div class:spin in:receive={{ key, duration }} out:send={{ key, duration }} style="width: {dim}px; height: {dim}px;">
3-
{@html logo}
3+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55">
4+
<path stroke="#9ed700" stroke-width="1.15" d="m27 14.5 11-6.553" />
5+
<path stroke="#00acd9" stroke-width="1.15" d="M37.825 33.25 38 46.053" />
6+
<path stroke="#7a2dd0" stroke-width="1.15" d="M16.175 33.25 5 27" />
7+
<path stroke="#00acd9" stroke-width="1.15" d="M49 27 38 46.053" />
8+
<path stroke="#f1f1f1" stroke-width="2" d="M38 46.053H16" />
9+
<path stroke="#7a2dd0" stroke-width="1.15" d="M16 46.053 5 27" />
10+
<path stroke="#f1f1f1" stroke-width="2" d="M5 27 16 7.947" />
11+
<path stroke="#9ed700" stroke-width="1.15" d="M16 7.947h22" />
12+
<path stroke="#f1f1f1" stroke-width="2" d="M38 7.947 49 27" />
13+
<circle cx="49" cy="27" r="3.5" fill="#00acd9" />
14+
<circle cx="38" cy="46.053" r="3.5" fill="#00acd9" />
15+
<circle cx="16" cy="46.053" r="3.5" fill="#7a2dd0" />
16+
<circle cx="5" cy="27" r="3.5" fill="#7a2dd0" />
17+
<circle cx="16" cy="7.947" r="3.5" fill="#9ed700" />
18+
<circle cx="38" cy="7.947" r="3.5" fill="#9ed700" />
19+
<path
20+
stroke="#ff414d"
21+
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"
22+
/>
23+
<circle cx="27" cy="39.5" r="2.5" fill="#ff414d" />
24+
<circle cx="16.175" cy="33.25" r="2.5" fill="#ff414d" />
25+
<circle cx="16.175" cy="20.75" r="2.5" fill="#ff414d" />
26+
<circle cx="27" cy="14.5" r="2.5" fill="#ff414d" />
27+
<circle cx="37.825" cy="20.75" r="2.5" fill="#ff414d" />
28+
<circle cx="37.825" cy="33.25" r="2.5" fill="#ff414d" />
29+
</svg>
430
</div>
531
</div>
632

@@ -32,8 +58,6 @@
3258
</script>
3359

3460
<script lang="ts">
35-
import logo from '@/assets/logo.svg';
36-
3761
export let key: string | number = 'logo';
3862
export let duration: number;
3963
export let size: Zoom = '1x';

‎src/index.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,15 @@
77
-->
88
<!DOCTYPE html>
99
<html lang="en">
10+
1011
<head>
1112
<meta charset="utf-8" />
12-
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
13+
<meta name="viewport"
14+
content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
1315
<title>Aggregated Search for Materials</title>
14-
<link rel="icon" type="image/svg" href="assets/logo.svg" />
16+
<link rel="icon" type="image/svg" href="/logo.svg" />
1517
</head>
1618

1719
<body></body>
20+
1821
</html>

‎src/views/Providers.svelte‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,17 +47,39 @@
4747
import { media } from '@/stores/media';
4848
4949
import * as Loader from '@/components/loaders';
50-
5150
import providers, { selectedProviders, providersSync } from '@/stores/providers';
5251
52+
// @ts-ignore
53+
import mcloud from '@/assets/providers/mcloud.png';
54+
// @ts-ignore
55+
import COD from '@/assets/providers/COD.png';
56+
// @ts-ignore
57+
import MP from '@/assets/providers/MP.png';
58+
// @ts-ignore
59+
import MPDS from '@/assets/providers/MPDS.png';
60+
// @ts-ignore
61+
import NMD from '@/assets/providers/NMD.png';
62+
// @ts-ignore
63+
import OPT from '@/assets/providers/OPT.png';
64+
// @ts-ignore
65+
import TCO from '@/assets/providers/TCO.png';
66+
// @ts-ignore
67+
import DM2 from '@/assets/providers/DM2.png';
68+
5369
import type { Types } from 'optimade';
70+
71+
interface Logos {
72+
[key: string]: string;
73+
}
5474
</script>
5575

5676
<script lang="ts">
5777
let width = 0,
5878
exclusiveId: null,
5979
augmentationMode = false;
6080
81+
const logos: Logos = { COD: COD, MP: MP, MPDS: MPDS, NMD: NMD, OPT: OPT, TCO: TCO, '2DM': DM2 };
82+
6183
function statusing(item: Types.Provider) {
6284
return $selectedProviders.includes(item.id) ? 'online' : 'offline';
6385
}
@@ -66,9 +88,7 @@
6688
const words = item.attributes.name.replace('.', '/').match(/\b(\w)|([A-Z])|(\/)/g);
6789
const initials = getPredefinedInitials(item.id, words.slice(0, 3).join('').toUpperCase());
6890
69-
const logos = ['COD', 'MP', 'MPDS', 'NMD', 'OPT', 'TCO', '2DM'];
70-
71-
item.attributes.img = `/assets/providers/${logos.includes(initials) ? initials : 'mcloud'}.png`;
91+
item.attributes.img = logos[initials] ? logos[initials] : mcloud;
7292
7393
return `${initials.toUpperCase()} v${item.attributes.api_version}`;
7494
}

0 commit comments

Comments
 (0)