Skip to content

Commit 7ba5b0c

Browse files
decimadecima
authored
feat(frontend): improvements (#8)
+ better responsive theme + new list of files with images + filters on lists
1 parent 650cebc commit 7ba5b0c

File tree

7 files changed

+126
-85
lines changed

7 files changed

+126
-85
lines changed

‎NotionSlider.go‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -195,8 +195,10 @@ func searchInDatabase(client *notionapi.Client, id notionapi.DatabaseID) []notio
195195
}
196196

197197
type Document struct {
198-
Name string `json:"name"`
199-
URL string `json:"url"`
198+
Name string `json:"name"`
199+
URL string `json:"url"`
200+
Cover *notionapi.Image `json:"cover"`
201+
Page *notionapi.Page `json:"page"`
200202
}
201203

202204
func listFiles(client *notionapi.Client) map[string]Document {
@@ -219,7 +221,6 @@ func listFiles(client *notionapi.Client) map[string]Document {
219221
for _, i := range res.Results {
220222
page := i.(*notionapi.Page)
221223
pageTitle := "~"
222-
223224
var prop notionapi.Property
224225

225226
if nameProperty, ok := page.Properties["Name"]; ok {
@@ -237,8 +238,10 @@ func listFiles(client *notionapi.Client) map[string]Document {
237238
}
238239

239240
pages[string(page.ID)] = Document{
240-
Name: pageTitle,
241-
URL: page.URL,
241+
Name: pageTitle,
242+
URL: page.URL,
243+
Cover: page.Cover,
244+
Page: page,
242245
}
243246

244247
}

‎app/src/App.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
1515
</script>
1616

17-
<main class="h-screen w-screen">
17+
<main class="bg-base-200">
1818
<Router>
1919
<Navbar></Navbar>
2020

‎app/src/lib/Navbar.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
{#if !$location.pathname.startsWith("/slides/") && !$location.pathname.startsWith("/database/") && !$location.pathname.startsWith("/presentation/") }<!--
1919
--{#if !$location.pathname.startsWith("/slides/") && !$location.pathname.startsWith("/database/") } -->
2020

21-
<div class="navbar bg-base-100">
21+
<div class="navbar bg-base-100 flex-col md:flex-row">
2222
<div class="flex-1">
2323
<a href="/" class="btn btn-ghost normal-case text-xl">Notion Slider&nbsp;
2424
<div class="badge badge-primary">{$globalSettings.version}</div>

‎app/src/lib/notionComponent/Image.svelte‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22
import RichText from "../notionPrimaries/RichText.svelte";
33
44
export let item
5-
6-
function toJSON(obj) {
7-
return JSON.stringify(obj)
8-
}
95
</script>
106

117
<div class="card card-compact bg-base-100">

‎app/src/lib/pages/ListSlides.svelte‎

Lines changed: 58 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,68 @@
11
<script>
22
import {onMount} from "svelte";
3-
import {listFiles} from "../stores/api.js";
3+
import {listFiles, resolveImage} from "../stores/api.js";
44
55
let data = null;
66
onMount(async () => {
77
data = await listFiles()
88
console.log(data)
99
})
10+
const colors = [
11+
"bg-red-300", "bg-blue-400", "bg-teal-500", "bg-purple-300", "bg-indigo-200", "bg-gray-é00",
12+
"bg-stone-é00", "bg-orange-700", "bg-amber-600", "bg-yellow-600", "bg-lime-600", "bg-green-700",
13+
"bg-emerald-500", "bg-teal-500", "bg-cyan-500", "bg-sky-600"
14+
];
15+
let elements = [];
16+
let searchTerm="";
17+
$: if (data) elements = Object.entries(data).sort((a, b) => a[1].name.localeCompare(b[1].name)).filter(item => JSON.stringify(item).toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1)
18+
let randomColorName = function () {
19+
return colors[Math.round(Math.random() * colors.length)];
20+
}
1021
</script>
11-
<div class="overflow-x-auto w-1/2 mx-auto">
12-
<table class="table w-full">
13-
14-
<tbody>
22+
<div class="container mx-auto mt-4 pb-12">
23+
<div class="my-4 ">
24+
<input class="input" bind:value={searchTerm} placeholder="filter by words"/>
25+
<span class="ml-2">{ elements.length } results</span>
26+
</div>
27+
<div class="flex flex-col gap-6">
1528
{#if data}
16-
{#each Object.entries(data).sort((a, b) => a[1].name.localeCompare(b[1].name)) as [slideId, slide]}
17-
<tr>
18-
<th>{slide.name}</th>
19-
<td><a href="/presentation/{slideId}" target="_blank">
20-
<i class="fa-solid fa-presentation"></i>
21-
</a>
22-
</td>
23-
<td>
24-
<a href="{slide.url}" target="_blank"><i class="fa-solid fa-file-lines"></i></a>
25-
</td>
26-
</tr>
27-
28-
{/each}
29-
{/if}
30-
31-
</tbody>
32-
</table>
33-
</div>
29+
30+
{#each elements as [slideId, slide]}
31+
<div class="card w-full justify-between shadow-xl bg-base-100 flex flex-row gap-4">
32+
<div class="w-1/6">
33+
34+
<div class="h-32 bg-cover bg-center flex justify-center items-center {randomColorName()}"
35+
style="background-image: url({resolveImage(slide.cover)})">
36+
{#if !slide.cover}
37+
<div class="uppercase">{slide.name.slice(0, 2)}</div>
38+
{/if}
39+
</div>
40+
</div>
41+
<div class=" w-4/6 flex flex-col gap-2 justify-center">
42+
<h2 class="text-xl font-bold">
43+
{slide.name}
44+
</h2>
45+
<div class="flex gap-1 w-full">
46+
{#each slide.page.properties?.slideSettings?.multi_select || [] as tag }
47+
<div class="badge badge-primary" on:click={()=>{searchTerm = tag.name}}>{tag.name}</div>
48+
{/each}
49+
</div>
50+
</div>
51+
<div class=" w-1/6 flex flex-col md:flex-row gap-2 items-center justify-center">
52+
<a class="btn btn-primary w-2/5" href="/presentation/{slideId}" target="_blank">
53+
<i class="fa-solid fa-presentation"></i>
54+
</a>
55+
<p></p>
56+
<a href="{slide.url}" class="btn btn-secondary w-2/5" target="_blank">
57+
<i class="fa-solid fa-file-lines"></i></a>
58+
59+
60+
</div>
61+
62+
63+
</div>
64+
{/each}
65+
{/if}
66+
</div>
67+
68+
</div>

‎app/src/lib/pages/Presentation.svelte‎

Lines changed: 55 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -131,58 +131,62 @@
131131
132132
133133
</script>
134-
<div bind:this={presentation}>
135-
{#if !$slide.loading}
136-
{#if $slide.settings.showFirst}
137-
<section>
138-
<div class="bg-center bg-cover hero h-screen w-screen"
139-
style="background-image:url({ resolveImage($slide.page?.cover) })">
140-
{#if $slide.settings.backgroundShadow}
141-
<div class="hero-overlay bg-opacity-50 "></div>
142-
{/if}
143-
<div class=" text-center text-neutral-content w-full">
144-
<div class="">
145-
146-
{#if $slide.page.icon && $slide.settings.showIcon}
147-
<div class="text-7xl">
148-
<Icon icon={$slide.page.icon}/>
149-
</div>
150-
{/if}
151-
{#if $slide.settings.showTitle}
152-
<h1 class="text-7xl font-bold w-full">
153-
{#if $slide?.page?.properties?.Name}
154-
<RichText richText={$slide?.page?.properties?.Name?.title}
155-
overrideStyle={true}/>
156-
{:else if $slide?.page?.properties?.title}
157-
<RichText richText={$slide?.page?.properties?.title?.title}
158-
overrideStyle={true}/>
159-
{/if}
160-
</h1>
161-
{/if}
162-
</div>
134+
<div class="h-screen w-screen bg-base-100">
135+
<div bind:this={presentation}>
136+
{#if !$slide.loading}
137+
{#if $slide.settings.showFirst}
138+
<section>
139+
<div class="bg-center bg-cover hero h-screen w-screen"
140+
style="background-image:url({ resolveImage($slide.page?.cover) })">
141+
{#if $slide.settings.backgroundShadow}
142+
<div class="hero-overlay bg-opacity-50 "></div>
143+
{/if}
144+
<div class=" text-center text-neutral-content w-full">
145+
<div class="">
146+
147+
{#if $slide.page.icon && $slide.settings.showIcon}
148+
<div class="text-7xl">
149+
<Icon icon={$slide.page.icon}/>
150+
</div>
151+
{/if}
152+
{#if $slide.settings.showTitle}
153+
<h1 class="text-7xl font-bold w-full">
154+
{#if $slide?.page?.properties?.Name}
155+
<RichText richText={$slide?.page?.properties?.Name?.title}
156+
overrideStyle={true}/>
157+
{:else if $slide?.page?.properties?.title}
158+
<RichText richText={$slide?.page?.properties?.title?.title}
159+
overrideStyle={true}/>
160+
{/if}
161+
</h1>
162+
{/if}
163+
</div>
163164
165+
</div>
164166
</div>
165-
</div>
166-
</section>
167-
{/if }
168-
{#each $slide.sections as section,slide}
169-
<section class=" p-4 flex-col flex-grow container mx-auto">
170-
{#each section as item}
171-
<div class:flex-1={item.type=='child_database'}>
172-
<Renderer items={[item]}
173-
on:mountedToggle={mountedToggle()}/>
174-
</div>
175-
{/each}
176-
</section>
177-
{/each}
178-
{:else}
179-
180-
loading... it may takes several minutes depending of the length of your document and the speed of notion API.
181-
182-
{#if loadingError}
183-
<h1 class="text-5xl">
184-
An error occurred during loading from notion, try to refresh 💪. If the problem persist, contact me ✉️.
185-
</h1>
167+
</section>
168+
{/if }
169+
{#each $slide.sections as section,slide}
170+
<section class=" p-4 flex-col flex-grow container mx-auto">
171+
{#each section as item}
172+
<div class:flex-1={item.type=='child_database'}>
173+
<Renderer items={[item]}
174+
on:mountedToggle={mountedToggle()}/>
175+
</div>
176+
{/each}
177+
</section>
178+
{/each}
179+
{:else}
180+
181+
loading... it may takes several minutes depending of the length of your document and the speed of notion
182+
API.
183+
184+
{#if loadingError}
185+
<h1 class="text-5xl">
186+
An error occurred during loading from notion, try to refresh 💪. If the problem persist, contact me
187+
✉️.
188+
</h1>
189+
{/if}
186190
{/if}
187-
{/if}
191+
</div>
188192
</div>

‎app/src/lib/stores/api.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ export async function getDatabase(id) {
3737
}
3838

3939
export function resolveImage(obj) {
40+
if (!obj){
41+
return "no-preview";
42+
}
4043
const item = obj?.external || obj?.file
4144

4245
return item?.url

0 commit comments

Comments
 (0)