feat: css layout

mdx/general/exposition-application-locale-internet.mdx

@@ -3,6 +3,9 @@ title: Comment exposer une application locale sur internet ?
 slug: comment-exposer-une-application-locale-sur-internet
 date: 2022-09-30
 author: lkpeto
+tags:
+  - nodejs
+  - localtunnel
 ---
 
 Des fois, en développant les applications,

mdx/general/installer-jenkins-docker-compose.mdx

@@ -3,6 +3,8 @@ title: Installer Jenkins avec docker compose
 slug: installer-jenkins-avec-docker-compose
 date: 2022-10-01
 author: lkpeto
+tags:
+  - jenkins
 ---
 
 Dans ce tutoriel, nous allons voir comment installer

mdx/general/monolitique-microservices.mdx

@@ -3,6 +3,9 @@ title: Du monolitique aux microservices
 slug: du-monolitique-aux-microservices
 date: 2022-09-27
 author: lkpeto
+tags:
+  - monolitique
+  - microservices
 ---
 
 Aujourd'hui, le conteneurs nous ont envahi. Dans toutes les applications

src/components/fragment/Footer.jsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { getSiteUrl } from '../utils/url-generator';
+
+export default function Footer() {
+  return (
+    <footer>
+      <div className="footer-inner">
+        <div className="footer-top">
+          <div className="footer-brand">
+            <a className="logo" href={getSiteUrl()}>
+              tutoriel<span>.dev</span>
+            </a>
+            <div className="search-wrap">
+              <input type="text" placeholder="Rechercher" />
+              <button>Go</button>
+            </div>
+          </div>
+          <div className="socials">
+            <div className="social-btn" title="GitHub">
+              <svg viewBox="0 0 24 24">
+                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.38.6.1.82-.26.82-.58v-2.03c-3.34.72-4.04-1.6-4.04-1.6-.55-1.38-1.33-1.75-1.33-1.75-1.08-.74.08-.72.08-.72 1.2.08 1.83 1.23 1.83 1.23 1.06 1.82 2.8 1.3 3.48.99.1-.77.41-1.3.74-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 3-.4c1.02 0 2.04.13 3 .4 2.28-1.55 3.29-1.23 3.29-1.23.66 1.66.25 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.69.82.57C20.56 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" />
+              </svg>
+            </div>
+            <div className="social-btn" title="Twitter/X">
+              <svg viewBox="0 0 24 24">
+                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+              </svg>
+            </div>
+            <div className="social-btn" title="RSS">
+              <svg viewBox="0 0 24 24">
+                <path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z" />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div className="footer-copy">
+          &copy; 2026 tutoriel.dev — All rights reserved.
+        </div>
+      </div>
+    </footer>
+  );
+}

src/components/fragment/Header.jsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+export default function Header() {
+  return (
+    <nav>
+      <div className="nav-inner">
+        <a className="logo" href="#">
+          tutoriel<span>.dev</span>
+        </a>
+        <div className="nav-links">
+          <a href="#">Tutorials</a>
+          <a href="#">Topics</a>
+          <a href="#">About</a>
+        </div>
+        <button className="hamburger" id="hamburger" aria-label="Menu">
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+      </div>
+      <div className="mobile-menu" id="mobile-menu">
+        <a href="#">Tutorials</a>
+        <a href="#">Topics</a>
+        <a href="#">About</a>
+      </div>
+    </nav>
+  );
+}

src/components/layout/IndexLayout.jsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import '../../css/main.css';
+import Footer from '../fragment/Footer';
+import Header from '../fragment/Header';
+
+export default function IndexLayout({ children }) {
+  return (
+    <>
+      <Header />
+      {children}
+      <Footer />
+    </>
+  );
+}

src/components/PostSeo.jsx → src/components/seo/PostSeo.jsx

@@ -34,11 +34,24 @@ export function PostTwitterSeo({ frontmatter }) {
   );
 }
 
+export function PreloadGoogleFonts() {
+  return (
+    <>
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Fira+Code:wght@400;500&display=swap"
+        rel="stylesheet"
+      />
+    </>
+  );
+}
+
 export function PostSeo({ frontmatter }) {
   return (
     <>
       <PostOgpSeo frontmatter={frontmatter} />
       <PostTwitterSeo frontmatter={frontmatter} />
+      <PreloadGoogleFonts />
     </>
   );
 }

src/components/utils/url-generator.jsx

@@ -0,0 +1,7 @@
+export function generateBlogPostUrl(slug) {
+  return `blog-posts/${slug}`;
+}
+
+export function getSiteUrl() {
+  return `https://tutoriel.dev`;
+}