added diagram from link

README.md

@@ -198,3 +198,6 @@ Express authentication variables
 
 # Issues
 - title conflicting with path, url and slug in `create_raw_menu()`
+- diagrams
+  - generate diagrams from image url and extension
+  - graph properties through code block arguments

astro.config.mjs

@@ -1,12 +1,15 @@
 import { defineConfig } from 'astro/config';
 import {config} from './config.js'
 import {collect_content} from './integrations/integration-content-structure.js'
-
+import yaml from '@rollup/plugin-yaml';
 
 export default defineConfig({
   integrations: [collect_content(config.collect_content)],
   output: "static",
   outDir: config.outDir,
   base: config.base,
-  trailingSlash: 'ignore'
+  trailingSlash: 'ignore',
+  vite: {
+    plugins: [yaml()]
+  }
 });

config.js

@@ -16,7 +16,6 @@ const config = {
     base: base,
     content_path: contentdir,
     code_path: `${rootdir}/${outdir}/codes`,
-    plantuml_server: "https://www.plantuml.com/plantuml/svg",
     kroki_server: "https://kroki.io",
     client_menu:true,
     highlighter:{
@@ -32,7 +31,7 @@ config.collect_content = {
     rootdir:config.rootdir,
     contentdir:contentdir,
     content_ext:["md"],
-    assets_ext:["svg","webp","png","jpeg","jpg","xlsx","glb","hdr","ico"],
+    assets_ext:["svg","webp","png","jpeg","jpg","xlsx","glb","hdr","ico","puml"],
     outdir:structuredir,//dist does not persist before build
     out_menu:"public/menu.json",//used by src\layout\client_nav_menu.js
     debug:false

content/examples/code/readme.md

@@ -1 +1,16 @@
-code
+---
+title: Code Blocks
+order: 1
+---
+
+# long code
+
+```js
+console.log("very long sentence with thousand words. very long sentence with thousand words. very long sentence with thousand words. very long sentence with thousand words.")
+```
+
+# generic language code
+
+```
+text code = alpha
+```

content/examples/diagrams/readme.md

@@ -0,0 +1,72 @@
+---
+title: Code Diagrams
+order: 2
+---
+# Block Diagram
+
+```blockdiag
+blockdiag {
+  Kroki -> is -> Awesome;
+}
+```
+# Plantuml
+## Sequence Diagram
+```plantuml
+@startuml
+left to right direction
+skinparam packageStyle rectangle
+skinparam monochrome true
+actor customer
+actor clerk
+rectangle checkout {
+  customer -- (checkout)
+  (checkout) .> (payment) : include
+  (help) .> (checkout) : extends
+  (checkout) -- clerk
+}
+@enduml
+```
+
+## Mind Map
+
+```plantuml my-mind-map
+@startmindmap
+skinparam monochrome true
++ OS
+++ Ubuntu
++++ Linux Mint
++++ Kubuntu
++++ Lubuntu
++++ KDE Neon
+++ LMDE
+++ SolydXK
+++ SteamOS
+++ Raspbian
+-- Windows 95
+-- Windows 98
+-- Windows NT
+--- Windows 8
+--- Windows 10
+@endmindmap
+```
+
+## Work Breakout
+Diagrams can also be linked from a separate file like this
+
+```md
+[Work Breakout](./work-breakout.puml)
+```
+Which will generate the same view as if it was embedded in a code block
+
+[Work Breakout](./work-breakout.puml)
+
+# Mermaid
+
+```mermaid
+graph TD
+  A[ Anyone ] -->|Can help | B( Go to github.com/yuzutech/kroki )
+  B --> C{ How to contribute? }
+  C --> D[ Reporting bugs ]
+  C --> E[ Sharing ideas ]
+  C --> F[ Advocating ]
+```

content/examples/diagrams/work-breakout.puml

@@ -0,0 +1,14 @@
+@startwbs
+skinparam monochrome true
+* Business Process Modelling WBS
+** Launch the project
+*** Complete Stakeholder Research
+*** Initial Implementation Plan
+** Design phase
+*** Model of AsIs Processes Completed
+**** Model of AsIs Processes Completed1
+**** Model of AsIs Processes Completed2
+*** Measure AsIs performance metrics
+*** Identify Quick Wins
+** Complete innovate phase
+@endwbs

content/examples/gallery/readme.md

@@ -1,6 +1,6 @@
 ---
 title: Gallery
-order: 2
+order: 3
 ---
 # Gallery
 

content/home/readme.md

@@ -244,7 +244,7 @@ for item in my_list:
 # Links
 * external link Astro Markdown Render [github repo](https://github.com/MicroWebStacks/astro-markdown-render) link is external and opens in a new page.
 
-* Link to the [Panzoom](/blog/panzoom) entry opens in the same page
+* Link to the [Panzoom](/examples/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.

integrations/create_menu.js

@@ -58,7 +58,6 @@ async function create_raw_menu(content_path,document_list){
     }));
 
     const home_items = sorted_items.map(item => item.link === '/home' ? { ...item, link: '/' } : item);
-    console.log(home_items)
     const icons_file = join(content_path,"icons.yaml")
     if(await exists(icons_file)){
         const icons_list = await load_yaml_abs(icons_file)

package.json

@@ -15,7 +15,7 @@
     "@google/model-viewer": "^3.4.0",
     "@svgdotjs/svg.js": "^3.1.2",
     "astro": "^4.5.10",
-    "content-structure": "^1.1.4",
+    "content-structure": "^1.1.7",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "datatables.net-dt": "^1.13.7",
@@ -32,7 +32,6 @@
     "passport": "^0.6.0",
     "passport-github": "^1.1.0",
     "photoswipe": "^5.4.3",
-    "plantuml-encoder": "^1.4.0",
     "remark": "^15.0.1",
     "sharp": "^0.33.0",
     "shikiji": "^0.6.10",
@@ -43,5 +42,8 @@
   },
   "engines": {
     "pnpm": ">=8.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-yaml": "^4.1.2"
   }
 }

src/components/markdown/Link.astro

@@ -1,9 +1,11 @@
 ---
-import {relAssetToUrl} from '@/libs/assets.js'
+import {relAssetToUrl, file_ext} from '@/libs/assets.js'
 import {toHast} from 'mdast-util-to-hast'
 import {toHtml} from 'hast-util-to-html'
 import ModelViewer from './model/ModelViewer.astro';
 import TableXLSX from './table/TableXLSX.astro';
+import LinkCode from './code/LinkCode.astro';
+import kroki from './code/kroki.yaml'
 
 export interface Props {
     node: object;
@@ -20,9 +22,15 @@ if(!external){
     src = await relAssetToUrl(node.url,dirpath)
   }
 }
-const is_model3d = node.url.endsWith(".glb")
-const is_table = node.url.endsWith(".xlsx")
-const is_link = !is_model3d && !is_table
+
+const ext = file_ext(node.url)
+console.log("-----------------------")
+console.log(ext)
+
+const is_model3d = (ext === "glb")
+const is_table = (ext === "xlsx")
+const is_diagram = Object.keys(kroki.formats).includes(ext)
+const is_link = !is_model3d && !is_table && !is_diagram
 let title = ""
 if((node.children.length>0)&&(node.children[0].type == "text")){
   title = node.children[0].value
@@ -42,7 +50,9 @@ if((node.children.length>0)&&(node.children[0].type == "text")){
         ))}
   </a>
 }
