diff --git a/package.json b/package.json index 3c3ef58a..83324adb 100644 --- a/package.json +++ b/package.json @@ -27,10 +27,7 @@ "@solid-primitives/throttle": "^1.0.3", "@solid.js/docs": "^1.0.3", "fuse.js": "^6.4.6", - "markdown-it-prism": "^2.1.7", "monaco-editor": "^0.25.2", - "prism-themes": "^1.9.0", - "prismjs": "^1.25.0", "scroll-behavior-polyfill": "^2.0.13", "solid-app-router": "^0.1.11", "solid-dismiss": "^1.0.22", @@ -54,8 +51,6 @@ "got": "^11.8.2", "htmlnano": "^1.1.1", "jiti": "^1.12.9", - "markdown-it": "^12.2.0", - "markdown-it-anchor": "^8.3.1", "npm-run-all": "^4.1.5", "patch-package": "^6.4.7", "postcss": "^8.3.6", diff --git a/public/articles/welcome-to-the-solid-blog.md b/public/articles/welcome-to-the-solid-blog.md index 0a4feaf1..b6be7e94 100644 --- a/public/articles/welcome-to-the-solid-blog.md +++ b/public/articles/welcome-to-the-solid-blog.md @@ -1,5 +1,8 @@ Hello and welcome to our new blog platform! + +# Test Header +## Test Second Level Header SolidJS is a community built on strong communication and teamwork. It's only right that we have a blog for our growing community that helps with sharing announcements, publish recent ideas and even bring valuable insights and learnings from the broader community. Ryan and other members will continue publishing articles you've come to love about SolidJS and broader research via dev.to, Medium and other outlets. We'll frequently link to them here and make you aware of the latest so you can keep coming to this blog for the absolute latest. diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx deleted file mode 100644 index 401d43e1..00000000 --- a/src/components/Markdown.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { Component, createEffect, createMemo, JSX, splitProps } from 'solid-js'; - -import prism from 'markdown-it-prism'; - -import markdown from 'markdown-it'; -import anchor from 'markdown-it-anchor'; - -import 'prism-themes/themes/prism-ghcolors.css'; - -import 'prismjs/components/prism-json'; -import 'prismjs/components/prism-jsx'; -import 'prismjs/components/prism-bash'; -import 'prismjs/components/prism-typescript'; - -const Markdown: Component = (props) => { - const [internal, external] = splitProps(props, ['class', 'onLoadSections', 'children']); - const doc = createMemo(() => { - const sections: Section[] = []; - - const md = markdown({ html: true, typographer: true }) - .use(prism) - // Options available here: https://www.npmjs.com/package/markdown-it-anchor - .use(anchor, { - level: 1, - callback: (token, { slug, title }) => { - sections.push({ slug, title, level: token.tag }); - }, - }); - - const html = md.render(internal.children as string); - - return { - html, - sections: - sections[1] && sections[1].level === 'h3' - ? sections.filter((section) => section.level === 'h1') - : sections.filter((section) => section.level !== 'h1'), - }; - }); - - createEffect(() => { - if (internal.onLoadSections) internal.onLoadSections(doc().sections); - }); - - return
; -}; - -export default Markdown; - -interface Props extends JSX.HTMLAttributes { - onLoadSections?: Function; -} - -export interface Section { - slug: string; - title: string; - level: string; -} diff --git a/src/pages/Tutorial.tsx b/src/pages/Tutorial.tsx index b9dd7ec0..3db62629 100644 --- a/src/pages/Tutorial.tsx +++ b/src/pages/Tutorial.tsx @@ -15,12 +15,12 @@ import { useData, NavLink } from 'solid-app-router'; import { Icon } from '@amoutonbrady/solid-heroicons'; import { arrowLeft, arrowRight, chevronDown } from '@amoutonbrady/solid-heroicons/solid'; -import Markdown from '../components/Markdown'; import { compiler, formatter } from '../components/setupRepl'; import type { TutorialDirectory, TutorialDirectoryItem, TutorialRouteData } from './Tutorial.data'; import { useI18n } from '@solid-primitives/i18n'; import Dismiss from 'solid-dismiss'; import { useRouteReadyState } from '../utils/routeReadyState'; +import SolidMarkdown from 'solid-markdown'; const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split(''); @@ -166,7 +166,7 @@ const Tutorial: Component = () => { useRouteReadyState(); createEffect(() => { - markDownRef.scrollTop = 0; + // markDownRef.scrollTop = 0; replEditor && replEditor.setScrollPosition({ scrollTop: 0 }); const fileset = data.solved ? data.solvedJs : data.js; const files = fileset?.files; @@ -194,9 +194,11 @@ const Tutorial: Component = () => {
- - {data.markdown || ''} - +
+ + {data.markdown || ''} + +