Etheryo/etheryo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixing js check issues. Updated Svelte check. Formatted files.

Browse source
This commit is contained in:
Yohan Boujon 2025-03-29 13:26:06 +01:00
parent 78af91262b
commit 64e3a6e7ac
19 changed files with 298 additions and 235 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package-lock.json generated
View file

@ -17,7 +17,7 @@
"@sveltejs/kit": "^2.16.0", "@sveltejs/kit": "^2.16.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0", "@sveltejs/vite-plugin-svelte": "^5.0.0",
"svelte": "^5.0.0", "svelte": "^5.0.0",
"svelte-check": "^4.0.0", "svelte-check": "^4.1.5",
"typescript": "^5.0.0", "typescript": "^5.0.0",
"vite": "^6.0.0" "vite": "^6.0.0"
} }

2
package.json
View file

@ -16,7 +16,7 @@
"@sveltejs/kit": "^2.16.0", "@sveltejs/kit": "^2.16.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0", "@sveltejs/vite-plugin-svelte": "^5.0.0",
"svelte": "^5.0.0", "svelte": "^5.0.0",
"svelte-check": "^4.0.0", "svelte-check": "^4.1.5",
"typescript": "^5.0.0", "typescript": "^5.0.0",
"vite": "^6.0.0" "vite": "^6.0.0"
}, },

71
src/lib/components/archive.svelte
View file

@ -1,38 +1,38 @@
<script> <script>
import '$lib/css/base.css'; import "$lib/css/base.css";
import '$lib/css/archive.css'; import "$lib/css/archive.css";
import SvgIcon from '@jamescoyle/svelte-icon'; import SvgIcon from "@jamescoyle/svelte-icon";
import { mdiChevronRight } from '@mdi/js'; import { mdiChevronRight } from "@mdi/js";
import anime from 'animejs'; import anime from "animejs";
export let fontPost = 1; export let fontPost = 1;
export let paddingPost = 0.5; export let paddingPost = 0.5;
export let customStyle = ""; export let customStyle = "";
const posts = { const posts = {
'Août 2024': [ "Août 2024": [
'Est-ce que le lorem est Ipsum ?', "Est-ce que le lorem est Ipsum ?",
"J'aime bien le jeu Minecraft", "J'aime bien le jeu Minecraft",
'Comment Installer Linus Torvalds sur sa tablette', "Comment Installer Linus Torvalds sur sa tablette",
'Pourquoi "Le miam" pourrait être votre groupe de musique préféré ?', 'Pourquoi "Le miam" pourrait être votre groupe de musique préféré ?',
"Peut-on vivre dans une maison en pain d'épices ?" "Peut-on vivre dans une maison en pain d'épices ?",
], ],
'Juillet 2024': [ "Juillet 2024": [
'Les secrets du café qui ne refroidit jamais', "Les secrets du café qui ne refroidit jamais",
'Comment devenir un ninja en 10 leçons faciles', "Comment devenir un ninja en 10 leçons faciles",
'La vérité derrière les licornes: Mythe ou réalité ?', "La vérité derrière les licornes: Mythe ou réalité ?",
"J'ai adopté un dragon, voici ce qui s'est passé" "J'ai adopté un dragon, voici ce qui s'est passé",
], ],
'Juin 2024': [ "Juin 2024": [
'Pourquoi "Le miam" pourrait être votre groupe de musique préféré ?', 'Pourquoi "Le miam" pourrait être votre groupe de musique préféré ?',
'La recette secrète de la pizza à la glace', "La recette secrète de la pizza à la glace",
'Comment devenir un expert en pirouettes en 5 jours' "Comment devenir un expert en pirouettes en 5 jours",
],
"Mai 2024": [
"Mon voyage au centre de la Terre en montgolfière",
"Pourquoi les pandas devraient être vos nouveaux colocataires",
"Les chats dominent-ils vraiment Internet ?",
], ],
'Mai 2024': [
'Mon voyage au centre de la Terre en montgolfière',
'Pourquoi les pandas devraient être vos nouveaux colocataires',
'Les chats dominent-ils vraiment Internet ?'
]
}; };
const size = Object.keys(posts).length; const size = Object.keys(posts).length;
@ -48,7 +48,9 @@
const svg = archiveRefs[index].children[1]; const svg = archiveRefs[index].children[1];
const rvalue = isActive[index] ? [90, 0] : [0, 90]; const rvalue = isActive[index] ? [90, 0] : [0, 90];
const ovalue = isActive[index] ? [1, 0] : [0, 1]; const ovalue = isActive[index] ? [1, 0] : [0, 1];
const shadow = isActive[index] ? '' : '0px 8px 18px -1px rgba(52, 42, 58, 0.2)'; const shadow = isActive[index]
? ""
: "0px 8px 18px -1px rgba(52, 42, 58, 0.2)";
const mbvalue = isActive[index] ? [0.5, 0] : [0, 0.5]; const mbvalue = isActive[index] ? [0.5, 0] : [0, 0.5];
const hvalue = isActive[index] const hvalue = isActive[index]
? [posts[date].length * (2 * paddingPost + fontPost + 0.5), 0] ? [posts[date].length * (2 * paddingPost + fontPost + 0.5), 0]
@ -58,20 +60,25 @@
if (!isActive[index]) { if (!isActive[index]) {
indexArchive = -1; indexArchive = -1;
archivePost.style.opacity = '0'; archivePost.style.opacity = "0";
} else { } else {
indexArchive = index; indexArchive = index;
archivePost.style.display = 'block'; archivePost.style.display = "block";
} }
anime({ anime({
targets: { transform: rvalue[0], opacity: ovalue[0], margin: mbvalue[0], height: hvalue[0] }, targets: {
transform: rvalue[0],
opacity: ovalue[0],
margin: mbvalue[0],
height: hvalue[0],
},
transform: rvalue, transform: rvalue,
opacity: ovalue, opacity: ovalue,
margin: mbvalue, margin: mbvalue,
height: hvalue, height: hvalue,
duration: 300, duration: 300,
easing: 'easeInOutQuad', easing: "easeInOutQuad",
update: function (anim) { update: function (anim) {
svg.style.transform = `rotate(${anim.animations[0].currentValue}deg)`; svg.style.transform = `rotate(${anim.animations[0].currentValue}deg)`;
archive.style.background = `linear-gradient(90deg, rgba(65,53,67,${anim.animations[1].currentValue}) 0%, rgba(38,28,44,${anim.animations[1].currentValue}) 100%)`; archive.style.background = `linear-gradient(90deg, rgba(65,53,67,${anim.animations[1].currentValue}) 0%, rgba(38,28,44,${anim.animations[1].currentValue}) 100%)`;
@ -81,22 +88,22 @@
}, },
complete: function () { complete: function () {
if (!isActive[index]) { if (!isActive[index]) {
archivePost.style.display = 'none'; archivePost.style.display = "none";
return; return;
} }
anime({ anime({
targets: archivePost, targets: archivePost,
opacity: ovalue, opacity: ovalue,
duration: 300, duration: 300,
easing: 'easeOutQuad' easing: "easeOutQuad",
}); });
} },
}); });
anime({ anime({
targets: archive, targets: archive,
color: isActive[index] ? '#F8F1F1' : '#261C2C', color: isActive[index] ? "#F8F1F1" : "#261C2C",
duration: 200, duration: 200,
easing: 'easeInOutQuad' easing: "easeInOutQuad",
}); });
} }
</script> </script>

