https enforcement

app/main.py

@@ -27,9 +27,6 @@ class Application:
         # Process Markdown files into HTML
         processor = MarkdownProcessor(input_dir="./data", templates_dir="./templates")
         processor.run()
-
-
-
         yield
         print("App shutdown: Cleanup complete.")
 

app/services/markdown_render.py

@@ -41,6 +41,37 @@ def warning(content):
     </div>
     '''
 
+
+def slider(options, images):
+    """Render a slider using the provided HTML structure."""
+    width = options.get("width", 500)
+    height = options.get("height", 375)
+
+    # First image with a <figure> and <figcaption>
+    first_image_html = f'''
+    <figure class="relative my-0 slider-bg">
+        <img src="{images[0]}" width="{width}" height="{height}">
+        <figcaption class="absolute inset-0 flex flex-col justify-end p-6">
+            <h1 class="my-0">Fylgja CSS Slider</h1>
+        </figcaption>
+    </figure>
+    '''
+    ## Todo: https://codepen.io/dp_lewis/pen/WNZQzN
+    # Remaining images as plain <img> tags
+    other_images_html = "".join([
+        f'<img src="{img}" width="{width}" height="{height}">' for img in images[1:]
+    ])
+
+    # Final combined HTML
+    return f'''
+    <main>
+        <div class="scroll-slider hide-scrollbar">
+            {first_image_html}
+            {other_images_html}
+        </div>
+    </main>
+    '''
+
 def create_jinja_environment():
     """Create and configure the Jinja2 environment."""
     env = Environment(loader=DictLoader({"base_template": "{{ content | safe }}"}))
@@ -50,6 +81,7 @@ def create_jinja_environment():
         "note": note,
         "warning": warning,
         "link_to": link_to,
+        "slider": slider,
     })
     return env
 

data/Kultur/0200_kultur_unikt.md

@@ -32,3 +32,12 @@ Det portugisiske køkken er en oplevelse i sig selv:
 Kunst og kultur går hånd i hånd i Portugal. Byer som **Porto** og **Lissabon** er fyldt med street art, museer og gallerier, der udtrykker både moderne og traditionel portugisisk kunst.
 
 Portugal formår at kombinere historie, musik og mad med en afslappet livsstil. Det er en kultur, der er lige så rig på oplevelser, som den er på sjæl.  
+
+
+### Slider test
+    {{ slider(options={"width": 500, "height": 375}, images=[
+        "https://picsum.photos/id/34/500/375",
+        "https://picsum.photos/id/42/500/375",
+        "https://picsum.photos/id/72/500/375",
+        "https://picsum.photos/id/94/500/375"
+    ]) }}

data/Kultur/index.html

@@ -57,6 +57,23 @@
 <h3>En levende kunstscene</h3>
 <p>Kunst og kultur går hånd i hånd i Portugal. Byer som <strong>Porto</strong> og <strong>Lissabon</strong> er fyldt med street art, museer og gallerier, der udtrykker både moderne og traditionel portugisisk kunst.</p>
 <p>Portugal formår at kombinere historie, musik og mad med en afslappet livsstil. Det er en kultur, der er lige så rig på oplevelser, som den er på sjæl.  </p>
+<h3>Slider test</h3>
+<pre><code>
+    <main>
+        <div class="scroll-slider hide-scrollbar">
+            
+    <figure class="relative my-0 slider-bg">
+        <img src="https://picsum.photos/id/34/500/375" width="500" height="375">
+        <figcaption class="absolute inset-0 flex flex-col justify-end p-6">
+            <h1 class="my-0">Fylgja CSS Slider</h1>
+        </figcaption>
+    </figure>
+    
+            <img src="https://picsum.photos/id/42/500/375" width="500" height="375"><img src="https://picsum.photos/id/72/500/375" width="500" height="375"><img src="https://picsum.photos/id/94/500/375" width="500" height="375">
+        </div>
+    </main>
+    
+</code></pre>
             </div>
             <hr>
         </section>

generated_data.json

@@ -6,17 +6,17 @@
             "author": "Henrik Jess"
         },
         {
-            "name": "Bolig i Portugal",
+            "name": "Populære områder i Portugal",
             "path": "Bolig",
             "author": "Henrik Jess"
         },
         {
-            "name": "El- og vandregninger i Portugal: Sådan påvirker de leveomkostningerne",
+            "name": "Supermarkedssammenligning",
             "path": "Budget",
             "author": "Henrik Jess"
         },
         {
-            "name": "Permanent ophold i Portugal",
+            "name": "Flytte permanent til Portugal",
             "path": "Flytning",
             "author": "Henrik Jess"
         },
@@ -36,7 +36,7 @@
             "author": "Henrik Jess"
         },
         {
-            "name": "Omkostninger ved at bo i Portugal vs Danmark",
+            "name": "Priser på mad og dagligvarer i Portugal",
             "path": "Hverdag",
             "author": "Henrik Jess"
         },
@@ -46,12 +46,12 @@
             "author": "Henrik Jess"
         },
         {
-            "name": "Portugals unikke kultur",
+            "name": "Nattelivet i Portugal",
             "path": "Kultur",
             "author": "Henrik Jess"
         },
         {
-            "name": "Livskvalitet i Portugal",
+            "name": "Portugiserne som mennesker",
             "path": "Livskvalitet",
             "author": "Henrik Jess"
         },
@@ -81,7 +81,7 @@
             "author": "Henrik Jess"
         },
         {
-            "name": "Er transport billigere i Portugal?",
+            "name": "Fordele ved offentlig transport i Portugal",
             "path": "Transport",
             "author": "Henrik Jess"
         }

inspiration/image_slider.html

@@ -0,0 +1,14 @@
+<main>
+    <div class="scroll-slider hide-scrollbar">
+        <figure class="relative my-0 slider-bg">
+            <img src="https://picsum.photos/id/19/500/375" width="500" height="375">
+            <figcaption class="absolute inset-0 flex flex-col justify-end p-6">
+                <h1 class="my-0">Fylgja CSS Slider</h1>
+            </figcaption>
+        </figure>
+        <img src="https://picsum.photos/id/34/500/375" width="500" height="375">
+        <img src="https://picsum.photos/id/42/500/375" width="500" height="375">
+        <img src="https://picsum.photos/id/72/500/375" width="500" height="375">
+        <img src="https://picsum.photos/id/94/500/375" width="500" height="375">
+    </div>
+</main>

templates/image_slider.html

@@ -0,0 +1,14 @@
+<main>
+    <div class="scroll-slider hide-scrollbar">
+        <figure class="relative my-0 slider-bg">
+            <img src="https://picsum.photos/id/19/500/375" width="500" height="375">
+            <figcaption class="absolute inset-0 flex flex-col justify-end p-6">
+                <h1 class="my-0">Fylgja CSS Slider</h1>
+            </figcaption>
+        </figure>
+        <img src="https://picsum.photos/id/34/500/375" width="500" height="375">
+        <img src="https://picsum.photos/id/42/500/375" width="500" height="375">
+        <img src="https://picsum.photos/id/72/500/375" width="500" height="375">
+        <img src="https://picsum.photos/id/94/500/375" width="500" height="375">
+    </div>
+</main>