diff --git a/mdsvex.config.js b/mdsvex.config.js new file mode 100644 index 0000000..028ba3c --- /dev/null +++ b/mdsvex.config.js @@ -0,0 +1,73 @@ +import { defineMDSveXConfig as defineConfig } from 'mdsvex'; +import remarkExternalLinks from 'remark-external-links'; +import remarkSetImagePath from './src/lib/utils/remark-set-image-path.js'; +import remarkLinkWithImageAsOnlyChild from './src/lib/utils/remark-link-with-image-as-only-child.js'; +import rehypeImgSize from 'rehype-img-size'; + +import remarkUnwrapImages from 'remark-unwrap-images'; +import remarkToc from 'remark-toc'; +import rehypeSlug from 'rehype-slug'; + +// import { highlightCode } from './src/lib/utils/highlighter.js'; + +/** @type {import('mdsvex').MdsvexOptions} */ +const config = defineConfig({ + extensions: ['.svelte.md', '.md', '.svx'], + smartypants: { + dashes: 'oldschool' + }, + /* Wait for skeleton to implement Prismjs, for now use in .md files */ + // layout: { + // blog: './src/lib/components/blog/_blog-layout.svelte', + // project: './src/lib/components/projects/_project-layout.svelte', + // _: './src/lib/components/fallback/_layout.svelte' + // }, + /* Plugins */ + rehypePlugins: [ + [rehypeSlug], + [rehypeImgSize] + // [ + // /** Custom rehype plugin to add loading="lazy" to all images */ + // () => { + // return (tree) => { + // visit(tree, 'element', (node) => { + // if (node.tagName === 'img') { + // node.properties.loading = 'lazy'; + // } + // }); + // }; + // } + // ] + ], + remarkPlugins: [ + [remarkToc, { maxDepth: 3, tight: true }], + [ + (remarkExternalLinks, + { + target: '_blank' + }) + ], + [remarkUnwrapImages], + remarkSetImagePath, + remarkLinkWithImageAsOnlyChild + // [ + // headings, + // { + // behavior: 'append', + // linkProperties: {}, + // content: function (node) { + // return [ + // h('span.icon.icon-link header-anchor', { + // ariaLabel: toString(node) + ' permalink' + // }) + // ]; + // } + // } + // ], + + // remarkHeadingsPermaLinks, + // getHeadings + ] +}); + +export default config; diff --git a/package.json b/package.json index 286914e..661aa19 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@playwright/test": "^1.42.1", "@skeletonlabs/skeleton": "^2.9.0", "@skeletonlabs/tw-plugin": "^0.2.4", + "@sveltejs/amp": "^1.1.0", "@sveltejs/kit": "^2.5.4", "@tailwindcss/forms": "^0.5.7", "@tailwindcss/typography": "^0.5.10", @@ -40,12 +41,18 @@ "@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/parser": "^6.21.0", "autoprefixer": "^10.4.18", + "dropcss": "^1.0.16", "eslint": "^8.57.0", "eslint-config-prettier": "^8.10.0", "eslint-plugin-svelte": "^2.35.1", "postcss": "^8.4.35", "prettier": "^2.8.8", "prettier-plugin-svelte": "^2.10.1", + "rehype-img-size": "^1.0.1", + "remark-external-links": "^9.0.1", + "remark-slug": "^7.0.1", + "remark-toc": "^9.0.0", + "remark-unwrap-images": "^4.0.0", "svelte": "^4.2.12", "svelte-check": "^3.6.7", "svelte-maplibre": "^0.8.2", @@ -53,6 +60,7 @@ "tailwindcss": "^3.4.1", "tslib": "^2.6.2", "typescript": "^5.4.2", + "unist-util-visit": "^5.0.0", "vite": "^5.1.6", "vite-plugin-tailwind-purgecss": "^0.2.0", "vitest": "^0.32.4" diff --git a/svelte.config.js b/svelte.config.js index 089c925..cbd3640 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,14 +1,20 @@ import adapter from '@sveltejs/adapter-node'; import preprocess from 'svelte-preprocess'; +// config extensions +import { mdsvex } from 'mdsvex'; +import mdsvexConfig from './mdsvex.config.js'; + /** @type {import('@sveltejs/kit').Config} */ const config = { + extensions: ['.svelte', ...(mdsvexConfig.extensions || [])], // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: [ preprocess({ postcss: true }), + mdsvex(mdsvexConfig) ], kit: { adapter: adapter({