feat: App update / showcase

0gust1 · Sep 12, 2023 · c067f99 · c067f99
1 parent 5eb3744
commit c067f99
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 6 deletions.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -125,7 +125,7 @@
 </div>
 
 <style lang="postcss">
-	.mobile-sidebar_backdrop {
+	/* .mobile-sidebar_backdrop {
 	}
 	.mobile-sidebar_backdrop--open {
 	}
@@ -136,7 +136,7 @@
 	.mobile-sidebar_content--open {
 	}
 	.mobile-sidebar_content--closed {
-	}
+	} */
 	.doc-content {
 		@apply px-4 sm:px-6 lg:px-8;
 	}

diff --git a/src/routes/+page.md b/src/routes/+page.md
@@ -2,7 +2,13 @@
 
 This is a collection of [Svelte](https://svelte.dev) components for [Mol\*](https://molstar.org) visualizations.
 
-The goal is to provide a set of composable components that can be used to build web applications/components/websites providing visualization and analysis of biomolecular structures.  
+[Mol\*](https://molstar.org) (/'molstar/) is a modern web-based open-source toolkit for visualisation and analysis of large-scale molecular data
+
+## Goals 
+- **Provide a set of composable components** that can be used to build web applications, websites or components enabling visualization and analysis of biomolecular structures.
+- **Provide a set of examples** of how to use the components in a Svelte application.
+- **Keep the components as simple as possible**, and let the user decide how to use them:  The goal **is not** to provide a full set of components with extensive Molstar API coverage, but rather a set of building blocks (and examples) that can be used to build a custom application.
+
 The components are designed to be used in a [Svelte](https://svelte.dev) application, ~~but could be used in any framework that supports [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)~~ (later).
 
 ## Installation
@@ -21,9 +27,9 @@ TODO
 
 ## Licensing and attributions
 
+`molstar-svelte` is licensed under the [MIT License](https://opensource.org/license/mit/).
+
 **Mol\*:**
 > David Sehnal, Sebastian Bittrich, Mandar Deshpande, Radka Svobodová, Karel Berka, Václav Bazgier, Sameer Velankar, Stephen K Burley, Jaroslav Koča, Alexander S Rose:  
 > [Mol* Viewer: modern web app for 3D visualization and analysis of large biomolecular structures, Nucleic Acids Research, 2021; 10.1093/nar/gkab31](https://academic.oup.com/nar/article/49/W1/W431/6270780).  
 In memory of Jaroslav Koča. 
-
-Svelte-molstar is licensed under the [MIT License](https://opensource.org/license/mit/).
diff --git a/src/routes/components/simplest/+page.md b/src/routes/components/simplest/+page.md
@@ -1,3 +1,22 @@
+<script>
+	import { browser} from '$app/environment';
+	const loadModule = async () =>
+		import('./WrapperRCSB.svelte').then((m) => {
+			return m.default;
+		});
+	const pdbId = '1cbs';
+</script>
+
 # Simplest molstar-svelte component
 
-**TODO**
+## Empty wrapper (will show nothing)
+
+
+
+## Wrapper with pdbId
+
+{#if browser}
+	{#await loadModule() then MolstarComp}
+		<svelte:component this={MolstarComp} class="border h-18 bg-slate-300"/>
+	{/await}
+{/if}
diff --git a/src/routes/components/simplest/WrapperEmpty.svelte b/src/routes/components/simplest/WrapperEmpty.svelte
diff --git a/src/routes/components/simplest/WrapperRCSB.svelte b/src/routes/components/simplest/WrapperRCSB.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import StructureRCSB from '$lib/elements/StructureRCSB.svelte';
+	import MolstarWrapper from '$lib/wrappers/SimpleWrapper.svelte';
+	const pdbIds = ['7D4B'];
+</script>
+
+<MolstarWrapper class="h-96">
+	<svelte:fragment slot="content">
+		{#each pdbIds as pdbId}
+			<StructureRCSB {pdbId} />
+		{/each}
+	</svelte:fragment>
+</MolstarWrapper>