Merge pull request #558 from code16/refactor-embeds-templates

[9.0] Refactor embeds templates

Author: aguingand

demo/app/Sharp/Utils/Embeds/AuthorEmbed.php

@@ -19,7 +19,7 @@ public function buildEmbedConfig(): void
         $this
             ->configureLabel('Author')
             ->configureTagName('x-author')
-            ->configureFormTemplatePath('sharp/templates/author_embed.vue');
+            ->configureTemplate(view('sharp.templates.author-embed'));
     }
 
     protected function buildPageAlert(PageAlert $pageAlert): void

demo/app/Sharp/Utils/Embeds/CodeEmbed.php

@@ -13,8 +13,8 @@ public function buildEmbedConfig(): void
         $this->configureLabel('Code')
             ->configureTagName('x-codeblock')
             ->configureIcon('fas fa-code')
-            ->configureFormInlineTemplate('<div style="overflow:auto; max-height:100px; font-family:monospace; white-space: pre-wrap">{{ code }}</div>')
-            ->configureShowTemplatePath('sharp/templates/codeblock_show_embed.vue');
+            ->configureFormTemplate('<div style="overflow:auto; max-height:100px; font-family:monospace; white-space: pre-wrap">{{ $code }}</div>')
+            ->configureShowTemplate(view('sharp.templates.codeblock-show-embed'));
     }
 
     public function buildFormFields(FieldsContainer $formFields): void

demo/app/Sharp/Utils/Embeds/RelatedPostEmbed.php

@@ -15,7 +15,18 @@ public function buildEmbedConfig(): void
         $this
             ->configureLabel('Related Post')
             ->configureTagName('x-related-post')
-            ->configureFormInlineTemplate('<div><span v-if="online" style="color: blue">●</span><i v-if="!online" style="color: orange">●</i> <i class="fa fa-link"></i> <em>{{ title }}</em></div>');
+            ->configureTemplate(<<<'blade'
+                <div style="display: flex; gap: .5rem; align-items: center">
+                    @if($online)
+                        <span style="color: blue">●</span>
+                    @else
+                        <span style="color: orange">●</span>
+                    @endif
+                    <x-fas-link style="width: 1rem; height: 1rem" />
+                    <em>{{ $title }}</em>
+                </div>
+                blade
+            );
     }
 
     public function buildFormFields(FieldsContainer $formFields): void

demo/app/Sharp/Utils/Embeds/TableOfContentsEmbed.php

@@ -11,10 +11,12 @@ public function buildEmbedConfig(): void
     {
         $this->configureLabel('Table of contents')
             ->configureTagName('x-table-of-contents')
-            ->configureFormInlineTemplate('<em>- Table of contents -</em>');
+            ->configureTemplate('<em>- Table of contents -</em>');
     }
 
     public function buildFormFields(FieldsContainer $formFields): void {}
 
-    public function updateContent(array $data = []): array {}
+    public function updateContent(array $data = []): array {
+        return [];
+    }
 }

demo/resources/views/sharp/templates/author-embed.blade.php

@@ -0,0 +1,12 @@
+
+<div style="display: flex">
+    @if($picture)
+        <img src="{{ $picture['thumbnail'] }}" width="50" height="50">
+    @endif
+    <div style="flex: 1">
+        <div><strong>{{ $name }}</strong></div>
+        <div style="font-size: .875rem">
+            {{ $slot }}
+        </div>
+    </div>
+</div>

demo/resources/views/sharp/templates/author_embed.vue

@@ -0,0 +1,5 @@
+<div style="
+  overflow:auto; max-height:150px; font-family:monospace;
+  white-space: pre-wrap; font-size: 12px; padding:1em;
+  border:1px solid #aaa; background: #eee;
+">{{ $code }}</div>

demo/resources/views/sharp/templates/codeblock-show-embed.blade.php

@@ -5,6 +5,9 @@
             {
                 "path": "tests/Fixtures/resources/views",
                 "namespace": "fixtures"
+            },
+            {
+                "path": "demo/resources/views"
             }
         ]
     }

demo/resources/views/sharp/templates/codeblock_show_embed.vue

@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     >
       <DialogContent
         :class="