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 7ac63a49 authored by Christophe Chaudier's avatar Christophe Chaudier :rocket:
Browse files

Merge branch '6-create-landing-page-2' into 'main'

Resolve "create landing page"

Closes #6

See merge request lydra/www/compagnons-devops.fr!5
parents 0d11fe23 1d624134
Branches 10-fix-eslint-config
No related tags found
1 merge request!5Resolve "create landing page"
Pipeline #10444 passed
Showing
with 223 additions and 554 deletions
{
"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
```
......@@ -6,13 +6,13 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** @type {import('@docusaurus/types').Config} */
const config = {
title: ' ',
tagline: '',
title: 'Rejoins les Compagnons du DevOps !',
tagline: 'Ne reste pas seul avec tes questions.',
url: process.env.DOCUSAURUS_URL || 'https://new.compagnons-devops.fr',
baseUrl: process.env.DOCUSAURUS_BASEURL || "/",
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon/favicon.ico',
favicon: 'img/favicon.ico',
organizationName: 'lydra/www', // Usually your GitHub org/user name.
projectName: 'compagnons-devops.fr', // Usually your repo name.
......@@ -40,10 +40,11 @@ const config = {
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
metadata: [{name: 'keywords', content: 'DevOps, infrastructure as code, évènements, rencontres, communauté, compagnonage, artisans DevOps, Software craftsmanship, Ansible, Terraform, OpenStack, OpenShift, Docker, forum'}],
navbar: {
title: 'Les compagnons du DevOps',
title: 'Les Compagnons du DevOps',
logo: {
alt: 'My Site Logo',
alt: 'Compagnons du devops logo',
src: 'img/DO_blanc.svg',
},
items: [
......@@ -77,15 +78,6 @@ const config = {
footer: {
style: 'dark',
links: [
{
title: 'Docs',
items: [
{
label: 'Tutorial',
to: '/docs/intro',
},
],
},
{
title: 'Community',
items: [
......@@ -113,7 +105,13 @@ const config = {
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
logo: {
alt: 'Lydra Logo',
src: 'img/logo_lydra_blanc.png',
width: 160,
href: 'https://lydra.fr/'
},
copyright: ` <b>Les Compagnons du DevOps</b> est une initiative de Lydra.`,
},
prism: {
theme: lightCodeTheme,
......
import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.css';
const FeatureList = [
{
title: 'Easy to Use',
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.
</>
),
title: 'Une communauté de partage autour du mouvement DevOps en français qui s\'appuie sur un forum de discussion',
Svg: require('@site/static/img/components/HomepageFeatures/chat.png').default,
},
{
title: 'Focus on What Matters',
Svg: require('@site/static/img/undraw_docusaurus_tree.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.
</>
),
title: 'Des avant-premières aux évènements et rencontres que nous organiserons',
Svg: require('@site/static/img/components/HomepageFeatures/event.png').default,
},
{
title: 'Powered by React',
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
description: (
<>
Extend or customize your website layout by reusing React. Docusaurus can
be extended while reusing the same header and footer.
</>
),
title: 'De nouvelles vidéos en avant-première',
Svg: require('@site/static/img/components/HomepageFeatures/play.png').default,
},
{
title: 'Des réductions à nos formations.',
Svg: require('@site/static/img/components/HomepageFeatures/hot-sale.png').default,
},
];
function Feature({Svg, title, description}) {
function Feature({Svg, title}) {
return (
<div className={clsx('col col--4')}>
<div className="text--center">
<Svg className={styles.featureSvg} role="img" />
</div>
<div className="text--center padding-horiz--md">
<h3>{title}</h3>
<p>{description}</p>
<div className={styles.featuresContainer}>
<div className={styles.featuresBloc}>
<img src={Svg} className={styles.featureSvg} role="img" />
<p>{title}</p>
</div>
</div>
);
......@@ -51,14 +33,16 @@ function Feature({Svg, title, description}) {
export default function HomepageFeatures() {
return (
<section className={styles.features}>
<div className="container">
<div className="row">
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
<div className="container">
<h2> L&apos;inscription est actuellement gratuite </h2>
<p>Si tu t&apos;inscris maintenant elle restera gratuite à vie pour toi. <br/> En t&apos;inscrivant tu auras accès à : </p>
<div className="row">
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</section>
<div className="column text--center margin-vert--lg">
</div>
</div>
);
}
.features {
.featureSvg {
height: 130px;
width: 130px;
}
.featuresBloc {
text-align: center;
padding: 0 15%;
font-size: 1.2rem;
font-family: var(--ifm-font-family-titles);
}
.featuresContainer {
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
justify-content: center;
height: 312px;
}
.featureSvg {
height: 200px;
width: 200px;
@media screen and (min-width: 600px) {
.featuresContainer:nth-child(even) {
align-items: end;
width: 50%;
}
.featuresContainer:nth-child(odd) {
align-items: start;
width: 50%;
}
}
import React from 'react';
import styles from './styles.module.css';
import checkmark from '@site/static/img/components/HomepageList/checked.png'
const FeatureList = [
{
title: <>La <b>passion</b> de l’<i>infrastructure as code</i>.</>,
},
{
title: <>La conviction que les <b>logiciels libres</b> et open-source sont émancipateurs </>,
},
{
title: <> Lenvie de <b>partager</b> des méthodes, bonnes pratiques ou retours d’expériences.</>,
},
{
title: <>L<b>amélioration continue</b> fait de nous des experts en devenir.</>,
},
];
function Feature({title}) {
return (
<li className={styles.listElement}>
<img className={styles.checkmark} src={checkmark} />
<p> {title} </p>
</li>
);
}
export default function HomepageList() {
return (
<div className={styles.listContainer + ' container'}>
<p>Chez Lydra nous nous sentons seuls entre deux Meetups ou deux conférences. <br/> Nous navons pas trouvé de lieu échanger et avoir des débats en français sur le sujet qui nous passionne. </p>
<p> Nous avons donc décidé de créer et danimer une communauté qui partage nos valeurs : </p>
<ul className="col">
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</ul>
</div>
);
}
.listElement {
display: flex;
flex-direction: column;
align-items: center;
}
.listContainer p {
font-size: 1.1rem;
}
.listElement p {
margin: 0;
font-size: 1rem;
}
.checkmark {
width: 32px;
margin: 18px;
}
@media (min-width: 560px) {
.listContainer {
width: 55%;
margin: auto;
}
.listElement {
flex-direction: row;
}
}
import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.css';
import Button from '../JoinButton';
const FeatureList = [
{
title: 'Tu te sens seul avec l’envie d’échanger sur les méthodes DevOps...',
Svg: require('@site/static/img/components/HomepageWelcome/coffee-break.png').default,
},
{
title: 'Les problématiques liées au déploiement te titillent…',
Svg: require('@site/static/img/components/HomepageWelcome/books.png').default,
},
{
title: 'Et tu aimes tester de nouveaux outils.',
Svg: require('@site/static/img/components/HomepageWelcome/puzzle.png').default,
},
{
title: <b> Alors tu es au bon endroit ! </b>,
Svg: require('@site/static/img/components/HomepageWelcome/computer.png').default,
},
];
function Feature({Svg, title}) {
return (
<div className={clsx('col col--3')}>
<div className={styles.svgBackground}>
<img src={Svg} className={styles.featureSvg} role="img" />
<div className='c'></div> </div>
<div className="text--center padding-horiz--md">
<p>{title}</p>
</div>
</div>
);
}
export default function HomepageWelcome() {
return (
<section className={styles.features}>
<div className="container">
<div className="row">
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>
<Button/>
</section>
);
}
.features {
display: flex;
align-items: center;
flex-direction: column;
padding: 2rem 0;
width: 100%;
font-size: 1.3rem;
font-family: var(--ifm-font-family-titles);
}
.svgBackground {
text-align: center;
margin: auto;
width: 152px;
height: 152px;
border-radius: 50%;
background-color: var(--ifm-color-secondary);
margin-bottom: 20px;
}
.featureSvg {
height: 130px;
width: 130px;
}
import React from "react";
const Button = () => (
<div className="text--center">
<a className="button--primary" href="#join"> Je rejoins les Compagnons du DevOps </a>
</div>
)
export default Button;
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