doc: adjust the project README and use it as the Homepage of the show…

…case website

README.md

@@ -1,28 +1,37 @@
 # Molstar Svelte Library
 
-This is a collection of [Svelte](https://svelte.dev) components for [Mol\*](https://molstar.org) visualizations.
+*A collection of [Svelte](https://svelte.dev) components for [Mol\*](https://molstar.org)-based visualizations*
 
-![build status badge](https://github.com/0gust1/molstar-svelte/actions/workflows/build.yml/badge.svg?event=push) ![deploy status badge](https://github.com/0gust1/molstar-svelte/actions/workflows/deploy.yml/badge.svg?event=push) ![publish status badge](https://github.com/0gust1/molstar-svelte/actions/workflows/publish.yml/badge.svg?event=release)
 
+![build status badge](https://github.com/0gust1/molstar-svelte/actions/workflows/build.yml/badge.svg?event=push) ![deploy status badge](https://github.com/0gust1/molstar-svelte/actions/workflows/deploy.yml/badge.svg?event=push) ![publish status badge](https://github.com/0gust1/molstar-svelte/actions/workflows/publish.yml/badge.svg?event=release)
 
 ## 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/inspirations) that can be used to build a custom application.
+- **Keep the components as simple as possible**, and let the user decide how to use them.
+- **The goal is not** to redo the Molstar Viewer in Svelte.
+- **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/inspirations) 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).
+The components are designed to be used in a [Svelte](https://svelte.dev) or [SvelteKit](https://kit.svelte.dev/) application. ~~They could be also be used in any framework that supports [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)~~ (later).
 
-## Please Note
+## Please Note!
 
-This package is still in early development, and the API is not stable. Until it reaches version 1.0.0, breaking changes may be introduced in any versions.
+**This package is still in early development, and the API is not stable.** Until it reaches version 1.0.0, breaking changes may be introduced in any versions.
 
-__Pin your dependencies__ if you're bold enough to use it! (and drop me a message, I'd love to hear about it!).
+**Pin your dependencies if you're bold enough to use it!** (and drop me a message, I'd really love to hear about it!).
 
-## Getting Started, Documentation, Showcase
+## Usage, Getting Started, Documentation, Showcase
 
 [https://0gust1.github.io/molstar-svelte/](https://0gust1.github.io/molstar-svelte/)
 
-## Development
+See the dedicated [Get started](https://0gust1.github.io/molstar-svelte/getting-started) page.
+
+## Feedback, issues, contributions, questions
+
+Feel free to initiate a discussion in the [Repository Discussions](https://github.com/0gust1/molstar-svelte/discussions) or [Repository Issues](https://github.com/0gust1/molstar-svelte/issues).
+
+## Library Development
 
 Install the dependencies...
 
@@ -37,7 +46,7 @@ npm run dev -- --open
 
 Everything inside `src/lib` is part of the library, everything inside `src/routes` is used to generate the documentation/showcase/e2e website.
 
-## Building
+### Building
 
 To build the library:
 
@@ -53,10 +62,19 @@ npm run build
 
 You can preview the production build with `npm run preview`.
 
-## Updating the documentation/showcase
+### Updating the documentation/showcase website
 
 Website/doc deployment is done through github actions, on push on `master` 
 
-## Publishing
+### Publishing on npmjs.com
 
 Publishing is done through github actions, on release creation on `master`.
+
+## 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. 

src/app.d.ts

@@ -5,7 +5,14 @@ declare global {
 		// interface Error {}
 		// interface Locals {}
 		// interface PageData {}
-		// interface Platform {
+		// interface Platform {}
+
+		interface MdsvexFile {
+			default: import('svelte/internal').SvelteComponent;
+			metadata: Record<string, string>;
+		}
+
+		type MdsvexResolver = () => Promise<MdsvexFile>;
 	}
 	declare const __PKG_VERSION__: string;
 	declare const __PKG_NAME__: string;

src/routes/+page.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { SvelteComponentTyped } from 'svelte/internal';
+	export let data;
+	type C = $$Generic<typeof SvelteComponentTyped<any, any, any>>;
+	$: component = data.content as unknown as C;
+</script>
+
+<svelte:component this={component} />

src/routes/+page.ts

@@ -0,0 +1,9 @@
+export const load = async () => {
+	const readmeComponentImporter = (await import.meta.glob('../../README.md')) as unknown as Record<
+		string,
+		App.MdsvexResolver
+	>;
+	const postResolver = await readmeComponentImporter['../../README.md']();
+	const post = await postResolver.default;
+	return { content: post };
+};

vite.config.ts

@@ -7,6 +7,11 @@ export default defineConfig({
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	},
+	server: {
+		fs: {
+			allow: ['..']
+		}
+	},
 	// https://vitejs.dev/config/shared-options.html#define
 	// used to expose info from package.json to app code
 	// DO NOT expose secrets here