feat: function template github readme parser

src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte

@@ -7,13 +7,106 @@
     import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
     import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
     import { connectTemplate } from '$lib/wizards/functions/cover.svelte';
+    import { afterUpdate, onMount } from 'svelte';
     import { consoleVariables } from '$routes/console/store';
     import { template } from './store';
     import { app } from '$lib/stores/app';
     import { isServiceLimited } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { functionsList } from '../../store';
 
+    let html = '';
+    let container: HTMLDivElement;
+    onMount(async () => {
+        html = await fetchReadme();
+    });
+
+    afterUpdate(() => {
+        container.querySelectorAll('.anchor')?.forEach((e) => {
+            e.classList.add('u-hide');
+        });
+        container.querySelectorAll('h1').forEach((e) => {
+            e.classList.add('heading-level-4', 'common-section');
+        });
+        container.querySelectorAll('h2').forEach((e) => {
+            e.classList.add('heading-level-5', 'u-margin-block-start-16');
+        });
+        container.querySelectorAll('h3').forEach((e) => {
+            e.classList.add('heading-level-6', 'u-margin-block-start-16');
+        });
+        container.querySelectorAll('h4').forEach((e) => {
+            e.classList.add('heading-level-7', 'u-margin-block-start-8');
+        });
+        container.querySelectorAll('p').forEach((e) => {
+            e.classList.add('u-margin-block-start-8');
+        });
+        container.querySelectorAll('ul').forEach((e) => {
+            e.classList.add('u-margin-block-start-8', 'list');
+        });
+        container.querySelectorAll('li').forEach((e) => {
+            e.classList.add('list-item');
+        });
+        container.querySelectorAll('strong').forEach((e) => {
+            e.classList.add('u-bold');
+        });
+
+        container.querySelectorAll('.snippet-clipboard-content').forEach((e) => {
+            e.classList.add('box', 'u-margin-block-start-8', 'u-min-width-0');
+        });
+        container.querySelectorAll('.highlight').forEach((e) => {
+            e.classList.add('box', 'u-margin-block-start-8', 'u-min-width-0');
+        });
+        const table = container.querySelectorAll('table');
+
+        table.forEach((e) => {
+            e.classList.add('table');
+
+            const div1 = document.createElement('div');
+            const div2 = document.createElement('div');
+            div1.classList.add('table-with-scroll', 'u-margin-block-start-16');
+            div2.classList.add('table-wrapper');
+            e.parentNode.insertBefore(div1, e);
+            e.parentNode.insertBefore(div2, e.nextSibling);
+            div1.appendChild(div2);
+            div2.appendChild(e);
+        });
+
+        container.querySelectorAll('thead').forEach((e) => {
+            e.classList.add('table-thead');
+        });
+        container.querySelectorAll('tbody').forEach((e) => {
+            e.classList.add('table-tbody');
+        });
+        container.querySelectorAll('th').forEach((e) => {
+            e.classList.add('table-thead-col', 'eyebrow-heading-3');
+            e.style.cssText = '--p-col-width: 70;';
+        });
+        container.querySelectorAll('tr').forEach((e) => {
+            e.classList.add('table-row');
+        });
+        container.querySelectorAll('td').forEach((e) => {
+            e.classList.add('table-col');
+            e.style.cssText = '--p-col-width: 70;';
+        });
+        container.querySelectorAll('code:not(pre code)').forEach((e) => {
+            e.classList.add('inline-code');
+        });
+    });
+
+    async function fetchReadme() {
+        const runtime = $template.runtimes[0];
+        const url = `https://api.github.com/repos/${$template.providerOwner}/${$template.providerRepositoryId}/contents/${runtime.providerRootDirectory}/README.md`;
+
+        const response = await fetch(url, {
+            headers: {
+                Accept: 'application/vnd.github.html'
+            }
+        });
+
+        const readmeHTML = await response.text();
+        return readmeHTML;
+    }
+
     const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
 
     $: buttonDisabled = isServiceLimited(
@@ -108,6 +201,12 @@
                         buttonEvent="create_function" />
                 </div>
             </Card>
+            <Card>{@html $template.instructions}</Card>
+            <Card>
+                <div bind:this={container}>
+                    {@html html}
+                </div>
+            </Card>
         </section>
     </div>
 </Container>