commit 1dbacf592c7eaba7c1b9274291305d5fd3c0b913 Author: hololu Date: Wed Feb 18 11:38:06 2026 +0300 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..1e1619d --- /dev/null +++ b/README.md @@ -0,0 +1,31 @@ +# Netplan Config Generator + +Bu proje, Ubuntu ve diğer Linux dağıtımlarında kullanılan Netplan ağ yapılandırma aracı için web tabanlı bir YAML oluşturucusudur. + +## Özellikler + +- **Görsel Arayüz:** IP adresleri, Gateway, DNS gibi ayarları kolayca girin. +- **Gelişmiş Destek:** Ethernet, Wi-Fi, Bridge, Bond ve VLAN yapılandırmalarını destekler. +- **Canlı Önizleme:** Yapılandırmanız değiştikçe YAML çıktısını anlık olarak görün. +- **İndirme ve Kopyalama:** Oluşturulan dosyayı tek tıkla indirin veya panoya kopyalayın. +- **Çoklu Dil:** Türkçe ve İngilizce dil desteği. +- **Tema Desteği:** Aydınlık ve Karanlık mod seçenekleri. +- **Kurulum Gerektirmez:** Sadece `index.html` dosyasını tarayıcınızda açarak kullanabilirsiniz. + +## Kullanım + +1. Proje klasöründeki `index.html` dosyasını bir web tarayıcısında (Chrome, Firefox, Edge vb.) açın. +2. Sol menüden ağ arayüzlerinizi (Ethernet, Wi-Fi vb.) ekleyin. +3. Gerekli IP ve ağ ayarlarını doldurun. +4. Sağ taraftaki önizleme panelinden YAML çıktısını kontrol edin. +5. "YAML İndir" butonu ile yapılandırma dosyanızı indirin. + +## Dosya Yapısı + +- `index.html`: Uygulamanın ana giriş noktası ve arayüzü. +- `app.js`: Vue.js tabanlı uygulama mantığı ve YAML oluşturma kodları. +- `style.css`: Özel stil tanımlamaları. + +## Gereksinimler + +- İnternet bağlantısı (Vue.js, TailwindCSS ve js-yaml kütüphanelerini CDN üzerinden yüklemek için gereklidir). diff --git a/app.js b/app.js new file mode 100644 index 0000000..c38e80e --- /dev/null +++ b/app.js @@ -0,0 +1,344 @@ +const { createApp } = Vue; + +createApp({ + data() { + return { + currentLang: 'tr', + isDark: false, + // Translation dictionary + translations: { + tr: { + globalSettings: 'Genel Ayarlar', + renderer: 'Oluşturucu (Renderer)', + version: 'Netplan Sürümü', + ethernets: 'Ethernet Arayüzleri', + addEthernet: 'Ethernet Ekle', + wifis: 'Wi-Fi Arayüzleri', + addWifi: 'Wi-Fi Ekle', + bridges: 'Köprüler (Bridges)', + addBridge: 'Köprü Ekle', + bonds: 'Bağlar (Bonds)', + addBond: 'Bağ Ekle', + vlans: 'VLANlar', + addVlan: 'VLAN Ekle', + noInterfaces: 'Henüz arayüz eklenmedi.', + interfaceName: 'Arayüz Adı', + interfaces: 'Arayüzler (Interfaces)', + ipAddresses: 'IP Adresleri', + gateway4: 'Gateway (IPv4)', + nameservers: 'DNS Sunucuları', + commaSeparated: 'Virgülle ayrılmış (örn: 192.168.1.1, 8.8.8.8)', + advancedSettings: 'Gelişmiş Ayarlar', + routes: 'Statik Rotalar (Routes)', + downloadYaml: 'YAML İndir', + copyClipboard: 'Kopyala', + parameters: 'Parametreler', + mode: 'Mod', + id: 'ID', + link: 'Bağlantı (Link)', + instructions: 'Kurulum Talimatları', + step1: '1. Oluşturulan dosyayı kopyalayın veya indirin.', + step2: '2. Linux sunucunuzda aşağıdaki dizine dosyayı kaydedin (varsayılan dosya adı genellikle 00-installer-config.yaml veya 01-netcfg.yaml olabilir):', + step3: '3. Dosya izinlerini güvenli hale getirin:', + step4: '4. Yapılandırmayı test edin (Hata varsa geri alır):', + step5: '5. Eğer test başarılıysa yapılandırmayı uygulayın:', + note: 'Not: Netplan dosya isimleri alfabetik sıraya göre işlenir. Eski yapılandırma dosyalarını yedeklemeyi veya silmeyi unutmayın.' + }, + en: { + globalSettings: 'Global Settings', + renderer: 'Renderer', + version: 'Netplan Version', + ethernets: 'Ethernet Interfaces', + addEthernet: 'Add Ethernet', + wifis: 'Wi-Fi Interfaces', + addWifi: 'Add Wi-Fi', + bridges: 'Bridges', + addBridge: 'Add Bridge', + bonds: 'Bonds', + addBond: 'Add Bond', + vlans: 'VLANs', + addVlan: 'Add VLAN', + noInterfaces: 'No interfaces added yet.', + interfaceName: 'Interface Name', + interfaces: 'Interfaces', + ipAddresses: 'IP Addresses', + gateway4: 'Gateway (IPv4)', + nameservers: 'Nameservers', + commaSeparated: 'Comma separated (e.g. 192.168.1.1, 8.8.8.8)', + advancedSettings: 'Advanced Settings', + routes: 'Static Routes', + wifis: 'Wi-Fi Interfaces', + addWifi: 'Add Wi-Fi', + noWifis: 'No Wi-Fi interfaces added yet.', + downloadYaml: 'Download YAML', + copyClipboard: 'Copy', + parameters: 'Parameters', + mode: 'Mode', + id: 'ID', + link: 'Link', + instructions: 'Installation Instructions', + step1: '1. Copy or download the generated file.', + step2: '2. Save the file to the following directory on your Linux server (default filename is usually 00-installer-config.yaml or 01-netcfg.yaml):', + step3: '3. Secure the file permissions:', + step4: '4. Test the configuration (Reverts on error):', + step5: '5. If the test is successful, apply the configuration:', + note: 'Note: Netplan processes files in alphabetical order. Remember to backup or remove old configuration files.' + } + }, + // Configuration Model + config: { + version: 2, + renderer: 'networkd', + ethernets: [], + wifis: [], + bridges: [], + bonds: [], + vlans: [] + } + } + }, + computed: { + generatedYaml() { + const network = { + version: this.config.version, + renderer: this.config.renderer + }; + + // Helper to clean common fields + const processCommon = (item) => { + const obj = {}; + // DHCP + if (item.dhcp4) { + obj.dhcp4 = true; + } + + // Static IP & Gateway & DNS - only if not DHCP (usually, though netplan allows mixing but let's keep simple) + // Actually netplan allows addresses with dhcp4: true (e.g. static + dhcp). But let's follow the UI logic: + // if DHCP is unchecked, these fields are shown. + if (!item.dhcp4) { + if (item.addressesInput) { + obj.addresses = item.addressesInput.split(',').map(s => { + let addr = s.trim(); + if (addr && !addr.includes('/')) { + addr += '/24'; // Default to /24 if missing + } + return addr; + }).filter(s => s); + } + if (item.nameserversInput) { + obj.nameservers = { + addresses: item.nameserversInput.split(',').map(s => s.trim()).filter(s => s) + }; + } + } + + // Advanced + if (item.mtu) obj.mtu = item.mtu; + if (item.macaddress) obj.macaddress = item.macaddress; + + // Routes + let finalRoutes = []; + + // Deprecated gateway4 -> converted to default route + if (!item.dhcp4 && item.gateway4) { + finalRoutes.push({ to: 'default', via: item.gateway4 }); + } + + // Custom Routes + if (item.routes && item.routes.length > 0) { + const validRoutes = item.routes.filter(r => r.to && r.via).map(r => ({ to: r.to, via: r.via })); + finalRoutes = finalRoutes.concat(validRoutes); + } + + if (finalRoutes.length > 0) { + obj.routes = finalRoutes; + } + return obj; + }; + + // Ethernets + if (this.config.ethernets.length > 0) { + network.ethernets = {}; + this.config.ethernets.forEach(eth => { + if (eth.name) { + network.ethernets[eth.name] = processCommon(eth); + } + }); + } + + // Wi-Fis + if (this.config.wifis.length > 0) { + network.wifis = {}; + this.config.wifis.forEach(wifi => { + if (!wifi.name) return; + const obj = processCommon(wifi); + if (wifi.accessPoints && wifi.accessPoints.length > 0) { + obj['access-points'] = {}; + wifi.accessPoints.forEach(ap => { + if (ap.ssid) { + obj['access-points'][ap.ssid] = {}; + if (ap.password) { + obj['access-points'][ap.ssid].password = ap.password; + } + } + }); + } + network.wifis[wifi.name] = obj; + }); + } + + // Bridges + if (this.config.bridges.length > 0) { + network.bridges = {}; + this.config.bridges.forEach(bridge => { + if (!bridge.name) return; + const obj = processCommon(bridge); + if (bridge.interfacesInput) { + obj.interfaces = bridge.interfacesInput.split(',').map(s => s.trim()).filter(s => s); + } + if (bridge.parameters) { + obj.parameters = {}; + if (bridge.parameters.stp !== null) obj.parameters.stp = bridge.parameters.stp; + if (bridge.parameters.forwardDelay !== null && bridge.parameters.forwardDelay !== '') obj.parameters['forward-delay'] = bridge.parameters.forwardDelay; + } + network.bridges[bridge.name] = obj; + }); + } + + // Bonds + if (this.config.bonds.length > 0) { + network.bonds = {}; + this.config.bonds.forEach(bond => { + if (!bond.name) return; + const obj = processCommon(bond); + if (bond.interfacesInput) { + obj.interfaces = bond.interfacesInput.split(',').map(s => s.trim()).filter(s => s); + } + if (bond.parameters) { + obj.parameters = {}; + if (bond.parameters.mode) obj.parameters.mode = bond.parameters.mode; + } + network.bonds[bond.name] = obj; + }); + } + + // VLANs + if (this.config.vlans.length > 0) { + network.vlans = {}; + this.config.vlans.forEach(vlan => { + if (!vlan.name) return; + const obj = processCommon(vlan); + if (vlan.id) obj.id = vlan.id; + if (vlan.link) obj.link = vlan.link; + network.vlans[vlan.name] = obj; + }); + } + + try { + // Using js-yaml from CDN + if (typeof jsyaml !== 'undefined') { + return jsyaml.dump({ network: network }, { indent: 2, noRefs: true }); + } else { + return 'js-yaml library not loaded.'; + } + } catch (e) { + return 'Error generating YAML: ' + e.message; + } + } + }, + methods: { + t(key) { + return this.translations[this.currentLang][key] || key; + }, + toggleLanguage() { + this.currentLang = this.currentLang === 'tr' ? 'en' : 'tr'; + }, + toggleTheme() { + this.isDark = !this.isDark; + if (this.isDark) { + document.documentElement.classList.add('dark'); + } else { + document.documentElement.classList.remove('dark'); + } + }, + createInterface(type) { + const base = { + dhcp4: true, + addressesInput: '', + gateway4: '', + nameserversInput: '', + mtu: null, + macaddress: '', + routes: [], + showAdvanced: false + }; + if (type === 'ethernet') { + return { ...base, name: 'eth' + this.config.ethernets.length }; + } + if (type === 'wifi') { + return { ...base, name: 'wlan' + this.config.wifis.length, accessPoints: [{ ssid: '', password: '' }] }; + } + if (type === 'bridge') { + return { ...base, name: 'br' + this.config.bridges.length, interfacesInput: '', parameters: { stp: false, forwardDelay: 0 } }; + } + if (type === 'bond') { + return { ...base, name: 'bond' + this.config.bonds.length, interfacesInput: '', parameters: { mode: 'active-backup' } }; + } + if (type === 'vlan') { + return { ...base, name: 'vlan' + this.config.vlans.length, id: 10, link: '' }; + } + }, + addEthernet() { + this.config.ethernets.push(this.createInterface('ethernet')); + }, + removeEthernet(index) { + this.config.ethernets.splice(index, 1); + }, + addWifi() { + this.config.wifis.push(this.createInterface('wifi')); + }, + removeWifi(index) { + this.config.wifis.splice(index, 1); + }, + addBridge() { + this.config.bridges.push(this.createInterface('bridge')); + }, + removeBridge(index) { + this.config.bridges.splice(index, 1); + }, + addBond() { + this.config.bonds.push(this.createInterface('bond')); + }, + removeBond(index) { + this.config.bonds.splice(index, 1); + }, + addVlan() { + this.config.vlans.push(this.createInterface('vlan')); + }, + removeVlan(index) { + this.config.vlans.splice(index, 1); + }, + async copyToClipboard() { + try { + await navigator.clipboard.writeText(this.generatedYaml); + // alert('Kopyalandı!'); + } catch (err) { + console.error('Failed to copy: ', err); + } + }, + downloadYaml() { + const blob = new Blob([this.generatedYaml], { type: 'text/yaml' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = '01-netcfg.yaml'; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + } + }, + mounted() { + this.addEthernet(); + } +}).mount('#app'); diff --git a/index.html b/index.html new file mode 100644 index 0000000..32fdae4 --- /dev/null +++ b/index.html @@ -0,0 +1,668 @@ + + + + + + + Netplan Yapılandırma Oluşturucu + + + + + + + + + + + + + + +
+ +
+
+
+
+ + + +
+

