Afin d'en faciliter l'utilisation, Timdoc a été monté en composantes VueJS.
Titre de section
grostitre
La composante <grostitre> remplace les h1, créent une ancre et l'ajoute à la table des matières automatiquement.
Exemple de cette section:
<grostitre>Titre de section</grostitre>
dots
La composante <dots> est utilisée pour séparer les différentes sections d'une page.
<dots></dots>
Navigation
children
La balise <children></children> permet de lister les sous-dossier d'une page. Cette composante ne doit être utilisée qu'a l'intérieur d'une page de type list.
<?php
/**
* @type list
* @title Manuel
* @icon images/icon.png
* @abstract Installation et développement
*/
?>
<children></children>
Le rendu de cette composante est effectué par le pré-processeur.
Bulles d'informations
info
<info>Ceci est une bulle d'information</info>
<warning>Ceci est une bulle d'avertissement</warning>
<alert>Ceci est une bulle d'alerte</alert>
<thumbsup>Ceci est une bulle d'approbation</thumbsup>
<bravo>Ceci est une bulle d'applaudissement</bravo>
Ceci est une bulle d'information
Ceci est une bulle d'avertissement
Ceci est une bulle d'alerte
Ceci est une bulle d'approbation
Ceci est une bulle d'applaudissement
Puces de chiffre
Par défaut, la grosseur d'une puce de chiffre est de 24px.
<zero></zero>
<one size="29" color="#00ff00"></one>
<two size="34" color="skyblue"></two>
<three size="39" color="tomato"></three>
<four size="44"></four>
<five size="49"></five>
<six size="54"></six>
<seven size="59"></seven>
<eight size="64"></eight>
<nine size="69"></nine>
Liens médias
mediafile
Lier un fichier média afin de le copier ou de le télécharger.
<mediafile src="images/icon.webp">Icône</mediafile>
<mediafile src="images/gandalf.svg">Gandalf</mediafile>
Icône
Gandalf
Si vous n'avez pas besoin de la boîte d'adresse.
<mediafile src="images/icon.webp" addr="false">Icône</mediafile>
<mediafile src="images/gandalf.svg" addr="false">Gandalf</mediafile>
Icône
Gandalf
doclink
<doclink href="https://css-tricks.com/almanac/properties/f/flex-direction/">flex-direction</doclink>
<doclink href="https://www.w3schools.com/cssref/css3_pr_flex-direction.php">flex-direction</doclink>
<doclink href="https://developer.mozilla.org/fr/docs/Web/CSS/flex-direction">flex-direction</doclink>
flex-direction
flex-direction
flex-direction
intlink
<intlink href="../../582-215MO/css/exercices/lost-highway/"></intlink>
Lost Highway
Pour cet exercice, vous devez écrire du CSS afin de recréer la pochette de la bande sonore du film Lost Highway de David Lynch.
Il existe aussi la composante <listlink href="..."></listlink> qui est l'équivalent de <intlink></intlink> mais pour les pages de type list.
Le rendu de cette composante est effectué par le pré-processeur.
exercice
<exercice href="exercices/flexbox-defense"></exercice>
EXERCICE
Flexbox Defense - Niveaux 1 à 9
Complète les 9 premiers niveaux de Flexbox Defense.
Le rendu de cette composante est effectué par le pré-processeur.
tool
<tool href="tools/css-gradient"></tool>
Le rendu de cette composante est effectué par le pré-processeur.
knowmore
<knowmore href="https://fr.wikipedia.org/wiki/Monotremata">
Les monotrèmes (Monotremata) constituent un ordre animal défini par
Charles-Lucien Bonaparte en 1838, regroupant des espèces caractérisées
par le fait d'être à la fois ovipares et mammifères : ils pondent des œufs
mais allaitent leurs petits.
</knowmore>
Les monotrèmes (Monotremata) constituent un ordre animal défini par
Charles-Lucien Bonaparte en 1838, regroupant des espèces caractérisées
par le fait d'être à la fois ovipares et mammifères : ils pondent des œufs
mais allaitent leurs petits.
Surbrillance
incode
Utilisez la proprité <incode>transform</incode>.
Utilisez la proprité
transform.
Le rendu de cette composante est effectué par le pré-processeur.
highlight
<highlight lang="javascript">
console.log("Ceci est du javascript en surbrillante grâce à la librairie javascript Highlight.js qui supporte une tonne de langages différents.");
</highlight>
console.log("Ceci est du javascript en surbrillante grâce à la librairie javascript Highlight.js qui supporte une tonne de langages différents.");
Si votre texte est trop long vous pouvez toujours utiliser la propriété scroll="true" pour activer la barre de défilement horizontale.
<highlight lang="javascript" scroll="true">
console.log("Ceci est du javascript en surbrillante grâce à la librairie javascript Highlight.js qui supporte une tonne de langages différents.");
</highlight>
console.log("Ceci est du javascript en surbrillante grâce à la librairie javascript Highlight.js qui supporte une tonne de langages différents.");
Le rendu de cette composante est effectué par le pré-processeur.
Languages supportés
Liste à cocher
checklist
<checklist>
Bacon ipsum dolor amet pork loin shankle leberkas beef capicola porchetta ground round kevin meatball bresaola andouille.
Andouille ham bresaola landjaeger meatloaf shoulder t-bone kielbasa salami corned beef porchetta ball tip.
Brisket sirloin short loin beef shank swine ham hock hamburger spare ribs cupim.
Chuck brisket bacon, bresaola buffalo drumstick pork chop strip steak boudin.
Cow picanha fatback pastrami meatloaf biltong tongue shankle pork drumstick pork chop ribeye.
Spare ribs shank hamburger shankle.
Fatback sausage andouille, tenderloin ribeye ham short loin swine burgdoggen kielbasa capicola chuck spare ribs.
</checklist>
Bacon ipsum dolor amet pork loin shankle leberkas beef capicola porchetta ground round kevin meatball bresaola andouille.
Andouille ham bresaola landjaeger meatloaf shoulder t-bone kielbasa salami corned beef porchetta ball tip.
Brisket sirloin short loin beef shank swine ham hock hamburger spare ribs cupim.
Chuck brisket bacon, bresaola buffalo drumstick pork chop strip steak boudin.
Cow picanha fatback pastrami meatloaf biltong tongue shankle pork drumstick pork chop ribeye.
Spare ribs shank hamburger shankle.
Fatback sausage andouille, tenderloin ribeye ham short loin swine burgdoggen kielbasa capicola chuck spare ribs.
Citation
quote
<quote author="Gandalf" title="Magicien" photo="./images/gandalf.webp">
Un magicien n'est jamais en retard, ni en avance d'ailleurs Frodon Sacquet.
Il arrive précisément à l'heure prévue.
</quote>
Un magicien n'est jamais en retard, ni en avance d'ailleurs Frodon Sacquet. Il arrive précisément à l'heure prévue.
Couleurs
color
<color>#51af3f</color>
<color>#1e98e1</color>
<color>#ee4bbe</color>
<color>#8a774c</color>
#51af3f
#1e98e1
#ee4bbe
#8a774c
Images
timg
La composante <timg src=""></timg> agît de la même manière que la balise <img src=""> à l'exception que l'expression $t sera remplacé par le nom du thème (light ou dark).
<timg src="./images/timg-$t.webp" class="full"></timg>
gallery
<gallery>
photos/01.webp
photos/02.webp
photos/03.webp
photos/04.webp
photos/05.webp
photos/06.webp
photos/07.webp
photos/08.webp
photos/09.webp
photos/10.webp
</gallery>
photos/01.webp
photos/02.webp
photos/03.webp
photos/04.webp
photos/05.webp
photos/06.webp
photos/07.webp
photos/08.webp
photos/09.webp
photos/10.webp
Vidéos
youtube
Afin d'accélérer le chargement des pages contenant des vidéos, il est fortement conseillé d'utiliser la composante <youtube src="id"></youtube>.
<youtube src="KVJBHSOx9jI"></youtube>
Vimeo
<vimeo src="874986396"></vimeo>
clip
<clip src="videos/le-boson-de-higgs.mp4"></clip>
Manuel / Vidéos
clipasset
<clipasset> permet d'inclure un video inline en boucle. Il est conseillé d'avoir un vidéo d'une largeur maximale de 770px. Il est aussi recommandé de bien compresser son vidéo avec la commande FFMPEG suivante:
> ffmpeg -y -i "input.mp4" -an -c:v libx264 -profile:v main -level:v 3.0 -pix_fmt yuv420p -preset veryslow -movflags faststart -crf 22 -vf "scale=770:-1" "output.mp4"
<clipasset src="./videos/king-crimson.mp4"></clipasset>
Il est possible d'afficher le <clipasset> en format téléphone mobile. Pour ce faire utilisez mobile="true"
<clipasset src="anim-figma-appli-mobile.mov" mobile="true"></clipasset>
Audios
audioplayer
<tune src="audios/careless-whisper.mp3"></tune>
Manuel / Audios
Codepen
Par défaut, si l'attribut tab n'est pas spécifié, les tabs HTML et Result sont affichés.
Exemples:
<codepen id="gOEwrvG" tab="result"></codepen>
<codepen id="gOEwrvG" tab="css,result" height="500"></codepen>
<codepen id="gOEwrvG" notab="true" height="400"></codepen>
Correction
Il est possible de créer un simulateur de correction avec les balises correction et criteria.
Exemple:
<correction scale="Excellent, Bon, Moyen, Médiocre, Absent" value="10">
<criteria value="20">Album</criteria>
<criteria value="20">Textes</criteria>
<criteria value="20">Mains</criteria>
<criteria value="20">Transitions</criteria>
<criteria value="5">Débrouillardise</criteria>
<criteria value="5">Clareté du code</criteria>
<criteria value="5">Suivi des consignes</criteria>
<criteria value="5">Remise</criteria>
</correction>
Album
Textes
Mains
Transitions
Débrouillardise
Clareté du code
Suivi des consignes
Remise
Wiki Teams
Comme le wiki suit le thème de Timdoc, il sera affiché par défaut en thème light dans Teams. Il est possible de forcer le thème en l'ajoutant à l'adresse url.
https://tim-montmorency.com/timdoc/582-215MO/wiki/?light
https://tim-montmorency.com/timdoc/582-215MO/wiki/?dark
wiki-page
La balise <wiki-page> ne doit être utilisée que dans une page de type wiki.
<?php
/**
* @type wiki
* @title Wiki - Intégration Web
* @icon images/icon.png
* @abstract Intégration Web
*/
?>
<wiki-page name="Cours 01A" date="2023-05-09">
<intlink href="../css/anatomie/"></intlink>
<intlink href="../css/selecteurs/"></intlink>
<intlink href="../css/selecteurs/exercices/css-diner/"></intlink>
<intlink href="../autres/chemins/"></intlink>
<intlink href="../autres/chemins/exercices/pokemon/"></intlink>
</wiki-page>
Types de pages
Composantes