[FEATURE] Add custom error page

[VeckoTheGecko]

No description provided.

[VeckoTheGecko]

Clearing assignee in case someone else wants to give this a stab. If anyone starts development, please post a comment here to discuss approach (and look of the 404 page) 🙂

[tutterown]

@VeckoTheGecko Any ideas on what we may want the page to look like? I can create a standard error page that will give a standard response. It's as simple as creating a +error.svelte file in the routes directory as shown here. Doing this would just give an error from the Climate Town page rather than the Github Pages error that currently appears.

[tutterown]

Here's an example of what it would look like. I can also have it just use the default error message 404: Not Found.

Note: This is a dynamic page that should catch any type of error, not just 404s. If we want to customize the 404 page specifically, I believe it would be a bit more involved.

I can also go ahead and commit the generic error now if you'd like while we work on the more complex solution if we go that route. Just let me know.

[VeckoTheGecko]

Updated title to match. The site at the moment doesn't yet have a unified style (#70), so I'm not particular about the look of the error page. If you want to design something with CSS, then somewhat fitting within the general themes of the site (climate, knowledge) and having it look good would be the only requirements.

Having the simple error page you've already implemented is a great addition anyway, and enough to close this issue.

Just know if you do a custom CSS design that someone working on #70 may redo the page as part of the site redesign.

[VeckoTheGecko]

Hmm. I'm not sure if this is working after merging #171 @tutterown?

https://climatetown.github.io/knowledge-hub/test

[tutterown]

It looks like it may be because Svelte and Github Pages use two different methods of producing an error page. Svelte looks for +error.svelte, while Github Pages looks for 404.md or 404.html. Since I was testing in my own fork, Github Pages did not create this conflict.

It seems that Github Pages takes priority, so I would assume we can design this by using Github Pages method rather than Svelte. It may be a few days before I'm able to do this.

https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-custom-404-page-for-your-github-pages-site

[VeckoTheGecko]

Hmmm. In the build process all Svelte pages get converted to HTML, so a 404.html page should be created.

I'll check the build process to ensure an error page is created.

It might be something to do with it being served from https://climatetown.github.io/knowledge-hub and not a root domain.

[VeckoTheGecko]

An conclusive investigation?

A preliminary search led me to this Stackoverflow answer from 2013 mentioning that 404s can only be served from root domains. Given the age of this article, and the fact that there is no mention on this is the current custom 404 help article leads me to believe that this is no longer an issue.

Instead, I think the source of the issue is in how Svelte Kit renders the static site. Using npm run dev a dev server is spun up on localhost, which handles the requests (and hence serves the appropriate 404 page from +error.svelte). However, running npm run build doesn't create a 404.html page in build. Searching, I found this issue sveltejs/kit#1172 , which links to another mentioning that the action to take is adding a fallback option to svelte.config.js.

From our config:

const config = {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter({
            pages: 'build',
            assets: 'build',
-           fallback: null,
+           fallback: "404.html",
            precompress: false
        }),
        alias: { 'lib/': './src/lib/' },
        prerender: {
            entries: ['*']
        },
        paths: {
            base: dev ? '' : '/knowledge-hub',
        },
    }
};

Doing this, and running npm run build a 404.html page is now generated. I'll open a PR for this sometime soon (unless someone beats me to it).

[VeckoTheGecko]

Working!
https://climatetown.github.io/knowledge-hub/dfs