From 4c674edd9842e6ae2cf1d997104baffef2fb9341 Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Mon, 29 Apr 2024 05:04:30 +0200
Subject: [PATCH] add blog extras and actions

---
 src/lib/components/actions/reply.svelte     |  3 +
 src/lib/components/actions/share.svelte     | 12 ++++
 src/lib/components/actions/translate.svelte |  0
 src/lib/components/extra/Scene.svelte       | 64 ++++++++++++++++++
 src/lib/components/extra/github.svelte      | 75 +++++++++++++++++++++
 src/lib/components/extra/projects.svelte    | 44 ++++++++++++
 6 files changed, 198 insertions(+)
 create mode 100644 src/lib/components/actions/reply.svelte
 create mode 100644 src/lib/components/actions/share.svelte
 create mode 100644 src/lib/components/actions/translate.svelte
 create mode 100644 src/lib/components/extra/Scene.svelte
 create mode 100644 src/lib/components/extra/github.svelte
 create mode 100644 src/lib/components/extra/projects.svelte

diff --git a/src/lib/components/actions/reply.svelte b/src/lib/components/actions/reply.svelte
new file mode 100644
index 0000000..3303b25
--- /dev/null
+++ b/src/lib/components/actions/reply.svelte
@@ -0,0 +1,3 @@
+<a href="#post-comment" class="btn btn-lg btn-circle btn-ghost bg-base-100 shadow-lg hover:shadow-xl">
+  <span class="i-heroicons-outline-chat-alt-2" />
+</a>
diff --git a/src/lib/components/actions/share.svelte b/src/lib/components/actions/share.svelte
new file mode 100644
index 0000000..a01c41c
--- /dev/null
+++ b/src/lib/components/actions/share.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { site } from '$lib/config/site'
+  export let post: Urara.Post
+</script>
+
+<a
+  href={`https://www.addtoany.com/share#url=${site.protocol + site.domain + post.path}&title=${encodeURI(
+    post.title ?? post.path.slice(1)
+  )}`}
+  class="btn btn-lg btn-circle btn-ghost bg-base-100 shadow-lg hover:shadow-xl">
+  <span class="i-heroicons-outline-share" />
+</a>
diff --git a/src/lib/components/actions/translate.svelte b/src/lib/components/actions/translate.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/extra/Scene.svelte b/src/lib/components/extra/Scene.svelte
new file mode 100644
index 0000000..f2b049e
--- /dev/null
+++ b/src/lib/components/extra/Scene.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { tweened } from 'svelte/motion';
+	import { quadInOut } from 'svelte/easing';
+	import { T } from '@threlte/core';
+	import { Align, Grid, OrbitControls } from '@threlte/extras';
+	import type { Contributions } from '$lib/types/contributions';
+
+	let contributions: Contributions[] = [];
+
+	onMount(async () => {
+		const response = await fetch('/api/matthieu42morin/2023');
+		contributions = await response.json();
+		console.log(contributions);
+	});
+
+	const colorMap = ['#0e0e0e', '#00442a', '#006d35', '#00a648', '#00d35c'];
+
+	// function to normalize the height of the cubes
+	function normalize(count: number, base = 4, offset = 6) {
+		switch (true) {
+			case count === 0:
+				return base;
+			case count > 40:
+				return count;
+			default:
+				return count * (base * offset);
+		}
+	}
+
+	// tweened value to animate the Z scale of the cubes
+	const scaleZ = tweened(0, { duration: 2000, easing: quadInOut });
+
+	onMount(() => {
+		$scaleZ = 1;
+	});
+</script>
+
+<T.PerspectiveCamera makeDefault position={[10, 100, 600]} fov={50}>
+	<OrbitControls enableDamping autoRotate />
+</T.PerspectiveCamera>
+
+<T.AmbientLight color="#fff" intensity={0.4} />
+<T.DirectionalLight position={[0, 200, 200]} intensity={2} color="#fff" />
+<T.DirectionalLight position={[0, 200, -200]} intensity={2} color="#fff" />
+
+<Align auto>
+	<Grid infiniteGrid sectionColor="#4a4b4a" sectionSize={40} cellSize={40} fadeDistance={800} />
+	{#if Array.isArray(contributions) && contributions.length > 0}
+		{#each contributions as row, i}
+			{#each row as contribution, j}
+				{#if contribution !== null}
+					{@const z = normalize(contribution.level)}
+					<T.Group position={[0, 0, 12 * i]} scale.z={$scaleZ}>
+						<T.Mesh position={[12 * j, z / 2, 0]}>
+							<T.BoxGeometry args={[10, z, 10]} />
+							<T.MeshStandardMaterial color={colorMap[contribution.level]} />
+						</T.Mesh>
+					</T.Group>
+				{/if}
+			{/each}
+		{/each}
+	{/if}
+</Align>
diff --git a/src/lib/components/extra/github.svelte b/src/lib/components/extra/github.svelte
new file mode 100644
index 0000000..f483f9f
--- /dev/null
+++ b/src/lib/components/extra/github.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  export let user: string
+  export let repo: string
+
+  let info: {
+    html_url: string
+    description: string
+    homepage?: string
+    owner: { avatar_url: string }
+    stargazers_count: any
+    license?: { key?: any }
+  }
+
+  onMount(async () => {
+    info = await fetch(`https://api.github.com/repos/${user}/${repo}`).then(res => res.json())
+  })
+
+</script>
+
+<div class="card bg-base-100 !bg-base-200 my-4 ">
+  <div class="p-6">
+    {#if info}
+      <div class="flex">
+        <div class="flex-initial pr-4">
+          <div class="card-title mb-6 !text-3xl font-medium">
+            <a rel="noopener noreferrer external" target="_blank" class="no-underline" href={info.html_url}>
+              {user}/<span class="font-semibold">{repo}</span>
+            </a>
+          </div>
+          <p class="prose">
+            {info.description}
+            <br />
+            <a rel="noopener noreferrer external" target="_blank" href={info.homepage}>{info.homepage}</a>
+          </p>
+        </div>
+        <img class="w-20 h-20 mt-0 ml-auto mb-auto rounded-xl flex-initial" alt="owner_avatar" src={info.owner.avatar_url} />
+      </div>
+      <div class="card-actions -ml-2">
+        <button class="btn btn-sm btn-ghost">
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 16 16"
+            version="1.1"
+            data-view-component="true"
+            class="inline-block w-4 h-4 mr-2 fill-current">
+            <path
+            fill-rule="evenodd"
+            d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z" />
+          </svg>
+          {info.stargazers_count}
+        </button>
+        {#if info.license}
+          <a class="btn btn-sm btn-ghost" href="https://choosealicense.com/licenses/{info.license.key}">
+            <svg
+            aria-hidden="true"
+            viewBox="0 0 16 16"
+            version="1.1"
+            data-view-component="true"
+            class="inline-block w-4 h-4 mr-2 fill-current">
+            <path
+              fill-rule="evenodd"
+              d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z" />
+            </svg>
+            {info.license.key}
+          </a>
+        {/if}
+        <button class="btn btn-sm btn-circle btn-ghost ml-auto">
+          <span class="i-simple-icons-github" />
+        </button>
+      </div>
+    {/if}
+  </div>
+</div>
diff --git a/src/lib/components/extra/projects.svelte b/src/lib/components/extra/projects.svelte
new file mode 100644
index 0000000..e8695ec
--- /dev/null
+++ b/src/lib/components/extra/projects.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { Project } from '$lib/config/projects'
+  import Footer from '$lib/components/main/footer.svelte'
+  export let item: unknown
+  let project = item as unknown as Project
+  let tags = project.tags
+</script>
+
+{#if project.id === 'footer'}
+  <Footer rounded={true} class="max-w-4xl mx-auto p-4 md:p-8" />
+{:else}
+  <a
+    id={project.id}
+    href={project.link}
+    class="card mx-auto max-w-4xl bg-base-100 shadow-xl transition-shadow mb-7 h-card u-url hover:shadow-2xl">
+    <div class="absolute text-5xl font-bold opacity-5 rotate-6 leading-tight top-2 right-0">
+      {project.feature}
+    </div>
+    <div class="card-body p-4">
+      <div class="flex flex-col md:flex-row items-start gap-4">
+        <div class="mb-auto aspect-video w-full max-w-full shrink-0 md:max-w-xs">
+          <img class="rounded-md  " src={project.img} alt={project.description} />
+        </div>
+        <div class="card-title flex-1 flex-col items-start gap-4">
+          <div>
+            <h2 class="p-name text-left text-2xl mb-2">{project.name}</h2>
+            <div class="mb-3 text-base font-normal">
+                {#if tags}
+                    {#each tags as tag}
+                        <span class="btn btn-sm btn-ghost normal-case border-dotted border-base-content/20 border-2 my-1 mr-1">
+                        {tag}
+                        </span>
+                    {/each}
+                {/if}
+            </div>
+          </div>
+          <p class="text-left text-base font-normal opacity-70">
+            {@html project.description}
+          </p>
+        </div>
+      </div>
+    </div>
+  </a>
+{/if}