351 lines
10 KiB
Text
351 lines
10 KiB
Text
---
|
|
import mePhoto from "../assets/photos/me.png";
|
|
import "../styles/global.css";
|
|
|
|
interface Props {
|
|
title: string;
|
|
description?: string;
|
|
canonicalUrl?: string;
|
|
image?: string;
|
|
type?: "website" | "article";
|
|
publishedTime?: Date;
|
|
modifiedTime?: Date;
|
|
tags?: string[];
|
|
}
|
|
|
|
const {
|
|
title,
|
|
description = "Lorenzo Iovino - Software Engineer based in Sicily. Passionate about technology, remote work, and life balance.",
|
|
canonicalUrl,
|
|
image,
|
|
type = "website",
|
|
publishedTime,
|
|
modifiedTime,
|
|
tags = [],
|
|
} = Astro.props;
|
|
|
|
const siteUrl = "https://lorenzoiovino.com";
|
|
const defaultImage = mePhoto.src;
|
|
const fullImageUrl = image
|
|
? image.startsWith("http")
|
|
? image
|
|
: `${siteUrl}${image}`
|
|
: `${siteUrl}${defaultImage}`;
|
|
const fullCanonicalUrl = canonicalUrl || `${siteUrl}${Astro.url.pathname}`;
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<script is:inline type="text/javascript">
|
|
var _iub = _iub || [];
|
|
_iub.csConfiguration = {
|
|
askConsentAtCookiePolicyUpdate: true,
|
|
cookiePolicyInOtherWindow: true,
|
|
enableFadp: true,
|
|
fadpApplies: true,
|
|
floatingPreferencesButtonDisplay: "anchored-center-right",
|
|
lang: "en",
|
|
perPurposeConsent: true,
|
|
siteId: 3452245,
|
|
whitelabel: false,
|
|
cookiePolicyId: 98687046,
|
|
banner: {
|
|
acceptButtonCaptionColor: "#FFFFFF",
|
|
acceptButtonColor: "#0073CE",
|
|
acceptButtonDisplay: true,
|
|
backgroundColor: "#FFFFFF",
|
|
closeButtonDisplay: false,
|
|
customizeButtonCaptionColor: "#4D4D4D",
|
|
customizeButtonColor: "#DADADA",
|
|
customizeButtonDisplay: true,
|
|
explicitWithdrawal: true,
|
|
listPurposes: true,
|
|
position: "float-bottom-left",
|
|
rejectButtonCaptionColor: "#FFFFFF",
|
|
rejectButtonColor: "#0073CE",
|
|
rejectButtonDisplay: true,
|
|
showPurposesToggles: true,
|
|
showTitle: false,
|
|
textColor: "#000000",
|
|
},
|
|
};
|
|
</script>
|
|
<script
|
|
is:inline
|
|
type="text/javascript"
|
|
src="//cdn.iubenda.com/cs/iubenda_cs.js"
|
|
charset="UTF-8"
|
|
async></script>
|
|
|
|
<script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-SPLW5RY3HD"></script>
|
|
<script is:inline>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag() {
|
|
dataLayer.push(arguments);
|
|
}
|
|
gtag("js", new Date());
|
|
gtag("config", "G-SPLW5RY3HD");
|
|
</script>
|
|
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="description" content={description} />
|
|
<meta
|
|
name="keywords"
|
|
content="Lorenzo Iovino, lorenzoiovino.com, Software Developer, Software Engineer, Sicily, Computer Science, Blog, Personal Page, Remote Work, Full Stack Developer, JavaScript, TypeScript, React, Node.js"
|
|
/>
|
|
<meta
|
|
name="robots"
|
|
content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
|
|
/>
|
|
<meta name="author" content="Lorenzo Iovino" />
|
|
<meta name="language" content="en" />
|
|
<meta name="revisit-after" content="7 days" />
|
|
<meta name="theme-color" content="#1e3a8a" />
|
|
|
|
<link rel="canonical" href={fullCanonicalUrl} />
|
|
|
|
<meta property="og:type" content={type} />
|
|
<meta property="og:url" content={fullCanonicalUrl} />
|
|
<meta property="og:title" content={title} />
|
|
<meta property="og:description" content={description} />
|
|
<meta property="og:image" content={fullImageUrl} />
|
|
<meta property="og:image:width" content="1200" />
|
|
<meta property="og:image:height" content="630" />
|
|
<meta property="og:site_name" content="Lorenzo Iovino" />
|
|
<meta property="og:locale" content="en_US" />
|
|
{
|
|
publishedTime && (
|
|
<meta property="article:published_time" content={publishedTime.toISOString()} />
|
|
)
|
|
}
|
|
{modifiedTime && <meta property="article:modified_time" content={modifiedTime.toISOString()} />}
|
|
{tags.length > 0 && tags.map((tag) => <meta property="article:tag" content={tag} />)}
|
|
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:url" content={fullCanonicalUrl} />
|
|
<meta name="twitter:title" content={title} />
|
|
<meta name="twitter:description" content={description} />
|
|
<meta name="twitter:image" content={fullImageUrl} />
|
|
<meta name="twitter:creator" content="@lorenzoiovino" />
|
|
|
|
<script
|
|
type="application/ld+json"
|
|
set:html={JSON.stringify({
|
|
"@context": "https://schema.org",
|
|
"@type": type === "article" ? "BlogPosting" : "WebSite",
|
|
"@id": fullCanonicalUrl,
|
|
url: fullCanonicalUrl,
|
|
name: title,
|
|
description: description,
|
|
image: fullImageUrl,
|
|
author: {
|
|
"@type": "Person",
|
|
name: "Lorenzo Iovino",
|
|
url: siteUrl,
|
|
sameAs: ["https://github.com/thisloke", "https://www.linkedin.com/in/lorenzoiovino/"],
|
|
},
|
|
publisher: {
|
|
"@type": "Person",
|
|
name: "Lorenzo Iovino",
|
|
logo: {
|
|
"@type": "ImageObject",
|
|
url: `${siteUrl}${defaultImage}`,
|
|
},
|
|
},
|
|
...(publishedTime && { datePublished: publishedTime.toISOString() }),
|
|
...(modifiedTime && { dateModified: modifiedTime.toISOString() }),
|
|
...(type === "article" && tags.length > 0 && { keywords: tags.join(", ") }),
|
|
})}
|
|
/>
|
|
|
|
<link
|
|
rel="alternate"
|
|
type="application/rss+xml"
|
|
title="Lorenzo Iovino >> Blog RSS Feed"
|
|
href="/rss.xml"
|
|
/>
|
|
<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap-index.xml" />
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
rel="preload"
|
|
as="font"
|
|
type="font/woff2"
|
|
href="https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2"
|
|
crossorigin
|
|
/>
|
|
|
|
<style>
|
|
/* Fallback font ottimizzato per ridurre layout shift */
|
|
@font-face {
|
|
font-family: "Inter-fallback";
|
|
font-style: normal;
|
|
font-weight: 400 800;
|
|
src: local("Arial");
|
|
ascent-override: 90%;
|
|
descent-override: 22%;
|
|
line-gap-override: 0%;
|
|
size-adjust: 107%;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 400 800;
|
|
font-display: optional;
|
|
src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2)
|
|
format("woff2");
|
|
unicode-range:
|
|
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
|
|
U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
|
|
U+FFFD;
|
|
}
|
|
|
|
/* Previeni flash of unstyled content */
|
|
body {
|
|
font-family:
|
|
"Inter",
|
|
"Inter-fallback",
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
sans-serif;
|
|
}
|
|
</style>
|
|
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<title>{title}</title>
|
|
</head>
|
|
<body class="bg-white dark:bg-gray-900 min-h-screen transition-colors duration-200">
|
|
<slot />
|
|
|
|
<!-- Dark Mode Suggestion Toast -->
|
|
<div
|
|
id="dark-mode-toast"
|
|
class="hidden fixed bottom-6 right-6 bg-white dark:bg-gray-800 shadow-2xl rounded-xl p-4 max-w-sm border border-gray-200 dark:border-gray-700 z-50 transition-all duration-300 transform translate-y-0"
|
|
style="animation: slideUp 0.3s ease-out;"
|
|
>
|
|
<div class="flex items-start gap-3">
|
|
<div class="flex-shrink-0 mt-0.5">
|
|
<svg
|
|
class="w-5 h-5 text-gray-700 dark:text-gray-300"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">Try Dark Mode?</p>
|
|
<p class="text-xs text-gray-600 dark:text-gray-400 mb-3">
|
|
Experience the site in a beautiful dark theme
|
|
</p>
|
|
<div class="flex gap-2">
|
|
<button
|
|
id="try-dark-mode"
|
|
class="px-3 py-1.5 bg-gray-900 text-white text-xs font-medium rounded-lg hover:bg-gray-800 transition-colors"
|
|
>
|
|
Enable
|
|
</button>
|
|
<button
|
|
id="dismiss-toast"
|
|
class="px-3 py-1.5 bg-gray-100 text-gray-700 text-xs font-medium rounded-lg hover:bg-gray-200 transition-colors"
|
|
>
|
|
Maybe later
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button
|
|
id="close-toast"
|
|
class="flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
|
|
aria-label="Close"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes slideUp {
|
|
from {
|
|
transform: translateY(100px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script is:inline>
|
|
// Dark mode suggestion toast
|
|
(function () {
|
|
const TOAST_DISMISSED_KEY = "darkModeToastDismissed";
|
|
const toast = document.getElementById("dark-mode-toast");
|
|
const tryButton = document.getElementById("try-dark-mode");
|
|
const dismissButton = document.getElementById("dismiss-toast");
|
|
const closeButton = document.getElementById("close-toast");
|
|
|
|
// Check if user has already dismissed the toast
|
|
const hasBeenDismissed = localStorage.getItem(TOAST_DISMISSED_KEY);
|
|
|
|
// Only show toast if user is in light mode and hasn't dismissed it
|
|
setTimeout(() => {
|
|
const isDarkMode = document.documentElement.classList.contains("dark");
|
|
if (!isDarkMode && !hasBeenDismissed && toast) {
|
|
toast.classList.remove("hidden");
|
|
}
|
|
}, 2000);
|
|
|
|
// Enable dark mode
|
|
if (tryButton) {
|
|
tryButton.addEventListener("click", () => {
|
|
document.documentElement.classList.add("dark");
|
|
localStorage.setItem("theme", "dark");
|
|
localStorage.setItem(TOAST_DISMISSED_KEY, "true");
|
|
toast?.classList.add("hidden");
|
|
|
|
// Update theme toggle icons
|
|
const darkIcons = document.querySelectorAll(".theme-toggle-dark-icon");
|
|
const lightIcons = document.querySelectorAll(".theme-toggle-light-icon");
|
|
darkIcons.forEach((icon) => icon.classList.add("hidden"));
|
|
lightIcons.forEach((icon) => icon.classList.remove("hidden"));
|
|
});
|
|
}
|
|
|
|
// Dismiss toast
|
|
if (dismissButton) {
|
|
dismissButton.addEventListener("click", () => {
|
|
localStorage.setItem(TOAST_DISMISSED_KEY, "true");
|
|
toast?.classList.add("hidden");
|
|
});
|
|
}
|
|
|
|
// Close toast
|
|
if (closeButton) {
|
|
closeButton.addEventListener("click", () => {
|
|
localStorage.setItem(TOAST_DISMISSED_KEY, "true");
|
|
toast?.classList.add("hidden");
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|