Deploy mathias-aparicio/mathias-aparicio.fr to mathias-aparicio/mathi…

…as-aparicio.fr:gh-pages
mathias-aparicio · Sep 22, 2024 · adc0f38 · adc0f38
commit adc0f38
Show file tree

Hide file tree

Showing 87 changed files with 610 additions and 0 deletions.
diff --git a/404.html b/404.html
@@ -0,0 +1,3 @@
+<!doctype html><html lang=en><head><meta charset=UTF-8><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1.0" name=viewport><title>
+        mathias-aparicio
+    </title><meta content=mathias-aparicio property=og:title><link href=example.com/fonts.css rel=stylesheet><link href=example.com/atom.xml rel=alternate title=mathias-aparicio type=application/atom+xml><link href=example.com/theme/light.css rel=stylesheet><link href=example.com/theme/dark.css id=darkModeStyle rel=stylesheet><script src=example.com/js/themetoggle.js></script><script>setTheme(getSavedTheme())</script><link href=example.com/main.css media=screen rel=stylesheet><body><div class=content><header><div class=main><a href=example.com>mathias-aparicio</a><div class=socials><a class=social href=https://github.com/mathias-aparicio rel=me> <img alt=github src=example.com/social_icons/github.svg> </a><a class=social href=https://linkedin.com/in/mathias-aparicio/ rel=me> <img alt=linkedin src=example.com/social_icons/linkedin.svg> </a></div></div><nav><a href=example.com/posts style=margin-left:.5em>/posts</a><a href=example.com/projects style=margin-left:.5em>/projects</a><a href=example.com/about style=margin-left:.5em>/about</a> |<a onclick="toggleTheme(); event.preventDefault();" href=# id=dark-mode-toggle> <img alt=Light id=sun-icon src=example.com/feather/sun.svg style=filter:invert(1)> <img alt=Dark id=moon-icon src=example.com/feather/moon.svg> </a><script>updateItemToggleTheme()</script></nav></header><main class=centered-header><div class=page-header>404<span class=primary-color style=font-size:1.6em>.</span></div><span>Page not found :(</span></main></div>
diff --git a/about/index.html b/about/index.html
@@ -0,0 +1,4 @@
+<!doctype html><html lang=en><head><meta charset=UTF-8><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1.0" name=viewport><title>
+         About
+
+    </title><meta content=About property=og:title><link href=example.com/fonts.css rel=stylesheet><link href=example.com/atom.xml rel=alternate title=mathias-aparicio type=application/atom+xml><link href=example.com/theme/light.css rel=stylesheet><link href=example.com/theme/dark.css id=darkModeStyle rel=stylesheet><script src=example.com/js/themetoggle.js></script><script>setTheme(getSavedTheme())</script><link href=example.com/main.css media=screen rel=stylesheet><body><div class=content><header><div class=main><a href=example.com>mathias-aparicio</a><div class=socials><a class=social href=https://github.com/mathias-aparicio rel=me> <img alt=github src=example.com/social_icons/github.svg> </a><a class=social href=https://linkedin.com/in/mathias-aparicio/ rel=me> <img alt=linkedin src=example.com/social_icons/linkedin.svg> </a></div></div><nav><a href=example.com/posts style=margin-left:.5em>/posts</a><a href=example.com/projects style=margin-left:.5em>/projects</a><a href=example.com/about style=margin-left:.5em>/about</a> |<a onclick="toggleTheme(); event.preventDefault();" href=# id=dark-mode-toggle> <img alt=Light id=sun-icon src=example.com/feather/sun.svg style=filter:invert(1)> <img alt=Dark id=moon-icon src=example.com/feather/moon.svg> </a><script>updateItemToggleTheme()</script></nav></header><main><article><div class=title><div class=page-header>About<span class=primary-color style=font-size:1.6em>.</span></div><div class=meta></div></div><section class=body><p>Hello my name is Mathias APARICIO and I am a french enginner student in computer student at <a href=https://enseirb-matmeca.bordeaux-inp.fr/fr>Enseirb-matmeca</a>.<p>I am currently working toward building solid skills in rust.<h1 id=contact>Contact</h1><p>Github: <a href=https://github.com/mathias-aparicio>https://github.com/mathias-aparicio</a> <br> LinkedIn: <a href=https://www.linkedin.com/in/mathias-aparicio/>https://www.linkedin.com/in/mathias-aparicio/</a> <br></section></article></main></div>
diff --git a/elasticlunr.min.js b/elasticlunr.min.js
diff --git a/feather/moon.svg b/feather/moon.svg
diff --git a/feather/sun.svg b/feather/sun.svg
diff --git a/fonts.css b/fonts.css
diff --git a/fonts/.gitkeep b/fonts/.gitkeep
diff --git a/fonts/JetbrainsMono/JetBrainsMono-Bold.ttf b/fonts/JetbrainsMono/JetBrainsMono-Bold.ttf
diff --git a/fonts/JetbrainsMono/JetBrainsMono-BoldItalic.ttf b/fonts/JetbrainsMono/JetBrainsMono-BoldItalic.ttf
diff --git a/fonts/JetbrainsMono/JetBrainsMono-ExtraBold.ttf b/fonts/JetbrainsMono/JetBrainsMono-ExtraBold.ttf
diff --git a/fonts/JetbrainsMono/JetBrainsMono-ExtraBoldItalic.ttf b/fonts/JetbrainsMono/JetBrainsMono-ExtraBoldItalic.ttf
diff --git a/fonts/JetbrainsMono/JetBrainsMono-ExtraLight.ttf b/fonts/JetbrainsMono/JetBrainsMono-ExtraLight.ttf
diff --git a/fonts/JetbrainsMono/JetBrainsMono-ExtraLightItalic.ttf b/fonts/JetbrainsMono/JetBrainsMono-ExtraLightItalic.ttf
diff --git a/fonts/JetbrainsMono/JetBrainsMono-Italic.ttf b/fonts/JetbrainsMono/JetBrainsMono-Italic.ttf
diff --git a/fonts/JetbrainsMono/JetBrainsMono-Light.ttf b/fonts/JetbrainsMono/JetBrainsMono-Light.ttf
diff --git a/fonts/JetbrainsMono/JetBrainsMono-LightItalic.ttf b/fonts/JetbrainsMono/JetBrainsMono-LightItalic.ttf
diff --git a/fonts/JetbrainsMono/JetBrainsMono-Medium.ttf b/fonts/JetbrainsMono/JetBrainsMono-Medium.ttf
diff --git a/fonts/JetbrainsMono/JetBrainsMono-MediumItalic.ttf b/fonts/JetbrainsMono/JetBrainsMono-MediumItalic.ttf
diff --git a/fonts/JetbrainsMono/JetBrainsMono-Regular.ttf b/fonts/JetbrainsMono/JetBrainsMono-Regular.ttf
diff --git a/fonts/JetbrainsMono/JetBrainsMono-SemiBold.ttf b/fonts/JetbrainsMono/JetBrainsMono-SemiBold.ttf
diff --git a/fonts/JetbrainsMono/JetBrainsMono-SemiBoldItalic.ttf b/fonts/JetbrainsMono/JetBrainsMono-SemiBoldItalic.ttf
diff --git a/fonts/JetbrainsMono/JetBrainsMono-Thin.ttf b/fonts/JetbrainsMono/JetBrainsMono-Thin.ttf
diff --git a/fonts/JetbrainsMono/JetBrainsMono-ThinItalic.ttf b/fonts/JetbrainsMono/JetBrainsMono-ThinItalic.ttf
diff --git a/fonts/SpaceGrotesk/SpaceGrotesk-Bold.ttf b/fonts/SpaceGrotesk/SpaceGrotesk-Bold.ttf
diff --git a/fonts/SpaceGrotesk/SpaceGrotesk-Light.ttf b/fonts/SpaceGrotesk/SpaceGrotesk-Light.ttf
diff --git a/fonts/SpaceGrotesk/SpaceGrotesk-Medium.ttf b/fonts/SpaceGrotesk/SpaceGrotesk-Medium.ttf
diff --git a/fonts/SpaceGrotesk/SpaceGrotesk-Regular.ttf b/fonts/SpaceGrotesk/SpaceGrotesk-Regular.ttf
diff --git a/fonts/SpaceGrotesk/SpaceGrotesk-SemiBold.ttf b/fonts/SpaceGrotesk/SpaceGrotesk-SemiBold.ttf
diff --git a/index.html b/index.html
@@ -0,0 +1,3 @@
+<!doctype html><html lang=en><head><meta charset=UTF-8><meta content="IE=edge" http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1.0" name=viewport><title>
+        mathias-aparicio
+    </title><meta content=mathias-aparicio property=og:title><link href=example.com/fonts.css rel=stylesheet><link href=example.com/atom.xml rel=alternate title=mathias-aparicio type=application/atom+xml><link href=example.com/theme/light.css rel=stylesheet><link href=example.com/theme/dark.css id=darkModeStyle rel=stylesheet><script src=example.com/js/themetoggle.js></script><script>setTheme(getSavedTheme())</script><link href=example.com/main.css media=screen rel=stylesheet><body><div class=content><header><div class=main><a href=example.com>mathias-aparicio</a><div class=socials><a class=social href=https://github.com/mathias-aparicio rel=me> <img alt=github src=example.com/social_icons/github.svg> </a><a class=social href=https://linkedin.com/in/mathias-aparicio/ rel=me> <img alt=linkedin src=example.com/social_icons/linkedin.svg> </a></div></div><nav><a href=example.com/posts style=margin-left:.5em>/posts</a><a href=example.com/projects style=margin-left:.5em>/projects</a><a href=example.com/about style=margin-left:.5em>/about</a> |<a onclick="toggleTheme(); event.preventDefault();" href=# id=dark-mode-toggle> <img alt=Light id=sun-icon src=example.com/feather/sun.svg style=filter:invert(1)> <img alt=Dark id=moon-icon src=example.com/feather/moon.svg> </a><script>updateItemToggleTheme()</script></nav></header><div class=page-header>Posts<span class=primary-color style=font-size:1.6em>.</span></div><main class=list><ul><li class=list-item><section><div class=post-header><time>2024-09-22</time><div><h1 class=title><a href=example.com/posts/tailwind-deno/>Import custom fonts with Tailwind CSS fresh</a></h1><div class=meta><div class=description></div></div></div></div></section></ul></main></div>
diff --git a/js/codeblock.js b/js/codeblock.js
@@ -0,0 +1,103 @@
+const successIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-check-lg" viewBox="0 0 16 16">
+            <path d="M13.485 1.85a.5.5 0 0 1 1.065.02.75.75 0 0 1-.02 1.065L5.82 12.78a.75.75 0 0 1-1.106.02L1.476 9.346a.75.75 0 1 1 1.05-1.07l2.74 2.742L12.44 2.92a.75.75 0 0 1 1.045-.07z"/>
+        </svg>`;
+const errorIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-x-lg" viewBox="0 0 16 16">
+            <path d="M2.293 2.293a1 1 0 0 1 1.414 0L8 6.586l4.293-4.293a1 1 0 0 1 1.414 1.414L9.414 8l4.293 4.293a1 1 0 0 1-1.414 1.414L8 9.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L6.586 8 2.293 3.707a1 1 0 0 1 0-1.414z"/>
+        </svg>`;
+const copyIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-clipboard" viewBox="0 0 16 16">
+                <path d="M10 1.5a.5.5 0 0 1 .5-.5h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h2a.5.5 0 0 1 .5.5V3h3V1.5zM6.5 3V2h3v1h-3zm4 0v1h2a1 1 0 0 0-1-1h-2V3zm-5 0H3a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H5.5V3z"/>
+            </svg>`;
+
+// Function to change icons after copying
+const changeIcon = (button, isSuccess) => {
+    button.innerHTML = isSuccess ? successIcon : errorIcon;
+    setTimeout(() => {
+        button.innerHTML = copyIcon; // Reset to copy icon
+    }, 2000);
+};
+
+// Function to get code text from tables, skipping line numbers
+const getCodeFromTable = (codeBlock) => {
+    return [...codeBlock.querySelectorAll('tr')]
+        .map(row => row.querySelector('td:last-child')?.innerText ?? '')
+        .join('');
+};
+
+// Function to get code text from non-table blocks
+const getNonTableCode = (codeBlock) => {
+    return codeBlock.textContent.trim();
+};
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Select all `pre` elements containing `code`
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            const pre = entry.target.parentNode;
+            const clipboardBtn = pre.querySelector('.clipboard-button');
+            const label = pre.querySelector('.code-label');
+
+            if (clipboardBtn) {
+                // Adjust the position of the clipboard button when the `code` is not fully visible
+                clipboardBtn.style.right = entry.isIntersecting ? '5px' : `-${entry.boundingClientRect.right - pre.clientWidth + 5}px`;
+            }
+
+            if (label) {
+                // Adjust the position of the label similarly
+                label.style.right = entry.isIntersecting ? '0px' : `-${entry.boundingClientRect.right - pre.clientWidth}px`;
+            }
+        });
+    }, {
+        root: null, // observing relative to viewport
+        rootMargin: '0px',
+        threshold: 1.0 // Adjust this to control when the callback fires
+    });
+
+    document.querySelectorAll('pre code').forEach(codeBlock => {
+        const pre = codeBlock.parentNode;
+        pre.style.position = 'relative'; // Ensure parent `pre` can contain absolute elements
+
+        // Create and append the copy button
+        const copyBtn = document.createElement('button');
+        copyBtn.className = 'clipboard-button';
+        copyBtn.innerHTML = copyIcon;
+        copyBtn.setAttribute('aria-label', 'Copy code to clipboard');
+        pre.appendChild(copyBtn);
+
+        // Attach event listener to copy button
+        copyBtn.addEventListener('click', async () => {
+            // Determine if the code is in a table or not
+            const isTable = codeBlock.querySelector('table');
+            const codeToCopy = isTable ? getCodeFromTable(codeBlock) : getNonTableCode(codeBlock);
+            try {
+                await navigator.clipboard.writeText(codeToCopy);
+                changeIcon(copyBtn, true); // Show success icon
+            } catch (error) {
+                console.error('Failed to copy text: ', error);
+                changeIcon(copyBtn, false); // Show error icon
+            }
+        });
+
+        const langClass = codeBlock.className.match(/language-(\w+)/);
+        const lang = langClass ? langClass[1] : 'default';
+
+        // Create and append the label
+        const label = document.createElement('span');
+        label.className = 'code-label label-' + lang; // Use the specific language class
+        label.textContent = lang.toUpperCase(); // Display the language as label
+        pre.appendChild(label);
+
+        let ticking = false;
+        pre.addEventListener('scroll', () => {
+            if (!ticking) {
+                window.requestAnimationFrame(() => {
+                    copyBtn.style.right = `-${pre.scrollLeft}px`;
+                    label.style.right = `-${pre.scrollLeft}px`;
+                    ticking = false;
+                });
+                ticking = true;
+            }
+        });
+
+    });
+});