17
src/lib/components/button-slider.svelte
View file

@ -1,23 +1,26 @@
<script> <script>
import '$lib/css/base.css'; import "$lib/css/base.css";
import '$lib/css/button-slider.css'; import "$lib/css/button-slider.css";
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
export let keys = ['Button1', 'Button2']; export let keys = ["Button1", "Button2"];
export let active = 0; export let active = 0;
export let width = "100%"; export let width = "100%";
function changeActive(id) { function changeActive(id) {
dispatch('click', { id: id }); dispatch("click", { id: id });
active = id; active = id;
} }
</script> </script>
<div class="button-slider-container center" style="--button-slider-width: {width}"> <div
class="button-slider-container center"
style="--button-slider-width: {width}"
>
{#each keys as k, id} {#each keys as k, id}
<button <button
class={id === active ? 'button-slider-active' : ''} class={id === active ? "button-slider-active" : ""}
on:click={() => { on:click={() => {
changeActive(id); changeActive(id);
}}><span>{k}</span></button }}><span>{k}</span></button

42
src/lib/components/carousel-vertical.svelte
View file

@ -1,8 +1,8 @@
<script> <script>
import '$lib/css/base.css'; import "$lib/css/base.css";
import '$lib/css/carousel.css'; import "$lib/css/carousel.css";
import SvgIcon from '@jamescoyle/svelte-icon'; import SvgIcon from "@jamescoyle/svelte-icon";
import { mdiAccount, mdiCalendarRange } from '@mdi/js'; import { mdiAccount, mdiCalendarRange } from "@mdi/js";
export let posts; export let posts;
const mainpost = posts[0]; const mainpost = posts[0];
@ -14,7 +14,7 @@
function handleKeyDown(event, url) { function handleKeyDown(event, url) {
console.log(event); console.log(event);
if (event.key === 'Enter' || event.key === ' ') { if (event.key === "Enter" || event.key === " ") {
redirectTo(url); redirectTo(url);
} }
} }
@ -28,12 +28,17 @@
on:click={() => { on:click={() => {
redirectTo(`/articles/${mainpost.slug}`); redirectTo(`/articles/${mainpost.slug}`);
}} }}
on:keydown={(event) => handleKeyDown(event, `/articles/${mainpost.slug}`)} on:keydown={(event) =>
handleKeyDown(event, `/articles/${mainpost.slug}`)}
> >
<div> <div>
<h2>{mainpost.title}</h2> <h2>{mainpost.title}</h2>
<div class="center flex justify-center h-70 margin-bottom "> <div class="center flex justify-center h-70 margin-bottom">
<img class="carousel-picture" alt="mainpicture" src={mainpost.picture} /> <img
class="carousel-picture"
alt="mainpicture"
src={mainpost.picture}
/>
</div> </div>
<div class="flex align-center margin-horizontal-05"> <div class="flex align-center margin-horizontal-05">
<SvgIcon type="mdi" path={mdiCalendarRange} size="26" /> <SvgIcon type="mdi" path={mdiCalendarRange} size="26" />
@ -56,17 +61,30 @@
on:click={() => { on:click={() => {
redirectTo(`/articles/${p.slug}`); redirectTo(`/articles/${p.slug}`);
}} }}
on:keydown={(event) => handleKeyDown(event, `/articles/${p.slug}`)} on:keydown={(event) =>
handleKeyDown(event, `/articles/${p.slug}`)}
> >
<img class="carousel-picture" alt="mainpicture" src={p.picture} /> <img
class="carousel-picture"
alt="mainpicture"
src={p.picture}
/>
<div class="flex-col align justify-center"> <div class="flex-col align justify-center">
<h2>{p.title}</h2> <h2>{p.title}</h2>
<div class="flex align-center margin-horizontal-05"> <div class="flex align-center margin-horizontal-05">
<SvgIcon type="mdi" path={mdiCalendarRange} size="26" /> <SvgIcon
type="mdi"
path={mdiCalendarRange}
size="26"
/>
{p.date} {p.date}
</div> </div>
<div class="flex align-center margin-horizontal-05"> <div class="flex align-center margin-horizontal-05">
<SvgIcon type="mdi" path={mdiAccount} size="26" /> <SvgIcon
type="mdi"
path={mdiAccount}
size="26"
/>
{p.author} {p.author}
</div> </div>
</div> </div>

14
src/lib/components/count.svelte
View file

@ -1,11 +1,11 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from "svelte";
import anime from 'animejs'; import anime from "animejs";
import '$lib/css/base.css'; import "$lib/css/base.css";
import '$lib/css/count.css'; import "$lib/css/count.css";
export let name = 'Articles'; export let name = "Articles";
export let num = 69; export let num = 69;
let count_num = 0; let count_num = 0;
@ -16,10 +16,10 @@
count: [0, num], count: [0, num],
delay: 500, delay: 500,
duration: 1500, duration: 1500,
easing: 'easeOutQuint', easing: "easeOutQuint",
update: function (anim) { update: function (anim) {
count_num = Math.floor(anim.animations[0].currentValue); count_num = Math.floor(anim.animations[0].currentValue);
} },
}); });
}); });
</script> </script>

