Astro Big Doc uses Markdown as CMS rendered with Astro components
Images
link to svg image
Simple Image link
Images are encapsulated inside a component that can open them in a Modal full view for Pan and zoom function
will generate this image
×
Advanced Image Directive
In order to give more options, using the image directive allows to pass more arguments from markdown
:image[]{src=./home/astro-markdown-render-small.png alt="Astro Markdown Render" height=200 center}will generate this image height adjusted size. Aspect ratio is conserved even when giving either of width or height. It is also possible to center the image.
SVG Image
×
Gallery
This is a Gallery Astro component, a yaml Code block with metadata 'gallery' is provided with a list of images like this
```yaml pz_gallery
- tree.svg
- gallery-tiger.svg
- gallery-long_diag.svg
- gallery-Linux_kernel_map.svg
- gallery-tiger.svg
- github-dark.png
```will generate this gallery
×
×
×
×
×
×
Cards
It is also possible to create cards from a yaml code block list. The following list where uid points to an existing document of format
markdown or markdown_card```yaml cards
- uid: cards-body.card-1
body: true
width: 300
- uid: cards-body.card-2
body: true
width: 300
```Will generate the following cards
Card 1
hello from card 1
Card 2
hello from card 2
- option 1
- option 2
3D Model viewer
Model Viewer Makrdown plugin
models from https://modelviewer.dev/editor/
From a link
just by inserting a link to a .glb file
[Astronaut](./home/Astronaut.glb)will generate this 3D model
From code
This piece of code using as code language
yaml and code meta-data : glb as follows
×
will generate this 3D model with the provided files.
- poster : allows fast page load, by loading the image only first.
- environment-image : for lighting effect
Tables
Markdown Simple Table
A markdown table like this one
| Column 1 | Column 2 |
|----------|----------|
| Row 1 | Row 1 c2 |
| Row 2 | Row 2 c2 |is a table that has a low number of lines and therfore gets a simple table view
| Column 1 | Column 2 |
|---|
Markdown Data Table
A table with a high number of lines gets a data-table element with filter and pagination
| Name | Age | City |
|---|
XLSX Table
It is also possible to create tables in xlsx format. This link of
.xlsx extension[Table1](./home/Table1.xlsx)will generate this data table
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|
Notes
A note can be created like this and can have markdown inside
:::Note
## Note title
This is a note
:::will produce this
There are multiple types : Note, Tip, Caution, Danger
it can also have a custom title
:::Tip{title="How to solve this"}
This is very easy
:::Caution
Danger
Details
It is possible to hide details inside an open close block like this
:::details{summary="Summary of the details..."}
Detail to hide
:::Will produce this Details block
Summary of the details...
Detail to hide
Code block
The code block offers a
copy button visible on hover over the code.javascript
const count = 0
console.log(count)python
for item in my_list:
print(item) Links
- external link Astro Markdown Render github repo link is external and opens in a new page.
- Link to the Panzoom entry opens in the same page
Diagrams from code
This is a concept where diagrams are generated from a code block that witholds the description needed to generate them. Note these sorts of diagrams are much more informative for automation and LLMs processing than usual bitmaps or vectorial images.
Plantuml
This is a plantuml sequence diagram
×
References
simple reference
this is how you can reference a page
Link to page::<page-uid>
Link to page::examples.svg-panzoomwill produce this
Link to
examples.svg-panzoom
deep path reference
A slug is only unique within a content type, therefore in case of multiple files with the same folder name and title, it is possible to use the automatically generated unique identifier available in the
index.jsonLink to page::<page-uid>
Link to page::deepest2.deepest3will link the correct url of the item in path
folder/trees/image-svg/readme.mdLink to
deepest2.deepest3