Feat: toc settings (#7)

* feat: adding table of content size limitation

* feat: adding version on build

Author: decima

Dockerfile

@@ -9,9 +9,10 @@ RUN mkdir /app
 COPY go.mod /app
 COPY go.sum /app
 WORKDIR /app
+ARG VERSION=dev
 RUN go mod download
 COPY . /app
-RUN CGO_ENABLED=0 go build -o NotionSlider .
+RUN CGO_ENABLED=0 go build -o NotionSlider -ldflags "-X main.version=$VERSION" .
 
 
 FROM alpine as runner

NotionSlider.go

@@ -27,6 +27,8 @@ var oauthClientSecret string
 var hostAndPort string
 var domain string
 
+var version = "dev"
+
 func init() {
 	flag.StringVar(&oauthClientId, "client_id", "NO_CLIENT_ID_PROVIDED", "Client Id to use")
 	flag.StringVar(&oauthClientSecret, "client_secret", "NO_CLIENT_SECRET_PROVIDED", "Client Secret to use")
@@ -48,6 +50,7 @@ func main() {
 	r.GET("/api", func(c *gin.Context) {
 		c.JSON(http.StatusOK, gin.H{
 			"url":       domain,
+			"version":   version,
 			"client_id": oauthClientId,
 		})
 	})

README.md

@@ -50,8 +50,11 @@ version: "3"
 services:
   notionslider:
     # comment build key and uncomment image to not have to build your own image.
-    # image: "decima/notion-slider:0.1"
-    build: { context: . }
+    # image: "decima/notion-slider:0.7.0"
+    build: 
+      context: . 
+      args:
+        VERSION: 0.7.0
     entrypoint:
       - ./NotionSlider
       - -client_id=CLIENT_ID

app/.env

@@ -3,6 +3,7 @@
     import {session} from "./stores/session.js";
     import {onMount} from "svelte";
     import {themeChange} from "theme-change";
+    import {globalSettings} from "./stores/globalSettings.js";
 
     const location = useLocation();
     let y = 0;
@@ -19,7 +20,10 @@
 
         <div class="navbar bg-base-100">
             <div class="flex-1">
-                <a href="/" class="btn btn-ghost normal-case text-xl">Notion Slider</a>
+                <a href="/" class="btn btn-ghost normal-case text-xl">Notion Slider&nbsp;
+                <div class="badge badge-primary">{$globalSettings.version}</div>
+                </a>
+
             </div>
             <div class="flex-none">
                 <ul class="menu menu-horizontal p-0">

app/src/lib/Navbar.svelte

@@ -71,6 +71,8 @@
                 <tr><th><code>hideIcon</code></th><td>Hide the Icon of the first slide</td></tr>
                 <tr><th><code>noBackgroundShadow</code></th><td>Disable background shadow of the first slide</td></tr>
                 <tr><th><code>hideFirst <div class="badge">0.5.1</div></code></th><td>Hide title slide</td></tr>
+                <tr><th><code>2levelTOC <div class="badge">0.7.0</div></code></th><td>Limit table of content to 2 levels (headings 1 & 2)</td></tr>
+                <tr><th><code>1levelTOC <div class="badge">0.7.0</div></code></th><td>Limit table of content to 1 levels (headings 1)</td></tr>
             </table>
 
             more to come on next releases with transitions to use, subtitle, custom css and much more, feel free to contact me if you have more stuff you want.

app/src/lib/pages/HowTo.svelte

@@ -23,6 +23,10 @@ export function getTokenOrRedirect() {
     return token
 }
 
+export async function getInfo() {
+
+    return await (await fetch(URL, withHeaders({}))).json()
+}
 export async function listFiles() {
 
     return await (await fetch(URL + "/slides", withHeaders({}))).json()

app/src/lib/stores/api.js

@@ -1,10 +1,9 @@
 import {readable} from "svelte/store";
+import {getInfo} from "./api.js";
 
 
-export const globalSettings = readable({url: "/", client_id: ""},
+export const globalSettings = readable({url: "/", client_id: "", version: "dev"},
     async function start(set) {
-        const response = await fetch("/api")
-        const e = await response.json();
-        set(e)
+        set(await getInfo())
     });
 

app/src/lib/stores/globalSettings.js

@@ -7,23 +7,23 @@ import {navigate} from "svelte-navigator";
 import {getNotionAuth} from "./session.js";
 
 
-const DEFAULT_SETTINGS = {showTitle: true, showIcon: true, backgroundShadow: true, showFirst: true};
+const DEFAULT_SETTINGS = {showTitle: true, showIcon: true, backgroundShadow: true, showFirst: true, TOCLevel: 3};
 
 
 function fakeText() {
     return data
 }
 
-function findAllTitles(items, registry) {
+function findAllTitles(items, registry,settings) {
 
     for (const item of items) {
-        if (["heading_1", "heading_2", "heading_3"].includes(item.type)) {
-            const title = {type:item.type, content:item.block[item.type], children:[]}
+        if (["heading_1", "heading_2", "heading_3"].slice(0,settings.TOCLevel).includes(item.type)) {
+            const title = {type: item.type, content: item.block[item.type], children: []}
             registry.push(title)
 
             continue;
         }
-        findAllTitles(item.children, registry)
+        findAllTitles(item.children, registry,settings)
     }
 }
 
@@ -80,6 +80,11 @@ function slideInitializer() {
                 case "hideFirst":
                     newSettings.showFirst = false;
                     break;
+                case "2levelTOC":
+                    newSettings.TOCLevel = 2;
+                    break;
+                case "1levelTOC":
+                    newSettings.TOCLevel = 1;
             }
         }
         return {...DEFAULT_SETTINGS, ...newSettings};
@@ -101,7 +106,7 @@ function slideInitializer() {
             let data = [];
             let page = loaded.page
             let settings = processSettings(page)
-            findAllTitles(loaded.blocks, toc)
+            findAllTitles(loaded.blocks, toc, settings)
 
             let currentPage = 0;
             for (let block of loaded.blocks) {

app/src/lib/stores/slide.js

@@ -2,20 +2,9 @@ import { defineConfig } from 'vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 export default defineConfig({
-/*  build:{
-    rollupOptions:{
-      external:[
-          /^bespoke.*!/,
-          /^theme-change.*!/,
-          /^.*daisyui.*!/
-
-      ]
-    }
-  },*/
   plugins: [svelte()],
   server: {
     proxy: {
-      // string shorthand
       '/api': 'http://localhost:9000',
     }
   }