feat: homepage and previews

.all-contributorsrc

@@ -3,7 +3,7 @@
   "projectOwner": "KernelPanic92",
   "files": [
     "README.md",
-    "web/pages/altro/contributori.md"
+    "web/pages/altro/progetto.md"
   ],
   "commitType": "docs",
   "commitConvention": "angular",

.github/workflows/vercel-production.yml

@@ -14,6 +14,9 @@ jobs:
       - uses: pnpm/action-setup@v4
         with:
           version: 9.1.2
+      - name: Install magick
+        working-directory: ./web
+        run: apt install imagemagick graphicsmagick
       - name: Install Vercel CLI
         working-directory: ./web
         run: pnpm install --global vercel@latest

web/package.json

@@ -29,6 +29,7 @@
     "case": "^1.6.3",
     "clsx": "^2.1.1",
     "glob": "^10.3.15",
+    "gm": "^1.25.0",
     "gray-matter": "^4.0.3",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
@@ -40,9 +41,11 @@
     "react-dom": "18.2.0",
     "rimraf": "^5.0.6",
     "sharp": "^0.33.3",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "yaml": "^2.4.2"
   },
   "devDependencies": {
+    "@types/gm": "^1.25.4",
     "@types/lodash": "^4.17.1",
     "@types/lodash-es": "^4.17.12",
     "@types/mustache": "^4.2.5",

web/pages/_meta.json

@@ -20,9 +20,9 @@
     "type": "page",
     "title": "Homebrew"
   },