31
src/lib/components/footer.svelte
View file

@ -1,12 +1,12 @@
<script> <script>
import '$lib/css/base.css'; import "$lib/css/base.css";
import '$lib/css/footer.css'; import "$lib/css/footer.css";
import Page1 from '$lib/components/footer/page1.svelte'; import Page1 from "$lib/components/footer/page1.svelte";
import Page2 from '$lib/components/footer/page2.svelte'; import Page2 from "$lib/components/footer/page2.svelte";
import Page3 from '$lib/components/footer/page3.svelte'; import Page3 from "$lib/components/footer/page3.svelte";
import ButtonSlider from '$lib/components/button-slider.svelte'; import ButtonSlider from "$lib/components/button-slider.svelte";
import anime from 'animejs'; import anime from "animejs";
let active = 0; let active = 0;
let page = [Page1, Page2, Page3]; let page = [Page1, Page2, Page3];
@ -14,7 +14,7 @@
function slideText(event) { function slideText(event) {
const id = event.detail.id; const id = event.detail.id;
const width = window.innerWidth/2; const width = window.innerWidth / 2;
const animTranslate = active > id ? [width, -width] : [-width, width]; const animTranslate = active > id ? [width, -width] : [-width, width];
anime({ anime({
@ -22,7 +22,7 @@
translateX: animTranslate[0], translateX: animTranslate[0],
opacity: 0, opacity: 0,
duration: 300, duration: 300,
easing: 'easeInQuad', easing: "easeInQuad",
complete: function () { complete: function () {
active = id; active = id;
pageDiv.style.transform = `translateX(${animTranslate[1]}px)`; pageDiv.style.transform = `translateX(${animTranslate[1]}px)`;
@ -31,9 +31,9 @@
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 300, duration: 300,
easing: 'easeOutQuad' easing: "easeOutQuad",
}); });
} },
}); });
} }
</script> </script>
@ -50,9 +50,14 @@
</div> </div>
</div> </div>
<div class="footer-slider align-center"> <div class="footer-slider align-center">
<span>{new Date().getFullYear()} • Tous droits réservés • Yohan Boujon</span> <span
>{new Date().getFullYear()} • Tous droits réservés • Yohan Boujon</span
>
<div class="flex-end"> <div class="flex-end">
<ButtonSlider keys={['À propos', 'Notre Vision', 'Contacter']} on:click={slideText} /> <ButtonSlider
keys={["À propos", "Notre Vision", "Contacter"]}
on:click={slideText}
/>
</div> </div>
</div> </div>
</div> </div>

23
src/lib/components/footer/page1.svelte
View file

