Astro Big Doc uses Markdown as CMS rendered with Astro components
Images
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=./astro-markdown-render-small.png alt="Astro Markdown Render" height=200}will generate this image height adjusted image with respect to the aspect ratio
SVG Image
×
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](./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](./Table1.xlsx)will generate this data table
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|
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::image-svgwill produce this
Link to image-svg
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::trees.image-svgwill link the correct url of the item in path
folder/trees/image-svg/readme.mdLink to trees.image-svg