sveltejs / site-kit Goto Github PK

This happens every time to me ,when I use the search on https://kit.svelte.dev/.

I search something, then klick on a result.
Then a few minutes later I want to search something else, I click on the search input and start typing immediately.
Then I realize that the text got appended to my previous search query.

1. first search:
   
2. opening the search bar the second time results in some inconsistent state. I see my previous search term, but don't see search results for that term. Instead I see my previous searches.
   
3. I need to remember to delete the previous term in order to search
   

Navigating to any error page e.g. localhost:3000/random and trying to click the only link to home = ".", throws a type Error. Details bellow.

start.js:424 Uncaught (in promise) TypeError: Cannot read property 'path' of null at Renderer.notify (start.js:424) at Router._navigate (start.js:186) at start.js:112

<!-- src/routes/$error.svelte -->
<script>
    export let status;
    export let error;
</script>

<h1>{status}</h1>
<p>{error.message}</p>

<!-- src/routes/$layout.svelte -->
<nav>
    <a href=".">Home</a>
</nav>
<slot></slot>

In the SvelteKit docs you can't navigate to the top of the document as the first/root object of the sidebar doesn't apply the href

This seems to only apply to the SvelteKit Docs as it has a different implementation from the Svelte docs although they both use the component

I'm not sure how to build the project myself and for sure if I PR it would be a hacky thing so I'll be around to provide any help but I would rather prefer to somebody with more knowledge to tackle this one.

sveltejs/svelte#5116

On https://sapper.svelte.dev/migrating the sidebar links point to sections on the main /docs page rather than on the current /migrating page.

JSDoc snippets often include links to https://kit.svelte.dev/docs/whatever, because we want the links to be valid inside editor tooltips. But these also get rendered as-is on the site itself. That's fine in production, but a (minor) nuisance for preview deployments.

It might be good if there was an option for replacing links — something like this:

import { VERCEL_URL } from '$env/static/private';

const base = 'https://kit.svelte.dev/';

renderContentMarkdown(filename, body, {
  ...stuff,
  transformLink: (href) => href.startsWith(base)
    ? href.replace(base, `https://${VERCEL_URL}/`)
    : href
});

1/6 The Project
Project.zip

2/6 Package content

{
	"name": "svelte-next2",
	"version": "0.0.1",
	"scripts": {
		"dev": "svelte-kit dev",
		"build": "svelte-kit build",
		"start": "svelte-kit start"
	},
	"devDependencies": {
		"@snowpack/plugin-postcss": "^1.0.11",
		"@sveltejs/adapter-node": "next",
		"@sveltejs/kit": "next",
		"@sveltejs/snowpack-config": "next",
		"autoprefixer": "^10.2.0",
		"cssnano": "^4.1.10",
		"postcss": "^8.2.2",
		"postcss-cli": "^8.3.1",
		"postcss-load-config": "^3.0.0",
		"postcss-preset-env": "^6.7.0",
		"sass": "^1.0.0",
		"svelte": "^3.29.0",
		"svelte-preprocess": "^4.6.1",
		"tailwindcss": "^2.0.2"
	},
	"dependencies": {
		"svelte-i18n": "^3.3.0" // not loaded in my code
	}
}

3/6 Display the following error in the browser

500
Unexpected identifier
SyntaxError: Unexpected identifier
at new Function ()
at initialize_module (/Users/catherine/Sites/svelte-next2/node_modules/@sveltejs/kit/src/api/dev/loader.js:123:81)
at /Users/catherine/Sites/svelte-next2/node_modules/@sveltejs/kit/src/api/dev/loader.js:112:21
at async Promise.all (index 1)
at initialize_module (/Users/catherine/Sites/svelte-next2/node_modules/@sveltejs/kit/src/api/dev/loader.js:110:8)
at /Users/catherine/Sites/svelte-next2/node_modules/@sveltejs/kit/src/api/dev/loader.js:112:21
at async Promise.all (index 1)
at initialize_module (/Users/catherine/Sites/svelte-next2/node_modules/@sveltejs/kit/src/api/dev/loader.js:110:8)
at /Users/catherine/Sites/svelte-next2/node_modules/@sveltejs/kit/src/api/dev/index.js:306:32
at get_response (/Users/catherine/Sites/svelte-next2/node_modules/@sveltejs/kit/src/renderer/page.js:128:15)

4/6 The header response

SyntaxError: Unexpected identifier
HTTP/1.1 500 Internal Server Error
content-type: text/html
Date: Thu, 07 Jan 2021 17:36:07 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked

