khrysse/gitRepository
1
0
Fork 0
mirror of https://github.com/khrysse/khrysse.github.io.git synced 2025-06-27 06:31:56 +00:00
Code Issues

Update logs & noscript

Browse Source
This commit is contained in:
Kryscau 2025-06-09 15:40:03 +02:00
parent 657500d244
commit f86407e747
6 changed files with 129 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app.html
View File

@ -35,18 +35,20 @@
%sveltekit.head%
</head>
<body class="bg-gh-bg text-gh-text min-h-screen" data-sveltekit-preload-data="hover">
<noscript>
<noscript class="no-js">
<div class="noscript-message">
<h1>Oups!</h1>
<h1>Oups! JavaScript is disabled</h1>
<p>
This application requires JavaScript to be enabled. Please enable JavaScript in your
browser settings and refresh the page. <br />
This application needs JavaScript to function properly. <br />
Please enable it in your browser settings and reload the page.
<br />
<a href="https://www.enable-javascript.com/" target="_blank" rel="noopener noreferrer">
How to enable JavaScript?
</a>
</p>
</div>
</noscript>
<div style="display: contents">%sveltekit.body%</div>
<div class="with-js" style="display: none">%sveltekit.body%</div>
<script src="%sveltekit.assets%/assets/js/if.js"></script>
</body>
</html>

15
src/routes/+error.svelte
View File

