diff --git a/colors.css b/colors.css new file mode 100644 index 0000000..110b1d7 --- /dev/null +++ b/colors.css @@ -0,0 +1,14 @@ +:root { + --dracula-body-bg: #2a232b; + --dracula-color: #f8f8f2; + --dracula-header-bg: #2a232b; + --dracula-scrollToTopBtn-color: #9fea8a; + --dracula-links-color: #f76b00; + --dracula-nav-bg: #2a232b; + --dracula-nav-links-color: #f76b00; + --dracula-h1-color: #e54472; + --dracula-h2-color: #18f700; + --dracula-solid-bg: #2a232b; + --dracula-solid-color: #f76b00; + --dracula-footer-bg: #2a232b; +} diff --git a/img/config.png b/img/config.png new file mode 100644 index 0000000..325c9f2 Binary files /dev/null and b/img/config.png differ diff --git a/img/fzf.png b/img/fzf.png new file mode 100644 index 0000000..3c0db79 Binary files /dev/null and b/img/fzf.png differ diff --git a/img/home.png b/img/home.png new file mode 100644 index 0000000..ebe4c7c Binary files /dev/null and b/img/home.png differ diff --git a/img/icons8-rocket.gif b/img/icons8-rocket.gif new file mode 100644 index 0000000..c2a91fa Binary files /dev/null and b/img/icons8-rocket.gif differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..19f8b1b --- /dev/null +++ b/index.html @@ -0,0 +1,193 @@ +' + + + + + + + + + + + + + + + + + + ApolloNvim + + + +
+

🚀ApolloNvim

+ + + + +
+
+ + +
+
+

Úvod:

+

+ 👉 Neovim setup pro Front-End vývoj postavený na + Coc. +

+

+ 👉 Výhody Neovim oproti klasickému IDE jsou nesporně ve svobodě + konfigurace, je tisíce možností, jak Váš Neovim může vypadat a + fungovat. Pro Vaši inspiraci a použití vznikl tento projekt 🚀 + ApolloNvim. +

+

+ 👉 Tato distribuce nefunguje jen, že kliknete na tlačítko a + nainstaluje se. Vede Vás k samostatné instalaci pomocí tohoto webu. + Cílem je pochopit, jak Neovim funguje, abyste si sami mohli vše + modifikovat, což i click-on distribucí se nenaučíte. +

+

+ 👉 Toto nastavení je primárně pro vývoj webu. Inspiroval jsem se + pluginy, které jsem využíval v VSCode a Webstorm. +

+

👉 Velký důraz je kladen na rychlost a lehkost.

+

+ 👉 🚀 ApolloNvim Distro je stále ve vývoji a postupně se na něm + pracuje. +

+

+ 👉 Pro nejlepší zážitek s 🚀 ApolloNvim Distro doporučuji používat + multiplexor + Zellij , ale není to samozřejmě + podmínkou. +

+
+
+

Přednosti:

+

+ 👉 Hlavní předností tohoto nastavení jsou podpora: Codeium alternativa + k Copilot zdarma, Prettier, AutoSave, diplňování HTML, CSS, JS a + zkratky k zakomentování a odkomentování kódu. Taky je zde několik + pluginu pro příjemnější práci v Neovim. +

+

+ 👉 S + LSP + v této instalaci využívám + Coc + pro jeho jednoduchost s minimálními zásahy do konfigurace Coc. LSP se + mi velmi osvědčilo v modálním editoru + Helix-editor + má konfigurace + Helixu. +

+

+ 👉 Ty nejlepší témata pro Neovim (ať je nemusíte hledat), je defaultně + nastavéné Dracula. +

+

+ 👉 Téma v Neovim si jednoduše změníte v command line příkazem + colorscheme a tlačítkem Tab se budete přepínat mezi jednotlivými + tématy. +

+
+
+ Homescreen + config.vim + fzf +
+
+

Plán 🚀ApolloNvim:

+

+ 👉 Do budoucna můžete očekávat tyto nové funkce a další novinky: +

+

+ 👉 Web na vlastní doméně. +

+

👉 Instalátor 🚀 ApolloNvim přes odkaz z Gitu.

+

👉 Nová vlastní uvítací obrazovka.

+

👉 Nové pluginy.

+ 👉 Návody k pluginům, jak nastavit a jak s nimi pracovat. +

+

👉 Návody k práci s Neovim.

+
+
+

Otázky a odpovědi:

+

👉 Kolik stojí 🚀 ApolloNvim? -> Nic 🚀 ApolloNvim je zdarma.

+
+
+

Kontakty:

+

+ 👉 🚀 ApolloNvim Telegram skupina +

+

+ 👉 Osobní web autora 🚀 ApolloNvim +

+

+ 👉 Gitea profil +

+

+ 👉 GitHub +

+

+ + Mastodon +

+
+
+
+

Podpora:

+

+ 👉 Pokud jakkoliv chcete podpořit nebo se podílet na obsahu a + funkčnosti 🚀 ApolloNvim, prosím budu rád když mi zde napíšete. +

+

👉 Taky můžete tento projekt podpořit pár Satoshi:

+ Satoshi +
+
+

Další projekty a odkazy:

+

+ 👉 ArchLinux CZ +

+

+ 👉 + Vyhledávač SearXNG CZ +

+

+ 👉 + EndeavourOS Linux +

+

+ 👉 i3 window manager +

+
+ + +
+ + + + +' diff --git a/install.html b/install.html new file mode 100644 index 0000000..553f31f --- /dev/null +++ b/install.html @@ -0,0 +1,303 @@ + + + + + + + + + + + + + + + + + ApolloNvim Instalace + + + +
+

🚀ApolloNvim Instalace

+ + + + +
+
+
+
+

Instalace a nastavení:

+

+ + Vždy se podívej před instalací + nových pluginu, na dokumentaci k + plaginům na Githubu. Předejdeš + tím případným problémům! Pokud + si nejsi jistý postupem nebo ti + není něco jasné, tak raději se + podívej do dokumentace,napiš nám + nebo fórech najdeš odpověď. + +

+ +

+ 👉 Pokud ještě nemáte nainstalujte si + Neovim. +

+

+ 👉 Bude potřeba nainstalovat plug.vim + aby jste mohl/a instalovat rozšíření. +

+

+ 👉 Běžte na tuto + stránku + pod Installation si najděte svůj + operační systém a zkopírujte odkaz pod + ním do svého terminálu. +

+

+ 👉 Nejprve si však zálohujte své + aktuální nastavení Neovim!!! +

+

👉 Linux & Mac:

+
+

/home/user/.config/nvim/init.vim

+
+

Windows:

+
+

~\AppData\Local\nvim

+
+
+
+

Node.js:

+

+ 👉 Doporučuji mít nainstalovaný + Node.js. +

+

+ 👉 Dále si v Node.js nainstalujte + Live-server + příkazem: +

+
+

npm i live-server

+
+

+ 👉 Ve svém projektu budete moci pouštět + svůj index.html příkazem: +

+
+

npx live-server

+
+

+ 👉 Pro správnou funkčnost LSP si + doinstalujte tyto balíčky: +

+ +

+ vscode-html-langserver +

+

+ vscode-css-langserver +

+

+ typescript-language-server +

+

+ emmet-ls +

+

+ eslint +

+

+ vtailwindcss-language-server +

+

+ marksman +

+

+ markdoc-ls +

+
+
+

Neovim:

+

+ 👉 Pro instalaci 🚀 ApolloNvim Distra + stačí stáhnout pouze soubor init.vim s + tohoto + repositáře. +

+

+ 👉 Uložte ho do kořenováho adresáře + ~/.. /nvim dle tvého + OS. + Nezapomeňte na zálohu + stávajících souborů +

+

+ 👉 Neovim pustíte v terminálu příkazem + nvim. +

+

👉 Odklikejte chybová hlášení.

+

+ 👉 V Neovimu zadejte do command line + PlugIns , tím + nainstalujete všechny pluginy. + Restartujte Neovim. +

+

+ 👉 Pokud Vám některý plugin chybí, + můžete ho lehce doinstalovat nebo naopak + odinstalovat pomocí + plug.vim. Více + informací najdete na GitHubu + plug.vim + nebo velmi rád poradím viz. o nás. +

+

+ 👉 Pokud některý plugin nechcete + používat stačí v souboru + init.vim ho + zakomentovat pomocí dvojitých uvozovek + ". +

+

+ 👉 Do command line ještě zadejte Coc + příkaz pro doinstalování zbylých + pluginů: +

+
+

+ CocInstall coc-todolist + coc-tailwindcss coc-json + coc-html-css-support coc-html + coc-emmet coc-xml coc-tsserver + coc-lsp-wl coc-lit-html + coc-htmldjango coc-css + coc-markdown-preview-enhanced + coc-markdownlint +

+
+

+ 👉 A ještě jednou restartujte Neovim a + vše máte připravené. +

+

+ 👉 Tuto konfiguraci používám na Linuxu i + MacOS. Je ozkoušena i na Windows 11. +

+
+ + + +
+ + + diff --git a/manuals.html b/manuals.html new file mode 100644 index 0000000..509be0e --- /dev/null +++ b/manuals.html @@ -0,0 +1,302 @@ + + + + + + + + + + + + + + + + + ApolloNvim Návody + + + +
+

🚀ApolloNvim Návody

+ + + +
+
+ +
+

+ Vždy se podívej před Instalací na + Githubu, na zdroj. Předejdeš tím + případným problémům! Pokud si nejsi + jistý postupem nebo ti není něco jasné, + tak raději se podívej do + dokumntace,napiš nebo fórech najdeš + odpověď. +

+
+ +
+
+

+ Jak nainstalovat vim.plug do Neovim +

+ +

+ Nejprve si však zálohujte své aktuální + nastavení Neovim!!! +

+

Linux & Mac:

+
+

/home/user/.config/nvim/init.vim

+
+

Windows:

+
+

~\AppData\Local\nvim

+
+

+ Běžte na tuto + stránku + pod Installation si najděte svůj + operační systém a zkopírujte odkaz pod + ním do svého terminálu a pomocí Enter + nainstalujete vim.plug. +

+

Na Linuxu a macOS to bude tento příkaz:

+
+

+ sh -c 'curl -fLo + "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim + --create-dirs \ + https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim' +

+
+

+ Pro Windows příkaz najdete na + odkazovaném webu výšše. +

+ + + + + + + +

+ Dále si otevřeme soubor init.vim a pokud + ho nemáme tak si ho vytvoříme zde: +

+

Linux & Mac:

+
+

/home/user/.config/nvim/init.vim

+
+

Windows:

+
+

~\AppData\Local\nvim

+
+

+ A do něj vložíme a následně uložíme + tento kód: +

+
+

+ call plug#begin(has('nvim') ? + stdpath('data') . '/plugged' : + '~/.vim/plugged') +

+
+

+ # Jsem budeš v budoucnu vkládat + pluginy. Začínající PLug a + adresa ke stažení +

+
+

call plug#end()

+
+

+ A příkazem Nvim v terminálu spustíme + Neovim. Pokud vám vyskočí chybové + hlášení jen ho odklikněte. +

+

+ Pomocí Ctrl + : se + dostanete do příkazového řádku a tam + napíšete PlugInstall +

+

+ A restartujeme Neovim. Příkazem + Ctrl + : do príkazového + řádku napíšete q a + restartujeme Neovim. +

+

+ Takto pokaždé když si přidáte do + init.vim pluginy, příkazem + PlugInstall je + nainstalujete a restartujeme Neovim. +

+

+ Zdroj na + GitHub +

+
+ +
+ ï +

+ Jak nainstalovat Codeium do Neovim +

+

+ Codeium + je alternativou k + GitHub Copilot + s tím, že pro jednotlivce je zdarma. + Codeium hodnotím velmi pozitivně a + Copilotu se vyrovná. +

+

+ Instalace pomocí plug.vim je jednoduchá, + stačí pouze upravit svůj + init.vim +

+

Vložíme do něj:

+
+

+ " Free AI codium
+ Plug 'Exafunction/codeium.vim', + { 'branch': 'main' } +

+
+

+ Výsledný init.vim bude + vypadat takto: +

+
+

+ call plug#begin(has('nvim') ? + stdpath('data') . '/plugged' : + '~/.vim/plugged')
+ + " Free AI codium
+ Plug 'Exafunction/codeium.vim', + { 'branch': 'main' }
+ call plug#end() +

+
+

+ A restartujeme Neovim. Příkazem + Ctrl + : do príkazového + řádku napíšete q a + restartujeme Neovim. +

+

+ Po restartu provedeme + PlugInstall a ještě jednou + restartujeme Neovim. +

+

+ Poslední krok bude konfigurace Codeium, + příkazem CodeiumEnable do + command line. +

+

+ Codium vás vyzve k propojení API se + serverem Codium. +

+

A vše by Vám mělo fungovat.

+

+ Zdroj na + GitHub +

+
+ + + +
+ + + diff --git a/plugins.html b/plugins.html new file mode 100644 index 0000000..7565eca --- /dev/null +++ b/plugins.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + ApolloNvim Pluginy + + + +
+

🚀ApolloNvim Pluginy

+ + + + +
+
+ + +
+ +
+

Výběr pluginu v Lite Web 🚀 ApolloNvim Distro 2025

+

+ 👉 + Autoclosetag + nástroj pro uzavírání všech typů závorek a tagů. +

+

+ 👉 + NERDTree + vytvoří ti stromový postranní panel. +

+

+ 👉 + Coc + manager pro instalování doplňků do Neovim. +

+

+ 👉 + Codeium + alternativa k GitHub Copilot, který si případně lehce také můžete + doinstalovat. +

+

+ 👉 + Startify + alternativní uvítací obrazovka s pokaždé jiným IT mottem. Nemusí + fungovat s některými terminály či NERDTree nastaveným spuštěním po + startu. +

+ 👉 + NERD Commenter + plugin pro zakomentování a odkomentování kódu. Zde ho máme nastaven + na + Ctrl + k. +

+

+ 👉 + Wakatime + služba která je schopna měřit kolik času jste trávily při kódování + na pc a i na kterém projektu. Služba se jednoduše propojí přes API. + WakaTime najdeš + zde. +

+

+ 👉 + fzf.vim + asynchronií vyhledávač souboru v projektu. Pro mnohé je toto + vyhledávaní rychlejší než klasické stromové, chce to trochu času. + Ale jak se dostane pod kůži vše ostatní Vám už přijde pomalé. +

+

+ 👉 + Auto-save + plugin pro automatické ukládání vašich souboru. +

+
+
+

Coc extensions pro front-end:

+

👉 coc-todolist

+

👉 coc-tailwindcss

+

👉 coc-json

+

👉 coc-html-css-support

+

👉 coc-html

+

👉 coc-emmet

+

👉 coc-xml

+

👉 coc-tsserver

+

👉 coc-lsp-wl

+

👉 coc-lit-html

+

👉 coc-htmldjango

+

👉 coc-css

+

👉 coc-markdown-preview-enhanced

+

👉 coc-markdownlint

+

👉 coc-eslint

+
+ + +
+ + + + + diff --git a/sablona.txt b/sablona.txt new file mode 100644 index 0000000..7ff2adb --- /dev/null +++ b/sablona.txt @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + ApolloNvim + + + +
+

🚀ApolloNvim

+ + + + +
+
+ + +
+ + + +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..a7ed4a0 --- /dev/null +++ b/script.js @@ -0,0 +1,149 @@ +//Navbar menu +const menuIcon = document.querySelector(".menu-icon"); +const menuList = document.querySelector("nav"); +const hamburgerIcon = document.querySelector(".fa-solid"); + +menuIcon.addEventListener("click", () => { + if (hamburgerIcon.classList[1] === "fa-bars") { + hamburgerIcon.classList.add("fa-xmark"); + hamburgerIcon.classList.remove("fa-bars"); + menuList.style.display = "block"; + } else { + hamburgerIcon.classList.add("fa-bars"); + hamburgerIcon.classList.remove("fa-xmark"); + menuList.style.display = "none"; + } +}); + +// Dark / Light Mode +/* +const body = document.querySelector("body"); +const head = document.querySelector("header"); +const links = document.querySelectorAll("a"); +const nav = document.querySelector(".navigation"); +const h1 = document.querySelector("h1"); +const nadpish2 = document.querySelectorAll("h2"); +const p = document.querySelector("p"); +const solid = document.querySelector(".fa-solid"); +const solid1 = document.querySelector(".menu-icon"); +const footer = document.querySelector("footer"); +const gotop = document.querySelector("#scrollToTopBtn"); +const theme = document.querySelector("#toggleButton"); +const box = document.querySelectorAll(".code-box"); +let isDraculaMode = false; + +// Funkce pro nastavení stylů pro Dracula mód +function setDraculaStyles() { + body.style.backgroundColor = "#2a232b"; + body.style.color = "#f8f8f2"; + head.style.backgroundColor = "#2a232b"; + theme.style.color = "#e7efa7"; + gotop.style.color = "#e7efa7"; + links.forEach((a) => { + a.style.color = "#f76b00"; + }); + nav.style.backgroundColor = "#2a232b"; + h1.style.color = "#e54472"; + nadpish2.forEach((h2) => { + h2.style.color = "#18f700"; + }); + solid.style.backgroundColor = "#2a232b"; + solid.style.color = "#f76b00"; + solid1.style.backgroundColor = "#2a232b"; + footer.style.backgroundColor = "#2a232b"; + //gotop.style.backgroundColor = "#18f700"; + //theme.style.backgroundColor = "#18f700"; +} + +// Funkce pro nastavení stylů pro Light mód; +function setLightStyles() { + body.style.backgroundColor = "#e7efa7"; + body.style.color = "#282a36"; + theme.style.color = "#2a232b"; +gotop.style.color = "#2a232b"; + head.style.backgroundColor = "#e7efa7"; + nav.style.backgroundColor = "#e7efa7"; + solid.style.backgroundColor = "#e7efa7"; + solid1.style.backgroundColor = "#e7efa7"; + footer.style.backgroundColor = "#e7efa7"; + nadpish2.forEach((h2) => { + h2.style.color = "#c627d8"; + }); + //gotop.style.backgroundColor = "#a7e6ef"; + //theme.style.backgroundColor = "#a7e6ef"; + box.forEach((p) => { + p.style.color = "white"; + }); +} + +// Funkce pro přepnutí módu +function toggleMode() { + if (isDraculaMode) { + // Pokud je momentálně v Dracula modu, přepnout na Light mód + setLightStyles(); + isDraculaMode = false; + } else { + // Pokud je momentálně v Light modu, přepnout na Dracula mód + setDraculaStyles(); + isDraculaMode = true; + } +} + +// Funkce na změnu stylů +document.getElementById("toggleButton").addEventListener("click", toggleMode); + +// Nastavení - výchozí styl na Dark +setDraculaStyles(); +isDraculaMode = true; +*/ + +// Photo Gallery -> section (zoom) +const image1 = document.querySelector(".picture"); + +image1.addEventListener("mouseenter", () => { + image1.style.transform = "scale(2.2)"; +}); + +image1.addEventListener("mouseleave", () => { + image1.style.transform = "scale(1)"; +}); + +const image2 = document.querySelector(".picture1"); + +image2.addEventListener("mouseenter", () => { + image2.style.transform = "scale(2.2)"; +}); + +image2.addEventListener("mouseleave", () => { + image2.style.transform = "scale(1)"; +}); + +const image3 = document.querySelector(".picture2"); + +image3.addEventListener("mouseenter", () => { + image3.style.transform = "scale(2.2)"; +}); + +image3.addEventListener("mouseleave", () => { + image3.style.transform = "scale(1)"; +}); + +// Tlačítko go to top +// Zobrazení tlačítka od rolovaní části stránky (víc logické než až na konci) +window.onscroll = function () { + scrollFunction(); +}; + +function scrollFunction() { + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + document.getElementById("scrollToTopBtn").style.display = "block"; + } else { + document.getElementById("scrollToTopBtn").style.display = "none"; + } +} + +// Posunout nahoru, když uživatel klikne na tlačítko +function scrollToTop() { + document.body.scrollTop = 0; // Pro Safari + document.documentElement.scrollTop = 0; // Pro ostatní prohlížeče +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..78b5441 --- /dev/null +++ b/style.css @@ -0,0 +1,239 @@ +@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"); +@import url("colors.css"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + max-width: 1000px; + margin: 0 auto; + font-family: "Ubuntu", sans-serif; + background-color: var(--dracula-body-bg); + color: var(--dracula-color); +} + +/*Header */ + +h1 { + padding-left: 8px; +} + +header { + margin-top: 25px; + display: flex; + align-items: center; + height: 70px; + flex-direction: row; + /*position: fixed;*/ + background-color: var(--dracula-header-bg); +} + +a { + color: var(--dracula-links-color); +} +.title { + padding-top: 25px; +} + +.title { + flex-grow: 1; + display: flex; +} + +/* navigation */ +nav { + margin-right: 30px; +} + +nav li { + display: inline-block; + list-style-type: none; + margin-right: 20px; +} + +nav li a { + text-decoration: none; + color: var(--dracula-nav-links-color); +} + +.navigation { + background-color: var(--dracula-nav-bg); +} + +h1 { + color: var(--dracula-h1-color); +} + +h2 { + color: var(--dracula-h2-color); +} + +.fa-solid { + background-color: var(--dracula-solid-bg); + color: var(--dracula-solid-color); +} +/* navigation icons */ + +.menu-icon { + display: none; + margin-right: 30px; +} + +/*Header small display*/ +@media (max-width: 600px) { + body { + padding: 10px; + } + + header { + position: relative; + } + header nav { + position: absolute; + top: 70px; + width: 100%; + display: none; + } + + .menu-icon { + display: block; + font-size: 23px; + } + + header nav li { + display: block !important; + text-align: center; + margin-top: 10px; + margin-bottom: 10px; + } +} + +/* Sekce */ + +.content { + text-align: center; +} + +#welcome { + padding-top: 50px; + padding-bottom: 50px; +} + +#install { + padding-top: 50px; +} + +#node { + padding-top: 50px; + padding-bottom: 50px; +} + +#apollo { + padding-top: 50px; + padding-bottom: 50px; +} + +#coc { + padding-top: 50px; + padding-bottom: 50px; +} + +#contact { + padding-top: 50px; + padding-bottom: 50px; +} + +#plugin { + padding-top: 50px; +} + +#other { + padding-top: 50px; +} + + +/*Code box*/ +.code-box { + background-color: #353535; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + font-family: monospace; + max-width: 500px; + margin: 0 auto; + margin-top: 10px; + margin-bottom: 10px; +} + +/*Picture settings*/ + +.sat { + width: 175px; + height: 175px; +} + +.photo { + text-align: center; + padding-top: 50px; +} +.photo img { + width: 300px; + height: 200px; + margin: 10px; + transition: all 0.5s linear; +} +/*footer pevná pozice*/ + +footer { + bottom: 0; + margin-bottom: 10px; + margin-left: 25px; + margin-top: 20px; +} + +footer a { + text-decoration: none; +} + +#scrollToTopBtn { + display: none; + position: fixed; + bottom: 20px; + right: 20px; + /*butoon přes obsah*/ + z-index: 99; + outline: none; + cursor: pointer; + padding: 15px; + border-radius: 50%; + background-color: transparent; + color: var(--dracula-scrollToTopBtn-color); +} + +/* Styl pro ikonu */ +#scrollToTopBtn i { + font-size: 34px; +} + + +/*Instalace*/ + +.list ul { +list-style-type: none; +} + +.list { + padding-top: 50px; + padding-bottom: 50px; +} + +#plug-vim { + padding-top: 50px; + padding-bottom: 50px; +} + +.h2-install { + padding-bottom: 15px; +}