[e] experimentally add debug information on website
Some checks failed
Build and push docker image / publish (push) Failing after 7s

This commit is contained in:
Sangelo 2024-06-03 20:51:22 +02:00
parent 85aed5bcc3
commit 401edbc6c4
5 changed files with 71 additions and 5 deletions

View file

@ -28,6 +28,13 @@ jobs:
- name: ⬇️ Checkout Repository - name: ⬇️ Checkout Repository
uses: actions/checkout@v4 uses: actions/checkout@v4
- name: Update debug.json with Git info
run: |
git rev-parse HEAD > commit_hash
git describe --tags --abbrev=0 > tag
sed -i "s|\"commit\": \"\"|\"commit\": \"$(cat commit_hash)\"|" static/assets/debug.json
sed -i "s|\"tag\": \"\"|\"tag\": \"$(cat tag)\"|" static/assets/debug.json
- name: 🐋 Build Container - name: 🐋 Build Container
run: | run: |
# extract tag name without the prefix # extract tag name without the prefix

View file

@ -1,8 +1,11 @@
<script lang='ts'> <script lang='ts'>
import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte'; import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
import { smoothScrollTo, handleKeydown, helloWorld } from '$lib/index'; import { smoothScrollTo, handleKeydown, helloWorld } from '$lib/index';
import { onMount } from 'svelte';
helloWorld("ascii", "hi there, curious one. have fun exploring! :D") onMount(() => {
helloWorld("ascii", "hi there, curious one. have fun exploring! :D")
});
</script> </script>
<div id="home" class="section"> <div id="home" class="section">
@ -21,7 +24,7 @@
style="mask-type: alpha" style="mask-type: alpha"
maskUnits="userSpaceOnUse" maskUnits="userSpaceOnUse"
x="27" x="27"
y="0" y="0"t
width="90" width="90"
height="145" height="145"
> >
@ -58,4 +61,4 @@
<style lang="scss"> <style lang="scss">
@import '$styles/index.scss'; @import '$styles/index.scss';
@import '$styles/home.scss'; @import '$styles/home.scss';
</style> </style>

View file

@ -15,8 +15,12 @@
import IconMastodon from 'svelte-material-icons/Mastodon.svelte'; import IconMastodon from 'svelte-material-icons/Mastodon.svelte';
import IconSteam from 'svelte-material-icons/Steam.svelte'; import IconSteam from 'svelte-material-icons/Steam.svelte';
// Variables
let showMore = false; let showMore = false;
let emoji = ''; let emoji = '';
let commitHash = '';
let gitTag = '';
let showDebugInfo = false;
export function changeEmoji() { export function changeEmoji() {
emoji = emojis[Math.floor(Math.random() * emojis.length)]; emoji = emojis[Math.floor(Math.random() * emojis.length)];
@ -33,9 +37,25 @@
} }
} }
onMount(() => { onMount(async () => {
const urlParams = new URLSearchParams(window.location.search);
showDebugInfo = urlParams.has('debug') && urlParams.get('debug') === 'true';
if (showDebugInfo) {
try {
const response = await fetch('/assets/debug.json');
const jsonData = await response.json();
commitHash = jsonData.commit;
gitTag = jsonData.tag;
} catch (error) {
console.error('Error loading data:', error);
// Display an error message or loading state
}
}
changeEmoji(); changeEmoji();
}); });
</script> </script>
<div id="socials" class="section"> <div id="socials" class="section">
@ -266,6 +286,16 @@
<span class="dynamic-icon" on:click={() => openWebsite('/old')} <span class="dynamic-icon" on:click={() => openWebsite('/old')}
>{@html emoji}</span >{@html emoji}</span
> by Sangelo. > by Sangelo.
{#if showDebugInfo}
<div class="debug-ct">
<div class="debug-info">
<p>Commit Hash: </p><pre>{commitHash}</pre>
</div>
<div class="debug-info">
<p>Git Tag: </p><pre>{gitTag}</pre>
</div>
</div>
{/if}
</p> </p>
</footer> </footer>
</div> </div>

View file

@ -178,6 +178,28 @@
font-weight: 800; font-weight: 800;
margin-bottom: -0.7em; margin-bottom: -0.7em;
} }
.debug-ct {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0;
margin: 1em 0 1em 0;
}
.debug-info {
display: flex;
flex-direction: row;
align-items: center;
margin: 0;
padding: 0;
gap: 0.5em;
p, pre {
margin: 0;
}
}
} }
@import './mobile/socials.scss'; @import './mobile/socials.scss';

4
static/assets/debug.json Normal file
View file

@ -0,0 +1,4 @@
{
"commit": "",
"tag": ""
}