Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit e1ff1c67 authored by Christophe Chaudier's avatar Christophe Chaudier :rocket:
Browse files

Merge branch '3-feat-add-menu' into 'main'

Resolve "feat: add menu"

Closes #3

See merge request !3
parents 884c2ca0 88355494
No related branches found
No related tags found
1 merge request!3Resolve "feat: add menu"
Pipeline #11672 passed
Showing
with 163 additions and 623 deletions
image: node:16.14.2-slim
include:
- template: 'Workflows/MergeRequest-Pipelines.gitlab-ci.yml'
stages:
- build
- 🧪 test
......@@ -13,14 +16,8 @@ variables:
tags:
- cache
cache:
key:
files:
- package-lock.json
paths:
- node_modules/
rules:
- if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
- if: $CI_MERGE_REQUEST_IID
.cache-push:
extends: .cache
......@@ -37,9 +34,6 @@ install_dependencies:
stage: build
script:
- npm ci
rules:
- changes:
- package-lock.json
lint:
extends: .cache-pull
......
---
sidebar_position: 1
---
# Tutorial Intro
Let's discover **Docusaurus in less than 5 minutes**.
## Getting Started
Get started by **creating a new site**.
Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
### What you'll need
- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.
## Generate a new site
Generate a new Docusaurus site using the **classic template**.
The classic template will automatically be added to your project after you run the command:
```bash
npm init docusaurus@latest my-website classic
```
You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
The command also installs all necessary dependencies you need to run Docusaurus.
## Start your site
Run the development server:
```bash
cd my-website
npm run start
```
The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
{
"label": "Tutorial - Basics",
"position": 2,
"link": {
"type": "generated-index",
"description": "5 minutes to learn the most important Docusaurus concepts."
}
}
---
sidebar_position: 6
---
# Congratulations!
You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
Docusaurus has **much more to offer**!
Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
## What's next?
- Read the [official documentation](https://docusaurus.io/)
- Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config)
- Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration)
- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
- Add a [search bar](https://docusaurus.io/docs/search)
- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)
---
sidebar_position: 3
---
# Create a Blog Post
Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
## Create your first Post
Create a file at `blog/2021-02-28-greetings.md`:
```md title="blog/2021-02-28-greetings.md"
---
slug: greetings
title: Greetings!
authors:
- name: Joel Marcey
title: Co-creator of Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
- name: Sébastien Lorber
title: Docusaurus maintainer
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
tags: [greetings]
---
Congratulations, you have made your first post!
Feel free to play around and edit this post as much you like.
```
A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).
---
sidebar_position: 2
---
# Create a Document
Documents are **groups of pages** connected through:
- a **sidebar**
- **previous/next navigation**
- **versioning**
## Create your first Doc
Create a Markdown file at `docs/hello.md`:
```md title="docs/hello.md"
# Hello
This is my **first Docusaurus document**!
```
A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
## Configure the Sidebar
Docusaurus automatically **creates a sidebar** from the `docs` folder.
Add metadata to customize the sidebar label and position:
```md title="docs/hello.md" {1-4}
---
sidebar_label: 'Hi!'
sidebar_position: 3
---
# Hello
This is my **first Docusaurus document**!
```
It is also possible to create your sidebar explicitly in `sidebars.js`:
```js title="sidebars.js"
module.exports = {
tutorialSidebar: [
'intro',
// highlight-next-line
'hello',
{
type: 'category',
label: 'Tutorial',
items: ['tutorial-basics/create-a-document'],
},
],
};
```
---
sidebar_position: 1
---
# Create a Page
Add **Markdown or React** files to `src/pages` to create a **standalone page**:
- `src/pages/index.js``localhost:3000/`
- `src/pages/foo.md``localhost:3000/foo`
- `src/pages/foo/bar.js``localhost:3000/foo/bar`
## Create your first React Page
Create a file at `src/pages/my-react-page.js`:
```jsx title="src/pages/my-react-page.js"
import React from 'react';
import Layout from '@theme/Layout';
export default function MyReactPage() {
return (
<Layout>
<h1>My React page</h1>
<p>This is a React page</p>
</Layout>
);
}
```
A new page is now available at [http://localhost:3000/my-react-page](http://localhost:3000/my-react-page).
## Create your first Markdown Page
Create a file at `src/pages/my-markdown-page.md`:
```mdx title="src/pages/my-markdown-page.md"
# My Markdown page
This is a Markdown page
```
A new page is now available at [http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page).
---
sidebar_position: 5
---
# Deploy your site
Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**).
It builds your site as simple **static HTML, JavaScript and CSS files**.
## Build your site
Build your site **for production**:
```bash
npm run build
```
The static files are generated in the `build` folder.
## Deploy your site
Test your production build locally:
```bash
npm run serve
```
The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/).
You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).
---
sidebar_position: 4
---
# Markdown Features
Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
## Front Matter
Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
```text title="my-doc.md"
// highlight-start
---
id: my-doc-id
title: My document title
description: My document description
slug: /my-custom-url
---
// highlight-end
## Markdown heading
Markdown text with [links](./hello.md)
```
## Links
Regular Markdown links are supported, using url paths or relative file paths.
```md
Let's see how to [Create a page](/create-a-page).
```
```md
Let's see how to [Create a page](./create-a-page.md).
```
**Result:** Let's see how to [Create a page](./create-a-page.md).
## Images
Regular Markdown images are supported.
You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
```md
![Docusaurus logo](/img/docusaurus.png)
```
![Docusaurus logo](/img/docusaurus.png)
You can reference images relative to the current file as well, as shown in [the extra guides](../tutorial-extras/manage-docs-versions.md).
## Code Blocks
Markdown code blocks are supported with Syntax highlighting.
```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
return (
<h1>Hello, Docusaurus!</h1>
)
}
```
```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
return <h1>Hello, Docusaurus!</h1>;
}
```
## Admonitions
Docusaurus has a special syntax to create admonitions and callouts:
:::tip My tip
Use this awesome feature option
:::
:::danger Take care
This action is dangerous
:::
:::tip My tip
Use this awesome feature option
:::
:::danger Take care
This action is dangerous
:::
## MDX and React Components
[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**:
```jsx
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '20px',
color: '#fff',
padding: '10px',
cursor: 'pointer',
}}
onClick={() => {
alert(`You clicked the color ${color} with label ${children}`)
}}>
{children}
</span>
);
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
```
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '20px',
color: '#fff',
padding: '10px',
cursor: 'pointer',
}}
onClick={() => {
alert(`You clicked the color ${color} with label ${children}`);
}}>
{children}
</span>
);
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
{
"label": "Tutorial - Extras",
"position": 3,
"link": {
"type": "generated-index"
}
}
docs/tutorial-extras/img/docsVersionDropdown.png

