Giter Club home page Giter Club logo

sveltekit-blog-starter's Introduction

Hi there πŸ‘‹ I'm Josh Collinsworth.

I'm a front-end developer, currently at Deno (previously: Shopify).

I like building word games like, Quina and Hondo), and making things on CodePen. I also enjoy blogging on my website, where you can find more about me.

sveltekit-blog-starter's People

Contributors

anthonylebrun avatar dependabot[bot] avatar godber avatar jakxz avatar josh-collinsworth avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

sveltekit-blog-starter's Issues

Atom link in RSS feed

Hello, thanks for sharing this starter project.

I was looking at the RSS feed code and I saw this:

<atom:link href="https://${siteURL}/rss.xml" rel="self" type="application/rss+xml"/>

Isn't it supposed to point to the feed itself, which I believe is at /api/rss.xml? So should it be:

<atom:link href="https://${siteURL}/api/rss.xml" rel="self" type="application/rss+xml"/>

?

Prerendered content generates initial 500 status, then 200 on refresh

I cloned the repo today (the version that includes the PR to update deps to SK 1.0), installed the dependencies, committed and pushed to github.

Then I set up a project in vercel. I did nothing to the settings - build defaults to detecting SvelteKit and I adjusted none of the commands. I deployed.

Home page looks great! :)

But when I click on the blog link, I get a 500 error.

On refresh, the page renders as expected.

The same happens with every post inside of this page - initial 500, then displays.

This doesn't happen locally.

My next step is to test a local build and preview, but I'm running out of time this morning and wanted to get this issue written first.

I'll update with additional findings.

Allow plugable themes

Hugo and many other static site generators provide multiple pre-built themes, like https://themes.gohugo.io/ that provides nearly 200 themes. This is really handy to quickly explore different styles and get started. I would be great to provide a plugin-like infrastructure that allows users to create a unified theme, so that people can start to write new themes. Once this is done, one can start to think about creating more themes and publishing them on some web pages.

I'm not sure what would be the best technical way to do this, but we can maybe let the user define an alias called mainTheme to some module (say myGreatTheme, that might either be installed via npm, or that is cloned from some repository, allowing the user to easily tweak minor theme options), maybe via https://www.npmjs.com/package/module-alias or maybe some sveltekit alias like https://medium.com/@rizqyhi/adding-new-path-alias-in-sveltekit-1127a1138e7 (to be honest I know very little about how modules work in js), so that later this library could run:

<script>
  import { Header } from 'mainTheme'; // See that we use `mainTheme` here instead of `$lib/component`
  // …
</script>
…
<Header someOptionalProps="foo">
  …
</Header>

Ideally, you would also:

  • document a number of components that are typically needed to be present (possibly refactoring the components provided by this lib to allow greater configurability)
  • provide a fallback mechanism, so that if myGreatTheme does not provide, say, Header, then we use some default components for greater backward compatibility
  • provide a way to send to the theme with some options, like maybe mainTheme comes in a dark and light style.
  • allow the user to easily change a nested component, like maybe a given theme uses some buttons, then the theme might want to be able to allow the user to overwrite the theme of all buttons at once.

I guess that one can get inspired by how flowbite or skeleton work to provide customizable components.

npm run build issue

