Skip to content

[asciidoc] Improve callouts rendering #50

@ia3andy

Description

@ia3andy

Here is what I have with asciidocj:

Image

and the same with yupiik:

Image

Here is the html with asciidocj:

<div class="sectionbody">
<div class="paragraph">
<p>The default directory structure is:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-none hljs">my-site/
├── data/                                <i class="conum" data-value="1"></i><b>(1)</b>
│   ├── menu.yml
│   └── tags.yml
│
├── content/                             <i class="conum" data-value="2"></i><b>(2)</b>
│   ├── posts/                           <i class="conum" data-value="3"></i><b>(3)</b>
│   │   ├── 2024-10-14-roq-ssg/
│   │   │   ├── index.md
│   │   │   └── image.jpg
│   │   └── 2024-10-20-heart-roq.md
│   │
│   ├── roq-page.md                      <i class="conum" data-value="4"></i><b>(4)</b>
│   └── index.html                       <i class="conum" data-value="5"></i><b>(5)</b>
│
├── public/                              <i class="conum" data-value="6"></i><b>(6)</b>
│   └── style.css
│
└── templates/                           <i class="conum" data-value="7"></i><b>(7)</b>
    ├── partials/                        <i class="conum" data-value="8"></i><b>(8)</b>
    │   ├── head.html
    │   └── pagination.html
    │
    └── layouts/                         <i class="conum" data-value="9"></i><b>(9)</b>
        ├── base.html
        ├── page.html
        └── post.html
└── pom.xml                              <i class="conum" data-value="10"></i><b>(10)</b></code></pre>
</div>
</div>
<div class="colist arabic">
<table>
<tbody><tr>
<td><i class="conum" data-value="1"></i><b>1</b></td>
<td><strong>Roq Data Files</strong>
The <code>data/</code> directory contains data files like <code>menu.yml</code> and <code>tags.yml</code>. These files can hold structured data used across the site.</td>
</tr>
<tr>
<td><i class="conum" data-value="2"></i><b>2</b></td>
<td><strong>Content Files</strong>
The <code>content/</code> directory is where all content of the site that will be generated as pages resides (.html, .md, .adoc*, .json, .xml, …​)</td>
</tr>
<tr>
<td><i class="conum" data-value="3"></i><b>3</b></td>
<td><strong>Collections</strong>
The <code>posts/</code> directory is the default collection in Roq, it is optional. It holds content files for blog posts or similar structured documents. You can configure multiples collections (recipes, events, …​).</td>
</tr>
<tr>
<td><i class="conum" data-value="4"></i><b>4</b></td>
<td><strong>Additional pages</strong>
You may provide additional pages files like <code>roq-page.md</code> outside a collection. You can also use sub-directories which will be part of the resulting path.</td>
</tr>
<tr>
<td><i class="conum" data-value="5"></i><b>5</b></td>
<td><strong>Index File</strong>
The <code>index.html</code> file is required and serves as the homepage. It provides site-wide data using FrontMatter.</td>
</tr>
<tr>
<td><i class="conum" data-value="6"></i><b>6</b></td>
<td><strong>Static Files</strong>
The <code>public/</code> directory holds static files, such as images, CSS, or JavaScript files. These files will not be processed.</td>
</tr>
<tr>
<td><i class="conum" data-value="7"></i><b>7</b></td>
<td><strong>Templates</strong>
The <code>templates/</code> directory is optional as templates can be provided by a theme. It contains Qute templates for partials and layouts.</td>
</tr>
<tr>
<td><i class="conum" data-value="8"></i><b>8</b></td>
<td><strong>Qute Partials</strong>
The <code>partials/</code> directory contains reusable Qute template fragments, such as <code>head.html</code> and <code>pagination.html</code>, which can be included in layouts.</td>
</tr>
<tr>
<td><i class="conum" data-value="9"></i><b>9</b></td>
<td><strong>Layouts</strong>
The <code>layouts/</code> directory defines the structure for pages and documents. For example:
<div class="ulist">
<ul>
<li>
<p><code>base.html</code> is the main layout.</p>
</li>
<li>
<p><code>page.html</code> and <code>post.html</code> are specific layouts for pages and posts.</p>
</li>
</ul>
</div></td>
</tr>
<tr>
<td><i class="conum" data-value="10"></i><b>10</b></td>
<td><strong>Build files</strong>
The build file such as a <code>pom.xml</code> is needed to configure the build. It contains dependencies for your site such as theme and plugins.</td>
</tr>
</tbody></table>
</div>
</div>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions