A SvelteKit blog template built on mdsvex and Tailwind.
-
pngwn for mdsvex and helping me with the
mdsvex-relative-images
plugin -
Tailwind's "Spotlight" blog template
- Overall theme is heavily based on this template
-
All who have contributed!
A SvelteKit blog template
Home Page: https://sveltekit-blog-template.vercel.app
License: MIT License
A SvelteKit blog template built on mdsvex and Tailwind.
pngwn for mdsvex and helping me with the mdsvex-relative-images
plugin
Tailwind's "Spotlight" blog template
All who have contributed!
Everything that isn't Chrome renders the table of content in a post to further offscreen to the right, visible only with a zoom out
Hi,
Thanks for creating this awesome package. I was wondering if it was possible to recreate this package using typescript?
One annoying thing with markdown is if you add a single line break gets removed in the final output.
Double line breaks (double return) creates a bigger gap.
The solution is to us <br>
html break tag.
Is it possible to update this template parse single line breaks automatically to <br>
tag.
When you switch to a different post from a post page by clicking on the PostPreview
, the content updates but the post title, data and reading time does not get updated, it still shows the data of previous post.
Hello, I took your template as a reference for my website. However, it doesn't work well when I change the layout and content. Can you review the code and help me if it is wrong? I have corrected it in the header.svelte file and the support page. You can refer to it at: https://github.com/NVCDevelopmentTeam/Zepp-OS-ScreenReader it is located in the site/htdocs directory and you can check the layout file because I still keep the two files in the tailwind css to it works fine. I hope, you can help me debug it so it works properly because I am blind and not familiar with css. Thank.
The PostPreview shows a preview of a post's body using the post.preview
tag, see here. This works fine when the markdown file does not specify a preview text (as the example posts do), as then the first <p>
element is used (see here, but for me it does not work when a preview text is specified, as this line stringifies the preview. Thus, for me using asterisks for bold ends up shown as **this**
. How can I correctly render the preview markdown?
Hey Matt!
I'm putting together a guide on adding an RSS feed using this template as reference and there's an error after installing dependencies and running the dev server.
Turning off the export const prerender = true
flag in src/routes.svelte
resolves this.
I can make a PR for it if you like?
I've encountered an issue with the post date, regarding timezone and date format. Even with the .toLocaleDateString()
it output all kinds of buggy results on the built page, different from the actual date I typed on the header of the .md
files.
I'm located in Brazil (UTC -3 hours) and our locale date format is dd/MM/yyyy.
I managed to get around the problem by making some modifications to the code as follows, and I thought others could benefit from it, if I implemented correctly.
(I'm not able to test on other timezones and other locale date formats)
/src/lib/get-posts.js
...
// ADDED THIS FUNCTION
function timezoneOffset(date) {
const offsetInMilliseconds = new Date().getTimezoneOffset() * 60 * 1000;
return new Date(new Date(date).getTime() + offsetInMilliseconds);
}
// Get all posts and add metadata
const posts = Object.entries(import.meta.globEager('/posts/**/*.md'))
.map(([filepath, post]) => {
return {
...
// remove timezone from date
date: post.metadata.date ? timezoneOffset(new Date(post.metadata.date)).toISOString() : undefined, // WRAPPED THE DATE WITH IT HERE
...
...
/src/lib/components/PostPreview.svelte
...
<div class="opacity-70">
<time>{format(new Date(parseISO(post.date)), 'dd/MM/yyyy')}</time> <!-- CHANGED HERE -->
•
<span>{post.readingTime}</span>
</div>
...
/src/routes/posts/[slug].svelte
...
<div class="opacity-70">
<time datetime={new Date(date).toISOString()}>{format(new Date(parseISO(date)), 'dd/MM/yyyy')}</time> <!-- AND HERE -->
•
<span>{readingTime}</span>
</div>
...
If this works for other regions of the world, it'd be nice if someone more experienced than me could send a pull request.
Thank you so much for providing this demo.
I was not sure what you consider to be fair use when copying the code in this repo so i felt i should ask permissions (and license clarifications) as opposed to copy and pasting :-)
Best Regards
I tried to update with the latest version @sveltejs/kit ^1.0.0-next.357
Everything works fine, I only stumble across one issue after the update.
The issue is the /posts only returns 2 latest posts, even when you paginate you will always get the latest 2 blog post only until you do a browser based hard refresh.
The /posts.json endpoint also returns only 2 posts no matter how many blog posts you have.
The above issue does not seem to occur in dev mode npm run dev
,
it only occurs after you build the app npm run build && npm run preview
I want to update the kit because I find the param matcher feature really helpful to split my post to different category like /posts, /projects, /ideas
Hi guys is there any way to use relative links for images in the YAML ?
Hi @mattjennings !
I want to say that this repo has been an amazing learning tool for me ! thank you so so much for the time you spent creating it!
I am facing the dynamic loader issue you had in Dynamic imports fail to load in dev SSR. I tried to look at how you solved it in this repo but cant make it out for the life of me ! Surprisingly your code here works like a charm . I am am trying to figure what you did to circumvent the issue.
I created a repo to reproduce the issue in here. This is the output i get from that repo when i do yarn build
.
Could you please kindly take a look or explain how i would aork around this issue. It has been almost a year and i imagine maybe that bug is fixed by now.
Hi,
thanks for your code. I'm a newbie.
Is it possible to use the getPosts
function to dynamically loading the previous posts, for example for an infinite loading homepage?
A code like this one require an API/Endpoint to fetch the page, but I don't have the skills to translate that code for the getPosts
function (and I prefer to don't generate a json).
Any help are appreciated.
Hi,
I'm getting below error on console while loading the posts page. I have all the required dependencies and dev-dependencies. I searched on Google and Stackoverflow but the only answer I found was that my request is returning an HTML response instead on JSON.
Can you please point me in the right direction?
Unexpected token < in JSON at position 0 SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at Proxy.<anonymous> (file:///home/souravjamwal77/Desktop/Github_Projects/sourav.fun/svelte_sourav.fun/.svelte-kit/runtime/server/index.js:1749:21) at processTicksAndRejections (internal/process/task_queues.js:95:5) at async load ([...page].svelte:20:22) at async load_node (file:///home/souravjamwal77/Desktop/Github_Projects/sourav.fun/svelte_sourav.fun/.svelte-kit/runtime/server/index.js:1778:12) at async respond$1 (file:///home/souravjamwal77/Desktop/Github_Projects/sourav.fun/svelte_sourav.fun/.svelte-kit/runtime/server/index.js:2120:15) at async render_page (file:///home/souravjamwal77/Desktop/Github_Projects/sourav.fun/svelte_sourav.fun/.svelte-kit/runtime/server/index.js:2321:19) at async resolve (file:///home/souravjamwal77/Desktop/Github_Projects/sourav.fun/svelte_sourav.fun/.svelte-kit/runtime/server/index.js:2564:11) at async respond (file:///home/souravjamwal77/Desktop/Github_Projects/sourav.fun/svelte_sourav.fun/.svelte-kit/runtime/server/index.js:2497:20) at async file:///home/souravjamwal77/Desktop/Github_Projects/sourav.fun/svelte_sourav.fun/node_modules/@sveltejs/kit/dist/chunks/index.js:244:24
Do you have planned to add tag support?
Hi, first of all, great blog template. Like it a lot.
What here is dependent on pnpm? Can't find it when I do npm ls pnpm
Tried deploying to Cloudflare pages tonight but got an pnpm error.
I can't figure out how to fix this.
https://bndkt.com/blog/2022/using-pnpm-with-cloudflare-pages
https://community.cloudflare.com/t/pnpm-with-cloudlfare-pages/513299
I am currently using version 2 on cloudflare.
Version: 2 (latest)
Date released:
5/17/2023
OS version:
Ubuntu 22.04.2
Default versions:
Go: 1.20.5 | Node.js: 18.16.1 | Python: 3.11.4 | Ruby: 3.2.2
[Show more](https://developers.cloudflare.com/pages/platform/language-support-and-tools/)
Build command:
npm run build
Which then runs vite build
.
Here is the error log.
21:53:46.406 | Detected the following tools from environment: [email protected], [email protected], [email protected]
21:53:46.407 | Installing project dependencies: pnpm install
21:53:47.525 | ERR_PNPM_FROZEN_LOCKFILE_WITH_OUTDATED_LOCKFILE Cannot perform a frozen installation because the version of the lockfile is incompatible with this version of pnpm
21:53:47.526 |
21:53:47.526 | Try either:
21:53:47.527 | 1. Aligning the version of pnpm that generated the lockfile with the version that installs from it, or
21:53:47.527 | 2. Migrating the lockfile so that it is compatible with the newer version of pnpm, or
21:53:47.527 | 3. Using "pnpm install --no-frozen-lockfile".
21:53:47.527 | Note that in CI environments, this setting is enabled by default.
21:53:47.572 | Error: Exit with error code: 1
21:53:47.572 | at ChildProcess. (/snapshot/dist/run-build.js)
21:53:47.572 | at Object.onceWrapper (node:events:652:26)
21:53:47.573 | at ChildProcess.emit (node:events:537:28)
21:53:47.573 | at ChildProcess._handle.onexit (node:internal/child_process:291:12)
21:53:47.580 | Failed: build command exited with code: 1
21:53:48.527 | Failed: error occurred while running build command
When clicking a link to another blog post, the table of contents on the right side of the page don't seem to update.
If the MD document contains the following content, it should compile successfully:
---
title: 香港10大免费露营地点推荐
date: 2023-1-10
---
## HK top camp 1
### wzn2
If the last line is changed to this, the build will fail:
---
title: 香港10大免费露营地点推荐
date: 2023-1-10
---
## HK top camp 1
### 湾仔南2
I'm trying to add page transitions to your wonderful template, but they simply don't work. I'm using https://joshcollinsworth.com/blog/build-static-sveltekit-markdown-blog as a guide, and I have no issues getting them to work in that code. Any hints? Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.