PostHTML

[5] PostHTML · GitHub, 2024-09-25T09:14:32.000Z https://github.com/posthtml

[1] GitHub - posthtml/posthtml: PostHTML is a tool to transform HTML/XML with JS plugins, 2024-09-25T08:19:15.000Z https://github.com/posthtml/posthtml

[2] posthtml - HTML/XML processor, 2024-09-25T08:20:14.000Z https://posthtml.org/#/

[3] >>1 の

transform HTML/XML with JS plugins

だと意味がよくわかりませんが、要は「入力の HTMLもどき」を「PostHTML プラグイン」の組み合わせを通して「出力の HTML」を得るようなソフトウェアらしいです。

[4] なぜか「入力の HTMLもどき」があたかも HTML であるかのように説明され、あたかも HTML であるかのように利用者は理解しているようですが、プラグイン専用の独自の要素や属性が大量にあったり、場合によっては class 属性値として出力されるものを要素名に使ったりできます (プラグインとその呼び出し設定次第)。

[16] 基本はサーバー側で実行される前提に見える。「入力の HTMLもどき」はクライアントには送られないのが基本、のように見えるがどうだろう。

[6] PostCSS とは兄弟プロジェクトなのかな

[7] GitHub - posthtml/posthtml-content: Apply functions to tags through custom attributes, 2024-09-25T09:17:30.000Z https://github.com/posthtml/posthtml-content

[8] GitHub - posthtml/posthtml-shiki: Highlight code blocks with PostHTML and Shiki, 2024-09-25T09:18:48.000Z https://github.com/posthtml/posthtml-shiki

<shiki>
  <h1 class="text-xl">Hello</h1>
</shiki>

[10] GitHub - posthtml/posthtml-import: Import HTML Plugin, 2024-09-25T09:21:15.000Z https://github.com/posthtml/posthtml-import

<import src="file.html">

[15] GitHub - posthtml/posthtml-include: Include HTML Plugin, 2024-09-25T09:26:56.000Z https://github.com/posthtml/posthtml-include

    <include src="components/button.html" locals='{
        "text": "Button"
    }'></include>

[14] GitHub - posthtml/posthtml-expressions: Use variables, JS-like expressions, and even markup-powered logic in your HTML., 2024-09-25T09:24:40.000Z https://github.com/posthtml/posthtml-expressions

<if condition="foo === 'bar'">
  <p>Foo really is bar! Revolutionary!</p>
</if>

<elseif condition="foo === 'wow'">
  <p>Foo is wow, oh man.</p>
</elseif>

<else>
  <p>Foo is probably just foo in the end.</p>
</else>

<when condition="foo === 'bar'">
  <p>Foo really is bar! Revolutionary!</p>
</when>

<elsewhen condition="foo === 'wow'">
  <p>Foo is wow, oh man.</p>
</elsewhen>

<otherwise>
  <p>Foo is probably just foo in the end.</p>
</otherwise>

<switch expression="foo">
  <case n="'bar'">
    <p>Foo really is bar! Revolutionary!</p>
  </case>
  <case n="'wow'">
    <p>Foo is wow, oh man.</p>
  </case>
  <default>
    <p>Foo is probably just foo in the end.</p>
  </default>
</switch>

<clause expression="foo">
  <when n="'bar'">
    <p>Foo really is bar! Revolutionary!</p>
  </when>
  <when n="'wow'">
    <p>Foo is wow, oh man.</p>
  </when>
  <fallback>
    <p>Foo is probably just foo in the end.</p>
  </fallback>
</clause>

<each loop="item, index in array">
  <p>{{ index }}: {{ item }}</p>
</each>

You can define custom tag names to use for creating loops:

<for loop="item in [1,2,3]">
  <p>{{ item }}</p>
</for>

<scope with="author">
  <include src="components/profile.html"></include>
</scope>

You can define a custom tag name to use for creating scopes:

<context with="author">
  <include src="components/profile.html"></include>
</context>

<raw>
  <if condition="foo === 'bar'">
    <p>Output {{ foo }} as-is</p>
  </if>
</raw>

You can customize the name of the tag:

<verbatim>
  <if condition="foo === 'bar'">
    <p>Output {{ foo }} as-is</p>
  </if>
</verbatim>

[9] SugarML

[11] Home | Maizzle - Framework for Rapid Email Prototyping, 2024-09-25T09:22:02.000Z https://v3.maizzle.com/

Bring Your Own HTML
No need to learn custom syntax or adapt your templates to it. Use your existing HTML, it'll just work.
Supercharged by PostHTML
PostHTML gives your HTML superpowers, enabling you to write complex logic with simple, text editor-friendly markup.

<extends src="src/layouts/main.html">
  <block name="template">
    <table class="w-600 sm:w-full">
      <tr>
        <td class="text-base text-gray-700">
          <h2>Article title</h2>
          <p>Lorem ipsum dolor sit amet</p>
        </td>
      </tr>
    </table>
  </block>
</extends>

[12] いや custom syntax だろw

[18] GitHub - posthtml/posthtml-custom-elements: Custom Elements Plugin, 2024-09-25T14:45:56.000Z https://github.com/posthtml/posthtml-custom-elements

[20] GitHub - posthtml/posthtml-components: A PostHTML plugin for creating components with HTML-friendly syntax inspired by Laravel Blade. Slots, stack/push, props, custom tag and much more., 2024-09-25T14:51:53.000Z https://github.com/posthtml/posthtml-components

This PostHTML plugin provides an HTML-friendly syntax for using components in your HTML templates. If you are familiar with Blade, React, Vue or similar, you will find the syntax to be familiar, as this plugin is inspired by them.

[21] >>20 HTML-friendly syntax は HTML でないと言っているようにも読めるが、その後の方ではやっぱり HTML と言っている。

[13] Templates | Maizzle - Framework for Rapid Email Prototyping, 2024-09-25T09:23:16.000Z https://v3.maizzle.com/docs/templates/

POSTHTML