CodeTable Component

[alex-fusionauth]

No description provided.

[synedra]

This is a new component so we're asking a couple of developer folks to take a look.

[lyleschemmerling]

If I add a markdown table at the bottom the results look the same to me. What does this buy us that we don't get from mdx?

import CodeTable from 'src/components/CodeTable.astro';
import * as md from 'src/components/dev-tools/alextesting_markdown.md'; // This could come from remote source
import AlexStuff from 'src/components/dev-tools/alextesting_markdown.md';


{/* With headings */}
<CodeTable 
    headings={[['file', 'code']]} 
    rows={[
    ['vite.config.ts', md.compiledContent()], 
    ['vite.config2.ts', md.compiledContent()]]
    } 
/>

{/* Without headings */}

<CodeTable 
    rows={[
    ['vite.config.ts', md.compiledContent()], 
    ['vite.config2.ts', md.compiledContent()]]
    } 
/>

| file            | code         |
|-----------------|--------------|
| vite.config.js  | <AlexStuff/> |
| vite.config2.js | <AlexStuff/> |

[synedra]

I was finding it challenging to pass in code with multiple lines. I will need 4 or 5 different pieces of code per QuickStart and don’t want to make a separate component for each or maintain different files for each. Passing the code in to the component doesn’t work because it’s multiple lines which breaks in Astro. If you could show me how to pass a multiple line string into the component it would be great - that is the fundamental reason I can’t use the standard Code component. K

…

On Thu, Sep 26, 2024 at 1:02 PM Lyle Schemmerling ***@***.***> wrote: If I add a markdown table at the bottom the results look the same to me. What does this buy us that we don't get from mdx? import CodeTable from 'src/components/CodeTable.astro'; import * as md from 'src/components/dev-tools/alextesting_markdown.md'; // This could come from remote source import AlexStuff from 'src/components/dev-tools/alextesting_markdown.md'; {/* With headings */} <CodeTable headings={[['file', 'code']]} rows={[ ['vite.config.ts', md.compiledContent()], ['vite.config2.ts', md.compiledContent()]] } /> {/* Without headings */} <CodeTable rows={[ ['vite.config.ts', md.compiledContent()], ['vite.config2.ts', md.compiledContent()]] } /> | file | code | |-----------------|--------------| | vite.config.js | <AlexStuff/> | | vite.config2.js | <AlexStuff/> | — Reply to this email directly, view it on GitHub <#3309 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASOTDYBSOMOFAQOLINN33PLZYRR6HAVCNFSM6AAAAABO5WHYCGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZXHAZDQNJSGY> . You are receiving this because you commented.Message ID: ***@***.***>

[lyleschemmerling]

While I am not sure that this component would solve the problem of needing to use fragment files I personally think that putting those code blocks in their own files feels cleaner to me.

However if you wanted to inline the code snippets anyway you could do something like this:

---
title: Code Table
description: Code Table Example.
author: Alex Patterson
---
import Code from 'astro/components/Code.astro';

export const code = `
export default defineConfig({
  plugins: [reactRefresh()],
  server: {
    fs: {
      strict: true,
    },
  },
  optimizeDeps: {
    include: ['@apollo/client', 'graphql'],
  },
});
`;

| file            | code                                   |
|-----------------|----------------------------------------|
| vite.config.js  | <Code lang='javascript' code={code} /> |
| vite.config2.js | <AlexStuff/>                           |

[synedra]

I’ll give the separate files a try and see where I end up. Thanks for your thoughtful help with this, it’s been really helpful! K

…

On Thu, Sep 26, 2024 at 2:25 PM Lyle Schemmerling ***@***.***> wrote: While I am not sure that this component would solve the problem of needing us to fragment files I personally that is actually probably preferred to to inline solutions as putting those code blocks in their own files feels cleaner to me. However if you wanted to inline the code snippets anyway you could do something like this: --- title: Code Table description: Code Table Example. author: Alex Patterson --- import Code from 'astro/components/Code.astro'; export const code = ` export default defineConfig({ plugins: [reactRefresh()], server: { fs: { strict: true, }, }, optimizeDeps: { include: ***@***.***/client', 'graphql'], }, }); `; | file | code | |-----------------|----------------------------------------| | vite.config.js | <Code lang='javascript' code={code} /> | | vite.config2.js | <AlexStuff/> | — Reply to this email directly, view it on GitHub <#3309 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASOTDYE5RDFLWN6HPFSUEXDZYR3VNAVCNFSM6AAAAABO5WHYCGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZXHE3DMNJVHA> . You are receiving this because you commented.Message ID: ***@***.***>