diff --git a/docs/Docusaurus/markdown-guide.md b/docs/Docusaurus/markdown-guide.md new file mode 100644 index 0000000..a51a2e6 --- /dev/null +++ b/docs/Docusaurus/markdown-guide.md @@ -0,0 +1,562 @@ +# Guida Completa Markdown per Docusaurus + +> **Guida di riferimento completa per la sintassi Markdown in Docusaurus** +> +> Autore: Giuseppe +> Ultimo aggiornamento: Settembre 2025 +> Repository: [docs.git](https://gitlab.dffm.it/giuseppe/docs.git) + +--- + +## Indice + +- [1. Frontmatter (Metadati del documento)](#1-frontmatter-metadati-del-documento) +- [2. Intestazioni](#2-intestazioni) +- [3. Formattazione del Testo](#3-formattazione-del-testo) +- [4. Liste](#4-liste) +- [5. Link e Riferimenti](#5-link-e-riferimenti) +- [6. Immagini](#6-immagini) +- [7. Blocchi di Codice](#7-blocchi-di-codice) +- [8. Tabelle](#8-tabelle) +- [9. Citazioni](#9-citazioni) +- [10. Separatori Orizzontali](#10-separatori-orizzontali) +- [11. Componenti Docusaurus Specifici](#11-componenti-docusaurus-specifici) +- [12. MDX - Componenti React](#12-mdx---componenti-react) + +--- + +## 1. Frontmatter (Metadati del documento) + +Il frontmatter è il blocco YAML all'inizio del file che definisce metadati e configurazioni del documento. + +```yaml +--- +id: my-doc-id +title: Titolo del Documento +sidebar_label: Label Sidebar +sidebar_position: 2 +description: Descrizione del documento per SEO +keywords: [docusaurus, markdown, guida] +tags: [tutorial, documentation] +slug: /custom-url +draft: false +hide_title: false +hide_table_of_contents: false +pagination_next: null +pagination_prev: null +custom_edit_url: https://github.com/repo/edit/main/docs/doc.md +--- +``` + +**Campi principali:** +- `id`: Identificatore univoco del documento +- `title`: Titolo visualizzato nella pagina +- `sidebar_label`: Etichetta nella sidebar (se diversa dal titolo) +- `sidebar_position`: Posizione numerica nella sidebar +- `description`: Meta descrizione per SEO +- `keywords`: Array di parole chiave per la ricerca +- `tags`: Tag per categorizzare il documento +- `slug`: URL personalizzato per la pagina +- `draft`: Se `true`, nasconde il documento in produzione + +--- + +## 2. Intestazioni + +Le intestazioni creano la struttura gerarchica del documento e generano automaticamente l'indice. + +```markdown +# H1 - Titolo principale +## H2 - Sottotitolo +### H3 - Sezione +#### H4 - Sottosezione +##### H5 - Paragrafo +###### H6 - Sottoparagrafo +``` + +**Best practices:** +- Usa solo un H1 per documento +- Mantieni la gerarchia logica (H1 → H2 → H3) +- Evita di saltare livelli di intestazione + +--- + +## 3. Formattazione del Testo + +```markdown +**Testo in grassetto** +*Testo in corsivo* +***Testo in grassetto e corsivo*** +~~Testo barrato~~ +`Codice inline` +``` + +Per sottolineato ed evidenziato: +```html +Testo sottolineato +Testo evidenziato +``` + +**Risultato:** +- **Testo in grassetto** +- *Testo in corsivo* +- ***Testo in grassetto e corsivo*** +- ~~Testo barrato~~ +- `Codice inline` + +--- + +## 4. Liste + +### Liste non ordinate +```markdown +- Elemento 1 +- Elemento 2 + - Sottoelemento 2.1 + - Sottoelemento 2.2 +- Elemento 3 + +* Alternativa con asterisco ++ Alternativa con più +``` + +### Liste ordinate +```markdown +1. Primo elemento +2. Secondo elemento + 1. Sottoelemento ordinato + 2. Altro sottoelemento +3. Terzo elemento +``` + +### Liste di attività (Task Lists) +```markdown +- [x] Attività completata +- [ ] Attività da fare +- [x] Altra attività completata +``` + +--- + +## 5. Link e Riferimenti + +```markdown +[Link esterno](https://example.com) +[Link con titolo](https://example.com "Titolo del link") +[Link a documento interno](./altro-documento.md) +[Link a sezione](#sezione-specifica) +[Link di riferimento][1] + +[1]: https://example.com + + +https://example.com + +``` + +**Tipi di link supportati:** +- **Esterni**: Collegamenti a siti web esterni +- **Interni**: Collegamenti ad altri documenti del progetto +- **Ancore**: Collegamenti a sezioni specifiche della stessa pagina +- **Automatici**: URL e email riconosciuti automaticamente + +--- + +## 6. Immagini + +### Sintassi Markdown base +```markdown +![Alt text](./images/immagine.png) +![Alt text](./images/immagine.png "Titolo immagine") +``` + +### Immagini con HTML (per controllo avanzato) +```html +Alt text +``` + +### Immagini centrate +```html +
+ Alt text +
+``` + +**Formati supportati:** +- PNG, JPG, JPEG, GIF, SVG +- WebP (per performance ottimizzate) +- Immagini locali e remote + +--- + +## 7. Blocchi di Codice + +### Codice inline +```markdown +Usa `console.log()` per stampare in console. +``` + +### Blocchi di codice con evidenziazione sintassi + +JavaScript: +```javascript +function saluta(nome) { + console.log(`Ciao, ${nome}!`); +} +saluta("Mondo"); +``` + +Python: +```python +def saluta(nome): + print(f"Ciao, {nome}!") + +saluta("Mondo") +``` + +Bash: +```bash +npm install docusaurus +npm start +``` + +### Blocchi di codice con titolo +````markdown +```js title="src/components/HelloWorld.js" +import React from 'react'; + +export default function HelloWorld() { + return

Hello World!

; +} +``` +```` + +### Evidenziazione di righe specifiche +````markdown +```js {1,4-6,11} +import React from 'react'; + +function MyComponent() { + const [count, setCount] = useState(0); + const increment = () => setCount(count + 1); + const decrement = () => setCount(count - 1); + + return ( +
+

Count: {count}

+ +
+ ); +} +``` +```` + +### Code Block con numerazione righe +````markdown +```js showLineNumbers +function calculateSum(a, b) { + return a + b; +} + +const result = calculateSum(5, 3); +console.log(result); +``` +```` + +**Linguaggi supportati:** +JavaScript, TypeScript, Python, Java, C#, PHP, Go, Rust, HTML, CSS, SQL, JSON, YAML, e molti altri. + +--- + +## 8. Tabelle + +```markdown +| Colonna 1 | Colonna 2 | Colonna 3 | +|-----------|-----------|-----------| +| Riga 1 | Dato 1 | Dato 2 | +| Riga 2 | Dato 3 | Dato 4 | +``` + +### Tabelle con allineamento +```markdown +| Sinistra | Centro | Destra | +|:---------|:------:|-------:| +| Testo | Testo | Testo | +| Esempio | Test | 123 | +``` + +**Allineamento:** +- `:---` = Allineato a sinistra +- `:---:` = Centrato +- `---:` = Allineato a destra + +--- + +## 9. Citazioni + +```markdown +> Questa è una citazione semplice. + +> Questa è una citazione +> su più righe. +``` + +### Citazioni complesse +```markdown +> ## Citazione con intestazione +> +> Puoi includere **formattazione** nelle citazioni. +> +> - Liste +> - Anche nelle citazioni +``` + +--- + +## 10. Separatori Orizzontali + +```markdown +--- +``` + +Oppure: +```markdown +*** +___ +``` + +Tutti e tre i metodi producono lo stesso risultato: una linea orizzontale di separazione. + +--- + +## 11. Componenti Docusaurus Specifici + +### Admonitions (Avvisi) + +Gli admonitions sono blocchi colorati per evidenziare informazioni importanti. + +```markdown +:::note +Questa è una nota informativa. +::: + +:::tip +Questo è un suggerimento utile. +::: + +:::info +Questa è un'informazione importante. +::: + +:::warning +Questo è un avvertimento. +::: + +:::danger +Questo è un avviso di pericolo. +::: +``` + +### Admonitions con titolo personalizzato +```markdown +:::tip Titolo personalizzato +Puoi personalizzare il titolo degli admonition. +::: + +:::note[Nota con titolo personalizzato] +Sintassi alternativa per il titolo. +::: +``` + +### Admonitions collassabili +```markdown +:::details Clicca per espandere +Contenuto nascosto che si può espandere. +::: +``` + +--- + +## 12. MDX - Componenti React + +MDX permette di utilizzare componenti React direttamente nel Markdown. + +### Componenti inline +```markdown +export const Highlight = ({children, color}) => ( + + {children} + +); + +Ecco un testo evidenziato in verde. +``` + +### Live Code Editor +````markdown +```jsx live +function Button() { + const [count, setCount] = useState(0); + return ( + + ); +} +``` +```` + +### Importare componenti esterni +```markdown +import MyComponent from '@site/src/components/MyComponent'; + + +``` + +--- + +## 13. Funzionalità Avanzate + +### Footnotes (Note a piè di pagina) +```markdown +Questo è un testo con una nota[^1]. + +[^1]: Questa è la nota a piè di pagina. +``` + +### Emoji support +```markdown +:smile: :heart: :thumbsup: :rocket: :warning: + +Oppure direttamente: 😄 ❤️ 👍 🚀 ⚠️ +``` + +### Keyboard keys +```html +Premi Ctrl+C per copiare. +``` + +--- + +## 14. Diagrammi + +### Mermaid (se abilitato) +````markdown +```mermaid +graph TD; + A-->B; + A-->C; + B-->D; + C-->D; +``` +```` + +### Diagramma di flusso +````markdown +```mermaid +flowchart LR + A[Start] --> B{Decision} + B -->|Yes| C[Process] + B -->|No| D[End] + C --> D +``` +```` + +--- + +## 15. Math (se KaTeX abilitato) + +### Equazioni inline +```markdown +La formula di Einstein è $E = mc^2$. +``` + +### Equazioni in blocco +```markdown +$$ +\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} +$$ +``` + +--- + +## 16. Best Practices + +### Struttura dei file +``` +docs/ +├── intro.md +├── tutorial/ +│ ├── _category_.json +│ ├── basics/ +│ │ ├── create-document.md +│ │ └── markdown-features.md +│ └── advanced/ +│ └── deploy.md +└── api/ + └── users.md +``` + +### File _category_.json +```json +{ + "label": "Tutorial", + "position": 2, + "link": { + "type": "generated-index", + "description": "Tutorial per imparare Docusaurus." + } +} +``` + +### Performance e SEO +- **Immagini ottimizzate**: Usa formati moderni (WebP) e dimensioni appropriate +- **Meta description**: Includi sempre una descrizione nel frontmatter +- **Keywords**: Utilizza parole chiave rilevanti per la ricerca +- **Struttura gerarchica**: Mantieni una gerarchia logica delle intestazioni +- **Heading sequenziali**: Usa heading in ordine (H1 → H2 → H3) + +### Accessibilità +- **Alt text**: Fornisci sempre testo alternativo per le immagini +- **Struttura heading**: Usa intestazioni per strutturare il contenuto +- **Link descrittivi**: Assicurati che i link abbiano testo descrittivo +- **Contrasto colori**: Usa colori con contrasto adeguato negli elementi personalizzati + +### Organizzazione contenuti +- **Naming consistency**: Usa convenzioni coerenti per nomi file e ID +- **Logical grouping**: Organizza documenti in cartelle logiche +- **Cross-references**: Crea collegamenti tra documenti correlati +- **Regular updates**: Mantieni aggiornata la documentazione + +--- + +## Risoluzione Problemi Comuni + +### Errori MDX +1. **Tag auto-chiudenti**: Usa `` invece di `` +2. **Attributi JSX**: Usa `className` invece di `class` +3. **Sintassi mista**: Non mischiare Markdown e JSX nello stesso blocco +4. **Import mancanti**: Importa tutti i componenti che usi + +### Debug dei link +- Usa percorsi relativi per documenti interni +- Controlla che i file esistano effettivamente +- Verifica l'estensione dei file (.md vs .mdx) + +### Problemi di build +- Controlla la sintassi YAML nel frontmatter +- Verifica che non ci siano caratteri speciali nei nomi file +- Assicurati che tutti gli import siano corretti + +--- + +## Risorse Aggiuntive + +- 📚 [Documentazione Ufficiale Docusaurus](https://docusaurus.io/) +- 🎯 [Markdown Guide](https://www.markdownguide.org/) +- 🔧 [MDX Documentation](https://mdxjs.com/) +- 🎨 [Infima CSS Framework](https://infima.dev/) (utilizzato da Docusaurus) + +--- + +> **Nota**: Questa guida è stata creata per il progetto [docs.git](https://gitlab.dffm.it/giuseppe/docs.git) e può essere liberamente utilizzata e modificata secondo le esigenze del progetto. \ No newline at end of file diff --git a/docs/Secomea/setup-1549dev.md b/docs/Secomea/setup-1549dev.md new file mode 100644 index 0000000..9ff7ad9 --- /dev/null +++ b/docs/Secomea/setup-1549dev.md @@ -0,0 +1,187 @@ +--- +id: sitemanager-dev-port-separation +title: Sitemanager 1549 - DEV Port Separation +sidebar_label: DEV Port Separation +sidebar_position: 1 +description: Guida per configurare la separazione delle porte DEV sul Sitemanager 1549 Secomea +keywords: [secomea, sitemanager, 1549, dev port, separation, network, configuration] +tags: [secomea, networking, configuration] +--- + +# Sitemanager 1549 - DEV Port Separation + +Questa guida illustra come configurare la **separazione delle porte DEV** sul Sitemanager 1549 di Secomea per creare reti separate. + +## Panoramica + +La funzionalità DEV Port Separation consente di separare le porte DEV del Sitemanager per creare segmenti di rete isolati, utile per: +- Separare diverse reti di automazione +- Isolare gruppi di dispositivi +- Implementare segmentazione di sicurezza + +## Prerequisiti + +- Accesso alla GUI del Sitemanager (locale o tramite GateManager) +- Privilegi di amministrazione +- Conoscenza della topologia di rete target + +--- + +## Procedura di Configurazione + +### Step 1: Accesso alla GUI + +Accedere alla GUI del Sitemanager attraverso: +- **GUI locale**: Connessione diretta al dispositivo +- **GateManager**: Accesso remoto tramite piattaforma cloud + +### Step 2: Configurazione Porta DEV2 + +1. **Selezionare la porta DEV2** + - Cliccare su **DEV2** nel menu delle interfacce + +2. **Configurare la modalità Separation** + - **Mode**: Cambiare da `Bridge` (default) a `Separation` + - **IP Address**: Inserire l'indirizzo IP del gateway della nuova rete + - **Subnet Mask**: Specificare la subnet mask appropriata + +3. **Salvare e riavviare** + - Cliccare **Save** per salvare le configurazioni + - Riavviare il dispositivo per applicare le modifiche + +:::warning Attenzione +Il riavvio del dispositivo causerà una breve interruzione delle connessioni di rete. +::: + +### Step 3: Creazione Agent Layer2 + +1. **Creare nuovo Agent** + - Navigare nella sezione **Agents** + - Creare un nuovo **Agent Layer2** + - Cliccare su **Edit** per modificarlo + +2. **Configurare l'interfaccia** + - **Interface**: Selezionare `DEV2` + - Cliccare **Save and Back** per confermare + +--- + +## Risultato + +Dopo la configurazione, nel **GateManager** saranno visibili: +- **2 connessioni Layer2** distinte +- Separazione completa tra i segmenti di rete + +--- + +--- + +## Convenzioni e Standard Aziendali + +### Utilizzo delle Porte +- **DEV1**: Sempre per rete di supervisione (HMI, programmazione) +- **DEV2**: Sempre per rete di campo (automazione, I/O) +- **DEV3**: Non utilizzare per questa configurazione + +### Network Map Standard +#### DEV1 +- **Classe IP**: `172.16.224.0/20` per tutte le macchine +- **Gateway**: `172.16.239.254` per rete di supervisione +- **Compatibilità**: Ottimizzata (HMI, PLC, programmazione) +#### DEV2 +- **Classe IP**: `172.16.0.0/17` per tutte le macchine +- **Gateway**: `172.16.127.254` per rete di campo +- **Compatibilità**: Ottimizzata per circuiti MagneMotion + +--- + +## Verifica Configurazione + +### Controlli post-configurazione + +1. **Verificare connettività** + - Testare la connessione ai dispositivi su entrambe le reti + - Verificare l'isolamento tra i segmenti + +2. **Controllo GateManager** + - Confermare che vengano visualizzate 2 connessioni Layer2 + - Verificare lo stato delle connessioni + +3. **Test di isolamento** + - Verificare che i dispositivi su DEV1 non possano comunicare con quelli su DEV2 + - Confermare il corretto routing del traffico + +--- + +## Diagramma di Rete + +```mermaid +graph TD + A[Sitemanager 1549] --> |Rete di Supervisione| B[DEV1 - Bridge Mode] + A -->|Rete di Campo| C[DEV2 - Separation Mode + automazione, I/O] + A --> D[DEV3 - Bridge Mode] + + B --> E[Rete Principale] + C --> |Isolata|F[Rete Separata] + D --> G[Non usare] + + E -.-> |Isolata| F + + + style C fill:#ffeb3b + style F fill:#ffeb3b +``` + +--- + +## Parametri di Configurazione + +| Parametro | Valore | Note | +|-----------|--------|------| +| **Modalità DEV2** | Separation | Cambiare da Bridge (default) | +| **IP Gateway** | IP della nuova rete | Configurare secondo topologia | +| **Subnet** | Subnet della nuova rete | Deve corrispondere alla rete target | +| **Agent Type** | Layer2 | Creare specificamente per DEV2 | + +--- + +## Troubleshooting + +### Problemi Comuni + +#### Connessione non disponibile dopo riavvio +- **Causa**: Configurazione IP errata +- **Soluzione**: Verificare IP e subnet mask del gateway + +#### Agent non visibile in GateManager +- **Causa**: Agent non correttamente associato a DEV2 +- **Soluzione**: Verificare che l'interfaccia selezionata sia DEV2 + +#### Comunicazione tra reti non isolata +- **Causa**: Modalità ancora in Bridge +- **Soluzione**: Confermare che DEV2 sia in modalità Separation + +--- + +## Note Aggiuntive + +### Sicurezza +- La separazione delle porte aumenta la sicurezza isolando i segmenti di rete +- Implementare firewall rules appropriate se necessario + +### Performance +- La modalità Separation può influire sulle performance di throughput +- Monitorare le metriche di rete dopo la configurazione + +### Manutenzione +- Documentare la configurazione di rete per future modifiche +- Mantenere aggiornato il firmware del Sitemanager + +--- + +## Riferimenti + +- [Documentazione Ufficiale Secomea](https://www.secomea.com) +- [Manuale Sitemanager 1549](https://www.secomea.com/support) +- [GateManager User Guide](https://www.secomea.com/gatemanager) \ No newline at end of file