feat: expressions in markdown (#181)

* feat: assets in Markdown * feat: expressions in Markdown * feat: expressions in Markdown * feat: expressions in Markdown * feat: expressions in Markdown * feat: Twig (!) in Markdown * feat: Twig (!) in Markdown * feat: Twig (!) in Markdown
sigwinhq · Dec 7, 2023 · db5fdd2 · db5fdd2
1 parent 86a5048
commit db5fdd2
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 11 deletions.
diff --git a/psalm.baseline.xml b/psalm.baseline.xml
@@ -646,6 +646,7 @@
       <code>$publishedAt</code>
       <code>$slug</code>
       <code>$title</code>
+      <code>$image</code>
     </MissingConstructor>
     <UnusedClass>
       <code>Article</code>

diff --git a/src/Decoder/MarkdownFileDecoder.php b/src/Decoder/MarkdownFileDecoder.php
@@ -16,14 +16,16 @@
 use League\CommonMark\ConverterInterface;
 use League\CommonMark\Extension\FrontMatter\FrontMatterProviderInterface;
 use Sigwin\YASSG\FileDecoder;
+use Symfony\Component\Yaml\Yaml;
+use Twig\Environment;
 
 final readonly class MarkdownFileDecoder implements FileDecoder
 {
     use FileDecoderTrait;
 
     private const EXTENSIONS = ['md', 'markdown'];
 
-    public function __construct(private ConverterInterface $converter) {}
+    public function __construct(private ConverterInterface $converter, private Environment $twig) {}
 
     public function decode(\SplFileInfo $file): array
     {
@@ -37,8 +39,23 @@ public function decode(\SplFileInfo $file): array
             throw new \RuntimeException('Failed to read file');
         }
 
-        $result = $this->converter->convert($content);
         $metadata = [];
+        if (str_contains($content, '{{') || str_contains($content, '{%')) {
+            if (str_starts_with($content, '---')) {
+                $parts = explode('---', ltrim($content, '-'), 3);
+                if (\count($parts) !== 2) {
+                    throw new \RuntimeException('Failed to extract frontmatter');
+                }
+                /** @var array<string, string> $metadata */
+                $metadata = Yaml::parse($parts[0]);
+            }
+
+            $content = $this->twig->createTemplate($content)->render([
+                'item' => $metadata,
+            ]);
+        }
+
+        $result = $this->converter->convert($content);
         if ($result instanceof FrontMatterProviderInterface) {
             /** @var array<string, string> $metadata */
             $metadata = $result->getFrontMatter();

diff --git a/tests/functional/site/config/packages/yassg_routes.yaml b/tests/functional/site/config/packages/yassg_routes.yaml
@@ -22,7 +22,7 @@ sigwin_yassg:
             defaults:
                 page: 1
             catalog:
-                page: "yassg_pages('articles', 'item.publishedAt.getTimestamp() <= 1658238497')"
+                page: "yassg_pages('articles', 'item.publishedAt.getTimestamp() <= 1701776753')"
         product:
             path: /{_locale}/{slug}
             catalog:

diff --git a/tests/functional/site/content/articles/images.md b/tests/functional/site/content/articles/images.md
@@ -0,0 +1,13 @@
+---
+title: Images!
+slug: images
+publishedAt: "2022-07-20 12:35:00"
+image: assets/images/sigwin.svg
+---
+
+This is a database lookup example: {{yassg_get('articles', '/hello-world.md').title}}
+
+This is an asset lookup: {{asset(item.image)}}
+
+![Logo]({{ asset(item.image) }})
+
diff --git a/tests/functional/site/fixtures/en/article/images/index.html b/tests/functional/site/fixtures/en/article/images/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
+
+    <title>Images!</title>
+
+    <link rel="stylesheet" href="/sub/dir/another/assets/app.d4da4e7e.css" integrity="sha384-t9qUhz8OfBEKvYdnnNndPZAf+S5Q3p0dBnxLn+5SShoNhInHUF+Bu8WJTo+FQJYJ">
+</head>
+<body>
+
+<main class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-xl">
+        <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10 prose">
+            <h1>Images!</h1>
+            <p>20.07.2022. 12:35</p>
+            <p>This is a database lookup example: Hello World!</p>
+<p>This is an asset lookup: /sub/dir/another/assets/images/sigwin.6f9a3d5b.svg</p>
+<p><img src="/sub/dir/another/assets/images/sigwin.6f9a3d5b.svg" alt="Logo" /></p>
+
+        </div>
+    </div>
+</main>
+
+<script src="/sub/dir/another/assets/runtime.4d1205b9.js" integrity="sha384-J2jFm3DPgrcqyvls0fZlS51nUYgiBB+JLwWiU5v7vxEbLwKolmaHrRuz4BjP6qaE"></script><script src="/sub/dir/another/assets/app.9267444a.js" integrity="sha384-WbAUi92ziCGFD1kGZRzpOP8Nxymnw5vXM3szOB1JmBrCU+MVGXBRReCttizXHDdI"></script>
+</body>
+</html>
diff --git a/tests/functional/site/fixtures/en/articles/1/index.html b/tests/functional/site/fixtures/en/articles/1/index.html
@@ -15,10 +15,10 @@
         <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-xl">
             <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10 prose">
                 <h1>Articles</h1>
-                                    <h2><a href="https://example.com/sub/dir/another/en/article/hello-world/">Hello World!</a></h2>
-                    <p>18.07.2022. 12:44</p>
-                                    <h2><a href="https://example.com/sub/dir/another/en/article/paragraphs/">Paragraphs!</a></h2>
-                    <p>19.07.2022. 12:09</p>
+                                    <h2><a href="https://example.com/sub/dir/another/en/article/images/">Images!</a></h2>
+                    <p>20.07.2022. 12:35</p>
+                                    <h2><a href="https://example.com/sub/dir/another/en/article/lists/">Lists!</a></h2>
+                    <p>19.07.2022. 12:13</p>
 
                 <ul>
                                     <li>
@@ -27,6 +27,9 @@ <h2><a href="https://example.com/sub/dir/another/en/article/paragraphs/">Paragra
                                     <li>
                                                     <a href="https://example.com/sub/dir/another/en/articles/2/">2</a>
                                             </li>
+                                    <li>
+                                                    <a href="https://example.com/sub/dir/another/en/articles/3/">3</a>
+                                            </li>
                                 </ul>
             </div>
         </div>

diff --git a/tests/functional/site/fixtures/en/articles/2/index.html b/tests/functional/site/fixtures/en/articles/2/index.html
@@ -17,8 +17,8 @@
                 <h1>Articles</h1>
                                     <h2><a href="https://example.com/sub/dir/another/en/article/titles/">Titles!</a></h2>
                     <p>19.07.2022. 12:11</p>
-                                    <h2><a href="https://example.com/sub/dir/another/en/article/lists/">Lists!</a></h2>
-                    <p>19.07.2022. 12:13</p>
+                                    <h2><a href="https://example.com/sub/dir/another/en/article/paragraphs/">Paragraphs!</a></h2>
+                    <p>19.07.2022. 12:09</p>
 
                 <ul>
                                     <li>
@@ -27,6 +27,9 @@ <h2><a href="https://example.com/sub/dir/another/en/article/lists/">Lists!</a></
                                     <li>
                                                     2
                                             </li>
+                                    <li>
+                                                    <a href="https://example.com/sub/dir/another/en/articles/3/">3</a>
+                                            </li>
                                 </ul>
             </div>
         </div>

diff --git a/tests/functional/site/fixtures/en/articles/3/index.html b/tests/functional/site/fixtures/en/articles/3/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
+
+    <title>Articles, page #3</title>
+
+    <link rel="stylesheet" href="/sub/dir/another/assets/app.d4da4e7e.css" integrity="sha384-t9qUhz8OfBEKvYdnnNndPZAf+S5Q3p0dBnxLn+5SShoNhInHUF+Bu8WJTo+FQJYJ">
+</head>
+<body>
+
+    <main class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+        <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-xl">
+            <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10 prose">
+                <h1>Articles</h1>
+                                    <h2><a href="https://example.com/sub/dir/another/en/article/hello-world/">Hello World!</a></h2>
+                    <p>18.07.2022. 12:44</p>
+
+                <ul>
+                                    <li>
+                                                    <a href="https://example.com/sub/dir/another/en/articles/1/">1</a>
+                                            </li>
+                                    <li>
+                                                    <a href="https://example.com/sub/dir/another/en/articles/2/">2</a>
+                                            </li>
+                                    <li>
+                                                    3
+                                            </li>
+                                </ul>
+            </div>
+        </div>
+    </main>
+
+<script src="/sub/dir/another/assets/runtime.4d1205b9.js" integrity="sha384-J2jFm3DPgrcqyvls0fZlS51nUYgiBB+JLwWiU5v7vxEbLwKolmaHrRuz4BjP6qaE"></script><script src="/sub/dir/another/assets/app.9267444a.js" integrity="sha384-WbAUi92ziCGFD1kGZRzpOP8Nxymnw5vXM3szOB1JmBrCU+MVGXBRReCttizXHDdI"></script>
+</body>
+</html>
diff --git a/tests/functional/site/fixtures/index.html b/tests/functional/site/fixtures/index.html
@@ -36,6 +36,8 @@ <h1>Index</h1>
 
                                         <dd><a href="/sub/dir/another/en/article/hello-world/">/sub/dir/another/en/article/hello-world/</a></dd>
 
+                                        <dd><a href="/sub/dir/another/en/article/images/">/sub/dir/another/en/article/images/</a></dd>
+
                                         <dd><a href="/sub/dir/another/en/article/lists/">/sub/dir/another/en/article/lists/</a></dd>
 
                                         <dd><a href="/sub/dir/another/en/article/paragraphs/">/sub/dir/another/en/article/paragraphs/</a></dd>
@@ -48,6 +50,8 @@ <h1>Index</h1>
                                         <dd><a href="/sub/dir/another/en/articles/1/">/sub/dir/another/en/articles/1/</a></dd>
 
                                         <dd><a href="/sub/dir/another/en/articles/2/">/sub/dir/another/en/articles/2/</a></dd>
+
+                                        <dd><a href="/sub/dir/another/en/articles/3/">/sub/dir/another/en/articles/3/</a></dd>
                                                             <dt>product</dt>
 
                                         <dd><a href="/sub/dir/another/en/nested-example/">/sub/dir/another/en/nested-example/</a></dd>

diff --git a/tests/functional/site/src/Model/Article.php b/tests/functional/site/src/Model/Article.php
@@ -20,6 +20,7 @@ final class Article
     public string $title;
     public string $slug;
     public string $body;
+    public string $image;
 
     #[Context(['datetime_format' => 'Y-m-d H:i:s'])]
     public \DateTimeInterface $publishedAt;

diff --git a/tests/functional/site/templates/pages/articles.html.twig b/tests/functional/site/templates/pages/articles.html.twig
@@ -1,8 +1,8 @@
 {% extends 'layout.html.twig' %}
 
-{% set condition = 'item.publishedAt.getTimestamp() <= 1658238497' %}
+{% set condition = 'item.publishedAt.getTimestamp() <= 1701776753' %}
 
-{% set articles = yassg_paginate('articles', page, {condition: condition, sort: {'item.publishedAt': 'asc'}}) %}
+{% set articles = yassg_paginate('articles', page, {condition: condition, sort: {'item.publishedAt': 'desc'}}) %}
 
 {% block title %}Articles, page #{{ page }}{% endblock %}