Etapes pour l'installation du Webkit UmanIT (juillet 2019). En attendant la création d'un Bundle par le GT Back.
! Ce fichier est temporaire !
Nous allons remttre à jour tout le dossier pour avoir les bons éléments au même endroit.
En attendant, voilà la procédure de base brute de décoffrage.
TODO à venir : Mise en forme du guide de style en lui-même
Que le projet soit Symfony ou non , suivre la procédure : https://symfony.com/doc/current/frontend/encore/installation.html
A la racine du projet, créer le dossier assets à reprendre de umanit/css-starterkit sur Github.
// webpack.config.js
const Encore = require('@symfony/webpack-encore');
let path = require('path');
let glob = require('glob');
/* *********************************************************************************************************************
* Configuration générale * @todo : à l'initialisation du projet, renseigner ces letiables
* ******************************************************************************************************************* */
// Chemin où se trouve le dossier assets du starterkit
const assetPath = './assets';
// Les assets compilés seront stockés ici
const outputPath = 'public/build';
// Path publique où le serveur web ira chercher les fichiers
const publicPath = '/build';
/* *********************************************************************************************************************
* Fin de la configuration * ******************************************************************************************************************* */
Encore
// Les assets compilés seront stockés ici
.setOutputPath(outputPath)
// Path publique relatif à la racine web
.setPublicPath(publicPath)
// Purge le répertoire de build avant execution
.cleanupOutputBeforeBuild()
// Copie les assets statics (le répertoire de destination est déduit).
.copyFiles([
{
from: './assets/img',
to: 'images/[path][name].[ext]',
},
{
from: './assets/fav',
to: 'fav/[path][name].[ext]',
},
{
from: './assets/fonts',
to: 'fonts/[path][name].[ext]',
}
])
// Active SASS et Compass
.enableSassLoader()
.enablePostCssLoader()
// allow legacy applications to use $/jQuery as a global letiable
.autoProvidejQuery()
// Ajout des entrées JS dynamiquement
let entryArray = glob.sync(
assetPath + '/js/**/*.js'
);
let name = '';
for (let x in entryArray) {
name = entryArray[x].split('/').pop();
Encore.addEntry(name.replace('.js', ''), entryArray[x]);
}
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
Encore
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app .enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableSourceMaps()
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// export the final configuration
module.exports = Encore.getWebpackConfig();
- Dans
projet/config/routes/devcréerstyleguide.yaml
app.style_guide:
path: /style-guide/{template}
controller: App\Controller\StyleGuideController
requirements:
template: .+
- Dans le terminal, dans le projet :
docker-compose exec php bin/console make:controllerCette commande crée le fichierStyleGuideControllerdanssrc/ControllerEditer ce fichier avec :
<?php
declare(strict_types=1);
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
final class StyleGuideController extends AbstractController
{
public function __invoke(string $template)
{ return $this->render('style_guide/' . $template . '.html.twig');
}}
Dans projet/templates, créer le dossier style_guide, puis structurer comme suit :
style_guide
|_ partials
|_ progress.html.twig
|_ base.html.twig
|_ index.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</body>
</html>
{% extends 'style_guide/base.html.twig' %}
{% block title %}ouais{% endblock %}
{% block body %}
<table>
{% include 'style_guide/partials/progress.html.twig' with {
template: 'block',
title: 'Block',
tags: ['layout'],
description: 'Block description',
progress: 30
} %}
</table>
{% endblock %}
Le {% include %} est à répéter autant de fois qu'il y a d'éléments ajoutés dans le dossier.
La ligne répétée à chacun de ses appels dans le index.html.twig.
<tr>
<td width="40%">
<a href="{{ path('app.style_guide', { template: template|default('index') }) }}">{{ title|default('Unnamed template') }}</a>
<p>
{% for tag in tags|default([]) %}
<small class="badge badge-warning">{{ tag|upper }}</small>
{% endfor %}
</p>
<p>
<small>{{ description|default('No description provided.') }}</small>
</p>
</td>
<td width="60%">
<div class="progress">
<div class="progress-bar" style="width:{{ progress|default(0) }};">{{ progress|default(0) }}</div>
</div>
</td>
</tr>
{
"devDependencies": {
"@symfony/webpack-encore": "^0.27.0",
"core-js": "^3.0.0",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.0.1",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
},
"dependencies": {
"autoprefixer": "^9.6.1",
"bootstrap": "4.3.1"
}
}
En raison de la présence de .enablePostCssLoader() dans le fichier webpack.config.js il nous faut ajouter le fichier postcss.config.js à la racine du projet.
module.exports = {
plugins: {
// include whatever plugins you want
// but make sure you install these via yarn or npm!
// add browserslist config to package.json (see below)
autoprefixer: {}
}
}
Dans terminal, dans le projet :
docker-compose exec node yarn install
Dans projet/scss/style.scss , penser à activer/désactiver/ajouter les lignes selon les besoins.
A placer à la racine du site
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.{twig,js}]
indent_size = 2
[docker-compose.yml]
indent_size = 2
[Makefile]
indent_style = tab