24.8 KiB

docs/tutorial-extras/img/localeDropdown.png

27.2 KiB

---
sidebar_position: 1
---
# Manage Docs Versions
Docusaurus can manage multiple versions of your docs.
## Create a docs version
Release a version 1.0 of your project:
```bash
npm run docusaurus docs:version 1.0
```
The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created.
Your docs now have 2 versions:
- `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs
- `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs**
## Add a Version Dropdown
To navigate seamlessly across versions, add a version dropdown.
Modify the `docusaurus.config.js` file:
```js title="docusaurus.config.js"
module.exports = {
themeConfig: {
navbar: {
items: [
// highlight-start
{
type: 'docsVersionDropdown',
},
// highlight-end
],
},
},
};
```
The docs version dropdown appears in your navbar:
![Docs Version Dropdown](./img/docsVersionDropdown.png)
## Update an existing version
It is possible to edit versioned docs in their respective folder:
- `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello`
- `docs/hello.md` updates `http://localhost:3000/docs/next/hello`
---
sidebar_position: 2
---
# Translate your site
Let's translate `docs/intro.md` to French.
## Configure i18n
Modify `docusaurus.config.js` to add support for the `fr` locale:
```js title="docusaurus.config.js"
module.exports = {
i18n: {
defaultLocale: 'en',
locales: ['en', 'fr'],
},
};
```
## Translate a doc
Copy the `docs/intro.md` file to the `i18n/fr` folder:
```bash
mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md
```
Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French.
## Start your localized site
Start your site on the French locale:
```bash
npm run start -- --locale fr
```
Your localized site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/) and the `Getting Started` page is translated.
:::caution
In development, you can only use one locale at a same time.
:::
## Add a Locale Dropdown
To navigate seamlessly across languages, add a locale dropdown.
Modify the `docusaurus.config.js` file:
```js title="docusaurus.config.js"
module.exports = {
themeConfig: {
navbar: {
items: [
// highlight-start
{
type: 'localeDropdown',
},
// highlight-end
],
},
},
};
```
The locale dropdown now appears in your navbar:
![Locale Dropdown](./img/localeDropdown.png)
## Build your localized site
Build your site for a specific locale:
```bash
npm run build -- --locale fr
```
Or build your site to include all the locales at once:
```bash
npm run build
```
......@@ -7,7 +7,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** @type {import('@docusaurus/types').Config} */
const config = {
title: 'Lydra | Artisans DevOps',
tagline: 'Dinosaurs are cool',
tagline: 'Nous aidons les entreprises du numérique à déployer leurs applications web rapidement et sans coupure de service.',
url: process.env.DOCUSAURUS_URL || 'https://new.lydra.fr"',
baseUrl: process.env.DOCUSAURUS_BASEURL || '/',
onBrokenLinks: 'throw',
......@@ -26,13 +26,7 @@ const config = {
'classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
docs: false,
blog: {
showReadingTime: true,
// Please change this to your repo.
......@@ -55,37 +49,70 @@ const config = {
respectPrefersColorScheme: false,
},
navbar: {
hideOnScroll: true,
logo: {
alt: 'Lydra Logo',
src: 'img/logo_lydra.svg',
},
items: [
{
type: 'doc',
docId: 'intro',
position: 'left',
label: 'Tutorial',
to: '/',
label: 'Home',
position: 'right'
},
{to: '/blog', label: 'Blog', position: 'left'},
{
href: 'https://github.com/facebook/docusaurus',
label: 'GitHub',
type: 'dropdown',
label: 'DevOps',
position: 'right',
items: [
{
label: '📻 Le Podcast',
href: 'https://lydra.fr/radio-devops/',
},
{
label: 'Les Compagnons',
href: 'https://www.compagnons-devops.fr/',
},
],
},
],
},
footer: {
style: 'dark',
links: [
{
title: 'Docs',
to: 'https://www.compagnons-devops.fr/mentor',
label: '🎓 Mentorat',
position: 'right'
},
{
type: 'dropdown',
label: 'Qui sommes nous ?',
position: 'right',
items: [
{
label: 'Tutorial',
to: '/docs/intro',
label: 'L\'équipe',
href: '#',
},
{
label: 'Nos inspirations',
href: 'https://lydra.fr/nos-inspirations/',
},
{
label: 'Nos Services',
href: 'https://lydra.fr/nos-services/',
},
{
label: 'Contact',
href: '#',
},
],
},
{
to: '/blog',
label: '📰 Blog',
position: 'right'
},
],
},
footer: {
style: 'dark',
links: [
{
title: 'Community',
items: [
......
......@@ -4,32 +4,29 @@ import styles from './styles.module.css';
const FeatureList = [
{
title: 'Easy to Use',
title: 'Notre philosophie',
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
description: (
<>
Docusaurus was designed from the ground up to be easily installed and
used to get your website up and running quickly.
Nous pensons que lamélioration continue et la collaboration entre les équipes dune même entreprise sont essentielles pour atteindre facilement les objectifs mais surtout en les atteignant sereinement.
</>
),
},
{
title: 'Focus on What Matters',
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
title: 'Notre philosophie',
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
description: (
<>
Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
ahead and move your docs into the <code>docs</code> directory.
Nous pensons que lamélioration continue et la collaboration entre les équipes dune même entreprise sont essentielles pour atteindre facilement les objectifs mais surtout en les atteignant sereinement.
</>
),
},
{
title: 'Powered by React',
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
title: 'Notre philosophie',
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
description: (
<>
Extend or customize your website layout by reusing React. Docusaurus can
be extended while reusing the same header and footer.
Nous pensons que lamélioration continue et la collaboration entre les équipes dune même entreprise sont essentielles pour atteindre facilement les objectifs mais surtout en les atteignant sereinement.
</>
),
},
......@@ -37,7 +34,7 @@ const FeatureList = [
function Feature({Svg, title, description}) {
return (
<div className={clsx('col col--4')}>
<div className={clsx('col col--4', styles.featureElement)}>
<div className="text--center">
<Svg className={styles.featureSvg} role="img" />
</div>
......
......@@ -8,4 +8,18 @@
.featureSvg {
height: 200px;
width: 200px;
border-radius: 50%;
}
.featureElement:nth-child(3n+1) .featureSvg {
background-color: var(--ifm-color-success);
}
.featureElement:nth-child(3n+2) .featureSvg {
background-color: var(--ifm-color-info);
}
.featureElement:nth-child(3n+3) .featureSvg {
background-color: var(--ifm-color-highlight);
}
......@@ -33,6 +33,8 @@
/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-navbar-background-color: transparent;
--ifm-color-primary: #f15a22;
--ifm-color-primary-dark: #e94a0f;
--ifm-color-primary-darker: #dc460e;
......@@ -43,6 +45,10 @@
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
h1, h2, h3 {
letter-spacing: .1rem;
}
.navbar__logo img {
height: 290%;
margin-top: -30px;
......@@ -63,3 +69,18 @@ b, strong {
i, em {
font-family: var(--ifm-font-family-italic) ;
}
.navbar__item {
text-transform: uppercase;
font-size: 1.2rem;
}
.main-wrapper {
margin-top: 90px;
}
.navbar {
position: fixed;
width: 100%;
box-shadow: none;
}
import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import HomepageFeatures from '@site/src/components/HomepageFeatures';
import styles from './index.module.css';
import useBaseUrl from "@docusaurus/useBaseUrl";
const pageTitle = "Home"
function HomepageHeader() {
const {siteConfig} = useDocusaurusContext();
return (
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className="container">
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg"
to="/docs/intro">
Docusaurus Tutorial - 5min ⏱️
</Link>
<Link
className="button button--info button--lg"
to="/docs/intro">
Docusaurus Tutorial - 5min ⏱️
</Link>
<Link
className="button button--success button--lg"
to="/docs/intro">
Docusaurus Tutorial - 5min ⏱️
</Link>
<Link
className="button button--highlight button--lg"
to="/docs/intro">
Docusaurus Tutorial - 5min ⏱️
</Link>
<div className={'container '+ styles.containerIndex}>
<h1 className={styles.hero__title}> Artisans DevOps </h1>
<p className={styles.hero__subtitle}>{siteConfig.tagline}</p>
<div className={styles.introCard}>
<div className={clsx("text--center", styles.headerIcon)}>
<img src={useBaseUrl("img/collaborate.png")} />
</div>
<div className="text--center padding-horiz--md">
<h2> Notre philosophie </h2>
<p> Nous pensons que lamélioration continue et la collaboration entre les équipes dune même entreprise sont essentielles pour atteindre facilement les objectifs mais surtout en les atteignant sereinement. </p>
</div>
</div>
<p className='margin-top--lg'>
<em>Docusaurus</em> was designed <i>from the ground up</i> to be <strong>easily installed</strong> and used to get your website <b>up and running quickly.</b>
</p>
</div>
</header>
);
}
......@@ -48,12 +36,11 @@ export default function Home() {
const {siteConfig} = useDocusaurusContext();
return (
<Layout
title={`Home - ${siteConfig.title}`}
title={`${pageTitle} - ${siteConfig.title}`}
description="Description will go into a meta tag in <head />">
<HomepageHeader />
<main>
<HomepageFeatures />
<HomepageFeatures />
</main>
</Layout>
);
......
......@@ -4,20 +4,59 @@
*/
.heroBanner {
color: white;
padding: 4rem 0;
text-align: center;
position: relative;
overflow: hidden;
margin-top: -90px;
padding-top: 120px !important;
background-image: url(../../static/img/artisanBackground.jpg);
background-position: center;
background-size: cover;
background-color: black;
-webkit-clip-path: ellipse(100% 100% at 30% 0);
clip-path: ellipse(100% 100% at 30% 0);
}
@media screen and (max-width: 996px) {
.heroBanner {
padding: 2rem;
}
.hero__subtitle {
font-size: 1.2rem;
}
.containerIndex {
z-index: 1;
}
.heroBanner::before {
background: linear-gradient(rgba(20, 20, 20, 0.70), rgba(10, 10, 10, 0.52));
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
content: "";
}
.introCard {
max-width: 460px;
margin: 2rem auto;
}
.headerIcon img{
max-width: 200px;
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
.headerIcon {
background-color: var(--ifm-color-primary);
border-radius: 50%;
height: 200px;
aspect-ratio: 1;
margin: 1rem auto;
}
@media (max-width: 996px) {
.heroBanner {
-webkit-clip-path: ellipse(150% 100% at 30% 0);
clip-path: ellipse(150% 100% at 30% 0);
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment