@e280/quay/x/logic/aspects/codex/example.js

File-browser and outliner UI for the web

import { Codex } from "./codex.js";
// we create a codex that uses our schema, and specifies these icons
const codex = Codex.setup({
    folder: { icon: "📁" },
    file: { icon: "📄" },
});
// let's create a folder with some crap
const folder = codex.create("folder", { label: "project" });
const readme = codex.create("file", { label: "README.md" });
const changelog = codex.create("file", { label: "CHANGELOG.md" });
// let's create a subfolder with more crap
const src = codex.create("folder", { label: "src" });
const index = codex.create("file", { label: "index.ts" });
const types = codex.create("file", { label: "types.ts" });
// we attach the folder as the root, and attach its children
codex.root(folder)
    .attach(readme)
    .attach(changelog)
    .attach(src); // <-- this is the subfolder
// and we attach the subfolder items to it
src
    .attach(index)
    .attach(types);
//                   we can crawl any folder!
//                                    👇
for (const [item, ancestors] of folder.crawl()) {
    const indent = "  ".repeat(ancestors.length);
    const specimen = item.specimen;
    const label = item.kind === "folder"
        ? specimen.label + "/"
        : specimen.label;
    console.log(indent + label);
}
// project/
//   README.md
//   CHANGELOG.md
//   src/
//     index.ts
//     types.ts
//# sourceMappingURL=example.js.map