Gathering examples

[pngwn]

Hello, as I think about possible future APIs, I would like to take a closer look at what people are building with mdsvex.

If you have built something with mdsvex and the source code is available, then please drop a link to the source (and a demo/deploy if one is available) so I can take a look.

No example is too complex or too simple!

Thanks.

[spences10]

I have a couple of examples, one I have asked about already and I think has been covered in the v1 - early feedback discussion with regard to the ToC and an example on how to resolve it.

I wouldn't say it's a unique use case but being able to access headings outside of the document is something I'd like to achieve.

The first example is for Cheat Sheets where I'm displaying page titles and a the h2's on the index.

The next example is a MDsveX Blog Starter where I'm trying to accommodate for a nested file structure, thanks to @mvasigh for the great example! His example is named files in a flat folder whereas I'm trying to cater for users that may be coming from a nested folder structure (like the Gatsby starter blog).

[vedam]

Coming from kirby (php based flatfile-cms) i learned very fast the advantages of "just files and folders". Since I have no to little backend experience and am also only self-taught in the code sector, this database-less approach is the easiest way for me to get my website/portfolio on the road.

After some experiments on js-side into vanilla/react/preact-land I eventually stumbled across svelte/sapper (around upcoming v3), which supported my preference for simple/fast/understandable solutions to 100%.

I was always a bit envious of the react world at first, which had something kirby-like going on with .mdx. Fortunately for me, I think mdsvex saw the light of day relatively soon.
Boom, all ingredients were together.
My wish for a flatfile-kind-of-CMS became reality.
Bonus: With frontmatter I also have the possibility to add data to the files. Perfect.

I'm currently working on porting my site from sapper to sveltekit (work in progress) and the only difficulties I mostly stumble over are backend issues of linking (or how to make a request properly), which can be safely blamed on my lack of expertise in this sector.
I have no idea if this thing is best-practice in every detail, but hey, it works. And I'm mostly able to understand how.

Otherwise, my work in the future will be limited to simply creating a new .svelte.md file in the appropriate folder for a new case, and: done.
Whether blog or portfolio the underlying mechanisms are the same.

svelte and mdsvex are inseparable for me and I can't emphasize enough how grateful I am for this tool.

[nosovk]

We build site and blog on sapper with mdsvex, currently migrating it to Svelte Kit - MailCheck-co/mailcheck.site#281
Also we have a few similar projects, but not open-sourced. Like portfolio site\blog etc,

[wlach]

Mentioned this is another thread (#259 (comment)) but I've been working on a tool for creating interactive data driven stories using mdsvex called irydium: https://github.com/irydium/irydium

[kwaa]

maybe I'm late?
I redesigned my blog using SvelteKit and MDSveX (and WindiCSS, DaisyUI, Shiki... etc).
although it has not been organized into a template for release, can view all the codes at present (maybe a bit messy).
Site: https://kwaa.dev
Source: https://github.com/kwaa/blog

UPDATE: now released. importantimport/urara

[jamesb93]

I built my thesis with mdsvex as the backbone if that is interesting to anyone.

It is hosted at https://harnessing.xyz with the code at https://github.com/jamesb93/harnessing

[Amerlander]

I forked mvasighs blog template and added some features: https://github.com/Amerlander/sveltekit-mdsvex-blog

Its more a case study how it works, I use it for a page I build atm, but for that page I would not need all these things.

A lot of stuff is still in progress and also could be improved, but I just wanted to see how far I can go and therefore focused on getting it done rather than getting it perfect.

What I like and would love to be able to archive with mdsvex 1.0:

• Content and other code is separated, so authors do not see the code stuff. The content folder is located in /src/contents/
• also the coders do not have to repeat the code of all [slug].json and [slug].svelte files for each endpoint
• Content and assets are in one folder together, so authors can drop their image where the content files are
• Images in frontmatter are exported to the json files and therefore available in other pages
• image tags are using vite-imagetools
• image tags are supporting glob paths to import all files in a folder (![](./?...03?page-with-images/images/*.{jpg,jpeg,png}|w=400))
• predefined components are usable trough remarkContainers (https://github.com/Amerlander/sveltekit-mdsvex-blog/blob/2e8541a1fb97194262dc8748cbb411420e41ca89/src/content/articles/index.de.svx#L10)
• neither for images nor for predefined components any import is needed (so no script tag needed for using components or images)
• subpages are available in the meta of each page (see index page)
• multiple templates can be defined in frontmatter
• multilanguage is not implemented yet, but is planned, so each file in content can have a language extension (.en.svx). You either have to choose a language to render to then (and deploy them to separate destinations) or each language will render in an own subpath (domain.com/en/). I think this will also only work because the content is not in the routes folders

Downsides:

• Sveltekit Layouts are still working, but can't be applied by specific route. The mdsvex layouts are working, but I use them to import my custom components, so I didn't liked to repeat me there for each layout. Maybe nesting would be an option, but I just created an additional templating which basically uses components. (https://github.com/Amerlander/sveltekit-mdsvex-blog/blob/main/src/lib/layouts/LayoutLoader.svelte)
• Only working for static adapter, a lot of work for prerendering.
• routes are now created in two places: /src/contents and /src/routes
• /src/content/ can only as deep as /src/routes/ is.
• the predefined components in markdown syntax is not what I would imagine for that usecase.
• I order pages by prepending [...i]. Since [ and ] are glob parameters using glob imports the author has to use replace them with ? instead.

[nosovk]

We build loan company product with mdsvex - https://getfin.com.ua/ could be blocked from access for users outside Ukraine. But you may check stage. All pages built with MDSvex, with custom tags override (custom P, quote, A, Img).

[nosovk]

We build https://b4ukraine.org/ with MDSvex. All articles are Markdown files, rendered with MDSvex and custom tags for to support vite-imgtools. Unfortunately repo is private for now :(

[git-no]

The benefits of MDSvex and Contentlayer combined, dynamic rendering with only two main lines.
https://github.com/git-no/sveltekit-contentlayer-example