reorganise source

src/lib/components/Calendar.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  export let date: string;
+  export let title: string;
+  export let description: string;
+  export let link: string = "";
+
+  let realDate = date.split(" ");
+</script>
+
+<div class="flex flex-row">
+  <div
+    class="w-42 block rounded-t overflow-hidden bg-white text-center min-w-max"
+  >
+    <div class="bg-red-800 text-white py-1">{realDate[1]}</div>
+    <div class="pt-1 border-l border-r">
+      <span class="text-4xl font-bold">{realDate[0]}</span>
+    </div>
+    <div
+      class="pb-2 px-2 border-l border-r border-b rounded-b flex justify-between"
+    >
+      <span class="text-xs font-bold">{realDate[2]}</span>
+    </div>
+  </div>
+  <!-- Info -->
+  <div class="flex-col">
+    <h3 class="pl-4 flex">{title}</h3>
+    <p class="pl-4">{description}</p>
+    <a class="mt-4 ml-4 btn btn-primary btn btn-xs text-right" href={link}
+      >Lien</a
+    >
+  </div>
+</div>

src/lib/components/Info.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { marked } from "marked";
+  export let info: string;
+  export let markdown: boolean;
+  let htmlContent = "";
+
+  onMount(() => {
+    if (markdown) {
+      htmlContent = marked(info);
+    } else {
+      htmlContent = info;
+    }
+  });
+</script>
+
+<div class="alert bg-base-300 dark:bg-base-300">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    class="stroke-current shrink-0 w-6 h-6"
+    ><path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+    /></svg
+  >
+  <span class="text-2xl">{@html info}</span>
+</div>

src/lib/components/Portrait.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  export let image: string;
+  export let name: string;
+  export let mail: string;
+  export let site: string;
+  export let description: string;
+</script>
+
+<div
+  class="mx-2 w-72 bg-base-300 dark:bg-base-300 border border-gray-200 rounded-lg shadow dark:border-gray-700"
+>
+  <div class="flex justify-end px-4 pt-4" />
+  <div class="flex flex-col items-center pb-10">
+    <img
+      class="w-24 h-24 mb-3 rounded-full shadow-lg"
+      src={image}
+      alt="Portrait"
+    />
+    <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">
+      {name}
+    </h5>
+    <span class="text-sm text-gray-500 dark:text-gray-400">{description}</span>
+    <div class="flex mt-4 space-x-3 md:mt-6">
+      <a href={site} class="btn btn-tertiary">Site</a>
+    </div>
+  </div>
+</div>

src/lib/components/Press.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  export let title: string;
+  export let description: string;
+  export let image: string;
+  export let link: string;
+
+  const truncateString = (title: string, length: number) => {
+    return title.length > length ? title.slice(0, length - 3) + "..." : title;
+  };
+</script>
+
+<div
+  class="max-w-sm w-80 h-fit bg-base-300 dark:bg-base-300 border border-gray-300 rounded-lg shadow-md dark:border-gray-700"
+>
+  <a href="#">
+    <img class="rounded-t-lg h-48 w-80 object-cover" src={image} alt="" />
+  </a>
+  <div class="p-5">
+    <a href="#">
+      <h5
+        class="mb-2 text-lg font-bold tracking-tight text-gray-900 dark:text-white"
+      >
+        {truncateString(title, 50)}
+      </h5>
+    </a>
+    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+      {description}
+    </p>
+    <a
+      href={link}
+      class="inline-flex items-center btn btn-primary text-sm font-medium text-center"
+    >
+      En savoir plus
+    </a>
+  </div>
+</div>

src/lib/components/SoftwareCard.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  export let name: string;
+  export let creator: string;
+  export let link: string;
+  export let image: string;
+  export let description: string;
+</script>
+
+<a
+  href={link}
+  class="flex flex-col items-center rounded-lg shadow md:flex-row dark:hover:bg-base-100 hover:bg-base-100 bg-base-300 dark:bg-base-300"
+>
+  <img
+    class="object-cover w-full rounded-t-lg h-96 md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
+    src={image}
+    alt=""
+  />
+  <div class="flex flex-col justify-between p-4 leading-normal">
+    <h5
+      class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
+    >
+      {name}
+    </h5>
+    <p class="text-right">{creator}</p>
+
+    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
+      {description}
+    </p>
+  </div>
+</a>