8 |
9 | Example taken [here](https://exact.stereobooster.com/).
10 |
11 | **aka** chronology, genealogical tree, layered digraph.
12 |
13 | ## Installation
14 |
15 | **TODO**:
16 |
17 | - [ ] Remove the `Graphviz` component from the repo; need to use `@beoe/astro-graphviz` instead.
18 |
19 | First, install [[graphviz-diagram|Graphviz]]:
20 |
21 | ```astro
22 | // src/components/Timeline.astro
23 | ---
24 | import Graphviz from "./Graphviz.astro";
25 |
26 | type TimelineItem = {
27 | id: string;
28 | year: number;
29 | tooltip?: string;
30 | class?: string;
31 | label?: string;
32 | url?: string;
33 | in?: string[];
34 | out?: string[];
35 | };
36 |
37 | interface Props {
38 | items: TimelineItem[];
39 | /**
40 | * https://www.graphviz.org/doc/info/attrs.html#d:rankdir
41 | */
42 | direction?: "TB" | "BT" | "LR" | "RL";
43 | }
44 |
45 | const { items, direction } = Astro.props;
46 |
47 | const byYears: Record...
` 87 | - `...
`
88 |
89 | ## Sites to Test Meta Tags
90 |
91 | - [Google Rich Results Test](https://search.google.com/test/rich-results)
92 | - [Schema.org Validator](https://validator.schema.org/)
93 |
94 | ## TODO
95 |
96 | - [ ] Plugin that places sitemap URL in `robots.txt` (`astro-robots-txt`)
97 | - [ ] Use the "updated at" date in the sitemap (so search engines would rescan those pages first)
98 | - Maybe I can use BrainDb to generate it?
99 | - [ ] Use LLM to generate descriptions
100 | ```js
101 | import { pipeline } from "@huggingface/transformers";
102 | const summarizer = await pipeline("summarization");
103 | const summary = await summarizer("Some text here");
104 | ```
105 |
--------------------------------------------------------------------------------
/packages/website/astro.config.mjs:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "astro/config";
2 | import starlight from "@astrojs/starlight";
3 | import { starlightKatex } from "starlight-katex";
4 | import Icons from "unplugin-icons/vite";
5 |
6 | import { getCache } from "@beoe/cache";
7 | import { rehypeMermaid } from "@beoe/rehype-mermaid";
8 | import { rehypeGraphviz } from "@beoe/rehype-graphviz";
9 | import { rehypeGnuplot } from "@beoe/rehype-gnuplot";
10 |
11 | import starlightDigitalGarden from "starlight-digital-garden";
12 |
13 | const cache = await getCache();
14 | const diagramConfigs = {
15 | cache,
16 | strategy: "file",
17 | darkScheme: "class",
18 | fsPath: "public/beoe",
19 | webPath: "/beoe",
20 | };
21 |
22 | // https://astro.build/config
23 | export default defineConfig({
24 | site: "https://astro-digital-garden.stereobooster.com",
25 | integrations: [
26 | starlight({
27 | title: "Astro Digital Garden",
28 | social: [
29 | {
30 | icon: "github",
31 | label: "GitHub",
32 | href: "https://github.com/stereobooster/astro-digital-garden",
33 | },
34 | ],
35 | editLink: {
36 | baseUrl:
37 | "https://github.com/stereobooster/astro-digital-garden/edit/main/packages/website/",
38 | },
39 | lastUpdated: true,
40 | sidebar: [
41 | { label: "Introduction", link: "/" },
42 | {
43 | label: "Recipes",
44 | // collapsed: true,
45 | autogenerate: {
46 | directory: "recipes",
47 | },
48 | },
49 | ],
50 | customCss: ["./src/styles/custom.css"],
51 | components: {
52 | TableOfContents: "./src/components/TableOfContents.astro",
53 | Head: "./src/components/Head.astro",
54 | // Sidebar: "./src/components/Sidebar.astro",
55 | },
56 | // If you want to fork this repository for personal use,
57 | // please remove following lines for analytics
58 | head: import.meta.env.PROD
59 | ? [
60 | {
61 | tag: "script",
62 | attrs: {
63 | src: "https://eu.umami.is/script.js",
64 | "data-website-id": "2d34b0d4-893c-4348-a3e4-1f489300117c",
65 | defer: true,
66 | },
67 | },
68 | {
69 | tag: "script",
70 | attrs: {
71 | src: "https://beampipe.io/js/tracker.js",
72 | "data-beampipe-domain":
73 | "astro-digital-garden.stereobooster.com",
74 | defer: true,
75 | async: true,
76 | },
77 | },
78 | ]
79 | : undefined,
80 | plugins: [
81 | starlightKatex(),
82 | starlightDigitalGarden({ remarkDataview: true }),
83 | ],
84 | }),
85 | ],
86 | markdown: {
87 | remarkRehype: {
88 | // https://github.com/remarkjs/remark-rehype?tab=readme-ov-file#options
89 | footnoteBackContent: "⤴",
90 | // footnoteLabel: "Footnotes",
91 | // footnoteLabelTagName: "h2",
92 | },
93 | // remarkPlugins: [],
94 | rehypePlugins: [
95 | [rehypeMermaid, diagramConfigs],
96 | [rehypeGnuplot, diagramConfigs],
97 | [rehypeGraphviz, { class: "not-content", cache }],
98 | ],
99 | },
100 | vite: {
101 | plugins: [
102 | Icons({
103 | compiler: "astro",
104 | }),
105 | ],
106 | },
107 | });
108 |
--------------------------------------------------------------------------------
/packages/website/src/content/docs/recipes/graphviz-diagram.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Graphviz diagram
3 | tags: [markdown, code-fences, diagram]
4 | description: Graphviz inside "code fences" converted to diagrams - static SVGs, no client-side JavaScript
5 | ---
6 |
7 | ```dot alt="example of the Graphviz diagram"
8 | digraph finite_state_machine {
9 | bgcolor="transparent";
10 | fontname="Helvetica,Arial,sans-serif";
11 | node [fontname="Helvetica,Arial,sans-serif"]
12 | edge [fontname="Helvetica,Arial,sans-serif"]
13 | rankdir=LR;
14 | node [shape = doublecircle]; 0 3 4 8;
15 | node [shape = circle];
16 | 0 -> 2 [label = "SS(B)"];
17 | 0 -> 1 [label = "SS(S)"];
18 | 1 -> 3 [label = "S($end)"];
19 | 2 -> 6 [label = "SS(b)"];
20 | 2 -> 5 [label = "SS(a)"];
21 | 2 -> 4 [label = "S(A)"];
22 | 5 -> 7 [label = "S(b)"];
23 | 5 -> 5 [label = "S(a)"];
24 | 6 -> 6 [label = "S(b)"];
25 | 6 -> 5 [label = "S(a)"];
26 | 7 -> 8 [label = "S(b)"];
27 | 7 -> 5 [label = "S(a)"];
28 | 8 -> 6 [label = "S(b)"];
29 | 8 -> 5 [label = "S(a)"];
30 | }
31 | ```
32 |
33 | Example taken [here](https://graphviz.org/Gallery/directed/fsm.html)
34 |
35 | ## About
36 |
37 | [Graphviz](https://graphviz.org/) is open-source graph visualization software. On one hand, it is a general diagramming tool, so it doesn't have a DSL to directly express specific diagrams (let's say a Hasse diagram or an ER diagram). On the other hand, if you don't have a better solution, you can always bend Graphviz to create the desired diagram (though it can be tedious sometimes).
38 |
39 | ## Installation
40 |
41 | import { Steps } from "@astrojs/starlight/components";
42 |
43 | 56 | {tasks[0].from().title()} 57 |
-
58 | {tasks.map((task) => (
59 |
- 60 | 68 | 69 | ))} 70 |
-
38 | {
39 | tagsSorted.map((tag) => (
40 |
-
41 | {tag} ({docsByTags.get(tag)?.length})
42 |
-
43 | {docsByTags.get(tag)?.map((doc) => (
44 |
- 45 | {doc.data.title} 46 | 47 | ))} 48 |
50 | ))
51 | }
52 |