feat: restore articles component

Author: LeadcodeDev

astro.config.mjs

@@ -13,9 +13,7 @@ import {
 } from "@shikijs/transformers";
 import tailwindcss from "@tailwindcss/vite";
 import icon from "astro-icon";
-import rehypeCallouts from "rehype-callouts";
 import rehypeMermaid from "rehype-mermaid";
-import rehypeBlogListReact from "./src/lib/plugins/blog-list/plugin";
 import remarkBlockParser from "./src/lib/plugins/parser/plugin";
 import remarkDirectivePkg from "remark-directive";
 import sitemap from "@astrojs/sitemap";
@@ -49,20 +47,7 @@ export default defineConfig({
       excludeLangs: ["mermaid"],
     },
     remarkPlugins: [remarkDirectivePkg, remarkBlockParser],
-    rehypePlugins: [
-      rehypeMermaid,
-      [
-        rehypeCallouts,
-        {
-          customClassNames: {
-            calloutClass: "callout",
-            calloutTitleClass: "callout-title",
-            calloutContentClass: "callout-content",
-          },
-        },
-      ],
-      rehypeBlogListReact,
-    ],
+    rehypePlugins: [rehypeMermaid],
   },
 
   vite: {

content/blog/index.mdx

@@ -22,4 +22,4 @@ import config from "../../explainer.config";
   </div>
 </div>
 
-<BlogListWrapper perLine={4} />
+::articles

content/docs/documentation/foundamentals/components/step.mdx

@@ -58,39 +58,3 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 :::::
 ::::::
-
-::::step-group
-:::step{title="Lorem ipsum dolor sit amet"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-```rs [main.rs]
-fn main() {
-    println!("Hello, world!");
-}
-```
-
-:::
-:::step{title="Lorem ipsum dolor sit amet"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-:::
-::::
-
-````plain [Simple steps]
-::::step-group
-  :::step{title="Lorem ipsum dolor sit amet"}
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-    ```rs [main.rs]
-    fn main() {
-        println!("Hello, world!");
-    }
-    ```
-  :::
-
-  :::step{title="Lorem ipsum dolor sit amet"}
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-  :::
-::::
-````

content/index.mdx

@@ -155,4 +155,8 @@ import { Badge } from "@/components/ui/badge";
       </p>
     </div>
   </div>
+
+  <div class="py-5">
+    ::articles
+  </div>
 </div>

explainer.config.ts

@@ -8,6 +8,7 @@ import Preview from "@/components/content/code-preview/preview.astro";
 import CodeBlock from "@/components/content/codeblock.astro";
 import StepGroup from "@/components/content/step-group/step-group.astro";
 import Step from "@/components/content/step-group/step.astro";
+import Articles from "@/components/elements/articles.astro";
 import { defineExplainerConfig } from "@/utils";
 
 export default defineExplainerConfig({
@@ -61,6 +62,7 @@ export default defineExplainerConfig({
       "code-preview": CodePreview,
       "content-preview": ContentPreview,
       preview: Preview,
+      articles: Articles,
     },
     icons: {
       markdown: "devicon:markdown",

src/assets/css/markdown.css

@@ -58,7 +58,6 @@ h4,
 h5,
 h6 {
   scroll-margin-top: 100px;
-  color: var(--title-color);
 }
 
 .prose {
@@ -438,104 +437,3 @@ html.dark .prose > .astro-code {
   border-top-right-radius: 0 !important;
   border: none !important;
 }
-
-.callout {
-  margin: 1rem 0;
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
-
-  .callout-title {
-    display: none;
-  }
-
-  .callout-content {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    opacity: 0.8;
-    font-size: var(--text-sm);
-
-    > *:first-child {
-      margin-top: 0;
-    }
-
-    > *:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &[data-callout="note"] {
-    background-color: var(--callout-note-bg);
-    border: 1px solid
-      color-mix(in oklab, var(--callout-note-border) 25%, transparent);
-    color: var(--callout-note);
-
-    .callout-content {
-      &::before {
-        content: "ⓘ";
-        font-size: 1.2rem;
-        color: var(--callout-note);
-      }
-    }
-  }
-
-  &[data-callout="success"] {
-    background-color: var(--callout-success-bg);
-    border: 1px solid
-      color-mix(in oklab, var(--callout-success-border) 25%, transparent);
-    color: var(--callout-success);
-
-    .callout-content {
-      &::before {
-        content: "✓";
-        font-size: 1.2rem;
-        color: var(--callout-success);
-      }
-    }
-  }
-
-  &[data-callout="important"] {
-    background-color: var(--callout-important-bg);
-    border: 1px solid
-      color-mix(in oklab, var(--callout-important-border) 25%, transparent);
-    color: var(--callout-important);
-
-    .callout-content {
-      &::before {
-        content: "✧";
-        font-size: 1.5rem;
-        color: var(--callout-important);
-      }
-    }
-  }
-
-  &[data-callout="warning"] {
-    background-color: var(--callout-warning-bg);
-    border: 1px solid
-      color-mix(in oklab, var(--callout-warning-border) 25%, transparent);
-    color: var(--callout-warning);
-
-    .callout-content {
-      &::before {
-        content: "⚠︎";
-        font-size: 1.4rem;
-        color: var(--callout-warning);
-      }
-    }
-  }
-
-  &[data-callout="error"] {
-    background-color: var(--callout-error-bg);
-    border: 1px solid
-      color-mix(in oklab, var(--callout-error-border) 25%, transparent);
-    color: var(--callout-error);
-
-    .callout-content {
-      &::before {
-        content: "✗";
-        font-size: 1.2em;
-        color: var(--callout-error);
-      }
-    }
-  }
-}

…/plugins/blog-list/BlogListWrapper.astro …c/lib/components/elements/articles.astrosrc/lib/plugins/blog-list/BlogListWrapper.astro renamed to src/lib/components/elements/articles.astro src/lib/plugins/blog-list/BlogListWrapper.astro renamed to src/lib/components/elements/articles.astro

@@ -4,7 +4,7 @@ import { getCollection } from "astro:content";
 import config from "explainer.config";
 
 type Props = {
-  perLine: 1 | 2 | 3 | 4;
+  perLine: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
   current?: string;
 };
 
@@ -25,12 +25,20 @@ const itemPerLine = {
   2: "lg:grid-cols-2",
   3: "lg:grid-cols-3",
   4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5",
+  6: "lg:grid-cols-6",
+  7: "lg:grid-cols-7",
+  8: "lg:grid-cols-8",
+  9: "lg:grid-cols-9",
+  10: "lg:grid-cols-10",
+  11: "lg:grid-cols-11",
+  12: "lg:grid-cols-12",
 };
 ---
 
 <div
   class:list={[
-    "no-prose grid grid-cols-1 md:grid-cols-3 gap-5 py-10",
+    "no-prose grid grid-cols-1 md:grid-cols-3 gap-5 py-5",
     itemPerLine[perLine ?? 4],
   ]}
 >