Skip to content

feat(frontend): improvements #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 26, 2022
Merged

feat(frontend): improvements #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions NotionSlider.go
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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