<template>
	<div class="widget-install-page">
		<h1>Installazione</h1>

		<hr class="section-separator">

		<h2>Installazione di NodeJS</h2>

		<p>
			Installare l'ultima versione LTS disponibile di NodeJS dall'indirizzo <a target="_blank" href="https://nodejs.org/en/download/">https://nodejs.org/en/download/</a>
		</p>

		<hr class="section-separator">

		<h2>[OPZIONALE]<br>Installazione e configurazione di Visual Studio Code</h2>

		<p>
			(Questo passaggio è opzionale ma in ogni caso consigliatissimo in quanto Visual Studio Code offre un ambiente ottimale per lavorare con la strumentazione dei widget.)
		</p>

		<p>
			Installare Visual Studio Code da qui <a target="_blank" href="https://code.visualstudio.com/">https://code.visualstudio.com/</a>.
			<br><br>
			Una volta installato, aprire Visual Studio Code e premere la combinazione di tasti Ctrl+Shift+X per andare nella sezione delle estensioni e installare le seguenti:
			<br><br>
			<ul>
				<li>Vetur</li>
				<li>Live Server</li>
			</ul>

		</p>

		<hr class="section-separator">

		<h2>Creare la repository di widget</h2>

		<p>
			Avviare la riga di comando ed eseguire il seguente comando per installare lo strumento "arca-widget".
		</p>

		<code-sample lang="bash" code="npm install -g @arcadash/cli" />

		<p>
			Prima di continuare, posizionarsi con la cwd nella directory dove volete creare la cartella che agirà da progetto
			per sviluppare i widget ed eseguire il seguente comando:
		</p>

		<code-sample lang="bash" code="arca-widget init" />
		<p>Oppure, per dare il nome alla cartella:</p>
		<code-sample lang="bash"code="arca-widget init NomeCartellaRepository" />

		<p>
			Una volta terminata l'installazione, bisogna spostarsi nella cartella appena creata con il comando "cd".
			<br><br>
			Durante lo sviluppo, il terminale che viene usato per interagire con lo strumento arca-widget deve puntare proprio a 
			questa cartella, altrimenti i vari comandi del tool non funzioneranno.
		</p>

		<p>
			Per creare un widget, utilizzare il comando:
		</p>

		<code-sample lang="bash" code="arca-widget create NomeWidget" />

		<p>
			Dove "NomeWidget" può essere qualsiasi nome composto unicamente di caratteri alfanumerici(ma che non può iniziare per numeri).
		</p>

		<p>
			A questo punto abbiamo un widget su cui possiamo sviluppare. Avviamo quindi il seguente comando
			per entrare in modalità sviluppo:
		</p>

		<code-sample lang="bash" code="arca-widget dev" />

		<p>
			Nota: Una volta eseguito questo comando, sembrerà che il terminale sia bloccato ma in realtà è solo in continua
			osservazione dei file di sviluppo per poter innescare la compilazione della parte modificata. Finché si sta sviluppando
			bisogna sempre avere attivo questo comando!
		</p>
		<p>
			Ora aprite la cartella del progetto appena creato in Visual Studio Code o il vostro editor a scelta.
		</p>
		<p>
			Aprite il file presente in "src/Widgets/CartellaWidget/index.vue". Questo è il codice sorgente del widget.
			Per vedere le modifiche in corso, aprire nel browser il file presente in "dist/Widgets/CartellaWidget/index.html".
			Si consiglia di aprire quest'ultimo file in Visual Studio Code e premere la combinazione di tasti Alt + L + O per avviare il Live Server,
			in modo che non sia necessario premere F5 per vedere le modifiche alla pagina.
		</p>
		<p>
			(P.s. Se la combinazione di tasti per avviare il live server non funziona, fare tasto destro sul codice del file html interessato e scegliere "Open with Live Server".)
		</p>
		<p>
			Una volta terminato lo sviluppo, bisogna chiudere il comando "arca-widget dev" nel terminale con "Ctrl + C".
		</p>

		<hr class="section-separator">

		<h2>Importare il widget dentro Arca</h2>

		<p>
			Prima di importare il widget dentro Arca, bisogna eseguire il comando:
		</p>

		<code-sample lang="bash" code="arca-widget compile" />

		<p>
			Questo comando rimuoverà varie cose dal runtime del widget che sono utili soltanto allo sviluppo.
		</p>

		<p>
			Una volta terminato il comando, crearsi uno zip della cartella del widget che si vuole importare.<br>
			Importante: La cartella del widget di cui fare lo zip è sotto la cartella "dist", non "src"!.
		</p>
	</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator"

@Component
export default class WidgetInstallPage extends Vue
{
	
}
</script>

<style lang="less" scoped>
.widget-install-page {
	
}
</style>