add citation to landing

landing/.gitignore

@@ -5,3 +5,4 @@ node_modules
 .env
 .env.*
 !.env.example
+!lib

landing/src/lib/Cite.svelte

@@ -0,0 +1,45 @@
+<script>
+	import { Icon } from '@steeze-ui/svelte-icon';
+	import { ClipboardCopy } from '@steeze-ui/heroicons';
+
+    let citationStyle;
+    const citations = {
+        'APA': `Reed, P.M., Hadjimichael, A., Malek, K., Karimi, T., Vernon, C.R., Srikrishnan, V., Gupta, R.S., Gold, D.F., Lee, B., Keller, K., Rice, J.S., & Thurber, T.B. (2022). Addressing Uncertainty in Multisector Dynamics Research [Book]. Zenodo. https://doi.org/10.5281/zenodo.6110623`,
+        'BibTeX': `@book{Reed_Addressing_Uncertainty_2022,
+    author = {Reed, Patrick M. and Hadjimichael, Antonia and Malek, Keyvan and Karimi, Tina and Vernon, Chris R. and Srikrishnan, Vivek and Gupta, Rohini S. and Gold, David F. and Lee, Ben and Keller, Klaus and Rice, Jennie S. and Thurber, Travis B.},
+    doi = {10.5281/zenodo.6110623},]
+    title = {{Addressing Uncertainty in Multisector Dynamics Research}},
+    url = {https://immm-sfa.github.io/msd_uncertainty_ebook/},
+    year = {2022}
+}`,
+    };
+
+    const copyToClipboard = () => {
+        try{
+            navigator.clipboard.writeText(citations[citationStyle]);
+        } catch(e) {
+            // no op
+        }
+    };
+
+</script>
+
+<div class="flex flex-col items-center justify-center">
+    <div class="mb-4">
+        <select bind:value={citationStyle}>
+            {#each Object.keys(citations) as citationStyle}
+                <option value={citationStyle}>{citationStyle}</option>
+            {/each}
+        </select>
+    </div>
+    <div class="flex flex-row items-stretch justify-center">
+        <div style="box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.2);" class="bg-slate-50 rounded-l-md overflow-auto">
+            <pre
+                class="m-4 text-sm text-slate-900 w-80 md:w-96 text-left leading-tight "
+            >{citations[citationStyle] || ''}</pre>
+        </div>
+        <div on:click={copyToClipboard} title="Copy to clipboard" class="rounded-r-md drop-shadow p-2 bg-sky-700 hover:bg-sky-500 hover:cursor-pointer active:bg-orange-400">
+            <Icon src={ClipboardCopy} class="icon w-6 text-slate-50" />
+        </div>
+    </div>
+</div>

landing/src/routes/index.svelte

@@ -6,16 +6,11 @@
 <script>
 	import { onMount } from 'svelte';
 	import { Icon } from '@steeze-ui/svelte-icon';
-	import { BookOpen, DocumentDownload, PencilAlt, Code } from '@steeze-ui/heroicons';
+	import { BookOpen, DocumentDownload, Code } from '@steeze-ui/heroicons';
 	import { Facebook, Linkedin, Twitter } from '@steeze-ui/feather-icons';
+	import Cite from '$lib/Cite.svelte'
 
 	const entrypoints = [
-		// {
-		//     icon: PencilAlt,
-		//     title: 'Notebook',
-		//     text: 'Interact live while reading!',
-		//     url: 'todo.html',
-		// },
 		{
 			icon: BookOpen,
 			title: 'HTML',
@@ -146,7 +141,7 @@
 		{/each}
 	</div>
 </div>
-<div class="w-full flex flex-col items-center justify-center text-center px-3 pb-12">
+<div class="w-full flex flex-col items-center justify-center text-center px-3 pb-6">
 	<div class="text-lg text-slate-50 lg:mt-6">Share with your network!</div>
 	<div class="flex flex-row items-center justify-center mt-3 w-full">
 		<a href={twitterShare} class="rounded-lg drop-shadow p-2 mx-3 bg-sky-700 hover:bg-sky-500">
@@ -160,6 +155,12 @@
 		</a>
 	</div>
 </div>
+<div class="w-full flex flex-col items-center justify-center text-center px-3 pb-12">
+	<div class="text-lg text-slate-50 lg:mt-6">Cite the eBook!</div>
+	<div class="flex flex-row items-center justify-center mt-3 w-full">
+		<Cite />
+	</div>
+</div>
 <div class="w-full flex flex-col items-center justify-center text-center px-3 pb-12">
 	<div class="max-w-4xl text-sm italic text-slate-400">
 		This e-book was developed by the <a