5/6 Request Header

GET / HTTP/1.1
Host: localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11.1; rv:85.0) Gecko/20100101 Firefox/85.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Pragma: no-cache
Cache-Control: no-cache

6/6 Additional note
This work in the "regular" sveltejs

Steps to reproduce:

1. Go to https://svelte.dev/docs.
2. Scroll down left menu either by mouse wheel or trackpad.
3. Move cursor away from the menu.
4. Result: scrollbar goes back to the top by itself.

You can also try changing scrollbar position simply by dragging. Then move mouse cursor over menu and again away from it.
On Chrome scrollbar goes back smoothly and on Safari it jumps back to the top.

Expected behavior:
Scrollbar should not return to the top by itself.

Describe the bug

Using the copy button in the docs returns the copied code but without the whitespaces intact. This causes the issue show below

Reproduction

Navigate to https://kit.svelte.dev/docs/adapter-static#github-pages

Using the copy button:

name: Deploy to GitHub Pages
on:  push:    branches: 'main'
jobs:  build_site:    runs-on: ubuntu-latest    steps:      - name: Checkout        uses: actions/checkout@v3
      # If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`      # - name: Install pnpm      #   uses: pnpm/action-setup@v2      #   with:      #     version: 8
      - name: Install Node.js        uses: actions/setup-node@v3        with:          node-version: 18          cache: npm
      - name: Install dependencies        run: npm install
      - name: build        env:          BASE_PATH: '/${{ github.event.repository.name }}'        run: |          npm run build
      - name: Upload Artifacts        uses: actions/upload-pages-artifact@v2        with:          # this should match the `pages` option in your adapter-static options          path: 'build/'
  deploy:    needs: build_site    runs-on: ubuntu-latest
    permissions:      pages: write      id-token: write
    environment:      name: github-pages      url: ${{ steps.deployment.outputs.page_url }}
    steps:      - name: Deploy        id: deployment        uses: actions/deploy-pages@v2

Manually selecting and copying the text:

name: Deploy to GitHub Pages

on:
  push:
    branches: 'main'

jobs:
  build_site:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      # If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`
      # - name: Install pnpm
      #   uses: pnpm/action-setup@v2
      #   with:
      #     version: 8

      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: npm

      - name: Install dependencies
        run: npm install

      - name: build
        env:
          BASE_PATH: '/${{ github.event.repository.name }}'
        run: |
          npm run build

      - name: Upload Artifacts
        uses: actions/upload-pages-artifact@v2
        with:
          # this should match the `pages` option in your adapter-static options
          path: 'build/'

  deploy:
    needs: build_site
    runs-on: ubuntu-latest

    permissions:
      pages: write
      id-token: write

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - name: Deploy
        id: deployment
        uses: actions/deploy-pages@v2

Logs

No response

System Info

n/a

Severity

annoyance

Additional Information

No response

I know this is a minor issue, but I found that the 'edit this section' button is hard-coded to svelte and does not distinguish between being in the Sapper Docs site and the Svelte Docs site.

I don't really know you integrate these components on your site building process, so I couldn't make a PR. But I found the line where the url is hardcoded.

There is a style in here removing the outline on anchor elements when they are focused. This is inaccessible and should be removed / altered in a way that makes focused links stand out.

Relevant issue, figured it's more relevant to this repo

Search for store contract and click this result:

It will take you to https://svelte.dev/docs/svelte-components#script-store-contract

The real link should be https://svelte.dev/docs/svelte-components#script-4-prefix-stores-with-$-to-access-their-values-store-contract

Separately, I've been thinking that these URLs are ridiculously long and it'd be better to have it just be #store-contract when possible. We can make it longer if there's a need to deduplicate, but otherwise I think a shorter version would be nicer.

Describe the bug

For pages with a lot of content, the scrollbar becomes so small it can be entirely hidden behind the header.
Svelte and Kit docs have this issue, though maybe only Kit has long enough pages.

Reproduction

See the SvelteKit types docs for example.
(Maybe adjust zoom or window height if you have a gigantic screen.)

Logs

No response

System Info

Win 10, Firefox & Chrome

Severity

annoyance

The issue happens in the vertical scrollbar for the text but not for the menu. I can only scroll the page using the trackpad or keyboard arrows, but not by clicking the scrollbar.

I noticed this issue while using both MS Edge and Brave browsers, and it happens in svelte.dev/docs as well as in kit.svelte.dev/docs.

Currently, the toggle-switch looks like this when checked(enabled):

That right padding(hardcoded as 9px) is definitely miscalculated:

