refactor code

This commit is contained in:
kankys committed 2026-05-15 23:22:58 +02:00
1 parent 9a38077576
commit b13422d4af
13 files changed
+11934

No files matched your search

+822
View File
@@ -0,0 +1,822 @@
<!doctype html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>📰 Novinky | ApolloNvim</title>
<!-- Meta description & SEO -->
<meta
name="description"
content="Changelog a novinky ApolloNvim – sledujte vývoj distribuce, nové verze a plány do budoucna."
/>
<meta name="author" content="Lukáš Kaňka" />
<meta
name="keywords"
content="ApolloNvim, Neovim, changelog, novinky, aktualizace, verze, vývoj"
/>
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://apollo-nvim.lukan.cz/novinky.html"
/>
<meta property="og:title" content="📰 Novinky | ApolloNvim" />
<meta
property="og:description"
content="Changelog a novinky ApolloNvim – sledujte vývoj distribuce a nové verze."
/>
<meta property="og:image" content="../img/apollonvim.jpg" />
<meta property="og:locale" content="cs_CZ" />
<meta property="og:site_name" content="ApolloNvim" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="📰 Novinky | ApolloNvim" />
<meta
name="twitter:description"
content="Changelog a novinky ApolloNvim – sledujte vývoj distribuce."
/>
<meta name="twitter:image" content="../img/apollonvim.jpg" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<!-- Stylesheets -->
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/animations.css" />
<!-- Canonical -->
<link
rel="canonical"
href="https://apollo-nvim.lukan.cz/novinky.html"
/>
<style>
/* ── Timeline ── */
.timeline-wrap {
max-width: 760px;
margin: 0 auto;
}
.timeline {
position: relative;
padding-left: 2.5rem;
list-style: none;
margin: 0;
padding-top: 0.5rem;
}
.timeline::before {
content: "";
position: absolute;
left: 0.55rem;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(
to bottom,
var(--purple),
var(--cyan),
transparent
);
border-radius: 99px;
}
.timeline__item {
position: relative;
margin-bottom: 3rem;
}
.timeline__item::before {
content: "";
position: absolute;
left: -2.05rem;
top: 0.35rem;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--purple);
border: 3px solid var(--bg);
box-shadow: 0 0 0 2px var(--purple);
transition:
box-shadow var(--transition),
background var(--transition);
}
.timeline__item:hover::before {
background: var(--cyan);
box-shadow:
0 0 0 2px var(--cyan),
0 0 12px rgba(6, 182, 212, 0.4);
}
.timeline__item--current::before {
background: var(--green, #22c55e);
box-shadow:
0 0 0 2px var(--green, #22c55e),
0 0 14px rgba(34, 197, 94, 0.5);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%,
100% {
box-shadow:
0 0 0 2px var(--green, #22c55e),
0 0 8px rgba(34, 197, 94, 0.4);
}
50% {
box-shadow:
0 0 0 2px var(--green, #22c55e),
0 0 20px rgba(34, 197, 94, 0.7);
}
}
.timeline__header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 0.85rem;
}
.timeline__version {
font-family: var(--font-mono);
font-size: 1.15rem;
font-weight: 700;
color: var(--text-primary);
}
.timeline__date {
font-size: 0.8rem;
color: var(--text-muted);
margin-left: auto;
}
.timeline__card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.5rem 1.75rem;
transition:
border-color var(--transition),
box-shadow var(--transition);
}
.timeline__item:hover .timeline__card {
border-color: var(--purple);
box-shadow: 0 4px 24px rgba(139, 92, 246, 0.1);
}
.timeline__card ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.timeline__card li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.9rem;
color: var(--text-secondary, var(--text-muted));
line-height: 1.5;
}
.timeline__card li::before {
content: "▸";
color: var(--purple);
flex-shrink: 0;
margin-top: 0.05rem;
}
/* ── Roadmap cards ── */
.roadmap-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.25rem;
margin-top: 3rem;
}
.roadmap-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
transition:
transform var(--transition),
border-color var(--transition),
box-shadow var(--transition);
}
.roadmap-card:hover {
transform: translateY(-3px);
border-color: var(--cyan);
box-shadow: 0 6px 24px rgba(6, 182, 212, 0.12);
}
.roadmap-card__icon {
font-size: 1.75rem;
line-height: 1;
}
.roadmap-card__title {
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.roadmap-card__desc {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.55;
margin: 0;
}
.roadmap-card__status {
margin-top: auto;
padding-top: 0.5rem;
}
/* ── CTA / Odber ── */
.news-cta {
text-align: center;
padding: 4rem 2rem;
background: linear-gradient(
135deg,
rgba(139, 92, 246, 0.08) 0%,
rgba(6, 182, 212, 0.05) 100%
);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.news-cta__title {
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.75rem;
}
.news-cta__subtitle {
font-size: 1rem;
color: var(--text-muted);
margin-bottom: 2rem;
}
/* Animate on scroll */
.animate-on-scroll {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.55s ease,
transform 0.55s ease;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 640px) {
.roadmap-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 420px) {
.roadmap-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- ===================== NAVBAR ===================== -->
<header class="navbar" id="navbar">
<nav class="navbar__inner" aria-label="Hlavní navigace">
<a
href="../index.html"
class="navbar__logo"
aria-label="ApolloNvim – Domů"
>🚀 <span>ApolloNvim</span></a
>
<ul class="navbar__links" id="nav-links" role="list">
<li><a href="../index.html">Domů</a></li>
<li><a href="./instalace.html">Instalace</a></li>
<li><a href="./pluginy.html">Pluginy</a></li>
<li><a href="./tutorialy.html">Tutoriály</a></li>
<li>
<a
href="./novinky.html"
class="active"
aria-current="page"
>Novinky</a
>
</li>
<li><a href="./zkratky.html">Zkratky</a></li>
</ul>
<button
id="hamburger"
class="navbar__hamburger"
aria-label="Otevřít menu"
aria-expanded="false"
aria-controls="mobile-menu"
>
<span></span><span></span><span></span>
</button>
</nav>
<div class="navbar__mobile" id="mobile-menu" hidden>
<ul role="list">
<li><a href="../index.html">Domů</a></li>
<li><a href="./instalace.html">Instalace</a></li>
<li><a href="./pluginy.html">Pluginy</a></li>
<li><a href="./tutorialy.html">Tutoriály</a></li>
<li><a href="./novinky.html" class="active">Novinky</a></li>
<li><a href="./zkratky.html">Zkratky</a></li>
</ul>
</div>
</header>
<main id="main-content">
<!-- ===================== HERO ===================== -->
<section
class="hero"
aria-labelledby="hero-title"
style="min-height: 42vh"
>
<canvas id="particles-canvas" aria-hidden="true"></canvas>
<div
class="hero__content"
style="padding-top: 6rem; padding-bottom: 4rem"
>
<div class="hero__badge">
<span>📰 Changelog & Aktualizace</span>
</div>
<h1 id="hero-title" class="hero__title">Novinky</h1>
<p class="hero__subtitle">Changelog a novinky ApolloNvim</p>
</div>
</section>
<!-- ===================== CHANGELOG TIMELINE ===================== -->
<section class="section" aria-labelledby="changelog-title">
<div class="container">
<header class="section-title section-title--center">
<h2 id="changelog-title">📋 Changelog</h2>
<p class="section__subtitle section__subtitle--center">
Historie verzí a provedených změn
</p>
<div class="section-title__line"></div>
</header>
<div class="timeline-wrap" style="margin-top: 3.5rem">
<ol class="timeline" aria-label="Changelog ApolloNvim">
<!-- v25.05 – Aktuální -->
<li
class="timeline__item timeline__item--current animate-on-scroll"
>
<div class="timeline__header">
<span class="timeline__version"
>v26.05</span
>
<span class="badge badge--green"
>Aktuální</span
>
<time
class="timeline__date"
datetime="2026-05"
>Květen 2026</time
>
</div>
<div class="timeline__card">
<ul>
<li>Nový redesign webu ApolloNvim</li>
<li>
Vícestrankový web s HTML/CSS/JS
strukturou
</li>
<li>
Temný vesmírný design inspirovaný
Dracula tématem
</li>
<li>
Stránky: Domů, Instalace, Pluginy,
Tutoriály, Novinky, Zkratky
</li>
<li>
Particle systém s animovanými
hvězdičkami
</li>
<li>
Kopírovatelné terminálové bloky,
responzivní design
</li>
</ul>
</div>
</li>
<!-- v25.04 -->
<li class="timeline__item animate-on-scroll">
<div class="timeline__header">
<span class="timeline__version"
>v25.04</span
>
<span class="badge badge--purple"
>Duben 2025</span
>
<time
class="timeline__date"
datetime="2025-04"
>Duben 2025</time
>
</div>
<div class="timeline__card">
<ul>
<li>
Verze 25.04 – aktuální stabilní
vydání
</li>
</ul>
</div>
</li>
<!-- v25.02 -->
<li class="timeline__item animate-on-scroll">
<div class="timeline__header">
<span class="timeline__version"
>v25.02</span
>
<span class="badge badge--purple"
>Únor 2025</span
>
<time
class="timeline__date"
datetime="2025-02"
>Únor 2025</time
>
</div>
<div class="timeline__card">
<ul>
<li>Nový web ApolloNvim</li>
<li>Lokalizace do angličtiny</li>
<li>
Vylepšená instalace pro jednodušší
onboarding
</li>
<li>Podpora pouze pro Linux a Mac</li>
</ul>
</div>
</li>
<!-- v25.01 -->
<li class="timeline__item animate-on-scroll">
<div class="timeline__header">
<span class="timeline__version"
>v25.01</span
>
<span class="badge badge--purple"
>Leden 2025</span
>
<time
class="timeline__date"
datetime="2025-01"
>Leden 2025</time
>
</div>
<div class="timeline__card">
<ul>
<li>
Nová instalace s přepracovaným
procesem nastavení
</li>
<li>
Nový website – moderní design a
lepší přehlednost
</li>
<li>
Nový obrázek ApolloNvim –
aktualizovaná vizuální identita
</li>
</ul>
</div>
</li>
<!-- v24.10 -->
<li class="timeline__item animate-on-scroll">
<div class="timeline__header">
<span class="timeline__version"
>v24.10</span
>
<span class="badge badge--purple"
>Říjen 2024</span
>
<time
class="timeline__date"
datetime="2024-10"
>Říjen 2024</time
>
</div>
<div class="timeline__card">
<ul>
<li>
Podpora PHP – LSP a snippety pro PHP
vývojáře
</li>
<li>
Automatická instalace pluginů po
přidání do <code>init.vim</code>
</li>
<li>
Rainbow Vim – plugin pro barevné
závorky pro lepší čitelnost kódu
</li>
<li>
Gitgutter – plugin pro správu a
zobrazení git změn v editoru
</li>
</ul>
</div>
</li>
</ol>
</div>
<!-- /.timeline-wrap -->
</div>
<!-- /.container -->
</section>
<!-- ===================== ROADMAP ===================== -->
<section
class="section section--alt"
aria-labelledby="roadmap-title"
>
<div class="container">
<header class="section-title section-title--center">
<h2 id="roadmap-title">🗺️ Plán vývoje</h2>
<p class="section__subtitle section__subtitle--center">
Co připravujeme pro budoucí verze ApolloNvim
</p>
<div class="section-title__line"></div>
</header>
<div class="roadmap-grid">
<div class="roadmap-card animate-on-scroll">
<div class="roadmap-card__icon" aria-hidden="true">
🎨
</div>
<h3 class="roadmap-card__title">
Nová uvítací obrazovka
</h3>
<p class="roadmap-card__desc">
Vlastní dashboard při startu – rychlé otevření
posledních souborů, zkratky a statistiky.
</p>
<div class="roadmap-card__status">
<span class="badge badge--yellow"
>Plánováno</span
>
</div>
</div>
<div class="roadmap-card animate-on-scroll">
<div class="roadmap-card__icon" aria-hidden="true">
🔌
</div>
<h3 class="roadmap-card__title">Nové pluginy</h3>
<p class="roadmap-card__desc">
Rozšiřování knihovny pluginů o nejlepší nástroje
z ekosystému Neovim komunity.
</p>
<div class="roadmap-card__status">
<span class="badge badge--yellow"
>Plánováno</span
>
</div>
</div>
<div class="roadmap-card animate-on-scroll">
<div class="roadmap-card__icon" aria-hidden="true">
📚
</div>
<h3 class="roadmap-card__title">
Návody k pluginům
</h3>
<p class="roadmap-card__desc">
Podrobné tutoriály pro každý zahrnutý plugin s
příklady a tipy pro efektivní použití.
</p>
<div class="roadmap-card__status">
<span class="badge badge--cyan">Probíhá</span>
</div>
</div>
<div class="roadmap-card animate-on-scroll">
<div class="roadmap-card__icon" aria-hidden="true">
⚡
</div>
<h3 class="roadmap-card__title">
Instalátor přes link z Git
</h3>
<p class="roadmap-card__desc">
Jednořádkový instalátor přímo z Codeberg – bez
klonování, bez komplikací.
</p>
<div class="roadmap-card__status">
<span class="badge badge--yellow"
>Plánováno</span
>
</div>
</div>
</div>
<!-- /.roadmap-grid -->
</div>
<!-- /.container -->
</section>
<!-- ===================== CTA / ODBER ===================== -->
<section class="section" aria-labelledby="news-cta-title">
<div class="container">
<div class="news-cta animate-on-scroll">
<p
style="font-size: 2.5rem; margin-bottom: 1rem"
aria-hidden="true"
>
✈️
</p>
<h2 id="news-cta-title" class="news-cta__title">
Sledujte novinky na Telegramu
</h2>
<p class="news-cta__subtitle">
Buďte první, kdo se dozví o nových verzích,
pluginech a tutoriálech ApolloNvim.
</p>
<a
href="https://t.me/apollonvim"
class="btn-primary"
target="_blank"
rel="noopener noreferrer"
aria-label="Připojit se na Telegram ApolloNvim (otevře se v novém okně)"
>
<span>✈️</span> Připojit se na Telegram
</a>
</div>
</div>
</section>
</main>
<!-- ===================== FOOTER ===================== -->
<footer class="footer" role="contentinfo">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<a
href="../index.html"
class="footer__logo"
aria-label="ApolloNvim – Domů"
>
🚀 ApolloNvim
</a>
<p class="footer__tagline">
Rychlý, lehký a plně konfigurovatelný Neovim pro
Front-End vývojáře.
</p>
<p
class="footer__love"
aria-label="Vytvořeno s láskou a klávesnicí"
>
Made with ❤️ and ⌨️
</p>
</div>
<nav class="footer__nav" aria-label="Patička navigace">
<h4 class="footer__nav-title">Navigace</h4>
<ul class="footer__nav-list" role="list">
<li>
<a href="../index.html" class="footer__link"
>Domů</a
>
</li>
<li>
<a href="./instalace.html" class="footer__link"
>Instalace</a
>
</li>
<li>
<a href="./pluginy.html" class="footer__link"
>Pluginy</a
>
</li>
<li>
<a href="./tutorialy.html" class="footer__link"
>Tutoriály</a
>
</li>
<li>
<a href="./novinky.html" class="footer__link"
>Novinky</a
>
</li>
<li>
<a href="./zkratky.html" class="footer__link"
>Zkratky</a
>
</li>
</ul>
</nav>
<div class="footer__links">
<h4 class="footer__nav-title">Externe</h4>
<ul class="footer__nav-list" role="list">
<li>
<a
href="https://t.me/apollonvim"
class="footer__link"
target="_blank"
rel="noopener noreferrer"
aria-label="Telegram (otevře se v novém okně)"
>
✈️ Telegram
</a>
</li>
<li>
<a
href="https://codeberg.org/ApolloNvim/ApolloNvim2025"
class="footer__link"
target="_blank"
rel="noopener noreferrer"
aria-label="Codeberg repozitář (otevře se v novém okně)"
>
🏔️ Codeberg
</a>
</li>
<li>
<a
href="https://lukaskanka.cz/"
class="footer__link"
target="_blank"
rel="noopener noreferrer"
aria-label="Web autora (otevře se v novém okně)"
>
🧑‍💻 Web autora
</a>
</li>
</ul>
</div>
</div>
<div class="footer__bottom">
<p class="footer__copy">
Copyright &copy; 2024 &ndash; 2025 🚀 ApolloNvim / Lukáš
Kaňka
</p>
<p class="footer__version">
<span class="badge badge--version">v25.04</span>
</p>
</div>
</div>
</footer>
<!-- ===================== SCRIPTS ===================== -->
<script src="../js/particles.js"></script>
<script src="../js/main.js"></script>
<script>
// Animate on scroll observer
(function () {
const elements =
document.querySelectorAll(".animate-on-scroll");
if (!elements.length) return;
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.1, rootMargin: "0px 0px -40px 0px" },
);
elements.forEach((el, i) => {
el.style.transitionDelay = i * 100 + "ms";
observer.observe(el);
});
})();
</script>
</body>
</html>