+ Netplan Config Generator +

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

+ 🌐 {{ t('globalSettings') }} +

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

+ 🔌 {{ t('ethernets') }} +

+ +
+ +
+ {{ t('noInterfaces') }} +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ +
+ +
+

{{ t('commaSeparated') }}

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

+ 📶 {{ t('wifis') }} +

+ +
+
+ {{ t('noWifis') }} +
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ + +
+
+

+ 🌉 {{ t('bridges') }} +

+ +
+
+ No Bridges added yet. +
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ + +
+
+

+ 🔗 {{ t('bonds') }} +

+ +
+
+ No Bonds added yet. +
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ + +
+
+

+ 🏷️ {{ t('vlans') }} +

+ +
+
+ No VLANs added yet. +
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+ 01-netcfg.yaml +
+
+ 
{{ generatedYaml }}
+ +
+ +
+
+
+ +
+ + +
+
+ + +
+
+

+ 📝 {{ t('instructions') }} +

+
+
+

{{ t('step1') }}

+ +
+

{{ t('step2') }}

+
+ /etc/netplan/01-netcfg.yaml +
+
+ +
+

{{ t('step3') }}

+
+ sudo chmod 600 /etc/netplan/01-netcfg.yaml +
+
+ +
+

{{ t('step4') }}

