v0.2.2

CHANGELOG.md

@@ -1,12 +1,29 @@
 # Changelog
 
-## v0.2.1-beta.3
+## v0.2.2
 
-### Updated project using `deno fmt`
+### Added the `Markdown` component
+
+- `/components/Markdown/index.tsx`
+- `/components/Markdown/setup.ts`
+- `/routes/md.tsx`
+- `/mod.ts`
+- `/src/scss/components.scss`
+
+### Added `deno-gfm` project adapted to this case.
+
+- `/src/katex.ts`
+- `/src/markdown.ts`
+
+### Minor updates
+
+- Removed `/static/test.txt`
+- `/static/content.md`
+- `/import_map.json`
 
 ## Changes so far
 
-- ⏳ Markdown component
+- ✅ Markdown component
 - Better task scripts.
 
 ## Roadmap
@@ -20,6 +37,7 @@
   - [x] Select (focus)
   - [x] TextArea (focus)
   - [x] Link (focus, hover)
+  - [ ] Markdown (heading link hover)
 - [ ] Create an organized collection of island functions
 - [ ] Update component features
   - [ ] **Card**: Add text, image, gradient spacers, and chips feature.
@@ -30,7 +48,7 @@
   - [x] **Header**, **Footer**: Add spacers with gradients that change.
 - [ ] Add components
   - [ ] Time
-  - [ ] Markdown
+  - [x] Markdown
   - [ ] Menu
   - [ ] Page
   - [ ] Fieldset

components/Markdown/index.tsx

@@ -0,0 +1,14 @@
+import setup, { iMarkdown } from './setup.ts';
+
+export default function (props: Partial<iMarkdown>) {
+  const { c, fref, markdown_content, renderOptions, ...p } = setup(props);
+
+  return (
+    <div
+      class={c.markdown}
+      ref={fref}
+      dangerouslySetInnerHTML={{ __html: markdown_content }}
+      {...p}
+    />
+  );
+}

components/Markdown/setup.ts

@@ -0,0 +1,38 @@
+import { applyDefaults, cn, opt, partializeClasses } from '../../src/utils.ts';
+import { iComponent } from '../../src/types.ts';
+import { RenderOptions } from '@/src/markdown.ts';
+import { render } from '@/src/markdown.ts';
+
+export type iMarkdown = iComponent<HTMLDivElement> & {
+  markdown_content: string;
+  renderOptions: RenderOptions;
+};
+
+const defaults: iMarkdown = {
+  markdown_content: '',
+  renderOptions: {
+    allowIframes: true,
+    allowMath: true,
+    customClasses: {
+      paragraph: ['comp-text', 'txt-paragraph'],
+      heading: ['comp-text'],
+      code: ['comp-code_wrapper'],
+      codespan: ['comp-code', 'comp-code_wrapper', 'clr-bg-panel'],
+      link: ['comp-link'],
+      hr: ['comp-separator'],
+    },
+  },
+};
+
+export default (props: Partial<iMarkdown>) => {
+  const p = applyDefaults<iMarkdown>(defaults, props);
+
+  const classes = partializeClasses({
+    markdown: opt(cn('comp-markdown'), p.class, p.nostyle),
+  });
+
+  p.markdown_content = render(p.markdown_content, p.renderOptions);
+
+  delete p.class;
+  return { c: classes, ...p };
+};

import_map.json

@@ -1,5 +1,6 @@
 {
   "imports": {
+    "@/": "./",
     "$fresh/": "https://deno.land/x/[email protected]/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",

mod.ts

@@ -14,6 +14,7 @@ export { default as Code } from './components/Code/index.tsx';
 export { default as Separator } from './components/Separator/index.tsx';
 export { default as Linkmap } from './components/Linkmap/index.tsx';
 export { default as Panel } from './components/Panel/index.tsx';
+export { default as Markdown } from './components/Markdown/index.tsx';
 export * from './src/enums.ts';
 export * from './src/types.ts';
 export * from './src/utils.ts';

routes/md.tsx

@@ -1,22 +1,23 @@
-import { render } from '../../deno-gfm/mod.ts';
-
-const CONTENT_PATH = new URL('../static/content.md', import.meta.url);
-const TEST_PATH = new URL('../static/test.txt', import.meta.url);
+import { Main, Markdown } from '@/mod.ts';
+import 'https://esm.sh/[email protected]';
+import 'https://esm.sh/[email protected]/components/prism-jsx?no-check&pin=v57';
+import 'https://esm.sh/[email protected]/components/prism-typescript?no-check&pin=v57';
+import 'https://esm.sh/[email protected]/components/prism-tsx?no-check&pin=v57';
+import 'https://esm.sh/[email protected]/components/prism-bash?no-check&pin=v57';
+import 'https://esm.sh/[email protected]/components/prism-powershell?no-check&pin=v57';
+import 'https://esm.sh/[email protected]/components/prism-json?no-check&pin=v57';
+import 'https://esm.sh/[email protected]/components/prism-diff?no-check&pin=v57';
 
 export default async function Md() {
-  const markdown = await (await fetch(CONTENT_PATH)).text();
-  const test = await (await fetch(TEST_PATH)).text();
-
-  const body = render(markdown, {
-    allowIframes: true,
-    allowMath: true,
-    customClasses: {
-      // list: ['asdf'],
-    },
-  });
-
-  console.log(test === body ? 'good' : 'bad');
+  const markdown =
+    await (await fetch(new URL('../static/content.md', import.meta.url)))
+      .text();
 
-  // return <div dangerouslySetInnerHTML={{ __html: body }}></div>;
-  return <div>{body}</div>;
+  return (
+    <div>
+      <Main layout_type='center'>
+        <Markdown markdown_content={markdown} />
+      </Main>
+    </div>
+  );
 }