SolidJS•3mo ago

Importing and displaying .md files with pagination in SolidStart

Hi! So i have some .md files inside /src/content/blog. I wanna import them and then display them (with pagination) in my index.tsx page. What's the best way of doing this in SolidJS?

3 Replies

Anshu•3mo ago

you can use vinxi/mdx plugin

// @ts-expect-error missing types
import pkg from "@vinxi/plugin-mdx";
import remarkFrontmatter from "remark-frontmatter";
import remarkMdxFrontmatter from "remark-mdx-frontmatter";
import "solid-mdx";

const { default: vinxiMdx } = pkg;

export default defineConfig({
  extensions: ["md", "tsx"],
  vite: {
    plugins: [
      vinxiMdx.withImports({})({
        define: {
          "import.meta.env": "'import.meta.env'",
        },
        jsx: true,
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
        remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
      }),
      { enforce: "pre" },
    ],
  },
});

// @ts-expect-error missing types
import pkg from "@vinxi/plugin-mdx";
import remarkFrontmatter from "remark-frontmatter";
import remarkMdxFrontmatter from "remark-mdx-frontmatter";
import "solid-mdx";

const { default: vinxiMdx } = pkg;

export default defineConfig({
  extensions: ["md", "tsx"],
  vite: {
    plugins: [
      vinxiMdx.withImports({})({
        define: {
          "import.meta.env": "'import.meta.env'",
        },
        jsx: true,
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
        remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
      }),
      { enforce: "pre" },
    ],
  },
});

then you can import your md files in your codebase they will be parsed as frontmatter and jsx

const blogContent = import.meta.glob("./content/blog/*.md", {
  eager: true,
});

function mapContentToCollection(slug: string, content: any): Post {
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
  const frontmatter = content?.frontmatter ?? {};

  return {
    frontmatter,
    slug,
    rendered: content.default(),
  };

export const blogCollection = Object.keys(blogContent).reduce<{
  [key: string]: Post;
}>((collection, path) => {
  const slug = path
    .replace("./blog/", "")
    .replace(".md", "")
    .replace("./", "");
  collection[slug] = mapContentToCollection(slug, blogContent[path] as any);

  return collection;
}, {});

const blogContent = import.meta.glob("./content/blog/*.md", {
  eager: true,
});

function mapContentToCollection(slug: string, content: any): Post {
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
  const frontmatter = content?.frontmatter ?? {};

  return {
    frontmatter,
    slug,
    rendered: content.default(),
  };

export const blogCollection = Object.keys(blogContent).reduce<{
  [key: string]: Post;
}>((collection, path) => {
  const slug = path
    .replace("./blog/", "")
    .replace(".md", "")
    .replace("./", "");
  collection[slug] = mapContentToCollection(slug, blogContent[path] as any);

  return collection;
}, {});

that's what i did in my projects but if you want some more solution checkout solid-docs project its in mdx and solid-start https://github.com/solidjs/solid-docs

𝐻𝑒𝒶𝓅𝑅𝑒𝒶𝓅𝑒𝓇OP•3mo ago

Ah mdx, check i gonna read those docs!

ladybluenotes•3mo ago

the docs repo uses solidbase from kobalte (cc @jer3m01) 🙂

Gaming

Programming

Importing and displaying .md files with pagination in SolidStart

Did you find this page helpful?