@ -1,21 +1,24 @@
<script> <script>
import '$lib/css/footer/page.css'; import "$lib/css/footer/page.css";
import SvgIcon from '@jamescoyle/svelte-icon'; import SvgIcon from "@jamescoyle/svelte-icon";
import { mdiFormatQuoteClose, mdiFormatQuoteOpen } from '@mdi/js'; import { mdiFormatQuoteClose, mdiFormatQuoteOpen } from "@mdi/js";
</script> </script>
<div class="page-icon-text"> <div class="page-icon-text">
<img alt="github" src="https://cdn.simpleicons.org/github/F8F1F1" /> <img alt="github" src="https://cdn.simpleicons.org/github/F8F1F1" />
<a target="_blank" href="https://github.com/yoboujon/etheryo-blog">Code source</a> <a target="_blank" href="https://git.etheryo.fr/Etheryo/etheryo"
>Code source</a
>
</div> </div>
<div class="page-icon-text"> <div class="page-icon-text">
<img alt="raspberrypi" src="https://cdn.simpleicons.org/raspberrypi/F8F1F1" /> <img
<a target="_blank" href="https://fr.wikipedia.org/wiki/Raspberry_Pi">Hébergé sur Raspberry Pi</a> alt="raspberrypi"
</div> src="https://cdn.simpleicons.org/raspberrypi/F8F1F1"
<div class="page-icon-text"> />
<img alt="crowcpp" src="https://crowcpp.org/master/assets/favicon.svg" /> <a target="_blank" href="https://fr.wikipedia.org/wiki/Raspberry_Pi"
<a target="_blank" href="https://github.com/CrowCpp/Crow">Réalisé avec CrowCpp</a> >Hébergé sur Raspberry Pi</a
>
</div> </div>
<div class="page-icon-text page-special"> <div class="page-icon-text page-special">
<SvgIcon type="mdi" path={mdiFormatQuoteOpen} /> <SvgIcon type="mdi" path={mdiFormatQuoteOpen} />

15
src/lib/components/footer/page2.svelte
View file

@ -1,9 +1,9 @@
<script> <script>
import '$lib/css/base.css'; import "$lib/css/base.css";
import '$lib/css/footer/page.css'; import "$lib/css/footer/page.css";
import SvgIcon from '@jamescoyle/svelte-icon'; import SvgIcon from "@jamescoyle/svelte-icon";
import { mdiEye } from '@mdi/js'; import { mdiEye } from "@mdi/js";
</script> </script>
<div class="page-icon-text"> <div class="page-icon-text">
@ -12,8 +12,9 @@
</div> </div>
<div class="page-text"> <div class="page-text">
<span class="page-overflow text-justify" <span class="page-overflow text-justify"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus ante, porttitor eget massa >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus
sit amet, volutpat cursus mauris. Proin et massa dui. Vestibulum eu tempus nisl, vitae bibendum ante, porttitor eget massa sit amet, volutpat cursus mauris. Proin et
urna. Sed tincidunt est non nulla scelerisque. massa dui. Vestibulum eu tempus nisl, vitae bibendum urna. Sed tincidunt
est non nulla scelerisque.
</span> </span>
</div> </div>

10
src/lib/components/footer/page3.svelte
View file

@ -1,14 +1,14 @@
<script> <script>
import '$lib/css/base.css'; import "$lib/css/base.css";
import '$lib/css/footer/page.css'; import "$lib/css/footer/page.css";
import SvgIcon from '@jamescoyle/svelte-icon'; import SvgIcon from "@jamescoyle/svelte-icon";
import { mdiEmailFast, mdiHelp } from '@mdi/js'; import { mdiEmailFast, mdiHelp } from "@mdi/js";
</script> </script>
<div class="page-icon-text"> <div class="page-icon-text">
<SvgIcon type="mdi" path={mdiEmailFast} /> <SvgIcon type="mdi" path={mdiEmailFast} />
<a href="mailto:blog@etheryo.fr">Envoyez nous un mail</a> <a href="mailto:contact@etheryo.fr">Envoyez nous un mail</a>
</div> </div>
<div class="page-icon-text"> <div class="page-icon-text">
<SvgIcon type="mdi" path={mdiHelp} /> <SvgIcon type="mdi" path={mdiHelp} />

55
src/lib/components/link.svelte
View file

