From 0fd490fac0ce50f08d82de00332aa2cdd7a8b60f Mon Sep 17 00:00:00 2001
From: oabdelnour <oabdelnour@takima.fr>
Date: Mon, 26 Feb 2024 22:30:31 +0100
Subject: [PATCH] wip
---
resources/docs/docs/chapters/tp/npm.md | 19 +++++-----
resources/docs/docs/chapters/tp/setup.md | 44 ++++++----------------
resources/docs/docs/stylesheets/global.css | 25 ++++++++++--
3 files changed, 42 insertions(+), 46 deletions(-)
diff --git a/resources/docs/docs/chapters/tp/npm.md b/resources/docs/docs/chapters/tp/npm.md
index d87a4da..96bfcf5 100644
--- a/resources/docs/docs/chapters/tp/npm.md
+++ b/resources/docs/docs/chapters/tp/npm.md
@@ -11,13 +11,12 @@ We used to use a **CDN** to import librairies to our project.
Fortunately, we now have the [**NPM**](https://docs.npmjs.com/about-npm) (Node Package Manager) to install libraries in a proper way.
-> **info** A **package manager** makes it easier to add new libraries, update them, manage the project release and much more...
->
-> _NPM_ is the standard package manager for JS and [NodeJS](https://nodejs.org/en/), but there are other alternatives like [yarn](https://yarnpkg.com/en) or [pnpm](https://pnpm.io/).
+!!! info "Infos"
+ A **package manager** makes it easier to add new libraries, update them, manage the project release and much more... _NPM_ is the standard package manager for JS and [NodeJS](https://nodejs.org/en/), but there are other alternatives like [yarn](https://yarnpkg.com/en) or [pnpm](https://pnpm.io/).
_NPM_ comes with a [_CLI_](https://docs.npmjs.com/cli/v9/commands) to easily create a project, install some dependencies and so on.
-## <i class="fa fa-gear"></i> The _NPM_ configuration file
+## :fontawesome-solid-gear: The _NPM_ configuration file
A project that uses _NPM_ comes with a configuration file at the root directory called [`package.json`](https://docs.npmjs.com/files/package.json). It contains some project metadata like:
- the package name
@@ -26,24 +25,26 @@ A project that uses _NPM_ comes with a configuration file at the root directory
- an entry point (ie: the file to be executed first)
- ...
-> **info** NPM was initially made for [NodeJS](https://nodejs.org/en/) projects. A NodeJS project should have an entrypoint (ie: the file to be executed first). As a web application, you do not need an `entrypoint`, so you can leave it blank.
+!!! info "Infos"
+ NPM was initially made for [NodeJS](https://nodejs.org/en/) projects. A NodeJS project should have an entrypoint (ie: the file to be executed first). As a web application, you do not need an `entrypoint`, so you can leave it blank.
These informations will be set in the `package.json` file by the `npm init` command.
-### <i class="fa fa-terminal"></i> `npm init` <Diy/> <BadgeEasy />
+### :fontawesome-solid-terminal: `npm init` <Diy/> <BadgeEasy />
At the root of the `front-end/` directory, initialize a new NPM package with the [`npm init` command](https://docs.npmjs.com/creating-a-package-json-file#running-a-cli-questionnaire).
??? tip "Show the commands"
- ```bash
+ ```bash linenums="1"
cd front-end/
npm init
```
-This command will ask you to fill in some informations. Set your own values here:
-- **package name**: `@<username>-meme-ory` (replace `<username>` with your name).
+This command will ask you to fill in some informations. Set your own values here:<br>
+
+- **package name**: `@<username>-meme-ory` (replace `<username>` with your name).
- **version**: 1.0.0 (default)
- **description**: _A memory game based on memes ¯\\_(ツ)\\_/¯_.
- **entrypoint**: \<leave blank>
diff --git a/resources/docs/docs/chapters/tp/setup.md b/resources/docs/docs/chapters/tp/setup.md
index 2b311bd..a45acb5 100644
--- a/resources/docs/docs/chapters/tp/setup.md
+++ b/resources/docs/docs/chapters/tp/setup.md
@@ -3,30 +3,6 @@ tag:
- console
---
-<style>
-h2, h3 {
- color: #cb2468;
-font-weight: 500 !important; ;
-}
-#getting-started {
-color: #cb2468;
-font-weight: 700;
-}
-#optional {
-background-color: #9aa9b2;
-border-radius: 2px;
-width: fit-content;
-padding: 0 5px;
-color: white;
-}
-#diy {
-background-color: rgb(67, 197, 158);
-color: white;
-padding: 5px;
-border-radius: 10px;
-}
-</style>
-
# Getting started
> - This tutorial assumes that you are already familiar with <i class="fab fa-git-alt"></i> GIT.
@@ -42,15 +18,17 @@ border-radius: 10px;
v16.13.0 ### at least
```
- > **tip** **Pro tip**: Linux users can install and use [NVM](https://github.com/creationix/nvm). With this tool, it is easy to install
- > multiple node versions and switch between all of them.
- > ??? note "Show the installation commands"
- >
- > ```bash
- > curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
- > nvm install 16
- > nvm default 16
- > ```
+!!! tips "**Pro tip**:"
+ Linux users can install and use [NVM](https://github.com/creationix/nvm). With this tool, it is easy to install
+ multiple node versions and switch between all of them.
+
+??? note "Show the installation commands"
+
+ ```bash linenums="1"
+ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
+ nvm install 16
+ nvm default 16
+ ```
- Have a web browser with good capabilities for debugging JavaScript (Eg: Google Chrome, Chromium, or Firefox).
diff --git a/resources/docs/docs/stylesheets/global.css b/resources/docs/docs/stylesheets/global.css
index e75f1b8..860c05e 100644
--- a/resources/docs/docs/stylesheets/global.css
+++ b/resources/docs/docs/stylesheets/global.css
@@ -1,4 +1,21 @@
-/*:root > * {*/
-/* --md-code-bg-color: #000000;*/
-/* --md-code-fg-color: #afadad;*/
-/*}*/
\ No newline at end of file
+h2, h3 {
+ color: #cb2468;
+ font-weight: 500 !important; ;
+}
+#getting-started, #the-package-manager {
+ color: #cb2468;
+ font-weight: 700;
+}
+#optional {
+ background-color: #9aa9b2;
+ border-radius: 2px;
+ width: fit-content;
+ padding: 0 5px;
+ color: white;
+}
+#diy {
+ background-color: rgb(67, 197, 158);
+ color: white;
+ padding: 5px;
+ border-radius: 10px;
+}
--
GitLab