+
+ sudo netplan try +
+
+ +
+

{{ t('step5') }}

+
+ sudo netplan apply +
+
+ +
+

+ {{ t('note') }} +

+
+
+
+
+
+
+ +
+

Netplan Config Generator © 2024

+
+
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..3e8d671 --- /dev/null +++ b/style.css @@ -0,0 +1,34 @@ +[v-cloak] { + display: none; +} + +.animate-fade-in-down { + animation: fadeInDown 0.3s ease-out; +} + +@keyframes fadeInDown { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Custom scrollbar for code block */ +.scrollbar-thin::-webkit-scrollbar { + width: 8px; + height: 8px; +} +.scrollbar-thin::-webkit-scrollbar-track { + background: transparent; +} +.scrollbar-thin::-webkit-scrollbar-thumb { + background-color: #4b5563; + border-radius: 4px; +} +.scrollbar-thin::-webkit-scrollbar-thumb:hover { + background-color: #6b7280; +} diff --git a/yapi.md b/yapi.md new file mode 100644 index 0000000..45625b5 --- /dev/null +++ b/yapi.md @@ -0,0 +1,9 @@ +ubuntu gibi linux dağıtımlarında kullanılan netplan için Web tabanlı bir yapılandırma yaml dosyası oluşturucu hazırlamak istiyorum. + +- Proje IP adresleri gibi bilgileri kolay ve görsel bir şekilde girildikten sonra yaml formatında bir yapılandırma dosyası oluşturacak. +- Oluşturulan yaml dosyasını kopyalama ve indirme imkanı sunacak. +- netplan yapısının Gelişmiş özellikleri tanımlanabilecek ve ona gerekli komut ve benzeri yönlendirmeleri yapacak +- Sadece IP tanımı değil, DNS, Vlan, Bridge, Bond, Proxy, Static route, DHCP, VPN, Firewall, NAT, Port Forwarding gibi gelişmiş ayarlarda istenirse eklenebilecek +- Uygulama ana dili Türkçe olacak ve hazıarlama sürecindeki cevaplar ve çözümlerde tüekçe olarak verilecek. +- Tema desteği olabilir, ek dil olarak ingilizce de eklenebilir +