initial commit

.gitignore

@@ -0,0 +1,99 @@
+# Created by .ignore support plugin (hsz.mobi)
+### local TLS
+localhost*.*
+
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.yarn
+.pnp*
+
+# conf
+.editorconfig
+.vscode
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

README.md

@@ -0,0 +1 @@
+# vitepress-starter

docs/.vitepress/config.js

@@ -0,0 +1,101 @@
+export default {
+	lang: "fr",
+	title: "3W",
+	titleTemplate: "Support de cours",
+	description: "C’est cool je crois.",
+	lastUpdated: true,
+
+	themeConfig: {
+		nav: [
+			{
+				text: "Dev",
+				items: [
+					{ text: "Sommaire", link: "/dev/" },
+					{ text: "B1", link: "/dev/B1/" },
+					{ text: "B2", link: "/dev/B2/" },
+					{ text: "B3", link: "/dev/B3/" }
+				]
+			},
+			{ text: "Design", link: "/design/", activeMatch: "/design/" }
+		],
+		sidebar: {
+			// This sidebar gets displayed when user is
+			// under `dev` directory.
+			"/dev/": [
+				{
+					text: "Général",
+					items: [
+						{ text: "Sommaire", link: "/dev/" }, // /dev/index.md
+						{ text: "Documentations", link: "/dev/docs" },
+						{ text: "Outils", link: "/dev/outils" }
+					]
+				},
+				{
+					text: "B1",
+					collapsible: true,
+					collapsed: true,
+					items: [
+						{ text: "Sommaire", link: "/dev/B1/" },
+						{ text: "Introduction", link: "/dev/B1/introduction" },
+						{ text: "HTML", link: "/dev/B1/html" }
+					]
+				},
+				{
+					text: "B2",
+					collapsible: true,
+					collapsed: true,
+					items: [
+						{ text: "Sommaire", link: "/dev/B2/" },
+						{ text: "Introduction", link: "/dev/B2/introduction" },
+						{ text: "HTML", link: "/dev/B2/html" }
+					]
+				},
+				{
+					text: "B3",
+					collapsible: true,
+					collapsed: true,
+					items: [
+						{ text: "Sommaire", link: "/dev/B3/" },
+						{ text: "Introduction", link: "/dev/B3/introduction" },
+						{ text: "HTML", link: "/dev/B3/html" }
+					]
+				},
+				{
+					text: "Code Camp",
+					collapsible: true,
+					collapsed: true,
+					items: [{ text: "Théorie", link: "/dev/code-camp/" }]
+				}
+			],
+			"/design/": [
+				{
+					text: "Design",
+					items: [
+						{ text: "Index", link: "/design/" },
+						{ text: "Introduction", link: "/design/introduction" }
+					]
+				}
+			]
+		},
+
+		outlineTitle: "Sur cette page",
+		lastUpdatedText: "Mis à jour le",
+
+		footer: {
+			message: "Ces contenus sont publiés sous licence Creative Commons",
+			copyright: "CC BY 4.0"
+		},
+
+		docFooter: {
+			prev: "Précédent",
+			next: "Suivant"
+		}
+	},
+
+	markdown: {
+		theme: "one-dark-pro",
+		externalLinks: {
+			target: "_self"
+		}
+	}
+};

docs/.vitepress/theme/custom.css

@@ -0,0 +1,3 @@
+:root {
+	--vp-code-font-size: 0.9375rem;
+}

docs/.vitepress/theme/index.js

@@ -0,0 +1,4 @@
+import DefaultTheme from "vitepress/theme";
+import "./custom.css";
+
+export default DefaultTheme;

docs/design/index.md

@@ -0,0 +1,13 @@
+# Design
+
+cool
+
+::: info
+This is an info box.
+:::
+
+## Introduction
+
+### definition
+
+## Getting started

docs/dev/B2/html.md

@@ -0,0 +1 @@
+# HTML B2

docs/dev/B2/index.md

@@ -0,0 +1 @@
+# Frontend B2

docs/dev/B2/introduction.md

@@ -0,0 +1 @@
+# Intro B2

docs/dev/B3/html.md

@@ -0,0 +1 @@
+# HTML B2

docs/dev/B3/index.md

@@ -0,0 +1 @@
+# Frontend B3

docs/dev/B3/introduction.md

@@ -0,0 +1 @@
+# Intro B3

docs/dev/code-camp/index.md

@@ -0,0 +1,183 @@
+# Code camp
+
+Vous êtes sur le point de commencer une semaine intensive de développement web. Soufflez un coup, tout va bien se passer :relaxed:
+
+[[toc]]
+
+## Concepts et architecture
+
+- **Internet** = réseau de réseaux, infrastructure globale (TPC/IP)
+- **Web** = application basée sur le réseau d’internet (HTTP/HTTPS)
+- **DNS** = annuaire adresse IP/nom de domaine
+- **FTP**/SFTP = transfert de fichiers
+- **HTML** = contenus
+- **CSS** = styles
+- **Javascript** = éléments dynamiques
+- **Fonts** = polices de caractères
+
+## Configuration et préparation
+
+- Paramétrons votre environnement de développement.
+- Préparons votre dossier de travail local.
+- Jetons un œil à la maquette.
+
+::: details Afficher la structure
+
+```
+code-camp/
+├── 00_sources/
+│   ├── fonts/
+│   │   └── arial.ttf
+│   └── images/
+│       └── unsplash-concert_crowd.png
+├── 01_templates/
+│   ├── index.fig
+│   ├── index.sketch
+│   └── index.xd
+├── 02_export/
+│   ├── images/
+│   │   └── hero.jpg
+│   └── icons/
+│       └── icon-guitar.svg
+└── 03_web/
+    ├── assets/
+    │   ├── css/
+    │   │   └── style.css
+    │   ├── fonts/
+    │   │   └── arial.woff2
+    │   ├── images/
+    │   │   └── hero.jpg
+    │   ├── js/
+    │   │   └── main.js
+    │   └── svg/
+    │       └── icon-guitar.svg
+    ├── favicon.ico
+    └── index.html
+```
+
+:::
+
+## HTML
+
+Le HTML est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe :  
+`<` `nom de la balise` `attributs` `>`  
+`contenu de la balise`  
+`<` `nom de la balise` `/>`
+
+La structure d'un document HTML est donc une suite de balises que l'on organise afin de donner du sens à notre contenu. Il nous revient de construire notre document HTML afin qu'il soit le plus explicite et sémantiquement correcte.
+
+### Les balises indispensables
+
+- `<!DOCTYPE>` = déclaration du type de document
+- `<html>` = racine du document, contient tous les autres éléments
+- `<head>` = fournit des informations générales (métadonnées) sur le document
+- `<body>` = contenu principal du document
+
+### Les balises et attributs recommandés
+
+- `lang` = déclaration du langage utilisé pour le contenu
+- `dir` = Sens de lecture du contenu
+- `charset` = définit l'encodage des caractères utilisés
+- `title` = définit le titre du document (fenêtre/onglet/référencement)
+
+::: details Afficher le code
+<<< @/snippets/html/base.html#base
+:::
+
+### Les balises structurantes
+
+- `<header>` = en-tête
+- `<nav>` = élément contenant des liens, destiné à la navigation
+- `<main>` = contenu principal du document
+- `<article>` = une composition autonome pouvant être utilisée seule
+- `<section>` = zone générique du document, plus utile au développeur qu’à l’utilisateur
+- `<aside>` = contenu secondaire ou indirect à l’inverse de `<main>`
+- `<h1>` - `<h6>` = niveaux des titres du document
+- `<footer>` = pied de page
+
+::: details Afficher le code
+<<< @/snippets/html/base.html#structure
+:::
+
+### Les balises de contenus
+
+On distingue deux catégories de balises: bloc (<span lang="en">block</span>) et en ligne (<span lang="en">inline</span>). Les balises en ligne ne peuvent pas contenir de balises bloc.
+
+Ci-dessous, quelques exemples de balises (listes non exhaustives).
+
+#### Balises bloc
+
+- `<blockquote>` = une citation
+- `<p>` = un paragraphe
+- `<ol>` = liste ordonnée
+- `<ul>` = liste désordonnée (liste à puce)
+- `<li>` = élément d’une liste
+- `<div>` = conteneur générique
+
+#### Balises en ligne
+
+- `<img>` = insertion d’une image
+- `<a>` = un lien
+- `<span>` = conteneur générique en ligne
+- `<strong>` = contenu important (en gras)
+- `<br>` = saut de ligne
+
+::: details Afficher le code
+<<< @/snippets/html/base.html#full
+:::
+
+## Sélecteurs CSS
+
+### Sélecteurs de balise
+
+Ils sont identiques aux balises HTML (sauf head).
+
+::: details Afficher le code
+<<< @/snippets/css/base.css#tag
+:::
+
+### Sélecteurs de classe
+
+Cible une classe définie dans le HTML avec un point.
+
+::: details Afficher le code
+<<< @/snippets/css/base.css#class
+:::
+
+### Sélecteurs d’attribut
+
+Cible un attribut spécifique avec ou sans valeur entre crochets.
+
+::: details Afficher le code
+<<< @/snippets/css/base.css#attr
+:::
+
+### Sélecteurs multiples et chaînés
+
+Il est possible de cibler plusieurs éléments ou d’enchaîner les sélecteurs.
+
+::: details Afficher le code
+<<< @/snippets/css/base.css#chain
+:::
+
+## Propriétés CSS
+
+::: info
+Il en existe beaucoup trop pour essayer de les résumer ici.
+Se référer à [la documentation.](https://developer.mozilla.org/fr/docs/Web/CSS/Reference)
+:::
+
+## La cascade du style
+
+Le CSS est régit par un concept appelé la cascade. La cascade est un ensemble de règles de priorité et d'importance. Elles servent à déterminer la règle CSS qui sera appliquée en cas de « conflit » entre plusieurs règles.
+
+Les deux éléments de la cascade que nous utiliseront le plus ici sont **la spécificité et l'ordre.**
+
+- [Cette présentation](https://slidr.io/bramus/the-css-cascade-a-deep-dive-2022-06-09-css-day#1) en anglais explique en détails le fonctionnement de la cascade.
+- [Cette page](https://wattenberger.com/blog/css-cascade) (en anglais également) permet de visualiser graphiquement la cascade.
+
+## Accessibilité
+
+## Mise en ligne
+
+## Bonus

docs/dev/docs.md

@@ -0,0 +1,19 @@
+# Liens et documentation
+
+Tous les liens sont externes.
+
+## HTML
+
+- [Commencer avec HTML](https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started)
+- [Liste de toutes les balises HTML](https://developer.mozilla.org/fr/docs/Web/HTML/Element)
+- [L'élément `button`](https://www.buttoncheatsheet.com/)
+- [Mauvais exemples (et corrections) HTML](https://www.htmhell.dev/)
+
+## CSS
+
+- [Commencer avec CSS](https://developer.mozilla.org/fr/docs/Learn/Getting_started_with_the_web/CSS_basics)
+- [Liste et documentation de toutes les propriétés CSS](https://tympanus.net/codrops/css_reference/)
+- [La cascade CSS et les spécificités de styles](https://wattenberger.com/blog/css-cascade)
+- [La spécificité expliquée visuellement](https://www.matuzo.at/blog/2022/specificity/)
+- [Cours de google sur le CSS](https://web.dev/learn/css/)
+- [Exercice intéractif sur les sélecteurs](https://flukeout.github.io/)

docs/dev/front/html.md

@@ -0,0 +1 @@
+# HTML B1

docs/dev/front/index.md

@@ -0,0 +1 @@
+# Frontend B1

docs/dev/front/introduction.md

@@ -0,0 +1 @@
+# Intro B1

docs/dev/index.md

@@ -0,0 +1,18 @@
+# Dev
+
+Bienvenue dans le monde merveilleux du développement web.
+
+En commençant par les bases HTML/CSS, nous approfondirons nos connaissances de ces deux langages avant de poursuivre vers le JavaScript.
+
+Nous aborderons l'apprentissage du développement web par le prisme de [l’accessibilité numérique](https://access42.net/decouvrir-accessibilite?lang=fr) et de « [l’amélioration progressive](https://briefs.video/videos/is-progressive-enhancement-dead-yet/) »
+
+## Ressources
+
+- [Documentations](./docs)
+- [Outils](./outils)
+
+## Niveaux
+
+- [B1 — première année](./B1/)
+- [B2 — deuxième année](./B2/)
+- [B3 — troisième année](./B3/)

docs/dev/outils.md

@@ -0,0 +1,33 @@
+# Liste d'outils utiles
+
+## Générique
+
+- [Tableaux de support des navigateurs pour les technologies web](https://caniuse.com/)
+
+## Typo
+
+### Bibliothèques
+
+- [Font squirrel](https://www.fontsquirrel.com/)
+- [Coollabs (remplacement google fonts)](https://fonts.coollabs.io/)
+
+### Outils webfont
+
+- [Générateur de fichier webfont](https://transfonter.org/)
+- [Analyse de fichier font](https://wakamaifondue.com/)
+
+## Image
+
+- [Outil d’optimisation d’image](https://squoosh.app/)
+
+## Couleurs
+
+- [Génération de palette](https://coolors.co/generate)
+- [Génération avancée de palette](http://khroma.co/train/)
+- [Générateur de dégradé](https://www.joshwcomeau.com/gradient-generator/)
+- [Générateur d’ombre portée](https://www.joshwcomeau.com/shadow-palette/)
+
+## Illustrations
+
+- [Undraw](https://undraw.co/illustrations)
+- [Blush](https://blush.design/)

docs/index.md

@@ -0,0 +1,30 @@
+---
+layout: home
+
+hero:
+	name: 3W
+	text: Ressources et supports de cours.
+	tagline: Lezgongue
+	actions:
+		- theme: brand
+			text: Développement
+			link: /dev/
+		- theme: alt
+			text: Design
+			link: /design/
+# features:
+# - icon: ⚡️
+#   title: Vite, The DX that can't be beat
+#   details: Lorem ipsum...
+# - icon: 🖖
+#   title: Power of Vue meets Markdown
+#   details: Lorem ipsum...
+# - icon: 🛠️
+#   title: Simple and minimal, always
+#   details: Lorem ipsum...
+---
+
+# Hello VitePress
+
+- [le dev](./dev/)
+- [et ici le design](./design/)

docs/snippets/css/base.css

@@ -0,0 +1,51 @@
+// #region tag
+body {}
+main {}
+ul {}
+p {}
+span {}
+// #endregion tag
+
+// #region class
+.class-personnelle {}
+.container {}
+// #endregion class
+
+// #region attr
+a[href] {}
+a[href="/"] {}
+// #endregion attr
+
+// #region chain
+ul, ol {}
+ul.class-personnelle {}
+ul > li {}
+.class-personnelle img {}
+* + * {}
+// #endregion chain
+
+// #region property
+body {
+  margin-top: -40px;
+  padding: 0 20px;
+  overflow-x: hidden;
+  font-family: Arial, sans-serif;
+  font-weight: 400;
+  font-size: 2rem;
+  line-height: 1.4;
+  color: var(--dark);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--blue);
+  font-weight: 500;
+  margin: 0;
+  padding: 0;
+  line-height: 1.2;
+}
+// #endregion property

docs/snippets/html/base.html

@@ -0,0 +1,88 @@
+// #region base
+<!DOCTYPE html>
+<html lang="fr" dir="ltr">
+
+<head>
+	<meta charset="UTF-8" />
+	<title>Document</title>
+</head>
+
+<body>
+	[Contenu du site]
+</body>
+
+</html>
+// #endregion base
+
+// #region structure
+<!DOCTYPE html>
+<html lang="fr" dir="ltr">
+
+<head>
+	<meta charset="UTF-8" />
+	<title>Document</title>
+</head>
+
+<body>
+	<header>
+		<nav></nav>
+	</header>
+
+	<main>
+		<section>
+			<h1>Titre principal</h1>
+			<article>
+				<header>
+					<h2>Titre secondaire</h2>
+				</header>
+			</article>
+		</section>
+	</main>
+
+	<aside>
+		<h2></h2>
+	</aside>
+
+	<footer></footer>
+</body>
+
+</html>
+// #endregion structure
+
+// #region full
+<!DOCTYPE html>
+<html lang="fr" dir="ltr">
+
+<body>
+	<header>
+		<nav>
+			<a href="/">accueil</a>
+		</nav>
+	</header>
+
+	<main>
+		<section>
+			<h1>Titre principal</h1>
+			<article>
+				<header>
+					<h2>Titre secondaire</h2>
+				</header>
+				<p>Lorem <strong>ipsum</strong> dolor sit amet.</p>
+			</article>
+		</section>
+	</main>
+
+	<aside>
+		<h2></h2>
+		<ul>
+			<li>item 1</li>
+			<li>item 2</li>
+		</ul>
+	</aside>
+
+	<footer></footer>
+
+</body>
+
+</html>
+// #endregion full

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "vitepress-starter",
+  "packageManager": "yarn@3.2.1",
+  "scripts": {
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs"
+  },
+  "devDependencies": {
+    "vitepress": "^1.0.0-alpha.4",
+    "vue": "^3.2.37"
+  }
+}