Multiline Blade in Markdown syntax idea

[caendesilva]

We currently support this, but we can only use single lines.

[Blade]: @include("hello-world")
[Blade]: @include("hello", ["name" => "World"])

How about custom start/end component directives?

[Blade]: @startComponent('tip-card')
---
data: Front matter can be set and passed as props to components. (Optional)
---

# And here is any Markdown!

- Anything within these component tags will be passed to the component {{ $slot }}

** So, this type of syntax is heavily tailored for components that expect to take in Markdown **

[Blade]: @endComponent('tip-card')

We won't get syntax highlighting, but we also won't get the ambiguity we would get by using code blocks. A drawback of this syntax is that it's very non-standard, and the [Blade]: syntax may be unintuitive, but it being specialized is also a good thing as it means that there won't be conflicts or ambiguity.

[caendesilva]

Thinking a bit more, the actual problem I want to solve is being able to pass longer data to includes.

This can get unreadable very fast:

[Blade]: @include("tip-card", ["text" => "Several paragraphs here"])

Maybe we can simply allow frontmatter to be added within like this?

[Blade]: @include("tip-card")
text: Several paragraphs here
[Blade]: @endInclude

Or:

[Blade]: @component("tip-card")
---
text: Several paragraphs here
---
[Blade]: @endComponent

# Triple dashes are implicit and can be omitted
[Blade]: @component("tip-card")
text: Several paragraphs here
[Blade]: @endComponent

[caendesilva]

Or, I simply finally just implement support for this:

[Blade]: @component('header', [
    'image' => 'media/my-image.jpg',
    'title' => 'My Title',
])

[caendesilva]

Arghhh so many options!

[caendesilva]

Yet another component syntax idea for when only data needs to be passed, and no slot, this could be put anywhere within the Markdown:

[markdown...]

---component:  header
image: media/img-123.jpg
title: "Lorem Ipsum"
body: Lorem ipsum dolor sit amet
---

[caendesilva]

My favourite of the alternative syntaxes might be this, and considering that the Blade properties are supported* by PhpStorm (?!), I might actually try this.

<x-header image="media/my-image.png">
    <x-slot name="title">
        Lorem Ipsum
    </x-slot>

    Lorem ipsum dolor sit amet
</x-header>

*I don't get syntax highlighting and it complains about invalid elements, but clicking on the attributes takes me to them in the source component! Maybe this is due to Laravel Idea supporting this with the attributes, but PhpStorm itself does not?

This is essentially the original Aaron Francis syntax, but without the ambiguity issues of code blocks, and is obviously unsafe for many usages, but considering that Blade-in-Markdown is already opt-in I think it could actually work.

To me, this solves the problem of messing with code blocks. If one references a Blade component outside of a code block, there is no ambiguity, the user does not want to use a code block, they want to use a Blade component, and since Blade components are valid XML GitHub properly highlights it, so it should not be too hard (maybe?) for PhpStorm to support it either.

[caendesilva]

My favourite of the alternative syntaxes might be this, and considering that the Blade properties are supported* by PhpStorm (?!), I might actually try this.

<x-header image="media/my-image.png">
    <x-slot name="title">
        Lorem Ipsum
    </x-slot>

    Lorem ipsum dolor sit amet
</x-header>

*I don't get syntax highlighting and it complains about invalid elements, but clicking on the attributes takes me to them in the source component!

This is essentially the original Aaron Francis syntax, but without the ambiguity issues of code blocks, and is obviously unsafe for many usages, but considering that Blade-in-Markdown is already opt-in I think it could actually work.

To me, this solves the problem of messing with code blocks. If one references a Blade component outside of a code block, there is no ambiguity, the user does not want to use a code block, they want to use a Blade component, and since Blade components are valid XML GitHub properly highlights it, so it should not be too hard (maybe?) for PhpStorm to support it either.

Implemented a crude version of this. Main problem is that all evaluated Blade gets put in the same semantic prose article element, which might not always be what is desired.

[caendesilva]

It should be noted that a lot of what I was currently trying to do can easily (and better) be solved by #1517 by creating custom layouts and thus inverting the data source flow. Though @section tags would be nice to set long parts of text in the body instead of front matter.

[caendesilva]

Closing as this is now being worked on in https://github.com/hydephp/bladedown. If that package becomes popular and stable we can consider merging it into the core at a later date.