feat: codeTree with links

Author: luizchaves

src/components/CodeTree.astro

@@ -4,19 +4,37 @@ import { resolve } from 'node:path';
 import tree from 'tree-node-cli';
 import { getHTML } from './CodePreview.astro';
 import { prettyCodeOptions } from '../../plugins/rehype-pretty-code-config';
+import { GITHUB_EDIT_URL, GITHUB_PAGES_URL } from '../consts';
 
 export interface Props {
   src?: string;
   content?: string;
+  githubUrl?: boolean;
+  githubPages?: boolean;
+  devContainerUrl?: boolean;
 }
 
-const { src, content } = Astro.props;
+const { src, content, githubUrl, githubPages, devContainerUrl } = Astro.props;
+
+const folder = src.split('/').at(-1);
+
+const githubLink = githubUrl
+  ? `<a href="${GITHUB_EDIT_URL + '/public' + src}" target="blank"><img class="inline m-0" src="https://img.shields.io/badge/Open%20In%20GitHub-181717?style=for-the-badge&logo=github&logoColor=white" alt="Open in GitHub"></a>`
+  : '';
+
+const page = githubPages
+  ? `<a href="${GITHUB_PAGES_URL + src}" target="blank"><img class="inline m-0" src="https://img.shields.io/badge/GitHub%20Pages-181717?style=for-the-badge&logo=github&logoColor=white" alt="Open in GitHub"></a>`
+  : '';
+
+const devContainerLink = devContainerUrl
+  ? `<a href="https://codespaces.new/ifpb/lp2?devcontainer_path=.devcontainer/${folder}/devcontainer.json" target="blank"><img class="inline m-0" src="https://img.shields.io/badge/Open%20In%20Codespaces-181717?style=for-the-badge&logo=github&logoColor=white" alt="Open in Codespaces"></a>`
+  : '';
 
 const codeTree = existsSync(resolve('./public' + src))
   ? tree(resolve('./public' + src), { exclude: [/node_modules/] })
   : 'Code not found';
 
-const markdown = `\`\`\`plaintext title="Arquivos"\n${
+const markdown = `${githubLink} ${page} ${devContainerLink}\n\`\`\`plaintext title="Arquivos"\n${
   codeTree ?? content
 }\n\`\`\``;
 

src/consts.ts

@@ -48,6 +48,8 @@ export const SUBJECT = {
 // project data
 export const GITHUB_EDIT_URL = 'https://github.com/ifpb/ls/tree/main';
 
+export const GITHUB_PAGES_URL = 'https://ifpb.github.io/ls';
+
 export const CONTENT_SLUGS = [
   'ecma/introduction',
   'ecma/variable',

src/content/classnotes/w3c/dynamic-elements/index.mdx

@@ -63,9 +63,7 @@ body.appendChild(h1);
 ![](/ls/imgs/w3c/dynamic-elements/invest-app.png)
 </div>
 
-{/* [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/ifpb/ls) */}
-
-<CodeTree src="/codes/w3c/dynamic-elements/invest-app" />
+<CodeTree src="/codes/w3c/dynamic-elements/invest-app" githubUrl={true} githubPages={true} />
 
 <CodePreview src="/codes/w3c/dynamic-elements/invest-app/index.html" />