spike: use astro to render kestra.io docs

app.vue

@@ -24,11 +24,8 @@
                 href: "/favicon-192x192.png",
             },
         ],
-        titleTemplate: (titleChunk) => {
-            return titleChunk &&
-                titleChunk != "Kestra, Open Source Declarative Data Orchestration"
-                ? `${titleChunk}`
-                : "Kestra, Open Source Declarative Data Orchestration";
+        titleTemplate: (titleChunk: string | undefined) => {
+            return titleChunk ?? "Kestra, Open Source Declarative Data Orchestration";
         },
     });
 </script>

assets/styles/app.scss

@@ -5,6 +5,10 @@ html {
     scroll-padding-top: var(--top-bar-height);
 }
 
+pre {
+    color: white;
+}
+
 body {
     min-width: 320px;
     min-height: 100%;

assets/styles/components/header.scss

@@ -335,6 +335,8 @@ nav {
     transform: translateY(0);
     max-height: 100%;
     width: 100vw;
+    background-color: $menu-bg;
+    transition: background-color 250ms ease-in-out;
 
     @keyframes chevron-in {
         0% {
@@ -363,16 +365,7 @@ nav {
     &.open {
         @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
             & {
-                background-color: $menu-bg;
-                transition: background-color 250ms ease-in-out;
-            }
-        }
-
-        &.open {
-            @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
-                & {
-                    background-color: $white;
-                }
+                background-color: $white;
             }
         }
     }

assets/styles/docs.scss

@@ -196,6 +196,7 @@ $bd-gutter-x: 3rem;
 }
 
 .bd-content {
+    #{--bs-heading-color}: white;
     grid-area: content;
     min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
 
@@ -235,7 +236,7 @@ $bd-gutter-x: 3rem;
 
         @media only screen and (max-width: 768px) {
             padding-bottom: 56.25%;
-            
+
             iframe {
                 width: 100%;
                 height: 100%;
@@ -292,28 +293,137 @@ $bd-gutter-x: 3rem;
     }
 
     code {
-        background: #161617;
         border: 1px solid #252526;
         border-radius: var(--bs-border-radius);
         color: #b9b9ba;
         padding: 0 .25rem;
     }
 
-    .code-block, .doc-alert {
+    .code-block, .doc-alert, .astro-code {
         background-color: $black-2;
         code {
             border: 0;
             color: $white;
         }
     }
 
-    .code-block {
+    .code-block, .astro-code {
         code {
             padding: 0;
         }
     }
 
-    .doc-alert {
+    @import "../../assets/styles/_variable.scss";
+
+    .astro-code {
+        background-color: $black-2;
         border: $block-border;
+        padding: 1.25rem 1.5rem;
+        border-radius: var(--bs-border-radius-lg);
+        color: var(--bs-white);
+        position: relative;
+        margin-bottom: 1em;
+        overflow: hidden;
+        code .line {
+            white-space: pre-wrap;
+        }
+
+        .language {
+            font-size: 0.75rem;
+        }
+
+        .language, .copy {
+            color: var(--kestra-io-neutral-gray700) !important;
+            position: absolute;
+            top: 1.25rem;
+            right: 1.25rem;
+        }
+
+        .copy {
+            border: none;
+            background: none;
+
+            & .material-design-icon {
+                &, & * {
+                    height: 1.125rem !important;
+                    width: 1.125rem !important;
+                }
+            }
+        }
+
+        #copied-tooltip {
+            border-radius: $border-radius;
+            background: $gray-500;
+            padding: 4px 8px;
+            font-size: $font-size-xs;
+            margin-right: $popper-margin !important;
+
+            #arrow,
+            #arrow::before {
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                background: inherit;
+            }
+
+            #arrow {
+                visibility: hidden;
+                right: -4px;
+            }
+
+            #arrow::before {
+                visibility: visible;
+                content: '';
+                transform: rotate(45deg);
+            }
+        }
+    }
+
+    .doc-alert {
+        border: 1px solid;
+        border-left-width: 5px !important;
+        padding: 1rem;
+        margin-bottom: 1rem;
+        border-radius: 0.25rem;
+
+        > * {
+            margin: 0;
+        }
+        &.alert-danger {
+            border-color: var(--ks-border-error);
+            color: var(--ks-content-error);
+            background-color: var(--ks-background-error);
+        }
+
+        &.alert-warning {
+            border-color: var(--ks-border-warning);
+            color: var(--ks-content-warning);
+            background-color: var(--ks-background-warning);
+        }
+
+        &.alert-info {
+            border-color: var(--ks-border-info);
+            color: var(--ks-content-info);
+            background-color: var(--ks-background-info);
+        }
+
+        &.alert-success {
+            border-color: var(--ks-border-success);
+            color: var(--ks-content-success);
+            background-color: var(--ks-background-success);
+        }
+    }
+
+    .ks-doc-next-link{
+        &:hover {
+            a, a:hover {
+                color: var(--bs-white) !important;
+            }
+        }
+
+        p {
+            display: inline;
+            margin-bottom: 0 !important;
+        }
     }
 }

astro.config.mjs

@@ -0,0 +1,74 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import * as path from 'path';
+import cloudflare from '@astrojs/cloudflare';
+import vue from '@astrojs/vue';
+import mdx from '@astrojs/mdx';
+import expressiveCode from 'astro-expressive-code';
+
+import remarkDirective from 'remark-directive';
+// @ts-expect-error no types provided by package
+import remarkLinkRewrite from 'remark-link-rewrite';
+import remarkCustomElements from './utils/remark-custom-elements/index.mjs';
+import generateId from './utils/generateId';
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname.replace(/^\/([A-Za-z]:)/, '$1'));
+
+// https://astro.build/config
+export default defineConfig({
+  output: 'server',
+  adapter: cloudflare({
+    imageService: 'cloudflare'
+  }),
+
+  integrations: [
+    vue({
+        appEntrypoint: './src/_main.ts'
+    }),
+    expressiveCode({
+        defaultProps: {
+            wrap: true,
+            overridesByLang: {
+                'bash,sh,zsh,shell': {
+                    frame: 'none',
+                }
+            }
+        }
+    }),
+    mdx()
+  ],
+  markdown: {
+    remarkPlugins: [
+      remarkDirective,
+      remarkCustomElements,
+      // when internal docs links we point to real files
+      // while in the docs generated we want to point to urls with generated ids
+      [remarkLinkRewrite, {
+        /** @param {string} url */
+        replacer(url) {
+          if (url.startsWith('.')) {
+              return generateId({entry: url})
+          }
+          return url;
+        }
+      }]
+    ]
+  },
+  vite: {
+    resolve:{
+        alias: {
+            "#mdc-imports": path.resolve(__dirname, "node_modules/@kestra-io/ui-libs/stub-mdc-imports.js"),
+            "#mdc-configs": path.resolve(__dirname, "node_modules/@kestra-io/ui-libs/stub-mdc-imports.js"),
+        },
+    },
+    css: {
+        preprocessorOptions: {
+            scss: {
+                // silence invasive bootstrap warnings
+                silenceDeprecations: ["color-functions", "global-builtin", "import"],
+            },
+        },
+    },
+  },
+});

components/blueprints/ListCard.vue

@@ -21,7 +21,9 @@
 </template>
 
 <script>
+    import CommonTaskIcon from "../common/TaskIcon.vue"
     export default {
+        components: { CommonTaskIcon },
         props: {
             blueprint: {
                 type: Object,

components/common/SocialsList.vue

@@ -49,13 +49,14 @@
         </nav>
     </div>
 </template>
-<script setup>
+<script lang="ts" setup>
+    import { computed } from "vue";
     import Slack from "vue-material-design-icons/Slack.vue";
     import Youtube from "vue-material-design-icons/Youtube.vue";
     import Github from "vue-material-design-icons/Github.vue";
     import Linkedin from "vue-material-design-icons/Linkedin.vue";
-    import Twitter from "../components/icons/TwitterXIcon.vue";
-    import BlueSky from "../components/icons/BlueSkyIcon.vue";
+    import Twitter from "../icons/TwitterXIcon.vue";
+    import BlueSky from "../icons/BlueSkyIcon.vue";
 
     const props = defineProps({
         page: {

components/common/TaskIcon.vue

@@ -4,8 +4,9 @@
     </div>
 </template>
 
-<script setup>
-    const {$bootstrap} = useNuxtApp()
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+    // const {$bootstrap} = useNuxtApp()
 
     const props = defineProps({
         cls: {
@@ -23,20 +24,20 @@
 
     const root = ref(null)
 
-    onMounted(() => {
-        if (process.client) {
-            new $bootstrap.Tooltip(root.value);
-        }
-    });
+    // onMounted(() => {
+    //     if (process.client) {
+    //         new $bootstrap.Tooltip(root.value);
+    //     }
+    // });
 
-    onBeforeUnmount(() => {
-        if (process.client) {
-            const tooltip = $bootstrap.Tooltip.getInstance(root.value);
-            if (tooltip) {
-                tooltip.dispose();
-            }
-        }
-    });
+    // onBeforeUnmount(() => {
+    //     if (process.client) {
+    //         const tooltip = $bootstrap.Tooltip.getInstance(root.value);
+    //         if (tooltip) {
+    //             tooltip.dispose();
+    //         }
+    //     }
+    // });
 
     const generateTagName = () => {
       const splittedName = props.cls.split(".");

components/community/Community.vue

@@ -101,7 +101,7 @@ import Star from 'vue-material-design-icons/Star.vue'
 import DirectionsFork from 'vue-material-design-icons/DirectionsFork.vue'
 import BugOutline from 'vue-material-design-icons/BugOutline.vue'
 import AccountGroupOutline from 'vue-material-design-icons/AccountGroupOutline.vue'
-import { useApi } from '~/composables/useApi.js'
+import { useApi } from '../../composables/useApi'
 
 interface GitHubMetrics {
     stars: number
@@ -122,7 +122,7 @@ const contributors = ref<any[] | undefined>(undefined)
 const fetchData = async (): Promise<void> => {
     try {
         const githubResponse = await $fetch<GitHubResponse>('/api/github')
-        
+
         const [metricsResponse, contributorsResponse] = await Promise.all([
             api.get('/communities/github/metrics'),
             api.get('/communities/github/contributors')
@@ -135,7 +135,7 @@ const fetchData = async (): Promise<void> => {
             pullRequests: (metricsResponse as any).data?.pullRequests,
             commits: (metricsResponse as any).data?.commits
         }
-        
+
         contributors.value = (contributorsResponse as any).data
     } catch (error) {
         contributors.value = []

components/community/Contributors.vue

@@ -50,7 +50,7 @@
 
 <script>
     import Section from '../../components/layout/Section.vue';
-    import {useApi} from "~/composables/useApi.js";
+    import {useApi} from "~/composables/useApi.ts";
 
     export default {
         components: {Section},