Giter VIP home page Giter VIP logo

lumberjack-project's Introduction

Projet example

🧐 À propos

ÉCRIRE QUELQUES LIGNES A PROPOS DU PROJET

Date de création : dd/mm/yyyy

📄 Documents

ℹ️ Fiche projet Miro

🖌 Figma

⚠️ Avant de commencer :

🚨 Si ce n'est pas deja fait ajoutez l'authentification pour Gravity Forms et ACF

  • Gravity Forms (doc) : composer config --global http-basic.gf-composer-proxy.arnaud-ritti.workers.dev licensekey [YOUR_GRAVITYFORMS_KEY]
  • ACF Pro (doc) : composer config --global http-basic.connect.advancedcustomfields.com [YOUR_ACFPRO_KEY] [PRODUCTION_URL]

Vou pouvez trouver les clés sur le codex.

💡Technos utilisées :

  • PHP : 8.2
  • MariaDB : 10.4
  • Environnement de développement : Ddev
  • Stack : Wordpress - Lumberjack - Bedrock
  • Thème : Tailwind + Twig + Webpack Encore

🏠 Hébergement

Nom de domaine : [example.com]

Hébergement : [Hebérgeur]

🌐 Liens :

📦 Installation :

1. Cloner ce dépôt :

git clone [email protected]:agence-adeliom/example.git

2. Démarrer le projet :

Dans le fichier .ddev/config.yaml, renommez le nom du projet "lumberjack" par le nom de votre projet. C'est ce qui génèrera l'URL de votre projet.

ddev start

⚠️ Si vous faites des changements dans le .ddev/config.yaml, faites un ddev restart

Installation d'ACF Pro :

Lors du composer install vous devrez renseigner les identifiants d'ACF Pro (clé disponible sur Bitwarden) :

Authentication required (connect.advancedcustomfields.com):
Username: [YOUR_ACFPRO_KEY]
Password: [PRODUCTION_URL]

Installation de FontAwesome :

⚠️ Sur ce projet, nous utilisons FontAwesome pour la gestion des icônes. Pour pouvoir installer le package, remplacer dans le fichier '.npmrc' à la racine du thème 'VOTRE_CLE' par le Package Manager Token à cette url : https://fontawesome.com/account (compte Adeliom dans Bitwarden). Une fois l'installation passée, merci de retirer la clé du fichier '.npmrc' et de la stocker dans le fichier '.env' de manière à ce qu'elle ne soit pas commit.

Ddev s'occupe de tout :

  • création des différents conteneurs docker : appserver, phpmyadmin, node, mailhog
  • ddev auth ssh
  • ddev composer install
  • ddev theme:install
  • ddev theme:dev

Une fois les containers créés, un message apparaît et vous donne toutes les infos nécessaires :

Successfully started lumberjack 
Project can be reached at https://lumberjack.ddev.site https://127.0.0.1:51905 

Compilation des assets et autres :

ddev theme:watch

📡 Déploiement :

Déploiement via Deployer

Prérequis : avoir ajouté sa clé publique ed25519 dans la liste des authorized_keys sur le serveur. Pour cela se connecter en FTP depuis Infomaniak et se rendre dans le dossier .sshà la racine du serveur.

Ensuite depuis la racine de votre projet en local :

# Préproduction (branche develop)
ddev deployer deploy staging

# Production (branche main)
ddev deployer deploy producation

🎩 Bonus

Afficher les bonus

Comment faire ?

Pour :

Accéder à la base de données

PhpMyAdmin

ddev launch --phpmyadmin

TablePlus

ddev tableplus

Sequel Pro

ddev sequelpro

Sequel Ace

ddev sequelace

Accéder à MailHog

ddev launch --mailhog

Xdebug

# Activer
ddev xdebug

# Désactiver
ddev xdebug off

Avoir un HTTPS valide en local

mkcert -install

Faire fonctionner Husky avec SourceTree

echo 'export PATH="/usr/local/bin:$PATH"' > ~/.huskyrc

Activer Mutagen

Pour améliorer les performances de l'environnement local, il peut être intéressant d'activer Mutagen

Pour l'activer :

  • accéder au fichier .ddev/config.yaml
  • passer la ligne performance_mode à mutagen
  • ddev restart

Par défaut, les dossiers des vendors (composer) et des node_modules (npm) sont exclus.

lumberjack-project's People

Contributors

arnaud-ritti avatar baptisteadeliom avatar antoinewaag avatar emmadeliom avatar djacquemard avatar lucasvigneronadeliom avatar dependabot[bot] avatar github-actions[bot] avatar samyadeliom avatar hschuhler avatar adeliom avatar lucasvigneron avatar json-adeliom avatar

Stargazers

 avatar Antoine Waag avatar

Watchers

 avatar

Forkers

baptistenoll

lumberjack-project's Issues

Page blanche lors dans lando start

Subject

Lorsque je fais un lando start qui fait un composer install, le contenu du dossier wp se vide

image

image

Il faut donc que je supprime les vendor (en sudo) et que je les installe à nouveau pour régler le problème :
image

Simon, Hugo et Lucas ont le même problème.

Twig bloc media video

Dans le fichier media.html.twig,

Changer la ligne 46 par : {% set videoURL = media.video.file %}

PHPCS - Tout est toujours surligné

Dans les fichiers PHP, tout est toujours surligné malgré les configurations PHPStorm. Que faut-il faire pour que phpcs puisse être accepté ?

image

CSS Gutenberg

Ajouter le CSS pour l'éditeur Gutenberg :

/**
     * Ajouter une feuille de style pour l’éditeur dans l’admin
     * @Action(tag="enqueue_block_editor_assets")
     */
    #[Action("enqueue_block_editor_assets")]
    public static function editorStyle(): void
    {
        Assets::enqueue('styles/editor', 'styles/editor', []);
    }

