feat: add components

README.md

@@ -0,0 +1,48 @@
+# Slidev bibliography addons
+
+This addons provides a `Sources` and `Source` component to show sources.
+
+## Setup
+
+1. Create a `bibliography.json` file in the root of your slidev presentation with an empty object (`{}`).
+2. Create a `setup/main.ts` file with the following contents:
+```ts
+import { defineAppSetup } from '@slidev/types'
+import Bibliography from '../bibliography.json'
+
+export default defineAppSetup(({ app }) => {
+    app.provide('bibliography', Bibliography)
+})
+```
+
+## Usage
+
+In the `bibliography.json` file, add sources like this:
+
+```
+{
+  "ot": {
+    "url": "https://en.wikipedia.org/wiki/Operational_transformation"
+  },
+  "crdtPaper": {
+    "title": "Nuno Preguiça: Conflict-free Replicated Data Types: An Overview. arXiv:1806.10254, June 2018."
+  }
+}
+```
+
+Each source can have a url, a title or both.
+
+In your slides, reference a source like this:
+
+```md
+* Something <Source item="ot"/>
+```
+
+It will then show up in the slide with a reference like `[0]`.
+
+On the slide where you want to include all used sources, simply add the `<Sources/>` component.
+It will show all sources you've used in order of appearance.
+
+## License
+
+MIT

components/Source.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { sharedState } from '@slidev/client/state/shared'
+import { computed } from '@vue/reactivity'
+import { watch } from 'vue';
+
+const props = defineProps({
+    item: String,
+    prefix: String,
+})
+
+const position = computed<number>(() => {
+    if (!sharedState.sources) {
+        sharedState.sources = new Set()
+    }
+    return [...sharedState.sources].findIndex(i => props.item === i)
+})
+
+watch(
+    () => props.item,
+    () => {
+        if (!sharedState.sources) {
+            sharedState.sources = new Set()
+        }
+        if(!props.item) {
+            return
+        }
+        sharedState.sources.add(props.item)
+    },
+    { immediate: true }
+)
+</script>
+<template>
+    <span class="text-gray-400 text-sm align-text-top">
+        {{ prefix }}
+        [{{ position }}]
+    </span>
+</template>

components/Sources.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { sharedState } from '@slidev/client/state/shared'
+import { computed, inject } from 'vue';
+
+const Bibliography = inject('bibliography')
+
+const bib = computed(() => {
+    return [...sharedState.sources]
+        .map(key => Bibliography[key])
+})
+</script>
+<template>
+    <ul>
+        <li v-for="s in bib">
+            <template v-if="s.url !== '' && typeof s.url !== 'undefined'">
+                <a :href="s.url">
+                    {{ s.title === '' || typeof s.title === 'undefined' ? s.url : s.title }}
+                </a>
+            </template>
+            <template v-else>
+                {{ s.title }}
+            </template>
+        </li>
+    </ul>
+</template>