@ -1,40 +1,40 @@
<script> <script>
import '$lib/css/base.css'; import "$lib/css/base.css";
import '$lib/css/link.css'; import "$lib/css/link.css";
import { hexTorgb, darkenHexTorgb } from '$lib/ts/color.ts'; import { hexTorgb, darkenHexTorgb } from "$lib/ts/color.ts";
import SvgIcon from '$lib/components/svg-icon-custom.svelte'; import SvgIcon from "$lib/components/svg-icon-custom.svelte";
import { mdiChevronRight } from '@mdi/js'; import { mdiChevronRight } from "@mdi/js";
import anime from 'animejs'; import anime from "animejs";
let color = '9A031E'; let color = "9A031E";
const color_rgb = hexTorgb(color); const color_rgb = hexTorgb(color);
const color_darken = darkenHexTorgb(color, 0.8); const color_darken = darkenHexTorgb(color, 0.8);
let imgBase = 'placeholder_link.png'; let imgBase = "placeholder_link.png";
let imgHover = 'placeholder_link_hover.png'; let imgHover = "placeholder_link_hover.png";
let base; let base;
let hover; let hover;
let span_link; let span_link;
let svg_icon; let svg_icon;
let div_background; let div_background;
let span_width = '0%'; let span_width = "0%";
async function enter() { async function enter() {
span_width = '100%'; span_width = "100%";
span_link.style.color = 'var(--color-background)'; span_link.style.color = "var(--color-background)";
svg_icon.svgElement.style.color = 'var(--color-background)'; svg_icon.svgElement.style.color = "var(--color-background)";
svg_icon.svgElement.style.transform = 'translateX(8px)'; svg_icon.svgElement.style.transform = "translateX(8px)";
updatePicture(false, base); updatePicture(false, base);
updatePicture(true, hover); updatePicture(true, hover);
updatePicture(true, div_background); updatePicture(true, div_background);
} }
async function leave() { async function leave() {
span_width = '0%'; span_width = "0%";
span_link.style.color = 'var(--color-text)'; span_link.style.color = "var(--color-text)";
svg_icon.svgElement.style.color = 'var(--color-text)'; svg_icon.svgElement.style.color = "var(--color-text)";
svg_icon.svgElement.style.transform = ''; svg_icon.svgElement.style.transform = "";
updatePicture(true, base); updatePicture(true, base);
updatePicture(false, hover); updatePicture(false, hover);
updatePicture(false, div_background); updatePicture(false, div_background);
@ -47,7 +47,7 @@
targets: img, targets: img,
opacity: [1 - targetOpacity, targetOpacity], opacity: [1 - targetOpacity, targetOpacity],
duration: 400, duration: 400,
easing: 'easeInOutQuad' easing: "easeInOutQuad",
}); });
} }
</script> </script>
@ -60,14 +60,23 @@
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div class="link-background" bind:this={div_background}> <div class="link-background" bind:this={div_background}></div>
</div>
<div class="link-content flex-row center"> <div class="link-content flex-row center">
<div class="link-img"> <div class="link-img">
<img bind:this={base} alt="base" src={imgBase} /> <img bind:this={base} alt="base" src={imgBase} />
<img bind:this={hover} alt="hover" class="link-img-hover" src={imgHover} /> <img
bind:this={hover}
alt="hover"
class="link-img-hover"
src={imgHover}
/>
</div> </div>
<span bind:this={span_link}>Link</span> <span bind:this={span_link}>Link</span>
<SvgIcon type="mdi" path={mdiChevronRight} size={80} bind:this={svg_icon}></SvgIcon> <SvgIcon
type="mdi"
path={mdiChevronRight}
size={80}
bind:this={svg_icon}
></SvgIcon>
</div> </div>
</div> </div>

8
src/lib/components/navbar.svelte
View file

@ -103,9 +103,11 @@
<div> <div>
<a class={isActive('/categories', pageUrl)} href="/categories">Catégories</a> <a class={isActive('/categories', pageUrl)} href="/categories">Catégories</a>
</div> </div>
<Search width="15rem" font_size="0.8rem" padding="0rem" logo_size="25" /> <Search width="15rem" font_size="0.8rem" padding="0rem" logo_size=25 />
</div>
<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''}>
</div>
<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_category}>
</div> </div>
<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_category} />
</div> </div>
</nav> </nav>

28
src/lib/components/post-min.svelte
View file

@ -1,16 +1,16 @@
<script> <script>
import '$lib/css/base.css'; import "$lib/css/base.css";
import '$lib/css/pill.css'; import "$lib/css/pill.css";
import '$lib/css/post-min.css'; import "$lib/css/post-min.css";
import SvgIcon from '@jamescoyle/svelte-icon'; import SvgIcon from "@jamescoyle/svelte-icon";
import { mdiCalendarRange } from '@mdi/js'; import { mdiCalendarRange } from "@mdi/js";
import anime from 'animejs'; import anime from "animejs";
export let cover = export let cover =
'https://share.etheryo.fr/Rando-01.11.2023/Alix%20Mange%20Lac%20Rouge%20Bleu%20Orange%20Midi.jpg'; "https://share.etheryo.fr/Rando-01.11.2023/Alix%20Mange%20Lac%20Rouge%20Bleu%20Orange%20Midi.jpg";
export let title = 'Title'; export let title = "Title";
export let date = '01/01/1997'; export let date = "01/01/1997";
let post_div; let post_div;
let title_h1; let title_h1;
@ -34,7 +34,7 @@
targets: div_back, targets: div_back,
opacity: [1 - targetOpacity, targetOpacity], opacity: [1 - targetOpacity, targetOpacity],
duration: 400, duration: 400,
easing: 'easeInOutQuad' easing: "easeInOutQuad",
}); });
} }
</script> </script>
@ -48,11 +48,11 @@
}} }}
on:mouseenter={() => { on:mouseenter={() => {
animateForeground(true, post_div); animateForeground(true, post_div);
title_h1.style.textDecoration = 'underline 2px'; title_h1.style.textDecoration = "underline 2px";
}} }}
on:mouseleave={() => { on:mouseleave={() => {
animateForeground(false, post_div); animateForeground(false, post_div);
title_h1.style.textDecoration = ''; title_h1.style.textDecoration = "";
}} }}
> >
<div class="post-min"> <div class="post-min">
@ -68,6 +68,6 @@
<span>{date}</span> <span>{date}</span>
</div> </div>
</div> </div>
<div class="post-min-overlay-front" /> <div class="post-min-overlay-front"></div>
<div class="post-min-overlay-back" bind:this={post_div} /> <div class="post-min-overlay-back" bind:this={post_div}></div>
</div> </div>

