fix: guide links and firefox/chrome styles

main
parent c868cd4706
commit f90493ea34

@ -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.

@ -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 `<username>` è 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.

@ -17,7 +17,7 @@ const guides = await getCollection('guides')
</div>
<div class="text">{guide.data.description}</div>
<div class="tags">
{guide.data.tags.map(tag => (
{guide.data.tags.map((tag: string) => (
<a href={`/guide/tags/${tag}`}>#{tag}</a>
))}
</div>

@ -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 => (
<div class="card">
<div class="title">
<a href={`/guide/${guide.slug}`}>{guide.data.title}</a>
<a href={`/guide/${guide.data.id}`}>{guide.data.title}</a>
</div>
<div class="text">{guide.data.description}</div>
<div class="tags">
{guide.data.tags.map(tag => (
{guide.data.tags.map((tag: string) => (
<a href={`/guide/tags/${tag}`}>#{tag}</a>
))}
</div>

@ -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;
}

@ -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;
}

Loading…
Cancel
Save