-  "downloads": {
+  "materiali": {
     "type": "page",
-    "title": "Downloads"
+    "title": "Materiali"
   },
   "altro": {
     "type": "page",

web/pages/altro/_meta.json

@@ -1,4 +1,4 @@
 {
-    "glossario-differenze": "Glossario delle differenze",
-    "crediti": "Crediti"
+    "progetto": "Il Progetto",
+    "glossario-differenze": "Glossario delle differenze"
 }

web/pages/altro/glossario-differenze.mdx

@@ -1,28 +1,29 @@
 # Glossario delle differenze
 
-| Dungeonworld.it       | Narrattiva         | Originale           | Categoria         |
-|-----------------------|--------------------|---------------------|-------------------|
-| Taglia e Spacca       | Assalire           | Hack and Slash      | Mosse Base        |
-| Raffica               | Tirare             | Volley              | Mosse Base        |
-| Discernere Realtà     | Percepire la Realtà| Discern Realities   | Mosse Base        |
-| Declamare Conoscenze  | Rivelare Conoscenze| Spout Lore          | Mosse Base        |
-| Parlamentare          | Parlè              | Parley              | Mosse Base        |
-| Recuperare le Forze   | Recuperare         | Recover             | Mosse Speciali   |
-| Reclutare             | Assoldare          | Recruit             | Mosse Speciali   |
-| Ricercato             | WANTED             | Outstanding Warrants| Mosse Speciali   |
-| Capacità              | Caratteristiche    | Abilities           | Terminologia      |
-| Debilitazioni         | Afflizioni         | Debilities          | Terminologia      |
-| Gregario              | Mercenario         | Hireling            | Terminologia      |
-| +1 al prossimo tiro   | +1 prossimo        | +1 forward          | Terminologia      |
-| Ramingo               | Ranger             | Ranger              | Classe            |
-| Mezzuomo              | Halfling           | Halfling            | Razza             |
-| Possente              | Impatto            | Forceful            | Etichetta Armi   |
-| Corta                 | Intimo             | Hand                | Etichetta Armi (Portata) |
-| Media                 | Corpo-a-corpo      | Close               | Etichetta Armi (Portata) |
-| Lunga                 | Portata            | Reach               | Etichetta Armi (Portata) |
-| Misera                | Sporca             | Dirt                | Etichetta Insediamenti  |
-| Benestante            | Ricca              | Wealthy             | Etichetta Insediamenti  |
-| Ricca                 | Lussuosa           | Rich                | Etichetta Insediamenti  |
-| Anarchico             | Fuorilegge         | Lawless             | Etichetta Insediamenti  |
-| Flagello              | Rovina             | Blight              | Etichetta Insediamenti  |
-| Accumulatore          | Avido              | Hoarder             | Etichetta Mostri |
+| Dungeon World Italia  | Dungeonworld.it    | Narrattiva         | Originale           | Categoria                |
+|-----------------------|--------------------|--------------------|---------------------|--------------------------|
+| Taglia e Spacca       | Taglia e Spacca    | Assalire           | Hack and Slash      | Mosse Base               |
+| Raffica               | Raffica            | Tirare             | Volley              | Mosse Base               |
+| Discernere Realtà     | Discernere Realtà  | Percepire la Realtà| Discern Realities   | Mosse Base               |
+| Declamare Conoscenze  | Declamare Conoscenze| Rivelare Conoscenze| Spout Lore          | Mosse Base               |
+| Parlamentare          | Parlamentare       | Parlè              | Parley              | Mosse Base               |
+| Recuperare le Forze   | Recuperare le Forze| Recuperare         | Recover             | Mosse Speciali           |
+| Reclutare             | Reclutare          | Assoldare          | Recruit             | Mosse Speciali           |
+| Ricercato             | Ricercato          | WANTED             | Outstanding Warrants| Mosse Speciali           |
+| Capacità              | Capacità           | Caratteristiche    | Abilities           | Terminologia             |
+| Debilitazioni         | Debilitazioni      | Afflizioni         | Debilities          | Terminologia             |
+| Gregario              | Gregario           | Mercenario         | Hireling            | Terminologia             |
+| +1 al prossimo tiro   | +1 al prossimo tiro| +1 prossimo        | +1 forward          | Terminologia             |
+| Ramingo               | Ramingo            | Ranger             | Ranger              | Classe                   |
+| Mezzuomo              | Mezzuomo           | Halfling           | Halfling            | Razza                    |
+| Possente              | Possente           | Impatto            | Forceful            | Etichetta Armi           |
+| Corta                 | Corta              | Intimo             | Hand                | Etichetta Armi (Portata) |
+| Media                 | Media              | Corpo-a-corpo      | Close               | Etichetta Armi (Portata) |
+| Lunga                 | Lunga              | Portata            | Reach               | Etichetta Armi (Portata) |
+| Misera                | Misera             | Sporca             | Dirt                | Etichetta Insediamenti   |
+| Benestante            | Benestante         | Ricca              | Wealthy             | Etichetta Insediamenti   |
+| Ricca                 | Ricca              | Lussuosa           | Rich                | Etichetta Insediamenti   |
+| Anarchico             | Anarchico          | Fuorilegge         | Lawless             | Etichetta Insediamenti   |
+| Flagello              | Flagello           | Rovina             | Blight              | Etichetta Insediamenti   |
+| Accumulatore          | Accumulatore       | Avido              | Hoarder             | Etichetta Mostri         |
+

web/pages/altro/progetto.md

@@ -0,0 +1,59 @@
+---
+title: Il progetto
+description: "L'obiettivo del progetto è quello di offrire una traduzione completa e accurata di Dungeon World e dei materiali homebrew realizzati nel tempo, creando un unico punto di accesso e facilmente consultabile per tutti gli appassionati di questo gioco.
+Crediamo che ogni appassionato meriti di avere accesso a strumenti di gioco ben tradotti e facilmente reperibili. Dungeon World Italia punta a soddisfare questa esigenza e a fornire un servizio utile e gratuito alla comunità."
+---
+
+# Il progetto
+
+Questo sito nasce dall'idea di centralizzare e ampliare le risorse
+disponibili per Dungeon World per i giocatori italiani, partendo dal lavoro preesistente di dungeonworld.it e EPICentrum.it.
+
+## Il team e i nostri contributori
+
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.behance.net/sliparota"><img src="https://avatars.githubusercontent.com/u/113120713?v=4?s=100" width="100px;" alt="Samantha Liparota"/><br /><sub><b>Samantha Liparota</b></sub></a><br /><a href="#design-samlipa" title="Design">🎨</a> <a href="#review-samlipa" title="Reviewed Pull Requests">👀</a> <a href="#translation-samlipa" title="Translation">🌍</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.iacopociao.com"><img src="https://avatars.githubusercontent.com/u/6616184?v=4?s=100" width="100px;" alt="Iacopo Ciao"/><br /><sub><b>Iacopo Ciao</b></sub></a><br /><a href="#review-KernelPanic92" title="Reviewed Pull Requests">👀</a> <a href="#code-KernelPanic92" title="Code">💻</a></td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+## Scopo e Obiettivi
+
+L'obiettivo del progetto è quello di offrire una traduzione completa e accurata di Dungeon World e dei materiali homebrew realizzati nel tempo, creando un unico punto di accesso e facilmente consultabile per tutti gli appassionati di questo gioco.
+Crediamo che ogni appassionato meriti di avere accesso a strumenti di gioco ben tradotti e facilmente reperibili. Dungeon World Italia punta a soddisfare questa esigenza e a fornire un servizio utile e gratuito alla comunità.
+
+## Origine del Progetto
+
+Questo progetto è un fork di [dungeonworld.it](https://www.dungeonworld.it) con le traduzioni complete del sito [dwgazetteer](https://www.book.dwgazetteer.com) e il lavoro di [EPICentrum.it](https://www.epicentrum.it).
+La piattaforma offre una traduzione completa di **[Dungeon World](https://www.dungeonworld.com)** di **Adam Koebel** e **[Sage LaTorra](https://www.latorra.org)**, sviluppata con l'intento di fornire una risorsa gratuita e accessibile a tutti.
+
+Non siamo affiliati con [Narrattiva](https://www.narrativa.it) né con altri enti o associazioni. La nostra piattaforma è completamente gratuita e liberamente consultabile online, offrendo un'alternativa alle risorse esistenti.
+
+[Qui il glossario delle differenze con le varie versioni di traduzione di Dungeon World.](/altro/glossario-differenze)
+
+
+## Cosa offriamo
+
+- <b>Traduzione Completa di Dungeon World:</b> Una traduzione dettagliata e fedele al testo originale, curata per garantire coerenza e chiarezza.
+
+- <b>Accesso Facile e Immediato:</b> Form di ricerca dei materiali indicizzati e una struttura intuitiva per navigare tra le regole, le risorse e i materiali di gioco.
+- <b>Indipendenza e Trasparenza:</b> Una risorsa sviluppata in modo indipendente, mantenendo alta la qualità e l'affidabilità del contenuto senza vincoli commerciali.
+- <b>Hub per i contributi:</b> Vogliamo essere l'entry point per chiunque desideri creare materiale fan-made e contribuire alla comunità di Dungeon World, fornendo strumenti e risorse per aiutare i creatori a sviluppare e condividere in maniera rapida e sempre reperibile il loro contenuto originale.
+
+## Licenze
+
+Il sito è rilasciato sotto licenza [CC BY-SA 4.0 2024](https://creativecommons.org/licenses/by-sa/4.0/deed.it).
+I contenuti del sito, comprensivi di dati, notizie, informazioni, immagini, grafici, disegni, marchi e nomi a dominio, sono di proprietà dei rispettivi autori e, se non diversamente indicato, coperti da [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/deed.it).
+Molti contenuti sono reperiti da internet, ma tutti i relativi diritti rimangono dei rispettivi autori. Se l’uso di questi contenuti avesse involontariamente violato le norme in materia di diritto d’autore, avvisateci e noi li disintegreremo all’istante.

web/pages/downloads.mdx → web/pages/materiali.mdx

@@ -2,7 +2,7 @@ import { DownloadLink } from '@/components/download-link';
 import { useData } from 'nextra/data';
 import { dungeonWorldData, homebrewGroupedByAuthorsAndCollections } from '@/data/dungeon-world.ts';
 
-# Downloads
+# Materiali scaricabili
 
 Per comodo riferimento, vengono qui elencati tutti i materiali scaricabili e stampabili.
 

web/pages/altro/contributori.md → web/public/contributors.md

@@ -1,7 +1,3 @@
-# Contributori
-
-Un enorme grazie per tutti coloro che hanno dato il loro contributo per la crescita di questo sito e del repository Github ❤️
-
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
@@ -13,8 +9,7 @@ Un enorme grazie per tutti coloro che hanno dato il loro contributo per la cresc
     </tr>
   </tbody>
 </table>
-
 <!-- markdownlint-restore -->
 <!-- prettier-ignore-end -->
 
-<!-- ALL-CONTRIBUTORS-LIST:END -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->

web/scripts/sync-materials/generate-asset.ts

@@ -3,9 +3,9 @@ import { copyFileSync, mkdirSync } from "fs";
 import Path from "path";
 import { Asset } from "./models";
 import { Asset as AssetModel} from "../../src/models";
+import gm from 'gm';
 
-
-export function generateAsset(publicFolderPath: string, path: string, metadata: Asset): AssetModel {
+export const generateAsset = async (publicFolderPath: string, path: string, metadata: Asset): Promise<AssetModel> => {
     const ext = Path.extname(metadata.path);
     const assetPath = Path.join(path, Case.kebab(metadata.name) + ext);
 
@@ -16,5 +16,30 @@ export function generateAsset(publicFolderPath: string, path: string, metadata:
     return {
         name: Case.title(metadata.name),
         url: encodeURI(assetPath),
-    }
+        thumbnail: await createThumbnail(publicFolderPath, path, metadata),
+    };
 };
+
+
+const createThumbnail = async (publicFolderPath: string, path: string, metadata: Asset) => {
+    const assetPath = Path.join(path, Case.kebab(metadata.name) + '-thumbnail.webp');
+
+    const assetPathDestination = Path.join(publicFolderPath, assetPath);
+    mkdirSync(Path.dirname(assetPathDestination), {recursive: true});
+    await new Promise<void>((resolve, reject) => {
+        gm(`${metadata.path}[0]`)
+        .setFormat('webp')
+        .antialias(true)
+        .resize(200, 283, '^')
+        .gravity('Center')
+        .extent(200, 283)
+        .write(assetPathDestination, (error) => {
+            if (error) {
+                reject(error);
+            } else {
+                resolve();
+            }
+        })
+    });
+    return encodeURI(assetPath);
+}