-
+{is_diagram &&
+  <LinkCode ext={ext} url={node.url} dirpath={dirpath} />
+}
 <style>
 a{
     color:rgb(38, 102, 166)

src/components/markdown/code/Code.astro

@@ -1,11 +1,11 @@
 ---
 import Highlighter from './Highlighter.astro'
-import Plantuml from './Plantuml.astro'
 import Kroki from './Kroki.astro'
 import ModelViewerCode from '../model/ModelViewerCode.astro';
 import Cards from '../cards/Cards.astro'
 import Gallery from '../../gallery/gallery.astro';
 import Swiper from '../../swiper/swiper.astro'
+import kroki from './kroki.yaml'
 
 export interface Props {
     node: object;
@@ -18,25 +18,19 @@ const code = node.value
 const language = node.lang
 const params = node.meta?node.meta.split(' '):[]
 
-const custom_languages = ["plantuml","mermaid","blockdiag"]
-
 const yaml_glb      = ((language == "yaml") && (node.meta?.startsWith("glb")))
 const yaml_cards    = ((language == "yaml") && (node.meta?.startsWith("cards")))
 const yaml_gallery  = ((language == "yaml") && (node.meta?.startsWith("gallery")))
 const yaml_swiper  = ((language == "yaml") && (node.meta?.startsWith("swiper")))
+
+const is_diagram = kroki.languages.includes(language)
 const custom_yaml = yaml_glb || yaml_cards || yaml_gallery || yaml_swiper
 
-const other_language = (!custom_languages.includes(language) && !custom_yaml)
+const other_language = (!is_diagram && !custom_yaml)
 ---
-{(language == "plantuml")&&
-    <Plantuml code={code} params={params} />
-}
-{(language == "blockdiag")&&
+{(is_diagram)&&
     <Kroki language={language} code={code} params={params} />
 }
-{(language == "mermaid")&&
-    <Kroki language="mermaid" code={code} params={params} />
-}
 {yaml_glb &&
     <ModelViewerCode code={code} dirpath={dirpath}/>
 }

src/components/markdown/code/DiagramCode.astro

@@ -33,6 +33,9 @@ if(params && (params.length > 0)){
 .hidden{
     display:none;
 }
+.diagram{
+    background-color: #fff;
+}
 </style>
 
 <script>

src/components/markdown/code/LinkCode.astro

@@ -0,0 +1,34 @@
+---
+import Highlighter from './Highlighter.astro'
+import Kroki from './Kroki.astro'
+import ModelViewerCode from '../model/ModelViewerCode.astro';
+import Cards from '../cards/Cards.astro'
+import Gallery from '../../gallery/gallery.astro';
+import Swiper from '../../swiper/swiper.astro'
+import kroki from './kroki.yaml'
+import {join,dirname} from 'path'
+import {config} from '@/config.js'
+import {constants, access, mkdir, readFile, writeFile} from 'fs/promises'
+
+export interface Props {
+    ext: string;
+    url: string;
+    dirpath: string;
+}
+
+const { ext, url, dirpath } = Astro.props as Props;
+
+let language = ""
+let code = ""
+const params = []
+
+const is_kroki = Object.keys(kroki.formats).includes(ext)
+if(is_kroki){
+    language = kroki.formats[ext]
+    const abs_file = join(config.content_path,dirpath,url)
+    code = await readFile(abs_file,'utf-8')
+}
+---
+{(is_kroki)&&
+    <Kroki language={language} code={code} params={params} />
+}