Merge pull request 'mvc' (#2) from mvc into main

Reviewed-on: #2

app.py

@@ -2,4 +2,4 @@ import uvicorn
 from app.main import app
 
 if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=8000, reload=True)
+    uvicorn.run("app.main:app", host="0.0.0.0", port=8210, reload=False)

app/services/markdown_render.py

@@ -20,6 +20,7 @@ def box(title, content):
     </div>
     '''
 
+
 def note(content):
     """Render a note component."""
     return f'''
@@ -37,7 +38,7 @@ def warning(content):
     '''
 
 def create_jinja_environment():
-    """Set up Jinja2 environment and register custom components."""
+    """Create and configure the Jinja2 environment."""
     env = Environment(loader=DictLoader({"base_template": "{{ content | safe }}"}))
     env.globals.update({
         "img_left_overlay": img_left_overlay,
@@ -59,12 +60,15 @@ def render_markdown_with_jinja(markdown_content: str):
     """
     # Step 1: Convert Markdown to HTML and extract metadata
     md = markdown.Markdown(extensions=["extra", "nl2br", "meta"])
-    html_content = md.convert(markdown_content)
+    intermediate_html = md.convert(markdown_content)
     metadata = {key: " ".join(value) for key, value in md.Meta.items()} if md.Meta else {}
 
-    # Step 2: Render the HTML with Jinja2 to apply custom tags
+    # Step 2: Pass the resulting HTML with Jinja2 custom tags through Jinja2
     env = create_jinja_environment()
     template = env.get_template("base_template")
-    final_html = template.render(content=html_content)
+    final_html = template.render(content=intermediate_html)
 
-    return final_html, metadata
+    # Step 3: Re-render final_html in Jinja2 for embedded tags like {{ box(...) }}
+    final_output = env.from_string(final_html).render()
+
+    return final_output, metadata

data/bolig/index.html

@@ -1,13 +1,23 @@
 <main>
     
         <section>
+            <div class="row">
+                <div class="col-8 col-12-medium">
+                    <p><b>Opsumering: Lidt omkring job situationen og hvordan det fungere</b></p>
+                </div>
+                <div class="col-4 col-12-medium">
+                    <p><em>Forfatter: Henrik Jess</em></p>
+                </div>
+            </div>
             <h2>Untitled</h2>
-            <p><strong>Summary:</strong> Lidt omkring job situationen og hvordan det fungere</p>
-            <p><strong>Author:</strong> Henrik Jess</p>
             <div>
                 <h1>Bolig Bolig Bolig Bolig - Hvor skal sengen placeres</h1>
 <p>Nu bliver det spænde!</p>
-<p>{{ note("Dette er stadig en test side") }}</p>
+<p>
+    <div class="note">
+        <p>Dette er stadig en test side</p>
+    </div>
+    </p>
 <p>{img-left-overlay: images/my-cat.png}</p>
             </div>
             <hr>

data/job/index.html

@@ -1,13 +1,55 @@
 <main>
     
         <section>
+            <div class="row">
+                <div class="col-8 col-12-medium">
+                    <p><b>Opsumering: Lidt omkring job situationen og hvordan det fungere</b></p>
+                </div>
+                <div class="col-4 col-12-medium">
+                    <p><em>Forfatter: Henrik Jess</em></p>
+                </div>
+            </div>
             <h2>Untitled</h2>
-            <p><strong>Summary:</strong> Lidt omkring job situationen og hvordan det fungere</p>
-            <p><strong>Author:</strong> Henrik Jess</p>
             <div>
                 <h1>Lidt mere info om job</h1>
 <p>Der skal langt mere tekst her</p>
-<p>{{ note("Husk alpha side") }}</p>
+<p>
+    <div class="note">
+        <p>Husk alpha side</p>
+    </div>
+    </p>
+            </div>
+            <hr>
+        </section>
+    
+        <section>
+            <div class="row">
+                <div class="col-8 col-12-medium">
+                    <p><b>Opsumering: This is the first job post.</b></p>
+                </div>
+                <div class="col-4 col-12-medium">
+                    <p><em>Forfatter: Henrik Jess</em></p>
+                </div>
+            </div>
+            <h2>Job 1</h2>
+            <div>
+                <h1>Overskrift 1</h1>
+<h2>Overskrift 2</h2>
+<h3>Overskrift 3</h3>
+<h4>Overskrift4</h4>
+<p>Here is a custom box:</p>
+<p>
+    <div class="box">
+        <strong>Important Title</strong>
+        <p>This is the content inside the box.</p>
+    </div>
+    </p>
+<p>Here is a note:</p>
+<p>
+    <div class="note">
+        <p>This is a note for the readers.</p>
+    </div>
+    </p>
             </div>
             <hr>
         </section>

data/job/job1.md

@@ -0,0 +1,18 @@
+---
+title: Job 1
+author: Henrik Jess
+summary: This is the first job post.
+---
+
+
+# Overskrift 1
+## Overskrift 2
+### Overskrift 3
+#### Overskrift4
+Here is a custom box:
+
+{{ box("Important Title", "This is the content inside the box.") }}
+
+Here is a note:
+
+{{ note("This is a note for the readers.") }}

data/kontor/index.html

@@ -1,13 +1,23 @@
 <main>
     
         <section>
+            <div class="row">
+                <div class="col-8 col-12-medium">
+                    <p><b>Opsumering: Lad os snakke kontor fælleskaber</b></p>
+                </div>
+                <div class="col-4 col-12-medium">
+                    <p><em>Forfatter: Henrik Jess</em></p>
+                </div>
+            </div>
             <h2>Untitled</h2>
-            <p><strong>Summary:</strong> Lad os snakke kontor fælleskaber</p>
-            <p><strong>Author:</strong> Henrik Jess</p>
             <div>
                 <h1>Kontorfællesskab!</h1>
 <p>Der skal langt mere tekst her</p>
-<p>{{ note("Husk alpha side") }}</p>
+<p>
+    <div class="note">
+        <p>Husk alpha side</p>
+    </div>
+    </p>
             </div>
             <hr>
         </section>

data/skat/index.html

@@ -1,9 +1,15 @@
 <main>
     
         <section>
+            <div class="row">
+                <div class="col-8 col-12-medium">
+                    <p><b>Opsumering: Jeg er langt fra expert, men her er lidt hvad jeg har indsamlet omkring skat</b></p>
+                </div>
+                <div class="col-4 col-12-medium">
+                    <p><em>Forfatter: Henrik Jess</em></p>
+                </div>
+            </div>
             <h2>Untitled</h2>
-            <p><strong>Summary:</strong> Jeg er langt fra expert, men her er lidt hvad jeg har indsamlet omkring skat</p>
-            <p><strong>Author:</strong> Henrik Jess</p>
             <div>
                 <h1>Skat! - Det skal jo også være sjovt og leve</h1>
 <p>dette er mere tekst omkring skat</p>

data/skole/index.html

@@ -1,9 +1,15 @@
 <main>
     
         <section>
+            <div class="row">
+                <div class="col-8 col-12-medium">
+                    <p><b>Opsumering: Nørj det er lidt spændende..</b></p>
+                </div>
+                <div class="col-4 col-12-medium">
+                    <p><em>Forfatter: Erika Nielsen</em></p>
+                </div>
+            </div>
             <h2>Untitled</h2>
-            <p><strong>Summary:</strong> Nørj det er lidt spændende..</p>
-            <p><strong>Author:</strong> Erika Nielsen</p>
             <div>
                 <h1>Skole start!</h1>
 <p>dette er mere tekst omkring skole</p>

generated_data.json

@@ -15,6 +15,11 @@
             "path": "job",
             "author": "Henrik Jess"
         },
+        {
+            "name": "Unknown",
+            "path": "job",
+            "author": "Henrik Jess"
+        },
         {
             "name": "Skat",
             "path": "skat",

requirements.txt

@@ -3,21 +3,13 @@ anyio==4.7.0
 click==8.1.7
 fastapi==0.115.6
 h11==0.14.0
-httptools==0.6.4
 idna==3.10
 Jinja2==3.1.4
 Markdown==3.7
-markdown-it-py==3.0.0
 MarkupSafe==3.0.2
-mdurl==0.1.2
-pydantic==2.6.3
-pydantic_core==2.16.3
-python-dotenv==1.0.1
-PyYAML==6.0.2
+pydantic==2.10.3
+pydantic_core==2.27.1
 sniffio==1.3.1
 starlette==0.41.3
 typing_extensions==4.12.2
 uvicorn==0.32.1
-uvloop==0.21.0
-watchfiles==1.0.0
-websockets==14.1

static/css/main.css

@@ -110,23 +110,23 @@ body.is-preload *, body.is-preload *:before, body.is-preload *:after, body.is-re
 body, input, select, textarea {
   color: #7f888f;
   font-family: "Open Sans", sans-serif;
-  font-size: 16pt;
+  font-size: 14pt;
   font-weight: 400;
   line-height: 1.65;
 }
 @media screen and (max-width: 1680px) {
   body, input, select, textarea {
-    font-size: 13pt;
+    font-size: 14pt;
   }
 }
 @media screen and (max-width: 1280px) {
   body, input, select, textarea {
-    font-size: 11pt;
+    font-size: 12pt;
   }
 }
 @media screen and (max-width: 360px) {
   body, input, select, textarea {
-    font-size: 10pt;
+    font-size: 12pt;
   }
 }
 
@@ -281,6 +281,42 @@ hr.major {
   text-align: right;
 }
 
+main > section > div > h1 {
+  font-size: 1.5em;
+  margin: 0 0 0.5em 0;
+  line-height: 1.3;
+  color: #3d4449;
+  font-family: "Roboto Slab", serif;
+  font-weight: 700;
+}
+
+main > section > div > h2 {
+  font-size: 1.2em;
+  margin: 0 0 0.5em 0;
+  line-height: 1.3;
+  color: #3d4449;
+  font-family: "Roboto Slab", serif;
+  font-weight: 700;
+}
+
+main > section > div > h3 {
+  font-size: 1.1em;
+  margin: 0 0 0.5em 0;
+  line-height: 1.3;
+  color: #3d4449;
+  font-family: "Roboto Slab", serif;
+  font-weight: 700;
+}
+
+main > section > div > h4 {
+  font-size: 1em;
+  margin: 0 0 0.5em 0;
+  line-height: 1.3;
+  color: #3d4449;
+  font-family: "Roboto Slab", serif;
+  font-weight: 700;
+}
+
 /* Row */
 .row {
   display: flex;

static/sass/base/_typography.scss

@@ -1,28 +1,23 @@
-///
-/// Editorial by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
 
 /* Type */
 
 	body, input, select, textarea {
 		color: _palette(fg);
 		font-family: _font(family);
-		font-size: 16pt;
+		font-size: 14pt;
 		font-weight: _font(weight);
 		line-height: 1.65;
 
 		@include breakpoint('<=xlarge') {
-			font-size: 13pt;
+			font-size: 14pt;
 		}
 
 		@include breakpoint('<=large') {
-			font-size: 11pt;
+			font-size: 12pt;
 		}
 
 		@include breakpoint('<=xxsmall') {
-			font-size: 10pt;
+			font-size: 12pt;
 		}
 	}
 
@@ -184,4 +179,40 @@
 
 	.align-right {
 		text-align: right;
-	}
+	}
+
+    // #################################3
+	// Markdown pages styling
+	// #################################3
+
+	// Define a mixin for shared heading styles
+	@mixin shared-heading-styles($font-size) {
+		font-size: $font-size;
+		margin: 0 0 (_size(element-margin) * 0.25) 0;
+		line-height: 1.3;
+		color: _palette(fg-bold); // Assuming this is in your general h1
+		font-family: _font(family-heading);
+		font-weight: _font(weight-heading);
+	}
+
+	// Apply the mixin for h1
+	main > section > div > h1 {
+		@include shared-heading-styles(1.5em);
+	}
+
+	// Apply the mixin for h2, h3, and h4 with adjusted font sizes
+	main > section > div > h2 {
+		@include shared-heading-styles(1.2em);
+	}
+
+	main > section > div > h3 {
+		@include shared-heading-styles(1.1em);
+	}
+
+	main > section > div > h4 {
+		@include shared-heading-styles(1.0em);
+	}
+
+	main > section > div > h4 {
+
+	}

templates/category.html

@@ -4,7 +4,8 @@
 
 {% block content %}
 <header class="main">
-    <h1>{{ category_name }}</h1>
+    <!-- Spacer for future header -->
+    <p></p>
 </header>
 <div>
     {{ content | safe }}

templates/combined_template.html

@@ -1,9 +1,15 @@
 <main>
     {% for section in sections %}
         <section>
+            <div class="row">
+                <div class="col-8 col-12-medium">
+                    <p><b>Opsumering: {{ section.summary }}</b></p>
+                </div>
+                <div class="col-4 col-12-medium">
+                    <p><em>Forfatter: {{ section.author }}</em></p>
+                </div>
+            </div>
             <h2>{{ section.name }}</h2>
-            <p><strong>Summary:</strong> {{ section.summary }}</p>
-            <p><strong>Author:</strong> {{ section.author }}</p>
             <div>
                 {{ section.content | safe }}
             </div>