From f90493ea34f4f10282e7b7a0441148840a2f582e Mon Sep 17 00:00:00 2001 From: Antonio De Lucreziis Date: Sun, 17 Nov 2024 22:50:46 +0100 Subject: [PATCH] fix: guide links and firefox/chrome styles --- .../2024-07-30-pagina-poisson-con-astro.md | 19 +++++++++++++++---- .../guides/2024-11-17-attivazione-poisson.md | 5 ++++- src/pages/guide/index.astro | 2 +- src/pages/guide/tags/[tag].astro | 6 +++--- src/styles/components.scss | 11 +++++------ src/styles/typography.scss | 13 +++++++++++++ 6 files changed, 41 insertions(+), 15 deletions(-) diff --git a/src/content/guides/2024-07-30-pagina-poisson-con-astro.md b/src/content/guides/2024-07-30-pagina-poisson-con-astro.md index 42ce97f..254bd95 100644 --- a/src/content/guides/2024-07-30-pagina-poisson-con-astro.md +++ b/src/content/guides/2024-07-30-pagina-poisson-con-astro.md @@ -6,7 +6,7 @@ author: Antonio De Lucreziis tags: [astro, website] --- -In questa guida vedremo come creare una pagina Poisson moderna utilizzando Astro, un nuovo framework di sviluppo web statico. +In questa guida vedremo come creare una pagina Poisson moderna utilizzando Astro, un nuovo framework di sviluppo web statico. Per prima cosa installeremo NodeJS sul nostro computer, poi creeremo un nuovo progetto Astro e infine dopo averlo generato, lo caricheremo su Poisson. ## Setup @@ -35,7 +35,7 @@ cd nome-del-progetto npm install ``` -Se ad esempio volessimo usare un tema come [Astro Nano](https://github.com/markhorn-dev/astro-nano) possiamo fare così: +Se ad esempio volessimo usare un tema come "[Astro Nano](https://github.com/markhorn-dev/astro-nano)" possiamo fare così: ```bash git clone https://github.com/markhorn-dev/astro-nano sito-poisson @@ -62,8 +62,19 @@ Per vedere il nostro progetto in locale possiamo eseguire il comando: npm run dev ``` -A questo punto in base al tema scelto possiamo modificare i file dentro `src/pages` per cambiare il contenuto delle pagine. Molti temi sono preimpostati per scrivere contenuti in Markdown, ad esempio per il _template blog_ possiamo scrivere gli articoli per il nostro blog in `src/content/blog/$NOME_POST.md`. +A questo punto in base al tema scelto possiamo modificare i file dentro `src/pages` per cambiare il contenuto delle pagine. Molti temi sono preimpostati per scrivere contenuti in Markdown, ad esempio per il _template blog_ possiamo scrivere gli articoli per il nostro blog in `src/content/blog/{nome_post}.md`. -## Deploy +## Appunti Una volta creato il progetto possiamo caricare appunti e dispense nella cartella `/public` + +## Deploy + +Per caricare il nostro sito su Poisson possiamo usare il comando `rsync`: + +```bash +npm run build +rsync -avz dist/ username@poisson.phc.dm.unipi.it:public_html/ +``` + +Dove `username` è il nostro username Poisson. Da notare che gli `/` alla fine di `dist/` e `public_html/` sono importanti per evitare di creare delle cartelle per errore. diff --git a/src/content/guides/2024-11-17-attivazione-poisson.md b/src/content/guides/2024-11-17-attivazione-poisson.md index d29c158..f4694f8 100644 --- a/src/content/guides/2024-11-17-attivazione-poisson.md +++ b/src/content/guides/2024-11-17-attivazione-poisson.md @@ -13,7 +13,9 @@ Poisson è un server autogestito dalla comunità studentesca di matematica, da s Se non si è mai creato un account Poisson, è necessario inviare una richiesta via email a **macchinisti@lists.dm.unipi.it** includendo: - Nome + - Cognome + - Username di ateneo (quello associato alla propria email istituzionale) Nella mail è sufficiente specificare che si desidera attivare un account Poisson. I "macchinisti" si occuperanno di attivare l'account il prima possibile. @@ -33,6 +35,7 @@ Assicuriamoci di accedere con le credenziali di ateneo per recuperare username e Per accedere a Poisson via SSH, è necessario: 1. Aprire un terminale (su Linux/Mac) o utilizzare un client SSH come PuTTY (su Windows). + 2. Eseguire il comando: ```bash @@ -76,4 +79,4 @@ Dove `` è il proprio username. ### Creazione di pagine web più complesse -Per creare pagine web più complesse, suggeriamo di utilizzare il framework [Astro](https://astro.build/), che permette di creare siti web statici in modo semplice e veloce. A questo [link](<[2024-07-30-pagina-poisson-con-astro.md](https://phc.dm.unipi.it/)>) troviamo una guida su come iniziare a utilizzare Astro per creare la nostra pagina web e caricarla su Poisson. +Per creare pagine web più complesse, suggeriamo di utilizzare il framework [Astro](https://astro.build/), che permette di creare siti web statici in modo semplice e veloce. [Abbiamo scritto una guida](/guide/pagina-poisson-con-astro) su come iniziare a utilizzare Astro per creare la nostra pagina web e caricarla su Poisson. diff --git a/src/pages/guide/index.astro b/src/pages/guide/index.astro index 60160d0..cab5027 100644 --- a/src/pages/guide/index.astro +++ b/src/pages/guide/index.astro @@ -17,7 +17,7 @@ const guides = await getCollection('guides')
{guide.data.description}
- {guide.data.tags.map(tag => ( + {guide.data.tags.map((tag: string) => ( #{tag} ))}
diff --git a/src/pages/guide/tags/[tag].astro b/src/pages/guide/tags/[tag].astro index 37bd6d8..00939c2 100644 --- a/src/pages/guide/tags/[tag].astro +++ b/src/pages/guide/tags/[tag].astro @@ -9,7 +9,7 @@ export async function getStaticPaths() { const tags: string[] = [] guides.forEach(post => { - post.data.tags.forEach(tag => { + post.data.tags.forEach((tag: string) => { tags.push(tag) }) }) @@ -40,11 +40,11 @@ const { tag, guides } = Astro.props guides.map(guide => (
- {guide.data.title} + {guide.data.title}
{guide.data.description}
- {guide.data.tags.map(tag => ( + {guide.data.tags.map((tag: string) => ( #{tag} ))}
diff --git a/src/styles/components.scss b/src/styles/components.scss index 5068cf0..c7f6e2a 100644 --- a/src/styles/components.scss +++ b/src/styles/components.scss @@ -23,11 +23,7 @@ place-content: center; font-size: 24px; - font-variation-settings: - 'FILL' 0, - 'wght' 300, - 'GRAD' 0, - 'opsz' 24; + font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; max-width: 32px; } @@ -616,12 +612,15 @@ display: grid; grid-auto-flow: row; + width: 100%; max-width: 100%; gap: 2rem; - grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(25rem, auto)); grid-auto-rows: auto; + justify-content: center; + & > .card { max-width: 25rem; } diff --git a/src/styles/typography.scss b/src/styles/typography.scss index ebd1af9..8ca1299 100644 --- a/src/styles/typography.scss +++ b/src/styles/typography.scss @@ -112,6 +112,19 @@ // margin-bottom: 1rem; // } + p[align='center'] { + margin: 1.5rem 0; + + a { + // background: color-mix(in hsl, var(--card-base-internal, #ededed), #fff 20%); + background: hsl(from var(--card-base-internal, #ededed) h calc(s + 10) calc(l - 10)); + padding: 0.5rem; + border-radius: 0.25rem; + box-shadow: 0.25rem 0.25rem 0 0 #333; + border: 2px solid #333; + } + } + p:first-child { margin-top: 0; }