// Main App — routing, theme, tweaks panel
const { useState: useStateA, useEffect: useEffectA } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "refined",
"mode": "auto",
"hero": "flow",
"density": "normal",
"lang": "cs"
}/*EDITMODE-END*/;
function App() {
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Routing
const [route, setRoute] = useStateA(() => {
try {
const hash = window.location.hash.replace(/^#/, "");
if (hash) {
const [name, ...rest] = hash.split("/");
if (name === "post" && rest[0]) return { name: "post", slug: rest[0] };
if (["home", "automation", "services", "blog", "contact"].includes(name)) {
return { name, anchor: rest[0] };
}
}
} catch (e) {}
return { name: "home" };
});
// Lang
const [lang, setLang] = useStateA(tweaks.lang || "cs");
useEffectA(() => { if (tweaks.lang !== lang) setTweak("lang", lang); }, [lang]);
// sync route to hash + scroll
useEffectA(() => {
let h = `#${route.name}`;
if (route.name === "post" && route.slug) h += `/${route.slug}`;
if (route.anchor) h += `/${route.anchor}`;
if (window.location.hash !== h) {
try { history.replaceState(null, "", h); } catch (e) {}
}
if (!route.anchor) window.scrollTo({ top: 0 });
}, [route]);
// apply theme + mode to
// "auto" mode picks dark/light by combining the OS preference and time of day:
// - OS says dark → dark (highest priority)
// - OS says light → still dark if local hour ∈ [19, 7) (evening/night)
// - otherwise → light
// Subscribes to both prefers-color-scheme changes AND a 5-minute timer so
// the switch flips automatically without a refresh as evening rolls in.
useEffectA(() => {
document.documentElement.setAttribute("data-theme", tweaks.theme || "refined");
document.documentElement.setAttribute("data-density", tweaks.density || "normal");
const resolveMode = () => {
const m = tweaks.mode || "auto";
if (m === "light" || m === "dark") return m;
// auto
const mq = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
if (mq && mq.matches) return "dark";
const h = new Date().getHours();
if (h >= 19 || h < 7) return "dark";
return "light";
};
const apply = () => document.documentElement.setAttribute("data-mode", resolveMode());
apply();
if ((tweaks.mode || "auto") !== "auto") return;
const mq = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
const onChange = () => apply();
mq && mq.addEventListener && mq.addEventListener("change", onChange);
const timer = setInterval(apply, 5 * 60 * 1000); // re-check every 5 min for time-of-day rollover
return () => {
mq && mq.removeEventListener && mq.removeEventListener("change", onChange);
clearInterval(timer);
};
}, [tweaks.theme, tweaks.mode, tweaks.density]);
// Sync + document title to current language
useEffectA(() => {
document.documentElement.setAttribute("lang", lang);
const titles = {
cs: "Automatizace IT infrastruktury na Red Hat Ansible | WeAutomate",
en: "IT Infrastructure Automation on Red Hat Ansible | WeAutomate",
de: "IT-Infrastruktur-Automatisierung auf Red Hat Ansible | WeAutomate",
};
const descs = {
cs: "Nejsme body-shop — přebíráme odpovědnost za výsledky, ne za fakturované hodiny. Enterprise automatizace na Red Hat AAP. Audit, nasazení, dlouhodobý provoz.",
en: "Not a body-shop — we take responsibility for results, not billable hours. Enterprise automation on Red Hat AAP. Audit, deployment, operations.",
de: "Kein Body-Shop — wir übernehmen Verantwortung für Ergebnisse, nicht für abrechenbare Stunden. Enterprise-Automatisierung auf Red Hat AAP.",
};
const sectionLabels = {
home: { cs: "Úvod", en: "Intro", de: "Einführung" },
automation: { cs: "Automatizace", en: "Automation", de: "Automatisierung" },
services: { cs: "Doplňkové služby", en: "Supporting services", de: "Ergänzende Dienste" },
contact: { cs: "Kontakt", en: "Contact", de: "Kontakt" },
blog: { cs: "Blog", en: "Blog", de: "Blog" },
post: { cs: "Článek", en: "Article", de: "Artikel" },
};
const sec = sectionLabels[route.name]?.[lang];
document.title = sec && route.name !== "home" ? `${sec} · ${titles[lang]}` : titles[lang];
const desc = document.querySelector('meta[name="description"]');
if (desc) desc.setAttribute("content", descs[lang]);
// Per-route og:image — blog uses a branded blog cover, everything else the home cover.
const isBlog = route.name === "blog" || route.name === "post";
const ogImg = isBlog
? "https://www.weautomate.cz/assets/og-blog.png"
: "https://www.weautomate.cz/assets/og-home.png";
[
['meta[property="og:image"]', "content", ogImg],
['meta[name="twitter:image"]', "content", ogImg],
].forEach(([sel, attr, val]) => {
const el = document.querySelector(sel);
if (el) el.setAttribute(attr, val);
});
}, [lang, route.name]);
// Apply per-route Breadcrumb JSON-LD for sub-pages so Google can render
// proper breadcrumb trails in SERP (richer click-through than plain URL).
useEffectA(() => {
const baseUrl = "https://www.weautomate.cz/";
const homeLabel = { cs: "Domů", en: "Home", de: "Start" }[lang];
const routeLabel = {
home: null,
automation: { cs: "Automatizace", en: "Automation", de: "Automatisierung" }[lang],
services: { cs: "Služby", en: "Services", de: "Dienste" }[lang],
blog: { cs: "Blog", en: "Blog", de: "Blog" }[lang],
post: { cs: "Článek", en: "Article", de: "Artikel" }[lang],
contact: { cs: "Kontakt", en: "Contact", de: "Kontakt" }[lang],
gdpr: "GDPR",
}[route.name];
const sid = "__breadcrumb-jsonld";
document.getElementById(sid)?.remove();
if (!routeLabel) return;
const ld = document.createElement("script");
ld.id = sid;
ld.type = "application/ld+json";
ld.textContent = JSON.stringify({
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", position: 1, name: homeLabel, item: baseUrl },
{ "@type": "ListItem", position: 2, name: routeLabel, item: baseUrl + route.name },
],
});
document.head.appendChild(ld);
}, [route.name, lang]);
let page = null;
if (route.name === "home") page = ;
else if (route.name === "automation") page = ;
else if (route.name === "services") page = ;
else if (route.name === "contact") page = ;
else if (route.name === "blog") page = ;
else if (route.name === "post") page = ;
else if (route.name === "gdpr") page = ;
else page = ;
// Expose router for cookie banner's "Privacy policy" link
useEffectA(() => { window.__navigateTo = setRoute; }, []);
return (
);
}
ReactDOM.createRoot(document.getElementById("root")).render();