Editor config

.editorconfig

@@ -0,0 +1,6 @@
+[*]
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = crlf

.vscode/extensions.json

@@ -4,7 +4,8 @@
     "bradlc.vscode-tailwindcss",
     "unifiedjs.vscode-mdx",
     "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig"
   ],
   "unwantedRecommendations": []
 }

src/components/MDX/Blockquote.astro

@@ -1,3 +1,7 @@
+---
+// TODO: Handle author, etc., via inclusion of some sort of tag in the quote, either frontmatter tags or simply [author=Person Name]
+---
+
 <div class="flex w-full items-center">
   <blockquote
     class="border-primary mx-auto my-8 max-w-xl border-l-6 py-2 pl-4 italic"

src/components/MDX/CodeSnippet.astro

@@ -17,10 +17,18 @@ if (dataMeta) {
 }
 
 const languageIcons: Record<string, string> = {
-  javascript: "mdi:language-javascript"
+  javascript: "mdi:language-javascript",
+  typescript: "mdi:language-typescript",
+  csharp: "mdi:language-csharp",
+  css: "mdi:language-css3",
+  html: "mdi:language-html5",
+  bash: "mdi:bash",
+  astro: "simple-icons:astro"
 };
 
-const languageIcon = languageIcons[props["data-language"]];
+const language = props["data-language"];
+
+const languageIcon = languageIcons[language];
 
 const title = meta.title;
 
@@ -28,31 +36,29 @@ const copyID = Math.random().toString(36);
 ---
 
 <figure class="my-4 rounded-b">
-  {
+  <figcaption>
-    title && (
+    <div
-      <figcaption>
+      class="bg-primary w-full rounded-t-md border-1 border-gray-600 px-4 py-2 text-white"
-        <div class="bg-primary w-full rounded-t-md border-1 border-gray-600 px-4 py-2 text-white">
+    >
-          <div class="flex justify-between">
+      <div class="flex justify-between">
-            <div class="flex items-center justify-between gap-2 font-bold">
+        <div class="flex items-center justify-between gap-2 font-bold">
-              {languageIcon && <Icon name={languageIcon} />}
+          {languageIcon && <Icon name={languageIcon} />}
-              <p>{title}</p>
+          {
-            </div>
+            !languageIcon && language !== "plaintext" && (
-            <button class="font-bold" id=`copy-${copyID}`>
+              <p class="uppercase">{language}</p>
-              Copy <Icon name="mdi:content-copy" class="ml-0.5 inline-block" />
+            )
-            </button>
+          }
-          </div>
+          {title && <p>{title}</p>}
         </div>
-      </figcaption>
+        <button class="font-bold" id=`copy-${copyID}`>
-    )
+          Copy <Icon name="mdi:content-copy" class="ml-0.5 inline-block" />
-  }
+        </button>
+      </div>
+    </div>
+  </figcaption>
 
   <pre
-    class:list={[
+    class:list={["border-x border-b border-gray-600", "rounded-b", className]}
-      "border-x border-b border-gray-600",
-      "rounded-b",
-      !title ? "rounded-t border-t" : "",
-      className
-    ]}
     {...props}><slot /></pre>
 </figure>
 

src/styles/global.css

@@ -96,7 +96,6 @@
     @apply inline-block;
     @apply w-full;
     @apply pr-8;
-    @apply first:pt-2 last:pb-2;
     @apply bg-white dark:bg-gray-100;
   }
 
@@ -105,7 +104,7 @@
     counter-increment: step;
 
     @apply w-10;
-    @apply mr-5 ml-auto pr-2;
+    @apply mr-2 ml-auto pt-1 pr-2 pb-1;
     @apply inline-block;
     @apply text-right;