This is a collection of styles, components and icons used in common by *.svelte.dev websites. It is not intended as a general purpose component kit.
sveltejs / site-kit Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
Steps to reproduce:
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.
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!
The copy button moves whenever code blocks are scrolled horizontally such as for mobile viewports. It should stay in place.
https://kit-svelte-c9r1myd78-svelte.vercel.app/docs/images#sveltejs-enhanced-img-setup
No response
n/a
annoyance
No response
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
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.
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.
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
sectionsThese (relatively not-so-important) sections are not accessible for translation from outside this package.
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 h2sIf we translate the h2
s 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:
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.
Currently, the toggle-switch looks like this when checked(enabled):
That right padding(hardcoded as 9px
) is definitely miscalculated:
Line 485 in 9346972
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:
Line 477 in 9346972
Here's the result:
I'll send a pull request right away.
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.
heading
has new arguments in marked 13
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
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.
See the SvelteKit types docs for example.
(Maybe adjust zoom or window height if you have a gigantic screen.)
No response
Win 10, Firefox & Chrome
annoyance
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.
I am happy to submit a PR and leave the decision to the maintainers.
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
});
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.
On https://sapper.svelte.dev/migrating the sidebar links point to sections on the main /docs
page rather than on the current /migrating
page.
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.
site-kit/components/Docs.svelte
Line 366 in 26d35aa
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.
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.
Using the copy button in the docs returns the copied code but without the whitespaces intact. This causes the issue show below
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
No response
n/a
annoyance
No response
Relevant issue, figured it's more relevant to this repo
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>
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.