@ -2,13 +2,13 @@
import { page } from '$app/state';
</script>
<div class="not-found">
<h1>{page.error.message}</h1>
<div class="error">
<h1>{page.error?.message}</h1>
<a href="/" class="btn-home" aria-label="Retour à l'accueil">Back to homepage</a>
</div>
<style>
.not-found {
.error {
height: 80vh;
display: flex;
flex-direction: column;
@ -19,19 +19,13 @@
padding: 1rem;
}
.not-found h1 {
.error h1 {
font-size: 6rem;
font-weight: 900;
margin-bottom: 1rem;
color: var(--gh-accent, #ff4500);
}
.not-found p {
font-size: 1.5rem;
margin-bottom: 2rem;
color: var(--gh-text-secondary, #666);
}
.btn-home {
background-color: var(--gh-accent-emphasis, #ff6347);
color: white;
@ -43,7 +37,6 @@
transition: background-color 0.3s ease;
text-decoration: none;
}
.btn-home:hover {
background-color: var(--gh-accent, #ff4500);
}

20
src/routes/+page.svelte
View File

@ -24,9 +24,9 @@
const USERNAME = PUBLIC_GITHUB_USERNAME;
try {
// Appel public pour récupérer les infos du user
const userResponse = await fetch(`${BASE_URL}/users/${USERNAME}`);
if (!userResponse.ok) throw new Error('Error recovering user data');
if (!userResponse.ok)
throw new Error(`[getDatas] ❌ Error retrieving GitHub user data of ${USERNAME}`);
const userData = await userResponse.json();
user.nickname = userData.name || userData.login[0].toUpperCase() + userData.login.slice(1);
@ -42,9 +42,14 @@
user.blog = userData.blog;
user.company = userData.company;
// Appel public pour récupérer les repos
console.log(
`[getDatas] ✅ The user data of ${user.nickname || USERNAME} has been retrieved and transformed`,
user
);
const reposResponse = await fetch(`${BASE_URL}/users/${USERNAME}/repos?per_page=100`);
if (!reposResponse.ok) throw new Error('Error retrieving repositories');
if (!reposResponse.ok)
throw new Error(`[getDatas] ❌ Error retrieving GitHub repository data of ${USERNAME}`);
const reposData = await reposResponse.json();
repositories = reposData.filter(
@ -64,9 +69,12 @@
}
);
console.log(repositories);
console.log(
`[getDatas] ✅ The repositories of ${user.nickname || USERNAME} have been retrieved`,
repositories
);
} catch (error) {
console.error('Error retrieving GitHub data:', error);
console.error(`[getDatas] ❌ Error retrieving GitHub data of ${USERNAME}`, error);
}
});
</script>

36
src/routes/repository/[username]/[repo]/+page.svelte
View File

@ -41,18 +41,33 @@
try {
const repoRes = await fetch(`${PUBLIC_GITHUB_API_URL}/repos/${username}/${repo}`);
if (!repoRes.ok) throw new Error('Unable to retrieve info from repo');
if (!repoRes.ok)
throw new Error(`[getRepos] ❌ Unable to retrieve info from repo ${username}/${repo}`);
const repoData = await repoRes.json();
console.log(
`[getRepos] ✅ The repo data of ${username}/${repo} has been retrieved`,
repoData
);
const langRes = await fetch(`${PUBLIC_GITHUB_API_URL}/repos/${username}/${repo}/languages`);
if (!langRes.ok) throw new Error('Unable to retrieve languages');
if (!langRes.ok)
throw new Error(`[getRepos] ❌ Unable to retrieve languages of ${username}/${repo}`);
const languagesData = await langRes.json();
console.log(
`[getRepos] ✅ The languages data of ${username}/${repo} has been retrieved`,
languagesData
);
const contRes = await fetch(
`${PUBLIC_GITHUB_API_URL}/repos/${username}/${repo}/contributors`
);
if (!contRes.ok) throw new Error('Unable to retrieve contributors');
if (!contRes.ok)
throw new Error(`[getRepos] ❌ Unable to retrieve contributors of ${username}/${repo}`);
const contributorsData = await contRes.json();
console.log(
`[getRepos] ✅ The contributors data of ${username}/${repo} has been retrieved`,
contributorsData
);
// Calcul pourcentages langages
const total = Object.values(languagesData).reduce((a, b) => a + b, 0);
@ -108,17 +123,18 @@
<h1 class="gh-text text-2xl font-bold sm:text-3xl">
{dataRepo?.repository?.full_name}
</h1>
<span
class="gh-success mt-3 inline-block rounded-full border px-2 py-1 text-xs"
style="background-color: rgba(63, 185, 80, 0.2); border-color: rgba(63, 185, 80, 0.3)"
>
{dataRepo?.repository?.visibility?.toUpperCase()}
</span>
{#if dataRepo?.repository?.archived}
<span
class="mt-3 ml-2 inline-block rounded-full border bg-orange-700/25 px-2 py-1 text-xs text-orange-500"
>
ARCHIVED
{dataRepo?.repository?.visibility?.toUpperCase()} ARCHIVED
</span>
{:else}
<span
class="gh-success mt-3 inline-block rounded-full border px-2 py-1 text-xs"
style="background-color: rgba(63, 185, 80, 0.2); border-color: rgba(63, 185, 80, 0.3)"
>
{dataRepo?.repository?.visibility?.toUpperCase()}
</span>
{/if}
</div>

35
static/assets/css/noscript.css
View File

@ -1,17 +1,40 @@
.noscript-message {
text-align: center;
position: fixed;
inset: 0;
background-color: #0e0e10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
z-index: 9999;
}
.noscript-message h1 {
font-size: 2rem;
margin-bottom: 1rem;
font-size: 2.5rem;
color: #ff4f4f;
margin-bottom: 1rem;
text-shadow: 0 0 8px #ff4f4f;
}
.noscript-message p {
font-size: 1rem;
font-size: 1.1rem;
color: #dddddd;
max-width: 600px;
line-height: 1.6;
}
.noscript-message a {
color: #3b82f6;
text-decoration: none;
display: inline-block;
margin-top: 1rem;
color: #00c6ff;
text-decoration: none;
font-weight: bold;
transition: color 0.2s;
}
.noscript-message a:hover {
color: #00ffe0;
text-shadow: 0 0 4px #00ffe0;
}

49
static/assets/js/if.js Normal file
View File

@ -0,0 +1,49 @@
const urlParams = new URLSearchParams(window.location.search);
const onLocalhost = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
const devNoJS = onLocalhost && urlParams.has('nojs');
// Default: JS is considered disabled if script does not run
window.jsEnabled = false;
document.addEventListener('DOMContentLoaded', () => {
const noJS = document.querySelector('.no-js');
const withJS = document.querySelector('.with-js');
if (devNoJS) {
console.log('[ifJS] 🛠️ DevMode ON (simulating no-JS locally)');
// Hide JS-dependent content
if (withJS) withJS.style.display = 'none';
// Preview: inject <noscript> from <head> (e.g. CSS fallback)
const noscriptHead = document.querySelector('head > noscript');
if (noscriptHead) {
const headNoscriptDiv = document.createElement('div');
headNoscriptDiv.className = 'dev-noscript-head-preview';
headNoscriptDiv.innerHTML = noscriptHead.textContent.trim();
document.head.append(headNoscriptDiv);
console.log('[ifJS] Injected <noscript> from <head>');
}
// Preview: inject <noscript.no-js> from body (HTML fallback)
const noscriptBody = document.querySelector('body > noscript.no-js');
if (noscriptBody) {
const bodyNoscriptDiv = document.createElement('div');
bodyNoscriptDiv.className = 'dev-noscript-body-preview';
bodyNoscriptDiv.innerHTML = noscriptBody.textContent.trim();
document.body.prepend(bodyNoscriptDiv);
console.log('[ifJS] Injected <noscript.no-js> from <body>');
}
// Simulated JS-disabled state
window.jsEnabled = false;
return;
}
// Normal case: JS is enabled
if (noJS) noJS.style.display = 'none';
if (withJS) withJS.style.display = 'contents';
window.jsEnabled = true;
console.log('[ifJS] ✅ JS is enabled in the browser');
});