37
src/lib/components/post.svelte
View file

@ -1,18 +1,18 @@
<script> <script>
import '$lib/css/base.css'; import "$lib/css/base.css";
import '$lib/css/pill.css'; import "$lib/css/pill.css";
import '$lib/css/post.css'; import "$lib/css/post.css";
import SvgIcon from '@jamescoyle/svelte-icon'; import SvgIcon from "@jamescoyle/svelte-icon";
import { mdiCalendarRange } from '@mdi/js'; import { mdiCalendarRange } from "@mdi/js";
import anime from 'animejs'; import anime from "animejs";
export let cover = export let cover =
'https://share.etheryo.fr/Rando-01.11.2023/Alix%20Mange%20Lac%20Rouge%20Bleu%20Orange%20Midi.jpg'; "https://share.etheryo.fr/Rando-01.11.2023/Alix%20Mange%20Lac%20Rouge%20Bleu%20Orange%20Midi.jpg";
export let title = 'Title'; export let title = "Title";
export let text = 'Little description.'; export let text = "Little description.";
export let author = 'Author'; export let author = "Author";
export let date = '01/01/1997'; export let date = "01/01/1997";
export let profile = 'https://i.pravatar.cc/300'; export let profile = "https://i.pravatar.cc/300";
let post_div; let post_div;
let title_h1; let title_h1;
@ -36,7 +36,7 @@
targets: div_back, targets: div_back,
opacity: [1 - targetOpacity, targetOpacity], opacity: [1 - targetOpacity, targetOpacity],
duration: 400, duration: 400,
easing: 'easeInOutQuad' easing: "easeInOutQuad",
}); });
} }
</script> </script>
@ -49,11 +49,11 @@
}} }}
on:mouseenter={() => { on:mouseenter={() => {
animateForeground(true, post_div); animateForeground(true, post_div);
title_h1.style.textDecoration = 'underline 3px'; title_h1.style.textDecoration = "underline 3px";
}} }}
on:mouseleave={() => { on:mouseleave={() => {
animateForeground(false, post_div); animateForeground(false, post_div);
title_h1.style.textDecoration = ''; title_h1.style.textDecoration = "";
}} }}
> >
<div class="post"> <div class="post">
@ -75,11 +75,12 @@
</div> </div>
<div class="pill pill-reversed flex-end"> <div class="pill pill-reversed flex-end">
<span>{date}</span> <span>{date}</span>
<SvgIcon type="mdi" path={mdiCalendarRange} size="120"></SvgIcon> <SvgIcon type="mdi" path={mdiCalendarRange} size="120"
></SvgIcon>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="post-overlay-front" /> <div class="post-overlay-front"></div>
<div class="post-overlay-back" bind:this={post_div} /> <div class="post-overlay-back" bind:this={post_div}></div>
</div> </div>

48
src/lib/components/search.svelte
View file

@ -1,17 +1,17 @@
<script> <script lang="js">
import '$lib/css/base.css'; import "$lib/css/base.css";
import '$lib/css/search.css'; import "$lib/css/search.css";
import SvgIcon from '$lib/components/svg-icon-custom.svelte'; import SvgIcon from "$lib/components/svg-icon-custom.svelte";
import { mdiMagnify } from '@mdi/js'; import { mdiMagnify } from "@mdi/js";
import anime from 'animejs'; import anime from "animejs";
export let width = '50%'; export let width = "50%";
export let font_size = '1rem'; export let font_size = "1rem";
export let padding = '1rem'; export let padding = "1rem";
export let logo_size = 20; export let logo_size = 20;
export let margin = '0rem'; export let margin = "0rem";
export let text_color = 'var(--color-subtext)'; export let text_color = "var(--color-subtext)";
let div_search; let div_search;
let input_search; let input_search;
@ -28,11 +28,13 @@
showSearch(true); showSearch(true);
// Animating the div // Animating the div
const max = div_search.getBoundingClientRect().right - div_search.getBoundingClientRect().left; const max =
div_search.getBoundingClientRect().right -
div_search.getBoundingClientRect().left;
anime({ anime({
targets: { position_var: 0 }, targets: { position_var: 0 },
position_var: [0, max], position_var: [0, max],
easing: 'linear', easing: "linear",
duration: 300, duration: 300,
update: function (anim) { update: function (anim) {
div_search.style.background = `radial-gradient(circle farthest-corner at ${anim.animations[0].currentValue}px 0px, #958a98 0%, var(--color-background) 100%)`; div_search.style.background = `radial-gradient(circle farthest-corner at ${anim.animations[0].currentValue}px 0px, #958a98 0%, var(--color-background) 100%)`;
@ -42,18 +44,22 @@
targets: { percent_var: 0, opacity_var: 1 }, targets: { percent_var: 0, opacity_var: 1 },
percent_var: [0, 100], percent_var: [0, 100],
opacity_var: [1, 0], opacity_var: [1, 0],
easing: 'easeOutQuad', easing: "easeOutQuad",
duration: 300, duration: 300,
update: function (anim) { update: function (anim) {
div_search.style.background = `radial-gradient(circle farthest-corner at 0px 0px, var(--color-background) ${anim.animations[0].currentValue}%, rgba(149,138,152,${anim.animations[1].currentValue}) 100%)`; div_search.style.background = `radial-gradient(circle farthest-corner at 0px 0px, var(--color-background) ${anim.animations[0].currentValue}%, rgba(149,138,152,${anim.animations[1].currentValue}) 100%)`;
} },
}); });
} },
}); });
} }
function closeSearch(event) { function closeSearch(event) {
if (selected && event.target != input_search && event.target != svgIcon.svgElement) { if (
selected &&
event.target != input_search &&
event.target != svgIcon.svgElement
) {
showSearch(false); showSearch(false);
selected = false; selected = false;
} }
@ -62,7 +68,7 @@
function showSearch(isEntering) { function showSearch(isEntering) {
//transform: ; //transform: ;
if (isEntering) { if (isEntering) {
search_box.style.display = 'block'; search_box.style.display = "block";
} }
const ovalue = isEntering ? [0, 1] : [1, 0]; const ovalue = isEntering ? [0, 1] : [1, 0];
@ -70,16 +76,16 @@
targets: { opacity: 0 }, targets: { opacity: 0 },
opacity: ovalue, opacity: ovalue,
duration: 200, duration: 200,
easing: 'easeInOutQuad', easing: "easeInOutQuad",
update: function (anim) { update: function (anim) {
search_box.style.opacity = `${anim.animations[0].currentValue}`; search_box.style.opacity = `${anim.animations[0].currentValue}`;
search_box.style.transform = `translateX(-1rem) translateY(${anim.animations[0].currentValue}rem)`; search_box.style.transform = `translateX(-1rem) translateY(${anim.animations[0].currentValue}rem)`;
}, },
complete: function () { complete: function () {
if (!isEntering) { if (!isEntering) {
search_box.style.display = 'none'; search_box.style.display = "none";
}
} }
},
}); });
} }
</script> </script>

