Tweak home page style

Author: jimjam-slam

docs/_quarto.yml

@@ -6,11 +6,16 @@ execute:
 
 website:
   navbar:
-    background: primary
+    title: Sverto
+    background: black
     search: true
     left:
       - text: "Home"
         file: index.qmd
       - text: "Example: bar chart"
         file: examples/barchart/index.qmd
       # - about.qmd
+
+format:
+  sverto-html:
+    title-block-banner: "#e1e4e6"

docs/index.qmd

@@ -1,5 +1,6 @@
 ---
 title: Sverto
+description: "**Sverto** is an extension for [Quarto](https://quarto.org) that lets you seamlessly write and include [Svelte](https://svelte.dev) components, like charts and other visuals, in your Quarto website."
 author: James Goldie, 360info
 date: last-modified
 ---
@@ -8,13 +9,7 @@ date: last-modified
 {{< include /.sverto/index.qmd >}}
 :::
 
-```{ojs}
-BarChart = import_svelte("examples/barchart/BarChart.svelte")
-```
-
-**Sverto** is an extension for [Quarto](https://quarto.org) that lets you seamlessly write and include [Svelte](https://svelte.dev) components, like charts and other visuals, in your Quarto website.
-
-Your Svelte components can seamlessly react to your ObservableJS code, making it quick and easy to build visuals that animate in response to [user inputs](https://observablehq.com/@observablehq/inputs?collection=@observablehq/inputs) or other changing data in your document.
+Your Svelte components can seamlessly react to your ObservableJS code, making it quick and easy to build bespoke visuals that animate in response to [user inputs](https://observablehq.com/@observablehq/inputs?collection=@observablehq/inputs) or other changing data in your document.
 
 <!-- examples here! -->
 
@@ -29,19 +24,21 @@ You'll need to install two things to run Sverto:
 
 Install the project extension using:
 
-```
+```sh
 quarto use template 360-info/sverto@firstrelease-docs
 ```
 
 Then run:
 
-```
+```sh
 npm install
 ```
 
 This will add the extension itself (which includes some project scripts) to the `_extension` folder, as well as a few other files.
 
-> **Note:** Sverto depends on running [project pre-render scripts](https://quarto.org/docs/projects/scripts.html#pre-and-post-render), so you can't currently use it with single documents.
+:::{.callout-note}
+Sverto depends on running [project pre-render scripts](https://quarto.org/docs/projects/scripts.html#pre-and-post-render), so you can't currently use it with single documents.
+:::
 
 ## 🎉 Use
 
@@ -67,18 +64,20 @@ Here's the short way to add Svelte component you've written to a Quarto doc:
 
 If you want to refer to other JavaScript libraries in your Svelte component (like d3, for example), add them to the project using `npm install package1 [package2 ...]`. For example:
 
-```
+```sh
 npm install d3-scale
 ```
 
 ## Use pre-compiled Svelte components
 
 If you'd prefer to compile your own Svelte components instead of letting this extension do it, you can skip steps 1 and 2 and simply refer to the compiled bundle with, for example, `Component = import("Component.js")` in an OJS block.
 
-> **Note:** you must compile the Svelte component to an ES6 bundle, and you must enable accessors when compiling if you want to be able to update them from OJS. Refer to `_extensions/sverto/rollup.config.js` for guidance on configuring Rollup to do this.
+:::{.callout-note}
+You must compile the Svelte component to an ES6 bundle, and you must enable accessors when compiling if you want to be able to update them from OJS. Refer to [`_extensions/sverto/rollup.config.js`](https://github.com/360-info/sverto/blob/firstrelease/_extensions/sverto/rollup.config.js) for guidance on configuring Rollup to do this.
+```
 
 ## ❓ Issues
 
 If you have any problems with the extension, please feel free to [create an issue](https://github.com/360-info/sverto)!
 
-Special thanks to Carlos Scheidegger from [Posit](https://posit.co) for his time and guidance in designing Sverto!
+Special thanks to [Carlos Scheidegger](https://github.com/cscheid) from [Posit](https://posit.co) for his time and advice!