Merge pull request #31 from alexaveldanez/dynamic-code-block-fixes

(#17) Add language styling to Dynamic Code Block

Author: st3phhays

package.json

@@ -1,6 +1,6 @@
 {
   "name": "choco-astro",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "packageManager": "yarn@4.2.2",
   "type": "module",
   "description": "A global set of dependencies to be used on Chocolatey Software Astro projects.",
@@ -33,8 +33,5 @@
     "remark-custom-header-id": "^1.0.0",
     "sanitize-html": "^2.17.0",
     "typescript": "^5.6.3"
-  },
-  "resolutions": {
-    "brace-expansion": "^4.0.1"
   }
 }

src/components/dynamicCodeBlock/DynamicCodeBlock.astro

@@ -1,12 +1,33 @@
 ---
+import { z } from 'zod';
+
+const dynamicCodeBlockSchema = z.object({
+    language: z.enum(['markup', 'css', 'clike', 'javascript', 'bash', 'csharp', 'diff', 'json', 'powershell', 'puppet', 'python', 'ruby', 'scss', 'shell-session', 'xml-doc', 'yaml'])
+});
+
+type DynamicCodeBlock = z.infer<typeof dynamicCodeBlockSchema>;
+type DynamicCodeBlockLanguage = DynamicCodeBlock['language'];
+
+interface Props {
+    language: DynamicCodeBlockLanguage
+}
+
+const { language } = Astro.props;
+
+const content = {
+    language
+}
+
+dynamicCodeBlockSchema.parse(content);
+
 const generateRandomClass = () => {
     const randomNumber = Math.floor(Math.random() * 1000);
     return `dynamic-code-block-${randomNumber}`;
 };
 ---
 
 <div class="dynamic-code-block-container copy-command">
-    <pre class="language-powershell"><code class={generateRandomClass()}>
+    <pre class=`language-${language}`><code class={generateRandomClass()}>
         <slot />
     </code></pre>
 </div>

src/components/dynamicCodeBlock/DynamicCodeBlockInput.astro

@@ -1,7 +1,41 @@
 ---
-const { name, defaultValue } = Astro.props;
+import { z } from 'zod';
+
+// Define the schema
+const dynamicCodeBlockInputSchema = z.object({
+    name: z.string(),
+    defaultValue: z.string(),
+    label: z.string().optional()
+});
+
+// Define the type
+type DynamicCodeBlockInput = z.infer<typeof dynamicCodeBlockInputSchema>;
+
+interface Props {
+    name: DynamicCodeBlockInput['name'],
+    defaultValue: DynamicCodeBlockInput['defaultValue']
+    label?: DynamicCodeBlockInput['label']
+}
+
+const { name, defaultValue, label } = Astro.props;
+
+const content = {
+    name,
+    defaultValue,
+    label
+};
+
+// Validate the content
+dynamicCodeBlockInputSchema.parse(content);
 ---
 
-<div class="col-lg-6">
-    <input class="form-control mb-3 dynamic-code-block-input" type="text" name={name} data-default-value={defaultValue} placeholder={defaultValue} />
+<div class="row align-items-center mb-3">
+    {label && (
+        <div class="col-lg-auto pe-lg-0">
+            <label for={name} class="col-form-label">{label}:</label>
+        </div>
+    )}
+    <div class="col-lg-6">
+        <input id={name} class="form-control dynamic-code-block-input" type="text" name={name} data-default-value={defaultValue} placeholder={defaultValue} />
+    </div>
 </div>