add: some styles and more organization

src/layouts/ArticleLayout.astro

@@ -1,7 +1,14 @@
 ---
-import PageLayout from './PageLayout.astro'
+import BaseLayout from './BaseLayout.astro'
 
-const { frontmatter } = Astro.props
+import Header from '../components/Header.astro'
+import Footer from '../components/Footer.astro'
 ---
 
-<PageLayout {...frontmatter} />
+<BaseLayout {...Astro.props}>
+    <Header />
+    <main class="text-content">
+        <slot />
+    </main>
+    <Footer />
+</BaseLayout>

src/layouts/BaseLayout.astro

@@ -1,4 +1,6 @@
 ---
+import 'katex/dist/katex.min.css'
+
 import '@fontsource/open-sans/latin.css'
 import '@fontsource/source-sans-pro/latin.css'
 import '@fontsource/source-code-pro/latin.css'
@@ -20,6 +22,22 @@ const { title, description, thumbnail, pageName } = Astro.props
 
         <link rel="icon" type="image/png" sizes="512x512" href="/assets/icon.png" />
 
+        <script>
+            import renderMathInElement from 'katex/contrib/auto-render'
+
+            document.addEventListener('DOMContentLoaded', function () {
+                renderMathInElement(document.body, {
+                    delimiters: [
+                        { left: '$$', right: '$$', display: true },
+                        { left: '$', right: '$', display: false },
+                        { left: '\\(', right: '\\)', display: false },
+                        { left: '\\[', right: '\\]', display: true },
+                    ],
+                    throwOnError: false,
+                })
+            })
+        </script>
+
         <title>{title}</title>
     </head>
     <body class:list={Array.isArray(pageName) ? pageName : [pageName]}>

src/layouts/PageLayout.astro

@@ -1,22 +1,14 @@
 ---
 import BaseLayout from './BaseLayout.astro'
+
+import Header from '../components/Header.astro'
+import Footer from '../components/Footer.astro'
 ---
 
 <BaseLayout {...Astro.props}>
-    <header>
-        <div class="logo">
-            <img src="/images/logo-circuit-board.svg" alt="phc logo" />
-        </div>
-        <div class="links">
-            <a role="button" href="#">Utenti</a>
-            <a role="button" href="#">Notizie</a>
-            <a role="button" href="#">Progetti</a>
-            <a role="button" href="#">About</a>
-            <a class="primary" role="button" href="#">Accedi</a>
-        </div>
-    </header>
+    <Header />
     <main>
         <slot />
     </main>
-    <footer>&copy; PHC 2023</footer>
+    <Footer />
 </BaseLayout>