Skip to content

Commit

Permalink
feat(frontend): improvements (#8)
Browse files Browse the repository at this point in the history 
+ better responsive theme

+ new list of files with images

+ filters on lists
  • Loading branch information
@decima
decima authored Dec 26, 2022
1 parent 650cebc commit 7ba5b0c
Show file tree
Hide file tree
Showing 7 changed files with 126 additions and 85 deletions.
13 changes: 8 additions & 5 deletions NotionSlider.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,8 +195,10 @@ func searchInDatabase(client *notionapi.Client, id notionapi.DatabaseID) []notio
}

type Document struct {
Name string `json:"name"`
URL string `json:"url"`
Name string `json:"name"`
URL string `json:"url"`
Cover *notionapi.Image `json:"cover"`
Page *notionapi.Page `json:"page"`
}

func listFiles(client *notionapi.Client) map[string]Document {
Expand All @@ -219,7 +221,6 @@ func listFiles(client *notionapi.Client) map[string]Document {
for _, i := range res.Results {
page := i.(*notionapi.Page)
pageTitle := "~"

var prop notionapi.Property

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

pages[string(page.ID)] = Document{
Name: pageTitle,
URL: page.URL,
Name: pageTitle,
URL: page.URL,
Cover: page.Cover,
Page: page,
}

}
Expand Down
2 changes: 1 addition & 1 deletion app/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
</script>

<main class="h-screen w-screen">
<main class="bg-base-200">
<Router>
<Navbar></Navbar>

Expand Down
2 changes: 1 addition & 1 deletion app/src/lib/Navbar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
{#if !$location.pathname.startsWith("/slides/") && !$location.pathname.startsWith("/database/") && !$location.pathname.startsWith("/presentation/") }<!--
--{#if !$location.pathname.startsWith("/slides/") && !$location.pathname.startsWith("/database/") } -->

<div class="navbar bg-base-100">
<div class="navbar bg-base-100 flex-col md:flex-row">
<div class="flex-1">
<a href="/" class="btn btn-ghost normal-case text-xl">Notion Slider&nbsp;
<div class="badge badge-primary">{$globalSettings.version}</div>
Expand Down
4 changes: 0 additions & 4 deletions app/src/lib/notionComponent/Image.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@
import RichText from "../notionPrimaries/RichText.svelte";
export let item
function toJSON(obj) {
return JSON.stringify(obj)
}
</script>

<div class="card card-compact bg-base-100">
Expand Down
81 changes: 58 additions & 23 deletions app/src/lib/pages/ListSlides.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,68 @@
<script>
import {onMount} from "svelte";
import {listFiles} from "../stores/api.js";
import {listFiles, resolveImage} from "../stores/api.js";
let data = null;
onMount(async () => {
data = await listFiles()
console.log(data)
})
const colors = [
"bg-red-300", "bg-blue-400", "bg-teal-500", "bg-purple-300", "bg-indigo-200", "bg-gray-é00",
"bg-stone-é00", "bg-orange-700", "bg-amber-600", "bg-yellow-600", "bg-lime-600", "bg-green-700",
"bg-emerald-500", "bg-teal-500", "bg-cyan-500", "bg-sky-600"
];
let elements = [];
let searchTerm="";
$: 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)
let randomColorName = function () {
return colors[Math.round(Math.random() * colors.length)];
}
</script>
<div class="overflow-x-auto w-1/2 mx-auto">
<table class="table w-full">

<tbody>
<div class="container mx-auto mt-4 pb-12">
<div class="my-4 ">
<input class="input" bind:value={searchTerm} placeholder="filter by words"/>
<span class="ml-2">{ elements.length } results</span>
</div>
<div class="flex flex-col gap-6">
{#if data}
{#each Object.entries(data).sort((a, b) => a[1].name.localeCompare(b[1].name)) as [slideId, slide]}
<tr>
<th>{slide.name}</th>
<td><a href="/presentation/{slideId}" target="_blank">
<i class="fa-solid fa-presentation"></i>
</a>
</td>
<td>
<a href="{slide.url}" target="_blank"><i class="fa-solid fa-file-lines"></i></a>
</td>
</tr>

{/each}
{/if}

</tbody>
</table>
</div>

{#each elements as [slideId, slide]}
<div class="card w-full justify-between shadow-xl bg-base-100 flex flex-row gap-4">
<div class="w-1/6">

<div class="h-32 bg-cover bg-center flex justify-center items-center {randomColorName()}"
style="background-image: url({resolveImage(slide.cover)})">
{#if !slide.cover}
<div class="uppercase">{slide.name.slice(0, 2)}</div>
{/if}
</div>
</div>
<div class=" w-4/6 flex flex-col gap-2 justify-center">
<h2 class="text-xl font-bold">
{slide.name}
</h2>
<div class="flex gap-1 w-full">
{#each slide.page.properties?.slideSettings?.multi_select || [] as tag }
<div class="badge badge-primary" on:click={()=>{searchTerm = tag.name}}>{tag.name}</div>
{/each}
</div>
</div>
<div class=" w-1/6 flex flex-col md:flex-row gap-2 items-center justify-center">
<a class="btn btn-primary w-2/5" href="/presentation/{slideId}" target="_blank">
<i class="fa-solid fa-presentation"></i>
</a>
<p></p>
<a href="{slide.url}" class="btn btn-secondary w-2/5" target="_blank">
<i class="fa-solid fa-file-lines"></i></a>


</div>


</div>
{/each}
{/if}
</div>

</div>
106 changes: 55 additions & 51 deletions app/src/lib/pages/Presentation.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,58 +131,62 @@
</script>
<div bind:this={presentation}>
{#if !$slide.loading}
{#if $slide.settings.showFirst}
<section>
<div class="bg-center bg-cover hero h-screen w-screen"
style="background-image:url({ resolveImage($slide.page?.cover) })">
{#if $slide.settings.backgroundShadow}
<div class="hero-overlay bg-opacity-50 "></div>
{/if}
<div class=" text-center text-neutral-content w-full">
<div class="">
{#if $slide.page.icon && $slide.settings.showIcon}
<div class="text-7xl">
<Icon icon={$slide.page.icon}/>
</div>
{/if}
{#if $slide.settings.showTitle}
<h1 class="text-7xl font-bold w-full">
{#if $slide?.page?.properties?.Name}
<RichText richText={$slide?.page?.properties?.Name?.title}
overrideStyle={true}/>
{:else if $slide?.page?.properties?.title}
<RichText richText={$slide?.page?.properties?.title?.title}
overrideStyle={true}/>
{/if}
</h1>
{/if}
</div>
<div class="h-screen w-screen bg-base-100">
<div bind:this={presentation}>
{#if !$slide.loading}
{#if $slide.settings.showFirst}
<section>
<div class="bg-center bg-cover hero h-screen w-screen"
style="background-image:url({ resolveImage($slide.page?.cover) })">
{#if $slide.settings.backgroundShadow}
<div class="hero-overlay bg-opacity-50 "></div>
{/if}
<div class=" text-center text-neutral-content w-full">
<div class="">
{#if $slide.page.icon && $slide.settings.showIcon}
<div class="text-7xl">
<Icon icon={$slide.page.icon}/>
</div>
{/if}
{#if $slide.settings.showTitle}
<h1 class="text-7xl font-bold w-full">
{#if $slide?.page?.properties?.Name}
<RichText richText={$slide?.page?.properties?.Name?.title}
overrideStyle={true}/>
{:else if $slide?.page?.properties?.title}
<RichText richText={$slide?.page?.properties?.title?.title}
overrideStyle={true}/>
{/if}
</h1>
{/if}
</div>
</div>
</div>
</div>
</section>
{/if }
{#each $slide.sections as section,slide}
<section class=" p-4 flex-col flex-grow container mx-auto">
{#each section as item}
<div class:flex-1={item.type=='child_database'}>
<Renderer items={[item]}
on:mountedToggle={mountedToggle()}/>
</div>
{/each}
</section>
{/each}
{:else}
loading... it may takes several minutes depending of the length of your document and the speed of notion API.
{#if loadingError}
<h1 class="text-5xl">
An error occurred during loading from notion, try to refresh 💪. If the problem persist, contact me ✉️.
</h1>
</section>
{/if }
{#each $slide.sections as section,slide}
<section class=" p-4 flex-col flex-grow container mx-auto">
{#each section as item}
<div class:flex-1={item.type=='child_database'}>
<Renderer items={[item]}
on:mountedToggle={mountedToggle()}/>
</div>
{/each}
</section>
{/each}
{:else}
loading... it may takes several minutes depending of the length of your document and the speed of notion
API.
{#if loadingError}
<h1 class="text-5xl">
An error occurred during loading from notion, try to refresh 💪. If the problem persist, contact me
✉️.
</h1>
{/if}
{/if}
{/if}
</div>
</div>
3 changes: 3 additions & 0 deletions app/src/lib/stores/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ export async function getDatabase(id) {
}

export function resolveImage(obj) {
if (!obj){
return "no-preview";
}
const item = obj?.external || obj?.file

return item?.url
Expand Down

0 comments on commit 7ba5b0c

Please sign in to comment.