sync with astro-big-doc

added astro home control screenshot

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

@@ -7,16 +7,15 @@ const rootdir = process.cwd()
 
 const outdir = (process.env.OUT_DIR==null)?"dist":process.env.OUT_DIR
 const base = (process.env.PUBLIC_BASE==null)?"":process.env.PUBLIC_BASE
-const contentdir = join(rootdir,"content")
-const structuredir = join(rootdir,".structure")
+const structuredir = (process.env.STRUCTURE==null)?join(rootdir,".structure"):process.env.STRUCTURE
+const contentdir = (process.env.CONTENT==null)?join(rootdir,"content"):process.env.CONTENT
 
 const config = {
     rootdir: rootdir,
     outDir: outdir,
     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,8 +31,8 @@ config.collect_content = {
     rootdir:config.rootdir,
     contentdir:contentdir,
     content_ext:["md"],
-    assets_ext:["svg","webp","png","jpeg","jpg","xlsx","glb","hdr","ico"],
-    outdir:structuredir,
+    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/home/readme.md

@@ -1,5 +1,5 @@
 ---
-title : Smart Home Hardware Software Development
+title: Home
 description: Home Automation Frameworks, Microcontrollers, Wireless Networks, Applications, with tutorials and references to the documentation of protocol standards and hardware manufacturers
 date: 2020-10-06T08:48:23+00:00
 lastmod: 2021-02-14T08:00:00+00:00

content/web/astro-home.md

@@ -0,0 +1,10 @@
+# Astro Home Control
+
+* Home Automation MQTT Client running on Astro as SSR
+* Client page update with Server Sent Events
+* Custom switches with feedback and custom sliders with animated SVG
+
+:button[]{label="Github repo" link="https://github.com/MicroWebStacks/astro-home-control" icon="github"}
+
+![screenshot](./astro-home-control.png)
+

integrations/create_menu.js

@@ -1,29 +1,11 @@
-import {dirname, join} from 'path'
-import { exists, load_yaml, load_yaml_abs,save_json } from '../src/libs/utils.js';
+import {join} from 'path'
+import { exists, load_json_abs, load_yaml_abs,save_json } from '../src/libs/utils.js';
 import { section_from_pathname,add_base } from '../src/libs/assets.js';
 import {pages_list_to_tree} from './process_menu.js'
 import {getDocuments} from 'content-structure'
 import {createHash} from 'crypto'
 import { config } from '../config.js';
-import { readdir, stat } from 'fs/promises';
-import path from 'path';
-
-function content_entry_to_level(entry){
-    const base_level = 1
-    let level = 0
-    const directory = dirname(entry.path)
-    if(directory != ""){
-        //console.log(directory.split('/'))
-        const path_level = directory.split('/').length
-        if(entry.url_type == "file"){
-            level = base_level + path_level + 1
-        }else{
-            level = base_level + path_level
-        }
-    }
-    //console.log(`level:(${level}) path:${entry.path}`)
-    return level
-}
+import {dirname} from 'path';
 
 async function get_section_menu(section,raw_menu){
     let result_items = []
@@ -41,8 +23,8 @@ async function get_section_menu(section,raw_menu){
                 path:       entry.path,
                 url:        entry.url,
                 url_type:   entry.url_type,
+                level:      entry.level,
                 link:(dir != ".")?`${config.base}/${entry.url}`:`${config.base}/${section}/${entry.url}`,
-                level:content_entry_to_level(entry),
                 format: entry.format,
                 order: Object.hasOwn(entry,"order")?entry.order:100
             }
@@ -64,42 +46,23 @@ async function get_section_menu(section,raw_menu){
     return result_items
 }
 
-async function create_raw_menu(content_path){
-    const items = await readdir(content_path, { withFileTypes: true });
-    const directories = items.filter(dirent => dirent.isDirectory());
-    // Map the directories to your desired structure
-    const structure = directories.map(dir => ({
-        label: dir.name.charAt(0).toUpperCase() + dir.name.slice(1),
-        link: `/${dir.name}`,
+async function create_raw_menu(content_path,document_list){
+    const top_items = document_list.filter((item)=> item.level === 2).sort((a,b)=> a.order-b.order)
+    const sorted_items = top_items.map(entry => ({
+        label: entry.title,
+        link: `/${entry.url}`,
         autogenerate: {
-            directory: dir.name
+            directory: dirname(entry.path)
         }
     }));
 
-    let homeIndex = -1;
-    const homeStructure = structure.map((entry, index) => {
-        if (entry.link === "/home") {
-            homeIndex = index; // Capture the index of the modified entry
-            return {
-                label: entry.label,
-                link: "/"
-            };
-        }
-        return entry;
-    });
-
-    // If "/home" was modified, move it to the beginning of the array
-    if (homeIndex !== -1) {
-        const [homeEntry] = homeStructure.splice(homeIndex, 1); // Remove the entry
-        homeStructure.unshift(homeEntry); // Unshift to the beginning
-    }
-
+    const home_items = sorted_items.map(item => item.link === '/home' ? { ...item, link: '/' } : item);
     const icons_file = join(content_path,"icons.yaml")
     if(await exists(icons_file)){
         const icons_list = await load_yaml_abs(icons_file)
-        homeStructure.push(...icons_list)
+        home_items.push(...icons_list)
     }
-    return homeStructure;
+    return home_items;
 }
 
 async function create_menu(collect_config){
@@ -108,7 +71,8 @@ async function create_menu(collect_config){
     if(await exists(menu_file)){
         raw_menu = await load_yaml_abs(menu_file)
     }else{
-        raw_menu = await create_raw_menu(join(collect_config.contentdir))
+        const document_list = await load_json_abs(join(collect_config.outdir,"document_list.json"))
+        raw_menu = await create_raw_menu(collect_config.contentdir,document_list)
     }
     const base_menu = JSON.parse(JSON.stringify(raw_menu))
     for(let menu_entry of base_menu){

package.json

@@ -14,7 +14,7 @@
     "@google/model-viewer": "^3.4.0",
     "@svgdotjs/svg.js": "^3.1.2",
     "astro": "^4.5.10",
-    "content-structure": "^1.1.1",
+    "content-structure": "^1.1.8",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "datatables.net-dt": "^1.13.7",
@@ -31,7 +31,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",
@@ -42,5 +41,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,13 @@ 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)
+
+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 +48,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_grid.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

@@ -1,6 +1,7 @@
 ---
 import Highlighter from './Highlighter.astro'
 import Panzoom from '@/components/panzoom/panzoom.astro'
+import { config } from '@/config.js';
 
 export interface Props {
     hash:string;
@@ -9,7 +10,7 @@ export interface Props {
 }
 
 const {hash, code, params} = Astro.props as Props;
-const diagram_url = `/codes/${hash}/diagram.svg`
+const diagram_url = `${config.base}/codes/${hash}/diagram.svg`
 let alt = ""
 let title = ""
 if(params && (params.length > 0)){
@@ -33,6 +34,9 @@ if(params && (params.length > 0)){
 .hidden{
     display:none;
 }
+.diagram{
+    background-color: #fff;
+}
 </style>
 
 <script>

src/components/markdown/code/Highlighter.astro

@@ -76,14 +76,15 @@ pre{
 </style>
 
 <script>
+import {config} from '@/client_config.js'
 const buttons = document.querySelectorAll('button.copy-btn');
 buttons.forEach(button => {
     button.addEventListener('click', async () => {
         const hash = button.getAttribute('data-hash');
         const message = document.querySelector(`.copy-message[data-hash="${hash}"]`);
 
         try {
-            const response = await fetch(`/codes/${hash}/code.txt`);
+            const response = await fetch(`${config.base}/codes/${hash}/code.txt`);
             if (response.ok) {
                 const codeText = await response.text();
                 await navigator.clipboard.writeText(codeText);

src/components/markdown/code/LinkCode.astro

@@ -0,0 +1,29 @@
+---
+import Kroki from './Kroki.astro'
+import kroki from './kroki.yaml'
+import {join} from 'path'
+import {config} from '@/config.js'
+import {readFile} 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} />
+}