velte-kit/output/client/_app/immutable/nodes/5.lgHxx4ap.js                                      6.84 kB β”‚ gzip:  2.72 kB
.svelte-kit/output/client/_app/immutable/entry/app.6DZ-rLV4.js                                    6.93 kB β”‚ gzip:  2.36 kB
.svelte-kit/output/client/_app/immutable/chunks/index.T8xtbQjq.js                                 9.97 kB β”‚ gzip:  4.21 kB
.svelte-kit/output/client/_app/immutable/nodes/0.u6SMy1NS.js                                     11.77 kB β”‚ gzip:  4.32 kB
.svelte-kit/output/client/_app/immutable/chunks/README.qbVoyzal.js                               21.19 kB β”‚ gzip:  7.48 kB
.svelte-kit/output/client/_app/immutable/entry/start.dDGYyjlR.js                                 27.86 kB β”‚ gzip: 11.20 kB
βœ“ built in 2.45s
  301 /blog/page -> /blog
  301 /blog/category/*/page/* -> /blog/category/*
  301 /blog/category/page/* -> /blog
  301 /blog/page/* -> /blog
SvelteKitError: Not found: /eyal.com/api/rss.xml
    at resolve2 (file:///Users/eyal/Code/p_35_blog/.svelte-kit/output/server/index.js:2831:18)
    at resolve (file:///Users/eyal/Code/p_35_blog/.svelte-kit/output/server/index.js:2663:34)
    at #options.hooks.handle (file:///Users/eyal/Code/p_35_blog/.svelte-kit/output/server/index.js:2905:71)
    at respond (file:///Users/eyal/Code/p_35_blog/.svelte-kit/output/server/index.js:2661:43) {
  status: 404,
  text: 'Not Found'
}

node:internal/event_target:1062
  process.nextTick(() => { throw err; });
                           ^
Error: 404 /eyal.com/api/rss.xml (linked from /)
To suppress or handle this error, implement `handleHttpError` in https://kit.svelte.dev/docs/configuration#prerender
    at file:///Users/eyal/Code/p_35_blog/node_modules/@sveltejs/kit/src/core/config/options.js:201:13
    at file:///Users/eyal/Code/p_35_blog/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:64:25

I'm getting the rss.xml error - any idea why? I do have the rountes/api/rss.xml/+server.js file in place (unchanged)

Screenshot 2024-03-14 at 17 47 57

api routes are not pre-renderable πŸ˜•

Just want to point this out because I think the build step is currently broken [with the latest HEAD at time of writing], but I'm curious if you're seeing different results.

Trying to figure out how to get sveltekit's prerendering to ignore all my api/ routes because they're not prerenderable?
I've set:

export const prerender = 'auto'

in my +layout.js hoping that would figure out the difference? true and 'auto' produce the same errors πŸ˜•

stack traces
Error: api/rss.xml is not prerenderable
    at render_endpoint (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:461:11)
    at resolve2 (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:2370:28)
    at async respond (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:2429:12)
    at async globalThis.fetch (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/node_modules/.pnpm/@[email protected]_qevq5tvhizyxp44gfhkn6m3ljq/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:130:21)
    at async load (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/entries/pages/_layout.js:5:17)
    at async load_data (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:1360:16)
    at async file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:1901:18
Error: api/posts.json is not prerenderable
    at render_endpoint (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:461:11)
    at resolve2 (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:2370:28)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async respond (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:2429:12)
    at async globalThis.fetch (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/node_modules/.pnpm/@[email protected]_qevq5tvhizyxp44gfhkn6m3ljq/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:130:21)
    at async load (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/entries/pages/blog/_page.server.js:2:19)
    at async load_server_data (file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:1301:18)
    at async file:///Users/jasonkurian/src/github.com/jakxz/jakxz.github.io/.svelte-kit/output/server/index.js:1876:18

I think i'm landing here in the build step

I have also tried putting

export const prerender = false;

in a +layout.server.js
and at the top of every one of the api/ +server.js files with no luck.

With a bit of debugging it looks like my state.prerendering object in the render_endpoint method is:

{
  "dependencies": {}
}

essentially empty.

Curious if you've run into this or figured out a way around it? I've asked around on the svelte discord as well but got nothing yet.

Get svelte components working properly

Hey @josh-collinsworth been trying to get components working properly in the markdown posts.

Currently they're able to import the HTML, but the CSS and JS elements are broken, or just plain don't import.

I've played around with the config - I believe the mdsvex() needs to be preprocessed, but if I do that, it breaks pretty much everything. The blog index, the post page etc.

Any ideas/thoughts on how to get this working without breaking the blog?

Error when building blog

First, I want to say thanks so much for your blog post and this blog starter. It's really helped me with learning more about svelte and sveltekit.

I was trying to build the website but I keep running into this problem below. I've tried troubleshooting but I'm not exactly sure what's going wrong here. Do you have any insights?

  301 /blog/page -> /blog
file:///Users/teonbrooks/codespace/_websites/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:429
		throw new Error(
		      ^

Error: The following routes were marked as prerenderable, but were not prerendered:
  - api/posts/category/[category],  - api/posts/page/[page],  - blog/category/page/[page],  - blog/page/[page],  - blog/category/[category]/page,  - blog/category/[category]/page/[page]

See https://kit.svelte.dev/docs/page-options#prerender-troubleshooting for more info
    at prerender (file:///Users/teonbrooks/codespace/_websites/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:429:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v18.0.0
[vite-plugin-svelte-kit] Prerendering failed with code 1
error during build:
Error: Prerendering failed with code 1
    at ChildProcess.<anonymous> (file:///Users/teonbrooks/codespace/_websites/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/exports/vite/index.js:438:15)
    at ChildProcess.emit (node:events:527:28)
    at ChildProcess._handle.onexit (node:internal/child_process:291:12)

Use with Cloudflare Pages

Hi Josh. Thanks for this excellent repo. I'm a total noob with SvelteKit sorry if this is a dumb question. I am trying to publish my site to Cloudflare Pages.

I have changed

"@sveltejs/adapter-static": "^1.0.0-next.42",

to

"@sveltejs/adapter-cloudflare": "^1.0.0-next.38",

And then also used import adapter from '@sveltejs/adapter-cloudflare' in svelte.config.js.

However, when Cloudflare builds the app it's borking with complaints about the pre-rendering. I guess this is because you've set things up to only support pre-rendering, and when I replaced adapter-static with adapter-cloudflare it's undoing your configuration.

Error: The following routes were marked as prerenderable, but were not prerendered:
--
08:10:15.125 | - api/posts/category/[category],  - api/posts/page/[page],  - blog/category/page/[page],  - blog/page/[page],  - blog/category/[category]/page,  - blog/category/[category]/page/[page]

Please could you shed any light on what I'm doing wrong? Thank you.

I can't see any markdown posts in the build.

It was stated that I only had to drop a .md file somewhere and it would be available automatically.
The conclusion I'm making is that "npm run build" has to be run every time I publish a new post.
I was hoping this project could be dropped at any file server, like Google Cloud Storage and work directly.
Like this static project, made with svelte:

https://storage.googleapis.com/bildbanken2/index.html

(I had to add index.html to the url, as it is not served by a web server.)

`rss.xml` return `404` in prod

rss.xml returns a 404 Β―_(ツ)_/Β―

Could be an issue with Netlify, same happens on mine. (GitHub)

Tried clearing cache and redeploying but same thing. Log says it gets generated so idk.

2:26:54 AM: .svelte-kit/output/server/entries/endpoints/api/rss.xml/_server.js                                 1.52 KiB

Components don't render into built posts

I'm not currently able to render Svelte components inside of the posts that are pre-rendered at the build stage.

The postContent is compiled via an {@html data.postContent} tag, which seems to ignore the script and style tags and simply output the html. Or maybe not quite that, but the end result is that the component isn't functional inside of these post pages, just displayed.

Here is my repo showing this:
https://github.com/lakebayagency/test-boinger

Boinger is a component from the mdsvex playground: https://mdsvex.com/playground

To see the problem in action, go to the home page and observe that the boinger works fine inside of this page, which is rendered using a svelte:component tag.

Click the link below that, which will take you to a post that also references the Boinger component, but doesn't actually work.

Not sure what possible solutions are.

Callout width larger than total screen width, breaks on smaller screens

Problem: The width of the .callout element is larger than the width of the screen, causing a resize and a white bar to appear on the right (visible in the header/footer of the page).

Root cause: Line 5 of _components.scss - the max width is unset.

Potential Solutions:

  • Change line 5 to max-width: calc(100vw + 1rem); - fixing the white bar on the right, but now having rounded corners visible only on the right side.
  • Change lines 4 and 6 to width: calc(100% + 2rem); and margin: 2rem -1rem 2rem -1rem; accordingly, essentially making the callout fit the size of the screen. *This may require additional changes to the padding, depending on the desired look.

Category won't fully populate for blog posts

I noticed that under the category section of my blog that it is not fully populated. I believe this is caused by the line below

const res = await fetch(`${url.origin}/api/posts.json`)

when the posts.json is being fetched, it's being limited with the parameter postsPerPages, which only retrieves the first page of blog posts. However, to properly populate the category page, it needs to retrieve the entirety of posts.

It doesn't currently have a way to accept an argument

github page

when i made it into a github page it did not look at all as the dev version

`npm run build` fails on tip of main

I noticed that npm run build fails on the tip of main:

user@machine:/tmp$ git clone [email protected]:josh-collinsworth/sveltekit-blog-starter.git
Cloning into 'sveltekit-blog-starter'...
remote: Enumerating objects: 1290, done.
remote: Counting objects: 100% (413/413), done.
remote: Compressing objects: 100% (138/138), done.
remote: Total 1290 (delta 316), reused 275 (delta 275), pack-reused 877
Receiving objects: 100% (1290/1290), 884.28 KiB | 2.26 MiB/s, done.
Resolving deltas: 100% (663/663), done.
user@machine:/tmp$ cd sveltekit-blog-starter/
user@machine:/tmp/sveltekit-blog-starter$ npm install

added 207 packages, and audited 208 packages in 1s

52 packages are looking for funding
  run `npm fund` for details

1 high severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
user@machine:/tmp/sveltekit-blog-starter$ npm run build

> [email protected] build
> vite build

vite v5.0.12 building SSR bundle for production...
βœ“ 119 modules transformed.
vite v5.0.12 building for production...
βœ“ 108 modules transformed.
.svelte-kit/output/client/_app/version.json                                               0.03 kB β”‚ gzip:  0.05 kB
.svelte-kit/output/client/.vite/manifest.json                                             9.13 kB β”‚ gzip:  1.02 kB
.svelte-kit/output/client/_app/immutable/chunks/each.-oqiv04n.js                          0.07 kB β”‚ gzip:  0.09 kB
.svelte-kit/output/client/_app/immutable/chunks/index.oiCz_B55.js                         0.11 kB β”‚ gzip:  0.12 kB
.svelte-kit/output/client/_app/immutable/nodes/11.pJKFA2UM.js                             0.19 kB β”‚ gzip:  0.17 kB
.svelte-kit/output/client/_app/immutable/nodes/8.pJKFA2UM.js                              0.19 kB β”‚ gzip:  0.17 kB
.svelte-kit/output/client/_app/immutable/chunks/config.9TwfRihT.js                        0.30 kB β”‚ gzip:  0.22 kB
.svelte-kit/output/client/_app/immutable/chunks/control.pJ1mnnAb.js                       0.34 kB β”‚ gzip:  0.21 kB
.svelte-kit/output/client/_app/immutable/chunks/Callout.G8ur-app.js                       0.74 kB β”‚ gzip:  0.49 kB
.svelte-kit/output/client/_app/immutable/chunks/preload-helper.0HuHagjb.js                0.91 kB β”‚ gzip:  0.56 kB
.svelte-kit/output/client/_app/immutable/nodes/1.SS8rTGE5.js                              1.42 kB β”‚ gzip:  0.81 kB
.svelte-kit/output/client/_app/immutable/nodes/4._25Q4NZo.js                              1.44 kB β”‚ gzip:  0.77 kB
.svelte-kit/output/client/_app/immutable/nodes/2.jcRJ92rD.js                              1.64 kB β”‚ gzip:  0.87 kB
.svelte-kit/output/client/_app/immutable/nodes/6.CeOQR6v9.js                              1.83 kB β”‚ gzip:  0.97 kB
.svelte-kit/output/client/_app/immutable/nodes/3.QeNnDV5Q.js                              1.99 kB β”‚ gzip:  1.04 kB
.svelte-kit/output/client/_app/immutable/nodes/7.2_yB7NYC.js                              2.19 kB β”‚ gzip:  1.15 kB
.svelte-kit/output/client/_app/immutable/chunks/mdsvex-component-example.11C05Tzm.js      2.34 kB β”‚ gzip:  1.20 kB
.svelte-kit/output/client/_app/immutable/chunks/scheduler.Urk58y9q.js                     2.37 kB β”‚ gzip:  1.12 kB
.svelte-kit/output/client/_app/immutable/nodes/12.fveUTNV4.js                             2.77 kB β”‚ gzip:  1.33 kB
.svelte-kit/output/client/_app/immutable/nodes/10.Ap9OiEwe.js                             2.77 kB β”‚ gzip:  1.33 kB
.svelte-kit/output/client/_app/immutable/chunks/singletons.yiWd7qOr.js                    2.98 kB β”‚ gzip:  1.52 kB
.svelte-kit/output/client/_app/immutable/nodes/9.j_tp534v.js                              3.08 kB β”‚ gzip:  1.47 kB
.svelte-kit/output/client/_app/immutable/nodes/13.B79RsLSY.js                             3.10 kB β”‚ gzip:  1.41 kB
.svelte-kit/output/client/_app/immutable/chunks/heading-links-example.8k5nRDwS.js         3.27 kB β”‚ gzip:  1.28 kB
.svelte-kit/output/client/_app/immutable/chunks/Pagination.qBPI-jEN.js                    4.82 kB β”‚ gzip:  2.06 kB
.svelte-kit/output/client/_app/immutable/chunks/syntax-highlighting-example.QUXGYAwc.js   6.00 kB β”‚ gzip:  1.93 kB
.svelte-kit/output/client/_app/immutable/nodes/5.0y2puOeF.js                              6.15 kB β”‚ gzip:  2.59 kB
.svelte-kit/output/client/_app/immutable/entry/app.DfZb3kKz.js                            6.93 kB β”‚ gzip:  2.37 kB
.svelte-kit/output/client/_app/immutable/chunks/index.GpMQ2F1a.js                         9.97 kB β”‚ gzip:  4.21 kB
.svelte-kit/output/client/_app/immutable/nodes/0.Bp5Y4N42.js                             11.85 kB β”‚ gzip:  4.30 kB
.svelte-kit/output/client/_app/immutable/chunks/README.4z_DNvg3.js                       21.19 kB β”‚ gzip:  7.48 kB
.svelte-kit/output/client/_app/immutable/entry/start.NyYNPe7Q.js                         27.86 kB β”‚ gzip: 11.20 kB
βœ“ built in 590ms
  301 /blog/page -> /blog
  301 /blog/category/*/page/* -> /blog/category/*
  301 /blog/category/page/* -> /blog
  301 /blog/page/* -> /blog
SvelteKitError: Not found: /example.com/api/rss.xml
    at resolve2 (file:///tmp/sveltekit-blog-starter/.svelte-kit/output/server/index.js:2831:18)
    at resolve (file:///tmp/sveltekit-blog-starter/.svelte-kit/output/server/index.js:2663:34)
    at #options.hooks.handle (file:///tmp/sveltekit-blog-starter/.svelte-kit/output/server/index.js:2905:71)
    at respond (file:///tmp/sveltekit-blog-starter/.svelte-kit/output/server/index.js:2661:43) {
  status: 404,
  text: 'Not Found'
}

node:internal/event_target:1100
  process.nextTick(() => { throw err; });
                           ^
Error: 404 /example.com/api/rss.xml (linked from /)
To suppress or handle this error, implement `handleHttpError` in https://kit.svelte.dev/docs/configuration#prerender
    at file:///tmp/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/config/options.js:201:13
    at file:///tmp/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:64:25
    at save (file:///tmp/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:399:4)
    at visit (file:///tmp/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:232:3)
Emitted 'error' event on Worker instance at:
    at [kOnErrorMessage] (node:internal/worker:326:10)
    at [kOnMessage] (node:internal/worker:337:37)
    at MessagePort.<anonymous> (node:internal/worker:232:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:826:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28)

Node.js v20.11.0
user@machine:/tmp/sveltekit-blog-starter$

This does not happen with 5360246f6a30efa5ab0895033af7f1815b036aa2.

npm run build error

When I do a git clone; cd repo; npm i; npm run build... it show the following error on missing file/folder...

.svelte-kit/output/server/index.js 80.14 kB
301 /blog/page -> /blog
301 /blog/category/page/* -> /blog
301 /blog/page/* -> /blog
node:fs:600
handleErrorFromBinding(ctx);
^

Error: ENOENT: no such file or directory, open 'C:\Users\xquis\Documents\develop\sveltekit-blog-starter.svelte-kit/output/prerendered/pages/api/posts/page/'
at Object.openSync (node:fs:600:3)
at writeFileSync (node:fs:2221:35)
at save (file:///C:/Users/xquis/Documents/develop/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:348:4)
at visit (file:///C:/Users/xquis/Documents/develop/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:212:3) {
errno: -4058,
syscall: 'open',
code: 'ENOENT',
path: 'C:\Users\xquis\Documents\develop\sveltekit-blog-starter\.svelte-kit/output/prerendered/pages/api/posts/page/
'
}

Node.js v18.13.0
[vite-plugin-sveltekit-compile] Prerendering failed with code 1
error during build:
Error: Prerendering failed with code 1
at ChildProcess. (file:///C:/Users/xquis/Documents/develop/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/exports/vite/index.js:551:15)
at ChildProcess.emit (node:events:513:28)
at ChildProcess._handle.onexit (node:internal/child_process:291:12)
PS C:\Users\xquis\Documents\develop\sveltekit-blog-starter>

Update for sveltekit 1.0

This is a great example! Do you have any plans on updating this for the recent release of sveltekit 1.0?

Getting error while trying to build the project

Hello, I am pretty new to Svelte world and landed here following your awesome post on how to create a MD blog using sveltekit. Thank you for all the effort, I played around with the project in development mode and the level of time and effort put into this amazing work shows well.

When I try to build the project (after cloning it from github), it errors out with the following message. Any idea what I am doing wrong ?
Error message gives no clue as to what's missing.

Steps executed:

  1. Clone the repo

git clone https://github.com/josh-collinsworth/sveltekit-blog-starter.git

  1. CD into sveltekit-blog-starter and install the dependencies.

cd sveltekit-blog-starter
npm install

  1. Run the project. Everything works fine am able to open every single post and page.

npm run dev

  1. Build the project:

npm run build

  1. Throws the below error.
. . .
.svelte-kit/output/server/chunks/README.js                                                     11.28 KiB
  301 /blog/page -> /blog
  301 /blog/category/page/* -> /blog
  301 /blog/page/* -> /blog
node:fs:585
  handleErrorFromBinding(ctx);
  ^

Error: ENOENT: no such file or directory, open 'C:\Dev\nodejs\svelte-static-blog\sveltekit-blog-starter\.svelte-kit/output/prerendered/pages/api/posts/category/*'
    at Object.openSync (node:fs:585:3)
    at writeFileSync (node:fs:2155:35)
    at save (file:///C:/Dev/nodejs/svelte-static-blog/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:317:4)
    at visit (file:///C:/Dev/nodejs/svelte-static-blog/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:196:3) {
  errno: -4058,
  syscall: 'open',
  code: 'ENOENT',
  path: 'C:\\Dev\\nodejs\\svelte-static-blog\\sveltekit-blog-starter\\.svelte-kit/output/prerendered/pages/api/posts/category/*'
}
[vite-plugin-svelte-kit] Prerendering failed with code 1
error during build:
Error: Prerendering failed with code 1
    at ChildProcess.<anonymous> (file:///C:/Dev/nodejs/svelte-static-blog/sveltekit-blog-starter/node_modules/@sveltejs/kit/src/exports/vite/index.js:443:15)
    at ChildProcess.emit (node:events:520:28)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)

If it helps, this is the content of my package.json file:

{
  "name": "sveltekit-blog-starter",
  "version": "1.4.2",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
  },
  "devDependencies": {
    "@sveltejs/adapter-static": "^1.0.0-next.42",
    "@sveltejs/kit": "next",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-svelte3": "^3.2.1",
    "mdsvex": "^0.9.8",
    "prettier": "^2.4.1",
    "prettier-plugin-svelte": "^2.4.0",
    "rehype-autolink-headings": "^6.1.0",
    "rehype-slug": "^5.0.0",
    "sass": "^1.43.4",
    "svelte": "^3.42.6",
    "vite": "^3.1.0"
  },
  "type": "module",
  "dependencies": {
    "just-throttle": "^4.0.1",
    "svelte-preprocess": "^4.9.8"
  }
}

I forked this repo and added features

Thanks for creating this repo!

I just wanted you and other people who come across is about my fork which has these features:

  • It lives under /blog instead of the top level so you can keep your main website separate.
  • Static site generation with hydration. Every route is compiled down to static HTML and routed with (optional) JavaScript, thanks to the SvelteKit static adapter.
  • Markdown support with GitHub Flavored Markdown (GFM).
  • Styles per component along with a single global stylesheet for general styles (mostly article content styles). With CSS variables and CSS nesting, there's no need for SASS!
  • mdvsex support so you can use Svelte components in your Markdown files!
  • Automatic page transitions.
  • Responsive and accessible defaults including a "skip to content" link, accessible navigation and components, and accessible emojis.
  • Basic SEO for blog posts.
  • RSS feed for users to easily subscribe to new posts.
  • Draft blog post functionality so you can save to the same place but not have the link show up in your listings or counts.
  • Footnotes functionality
  • Blog excerpt functionality so that you can show the start of your blog posts on the blog homepage instead of the description.
  • Tags (categories) functionality which make looking for specific types of posts easy.
  • Advanced pagination where only the nearest 5 pages are shown along with "first" and "last" page buttons when applicable.
  • Support for year sub-directories within posts. This makes organizing your posts much more pleasant. You could easily add the year to the URL if you'd like.
  • Recent posts functionality if you want to show the last X recent posts.
  • Archive functionality which is similar to the blog listing but only shows the title and tags with a different layout that focuses on the year it was published. Demo.
  • Collapsible sidebar.
  • Tweet and CodePen embeds.
  • Image lightboxing functionality with built in image serving for high DPI devices.
  • High quality search functionality using Pagefind.
  • Clickable section headings to make sharing to a particular part of a post a breeze.
  • Table of contents for blog posts that outlines the sections of each page.
  • Tweet button to let users more easily share to Twitter (X).
  • Automatic widow prevention to make your blocks of text look better.
  • Email signup functionality. It makes use of Mailchimp, but you could easily switch out the email provider for another of your choice.

Categories sort

Hey dude, so, been using your template to learn a bit of Sveltekit, thanks for all the work.

You'll notice the blog/category categories isn't correctly alphabetically sorted, here's the code I used to fix it:

	const sortedUniqueCategories = Object.values(uniqueCategories).sort((a, b) => {
		return a.title.localeCompare(b.title);
	});

error when trying to install NodeJS (modules) dependencies using npm

We are in the process of containerization a NodeJS application and running into an error when trying to install NodeJS (modules) dependencies using npm. The error message says, β€œECONNREFUSED” followed by the IP and 443 port number.

We initially thought that it might be due to the proxy configuration and set the proxy configuration to null; however, that has been ruled out and did not resolve the issue.

"npm config set proxy null
npm config set https-proxy null"

Please see the below contents of Dockerfile and the error message.

Any help or guidance you can provide would be greatly appreciated.

Thanks in advance!


Dockerfile:

FROM node

Create app directory

RUN mkdir /app
WORKDIR /app

Install app dependencies

A wildcard is used to ensure both package.json AND package-lock.json are copied

where available (npm@5+)

COPY package*.json /app

RUN npm cache clear --force
RUN npm cache verify

#RUN npm config set proxy null
#RUN npm config set https-proxy null

RUN npm config set registry https://registry.npmjs.org/ --global
RUN npm config set strict-ssl false
RUN npm set maxsockets 3
RUN npm -version
RUN node -v

#RUN npm install
RUN npm install -g [email protected]

If you are building your code for production

RUN npm ci --only=production

Bundle app source

COPY . .

EXPOSE 5000
CMD [ "node", "app.js" ]


ERROR:

STEP 12/15: RUN npm install -g [email protected]
npm ERR! code ECONNREFUSED
npm ERR! syscall connect
npm ERR! errno ECONNREFUSED
npm ERR! FetchError: request to https://registry.npmjs.org/npm failed, reason: connect ECONNREFUSED 104.16.25.35:443
npm ERR! at ClientRequest. (/usr/local/lib/node_modules/npm/node_modules/minipass-fetch/lib/index.js:130:14)
npm ERR! at ClientRequest.emit (node:events:513:28)
npm ERR! at TLSSocket.socketErrorListener (node:_http_client:488:9)
npm ERR! at TLSSocket.emit (node:events:525:35)
npm ERR! at emitErrorNT (node:internal/streams/destroy:151:8)
npm ERR! at emitErrorCloseNT (node:internal/streams/destroy:116:3)
npm ERR! at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
npm ERR! FetchError: request to https://registry.npmjs.org/npm failed, reason: connect ECONNREFUSED 104.16.25.35:443
npm ERR! at ClientRequest. (/usr/local/lib/node_modules/npm/node_modules/minipass-fetch/lib/index.js:130:14)
npm ERR! at ClientRequest.emit (node:events:513:28)
npm ERR! at TLSSocket.socketErrorListener (node:_http_client:488:9)
npm ERR! at TLSSocket.emit (node:events:525:35)
npm ERR! at emitErrorNT (node:internal/streams/destroy:151:8)
npm ERR! at emitErrorCloseNT (node:internal/streams/destroy:116:3)
npm ERR! at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
npm ERR! code: 'ECONNREFUSED',
npm ERR! errno: 'ECONNREFUSED',
npm ERR! syscall: 'connect',
npm ERR! address: '104.16.25.35',
npm ERR! port: 443,
npm ERR! type: 'system'
npm ERR! }
npm ERR!
npm ERR! If you are behind a proxy, please make sure that the
npm ERR! 'proxy' config is set properly. See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-11-29T18_24_19_209Z-debug-0.log
Error: error building at STEP "RUN npm install -g [email protected]": error while running runtime: exit status 1

adapter-auto to help with pre-rendering

Fairly new to the the world of Sveltekit but came up against this a few times today deploying on Vercel.

I don't know how this fits in with your setup, but I found the new adapter-auto did the job fixing my prerendering issues. Maybe it'll work with the static one as well deployed sites?

In svelte.config.js

import adapter from '@sveltejs/adapter-auto';

and adding "@sveltejs/adapter-auto": "next", to package.json.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.