Compare commits
35 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
e58a036179 | ||
|
|
c14849a2a3 | ||
|
|
54f9a1603d | ||
|
|
6f335613cd | ||
|
|
6736082451 | ||
|
|
6b6530b4ce | ||
|
|
9f8bbb6368 | ||
|
|
78e4e6ac8d | ||
|
|
daef670236 | ||
|
|
26bcfeec64 | ||
|
|
1c1f514531 | ||
|
|
a9c8ef66db | ||
|
|
44a3e815c7 | ||
|
|
129f436475 | ||
|
|
5cf3516523 | ||
|
|
e86aafb1da | ||
|
|
3538c79ce1 | ||
|
|
56d9ba39ec | ||
|
|
004bb24736 | ||
|
|
c78b542b86 | ||
|
|
884d942d79 | ||
|
|
faefbb2ec6 | ||
|
|
110e5cfa66 | ||
|
|
c84dc74ff4 | ||
|
|
f8c8371b38 | ||
|
|
51e7baf8f5 | ||
|
|
b4bb1e7e9d | ||
|
|
d21b4d83a3 | ||
|
|
3d0bcd3b26 | ||
|
|
3bbbb1c023 | ||
|
|
5e69cdc7b6 | ||
|
|
7f3e85d40e | ||
|
|
5b581c437c | ||
|
|
27162d625d | ||
|
|
aebc1708cf |
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
.idea
|
||||
.history
|
||||
*.bash*
|
||||
*.bash
|
||||
.vscode
|
||||
.env
|
||||
3
.idea/.gitignore
generated
vendored
3
.idea/.gitignore
generated
vendored
@@ -1,3 +0,0 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
1
.idea/.name
generated
1
.idea/.name
generated
@@ -1 +0,0 @@
|
||||
README.md
|
||||
6
.idea/misc.xml
generated
6
.idea/misc.xml
generated
@@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectRootManager" version="2" languageLevel="JDK_22" default="true" project-jdk-name="22" project-jdk-type="JavaSDK">
|
||||
<output url="file://$PROJECT_DIR$/out" />
|
||||
</component>
|
||||
</project>
|
||||
8
.idea/modules.xml
generated
8
.idea/modules.xml
generated
@@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/plain-html-redo.iml" filepath="$PROJECT_DIR$/.idea/plain-html-redo.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
9
.idea/plain-html-redo.iml
generated
9
.idea/plain-html-redo.iml
generated
@@ -1,9 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="JAVA_MODULE" version="4">
|
||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||
<exclude-output />
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
6
.idea/vcs.xml
generated
6
.idea/vcs.xml
generated
@@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
291
README.md
291
README.md
@@ -1,291 +0,0 @@
|
||||
L'URL FINALE == https://bonnebulle.gitlab.io/plain-html-redo
|
||||
Redirige vers = https://plain-html-redo-751743.gitlab.io
|
||||
( URL Non personelle )
|
||||
. . .
|
||||
hébergement gratuit !
|
||||
|
||||
---
|
||||
|
||||
Tuto :
|
||||
|
||||
Objectif :
|
||||
Cloner un projet initial existant
|
||||
( "> git clone +url" )
|
||||
Comprendre le versionning + fork
|
||||
( sauvegarder l'état d'un projet : "> git commit" + "> git push" )
|
||||
Revenir dans le temps à un état de sauvegarde passé
|
||||
( grace à son identifiant unique : hash )
|
||||
Auto-héberger une page sur GitLab
|
||||
( gratuit )
|
||||
|
||||
|
||||
Éditer du code ...
|
||||
Le partager et envoyer les dernières modifications :
|
||||
GITLAB permet de travailler sans rien installer !
|
||||
Il embarque un IDE (éditeur de code accessible en ligne )
|
||||
On va travailler à partir de cet interface web
|
||||
|
||||
.... mais on peut aussi...
|
||||
INSTALLER EN LOCAL :
|
||||
|
||||
+ VSCODE / CODIUM :
|
||||
? https://alternativeto.net/software/codium/
|
||||
! https://github.com/Alex313031/codium/releases
|
||||
( WINDOWS : win32/64 .exe /ou/ MAC : x64/arm64 .dmg )
|
||||
! https://code.visualstudio.com/download
|
||||
|
||||
passer en Francais :
|
||||
https://www.it-connect.fr/tuto-changer-langue-visual-studio-code-francais-anglais/
|
||||
|
||||
? Alt : JETBRAINS IDE
|
||||
https://www.jetbrains.com/webstorm/
|
||||
|
||||
|
||||
MAIS AUSSI :
|
||||
|
||||
+ Terminal :
|
||||
( utiliser la ligne de commande )
|
||||
https://openclassrooms.com/fr/courses/6173491-apprenez-a-utiliser-la-ligne-de-commande-dans-un-terminal/6349461-decouvrez-le-terminal#r-6349452
|
||||
|
||||
! Tuto (Anglais)
|
||||
https://coolguy.website/map-is-the-territory/introduction.html
|
||||
|
||||
|
||||
+ Git :
|
||||
https://git-scm.com/downloads
|
||||
|
||||
Vérifier via Terminal
|
||||
> git -v
|
||||
|
||||
---
|
||||
|
||||
|
||||
CREER UN COMPTE GITlab
|
||||
https://gitlab.com/users/sign_up
|
||||
|
||||
On aurra aussi besoin d'un Token d'accès....
|
||||
Un code long qui donne certaines autorisations ( par exemple pour pull/push/commit, etc )
|
||||
---> TOKEN
|
||||
PAGE du PROJET -> GAUCHE
|
||||
-> Settings > Access Token
|
||||
--> Add New Token (boutton gris)
|
||||
--- Token name ...
|
||||
--- Select a role -> Owner
|
||||
-- Select scopes -->
|
||||
---- read_repository (pull)
|
||||
---- write_repository (push)
|
||||
|
||||
Vérfier / Révoquer les acces :
|
||||
--> GOTO : https://gitlab.com/-/profile/preferences
|
||||
|
||||
|
||||
. . .
|
||||
|
||||
FORK PROJET
|
||||
PAGE d'exemple :
|
||||
https://gitlab.com/pages/plain-html
|
||||
|
||||
On clic "Fork"
|
||||
--> Cela va copier le projet existant dans tes projets sur les serveurs de GitLab/Hub
|
||||
--> Et tu pourras alors modifier cette version (copie) en toute libertée
|
||||
|
||||
On présice la desintaion + nom du projet
|
||||
EX/ https://gitlab.com/bonnebulle/plain-html-redo
|
||||
|
||||
. . .
|
||||
|
||||
Pour rendre le projet accessible en ligne, hébergé par GitLab/Hub...
|
||||
"Transformer" en PAGE :
|
||||
Dans le projet actuel ->
|
||||
-> GAUCHE -> Build > Pipeline
|
||||
-> New Pipeline (boutton bleu)
|
||||
-> Run Pipeline (boutton bleu)
|
||||
|
||||
RESULTAT :
|
||||
PAGE URL ==
|
||||
- https://USERNAME.gitlab.io/PROJECT_NAME
|
||||
|
||||
. . .
|
||||
|
||||
RETOUR AU PROJET
|
||||
--> Code (boutton bleu)
|
||||
--> Ouvrir avec....
|
||||
---> Va ouvrir un IDE...
|
||||
|
||||
/SI/ on veut cloner+ouvrir le projet en local...
|
||||
( avec vscode/codium/IDE installé sur l'ordinateur )
|
||||
Gitlab va proposer de clonner le projet avant de l'ouvrir avec ....
|
||||
|
||||
/SI/ on veut travailler en ligne (IDE GitLab)...
|
||||
On peut ouvrir un fichier spécifique
|
||||
EX/ https://gitlab.com/bonnebulle/plain-html-redo/-/blob/main/README.md
|
||||
--> Edit (boutton bleu)
|
||||
--> Open in Web IDE...
|
||||
|
||||
|
||||
DEPUIS CET IDE, on va pouvoir sauvegarder l'état d'avancement du projet en utilisant GIT
|
||||
( qui se charge :
|
||||
- de cloner "> clone https://gitlab.com/bonnebulle/plain-html-redo.git"
|
||||
- de télécharger l'état actuel du projet présent sur le serveur git "> git pull"
|
||||
- d'envoyer / sauvegarder "> git commit" + "> git push"
|
||||
. . . )
|
||||
|
||||
Les IDE proposent d'envoyer ces commandes Git sans utiliser de terminal :
|
||||
via leur GUI ( Graphical User Interface )...
|
||||
en appuyant sur des bouttons visuels !
|
||||
- Ils donnent à voir l'état actuel du projet dans un Historique + Graph...
|
||||
Ils permettent...
|
||||
- d'ajouter les dernières modifications : "> git add *"
|
||||
- de Commit ( sauvegarder avec un titre ) "> git commit" ...
|
||||
... en toute simplicité !
|
||||
... mais pour apprendre il est bien de se familiariser avec les lignes de commande...
|
||||
... de passer du temps via le terminal !
|
||||
... ainsi on comprend ce qui se passe "derière" quand on clic les boutons
|
||||
... ( quelles commandes sont envoyées )
|
||||
|
||||
- Git - Git dans Bash
|
||||
↳ https://git-scm.com/book/fr/v2/Annexe-A:-Git-dans-d%e2%80%99autres-environnements-Git-dans-Bash
|
||||
|
||||
- Git - Git dans IntelliJ / PyCharm / WebStorm / PhpStorm / RubyMine
|
||||
↳ https://git-scm.com/book/fr/v2/Annexe-A:-Git-dans-d%e2%80%99autres-environnements-Git-dans-IntelliJ-/-PyCharm-/-WebStorm-/ -PhpStorm-/-RubyMine
|
||||
|
||||
- Git - Git dans Visual Studio Code
|
||||
↳ https://git-scm.com/book/fr/v2/Annexe-A:-Git-dans-d%e2%80%99autres-environnements-Git-dans-Visual-Studio-Code
|
||||
|
||||
|
||||
---
|
||||
|
||||
CHECKOUT
|
||||
Changer de branche
|
||||
TUTO https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Gestion-des-branches
|
||||
|
||||
Etat des fichiers :
|
||||
> git status
|
||||
|
||||
Ajouter un fichier (ou tous *)
|
||||
> git add ./README.md
|
||||
> git add *
|
||||
|
||||
Git commit
|
||||
> git commit
|
||||
... on écrit les modifications apportées dans le navigateur text
|
||||
... on peut installer nano https://command-not-found.com/nano
|
||||
... ou utiliser vim...
|
||||
.... on tappe -- ESCAPE + ":a" pour rendrer en mod édition
|
||||
.... on quitte+save en tappant -- ESCAPE + ":wq"
|
||||
.... on quitte no_save tappant -- ESCAPE + ":q!"
|
||||
/OU/ directement depuis la commmande
|
||||
> git commit -m 'initial commit of my project'
|
||||
|
||||
Visualiser les modifications :
|
||||
> git log -p -2
|
||||
> git log --pretty=oneline
|
||||
|
||||
|
||||
voir l'historique
|
||||
> git log --pretty=format:"%h %s" --graph
|
||||
|
||||
annuler un ajout sur un fichier
|
||||
> git checkout -- CONTRIBUTING.md
|
||||
restaure
|
||||
> git restore --staged CONTRIBUTING.md
|
||||
|
||||
|
||||
|
||||
|
||||
BRANCHES
|
||||
TUTO : https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Les-branches-en-bref
|
||||
|
||||
voir les branches ( locales + distantes )
|
||||
> git branch --all
|
||||
|
||||
changer (basculer de branche)
|
||||
> git checkout -b forkit
|
||||
|
||||
revenir/changer à la branche d'origine "main" (ou "forkit")
|
||||
> git checkout main
|
||||
> git checkout forkit
|
||||
|
||||
envoyer les modifications à une branche spécifique
|
||||
> git push --set-upstream origin main
|
||||
|
||||
merge
|
||||
> git merge forkit
|
||||
|
||||
gestion de conflit de versions
|
||||
TUTO :
|
||||
- https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Branches-et-fusions%C2%A0:-les-bases#s_basic_merging
|
||||
> git status
|
||||
> git mergetool
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
Example plain HTML site using GitLab Pages.
|
||||
|
||||
Learn more about GitLab Pages at https://pages.gitlab.io and the official
|
||||
documentation https://docs.gitlab.com/ce/user/project/pages/.
|
||||
|
||||
---
|
||||
|
||||
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
||||
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
||||
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
|
||||
|
||||
- [GitLab CI](#gitlab-ci)
|
||||
- [GitLab User or Group Pages](#gitlab-user-or-group-pages)
|
||||
- [Did you fork this project?](#did-you-fork-this-project)
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
|
||||
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
||||
|
||||
## GitLab CI
|
||||
|
||||
This project's static Pages are built by [GitLab CI][ci], following the steps
|
||||
defined in [`.gitlab-ci.yml`](.gitlab-ci.yml):
|
||||
|
||||
```yml
|
||||
image: busybox
|
||||
|
||||
pages:
|
||||
stage: deploy
|
||||
script:
|
||||
- echo 'Nothing to do...'
|
||||
artifacts:
|
||||
paths:
|
||||
- public
|
||||
expire_in: 1 day
|
||||
rules:
|
||||
- if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
|
||||
```
|
||||
|
||||
The above example expects to put all your HTML files in the `public/` directory.
|
||||
|
||||
## GitLab User or Group Pages
|
||||
|
||||
To use this project as your user/group website, you will need one additional
|
||||
step: just rename your project to `namespace.gitlab.io`, where `namespace` is
|
||||
your `username` or `groupname`. This can be done by navigating to your
|
||||
project's **Settings**.
|
||||
|
||||
Read more about [user/group Pages][userpages] and [project Pages][projpages].
|
||||
|
||||
## Did you fork this project?
|
||||
|
||||
If you forked this project for your own use, please go to your project's
|
||||
**Settings** and remove the forking relationship, which won't be necessary
|
||||
unless you want to contribute back to the upstream project.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
1. CSS is missing! That means that you have wrongly set up the CSS URL in your
|
||||
HTML files. Have a look at the [index.html] for an example.
|
||||
|
||||
[ci]: https://about.gitlab.com/solutions/continuous-integration/
|
||||
[index.html]: https://gitlab.com/pages/plain-html/-/blob/main/public/index.html
|
||||
[userpages]: https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-in-projects-and-groups
|
||||
[projpages]: https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-in-projects-and-groups
|
||||
807
README.md.save
Normal file
807
README.md.save
Normal file
@@ -0,0 +1,807 @@
|
||||
|
||||
|
||||
|
||||
# IndieWeb (motivation)
|
||||
Faire pour et par soi-même, penser/s'amuser/aider les autres
|
||||
|
||||
## Principes
|
||||
- principles-fr - IndieWeb
|
||||
↳ https://indieweb.org/principles-fr
|
||||
✊ Own your data.
|
||||
🔍 Utilisez de la data visible
|
||||
💪 Construisez les outils pour vous-même,
|
||||
😋 Mangez votre propre nourriture pour chiens. Quel que soit le truc que vous construisez, ce devrait être pour vous-même. https://indieweb.org/selfdogfood-fr
|
||||
📓 Documentez vos trucs.
|
||||
💞 Open sourcez vos trucs !
|
||||
📐 L'UX et le design sont plus importants que les protocoles.
|
||||
🌐 Construisez des plates-formes agnostiques aux plates-formes.
|
||||
🗿 Longévité. Construisez pour le long web.
|
||||
✨ Pluralité. Avec IndieWebCamp nous avons spécifiquement choisi d'encourager et d'embrasser une diversité d'approches et d’implémentations.
|
||||
🎉 Poilons-nous.
|
||||
+ Principes de conduite > Respect mutuel
|
||||
https://indieweb.org/code-of-conduct-fr#Respect
|
||||
|
||||
## self host (hébergement gratuit, autonomie, essayer sans cout)
|
||||
- Getting Started-fr - IndieWeb (FR)
|
||||
↳ https://indieweb.org/Getting_Started-fr
|
||||
|
||||
- web hosting - IndieWeb --> quels besoins
|
||||
↳ https://indieweb.org/web_hosting
|
||||
|
||||
- static web hosting - IndieWeb -- hosts
|
||||
↳ https://indieweb.org/static_web_hosting
|
||||
|
||||
--> Choix de github/lab
|
||||
|
||||
|
||||
|
||||
# Accéder au projet :
|
||||
( va afficher le contenu du dossier "/public" )
|
||||
|
||||
URL du projet perso
|
||||
- https://USERNAME.gitlab.io/PROJECT_NAME
|
||||
EX/ mon projet (fork)
|
||||
L'URL FINALE == https://bonnebulle.gitlab.io/plain-html-redo
|
||||
Redirige vers = https://plain-html-redo-751743.gitlab.io
|
||||
( URL Non personelle )
|
||||
. . .
|
||||
mais hébergement gratuit !
|
||||
|
||||
---
|
||||
|
||||
# Tuto :
|
||||
|
||||
## Objectif :
|
||||
Cloner un projet initial existant
|
||||
( "> `git clone +url`" )
|
||||
EX/ `git clone https://gitlab.com/bonnebulle/plain-html-redo.git`
|
||||
Comprendre le versionning + fork
|
||||
( sauvegarder l'état d'un projet : "> git commit" + "> git push" )
|
||||
Revenir dans le temps à un état de sauvegarde passé
|
||||
( grace à son identifiant unique : hash/SHA )
|
||||
Auto-héberger une page sur GitLab
|
||||
( gratuit )
|
||||
|
||||
|
||||
## Éditer du code ...
|
||||
Le partager et envoyer les dernières modifications :
|
||||
GITLAB permet de travailler sans rien installer !
|
||||
Il embarque un IDE ( éditeur de code accessible en ligne )
|
||||
( IDE == Integrated Development Environment == Environnement de développement intégré )
|
||||
On va travailler à partir de cet interface web
|
||||
mais on peut aussi l'installer "en local" :
|
||||
|
||||
|
||||
|
||||
# UN APERCU des pouvoirs de Git : REVENIR DANS LE FUTUR
|
||||
|
||||
0. cloner un projet
|
||||
|
||||
Depuis le terminal dans un dossier au choix
|
||||
> cd /chemin/vers/mon/dossier
|
||||
> git clone https://gitlab.com/bonnebulle/plain-html-redo.git
|
||||
> cd plain-html-redo
|
||||
|
||||
( affichier le fichier index dans le navigateur pour voir )
|
||||
> firefox ./public/index.html
|
||||
> chromium ./public/index.html
|
||||
|
||||
1. lister les comit précédents EX/ 117647b
|
||||
> git log --oneline
|
||||
... réccupérer les fichiers dans une version précédente ...
|
||||
|
||||
2. revenir à telle version du projet ( + **hash/SHA** )
|
||||
> git checkout 117647b
|
||||
|
||||
( affichier le fichier index dans le navigateur pour voir )
|
||||
|
||||
3. revenir à la dernière version ( main )
|
||||
> git checkout main
|
||||
|
||||
( affichier le fichier index dans le navigateur pour voir )
|
||||
> firefox ./public/index.html
|
||||
> chromium ./public/index.html
|
||||
|
||||
Une page en FRANCAIS qui résume les principales commandes GIT
|
||||
https://www.hostinger.fr/tutoriels/commandes-git
|
||||
|
||||
( dont l'initialisation et configuration )
|
||||
|
||||
! De façon générale, la documentation de Git est libre et en multi langues
|
||||
https://git-scm.com/docs
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## GIT =?= GitLab/Hub
|
||||
|
||||
### GIT versioning -- gestion de version, travail co
|
||||
|
||||
Git est un outil qui permet de créer et gérer des versions d'un projet
|
||||
On peut ainsi sauvegarder plusieurs fichiers modifiés d'un coup
|
||||
( en leur attribuant un identifiant unique + hash/SHA ... auquel se référer à l'avenir )
|
||||
Dans un developement à plusieurs, on peut, grâce à Git, avancer chacun sur une partie de l'écriture du projet
|
||||
et proposer par exemple des 'Branches' de dev. diférentes/divergentes, avancer sur une partie, tester...
|
||||
puis revenir en arrière si les modifications ne sont pas satisfaisantes ou posent problème ailleurs.
|
||||
|
||||
On peut ainsi avancer sur plusieurs fronts sans trop se géner quand on est à plusieurs sur un même code
|
||||
On peut aussi, pour les personnes exterieures au projet, observer les évolutions d'une version à l'autre
|
||||
|
||||
Une certaine transparence qui peut aider à déceler du code malveillant ou à critiquer certains choix
|
||||
La maléabilité d'un projet ainsi sauvegardé en de multiples versions aide un dev. souple et continu
|
||||
Si d'autres dev prennent une direction spécifique (branche) il sera ensuite possible de fusionner nos apports (merges)
|
||||
Et de régler alors d'éventuels conflits (si, par exemple nous avons travaillé sur la même portion de code)
|
||||
|
||||
|
||||
( source : https://roytuts.com/git-branching-workflows-how-to-work-with-different-branches/ )
|
||||
|
||||
|
||||
### Git Hub / Lab
|
||||
|
||||
Les dev pourraient s'envoyer les modifications directement entre elles (p2p) ...
|
||||
mettre en place des flux d'actualité / newsletters/groups sur les derniers ajouts
|
||||
Mais le plus simple reste d'envoyer tout au même endroit : de centraliser sur un même serveur
|
||||
Git**Hub**/ou/**Lab** font ça :
|
||||
on leur envoit les dernieres modifications
|
||||
Des miliers de projets y sont hébergés (accessibles en ligne)
|
||||
La plateforme web Git**Hub**/ou/**Lab** mettent ainsi en relation des dev et public
|
||||
- On peut y **commenter** le code,
|
||||
- faire remonter un **problème** (issue) ( https://docs.github.com/fr/issues )
|
||||
- produire un historique des version (**changelog**)
|
||||
- Ajouter des étoiles (stars/favoris) / financer
|
||||
: bref, faire avancé en commun un projet
|
||||
, par la mutualisation des besoins et des compétences
|
||||
- amander un code, proposer ses prorpres **branches** au projet
|
||||
etc.
|
||||
|
||||
C'est le côté "hub" / "lab", 2.0 de Git, sa mise en sociabilité web
|
||||
Git, sinon, c'est juste une modalité de sauvegarde des fichiers en local
|
||||
et des outils de comparaison d'une version à l'autre
|
||||
( on peut utiliser git en local, sans le web )
|
||||
|
||||
[GitHub](https://github.com) a été racheté par Microsoft
|
||||
Je préfère donc utiliser [GitLab](https://gitlab.com/)
|
||||
Voir les alternatives :
|
||||
https://alternativeto.net/software/gitlab/
|
||||
|
||||
|
||||
|
||||
### PAGES auto-hébergées (distant / local)
|
||||
|
||||
L'un des intérets de GitLab/Hub c'est de facilement transformer un projet en site web gratuit et autohébergé !
|
||||
On pourra ensuit modifier une version locale de son site (sur son ordinateur)..
|
||||
et envoyer les modifications local vers github/lab (pour les rendre publiques) !
|
||||
|
||||
Local : mon ordi
|
||||
Distant : sur un serveur distant, par exemple l'un de ceux de Github/lab
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# INSTALLER EN LOCAL :
|
||||
|
||||
|
||||
## Terminal -- commandes
|
||||
|
||||
( utiliser la ligne de commande )
|
||||
https://openclassrooms.com/fr/courses/6173491-apprenez-a-utiliser-la-ligne-de-commande-dans-un-terminal/6349461-decouvrez-le-terminal#r-6349452
|
||||
|
||||
! Tuto sympa (Anglais)
|
||||
https://coolguy.website/map-is-the-territory/introduction.html
|
||||
|
||||
|
||||
## Git :
|
||||
https://git-scm.com/downloads
|
||||
https://git-scm.com/book/fr/v2/Démarrage-rapide-Installation-de-Git
|
||||
|
||||
Vérifier via Terminal
|
||||
> git -v
|
||||
|
||||
|
||||
## Editeur (IDE)
|
||||
|
||||
( IDE == Integrated Development Environment == Environnement de développement intégré )
|
||||
|
||||
+ VSCODE / CODIUM :
|
||||
? https://alternativeto.net/software/codium/
|
||||
! https://github.com/Alex313031/codium/releases
|
||||
( WINDOWS : win32/64 .exe /ou/ MAC : x64/arm64 .dmg )
|
||||
! https://code.visualstudio.com/download
|
||||
|
||||
passer en Francais :
|
||||
https://www.it-connect.fr/tuto-changer-langue-visual-studio-code-francais-anglais/
|
||||
|
||||
? Alt : JETBRAINS IDE
|
||||
https://www.jetbrains.com/webstorm/
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
# En ligne directement sur GitLab/Hub
|
||||
|
||||
CREER UN COMPTE GItLab/Hub
|
||||
https://gitlab.com/users/sign_up
|
||||
|
||||
|
||||
## TOKEN
|
||||
|
||||
On aurra aussi besoin d'un Token d'accès....
|
||||
Un code long qui donne certaines autorisations ( par exemple pour pull/push/commit, etc )
|
||||
|
||||
DO ....
|
||||
PAGE du PROJET -> GAUCHE
|
||||
-> Settings > Access Token
|
||||
--> Add New Token (boutton gris)
|
||||
--- Token name ...
|
||||
--- Select a role -> Owner
|
||||
-- Select scopes -->
|
||||
---- read_repository (pull)
|
||||
---- write_repository (push)
|
||||
|
||||
Vérfier / Révoquer les acces :
|
||||
--> GOTO : https://gitlab.com/-/profile/preferences
|
||||
|
||||
|
||||
. . .
|
||||
|
||||
|
||||
# FORK PROJET (reprendre un projet existant)
|
||||
|
||||
PROJET forké pour le cours :
|
||||
https://gitlab.com/bonnebulle/plain-html-redo
|
||||
|
||||
PAGE/PROJET d'origine :
|
||||
https://gitlab.com/pages/plain-html
|
||||
|
||||
|
||||
|
||||
DO ....
|
||||
GO https://gitlab.com/bonnebulle/plain-html-redo
|
||||
|
||||
On clic "Fork"
|
||||
--> Cela va copier le projet existant dans tes projets sur les serveurs de GitLab/Hub
|
||||
--> Et tu pourras alors modifier cette version (copie) en toute libertée
|
||||
|
||||
On précise la desintaion + nom du projet
|
||||
EX/ plain-html-redo_again
|
||||
|
||||
. . .
|
||||
|
||||
# METTRE EN LIGNE
|
||||
Pour rendre le projet accessible en ligne, hébergé par GitLab/Hub...
|
||||
"Transformer" en PAGE web :
|
||||
|
||||
Dans le projet actuel ->
|
||||
-> GAUCHE -> Build > Pipeline
|
||||
-> New Pipeline (boutton bleu)
|
||||
-> Run Pipeline (boutton bleu)
|
||||
|
||||
RESULTAT :
|
||||
PAGE URL ==
|
||||
- https://USERNAME.gitlab.io/PROJECT_NAME
|
||||
|
||||
. . .
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# OUVRIR ou CLONER
|
||||
|
||||
### CHOIX - depuis gitLab/Hub : Edit avec l'IDE (le plus simple)
|
||||
|
||||
- DO ....
|
||||
RETOUR AU PROJET
|
||||
--> Edit ( à côté du boutton bleu )
|
||||
--> **Web IDE**
|
||||
|
||||
( IDE == Integrated Development Environment == Environnement de développement intégré )
|
||||
|
||||
- Pour Ouvir 1 fichier spécifique... en ligne sur l'IDE embarquée de GitLab...
|
||||
/SI/ on veut travailler en ligne (IDE GitLab)...
|
||||
On peut ouvrir un fichier spécifique
|
||||
EX/ https://gitlab.com/bonnebulle/plain-html-redo/-/blob/main/README.md
|
||||
--> Edit (boutton bleu)
|
||||
--> Open in Web IDE...
|
||||
|
||||
|
||||
|
||||
### CHOIX - depuis le terminal (local)
|
||||
|
||||
On peut également cloner le projet depuis le terminal avec :
|
||||
|
||||
> git clone https://gitlab.com/bonnebulle/plain-html-redo.git
|
||||
|
||||
|
||||
|
||||
|
||||
#### RAPPEL Terminal -- commandes
|
||||
|
||||
( utiliser la ligne de commande )
|
||||
https://openclassrooms.com/fr/courses/6173491-apprenez-a-utiliser-la-ligne-de-commande-dans-un-terminal/6349461-decouvrez-le-terminal#r-6349452
|
||||
|
||||
! Tuto sympa (Anglais)
|
||||
https://coolguy.website/map-is-the-territory/introduction.html
|
||||
|
||||
|
||||
#### détail - Terminal commandes (pwd/ls/cd)
|
||||
|
||||
/SI/ on veut le faire depuis Git/Labhub
|
||||
DO ....
|
||||
RETOUR AU PROJET
|
||||
--> Code (boutton bleu)
|
||||
--> Clone with HTTPS (copy https.....monprojet.git)
|
||||
|
||||
Dans le terminal aller dans un dossier ou télécharger le projet
|
||||
. . .
|
||||
Chemin actuel
|
||||
> pwd
|
||||
|
||||
Se déplacer cd
|
||||
EX dossier actuel/ ./(+press TABULATION)
|
||||
EX dossier parent/ ../(+press TABULATION)
|
||||
> cd ./
|
||||
> cd ../
|
||||
|
||||
Une fois dans le bon dossier (au choix)
|
||||
> git clone https....monprojet.git
|
||||
|
||||
lister fichiers clonés
|
||||
> ls
|
||||
|
||||
--> dossier du projet
|
||||
--> on va dedans
|
||||
> cd monprojet
|
||||
> ls
|
||||
|
||||
Localiser le chemin du dossier actuel
|
||||
> pwd
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## PULL (aspirer == télécharger/sync/réccupérer dernière version)
|
||||
|
||||
( à faire avant de modifier sa version locale du projet )
|
||||
|
||||
Une fois un projet cloné.... quand on est dans son dossier on peut télécharger les dernières modifications apportées par les dev dans leur repertoire de travail git (distant)....
|
||||
|
||||
Récupèrer les fichiers tels que présents sur GitLab/Hub
|
||||
( on récupère l'état de travail des fichiers présents sur le serveur )
|
||||
> git pull
|
||||
|
||||
( va prévenir si des modifications difèrent en local )
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# Git commandes depuis l'IDE local apres un clone
|
||||
|
||||
DEPUIS notre IDE, on va pouvoir sauvegarder l'état d'avancement du projet en utilisant GIT
|
||||
( qui se charge :
|
||||
- de cloner "> clone https://gitlab.com/bonnebulle/plain-html-redo.git"
|
||||
- de télécharger l'état actuel du projet présent sur le serveur git "> git pull"
|
||||
- d'envoyer / sauvegarder "> git commit" + "> git push"
|
||||
. . . )
|
||||
|
||||
Les IDE ( tel VSCodium ) proposent d'envoyer ces commandes Git sans utiliser de terminal :
|
||||
via leur GUI ( Graphical User Interface )...
|
||||
en appuyant sur des bouttons visuels !
|
||||
|
||||
- Ils donnent à voir l'état actuel du projet dans un Historique + Graph...
|
||||
Ils permettent...
|
||||
- d'ajouter les dernières modifications : "> git add *"
|
||||
- de Commit ( sauvegarder avec un titre ) "> git commit" ...
|
||||
... en toute simplicité !
|
||||
... mais pour apprendre il est bien de se familiariser avec les lignes de commande...
|
||||
... de passer du temps via le terminal !
|
||||
... ainsi on comprend ce qui se passe "derière" quand on clic les boutons
|
||||
... ( quelles commandes sont envoyées )
|
||||
|
||||
|
||||
TUTO VSCODE :
|
||||
https://code.visualstudio.com/docs/sourcecontrol/intro-to-git
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## TUTOS + COMMANDES (terminal)
|
||||
|
||||
- Git - Git dans Bash
|
||||
↳ https://git-scm.com/book/fr/v2/Annexe-A:-Git-dans-d%e2%80%99autres-environnements-Git-dans-Bash
|
||||
|
||||
- Git - Git dans IntelliJ / PyCharm / WebStorm / PhpStorm / RubyMine
|
||||
↳ https://git-scm.com/book/fr/v2/Annexe-A:-Git-dans-d%e2%80%99autres-environnements-Git-dans-IntelliJ-/-PyCharm-/-WebStorm-/ -PhpStorm-/-RubyMine
|
||||
|
||||
- Git - Git dans Visual Studio Code
|
||||
↳ https://git-scm.com/book/fr/v2/Annexe-A:-Git-dans-d%e2%80%99autres-environnements-Git-dans-Visual-Studio-Code
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Etat des fichiers + processus intermédiaires
|
||||
|
||||
- staged/stash - état intermédaire des fichiers priss en compte (ou pas)
|
||||
- puis commit - sauvegarde de cet état de cet état (staged) du projet,
|
||||
- puis envoi - push
|
||||
|
||||
|
||||
( source : https://nulab.com/learn/software-development/git-tutorial/git-basics/ )
|
||||
|
||||
|
||||
( source : https://tecadmin.net/basic-git-workflow/ )
|
||||
|
||||
|
||||
( source : https://www.earthdatascience.org/workshops/intro-version-control-git/basic-git-commands/ )
|
||||
|
||||
|
||||
|
||||
Quand un fichier est modifié, pour enregistrer son état actuel, ici, en local..
|
||||
... dans un état actuel : **staged**
|
||||
--> **staged** == "stade" / "état"
|
||||
|
||||
... la version prise en compte se retrouve dans un espace disque de sauvegarde "**satsh**"
|
||||
... les fichiers dans le **stash** (et leur état **staged**) sera pris en compte durant le prochain **commit**
|
||||
.... le **commit** permet d'indiquer aux autres utilisateurs quelles modifications ont été apportées au projet
|
||||
.... Je peux indiquer ce qui marche et expliquer les modifications
|
||||
.... la dernière étape sera d'envoyer l'état actuel des fichers (**staged/stash**) et le commentaire du **commit** ... au serveur !
|
||||
... ! Pour l'user : D'autres utilisateur.ices pourrons ainsi se référer à ce point de sauvegarde
|
||||
..... ( par son nom et son identifiant unique **hash/SHA** )
|
||||
..... restaurer ou étudier le code depuis ce point de sauvegarde
|
||||
... ! Pour la/le dev : **plutôt que d'envoyer un à un chaque fichier, cette méthode permet de tout synchroniser d'un coup**
|
||||
.... quand le commit est prêt on `git push` !
|
||||
|
||||
|
||||
## Etat des fichiers -- staged/stash - status
|
||||
|
||||
On peut voir l'état des fichiers :
|
||||
> git status
|
||||
|
||||
EX/
|
||||
```bash
|
||||
Sur la branche main
|
||||
Votre branche est à jour avec 'origin/main'.
|
||||
|
||||
Modifications qui seront validées :
|
||||
(utilisez "git restore --staged <fichier>..." pour désindexer)
|
||||
nouveau fichier : NEW_file_ready.md
|
||||
|
||||
Modifications qui ne seront pas validées :
|
||||
(utilisez "git add/rm <fichier>..." pour mettre à jour ce qui sera validé)
|
||||
(utilisez "git restore <fichier>..." pour annuler les modifications dans le répertoire de travail)
|
||||
supprimé : fullyfly.md
|
||||
|
||||
Fichiers non suivis:
|
||||
(utilisez "git add <fichier>..." pour inclure dans ce qui sera validé)
|
||||
NEW_file.md
|
||||
```
|
||||
|
||||
- "non suivis" == le fichier n'a pas été ajouté (add) en **staged**
|
||||
- "qui ne seront pas validées" == fichier supprimé dans les fichiers (mais pas avec git rm)
|
||||
- "qui seront validées" == sont dans le stash (ajoutés)
|
||||
|
||||
|
||||
On nous indique alors ceux qui sont modifiés, les quels sont dans le **staged** (ou non)
|
||||
.. quels fichiers seront compris dans le prochain **commit** (et comment)
|
||||
|
||||
### ADD
|
||||
|
||||
On peu ensuite ajouter l'état actuel de nos fichiers (modifications) au **staged**
|
||||
Ajouter un fichier (ou tous *)
|
||||
> git add ./README.md
|
||||
|
||||
> git add *
|
||||
|
||||
### RM / checkout / restore
|
||||
|
||||
Remove du staged (état lattant avant commit + push)
|
||||
... Cela ne supprime pas le fichier sur notre ordinateur/serveur (en local)
|
||||
... mais cela le retire du staged, de la liste des fichiers qui seront affectés par le prochain commit
|
||||
> git rm ./README.md
|
||||
|
||||
annuler un ajout sur un fichier
|
||||
> git checkout -- CONTRIBUTING.md
|
||||
|
||||
restaure
|
||||
> git restore --staged CONTRIBUTING.md
|
||||
|
||||
|
||||
|
||||
## Commit + éditeur
|
||||
|
||||
( sauvegarder l'état actuel des fichiers locaux )
|
||||
( tel que pris en compte dans le **staged** )
|
||||
> git commit
|
||||
|
||||
### Editeur - ligne de commande
|
||||
|
||||
/CHOIX/ on peut écrir les modifications directement depuis la commmande
|
||||
|
||||
> git commit -m 'initial commit of my project'
|
||||
|
||||
### Editeur - nano / vim / autres
|
||||
|
||||
/CHOIX/ on écrit les modifications apportées dans l'éditeur de text dans le shell/terminal
|
||||
|
||||
. on peut installer nano https://command-not-found.com/nano
|
||||
|
||||
. ou utiliser Vim ( un autre éditeur )...
|
||||
... ( les commandes se font au clavier )
|
||||
... ( : indique une commande )
|
||||
... --> https://vim.rtorr.com
|
||||
....
|
||||
.... on tappe -- ESCAPE + ":a" pour rendrer en mod édition
|
||||
.... on quitte+save en tappant -- ESCAPE + ":wq"
|
||||
.... on quitte no_save tappant -- ESCAPE + ":q!"
|
||||
|
||||
. ou autre éditeur tel VSCodium
|
||||
|
||||
### Editeur - définir par défaut
|
||||
|
||||
/DO/
|
||||
> git config --global core.editor nano
|
||||
|
||||
( détail : https://git-scm.com/book/fr/v2/Démarrage-rapide-Paramétrage-à-la-première-utilisation-de-Git )
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Log
|
||||
Visualiser les modifications :
|
||||
> git log -p -2
|
||||
|
||||
> git log --pretty=oneline
|
||||
|
||||
## History
|
||||
voir l'historique
|
||||
> git log --pretty=format:"%h %s" --graph
|
||||
|
||||
## Sur GitLab/Hub
|
||||
On peut retrouver les commit ici ;
|
||||
> EX/ https://gitlab.com/USER_NAME/PROJECT_NAME/-/commits/main?ref_type=heads
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# ENVOYER
|
||||
|
||||
## PUSH
|
||||
|
||||
Envoi des modifications après un commit
|
||||
( qui valides les modifications locales apportées à tel ou tel fichier )
|
||||
|
||||
> git push
|
||||
|
||||
( id + TOKEN )
|
||||
|
||||
préciser la branch à qui envoyer le commit (et fichiers)
|
||||
> git push --set-upstream origin main
|
||||
|
||||
( id + TOKEN )
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# RESET / CHECKOUT (retour vers le passé/futur)
|
||||
|
||||
_RESET réinitialise l'état du projet par son **hash/SHA**_
|
||||
_CHECKOUT est moins permanent, il permet de retrouver l'état d'un projet sans réinitialiser l'état des fichiers modifiés_
|
||||
|
||||
à chaque commit un identifiant unique est créé (hash/SHA)
|
||||
> EX/ 27162d625d6665a824be74c281d07f6894f16888
|
||||
|
||||
On peut retrouver les commit ici ;
|
||||
> EX/ https://gitlab.com/USER_NAME/PROJECT_NAME/-/commits/main?ref_type=heads
|
||||
|
||||
En faisant un reset hard on retrouve les fichiers telque durant le dit commit
|
||||
> git reset --hard 27162d625d6665a824be74c281d07f6894f16888
|
||||
|
||||
|
||||
|
||||
## RAPPEL Git : REVENIR DANS LE FUTUR
|
||||
|
||||
**CHECKOUT permet de revenir à l'état d'un commit passé SANS RESET (réinitialiser) les fichiers locaux**
|
||||
_CHECKOUT marche pour les retour vers une version passée/futur : un commit (hash/SHA) /OU/ BRANCHE_
|
||||
|
||||
0. cloner un projet
|
||||
|
||||
Depuis le terminal dans un dossier au choix
|
||||
> cd /chemin/vers/mon/dossier
|
||||
|
||||
> git clone https://gitlab.com/bonnebulle/plain-html-redo.git
|
||||
|
||||
> cd plain-html-redo
|
||||
|
||||
( affichier le fichier index dans le navigateur pour voir )
|
||||
> firefox ./public/index.html
|
||||
|
||||
> chromium ./public/index.html
|
||||
|
||||
1. lister les comit précédents
|
||||
2. revenir à telle version du projet ( + **hash/SHA** )
|
||||
|
||||
> git log --oneline
|
||||
|
||||
... réccupérer les fichiers dans une version précédente ...
|
||||
|
||||
> git checkout 117647b
|
||||
|
||||
( affichier le fichier index dans le navigateur pour voir )
|
||||
|
||||
3. revenir à la dernière version ( main )
|
||||
> git checkout main
|
||||
|
||||
( affichier le fichier index dans le navigateur pour voir )
|
||||
|
||||
|
||||
|
||||
|
||||
# BRANCHES
|
||||
|
||||
TUTO : https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Les-branches-en-bref
|
||||
|
||||
voir les branches ( locales + distantes )
|
||||
> git branch --all
|
||||
|
||||
|
||||
CHECKOUT
|
||||
Changer de branche
|
||||
|
||||
TUTO https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Gestion-des-branches
|
||||
|
||||
changer (basculer de branche)
|
||||
> git checkout -b forkit
|
||||
|
||||
revenir/changer à la branche d'origine "main" (ou "forkit")
|
||||
> git checkout main
|
||||
|
||||
> git checkout forkit
|
||||
|
||||
envoyer les modifications à une branche spécifique
|
||||
> git push --set-upstream origin main
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# Merge
|
||||
|
||||
> git merge forkit
|
||||
|
||||
gestion de conflit de versions
|
||||
TUTO :
|
||||
- https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Branches-et-fusions%C2%A0:-les-bases#s_basic_merging
|
||||
> git status
|
||||
|
||||
> git mergetool
|
||||
|
||||
On peut regarder les diff(érences) apportées d'un commit à l'autre... depuis l'interface web de GitHub/Lab
|
||||
Ou avec git diff /ou/ depuis vscode/IDE
|
||||
|
||||
TUTO
|
||||
https://www.atlassian.com/fr/git/tutorials/saving-changes/git-diff
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# READ_ME D'origine :
|
||||
|
||||
Example plain HTML site using GitLab Pages.
|
||||
|
||||
Learn more about GitLab Pages at https://pages.gitlab.io and the official
|
||||
documentation https://docs.gitlab.com/ce/user/project/pages/.
|
||||
|
||||
---
|
||||
|
||||
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
||||
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
||||
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
|
||||
|
||||
- [GitLab CI](#gitlab-ci)
|
||||
- [GitLab User or Group Pages](#gitlab-user-or-group-pages)
|
||||
- [Did you fork this project?](#did-you-fork-this-project)
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
|
||||
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
||||
|
||||
## GitLab CI
|
||||
|
||||
This project's static Pages are built by [GitLab CI][ci], following the steps
|
||||
defined in [`.gitlab-ci.yml`](.gitlab-ci.yml):
|
||||
|
||||
```yml
|
||||
image: busybox
|
||||
|
||||
pages:
|
||||
stage: deploy
|
||||
script:
|
||||
- echo 'Nothing to do...'
|
||||
artifacts:
|
||||
paths:
|
||||
- public
|
||||
expire_in: 1 day
|
||||
rules:
|
||||
- if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
|
||||
```
|
||||
|
||||
The above example expects to put all your HTML files in the `public/` directory.
|
||||
|
||||
## GitLab User or Group Pages
|
||||
|
||||
To use this project as your user/group website, you will need one additional
|
||||
step: just rename your project to `namespace.gitlab.io`, where `namespace` is
|
||||
your `username` or `groupname`. This can be done by navigating to your
|
||||
project's **Settings**.
|
||||
|
||||
Read more about [user/group Pages][userpages] and [project Pages][projpages].
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Did you fork this project?
|
||||
|
||||
If you forked this project for your own use, please go to your project's
|
||||
**Settings** and remove the forking relationship, which won't be necessary
|
||||
unless you want to contribute back to the upstream project.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
1. CSS is missing! That means that you have wrongly set up the CSS URL in your
|
||||
HTML files. Have a look at the [index.html] for an example.
|
||||
|
||||
[ci]: https://about.gitlab.com/solutions/continuous-integration/
|
||||
[index.html]: https://gitlab.com/pages/plain-html/-/blob/main/public/index.html
|
||||
[userpages]: https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-in-projects-and-groups
|
||||
[projpages]: https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-in-projects-and-groups
|
||||
807
READ_ME.md
Normal file
807
READ_ME.md
Normal file
@@ -0,0 +1,807 @@
|
||||
|
||||
Explication complete
|
||||
|
||||
# IndieWeb (motivation)
|
||||
Faire pour et par soi-même, penser/s'amuser/aider les autres
|
||||
|
||||
## Principes
|
||||
- principles-fr - IndieWeb
|
||||
↳ https://indieweb.org/principles-fr
|
||||
✊ Own your data.
|
||||
🔍 Utilisez de la data visible
|
||||
💪 Construisez les outils pour vous-même,
|
||||
😋 Mangez votre propre nourriture pour chiens. Quel que soit le truc que vous construisez, ce devrait être pour vous-même. https://indieweb.org/selfdogfood-fr
|
||||
📓 Documentez vos trucs.
|
||||
💞 Open sourcez vos trucs !
|
||||
📐 L'UX et le design sont plus importants que les protocoles.
|
||||
🌐 Construisez des plates-formes agnostiques aux plates-formes.
|
||||
🗿 Longévité. Construisez pour le long web.
|
||||
✨ Pluralité. Avec IndieWebCamp nous avons spécifiquement choisi d'encourager et d'embrasser une diversité d'approches et d’implémentations.
|
||||
🎉 Poilons-nous.
|
||||
+ Principes de conduite > Respect mutuel
|
||||
https://indieweb.org/code-of-conduct-fr#Respect
|
||||
|
||||
## self host (hébergement gratuit, autonomie, essayer sans cout)
|
||||
- Getting Started-fr - IndieWeb (FR)
|
||||
↳ https://indieweb.org/Getting_Started-fr
|
||||
|
||||
- web hosting - IndieWeb --> quels besoins
|
||||
↳ https://indieweb.org/web_hosting
|
||||
|
||||
- static web hosting - IndieWeb -- hosts
|
||||
↳ https://indieweb.org/static_web_hosting
|
||||
|
||||
--> Choix de github/lab
|
||||
|
||||
|
||||
|
||||
# Accéder au projet :
|
||||
( va afficher le contenu du dossier "/public" )
|
||||
|
||||
URL du projet perso
|
||||
- https://USERNAME.gitlab.io/PROJECT_NAME
|
||||
EX/ mon projet (fork)
|
||||
L'URL FINALE == https://bonnebulle.gitlab.io/plain-html-redo
|
||||
Redirige vers = https://plain-html-redo-751743.gitlab.io
|
||||
( URL Non personelle )
|
||||
. . .
|
||||
mais hébergement gratuit !
|
||||
|
||||
---
|
||||
|
||||
# Tuto :
|
||||
|
||||
## Objectif :
|
||||
Cloner un projet initial existant
|
||||
( "> `git clone +url`" )
|
||||
EX/ `git clone https://gitlab.com/bonnebulle/plain-html-redo.git`
|
||||
Comprendre le versionning + fork
|
||||
( sauvegarder l'état d'un projet : "> git commit" + "> git push" )
|
||||
Revenir dans le temps à un état de sauvegarde passé
|
||||
( grace à son identifiant unique : hash/SHA )
|
||||
Auto-héberger une page sur GitLab
|
||||
( gratuit )
|
||||
|
||||
|
||||
## Éditer du code ...
|
||||
Le partager et envoyer les dernières modifications :
|
||||
GITLAB permet de travailler sans rien installer !
|
||||
Il embarque un IDE ( éditeur de code accessible en ligne )
|
||||
( IDE == Integrated Development Environment == Environnement de développement intégré )
|
||||
On va travailler à partir de cet interface web
|
||||
mais on peut aussi l'installer "en local" :
|
||||
|
||||
|
||||
|
||||
# UN APERCU des pouvoirs de Git : REVENIR DANS LE FUTUR
|
||||
|
||||
0. cloner un projet
|
||||
|
||||
Depuis le terminal dans un dossier au choix
|
||||
> cd /chemin/vers/mon/dossier
|
||||
> git clone https://gitlab.com/bonnebulle/plain-html-redo.git
|
||||
> cd plain-html-redo
|
||||
|
||||
( affichier le fichier index dans le navigateur pour voir )
|
||||
> firefox ./public/index.html
|
||||
> chromium ./public/index.html
|
||||
|
||||
1. lister les comit précédents EX/ 117647b
|
||||
> git log --oneline
|
||||
... réccupérer les fichiers dans une version précédente ...
|
||||
|
||||
2. revenir à telle version du projet ( + **hash/SHA** )
|
||||
> git checkout 117647b
|
||||
|
||||
( affichier le fichier index dans le navigateur pour voir )
|
||||
|
||||
3. revenir à la dernière version ( main )
|
||||
> git checkout main
|
||||
|
||||
( affichier le fichier index dans le navigateur pour voir )
|
||||
> firefox ./public/index.html
|
||||
> chromium ./public/index.html
|
||||
|
||||
Une page en FRANCAIS qui résume les principales commandes GIT
|
||||
https://www.hostinger.fr/tutoriels/commandes-git
|
||||
|
||||
( dont l'initialisation et configuration )
|
||||
|
||||
! De façon générale, la documentation de Git est libre et en multi langues
|
||||
https://git-scm.com/docs
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## GIT =?= GitLab/Hub
|
||||
|
||||
### GIT versioning -- gestion de version, travail co
|
||||
|
||||
Git est un outil qui permet de créer et gérer des versions d'un projet
|
||||
On peut ainsi sauvegarder plusieurs fichiers modifiés d'un coup
|
||||
( en leur attribuant un identifiant unique + hash/SHA ... auquel se référer à l'avenir )
|
||||
Dans un developement à plusieurs, on peut, grâce à Git, avancer chacun sur une partie de l'écriture du projet
|
||||
et proposer par exemple des 'Branches' de dev. diférentes/divergentes, avancer sur une partie, tester...
|
||||
puis revenir en arrière si les modifications ne sont pas satisfaisantes ou posent problème ailleurs.
|
||||
|
||||
On peut ainsi avancer sur plusieurs fronts sans trop se géner quand on est à plusieurs sur un même code
|
||||
On peut aussi, pour les personnes exterieures au projet, observer les évolutions d'une version à l'autre
|
||||
|
||||
Une certaine transparence qui peut aider à déceler du code malveillant ou à critiquer certains choix
|
||||
La maléabilité d'un projet ainsi sauvegardé en de multiples versions aide un dev. souple et continu
|
||||
Si d'autres dev prennent une direction spécifique (branche) il sera ensuite possible de fusionner nos apports (merges)
|
||||
Et de régler alors d'éventuels conflits (si, par exemple nous avons travaillé sur la même portion de code)
|
||||
|
||||
|
||||
( source : https://roytuts.com/git-branching-workflows-how-to-work-with-different-branches/ )
|
||||
|
||||
|
||||
### Git Hub / Lab
|
||||
|
||||
Les dev pourraient s'envoyer les modifications directement entre elles (p2p) ...
|
||||
mettre en place des flux d'actualité / newsletters/groups sur les derniers ajouts
|
||||
Mais le plus simple reste d'envoyer tout au même endroit : de centraliser sur un même serveur
|
||||
Git**Hub**/ou/**Lab** font ça :
|
||||
on leur envoit les dernieres modifications
|
||||
Des miliers de projets y sont hébergés (accessibles en ligne)
|
||||
La plateforme web Git**Hub**/ou/**Lab** mettent ainsi en relation des dev et public
|
||||
- On peut y **commenter** le code,
|
||||
- faire remonter un **problème** (issue) ( https://docs.github.com/fr/issues )
|
||||
- produire un historique des version (**changelog**)
|
||||
- Ajouter des étoiles (stars/favoris) / financer
|
||||
: bref, faire avancé en commun un projet
|
||||
, par la mutualisation des besoins et des compétences
|
||||
- amander un code, proposer ses prorpres **branches** au projet
|
||||
etc.
|
||||
|
||||
C'est le côté "hub" / "lab", 2.0 de Git, sa mise en sociabilité web
|
||||
Git, sinon, c'est juste une modalité de sauvegarde des fichiers en local
|
||||
et des outils de comparaison d'une version à l'autre
|
||||
( on peut utiliser git en local, sans le web )
|
||||
|
||||
[GitHub](https://github.com) a été racheté par Microsoft
|
||||
Je préfère donc utiliser [GitLab](https://gitlab.com/)
|
||||
Voir les alternatives :
|
||||
https://alternativeto.net/software/gitlab/
|
||||
|
||||
|
||||
|
||||
### PAGES auto-hébergées (distant / local)
|
||||
|
||||
L'un des intérets de GitLab/Hub c'est de facilement transformer un projet en site web gratuit et autohébergé !
|
||||
On pourra ensuit modifier une version locale de son site (sur son ordinateur)..
|
||||
et envoyer les modifications local vers github/lab (pour les rendre publiques) !
|
||||
|
||||
Local : mon ordi
|
||||
Distant : sur un serveur distant, par exemple l'un de ceux de Github/lab
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# INSTALLER EN LOCAL :
|
||||
|
||||
|
||||
## Terminal -- commandes
|
||||
|
||||
( utiliser la ligne de commande )
|
||||
https://openclassrooms.com/fr/courses/6173491-apprenez-a-utiliser-la-ligne-de-commande-dans-un-terminal/6349461-decouvrez-le-terminal#r-6349452
|
||||
|
||||
! Tuto sympa (Anglais)
|
||||
https://coolguy.website/map-is-the-territory/introduction.html
|
||||
|
||||
|
||||
## Git :
|
||||
https://git-scm.com/downloads
|
||||
https://git-scm.com/book/fr/v2/Démarrage-rapide-Installation-de-Git
|
||||
|
||||
Vérifier via Terminal
|
||||
> git -v
|
||||
|
||||
|
||||
## Editeur (IDE)
|
||||
|
||||
( IDE == Integrated Development Environment == Environnement de développement intégré )
|
||||
|
||||
+ VSCODE / CODIUM :
|
||||
? https://alternativeto.net/software/codium/
|
||||
! https://github.com/Alex313031/codium/releases
|
||||
( WINDOWS : win32/64 .exe /ou/ MAC : x64/arm64 .dmg )
|
||||
! https://code.visualstudio.com/download
|
||||
|
||||
passer en Francais :
|
||||
https://www.it-connect.fr/tuto-changer-langue-visual-studio-code-francais-anglais/
|
||||
|
||||
? Alt : JETBRAINS IDE
|
||||
https://www.jetbrains.com/webstorm/
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
# En ligne directement sur GitLab/Hub
|
||||
|
||||
CREER UN COMPTE GItLab/Hub
|
||||
https://gitlab.com/users/sign_up
|
||||
|
||||
|
||||
## TOKEN
|
||||
|
||||
On aurra aussi besoin d'un Token d'accès....
|
||||
Un code long qui donne certaines autorisations ( par exemple pour pull/push/commit, etc )
|
||||
|
||||
DO ....
|
||||
PAGE du PROJET -> GAUCHE
|
||||
-> Settings > Access Token
|
||||
--> Add New Token (boutton gris)
|
||||
--- Token name ...
|
||||
--- Select a role -> Owner
|
||||
-- Select scopes -->
|
||||
---- read_repository (pull)
|
||||
---- write_repository (push)
|
||||
|
||||
Vérfier / Révoquer les acces :
|
||||
--> GOTO : https://gitlab.com/-/profile/preferences
|
||||
|
||||
|
||||
. . .
|
||||
|
||||
|
||||
# FORK PROJET (reprendre un projet existant)
|
||||
|
||||
PROJET forké pour le cours :
|
||||
https://gitlab.com/bonnebulle/plain-html-redo
|
||||
|
||||
PAGE/PROJET d'origine :
|
||||
https://gitlab.com/pages/plain-html
|
||||
|
||||
|
||||
|
||||
DO ....
|
||||
GO https://gitlab.com/bonnebulle/plain-html-redo
|
||||
|
||||
On clic "Fork"
|
||||
--> Cela va copier le projet existant dans tes projets sur les serveurs de GitLab/Hub
|
||||
--> Et tu pourras alors modifier cette version (copie) en toute libertée
|
||||
|
||||
On précise la desintaion + nom du projet
|
||||
EX/ plain-html-redo_again
|
||||
|
||||
. . .
|
||||
|
||||
# METTRE EN LIGNE
|
||||
Pour rendre le projet accessible en ligne, hébergé par GitLab/Hub...
|
||||
"Transformer" en PAGE web :
|
||||
|
||||
Dans le projet actuel ->
|
||||
-> GAUCHE -> Build > Pipeline
|
||||
-> New Pipeline (boutton bleu)
|
||||
-> Run Pipeline (boutton bleu)
|
||||
|
||||
RESULTAT :
|
||||
PAGE URL ==
|
||||
- https://USERNAME.gitlab.io/PROJECT_NAME
|
||||
|
||||
. . .
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# OUVRIR ou CLONER
|
||||
|
||||
### CHOIX - depuis gitLab/Hub : Edit avec l'IDE (le plus simple)
|
||||
|
||||
- DO ....
|
||||
RETOUR AU PROJET
|
||||
--> Edit ( à côté du boutton bleu )
|
||||
--> **Web IDE**
|
||||
|
||||
( IDE == Integrated Development Environment == Environnement de développement intégré )
|
||||
|
||||
- Pour Ouvir 1 fichier spécifique... en ligne sur l'IDE embarquée de GitLab...
|
||||
/SI/ on veut travailler en ligne (IDE GitLab)...
|
||||
On peut ouvrir un fichier spécifique
|
||||
EX/ https://gitlab.com/bonnebulle/plain-html-redo/-/blob/main/README.md
|
||||
--> Edit (boutton bleu)
|
||||
--> Open in Web IDE...
|
||||
|
||||
|
||||
|
||||
### CHOIX - depuis le terminal (local)
|
||||
|
||||
On peut également cloner le projet depuis le terminal avec :
|
||||
|
||||
> git clone https://gitlab.com/bonnebulle/plain-html-redo.git
|
||||
|
||||
|
||||
|
||||
|
||||
#### RAPPEL Terminal -- commandes
|
||||
|
||||
( utiliser la ligne de commande )
|
||||
https://openclassrooms.com/fr/courses/6173491-apprenez-a-utiliser-la-ligne-de-commande-dans-un-terminal/6349461-decouvrez-le-terminal#r-6349452
|
||||
|
||||
! Tuto sympa (Anglais)
|
||||
https://coolguy.website/map-is-the-territory/introduction.html
|
||||
|
||||
|
||||
#### détail - Terminal commandes (pwd/ls/cd)
|
||||
|
||||
/SI/ on veut le faire depuis Git/Labhub
|
||||
DO ....
|
||||
RETOUR AU PROJET
|
||||
--> Code (boutton bleu)
|
||||
--> Clone with HTTPS (copy https.....monprojet.git)
|
||||
|
||||
Dans le terminal aller dans un dossier ou télécharger le projet
|
||||
. . .
|
||||
Chemin actuel
|
||||
> pwd
|
||||
|
||||
Se déplacer cd
|
||||
EX dossier actuel/ ./(+press TABULATION)
|
||||
EX dossier parent/ ../(+press TABULATION)
|
||||
> cd ./
|
||||
> cd ../
|
||||
|
||||
Une fois dans le bon dossier (au choix)
|
||||
> git clone https....monprojet.git
|
||||
|
||||
lister fichiers clonés
|
||||
> ls
|
||||
|
||||
--> dossier du projet
|
||||
--> on va dedans
|
||||
> cd monprojet
|
||||
> ls
|
||||
|
||||
Localiser le chemin du dossier actuel
|
||||
> pwd
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## PULL (aspirer == télécharger/sync/réccupérer dernière version)
|
||||
|
||||
( à faire avant de modifier sa version locale du projet )
|
||||
|
||||
Une fois un projet cloné.... quand on est dans son dossier on peut télécharger les dernières modifications apportées par les dev dans leur repertoire de travail git (distant)....
|
||||
|
||||
Récupèrer les fichiers tels que présents sur GitLab/Hub
|
||||
( on récupère l'état de travail des fichiers présents sur le serveur )
|
||||
> git pull
|
||||
|
||||
( va prévenir si des modifications difèrent en local )
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# Git commandes depuis l'IDE local apres un clone
|
||||
|
||||
DEPUIS notre IDE, on va pouvoir sauvegarder l'état d'avancement du projet en utilisant GIT
|
||||
( qui se charge :
|
||||
- de cloner "> clone https://gitlab.com/bonnebulle/plain-html-redo.git"
|
||||
- de télécharger l'état actuel du projet présent sur le serveur git "> git pull"
|
||||
- d'envoyer / sauvegarder "> git commit" + "> git push"
|
||||
. . . )
|
||||
|
||||
Les IDE ( tel VSCodium ) proposent d'envoyer ces commandes Git sans utiliser de terminal :
|
||||
via leur GUI ( Graphical User Interface )...
|
||||
en appuyant sur des bouttons visuels !
|
||||
|
||||
- Ils donnent à voir l'état actuel du projet dans un Historique + Graph...
|
||||
Ils permettent...
|
||||
- d'ajouter les dernières modifications : "> git add *"
|
||||
- de Commit ( sauvegarder avec un titre ) "> git commit" ...
|
||||
... en toute simplicité !
|
||||
... mais pour apprendre il est bien de se familiariser avec les lignes de commande...
|
||||
... de passer du temps via le terminal !
|
||||
... ainsi on comprend ce qui se passe "derière" quand on clic les boutons
|
||||
... ( quelles commandes sont envoyées )
|
||||
|
||||
|
||||
TUTO VSCODE :
|
||||
https://code.visualstudio.com/docs/sourcecontrol/intro-to-git
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## TUTOS + COMMANDES (terminal)
|
||||
|
||||
- Git - Git dans Bash
|
||||
↳ https://git-scm.com/book/fr/v2/Annexe-A:-Git-dans-d%e2%80%99autres-environnements-Git-dans-Bash
|
||||
|
||||
- Git - Git dans IntelliJ / PyCharm / WebStorm / PhpStorm / RubyMine
|
||||
↳ https://git-scm.com/book/fr/v2/Annexe-A:-Git-dans-d%e2%80%99autres-environnements-Git-dans-IntelliJ-/-PyCharm-/-WebStorm-/ -PhpStorm-/-RubyMine
|
||||
|
||||
- Git - Git dans Visual Studio Code
|
||||
↳ https://git-scm.com/book/fr/v2/Annexe-A:-Git-dans-d%e2%80%99autres-environnements-Git-dans-Visual-Studio-Code
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Etat des fichiers + processus intermédiaires
|
||||
|
||||
- staged/stash - état intermédaire des fichiers priss en compte (ou pas)
|
||||
- puis commit - sauvegarde de cet état de cet état (staged) du projet,
|
||||
- puis envoi - push
|
||||
|
||||
|
||||
( source : https://nulab.com/learn/software-development/git-tutorial/git-basics/ )
|
||||
|
||||
|
||||
( source : https://tecadmin.net/basic-git-workflow/ )
|
||||
|
||||
|
||||
( source : https://www.earthdatascience.org/workshops/intro-version-control-git/basic-git-commands/ )
|
||||
|
||||
|
||||
|
||||
Quand un fichier est modifié, pour enregistrer son état actuel, ici, en local..
|
||||
... dans un état actuel : **staged**
|
||||
--> **staged** == "stade" / "état"
|
||||
|
||||
... la version prise en compte se retrouve dans un espace disque de sauvegarde "**satsh**"
|
||||
... les fichiers dans le **stash** (et leur état **staged**) sera pris en compte durant le prochain **commit**
|
||||
.... le **commit** permet d'indiquer aux autres utilisateurs quelles modifications ont été apportées au projet
|
||||
.... Je peux indiquer ce qui marche et expliquer les modifications
|
||||
.... la dernière étape sera d'envoyer l'état actuel des fichers (**staged/stash**) et le commentaire du **commit** ... au serveur !
|
||||
... ! Pour l'user : D'autres utilisateur.ices pourrons ainsi se référer à ce point de sauvegarde
|
||||
..... ( par son nom et son identifiant unique **hash/SHA** )
|
||||
..... restaurer ou étudier le code depuis ce point de sauvegarde
|
||||
... ! Pour la/le dev : **plutôt que d'envoyer un à un chaque fichier, cette méthode permet de tout synchroniser d'un coup**
|
||||
.... quand le commit est prêt on `git push` !
|
||||
|
||||
|
||||
## Etat des fichiers -- staged/stash - status
|
||||
|
||||
On peut voir l'état des fichiers :
|
||||
> git status
|
||||
|
||||
EX/
|
||||
```bash
|
||||
Sur la branche main
|
||||
Votre branche est à jour avec 'origin/main'.
|
||||
|
||||
Modifications qui seront validées :
|
||||
(utilisez "git restore --staged <fichier>..." pour désindexer)
|
||||
nouveau fichier : NEW_file_ready.md
|
||||
|
||||
Modifications qui ne seront pas validées :
|
||||
(utilisez "git add/rm <fichier>..." pour mettre à jour ce qui sera validé)
|
||||
(utilisez "git restore <fichier>..." pour annuler les modifications dans le répertoire de travail)
|
||||
supprimé : fullyfly.md
|
||||
|
||||
Fichiers non suivis:
|
||||
(utilisez "git add <fichier>..." pour inclure dans ce qui sera validé)
|
||||
NEW_file.md
|
||||
```
|
||||
|
||||
- "non suivis" == le fichier n'a pas été ajouté (add) en **staged**
|
||||
- "qui ne seront pas validées" == fichier supprimé dans les fichiers (mais pas avec git rm)
|
||||
- "qui seront validées" == sont dans le stash (ajoutés)
|
||||
|
||||
|
||||
On nous indique alors ceux qui sont modifiés, les quels sont dans le **staged** (ou non)
|
||||
.. quels fichiers seront compris dans le prochain **commit** (et comment)
|
||||
|
||||
### ADD
|
||||
|
||||
On peu ensuite ajouter l'état actuel de nos fichiers (modifications) au **staged**
|
||||
Ajouter un fichier (ou tous *)
|
||||
> git add ./README.md
|
||||
|
||||
> git add *
|
||||
|
||||
### RM / checkout / restore
|
||||
|
||||
Remove du staged (état lattant avant commit + push)
|
||||
... Cela ne supprime pas le fichier sur notre ordinateur/serveur (en local)
|
||||
... mais cela le retire du staged, de la liste des fichiers qui seront affectés par le prochain commit
|
||||
> git rm ./README.md
|
||||
|
||||
annuler un ajout sur un fichier
|
||||
> git checkout -- CONTRIBUTING.md
|
||||
|
||||
restaure
|
||||
> git restore --staged CONTRIBUTING.md
|
||||
|
||||
|
||||
|
||||
## Commit + éditeur
|
||||
|
||||
( sauvegarder l'état actuel des fichiers locaux )
|
||||
( tel que pris en compte dans le **staged** )
|
||||
> git commit
|
||||
|
||||
### Editeur - ligne de commande
|
||||
|
||||
/CHOIX/ on peut écrir les modifications directement depuis la commmande
|
||||
|
||||
> git commit -m 'initial commit of my project'
|
||||
|
||||
### Editeur - nano / vim / autres
|
||||
|
||||
/CHOIX/ on écrit les modifications apportées dans l'éditeur de text dans le shell/terminal
|
||||
|
||||
. on peut installer nano https://command-not-found.com/nano
|
||||
|
||||
. ou utiliser Vim ( un autre éditeur )...
|
||||
... ( les commandes se font au clavier )
|
||||
... ( : indique une commande )
|
||||
... --> https://vim.rtorr.com
|
||||
....
|
||||
.... on tappe -- ESCAPE + ":a" pour rendrer en mod édition
|
||||
.... on quitte+save en tappant -- ESCAPE + ":wq"
|
||||
.... on quitte no_save tappant -- ESCAPE + ":q!"
|
||||
|
||||
. ou autre éditeur tel VSCodium
|
||||
|
||||
### Editeur - définir par défaut
|
||||
|
||||
/DO/
|
||||
> git config --global core.editor nano
|
||||
|
||||
( détail : https://git-scm.com/book/fr/v2/Démarrage-rapide-Paramétrage-à-la-première-utilisation-de-Git )
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Log
|
||||
Visualiser les modifications :
|
||||
> git log -p -2
|
||||
|
||||
> git log --pretty=oneline
|
||||
|
||||
## History
|
||||
voir l'historique
|
||||
> git log --pretty=format:"%h %s" --graph
|
||||
|
||||
## Sur GitLab/Hub
|
||||
On peut retrouver les commit ici ;
|
||||
> EX/ https://gitlab.com/USER_NAME/PROJECT_NAME/-/commits/main?ref_type=heads
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# ENVOYER
|
||||
|
||||
## PUSH
|
||||
|
||||
Envoi des modifications après un commit
|
||||
( qui valides les modifications locales apportées à tel ou tel fichier )
|
||||
|
||||
> git push
|
||||
|
||||
( id + TOKEN )
|
||||
|
||||
préciser la branch à qui envoyer le commit (et fichiers)
|
||||
> git push --set-upstream origin main
|
||||
|
||||
( id + TOKEN )
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# RESET / CHECKOUT (retour vers le passé/futur)
|
||||
|
||||
_RESET réinitialise l'état du projet par son **hash/SHA**_
|
||||
_CHECKOUT est moins permanent, il permet de retrouver l'état d'un projet sans réinitialiser l'état des fichiers modifiés_
|
||||
|
||||
à chaque commit un identifiant unique est créé (hash/SHA)
|
||||
> EX/ 27162d625d6665a824be74c281d07f6894f16888
|
||||
|
||||
On peut retrouver les commit ici ;
|
||||
> EX/ https://gitlab.com/USER_NAME/PROJECT_NAME/-/commits/main?ref_type=heads
|
||||
|
||||
En faisant un reset hard on retrouve les fichiers telque durant le dit commit
|
||||
> git reset --hard 27162d625d6665a824be74c281d07f6894f16888
|
||||
|
||||
|
||||
|
||||
## RAPPEL Git : REVENIR DANS LE FUTUR
|
||||
|
||||
**CHECKOUT permet de revenir à l'état d'un commit passé SANS RESET (réinitialiser) les fichiers locaux**
|
||||
_CHECKOUT marche pour les retour vers une version passée/futur : un commit (hash/SHA) /OU/ BRANCHE_
|
||||
|
||||
0. cloner un projet
|
||||
|
||||
Depuis le terminal dans un dossier au choix
|
||||
> cd /chemin/vers/mon/dossier
|
||||
|
||||
> git clone https://gitlab.com/bonnebulle/plain-html-redo.git
|
||||
|
||||
> cd plain-html-redo
|
||||
|
||||
( affichier le fichier index dans le navigateur pour voir )
|
||||
> firefox ./public/index.html
|
||||
|
||||
> chromium ./public/index.html
|
||||
|
||||
1. lister les comit précédents
|
||||
2. revenir à telle version du projet ( + **hash/SHA** )
|
||||
|
||||
> git log --oneline
|
||||
|
||||
... réccupérer les fichiers dans une version précédente ...
|
||||
|
||||
> git checkout 117647b
|
||||
|
||||
( affichier le fichier index dans le navigateur pour voir )
|
||||
|
||||
3. revenir à la dernière version ( main )
|
||||
> git checkout main
|
||||
|
||||
( affichier le fichier index dans le navigateur pour voir )
|
||||
|
||||
|
||||
|
||||
|
||||
# BRANCHES
|
||||
|
||||
TUTO : https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Les-branches-en-bref
|
||||
|
||||
voir les branches ( locales + distantes )
|
||||
> git branch --all
|
||||
|
||||
|
||||
CHECKOUT
|
||||
Changer de branche
|
||||
|
||||
TUTO https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Gestion-des-branches
|
||||
|
||||
changer (basculer de branche)
|
||||
> git checkout -b forkit
|
||||
|
||||
revenir/changer à la branche d'origine "main" (ou "forkit")
|
||||
> git checkout main
|
||||
|
||||
> git checkout forkit
|
||||
|
||||
envoyer les modifications à une branche spécifique
|
||||
> git push --set-upstream origin main
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# Merge
|
||||
|
||||
> git merge forkit
|
||||
|
||||
gestion de conflit de versions
|
||||
TUTO :
|
||||
- https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Branches-et-fusions%C2%A0:-les-bases#s_basic_merging
|
||||
> git status
|
||||
|
||||
> git mergetool
|
||||
|
||||
On peut regarder les diff(érences) apportées d'un commit à l'autre... depuis l'interface web de GitHub/Lab
|
||||
Ou avec git diff /ou/ depuis vscode/IDE
|
||||
|
||||
TUTO
|
||||
https://www.atlassian.com/fr/git/tutorials/saving-changes/git-diff
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# READ_ME D'origine :
|
||||
|
||||
Example plain HTML site using GitLab Pages.
|
||||
|
||||
Learn more about GitLab Pages at https://pages.gitlab.io and the official
|
||||
documentation https://docs.gitlab.com/ce/user/project/pages/.
|
||||
|
||||
---
|
||||
|
||||
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
||||
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
||||
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
|
||||
|
||||
- [GitLab CI](#gitlab-ci)
|
||||
- [GitLab User or Group Pages](#gitlab-user-or-group-pages)
|
||||
- [Did you fork this project?](#did-you-fork-this-project)
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
|
||||
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
||||
|
||||
## GitLab CI
|
||||
|
||||
This project's static Pages are built by [GitLab CI][ci], following the steps
|
||||
defined in [`.gitlab-ci.yml`](.gitlab-ci.yml):
|
||||
|
||||
```yml
|
||||
image: busybox
|
||||
|
||||
pages:
|
||||
stage: deploy
|
||||
script:
|
||||
- echo 'Nothing to do...'
|
||||
artifacts:
|
||||
paths:
|
||||
- public
|
||||
expire_in: 1 day
|
||||
rules:
|
||||
- if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
|
||||
```
|
||||
|
||||
The above example expects to put all your HTML files in the `public/` directory.
|
||||
|
||||
## GitLab User or Group Pages
|
||||
|
||||
To use this project as your user/group website, you will need one additional
|
||||
step: just rename your project to `namespace.gitlab.io`, where `namespace` is
|
||||
your `username` or `groupname`. This can be done by navigating to your
|
||||
project's **Settings**.
|
||||
|
||||
Read more about [user/group Pages][userpages] and [project Pages][projpages].
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Did you fork this project?
|
||||
|
||||
If you forked this project for your own use, please go to your project's
|
||||
**Settings** and remove the forking relationship, which won't be necessary
|
||||
unless you want to contribute back to the upstream project.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
1. CSS is missing! That means that you have wrongly set up the CSS URL in your
|
||||
HTML files. Have a look at the [index.html] for an example.
|
||||
|
||||
[ci]: https://about.gitlab.com/solutions/continuous-integration/
|
||||
[index.html]: https://gitlab.com/pages/plain-html/-/blob/main/public/index.html
|
||||
[userpages]: https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-in-projects-and-groups
|
||||
[projpages]: https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-in-projects-and-groups
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
favicon_0.ico
Normal file
BIN
favicon_0.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 318 B |
@@ -1 +0,0 @@
|
||||
TEST fullyfly
|
||||
0
public/.bash_history
Normal file
0
public/.bash_history
Normal file
4
public/.prettierrc
Normal file
4
public/.prettierrc
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"tabWidth": 2,
|
||||
"useTabs": false
|
||||
}
|
||||
66
public/0_index_empty.html
Normal file
66
public/0_index_empty.html
Normal file
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>0_index_empty.html</title>
|
||||
|
||||
<!-- Fiche de styles presque vide -->
|
||||
<link rel="stylesheet" href="./_ressources/0_intro/js/style_basics.css">
|
||||
<!-- styles de bases du projet d'ateliers -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<!-- styles (dans le document) -->
|
||||
<style>
|
||||
a { background: red; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div style="display: none;">Display me not !</div>
|
||||
|
||||
<p>Je peux voir le code source de la page en faisant <code class="key">CTRL+U</code> ou <code class="key">CTRL+MAJ+I</code></p>
|
||||
|
||||
|
||||
<!-- <p>text commenté</p> -->
|
||||
|
||||
<p>Nisi commodo irure labore esse cillum culpa et proident. Proident ea non officia tempor deserunt sint in eu cillum eu laborum ipsum ut aliquip exercitation. Exercitation incididunt sint minim occaecat irure fugiat sunt non anim. Sunt ad velit et sit commodo magna. Exercitation nisi magna aute voluptate. Consectetur irure sunt id reprehenderit. Ea enim ipsum aliqua incididunt duis eu magna occaecat ea dolor pariatur esse. Lorem eu duis do et irure cupidatat dolor occaecat culpa.</p>
|
||||
<p>In aute ullamco labore. Est veniam voluptate nisi tempor voluptate ex dolore ad exercitation officia veniam non consequat culpa est. Dolore sunt consectetur cupidatat. Do sunt minim proident dolor adipisicing magna occaecat nostrud elit occaecat exercitation eiusmod dolor proident veniam. Laboris Lorem ad eiusmod do ipsum reprehenderit nostrud labore qui mollit adipisicing eu. Ea ex nisi consequat magna fugiat nostrud deserunt veniam adipisicing irure proident amet id magna mollit.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Pour commenter, seletionner du text, et faire CTRL+MAJ+/ -->
|
||||
|
||||
<!-- l'espace ci-dessus est visible à l'écran, mais est visible dans l'édieur.... -->
|
||||
<!-- le navigateur ne tient compte que des propriétés dans les éléments, les espaces/marges qu'on leur ajoute -->
|
||||
|
||||
|
||||
<p>Je suis là</p>
|
||||
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
|
||||
<center>
|
||||
<a href="0_intro.html#">Retour à 0_intro.html</a> (# haut de page)<br>
|
||||
<a href="0_intro.html#back_from_index_empty">Retour à 0_intro.html</a> (# stylesheet)
|
||||
</center>
|
||||
<script src="./_ressources/0_intro/js/vide.js"></script>
|
||||
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
1380
public/0_intro.html
Normal file
1380
public/0_intro.html
Normal file
File diff suppressed because it is too large
Load Diff
199
public/0_intro_vscode.html
Normal file
199
public/0_intro_vscode.html
Normal file
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Vscode helper</title>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--background_titles: #00acf0 !important;
|
||||
}
|
||||
div.pre {
|
||||
white-space: pre-line;
|
||||
margin-top: -2em;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
body > div.pre:last-child {
|
||||
margin-bottom: 6rem !important;
|
||||
}
|
||||
.important {
|
||||
background: var(--background_titles);
|
||||
padding: 2px 4px;
|
||||
color: #FFF;
|
||||
padding: 10px 20px;
|
||||
font-weight: bold;
|
||||
a {
|
||||
color: #FFF !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
Framapas : <a href="https://mensuel.framapad.org/p/nd2xsicpe5-ahi9?lang=fr">frama</a>
|
||||
|
||||
<h1>Firefox</h1>
|
||||
|
||||
<div class="pre">
|
||||
<kdb>CTRL+MAJ+I</kdb> les outils de dev. s'affichent
|
||||
<kdb>CTRL+MAJ+M</kdb> vue adaptative
|
||||
<kdb>CTRL+U</kdb>, le code source (le fichier avant qu'il soit lu/interprété par le Navigateur)
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h1>VSCODE, VSCODIUM...</h1>
|
||||
|
||||
<div class="pre">
|
||||
VScode
|
||||
Le logiciel est un IDE, une interface visuelle pour coder...
|
||||
Il est maintenu par Microsoft
|
||||
|
||||
Des gens ont mis à jour une version "sans Microsoft"
|
||||
( sans "Telimetry" == aspiration de données )
|
||||
- VSCodium - Open Source Binaries of VSCode
|
||||
↳ <a href="https://vscodium.com" target="_blank">https://vscodium.com/</a>
|
||||
|
||||
- Codium ( vscodium Windows )
|
||||
↳ <a href="https://thorium.rocks/codium" target="_blank">https://thorium.rocks/codium/</a>
|
||||
|
||||
La version ici (https://code.bonnebulle.xyz) est une version "serveur" <a href="https://coder.com/" target="_blank">infos sur Coder</a>, mais c'est le.la même interface...
|
||||
Il y a quand même quelques changements mineurs, entre autres, pour les raccourcis clavier.
|
||||
|
||||
<span class="important">À installer également : <a href="https://hluk.github.io/CopyQ/" target="_blank">https://hluk.github.io/CopyQ/</a></span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h2>Raccourcis...</h2>
|
||||
|
||||
<h3>Dossiers / Fichiers</h3>
|
||||
|
||||
<div class="pre">
|
||||
<kdb>Ctrl+K</kdb> + <kdb>Ctrl+O</kdb> ouvrir un projet/dossier
|
||||
<kdb>Ctrl+R</kdb> ouvrir un projet/dossier (déjà ouvert.connu)
|
||||
<kdb>Alt+T</kdb> popup fichiers récents
|
||||
<kdb>Ctrl+E</kdb> Chercher parmis les fichiers du dossier/projet
|
||||
<kdb>Ctrl+Maj+S</kdb> sauvegarder sous (un autre nom)
|
||||
+ <cmd>vsc</cmd> /ou/ <cmd>vsc</cmd> /path/to/file.text ( ouvrir dans l'éditeur )
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Commandes menus</h3>
|
||||
|
||||
<div class="pre">
|
||||
<kdb>F1</kdb> [Affichage > Palette de commandes...] <--- chercher n'importe quelle action
|
||||
(<kdb>Ctrl+Maj+P</kdb> sur Vscode non serveur)
|
||||
<kdb>Ctrl+K + Ctrl+S</kdb> Raccourcis clavier
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Affichage, panneaux</h3>
|
||||
|
||||
<div class="pre">
|
||||
<kdb>Ctrl+Maj+O</kdb> Menu Layout (affichages)
|
||||
...
|
||||
<kdb>Alt+E</kdb> ( perso.custo ) : Toggle minimap
|
||||
<kdb>Ctrl+B</kdb> Toggle panneau gauche (Explorer, autres)
|
||||
<kdb>Ctrl+J</kdb> Toggle panneau Terminal
|
||||
<kdb>Ctrl+K + Ctrl+M</kdb> Quand plusieurs éditeurs ouverts side-by-side (plusieurs groups d'éditeurs côte-à-côte)... va élargir l'éditeur actif (où est le curseur)
|
||||
|
||||
<div><strong>Voir Interfaces, groups, side-by-side... <a href="https://code.visualstudio.com/docs/getstarted/userinterface" target="_blank">https://code.visualstudio.com/docs/getstarted/userinterface</a></strong></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h3>Navigation fichier</h3>
|
||||
|
||||
<div class="pre">
|
||||
<kdb>Alt+O</kdb> (perso.script) Afficher le fichier dans le navigateur (new tab) -- macro dans settings
|
||||
+ <cmd>open</cmd> /ou/ <cmd>open</cmd> /path/to/file.text ( navigateur )
|
||||
. . .
|
||||
<kdb>Alt+T</kdb> (perso.custo) Affichage rapide du dernier fichier ouvert (liste)
|
||||
<kdb>Alt+Maj+T</kdb> (perso.custo) Affichage <strike>rapide</strike> du dernier fichier ouvert (liste)
|
||||
<kdb>Ctrl+G</kdb> Go to line (> numéro de ligne)
|
||||
<kdb>Ctrl+Alt+Z</kdb> (custo.perso) : curseur, revenir à la dernière intervention (précédent)... <kdb>+Maj</kdb> (suivant)
|
||||
<a href="https://open-vsx.org/extension/codeandstuff/vscode-navigate-edit-history" target="_blank">https://open-vsx.org/extension/codeandstuff/vscode-navigate-edit-history</a>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Text, recherche...</h3>
|
||||
|
||||
<div class="pre">
|
||||
<kdb>Alt+Z</kdb> Editor text, retour à la ligne (wrap text, largeur max)
|
||||
...
|
||||
<kdb>Ctrl+X</kdb> couper
|
||||
<kdb>Fn+Fleches</kdb> : Aller au début / fin de ligne
|
||||
<kdb>Maj</kdb> : sélectionné du text (marche avec début/fin de ligne)
|
||||
...
|
||||
<kdb>Ctrl+F</kdb> recherche ; <kdb>Ctrl+Maj+F</kdb> panneau de recherche + chercher dans tous les fichiers
|
||||
<kdb>Ctrl+Maj+L</kdb> Rechercher dans le document/fichier le text actuellement sélectionné (mêmes occurences)
|
||||
<kdb>Ctrl+Espace</kdb> Aides (suggestions, infos CSS, autres) ( <a href="https://code.visualstudio.com/docs/editing/intellisense" target="_blank">Intellisense</a> )
|
||||
<kdb>CTRL+MAJ+/</kdb> Commenter
|
||||
<kdb>CTRL+MAJ+Suppr</kdb> ( perso.custo ) : supprimer ligne courante !
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h3>Multi curseurs...</h3>
|
||||
|
||||
<div class="pre">
|
||||
Selection > Utiliser <kdb>Ctrl+Clic</kdb>....
|
||||
<strong>permet d'ajouter un curseur (de text) à plusieurs endroits...</strong>
|
||||
<img src="./_ressources/0_intro/img/0_vscoder_multi_cursors.png">
|
||||
|
||||
<kdb>Ctrl+Maj + fleches(haut/bas)</kdb> ajouter un curseur (au dessus/dessous)
|
||||
<kdb>Alt+A</kdb> ( perso.custo ) : annule le dernier ajout/déplacement/selection de curseur (pratique si on a mal sélectionné)
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h1>Tools / refs</h1>
|
||||
|
||||
<div class="pre">
|
||||
MDN <a href="https://developer.mozilla.org/fr/" target="_blank">MozillaDevNework</a>
|
||||
Commandes (Terminal) <a href="https://cht.sh/" target="_blank">https://cht.sh</a>
|
||||
La <a href="https://la-cascade.io" target="_blank">Cascade</a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
<footer>
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
|
||||
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<script type='text/javascript' src='./0_assets/jquery.erToc.min.js'></script>
|
||||
<script type='text/javascript'>
|
||||
$(document).ready(function() {
|
||||
$('section').erToc({'goTopNode':'section', 'startLevel': 'h1', 'numberedSuffix':'. ', tocTitle: 'Table des matières'});
|
||||
});
|
||||
</script>
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
3
public/0_intro_vscode_notes.html
Normal file
3
public/0_intro_vscode_notes.html
Normal file
@@ -0,0 +1,3 @@
|
||||
# regex search
|
||||
(h1|h2|h3|h4|h5|h6)
|
||||
+ bookmarks toggle
|
||||
156
public/0_min_max_width.html
Normal file
156
public/0_min_max_width.html
Normal file
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>0_min_max_width.html</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- IMPORTANT pour que la taille de l'écran soit concidérée -->
|
||||
<!-- https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/meta/name/viewport -->
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--maxw: 600px;
|
||||
--maxw_extra: 900px;
|
||||
}
|
||||
#width_full_page,
|
||||
#width_bloc_textarea,
|
||||
#width_part_vw
|
||||
{
|
||||
padding: 10px; border: 1px solid;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.min_max_width {
|
||||
min-width: 500px;
|
||||
max-width: var(--maxw_extra);
|
||||
}
|
||||
|
||||
/* vue adaptative aka. responsive design */
|
||||
@media (max-width: 638px) { /* == S'applique tant que l'écran a une largeur maximum de... 638px (et -) */
|
||||
/* == Si l'écran a une largeur max de 638px */
|
||||
/* ..... ok .... ok .... 638px || non */
|
||||
#width_full_page {
|
||||
background: rgb(34, 255, 0);
|
||||
}
|
||||
}
|
||||
@media (min-width: 700px) { /* == Si l'écran est large au minimum de... 700px (et +) */
|
||||
/* non || 700px ..... ok .... ok .... */
|
||||
#width_full_page {
|
||||
background: rgb(255, 102, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* EXTRA/bonus ":has".... */
|
||||
/* Si xxx:has(yyy) == "SI xxx contient yyy" */
|
||||
/* Ici, on garde la taille fixe si le bloc contient une textarea */
|
||||
.min_max_width:has(textarea) {
|
||||
min-width: var(--maxw);
|
||||
max-width: var(--maxw);
|
||||
}
|
||||
textarea {
|
||||
width: var(--maxw); /* initial */
|
||||
max-width: calc(var(--maxw) - 10px);
|
||||
min-width: 400px;
|
||||
min-height: 100px;
|
||||
max-height: 300px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* On peut utiliser des unités de mesure relatives aux dimensions de l'écran */
|
||||
/* vw pour widht (largeure) -- vh pour height (hauteur) */
|
||||
/* MDN === https://developer.mozilla.org/fr/docs/Learn_web_development/Core/CSS_layout/Responsive_Design#utiliser_les_unités_relatives_à_la_zone_daffichage_pour_la_typographie_adaptative*/
|
||||
/* Pas tres pratique pour faire des colonnes fixes, on utilisera plutôt flexbox */
|
||||
#width_part_vw {
|
||||
width: 30vw;
|
||||
margin: auto;
|
||||
margin-top: 4rem;;
|
||||
}
|
||||
.flexible_vw {
|
||||
width: 32vw;
|
||||
padding: 10px; border: 1px solid;
|
||||
background: yellow;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#flexible_vw_wrapper {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a href="./0_intro.html#width_details_max_min"><- Retour</a><br><br>
|
||||
|
||||
|
||||
<div style="white-space: pre-line;"><kdb class="key">CTRL+MAJ+I</kdb> outils de dev.
|
||||
<kdb class="key">CTRL+MAJ+M</kdb> -> Vue adaptative
|
||||
|
||||
<div class="resume">MDN css <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_media_queries/Using_media_queries#cibler_des_caractéristiques_média" target="_blank">CSS_media_queries</a>
|
||||
MDN css <a href="https://developer.mozilla.org/fr/docs/Web/CSS/:has" target="_blank">:has</a>
|
||||
MDN html <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/textarea" target="_blank">textarea</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="width_full_page" class="min_max_width">
|
||||
#width_full_page
|
||||
</div>
|
||||
|
||||
<div id="width_bloc_textarea" class="min_max_width">
|
||||
#width_bloc_textarea
|
||||
<textarea>Ecire un truc</textarea>
|
||||
</div>
|
||||
|
||||
<div id="width_part_vw" class="">
|
||||
#width_part_vw
|
||||
</div>
|
||||
|
||||
<div id="flexible_vw_wrapper">
|
||||
<div class="flexible_vw" class="">
|
||||
.flexible_vw
|
||||
</div>
|
||||
<div class="flexible_vw" class="">
|
||||
.flexible_vw
|
||||
</div>
|
||||
<div class="flexible_vw" class="">
|
||||
.flexible_vw
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
/* pour +de lisibilité je le met style ici... */
|
||||
|
||||
kdb.key {
|
||||
background: gray;
|
||||
color: #fff !important;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
padding: 3px 13px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
kdb.key {
|
||||
font-size: 1em;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.resume {
|
||||
white-space: pre-line;
|
||||
border: 1px solid #aaf;
|
||||
border-radius: 0;
|
||||
padding: 0px;
|
||||
line-height: 1.8em;
|
||||
background: #f2f2ff;
|
||||
padding: 15px 10px 20px 20px;
|
||||
}
|
||||
</style>
|
||||
BIN
public/2_flexbox/flexbox_css_tricks.png
Normal file
BIN
public/2_flexbox/flexbox_css_tricks.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
94
public/2_flexbox/index.html
Normal file
94
public/2_flexbox/index.html
Normal file
@@ -0,0 +1,94 @@
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>2 Flexboxs</title>
|
||||
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<link rel="stylesheet" href="style_flexbox.css">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- <div w3-include-html="./parts/header.html"></div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
<h3>Flexbox 2 colones</h3>
|
||||
|
||||
<div id="flex-container">
|
||||
|
||||
<div class="flex-item">
|
||||
1 Nulla et aliquip labore duis irure veniam ipsum labore excepteur incididunt qui. Non nostrud aliquip cupidatat cupidatat enim commodo pariatur consequat quis. Fugiat nulla amet adipisicing eiusmod ullamco ullamco esse voluptate exercitation mollit velit ea aliquip aute eu. Cillum ex tempor dolore ad ex pariatur ex velit. Labore ad ad non ea cillum eiusmod sunt dolor dolore ipsum reprehenderit enim occaecat. Consequat culpa nisi in esse laborum velit non deserunt nostrud sit in veniam. Dolore veniam ad do incididunt est excepteur eiusmod esse Lorem sint.
|
||||
</div>
|
||||
|
||||
<div class="flex-item">
|
||||
2 Nulla et aliquip labore duis irure veniam ipsum labore excepteur incididunt qui. Non nostrud aliquip cupidatat cupidatat enim commodo pariatur consequat quis. Fugiat nulla amet adipisicing eiusmod ullamco ullamco esse voluptate exercitation mollit velit ea aliquip aute eu. Cillum ex tempor dolore ad ex pariatur ex velit. Labore ad ad non ea cillum eiusmod sunt dolor dolore ipsum reprehenderit enim occaecat. Consequat culpa nisi in esse laborum velit non deserunt nostrud sit in veniam. Dolore veniam ad do incididunt est excepteur eiusmod esse Lorem sint.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h3>Flexbox items</h3>
|
||||
|
||||
|
||||
<ul class="flex-container tomato">
|
||||
|
||||
<li class="flex-item">
|
||||
<img src="/assets/img/random-image.png">
|
||||
</li>
|
||||
|
||||
<li class="flex-item">
|
||||
<img src="/assets/img/random-image.png">
|
||||
</li>
|
||||
|
||||
<li class="flex-item">
|
||||
<img src="/assets/img/random-image.png">
|
||||
</li>
|
||||
|
||||
<li class="flex-item">
|
||||
<img src="/assets/img/random-image.png">
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<h3>Flexbox Navigation</h3>
|
||||
|
||||
|
||||
<ul class="navigation">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Products</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Flexbox Recap</h3>
|
||||
|
||||
<img id="flexbox_css_tricks" src="https://code.vincent-bonnefille.fr/plain-html_back/public/2_flexbox/flexbox_css_tricks.png">
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<script src="/assets/js/script_html_infos.js"></script>
|
||||
<!-- <script src="/assets/js/script_html_include_w3.js"></script> -->
|
||||
|
||||
<!-- <script>
|
||||
includeHTML();
|
||||
</script> -->
|
||||
|
||||
<script src="https://livejs.com/live.js"></script>
|
||||
|
||||
|
||||
</footer>
|
||||
</html>
|
||||
|
||||
119
public/2_flexbox/style_flexbox.css
Normal file
119
public/2_flexbox/style_flexbox.css
Normal file
@@ -0,0 +1,119 @@
|
||||
/* //// Flexbox normal */
|
||||
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
|
||||
|
||||
#flex-container {
|
||||
display: flex;
|
||||
/* display: none !important; */
|
||||
flex-direction: row;
|
||||
gap: 0px 70px;
|
||||
text-align: justify;
|
||||
}
|
||||
#flex-container > .flex-item {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
width: 100px;
|
||||
margin: auto; /* Magic! */
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* //// FLEX items (boites) */
|
||||
|
||||
/* ... */
|
||||
.flex-container {
|
||||
display: flex;
|
||||
max-width: 80vw;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: right;
|
||||
|
||||
/* RESET */
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.flex-container.tomato
|
||||
.flex-item {
|
||||
background: tomato;
|
||||
padding: 0px;
|
||||
width: 200px;
|
||||
width: calc(100% / 4 - 10px);
|
||||
box-sizing: content-box;
|
||||
height: 150px;
|
||||
margin-top: 10px;
|
||||
line-height: 150px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* //// Navigation */
|
||||
.navigation li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Large */
|
||||
.navigation {
|
||||
gap: 0px 20px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
/* This aligns items to the end line on main-axis */
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Medium screens */
|
||||
@media all and (max-width: 800px) {
|
||||
.navigation {
|
||||
/* When on medium sized screens, we center it by evenly distributing empty space around items */
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small screens */
|
||||
@media all and (max-width: 500px) {
|
||||
.navigation {
|
||||
/* On small screens, we are no longer using row direction but column */
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* FIXS */
|
||||
body {
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
#flexbox_css_tricks {
|
||||
/* width: 100vw; */
|
||||
width: calc(100vw - 13px);
|
||||
}
|
||||
|
||||
|
||||
/* ///// FLEXBOX */
|
||||
#flex-container,
|
||||
.flex-container {
|
||||
margin: auto;
|
||||
clear: both;
|
||||
max-width: 80vw;
|
||||
}
|
||||
#flex-container,
|
||||
.flex-container,
|
||||
.navigation {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
BIN
public/3_grid/cat1.jpg
Normal file
BIN
public/3_grid/cat1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
BIN
public/3_grid/cat10.jpg
Normal file
BIN
public/3_grid/cat10.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
public/3_grid/cat2.jpg
Normal file
BIN
public/3_grid/cat2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
public/3_grid/cat3.jpg
Normal file
BIN
public/3_grid/cat3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
public/3_grid/cat4.jpg
Normal file
BIN
public/3_grid/cat4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
public/3_grid/cat5.jpg
Normal file
BIN
public/3_grid/cat5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
public/3_grid/cat6.jpg
Normal file
BIN
public/3_grid/cat6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
public/3_grid/cat7.jpg
Normal file
BIN
public/3_grid/cat7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
public/3_grid/cat8.jpg
Normal file
BIN
public/3_grid/cat8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
public/3_grid/cat9.jpg
Normal file
BIN
public/3_grid/cat9.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
54
public/3_grid/index.html
Normal file
54
public/3_grid/index.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>2 Flexboxs</title>
|
||||
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<link rel="stylesheet" href="style_grid.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="wrapper">
|
||||
<h3>Grids</h3>
|
||||
|
||||
<div id="container_grids" class="wrapper_container">
|
||||
<div class="grid__item"><p>Esse occaecat sint</p></div>
|
||||
<div class="grid__item"><p>Ex culpa veniam</p></div>
|
||||
<div class="grid__item"><p>Laborum labore ipsum</p></div>
|
||||
<div class="grid__item"><p>Commodo aliqua aliqua</p></div>
|
||||
<div class="grid__item"><p>Dolor eiusmod amet</p></div>
|
||||
<div class="grid__item"><p>Irure irure eiusmod</p></div>
|
||||
<div class="grid__item"><p>Eu quis velit</p></div>
|
||||
<div class="grid__item"><p>Ullamco deserunt duis</p></div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Grids (plus)</h3>
|
||||
|
||||
<!-- CATS ! https://genrandom.com/cats/ -->
|
||||
|
||||
<div id="container_grids_plus" class="wrapper_container">
|
||||
<div class="grid__item" style="background: no-repeat url('cat1.jpg')"><p>Esse occaecat sint</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat2.jpg')"><p>Ex culpa veniam</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat3.jpg')"><p>Laborum labore ipsum</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat4.jpg')"><p>Commodo aliqua aliqua</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat5.jpg')"><p>Dolor eiusmod amet</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat6.jpg')"><p>Irure irure eiusmod</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat7.jpg')"><p>Eu quis velit</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat8.jpg')"><p>Ullamco deserunt duis</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat9.jpg')"><p>Occaecat sint</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<script src="/assets/js/script_html_infos.js"></script>
|
||||
<script src="https://livejs.com/live.js"></script>
|
||||
</footer>
|
||||
</html>
|
||||
|
||||
98
public/3_grid/style_grid.css
Normal file
98
public/3_grid/style_grid.css
Normal file
@@ -0,0 +1,98 @@
|
||||
/* 1. GRIDS */
|
||||
#container_grids,
|
||||
#container_grids_plus {
|
||||
display: grid;
|
||||
grid-gap: 30px;
|
||||
align-content: center;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-column-gap: 20px
|
||||
grid-row-gap: 20px
|
||||
justify-items: stretch
|
||||
align-items: stretch
|
||||
}
|
||||
.grid__item {
|
||||
height: 100px;
|
||||
border-radius: 8px;
|
||||
background: burlywood;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* 2. PLUS */
|
||||
|
||||
/* COUNTER */
|
||||
/* https://developer.mozilla.org/fr/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters */
|
||||
#container_grids_plus {
|
||||
counter-reset: section;
|
||||
}
|
||||
#container_grids_plus
|
||||
.grid__item::before {
|
||||
counter-increment: section;
|
||||
content: counter(section);
|
||||
margin-top: -100px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* BACKGROUNDS */
|
||||
/* https://developer.mozilla.org/fr/docs/Web/CSS/background */
|
||||
|
||||
|
||||
/* VARIABLES */
|
||||
/* VERIABLES on leur attribue une valeure...
|
||||
qu'on peut réutiliser plusieurs fois !!! */
|
||||
:root {
|
||||
--backcolor: rgb(223, 169, 99);
|
||||
--frontcolor: brown;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* !IMPORTANT, outrepasser les styles "inline", valeurs attribuées directement dans les éléments (HTML) */
|
||||
#container_grids_plus
|
||||
.grid__item {
|
||||
font-weight: bold;
|
||||
border: 1px solid var(--frontcolor);
|
||||
color: var(--frontcolor);
|
||||
|
||||
/* https://developer.mozilla.org/fr/docs/Web/CSS/background-size */
|
||||
background-size: cover !important;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* CIBLAGE complexe */
|
||||
/* https://learn.shayhowe.com/advanced-html-css/complex-selectors/ */
|
||||
#container_grids_plus
|
||||
.grid__item:hover {
|
||||
color: #FFF;
|
||||
text-shadow: 0px 0px 5px var(--frontcolor);
|
||||
}
|
||||
#container_grids_plus
|
||||
.grid__item:not(:hover) {
|
||||
background-image: unset !important;
|
||||
background-color: var(--backcolor) !important;
|
||||
}
|
||||
|
||||
/* ENFANTS dernier dans la classe .wrapper_container */
|
||||
/* https://developer.mozilla.org/fr/docs/Web/CSS/:last-child */
|
||||
#wrapper
|
||||
.wrapper_container:last-child {
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
|
||||
/* NTH */
|
||||
/* https://developer.mozilla.org/fr/docs/Web/CSS/background-size */
|
||||
|
||||
|
||||
116
public/4_formulaires_php/index.php
Normal file
116
public/4_formulaires_php/index.php
Normal file
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Formulaire PHP Simple</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Ajouter une entrée</h1>
|
||||
|
||||
<form method="POST">
|
||||
<label>Texte :</label>
|
||||
<input type="text" name="contenu" required>
|
||||
<button type="submit">Enregistrer</button>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
|
||||
<?php
|
||||
// Charger les variables d'environnement depuis un fichier .env
|
||||
// ... car oui ce projet est publié sur gitea (git)
|
||||
// Dissimule le mot de passe + user ---- me les redemander !
|
||||
function loadEnv($path) {
|
||||
if (!file_exists($path)) {
|
||||
throw new Exception("Fichier .env introuvable : $path");
|
||||
}
|
||||
|
||||
if (!is_readable($path)) {
|
||||
throw new Exception("Fichier .env non lisible : $path");
|
||||
}
|
||||
|
||||
$lines = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
|
||||
if ($lines === false) {
|
||||
throw new Exception("Impossible de lire le fichier .env : $path");
|
||||
}
|
||||
|
||||
foreach ($lines as $line) {
|
||||
$line = trim($line);
|
||||
|
||||
// Ignorer les commentaires et lignes vides
|
||||
if (empty($line) || strpos($line, '#') === 0) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Parser la ligne KEY=VALUE
|
||||
if (strpos($line, '=') === false) {
|
||||
continue;
|
||||
}
|
||||
|
||||
list($key, $value) = explode('=', $line, 2);
|
||||
$key = trim($key);
|
||||
$value = trim($value);
|
||||
|
||||
// Retirer les guillemets si présents
|
||||
$value = trim($value, '"\'');
|
||||
|
||||
// Définir la variable d'environnement
|
||||
putenv("$key=$value");
|
||||
$_ENV[$key] = $value;
|
||||
$_SERVER[$key] = $value;
|
||||
}
|
||||
}
|
||||
// Charger le fichier .env (adapter le chemin selon votre structure)
|
||||
loadEnv('/media/BC_01C/www/vscode_server/index/assets/mysql/.env');
|
||||
// Configuration de la base de données
|
||||
$host = getenv('DB_HOST') ?: '127.0.0.1';
|
||||
$port = getenv('DB_PORT') ?: '3367';
|
||||
$dbname = getenv('DB_NAME') ?: 'nom_base_de_donnes_default';
|
||||
$username = getenv('DB_USER');
|
||||
$password = getenv('DB_PASSWORD');
|
||||
|
||||
try {
|
||||
// Connexion à MySQL
|
||||
$pdo = new PDO("mysql:host=$host;port=$port;dbname=$dbname;charset=utf8", $username, $password);
|
||||
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
|
||||
// Créer la table si elle n'existe pas
|
||||
$createTable = "CREATE TABLE IF NOT EXISTS entrees (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
contenu TEXT NOT NULL,
|
||||
date_creation DATETIME NOT NULL
|
||||
)";
|
||||
$pdo->exec($createTable);
|
||||
|
||||
// Si le formulaire est soumis
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['contenu'])) {
|
||||
$contenu = $_POST['contenu'];
|
||||
|
||||
// Insertion dans la base
|
||||
$stmt = $pdo->prepare("INSERT INTO entrees (contenu, date_creation) VALUES (?, NOW())");
|
||||
$stmt->execute([$contenu]);
|
||||
|
||||
echo "<p><strong>✓ Enregistré avec succès !</strong></p>";
|
||||
}
|
||||
|
||||
// Affichage des entrées
|
||||
echo "<h2>Entrées enregistrées :</h2>";
|
||||
$stmt = $pdo->query("SELECT * FROM entrees ORDER BY date_creation DESC");
|
||||
$entrees = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
|
||||
if (count($entrees) > 0) {
|
||||
echo "<ul>";
|
||||
foreach ($entrees as $entree) {
|
||||
echo "<li>" . htmlspecialchars($entree['contenu']) . " <em>(" . $entree['date_creation'] . ")</em></li>";
|
||||
}
|
||||
echo "</ul>";
|
||||
} else {
|
||||
echo "<p>Aucune entrée pour le moment.</p>";
|
||||
}
|
||||
|
||||
} catch (PDOException $e) {
|
||||
echo "<p><strong>Erreur :</strong> " . $e->getMessage() . "</p>";
|
||||
}
|
||||
?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
89
public/5_js/5_js.html
Normal file
89
public/5_js/5_js.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<title>5 JS</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- GENERAL -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<link href="/assets/css/prism.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="toc_wrapper">
|
||||
<label for="toc_checkbox">Table des matières</label>
|
||||
<input id="toc_checkbox" type="checkbox">
|
||||
<div id="toc"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- TOP navbare -->
|
||||
<div id="navbar">
|
||||
<a href="/"><i class="fa-solid fa-code"></i> Index</a>
|
||||
<a href="/vs/?folder=/www/" id="code_this"><i class="fa-solid fa-code"></i> code ceci</a>
|
||||
<a href="/assets/coucou/"><i class="fa-solid fa-ghost"></i> Messages</a>
|
||||
<a href="0_intro_vscode"><i class="fa-solid fa-circle-info"></i> Vscode aide</a>
|
||||
<a href="https://files.bonnebulle.xyz"><i class="fa-solid fa-folder"></i> Fichiers</a>
|
||||
<a href="https://snip.bonnebulle.xyz/public/snippets"><i class="fa-solid fa-scissors"></i> Snipets</a>
|
||||
<a href="https://php.bonnebulle.xyz"><i class="fa-solid fa-database"></i> Php</a>
|
||||
</div>
|
||||
|
||||
<!-- Titre -->
|
||||
<h1>Bonjour le Monde !</h1>
|
||||
|
||||
<section>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
<div id="top_page"><a href="#">#</a></div>
|
||||
|
||||
|
||||
<footer>
|
||||
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
|
||||
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="/assets/js/script_html_code.js"></script>
|
||||
<script src="/assets/js/prism.js"></script>
|
||||
<script src="/assets/js/wrap_css_html_copy.js"></script>
|
||||
<script src="/assets/js/script_html_infos.js"></script>
|
||||
<script src="https://livejs.com/live.js"></script>
|
||||
|
||||
<script>
|
||||
function css_alerte() {
|
||||
$("body").css("background","red")
|
||||
}
|
||||
|
||||
let batterie=10
|
||||
let en_ch<arge=true
|
||||
function check_batterie(en_charge, batterie) {
|
||||
if (batterie < 90) {
|
||||
if (en_charge) {
|
||||
console.log("en fait ca va")
|
||||
return;
|
||||
}
|
||||
|
||||
alert("message == " +message);
|
||||
css_alerte();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
8
public/_ressources/0_intro/css/style_basics.css
Normal file
8
public/_ressources/0_intro/css/style_basics.css
Normal file
@@ -0,0 +1,8 @@
|
||||
p {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#next_flexbox {
|
||||
background: #000; color: #FFF;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
3
public/_ressources/0_intro/css/style_columns.css
Normal file
3
public/_ressources/0_intro/css/style_columns.css
Normal file
@@ -0,0 +1,3 @@
|
||||
|
||||
|
||||
|
||||
BIN
public/_ressources/0_intro/img/0_afficher_style.png
Executable file
BIN
public/_ressources/0_intro/img/0_afficher_style.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
public/_ressources/0_intro/img/0_firefox_parametres_devs.png
Normal file
BIN
public/_ressources/0_intro/img/0_firefox_parametres_devs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
public/_ressources/0_intro/img/0_padding_margin.png
Normal file
BIN
public/_ressources/0_intro/img/0_padding_margin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
public/_ressources/0_intro/img/0_padding_margin_cut.png
Executable file
BIN
public/_ressources/0_intro/img/0_padding_margin_cut.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
public/_ressources/0_intro/img/0_vscoder_multi_cursors.png
Normal file
BIN
public/_ressources/0_intro/img/0_vscoder_multi_cursors.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
2
public/_ressources/0_intro/js/vide.js
Normal file
2
public/_ressources/0_intro/js/vide.js
Normal file
@@ -0,0 +1,2 @@
|
||||
// pas si vide
|
||||
// alert("coucou")
|
||||
1
public/chambre.html
Normal file
1
public/chambre.html
Normal file
@@ -0,0 +1 @@
|
||||
chambre
|
||||
0
public/framapad.html
Normal file
0
public/framapad.html
Normal file
0
public/index-de-demo.html
Normal file
0
public/index-de-demo.html
Normal file
@@ -1,21 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="generator" content="GitLab Pages">
|
||||
<title>Plain HTML site using GitLab Pages</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<a href="https://bonnebulle.gitlab.io/plain-html-redo">URL du projet</a>
|
||||
</div>
|
||||
|
||||
<h1>Bonjour le Monde !</h1>
|
||||
|
||||
<p>
|
||||
Un projet simple construit grâce à un template sur GitLab
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
0
public/livecoder.html
Normal file
0
public/livecoder.html
Normal file
454
public/style.css
454
public/style.css
@@ -1,24 +1,460 @@
|
||||
:root {
|
||||
--property: #b77804;
|
||||
--value: #0451A5;
|
||||
--attr_value: #2aa198;
|
||||
--background_titles: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.er_toc_tag,
|
||||
:not(.code-content) > p {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.token.tag {
|
||||
color: #800000 !important;
|
||||
font-weight:400;
|
||||
}
|
||||
.token.punctuation {
|
||||
color: #800000 !important;
|
||||
font-weight: 480;
|
||||
}
|
||||
.token.property,
|
||||
.color.property {
|
||||
color: var(--property) !important;
|
||||
}
|
||||
|
||||
.token.value,
|
||||
.color.value {
|
||||
color: var(--value) !important;
|
||||
}
|
||||
.token.selector,
|
||||
.token.attr-value {
|
||||
color: var(--attr_value) !important;
|
||||
font-weight: 480;
|
||||
}
|
||||
|
||||
|
||||
.language-markup .token.attr-name {
|
||||
color: #E50000 !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
.language-markup .token.value {
|
||||
color: #0451A5 !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
code[class*="language-markup"] {
|
||||
color: #595959 !important;
|
||||
}
|
||||
code[class*="language-markup"]:hover {
|
||||
color: #898989 !important;
|
||||
}
|
||||
|
||||
code[class*="language-css"] {
|
||||
color: var(--value) !important;
|
||||
}
|
||||
|
||||
.token.number {
|
||||
color: #FF0095 !important;
|
||||
}
|
||||
.token.unit {
|
||||
color: #7400DA;
|
||||
}
|
||||
/* .token.hexcode.color {
|
||||
color: #00c3ff;
|
||||
} */
|
||||
|
||||
.token.function {
|
||||
color: #4A8147 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.token.comment {
|
||||
color: #008000b3 !important;
|
||||
}
|
||||
pre[class*="language-"]:hover
|
||||
.token.comment {
|
||||
color: #04008017 !important;
|
||||
}
|
||||
|
||||
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
counter-reset: compteListe;
|
||||
}
|
||||
html#centred {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
margin: auto;
|
||||
max-width: 1280px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #FFF;
|
||||
/* h1 { */
|
||||
/* text-align: center; */
|
||||
/* } */
|
||||
|
||||
#navbar {
|
||||
background-color: #fff !important;
|
||||
border-radius: 2px;
|
||||
max-width: 800px;
|
||||
/* position: sticky; */
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
max-width: none;
|
||||
text-align: center;
|
||||
|
||||
* {
|
||||
}
|
||||
|
||||
a {
|
||||
/* color: #000; */
|
||||
color: blue;
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
padding: 10px 10px 10px 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
.resume {
|
||||
white-space: pre-line;
|
||||
border: 1px solid #aaf;
|
||||
border-radius: 0;
|
||||
padding: 0px;
|
||||
line-height: 1.8em;
|
||||
background: #f2f2ff;
|
||||
padding: 15px 10px 20px 20px;
|
||||
}
|
||||
/* .resume + .wrap_css_html {
|
||||
margin-top: -20px;
|
||||
} */
|
||||
|
||||
.code-toolbar + .code-toolbar {
|
||||
margin-top: -30px !important;
|
||||
}
|
||||
|
||||
/* .exemple, */
|
||||
.code-content {
|
||||
/* border: 1px solid #e8cf8b; */
|
||||
border-radius: 0 0 3px 3px;
|
||||
padding: 8px 16px 12px;
|
||||
margin-top: -16px;
|
||||
background: #fff;
|
||||
/* margin-bottom: 10px; */
|
||||
float: none;
|
||||
}
|
||||
|
||||
.code-content::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.code-toolbar {
|
||||
border: 1px solid #e8cf8b;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
pre[class*="language-"] {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
pre[class*="language-"] {
|
||||
margin-top: 0 !important;
|
||||
padding-bottom: 30px !important;
|
||||
}
|
||||
/* .exemple {
|
||||
padding-top: 22px;
|
||||
} */
|
||||
pre.language-css {
|
||||
background: #f5fde3 !important;
|
||||
}
|
||||
|
||||
codecss,
|
||||
codescaped {
|
||||
background-color: #fdf6e3;
|
||||
border-radius: 0 0 3px 3px;
|
||||
padding: 3px;
|
||||
color: #000 !important;
|
||||
}
|
||||
codecss {
|
||||
background-color: #f5fde3;
|
||||
}
|
||||
codescaped.espace {
|
||||
white-space: pre;
|
||||
display: block;
|
||||
border: 1px solid #e8cf8b;
|
||||
padding: 15px 20px 22px 20px;
|
||||
}
|
||||
|
||||
.wrap_css_html_button {
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
float: right;
|
||||
margin-left: -310px;
|
||||
right: -11px;
|
||||
top: -12px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
background: darkgreen;
|
||||
border: 2px solid darkgreen;
|
||||
border-radius: 0 4px 0px 4px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wrap_anchor_link {
|
||||
float: left;
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
text-decoration: none;
|
||||
z-index: 999;
|
||||
margin-right: 13px;
|
||||
font-size: 16px;
|
||||
margin-top: -11px;
|
||||
background: rgb(161, 255, 161);
|
||||
color: #000000;
|
||||
padding: 1px 7px;
|
||||
|
||||
float: right;
|
||||
margin-right: 33px;
|
||||
position: sticky !important;
|
||||
margin-left: -570px;
|
||||
}
|
||||
.anchor_link {
|
||||
color: rgb(60, 99, 171);
|
||||
}
|
||||
|
||||
.file {
|
||||
background: #e3eafd;
|
||||
font-style: normal;
|
||||
color: #000 !important;
|
||||
text-decoration: none !important;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
.wrap_css_html div.code-toolbar[data-type="language-css"] > .toolbar {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
code:not([class]) {
|
||||
font-size: 1.3em;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
padding: 10px 10px 10px 0;
|
||||
background: #fdf6e3;
|
||||
padding: 0 5px;
|
||||
}
|
||||
/* :is(.code-toolbar) + :not(.exemple) {
|
||||
margin-top: 1rem;
|
||||
} */
|
||||
:is(.exemple, .code-content) p {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.toolbar-item:first-child span {
|
||||
border-radius: 0 !important;
|
||||
background: #fff !important;
|
||||
box-shadow: none !important;
|
||||
left: -10px !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.language-markup {
|
||||
word-wrap: anywhere !important;
|
||||
white-space: break-spaces !important;
|
||||
}
|
||||
|
||||
/* code.language-css::before {
|
||||
content: attr(id) " -- " attr(data-num_css);
|
||||
position: relative;
|
||||
float: right;
|
||||
margin-right: 100px;
|
||||
margin-top: -12px;
|
||||
font-size: 12px;
|
||||
} */
|
||||
|
||||
cmd,
|
||||
code.term,
|
||||
code.key,
|
||||
kdb,
|
||||
kdb.key {
|
||||
background: gray;
|
||||
color: #fff !important;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
padding: 3px 13px;
|
||||
border-radius: 4px;
|
||||
white-space: pre-line;
|
||||
}
|
||||
kdb,
|
||||
kdb.key {
|
||||
font-size: 1em;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
code.term {
|
||||
background: rgb(237, 221, 221);
|
||||
color: #000000 !important;
|
||||
}
|
||||
cmd {
|
||||
background: #000;
|
||||
color: #3fff3f !important;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
hr.space {
|
||||
height: 2rem;
|
||||
border: 0;
|
||||
}
|
||||
hr.visible {
|
||||
background-color: #000;
|
||||
height: 10px;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.copy-notification {
|
||||
color: #ffffff;
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
position: fixed;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
/* width: 150px; */
|
||||
margin-top: -30px;
|
||||
margin-left: -85px;
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wrap_css_html {
|
||||
border: 2px solid #59b2a5;
|
||||
padding: 10px;
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.wrap_css_html .code-toolbar:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.wrap_css_html + .wrap_css_html {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.wrap_css_html + *:not(.wrap_css_html) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.wrap_css_html:target {
|
||||
border-color: red !important;
|
||||
}
|
||||
|
||||
|
||||
.color.property {
|
||||
color: var(--property) !important;
|
||||
font-weight: 550 !important;
|
||||
}
|
||||
.color.value {
|
||||
color: var(--value) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
:not(.code-content) > :is(h1, h2, h3, h4, h5, h6) {
|
||||
background: var(--background_titles);
|
||||
color: #FFF;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
:is(html#centred, section.centred) :not(.code-content) > :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
#next_flexbox {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.hash_title {
|
||||
position: absolute;
|
||||
margin-left: -110px;
|
||||
text-decoration: none;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.hash_title::before {
|
||||
counter-increment: compteListe 1;
|
||||
content: counter(compteListe) " ";
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
div.pre {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.er_toc {
|
||||
margin: 2rem 0;
|
||||
border: 1px solid gray;
|
||||
padding: 2em 0 1em 2em;
|
||||
}
|
||||
|
||||
#toc {
|
||||
display: none;
|
||||
}
|
||||
#toc_checkbox:checked + #toc {
|
||||
display: block;
|
||||
}
|
||||
#toc li {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
#toc_wrapper {
|
||||
margin: 40px 0px -40px 0;
|
||||
}
|
||||
.er_toc_top {
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: #ffffff;
|
||||
#top_page {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
#top_page a {
|
||||
padding: 10px;
|
||||
font-size: 1.2em;
|
||||
text-decoration: none;
|
||||
font-style: normal;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.language-markup .token.keyword-class {
|
||||
color: #000ECF !important;
|
||||
}
|
||||
.language-markup .token.keyword-id {
|
||||
color: #C300FF !important;
|
||||
}
|
||||
|
||||
/* quickfix ok with Normalise spaces (prism plugin) */
|
||||
/* pre code[class^="language-"] {
|
||||
color: #595959 !important;
|
||||
margin-top: -1em;
|
||||
display: block;
|
||||
padding-bottom: 1em;
|
||||
} */
|
||||
3
public/syle_demo.css
Normal file
3
public/syle_demo.css
Normal file
@@ -0,0 +1,3 @@
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
background-color: red; font-size: 3em;
|
||||
}
|
||||
30
public/template.html
Normal file
30
public/template.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- je vais commencer ici -->
|
||||
<p>
|
||||
<u>text surligné</u>
|
||||
</p>
|
||||
|
||||
<u style="color: blanchedalmond; font-size: 1em; line-height: 1.3em;">text souligné</u>
|
||||
<u style="color: blanchedalmond; font-size: 1em; line-height: 1.3em;">text souligné</u>
|
||||
<u style="color: blanchedalmond; font-size: 1em; line-height: 1.3em;">text souligné</u>
|
||||
<u style="color: blanchedalmond; font-size: 1em; line-height: 1.3em;">text souligné</u>
|
||||
|
||||
|
||||
<a href="chambre.html">chambre !</a>
|
||||
|
||||
<img style="width: 100px; height: 100px;" src="nom_de_limage.jpg"
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user