89
src/lib/components/social.svelte
View file

@ -1,53 +1,53 @@
<script> <script>
import '$lib/css/base.css'; import "$lib/css/base.css";
import '$lib/css/social.css'; import "$lib/css/social.css";
import anime from 'animejs'; import anime from "animejs";
import SvgIcon from '@jamescoyle/svelte-icon'; import SvgIcon from "@jamescoyle/svelte-icon";
let social_list = [ let social_list = [
{ {
pic: 'https://cdn.simpleicons.org/instagram', pic: "https://cdn.simpleicons.org/instagram",
color: 'E4405F', color: "E4405F",
alt: 'Instagram', alt: "Instagram",
name: '@yo.boujon', name: "@yo.boujon",
link: 'https://www.instagram.com/yoboujon/' link: "https://www.instagram.com/yoboujon/",
}, },
{ {
pic: 'https://cdn.simpleicons.org/github', pic: "https://cdn.simpleicons.org/github",
color: '181717', color: "181717",
alt: 'Github', alt: "Github",
name: 'yoboujon', name: "yoboujon",
link: 'https://github.com/yoboujon' link: "https://github.com/yoboujon",
}, },
{ {
pic: 'https://cdn.simpleicons.org/youtube', pic: "https://cdn.simpleicons.org/youtube",
color: 'FF0000', color: "FF0000",
alt: 'Youtube', alt: "Youtube",
name: '@yoboujon', name: "@yoboujon",
link: 'https://www.youtube.com/@yoboujon' link: "https://www.youtube.com/@yoboujon",
}, },
{ {
pic: 'https://img.icons8.com/?size=200&id=8808&format=png&color=0A66C2', pic: "https://img.icons8.com/?size=200&id=8808&format=png&color=0A66C2",
color: '0A66C2', color: "0A66C2",
alt: 'Linkedin', alt: "Linkedin",
name: 'Yohan Boujon', name: "Yohan Boujon",
link: 'https://www.linkedin.com/in/yohan-boujon-a08511202/' link: "https://www.linkedin.com/in/yohan-boujon-a08511202/",
}, },
{ {
icon: 'M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z', icon: "M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z",
color: 'AD62AA', color: "AD62AA",
alt: 'Etheryo', alt: "Etheryo",
name: 'Etheryo', name: "Etheryo",
link: 'https://www.etheryo.fr' link: "https://www.etheryo.fr",
}, },
{ {
icon: 'M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z', icon: "M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z",
color: 'AD62AA', color: "AD62AA",
alt: 'Saoul Bonmonsieur', alt: "Saoul Bonmonsieur",
name: 'Saoul Bonmonsieur', name: "Saoul Bonmonsieur",
link: 'https://saoulbonmonsieur.etheryo.fr/' link: "https://saoulbonmonsieur.etheryo.fr/",
} },
]; ];
let div_social; let div_social;
@ -55,7 +55,7 @@
r: 15, r: 15,
g: 11, g: 11,
b: 17, b: 17,
a: 0.1 a: 0.1,
}; };
let oldcolor = resetcolor; let oldcolor = resetcolor;
@ -66,32 +66,37 @@
r: parseInt(color.substring(0, 2), 16), r: parseInt(color.substring(0, 2), 16),
g: parseInt(color.substring(2, 4), 16), g: parseInt(color.substring(2, 4), 16),
b: parseInt(color.substring(4, 6), 16), b: parseInt(color.substring(4, 6), 16),
a: 0.2 a: 0.2,
}; };
} }
anime({ anime({
targets: { red: oldcolor.r, green: oldcolor.g, blue: oldcolor.b, alpha: oldcolor.a }, targets: {
red: oldcolor.r,
green: oldcolor.g,
blue: oldcolor.b,
alpha: oldcolor.a,
},
red: [oldcolor.r, newcolor.r], red: [oldcolor.r, newcolor.r],
green: [oldcolor.g, newcolor.g], green: [oldcolor.g, newcolor.g],
blue: [oldcolor.b, newcolor.b], blue: [oldcolor.b, newcolor.b],
alpha: [oldcolor.a, newcolor.a], alpha: [oldcolor.a, newcolor.a],
duration: 500, duration: 500,
easing: 'easeInOutQuad', easing: "easeInOutQuad",
update: function (anim) { update: function (anim) {
div_social.style.backgroundImage = `linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(${anim.animations[0].currentValue},${anim.animations[1].currentValue},${anim.animations[2].currentValue},${anim.animations[3].currentValue}) 100%)`; div_social.style.backgroundImage = `linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(${anim.animations[0].currentValue},${anim.animations[1].currentValue},${anim.animations[2].currentValue},${anim.animations[3].currentValue}) 100%)`;
oldcolor = { oldcolor = {
r: anim.animations[0].currentValue, r: anim.animations[0].currentValue,
g: anim.animations[1].currentValue, g: anim.animations[1].currentValue,
b: anim.animations[2].currentValue, b: anim.animations[2].currentValue,
a: anim.animations[3].currentValue a: anim.animations[3].currentValue,
}; };
} },
}); });
} }
function openWindow(url) { function openWindow(url) {
window.open(url, '_blank'); window.open(url, "_blank");
} }
</script> </script>