CSS Wysiwyg

Ajouter ce style pour gérer les marges entre les éléments dans le wysiwyg :

#tinymce,
    .wysiwyg {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        ul,
        p,
        li {
            & + ul,
            & + li,
            & + p {
                @apply mt-4;
            }
        }
    }

Possible d'ajouter la classe Post_Type_Columns ?

Sur l'ancien starter, on utilise le Post d'Adeliom qui utilisait les utils de wp-extensions.

On avait la possibilité d'ajouter des colonnes dans l'admin de manière très simple grâce à cette classe :
https://github.com/agence-adeliom/lumberjack-extensions/blob/master/src/Utils/Types/PostTypeColumns.php

(et c'était cool car c'est vraiment relou à faire sinon ^^")

Est-ce que tu crois que l'on pourrait le rajouter ? Je ne sais pas trop ce que ça implique en terme de dev.

Exemple :

  return [
            'name_plural' => __('GF Forestier'),
            'args' => [
                /**
                 * For a list of possible menu-icons see
                 * https://developer.wordpress.org/resource/dashicons/
                 */
                'menu_icon' => 'dashicons-palmtree',
                'hierarchical' => false,
                'has_archive' => false,
                'show_in_rest' => true,
                'supports' => [
                    'title',
                    'excerpt',
                    'editor',
                ],
                'labels' => $labels,
                // Whether post is accessible in the frontend
                'public' => true,
                'rewrite' => [
                    'slug' => 'gfi',
                    'with_front' => false,
                ],
                'template' => [
                    ['acf/header-classic-block']
                ]
            ],
            'admin_columns' => [
                'date' => false, // Disable date in list view
            ],

TPL - liste des articles (index.php)

Dans le fichier index.php du thème, Timber ne récupère pas correctement l'ID de la page du listing des articles.

Il faut le récupérer et le passer manuellement en paramètre afin que cela fonctionne :

$context['page'] = new Page(get_site_option('page_for_posts'));

à vérifier que cela fonctionne bien avec le multilingue.

Le retour de Figmadeliom

Pourrait-on avoir un fonctionnement comme on avait avant qui permet d'extraire les couleurs et les tailles de typo de Figma pour les ajouter dans une config tailwind + l'ajouter dans les fichiers twig adéquat ?

fix: install.php / deploy.php

.installer -> wrong test and add needed true variable on json_decode
deploy.php -> wrong name of env variable WP_ENV vs APP_ENV

Page de maintenance

Pourrait-on réfléchir à un plugin ou autre permettant de générer et gérer une page de maintenance ?

[TWIG] Sensibilisation sur les include only

Il pourrait être intéressant de faire en sorte de n'utiliser que des {% include %} Twig en précisant systématiquement les variables devant être passées d'un template à l'autre, tout en précisant que seules les variables précisées doivent être passées :

# Exemple d'un include sans rien préciser
{% include "helper/_icon-fabrication-francaise.html.twig" %}

# Exemple d'un include dans lequel on précise la·les variable·s à passer par une association clé / valeur
{% include "helper/_icon-fabrication-francaise.html.twig" with {
    white: true
} %}

# Exemple de ce qui devrait être fait, en précisant les variables et en ajoutant l'attribut only
{% include "helper/_icon-fabrication-francaise.html.twig" with {
    white: true
} only %}

Ne pas passer de variables spécifiques / passer des variables sans préciser only implique que l'ensemble du contexte Twig est passé d'un template à l'autre.

  • D'une part cela pourrait éventuellement avoir des conséquences en termes de performances
  • D'autre part, cela peut amener à des variables écrasées par celles d'un template parent
  • Préciser les variables permet également, lorsque l'on visualise le code, de savoir quelles variables sont nécessaires pour que le template s'affiche convenablement

Au final, préciser les variables rend certes l'inclusion de templates un peu moins "magique", mais en termes de maintenabilité, c'est sûrement beaucoup plus optimal 👍

Composants : ajout accessibilité

Ajouter les éléments de base pour répondre aux critères d'accessibilité :

  • aria labels, role, title...
  • focus : boutons, cards

Video filtre CSS

Ajouter un filtre noir léger sur l'image de la vidéo :

<div class="absolute w-full h-full top-0 left-0 bg-black/40"></div>

Ajout de ddev

  • Ajouter dans .installer
elseif($_ENV['IS_DDEV_PROJECT']){
    Config::define('WP_HOME', 'https://'.$_ENV['DDEV_HOSTNAME']);
    Config::define('WP_SITEURL', Config::get('WP_HOME'));
    Config::define('WP_CONTENT_URL', Config::get('WP_HOME') . Config::get('CONTENT_DIR'));
    Config::define('DB_NAME', $_ENV['PGDATABASE']);
    Config::define('DB_USER', $_ENV['PGUSER']);
    Config::define('DB_PASSWORD', $_ENV['PGPASSWORD']);
    Config::define('DB_HOST', $_ENV['PGHOST']);
}
  • Mettre le dossier .dedev avec le config.yaml de base

Déclaration Post Type

Modifier la configuration par défaut :

return [
            'labels' => [
                'name' => __('Questions'),
                'singular_name' => __('Question'),
                'add_new' => __('Ajouter une question'),
            ],
            'public' => false,
            'show_ui' => true,
            'show_in_menu' => true,
        ];

Mettre à jour la dépendance Swiper

Revoir l'import des modules depuis la version 10

import { Navigation } from 'swiper/modules';

Idem pour le typage depuis swiper/types

Il y a en revanche un problème d'import qui semble être lié à Swiper. En attendant, supprimer le type si besoin.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.