diff --git a/package-lock.json b/package-lock.json index 3388097..89dfcb9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -89,6 +89,11 @@ "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==", "dev": true }, + "@popperjs/core": { + "version": "2.11.5", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz", + "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==" + }, "@rollup/pluginutils": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", @@ -131,6 +136,15 @@ "tiny-glob": "^0.2.9" } }, + "@sveltejs/adapter-static": { + "version": "1.0.0-next.29", + "resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-1.0.0-next.29.tgz", + "integrity": "sha512-0hjGnfT3BRyoHnzJ2w0/xL+xICRpKneDTm45ZzggiRrc0r71WJfF6toGeg8N4QUQnj8EJ3Itm453gsS1kt7VUQ==", + "dev": true, + "requires": { + "tiny-glob": "^0.2.9" + } + }, "@sveltejs/adapter-vercel": { "version": "1.0.0-next.47", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.47.tgz", @@ -230,6 +244,12 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "bootstrap-icons": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz", + "integrity": "sha512-IXUqislddPJfwq6H+2nTkHyr9epO9h6u1AG0OZCx616w+TgzeoCjfmI3qJMQqt1J586gN2IxzB4M99Ip4sTZ1w==", + "dev": true + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1323,6 +1343,14 @@ "integrity": "sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ==", "dev": true }, + "sveltestrap": { + "version": "5.9.0", + "resolved": "https://registry.npmjs.org/sveltestrap/-/sveltestrap-5.9.0.tgz", + "integrity": "sha512-ZSiYKYrKhDMhhbamnAFK3RK/uqUdcLgjae5Fk3GYdv6Ccth0tN2y6vSg+Vp/PBTYc51u08ZwnYvt8SfWSRNCMA==", + "requires": { + "@popperjs/core": "^2.9.2" + } + }, "table": { "version": "6.8.0", "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz", diff --git a/package.json b/package.json index 2a4ab68..ff874e8 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,9 @@ }, "devDependencies": { "@sveltejs/adapter-auto": "next", + "@sveltejs/adapter-static": "^1.0.0-next.29", "@sveltejs/kit": "next", + "bootstrap-icons": "^1.8.1", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.1", @@ -20,5 +22,8 @@ "prettier-plugin-svelte": "^2.5.0", "svelte": "^3.44.0" }, - "type": "module" + "type": "module", + "dependencies": { + "sveltestrap": "^5.9.0" + } } diff --git a/src/app.html b/src/app.html index d8ed254..933e621 100644 --- a/src/app.html +++ b/src/app.html @@ -1,13 +1,18 @@ - + + + + + %svelte.head% - -
%svelte.body%
+ +
%svelte.body%
+ diff --git a/src/components/Header.svelte b/src/components/Header.svelte new file mode 100644 index 0000000..39fde32 --- /dev/null +++ b/src/components/Header.svelte @@ -0,0 +1,30 @@ + + + + + Maatma Videos + + + diff --git a/src/components/VideoThumb.svelte b/src/components/VideoThumb.svelte new file mode 100644 index 0000000..a5915c8 --- /dev/null +++ b/src/components/VideoThumb.svelte @@ -0,0 +1,18 @@ + + + {goto(video.id)}}> + {video.title} + + {video.title} + + diff --git a/src/hooks.js b/src/hooks.js new file mode 100644 index 0000000..edd4379 --- /dev/null +++ b/src/hooks.js @@ -0,0 +1,6 @@ +export async function handle({ event, resolve }) { + const response = await resolve(event, { + ssr: false, + }); + return response; +} diff --git a/src/routes/[vid].svelte b/src/routes/[vid].svelte new file mode 100644 index 0000000..ecb6237 --- /dev/null +++ b/src/routes/[vid].svelte @@ -0,0 +1,74 @@ + + + + +{#if $videos.idx_videos[video_id]} + + +
+ +
+ {#if $videos.idx_videos[video_id].title} +

+ {$videos.idx_videos[video_id].title} +

+ {/if} + {#if $videos.idx_videos[video_id].description} +

+ {@html $videos.idx_videos[video_id].description} +

+ {/if} +
+ + + + {#if $videos.idx_videos[video_id].next && $videos.idx_videos[$videos.idx_videos[video_id].next]} + + +

Prochaine vidéo

+ + +
+ + + +
+ {/if} + + +

Autres vidéos

+ + +
+ + + {#each $videos.videos as video (video.id)} + {#if video.id != $videos.idx_videos[video_id].next && video.id != video_id} + + {/if} + {/each} + + +{:else} + Erreur 404 +{/if} diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte new file mode 100644 index 0000000..da62627 --- /dev/null +++ b/src/routes/__layout.svelte @@ -0,0 +1,61 @@ + + + + + + Maatma Videos + + + + +
+ + {#if $videos.loading} + + Chargement de la liste des vidéos… + + {:else} + + {/if} + diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 5982b0a..891de16 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -1,2 +1,28 @@ -

Welcome to SvelteKit

-

Visit kit.svelte.dev to read the documentation

+ + + + + +

Toutes les vidéos

+ + +
+ + + + {#each $videos.videos as video (video.id)} + + + + {/each} + + diff --git a/src/stores/videos.js b/src/stores/videos.js new file mode 100644 index 0000000..d94641a --- /dev/null +++ b/src/stores/videos.js @@ -0,0 +1,27 @@ +import { writable } from 'svelte/store'; + +function createVideosStore() { + const { subscribe, set, update } = writable({videos: [], idx_videos: {}, loading: true}); + + return { + subscribe, + update: async (res_videos, cb=null) => { + if (res_videos.status === 200) { + const videos = await res_videos.json(); + const idx_videos = {}; + + for (const v of videos) { + idx_videos[v.id] = v; + } + + update((t) => (Object.assign(t, {videos, idx_videos, loading: false}))); + + if (cb) { + cb(videos); + } + } + }, + }; +} + +export const videos = createVideosStore(); diff --git a/svelte.config.js b/svelte.config.js index 301e785..fd8469b 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,9 +1,14 @@ -import adapter from '@sveltejs/adapter-auto'; +import adapter from '@sveltejs/adapter-static'; /** @type {import('@sveltejs/kit').Config} */ const config = { kit: { - adapter: adapter() + adapter: adapter({ + fallback: 'index.html' + }), + paths: { + base: '/videos', + }, } };