20
src/lib/components/svg-icon-custom.svelte
View file

@ -4,23 +4,23 @@
const types = { const types = {
mdi: { mdi: {
size: 24, size: 24,
viewbox: '0 0 24 24' viewbox: "0 0 24 24",
}, },
'simple-icons': { "simple-icons": {
size: 24, size: 24,
viewbox: '0 0 24 24' viewbox: "0 0 24 24",
}, },
default: { default: {
size: 0, size: 0,
viewbox: '0 0 0 0' viewbox: "0 0 0 0",
} },
}; };
export let type = null; export let type = null;
export let path; export let path;
export let size = null; export let size = null;
export let viewbox = null; export let viewbox = null;
export let flip = 'none'; export let flip = "none";
export let rotate = 0; export let rotate = 0;
export let padding = 0; export let padding = 0;
@ -28,9 +28,9 @@
$: defaults = types[type] || types.default; $: defaults = types[type] || types.default;
$: sizeValue = size || defaults.size; $: sizeValue = size || defaults.size;
$: viewboxValue = viewbox || defaults.viewbox; $: viewboxValue = viewbox || defaults.viewbox;
$: sx = ['both', 'horizontal'].includes(flip) ? '-1' : '1'; $: sx = ["both", "horizontal"].includes(flip) ? "-1" : "1";
$: sy = ['both', 'vertical'].includes(flip) ? '-1' : '1'; $: sy = ["both", "vertical"].includes(flip) ? "-1" : "1";
$: r = isNaN(rotate) ? rotate : rotate + 'deg'; $: r = isNaN(rotate) ? rotate : rotate + "deg";
export let svgElement; // To expose the reference export let svgElement; // To expose the reference
</script> </script>
@ -38,7 +38,7 @@
<svg <svg
bind:this={svgElement} bind:this={svgElement}
width={sizeValue} width={sizeValue}
height=auto height="auto"
viewBox={viewboxValue} viewBox={viewboxValue}
style="--sx: {sx}; --sy: {sy}; --r: {r}; padding: {padding}px" style="--sx: {sx}; --sy: {sy}; --r: {r}; padding: {padding}px"
{...$$restProps} {...$$restProps}

15
src/routes/+page.svelte
View file

@ -1,15 +1,18 @@
<script> <script>
import '$lib/css/base.css'; import "$lib/css/base.css";
import '$lib/css/main.css'; import "$lib/css/main.css";
import Link from '$lib/components/link.svelte'; import Link from "$lib/components/link.svelte";
let img = 'placeholder.png'; let img = "placeholder.png";
</script> </script>
<div class="main-banner"> <div class="main-banner">
<div class="main-banner-gradient" /> <div class="main-banner-gradient"></div>
<div class="main-banner-content"> <div class="main-banner-content">
<div class="flex-row center" style="padding-top: 15rem;padding-bottom: 15rem;"> <div
class="flex-row center"
style="padding-top: 15rem;padding-bottom: 15rem;"
>
<h1>Welcome to Etheryo</h1> <h1>Welcome to Etheryo</h1>
</div> </div>
</div> </div>

2
tsconfig.json
View file

@ -2,7 +2,7 @@
"extends": "./.svelte-kit/tsconfig.json", "extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"allowJs": true, "allowJs": true,
"checkJs": true, "checkJs": false,
"esModuleInterop": true, "esModuleInterop": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"resolveJsonModule": true, "resolveJsonModule": true,