commit a9120b016cab5e0c223569f1f3fcd4ec075e8761 Author: kankys Date: Sat Mar 30 14:22:13 2024 +0100 jedem od znova 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..dbb202f --- /dev/null +++ b/index.html @@ -0,0 +1,447 @@ + + + + + + + + + + + + + + + + + + + + + ApolloNvim + + + +
+

🚀ApolloNvim

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

Úvod:

+

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

+

+ 👉 Výhody Neovim oproti klasickému IDE jsou nesporně v 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 aby jste si mohli samy vše modifikovat, + což i click-on distribucí se nenaučíte. +

+

+ 👉 Toto nastavení je primárně pro vývoj webu, ale není problém si vše + přizpůsobit. 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řednosti tohoto nastavení jsou podpora: Tabnine, Prettier, + AutoSave, doplňování HTML, CSS, JS a zkratky k zakomentování a odk + omentová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íš hledat, defaultně je + nastavéné Dracula. +

+

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

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

Instalace a nastavení:

+

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

+

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

+

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

+

👉 Nejprve si zálohuj své aktuální nastavení Neovim!!!

+

👉 Linux & Mac:

+
+

/home/kankys/.config/nvim/init.vim

+
+

Windows:

+
+

~\AppData\Local\nvim

+
+
+

Node.js:

+

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

+

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

+
+

npm i live-server

+
+

+ (Platí v případě že chceš dělat front-end nebo programovat v + Javascriptu). +

+

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

+
+

npx live-server

+
+
+
+

Neovim:

+

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

+

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

+

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

+

👉 Odklikej chybová hlášení.

+

+ 👉 V Neovimu zadej do command line PlugIns , tím + nainstaluješ všechny pluginy. Restartuj Neovim. +

+

+ 👉 Pokud ti některý plugin chybí můžeš ho lehce doinstalovat nebo + naopak odinstalovat pomocí plug.vim. Více informací + najdeš 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ě zadej Coc příkaz pro doinstalování zbylých + pluginů: +

+
+

+ CocInstall coc-todolist coc-tailwindcss coc-prettier 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 restartuj Neovim a vše máš připravené.

+

+ 👉 Také se zde podívej do souboru + Hint.md, pomůže ti na začátku. +

+

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

+
+
+

Plán 🚀ApolloNvim:

+

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

+

+ 👉 Web na vlastní doméně zatím ApolloNvim najdeš + zde. + -> Vysoká priorita +

+

👉 Instalátor 🚀 ApolloNvim přes odkaz Git.

+

👉 Nová vlastní uvítací obrazovka.

+

👉 Nové pluginy.

+

👉 Telegram skupina k projektu.

+

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

+

👉 Návody k práci s Neovim -> Vysoká priorita

+
+
+

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

+

+ 👉 + 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. +

+

+ 👉 + Tabnine + alternativa k GitHub Copilot, který si případně lehce také můžeš + doinstalovat. + Tabnine + narozdíl od Copilota nabízí free program a trial verzi na 90 dní. +

+

+ 👉 + + 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-project-manager

+

👉 coc-prettier

+

👉 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

+
+
+

Otázky a odpovědi:

+

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

+
+
+

Kontakty:

+

+ 👉 🚀 ApolloNvim Telegram skupina +

+

+ 👉 Osobní web autora 🚀 ApolloNvim +

+

+ 👉 Gitea profil +

+

+ 👉 GitHub +

+

+ 👉 Nostr +

+

+ + Mastodon +

+
+ +
+

Podpora:

+

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

+

👉 Taky můžeš 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/script.js b/script.js new file mode 100644 index 0000000..65b6b59 --- /dev/null +++ b/script.js @@ -0,0 +1,148 @@ +//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..bb19fdb --- /dev/null +++ b/style.css @@ -0,0 +1,204 @@ +* { + margin: 0; + + padding: 0; + + box-sizing: border-box; +} +body { + max-width: 1000px; + margin: 0 auto; + font-family: "Ubuntu", sans-serif; +} + +/*Header */ + +h1 { + padding-left: 8px; +} + +header { + margin-top: 25px; + display: flex; + align-items: center; + height: 70px; + flex-direction: row; + /*position: fixed;*/ +} + +.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: black; +} + +/* navigation icons */ + +.menu-icon { + display: none; + margin-right: 30px; +} + +/*Dark/Light mode button*/ +#toggleButton { + float: right; + margin-right: 30px; + margin-top: 10px; + padding: 5px; +} + +#toggleButton { + bottom: 20px; + right: 20px; + border: none; + outline: none; + background-color: transparent; + font-size: 34px; + cursor: pointer; +} + +/*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: 115px; + 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; +} + +#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: auto; +} + +/*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; +} + +/* Styl pro ikonu */ +#scrollToTopBtn i { + font-size: 34px; +}