Cosas pendientes

Pendientes para la pagina

Definir si:

• Se hará por base de datos o por archivos

H2O X^2^

Por ahora veo mas optimo hacerlo por base de datos y simplemente modificar los componentes con CSS manteniendo los estilos de la pagina principal

• Es mas sencillo archivos md que mdx

• Aplicar los mismos estilos y tema de la pagina principal
• Definir en que servicio se obtendran los diferentes archivos estaticos para crear el action
• Eliminar y depurar archivos innecesarios
• Revisar y gestionar donde se hará el front para crear posts

Definir si será en este mismo proyecto u otro Revisar proyecto que esta realizando MiduDev para tener en cuenta de que manera hace el login del proyecto de Ibai

My current configuration for this markup content is:

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkGfm from "remark-gfm";
import remarkDeflist from "remark-deflist";
import remarkBreaks from "remark-breaks";
import remarkCallout from "@r4ai/remark-callout";
import remarkSmartypants from "remark-smartypants";
import { remarkMark } from "remark-mark-highlight";
import remarkSupersub from "remark-supersub";
import remarkEmoji from "remark-emoji";
import remarkHeadingId from "remark-heading-id";
 
import remarkRehype from "remark-rehype";
import rehypeRaw from "rehype-raw";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import rehypePrettyCode from "rehype-pretty-code";
import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
import rehypeStringify from "rehype-stringify";
 
type MdOptions = {
  headingLinkClass?: string;
  shikiTheme?: string;
};
 
export async function markdownToHtml(markdown: string, opts: MdOptions = {}) {
  const processor = unified()
    .use(remarkParse)
    .use(remarkGfm, { singleTilde: false })
    .use(remarkDeflist)
    .use(remarkBreaks)
    .use(remarkCallout)
    .use(remarkSmartypants)
    .use(remarkMark)
    .use(remarkSupersub)
    .use(remarkEmoji, { emoticon: false })
    .use(remarkHeadingId)
    .use(remarkRehype, { allowDangerousHtml: true, clobberPrefix: "" })
    .use(rehypeRaw)
    .use(rehypeAutolinkHeadings, {
      behavior: "append",
      properties: {
        class: opts.headingLinkClass ?? "heading-anchor",
        ariaHidden: "true",
        tabIndex: -1
      },
      content: { type: "text", value: " #" }
    })
    .use(rehypePrettyCode as any, {
      theme: opts.shikiTheme ?? "github-dark",
      keepBackground: false,
    })
    .use(rehypeSanitize, {
      ...defaultSchema,
      clobberPrefix: "",
      tagNames: [
        ...(defaultSchema.tagNames || []),
        "mark", "details", "summary", "br"
      ],
      attributes: {
        ...defaultSchema.attributes,
        "*": [
          ...(defaultSchema.attributes?.["*"] || []),
          "className", "data*", "style"
        ],
        code: [...(defaultSchema.attributes?.code || []), ["className"], ["data-line-numbers"]],
        pre:  [...(defaultSchema.attributes?.pre || []), ["className"], ["data-theme"]],
        span: [...(defaultSchema.attributes?.span || []), ["className"], ["style"]],
        a:    [...(defaultSchema.attributes?.a || []), ["className"], ["rel"], ["target"]],
        mark: [...(defaultSchema.attributes?.mark || []), ["className"]],
        sup:  [...(defaultSchema.attributes?.sup || [])],
        sub:  [...(defaultSchema.attributes?.sub || [])],
        dl:   [...(defaultSchema.attributes?.dl || [])],
        dt:   [...(defaultSchema.attributes?.dt || [])],
        dd:   [...(defaultSchema.attributes?.dd || [])],
        div: [
          ...(defaultSchema.attributes?.div || []),
          ["className"], ["role"],
          ["data-callout"], ["data-callout-type"], ["data-callout-title"], ["data-callout-body"]
        ],
      },
    })
    .use(rehypeStringify);
 
  const file = await processor.process(markdown ?? "");
  return String(file);
}

Another title {#custom-id}

First Term : This is the definition of the first term.

Second Term : This is one definition of the second term. : This is another definition of the second term.

First Term : This is the definition of the first term.

Second Term : This is one definition of the second term. : This is another definition of the second term.

• Write the press release
• Update the website
• Contact the media

X^2^

    This is the first sentence of my indented paragraph.

This text is red!

:warning: Warning: Do not push the big red button.

:memo: Note: Sunrises are beautiful.

:bulb: Tip: Remember to appreciate the little things in life.

1. First item
2. Second item
3. Third item
   1. Indented item
   2. Indented item
4. Fourth item

Viendo como funciona el texto marcado ==Marked text== agregandole mas texto a los lados. A una sola linea todo funciona bien, miremos como funciona a dos lineas

[!warning] Warning! No presiones el botón rojo.

[!success] Success! Se guardó correctamente.

[!info] Info! Se guardó correctamente.

[!note]- This is desplegable note Este es un callout plegable. Puedes abrirlo o cerrarlo haciendo clic en el título.

[!note] This is a Note Este es un callout plegable. Puedes abrirlo o cerrarlo haciendo clic en el título.

[!tip] Tip! Se guardó correctamente.

[!danger] Danger! Se guardó correctamente.

[!error] Error! Se guardó correctamente.

[!quote] Quote! Se guardó correctamente.

[!example] Example! Se guardó correctamente.

[!bug] Bug! Se guardó correctamente.

[!todo] Todo! Se guardó correctamente.