svelte config readability update => Mdsvex.config.js
This commit is contained in:
matthieu42morin
parent
b04624c7ed
commit
417b2d5c35
139
svelte.config.js
139
svelte.config.js
|
|
@ -1,88 +1,19 @@
|
|||
import adapter from '@sveltejs/adapter-auto';
|
||||
import adapter from '@sveltejs/adapter-cloudflare';
|
||||
import { vitePreprocess } from '@sveltejs/kit/vite';
|
||||
import preprocess from 'svelte-preprocess';
|
||||
import path from 'path';
|
||||
import { mdsvex } from 'mdsvex';
|
||||
import headings from 'remark-autolink-headings';
|
||||
import remarkExternalLinks from 'remark-external-links';
|
||||
import slug from 'remark-slug';
|
||||
import remarkSetImagePath from './src/lib/utils/remark-set-image-path.js';
|
||||
import remarkEmbedVideo from './src/lib/utils/remark-embed-video.js';
|
||||
import remarkLinkWithImageAsOnlyChild from './src/lib/utils/remark-link-with-image-as-only-child.js';
|
||||
import remarkHeadingsPermaLinks from './src/lib/utils/remark-headings-permalinks.js';
|
||||
import { toString } from 'mdast-util-to-string';
|
||||
import rehypeWrap from 'rehype-wrap-all';
|
||||
import rehypeImgSize from 'rehype-img-size';
|
||||
import { highlightCode } from './src/lib/utils/highlight.js';
|
||||
import { mdsvexGlobalComponents } from './src/lib/utils/mdsvex-global-components.js';
|
||||
import { h } from 'hastscript';
|
||||
import { visit } from 'unist-util-visit';
|
||||
import getHeadings from './src/lib/utils/get-headings.js';
|
||||
|
||||
const mdsvexOptions = {
|
||||
extensions: ['.md'],
|
||||
highlight: {
|
||||
highlighter: highlightCode,
|
||||
},
|
||||
rehypePlugins: [
|
||||
[
|
||||
rehypeWrap,
|
||||
{ selector: 'table', wrapper: 'div.overflow-auto' },
|
||||
],
|
||||
[rehypeImgSize, { dir: './static' }],
|
||||
[
|
||||
/** 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: [
|
||||
[
|
||||
remarkExternalLinks,
|
||||
{
|
||||
target: '_blank',
|
||||
},
|
||||
],
|
||||
slug,
|
||||
[
|
||||
headings,
|
||||
{
|
||||
behavior: 'append',
|
||||
linkProperties: {},
|
||||
content: function (node) {
|
||||
return [
|
||||
h('span.icon.icon-link header-anchor', {
|
||||
ariaLabel: toString(node) + ' permalink',
|
||||
}),
|
||||
];
|
||||
},
|
||||
},
|
||||
],
|
||||
remarkSetImagePath,
|
||||
remarkLinkWithImageAsOnlyChild,
|
||||
remarkHeadingsPermaLinks,
|
||||
getHeadings,
|
||||
[
|
||||
remarkEmbedVideo,
|
||||
{
|
||||
width: 800,
|
||||
height: 400,
|
||||
noIframeBorder: true,
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
// import { mdsvexGlobalComponents } from './src/lib/utils/mdsvexGlobalComponents.js/index.js';
|
||||
import { mdsvex } from 'mdsvex';
|
||||
import mdsvexConfig from './mdsvex.config.js';
|
||||
/* Not using
|
||||
// import { mdsvexGlobalComponents } from './src/lib/utils/mdsvex-global-components.js';
|
||||
|
||||
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
extensions: ['.svelte', '.md'],
|
||||
extensions: ['.svelte', ...(mdsvexConfig.extensions || [])],
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
preprocess: [
|
||||
|
|
@ -90,43 +21,61 @@ const config = {
|
|||
preprocess({
|
||||
postcss: true
|
||||
}),
|
||||
mdsvexGlobalComponents({
|
||||
dir: `$lib/components`,
|
||||
list: [['CodeFence', 'code-fence.svelte']],
|
||||
extensions: ['.md'],
|
||||
}),
|
||||
mdsvex(mdsvexOptions)
|
||||
// No neeed rn unless using mdsvex highlighter with svelte components
|
||||
//mdsvexGlobalComponents({
|
||||
// dir: `$lib/components/blog`,
|
||||
// list: ['CodeFence.svelte'],
|
||||
// extensions: ['.md']
|
||||
// }),
|
||||
mdsvex(mdsvexConfig)
|
||||
],
|
||||
|
||||
vitePlugin: {
|
||||
inspector: true,
|
||||
inspector: true
|
||||
},
|
||||
kit: {
|
||||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
||||
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||
|
||||
adapter: adapter({
|
||||
runtime: 'nodejs18.x'
|
||||
}),
|
||||
adapter: adapter({}),
|
||||
// sometimes problems with
|
||||
alias: {
|
||||
$lib: path.resolve('src', 'lib'),
|
||||
$root: path.resolve('/'),
|
||||
$src: path.resolve('src'),
|
||||
$routes: path.resolve('src', 'routes'),
|
||||
$content: path.resolve('src', 'content')
|
||||
$routes: path.resolve('src', 'routes')
|
||||
},
|
||||
// TODO: FIX Banning external malware scripts for security and privacy of users, threw errors,
|
||||
// csp: {
|
||||
// directives: {
|
||||
// 'script-src': ['self']
|
||||
// },
|
||||
// reportOnly: {
|
||||
// 'script-src': ['self']
|
||||
// }
|
||||
// },
|
||||
csrf: {
|
||||
checkOrigin: process.env.NODE_ENV === 'development' ? false : true
|
||||
},
|
||||
prerender: {
|
||||
handleHttpError: ({ path, referrer, message }) => {
|
||||
// ignore deliberate link to shiny 404 page
|
||||
if (path === '/not-found' && referrer === '/404') {
|
||||
crawl: true,
|
||||
handleMissingId: 'warn',
|
||||
handleHttpError: (details) => {
|
||||
// Handle blog trying to prerender relative links that it can't
|
||||
if (
|
||||
details.status == 404 &&
|
||||
details.path.startsWith('/blog') &&
|
||||
details.referenceType == 'linked'
|
||||
) {
|
||||
console.warn(`PRERENDER ignored route ${details.path}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// otherwise fail the build
|
||||
throw new Error(message);
|
||||
throw new Error(`${details.status} ${details.path} from ${details.referrer}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
Loading…
Reference in New Issue