joinpeertube fork
Find a file
Thomas Citharel 287045802c
Add old crowdfunding newsletters to news sections
Improve news section display, add date and <hr>

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2019-05-07 10:12:40 +02:00
app Add old crowdfunding newsletters to news sections 2019-05-07 10:12:40 +02:00
zanata Update locales 2019-02-08 10:23:11 +01:00
.babelrc Upgrade deps 2019-02-06 13:08:03 +01:00
.eslintrc Vujisation 2018-09-21 23:00:42 +02:00
.gitignore Vujisation 2018-09-21 23:00:42 +02:00
.gitlab-ci.yml Update locales 2019-02-08 10:23:11 +01:00
index.html Fix favicon url 2018-09-26 10:06:31 +02:00
Makefile Fix zanata config init 2019-02-08 14:21:12 +01:00
package-lock.json Update locales 2019-02-08 10:23:11 +01:00
package.json Upgrade deps 2019-02-06 13:08:03 +01:00
postcss.config.js Vujisation 2018-09-21 23:00:42 +02:00
README.md Vujisation 2018-09-21 23:00:42 +02:00
webpack.config.js Upgrade deps 2019-02-06 13:08:03 +01:00

Architecture de base pour un site statique réactif et internationalisé à laide de:

  • Vuejs 2
  • Vue-i18n + Vue-router pour linternationnalisation des pages
  • Import de jQuery, Bootstrap et ForkAwesome
  • YAML pour les fichiers de langue (plus lisible quun JSON mais automatiquement converti)
  • SASS pour lhabillage
  • Webpack 4 pour automatiser la construction de lensemble

En prod

Pour construire le site :

npm install
npm run prod

Les fichiers sont placés dans le dossier public. Le site fonctionne uniquement à la racine du domaine. Les pages sont prérendues avec les traductions dans le code html

En développement

Pour voir le site en local

npm run dev

Les changements sappliquent en temps réel et se voient sur http://localhost:8080/.

En preview

On peut forcer la construction du site en local avec la commande:

npm run preview

Mais lintérêt consiste surtout à voir le rendu sur les Gitlab Pages. Les fichiers sont placés dans un sous-dossier du dossier public correspondant au nom du dépôt. Les pages sont prérendues sans les traductions dans le code html (la fallbackLocale est utilisée). Celles-ci sont chargées dynamiquement (important à savoir lorsquil faut débugger un script).

├── app
│   ├── App.vue
│   ├── assets
│   │   ├── fonts
│   │   ├── icons
│   │   ├── img
│   │   └── scss
│   │       └── main.scss           # le fichier compilé est minifié dans /public/style.css
│   ├── components
│   │   ├── pages                   # exemple de pages (juste le titre change)
│   │   │   ├── About.vue
│   │   │   ├── Home.vue
│   │   │   └── HowItWorks.vue
│   │   └── partials
│   │       ├── Header.vue          # en-tête et menu de navigation
│   │       ├── I18n.vue            # switch en/fr
│   │       └── i18n.js             # script de changement de langue
│   ├── index.js                    # gestion de li18n + routage des pages + import des assets
│   └── locales                     # traductions
│       ├── en.yml
│       └── fr.yml
├── index.html                      # le fichier est simplement copié dans /public
├── package.json                    # liste des dépendances + définition de commandes npm run dev|prod
├── package-lock.json
├── postcss.config.js               # juste pour préfixer les css avec -webkit, -moz, -ms
├── README.md
└── webpack.config.js               # config webpack pour la construction du site