Merge pull request #19 from 3mdeb/figures_and_footnotes

Figures and footnotes

Author: pietrushnic

README.md

@@ -77,6 +77,16 @@ Example:
 
 You can then open given links to e.g. preview your presentation.
 
+You can override the default copyright string using an `COPYRIGHT`
+environment variable:
+
+```bash
+COPYRIGHT="All Rights Reserved by 3mdeb Sp. z o.o." \
+  ./slidev-template/scripts/render-slides.sh <path/to/slides.md>
+```
+
+Default copyright is `3mdeb Sp. z o.o. Licensed under the CC BY-SA 4.0`.
+
 ## Export presentation
 
 To export slides to PDF use
@@ -86,3 +96,13 @@ To export slides to PDF use
 ```
 
 Generated slides will be in `slidev-template/output` directory.
+
+You can override the default copyright string using an `COPYRIGHT`
+environment variable:
+
+```bash
+COPYRIGHT="All Rights Reserved by 3mdeb Sp. z o.o." \
+  ./slidev-template/scripts/ci/gen_slides.sh <path/to/slides.metadata>
+```
+
+Default copyright is `3mdeb Sp. z o.o. Licensed under the CC BY-SA 4.0`.

components/Footnote.vue

@@ -0,0 +1,12 @@
+<template>
+  <li class="ml-0! text-xs">
+    <sup v-if="number">{{ number }}</sup>
+    <slot />
+  </li>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  number?: number;
+}>();
+</script>

components/Footnotes.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="footnote left-15 text-left text-xs text-gray-600"
+    v-bind:class="{
+      'bg-main': filled,
+      'z-1': filled,
+    }"
+  >
+    <hr v-if="separator" />
+    <ul
+      class="flex flex-wrap !list-none px-5 py-2"
+      v-bind:class="{
+        'flex-col': y === 'col',
+        'items-start': x === 'l' && y === 'col',
+        'items-end': x === 'r' && y === 'col',
+        'justify-start': x === 'l' && y === 'row',
+        'gap-col-3': y === 'row',
+        'gap-row-0.5': y === 'col',
+      }"
+    >
+      <slot />
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+defineProps({
+  filled: {
+    default: false,
+    type: Boolean,
+  },
+  separator: {
+    default: false,
+    type: Boolean,
+  },
+  x: {
+    default: 'r',
+    type: String as PropType<'l' | 'r'>,
+    validator: (value) => value === 'l' || value === 'r',
+  },
+  y: {
+    default: 'row',
+    type: String as PropType<'col' | 'row'>,
+    validator: (value) => value === 'col' || value === 'row',
+  }
+});
+</script>

global-top.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="slide-body">
+    <Scroll />
+    <footer
+      v-if="$nav.currentLayout !== 'cover'"
+      class="absolute bottom-0 left-0 right-0 flex justify-between items-center py-2 text-[#000000]"
+    >
+      <small
+        v-if="$slidev.configs.copyright && $slidev.configs.copyright.length !== 0"
+        class="mx-auto"
+        >© Copyright {{ new Date().getFullYear() }}. {{ $slidev.configs.copyright }}</small
+      >
+      <small v-else class="mx-auto"></small>
+      
+      <small class="mr-4"><SlideCurrentNo/>/<SlidesTotal/></small>
+    </footer>
+  </div>
+</template>

scripts/ci/gen_slides.sh

@@ -21,12 +21,15 @@ gen_slides() {
         filename=$(basename "$input_file")
         filename=${filename%.*}
         day=${filename:0:1}
+        copyright=${COPYRIGHT:-3mdeb Sp. z o.o. Licensed under the CC BY-SA 4.0}
+        copyright=${copyright//\"/}
 
         # Escape strings for sed
         escaped_file=$(printf 'slides/%s\n' "$input_file" | sed -e 's/[\/&$]/\\&/g')
 
         # Create temporary markdown file using the slide template
-        sed -e "s/<SRC>/$escaped_file/g" -e "s/<DAY>/$day/g" slides-template.md > slidev-template/slides.md
+        sed -e "s/<SRC>/$escaped_file/g" -e "s/<DAY>/$day/g" -e "s/<COPYRIGHT>/$copyright/g" \
+          slides-template.md >slidev-template/slides.md
 
         cat slidev-template/slides.md
 

scripts/render-slides.sh

@@ -14,12 +14,15 @@ render_slides() {
     filename=$(basename "$input_file")
     filename=${filename%.*}
     day=${filename:0:1}
+    copyright=${COPYRIGHT:-3mdeb Sp. z o.o. Licensed under the CC BY-SA 4.0}
+    copyright=${copyright//\"/}
 
     # Escape strings for sed
     escaped_file=$(printf '%s\n' "$input_file" | sed -e 's/[\/&$]/\\&/g')
 
     # Create temporary markdown file using the slide template
-    sed -e "s/<SRC>/$escaped_file/g" -e "s/<DAY>/$day/g" slides-template.md >slidev-template/slides.md
+    sed -e "s/<SRC>/$escaped_file/g" -e "s/<DAY>/$day/g" -e "s/<COPYRIGHT>/$copyright/g" \
+      slides-template.md >slidev-template/slides.md
     cp slidev-template/vite.config.ts .
 
     docker run -it --rm --user $(id -u):$(id -g) \

slides-template.md

@@ -13,6 +13,7 @@ drawings:
 transition: slide-left
 # enable MDC Syntax: https://sli.dev/features/mdc
 mdc: true
+copyright: <COPYRIGHT>
 ---
 
 ## <TITLE>

theme/styles/slides.css

@@ -397,11 +397,9 @@ li {
 }
 
 .footnote {
-    bottom: 9em;
-    font-size: 10px;
-    left: 4em;
     position: absolute;
-    right: 4em;
+    bottom: 0px;
+    margin-bottom: 20px;
 }
 
 .hljs-default .hljs, .hljs-default .hljs-subst {
@@ -478,3 +476,20 @@ a {
     width: 55%;
     float: right;
 }
+
+figure {
+    border: 0px;
+}
+
+figure img {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+figcaption {
+  color: gray;
+  font-style: italic;
+  font-size: 14px;
+  padding: 2px;
+  text-align: center;
+}