tcmd: styled links

app/globals.css

@@ -4,13 +4,13 @@
 
 @layer base {
   * {
-    @apply text-white
+    @apply text-white box-border
   }
   body {
     @apply dark:bg-mixed-100 bg-primary-600
   }
   input {
-    @apply py-2 px-4 rounded-full dark:bg-mixed-200 dark:bg-mixed-600 placeholder:text-dark-500
+    @apply py-2 px-4 rounded-full dark:bg-mixed-200 bg-mixed-600 placeholder:text-dark-500
   }
   h1,h2,h3,h4,h5,h6 {
     @apply font-bold
@@ -32,10 +32,10 @@
   }
 
   .btn-primary {
-    @apply bg-primary-500 py-4 px-6 text-mixed-100 rounded-full font-bold text-lg
+    @apply dark:bg-primary-500 bg-primary-100 py-4 px-6 dark:text-mixed-100 text-white rounded-full font-bold text-lg
   }
   .btn-secondary {
-    @apply text-primary-500 py-4 px-6 font-bold text-lg
+    @apply dark:text-primary-500 text-primary-100 py-4 px-6 font-bold text-lg
   }
   .p {
     @apply py-1

components/tcmd/index.tsx

@@ -186,7 +186,8 @@ const renderInlineToken = (l: Line) => {
           case "anchor":
             return (
               <Link
-                className="dark:text-primary-600 underline dark:no-underline"
+                className={token.data.style?.classes ||
+                  "dark:text-primary-600 underline dark:no-underline"}
                 href={token.data.href}
               >
                 {token.content}
@@ -217,7 +218,7 @@ const renderInlineToken = (l: Line) => {
                 preferredEdge="bottom"
                 className="cursor-pointer"
               >
-                <span className="border-b border-dotted border-white">
+                <span className="border-b-2 border-dotted border-white">
                   {token.content}
                 </span>
               </Poppable>

lib/tcmd/tokenizeInline.ts

@@ -94,12 +94,27 @@ export const inlineTokens: {
   {
     rx: /(?<![\!\?|^])\[(.*?)\]\((.*?)\)/g,
     create(content, start, end, tokens) {
-      const [_, label, href] = content;
+      let [_, label, href] = content;
+
+      const style = [
+        {
+          classes: "btn-primary inline-block",
+          rx: /^```button\s/,
+        },
+        {
+          classes: "btn-secondary inline-block uppercase",
+          rx: /^```cta\s/,
+        },
+      ].find((s) => s.rx.test(label));
+
+      if (style) label = label.replace(style.rx, "");
+
       tokens.push({
         content: label,
         type: "anchor",
         data: {
           href,
+          style,
         },
         start,
         end,

test.md

@@ -35,6 +35,9 @@ placerat. Auctor urna nunc id cursus metus aliquam eleifend.
     ornare lectus sit amet est placerat. Auctor urna nunc id cursus metus
     aliquam eleifend.
 
+[```button Learn More](#)
+[```cta Learn More](#)
+
 ]]
 
 [[