feat: created Formation page and components

README.md

@@ -90,6 +90,29 @@ __You would find the file `image.png` used on the `management` documentation pag
 
 * Global images (e.g: used in the footer) will be in the `img/theme/` subfolder.
 
+## Formations page
+
+To add a course card in the `Formations` page, you have to add it as a MarkDown file in the `/blog/` directory.
+
+Name the file as `[courseName].md`. 
+
+You will first need to import the `Button` component at the start of the page with 
+
+```import Button from '@site/src/components/FormationButton';```
+
+and build the page as follow: 
+
+* The image goes in the folder `/static/formation/` and is called as `'![](@site/static/formations/[yourImage].jpg)'`
+* The title **must** be an H2 (`##`)
+* The category must be a `code snippet` (using backticks > `)
+* Then, the description in MarkDown
+
+Finally, call the `Button` at the end of the file and pass it the link to the course as 
+
+``` <Button href="[Url to the course page]" /> ```
+
+See [`blog/DevopsMindset.md`](/blog/DevopsMindset.md) as exemple. 
+
 ## License
 
 [![Compagnons Du Devops Copyright (c) 2021-present Lydra](https://cdn.icon-icons.com/icons2/2622/PNG/512/legal_license_mit_icon_157533.png)](https://choosealicense.com/licenses/mit/)

blog/DevopsMindset.md

+import Button from '@site/src/components/FormationButton';
+
+![](@site/static/formations/devopsmindset.jpg)
+## DevOps Mindset
+
+`E-learning`
+
+**As-tu l'état d'esprit DevOps ?**  
+Comment te construire une carrière tech épanouissante ?
+
+Une formation rapide pour faire tes premiers pas dans le **mouvement DevOps** et te forger l’**état d’esprit** qui te rendra plus efficace dans ton travail.
+C’est pour cela que j’ai créé une formation rapide pour faire tes premiers pas dans le mouvement DevOps et te forger l’état d’esprit qui te rendra plus efficace dans ton travail.
+
+<Button href="https://www.compagnons-devops.fr/devops-mindset" />

docusaurus.config.js

@@ -33,6 +33,11 @@ const config = {
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
         },
+        blog: {
+          routeBasePath: '/formations',
+          blogTitle: 'Formations',
+          blogDescription: 'Rejoins le mouvement et commence ta transformation aujourd'hui !',
+        }
       }),
     ],
   ],
@@ -63,6 +68,9 @@ const config = {
             position: 'left',
             href: 'https://cloud.lydra.fr/s/z8AMZbqs6mxd5CH#mindmap'
           },
+          {to: '/formations', 
+          label: '🎓 Formations', 
+          position: 'left'},
           {
             label: 'Soutenir',
             position: 'left',

src/components/FormationButton.js

+import React from 'react';
+
+export default function Button({href}) {
+  return (
+    <a className='button button--primary' rel="noreferrer" target='_blank' href={href}> Je veux en savoir plus ! </a>
+  );
+}

src/css/course-cards.css

+.courseCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1.3;
+  text-align: center;
+  padding: 0;
+  padding-bottom: 1rem;
+  margin-bottom: 2rem;
+  box-shadow: 2px 2px 6px rgba(24, 24, 24, 0.3);
+}
+
+.courseCard ul {
+  text-align: start;
+}
+
+.courseCard img {
+  height: 100%;
+}
+
+.courseCard .hash-link {
+  display: none;
+}
+
+.courseCard p:not(:first-child) {
+  padding: 0 10px;
+}
+
+.courseCard h2 {
+  margin-top: 0;
+}

src/css/custom.css

 @import 'variables.css';
 @import 'fonts.css';
+@import 'course-cards.css';
 
 .footer {
   background-color: var(--global-theme);
@@ -44,10 +45,6 @@
   text-decoration: none;
 }
 
-.button--primary:hover {
-  background-color: var(--ifm-color-secondary-light);
-  color: var(--text-contrast);
-}
 
 .heroBanner {
   padding: 2.6rem 0; 

src/theme/BlogLayout/index.js

+import React from 'react';
+import Layout from '@theme/Layout';
+import BlogSidebar from '@theme/BlogSidebar';
+export default function BlogLayout(props) {
+  const {sidebar, toc, children, ...layoutProps} = props;
+  return (
+    <Layout {...layoutProps}>
+      <div className="container margin-vert--lg">
+        <div className="row">
+          <BlogSidebar sidebar={sidebar} />
+          <main
+            itemScope
+            itemType="http://schema.org/Blog">
+            {children}
+          </main>
+          {toc && <div className="col col--2">{toc}</div>}
+        </div>
+      </div>
+    </Layout>
+  );
+}

src/theme/BlogListPage/index.js

+import React from 'react';
+import clsx from 'clsx';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import BlogLayout from '@theme/BlogLayout';
+import BlogListPaginator from '@theme/BlogListPaginator';
+import SearchMetadata from '@theme/SearchMetadata';
+import BlogPostItems from '@theme/BlogPostItems';
+
+function BlogListPageMetadata(props) {
+  const {metadata} = props;
+  const {
+    siteConfig: {title: siteTitle},
+  } = useDocusaurusContext();
+  const {blogDescription, blogTitle, permalink} = metadata;
+  const isBlogOnlyMode = permalink === '/';
+  const title = isBlogOnlyMode ? siteTitle : blogTitle;
+  return (
+    <>
+      <PageMetadata title={title} description={blogDescription} />
+      <SearchMetadata tag="blog_posts_list" />
+    </>
+  );
+}
+function BlogListPageContent(props) {
+  const {metadata, items} = props;
+  return (
+    <BlogLayout>
+      <h1 className='text--center'> Les Formations</h1>
+      <div className="container">
+        <div className="row">
+          <BlogPostItems items={items} />
+        </div>
+      </div>
+      <BlogListPaginator metadata={metadata} />
+    </BlogLayout>
+  );
+}
+export default function BlogListPage(props) {
+  return (
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogListPage,
+      )}>
+      <BlogListPageMetadata {...props} />
+      <BlogListPageContent {...props} />
+    </HtmlClassNameProvider>
+  );
+}

src/theme/BlogPostItem/index.js

+import React from 'react';
+import BlogPostItemContainer from '@theme/BlogPostItem/Container';
+import BlogPostItemContent from '@theme/BlogPostItem/Content';
+
+export default function BlogPostItem({children}) {
+  return (
+  <div className="col col--4">
+      <BlogPostItemContainer className="card courseCard">
+        <BlogPostItemContent> {children}</BlogPostItemContent>
+      </BlogPostItemContainer>
+  </div>
+  );
+}