It seems that the right calculation is 100% - 1em + 2px, that is 100% - (head width) + (left padding). FYI, the left padding is hardcoded as 2px here:

Here's the result:

I'll send a pull request right away.

The site for both svelte and sapper has CSS for a that is set to user-select: none there isn't a large impact of the functioning of the site. When I want to copy a portion of the doc that has link then due to this property it is not copy-able at least when I make materials or need to share them.

Example:

I am happy to submit a PR and leave the decision to the maintainers.

Describe the bug

The copy button moves whenever code blocks are scrolled horizontally such as for mobile viewports. It should stay in place.

Reproduction

https://kit-svelte-c9r1myd78-svelte.vercel.app/docs/images#sveltejs-enhanced-img-setup

Logs

No response

System Info

n/a

Severity

annoyance

Additional Information

No response

The text is not center aligned.

I ran into a UX issue on the svelte.dev site today where my scroll position was lost after navigating back. This is best illustrated through a demo:

It's not the end of the world, but a bit annoying. The thing that pushed me to open an issue about it was remembering @Rich-Harris advocating for sites to restore scroll position when navigating back: https://twitter.com/Rich_Harris/status/1276671957400989696. That tweet was specifically about restoring the scroll position even when the initial page had been scrolled into dynamically loaded content, but in this situation the scroll position is lost even though the initial page was static.

If I disable JavaScript, it works correctly (since the scroll position restoration is handled natively by the browser), so I suppose this is an example of "progressive enhancement weakening"?

Anyway, wanted to report this small issue, but let me also say thanks for all the hard work on svelte and its website, which is otherwise awesome!

Error, impossible to lauch template for testing

npm init svelte@next
npm install
npm run dev -- --open
Error: loadAndValidateConfig() has been deprecated in favor of loadConfiguration() and createConfiguration().
at Object.loadAndValidateConfig (/.../node_modules/snowpack/lib/index.js:134112:11)
at Watcher.init_snowpack (/.../node_modules/@sveltejs/kit/src/api/dev/index.js:83:35)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at Watcher.init (/.../node_modules/@sveltejs/kit/src/api/dev/index.js:55:3)
at /.../node_modules/@sveltejs/kit/src/cli.js:49:20

Describe the bug

generate_docs uses site-kit, which uses a homecooked front matter parser. however this is non standard frontmatter:

this:

title: "Scooby Doo: Where are you"
published: false

should parse to:

{
	"title": "Scooby Doo: Where are you",
	"published": false
}

whereas with site-kit this happens:

{
	"title": "\"Scooby Doo: Where are you\"",
	"published": "false"
}

which causes nasty bugs down the line.

front-matter exists, we should use and encourage it.

i dont know if a formal frontmatter spec exists, but from experience this behavior is fairly standard now.

if you accept this i am happy to submit a PR but i am holding off because i'm sensing a PR backlog.

I found two cases where site-kit's markdown renderer is in the way of translating section of the kit site.

I'm not sure there are easy-to-implement solutions to these issues, i'm just pin-pointing them to raise awareness.

One option would be to fork site-kit, but i don't really want to do this. Not a big deal, but annoying.

Config and KitConfig sections

These (relatively not-so-important) sections are not accessible for translation from outside this package.

• https://kit.svelte.dev/docs/types#public-types-config
• https://kit.svelte.dev/docs/types#public-types-kitconfig

This is due to this line:
https://github.com/sveltejs/site-kit/blob/master/packages/site-kit/src/lib/markdown/renderer.js#L597

/types page h2s

If we translate the h2s in the /types page (like "Public types" for instance), this will break links that are (most certainly) created via site-kit markdown renderer.

For instance, the link to Config interface on this page will break if the h2 "Public types" is translated.

This is (probably) due to one of these lines:

• https://github.com/sveltejs/site-kit/blob/master/packages/site-kit/src/lib/markdown/renderer.js#L178
• https://github.com/sveltejs/site-kit/blob/master/packages/site-kit/src/lib/markdown/renderer.js#L199

The current color for links has a color contrast ratio of 3.53 against a white background, which could make it difficult for people with low vision to read. This fails the recommended WCAG minimum contrast ratio of 4.5.

I discovered this while working on other Axe accessibility issues I found on the Svelte docs (sveltejs/svelte#5678).

Since this is the primary color in the theme changing this could have wide-ranging effects. If we don't want to change this color, we could use a different color for links that passes the recommended contrast ratio threshold.

Example of link:

Since it looks like it's hardcoded, the copyright in the footer is out of date: