Skip to content

redesign docs page #242

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Oct 5, 2024
Merged

redesign docs page #242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e3affd8
redesign docs page
Rich-Harris Oct 4, 2024
4289bc9
fix
Rich-Harris Oct 4, 2024
6ba0d97
fix
Rich-Harris Oct 4, 2024
cfa9a0f
fix
Rich-Harris Oct 4, 2024
ec8acfa
link to discord
Rich-Harris Oct 4, 2024
feb04f2
tighten up
Rich-Harris Oct 4, 2024
fbe459f
oops
Rich-Harris Oct 4, 2024
b4c3534
make arrows slightly brighter
Rich-Harris Oct 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/svelte.dev/src/routes/blog/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
min-height: calc(100vh - var(--sk-nav-height) - var(--sk-banner-bottom-height));
padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
max-width: var(--sk-page-main-width);
box-sizing: content-box;
margin: 0 auto;
text-wrap: balance;
}
Expand Down
3 changes: 2 additions & 1 deletion apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,9 @@

<style>
.post {
padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
max-width: var(--sk-page-main-width);
box-sizing: content-box;
margin: 0 auto;
}

Expand Down
94 changes: 72 additions & 22 deletions apps/svelte.dev/src/routes/docs/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,37 +57,87 @@
</script>

<div class="page">
<div>
<h2>Svelte</h2>
<p>Svelte is a compiler-based framework for creating fast and efficient UIs.</p>
<a href="/docs/svelte">read the docs</a>
</div>
<div>
<h2>SvelteKit</h2>
<p>
SvelteKit is a framework for rapidly developing robust, performant web applications using
Svelte
</p>
<a href="/docs/kit">read the docs</a>
<h1>Documentation</h1>
<p>
Head to the <a href="/docs/svelte">Svelte</a> or <a href="/docs/kit">SvelteKit</a> reference docs,
or choose your adventure:
</p>

<div class="options">
<a href="/tutorial">
<h2>I&rsquo;m brand new here</h2>
<p>
We recommend starting with the interactive tutorial, which will teach you how to use Svelte
right here in your browser.
</p>
</a>

<a href="/docs/svelte/migrating">
<h2>I&rsquo;m migrating an app from Svelte 4</h2>
<p>
If you&rsquo;re already experienced with an older version of Svelte, the migration guide
will bring you up to speed on the changes in Svelte 5.
</p>
</a>

<a href="/playground">
<h2>I just want to try it out</h2>
<p>
Head over to the playground to see examples, create your own Svelte apps in the browser, and
share them with other people.
</p>
</a>

<a href="/chat" class="external">
<h2>Help! I'm stuck</h2>
<p>
Join our Discord server where you can hang out with fellow Svelte users and ask them
questions. It's like an LLM but with people.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's lose the LLM bit. It might also be good to reference github discussions too

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

GitHub discussions is a venue for discussing the evolution of the project, more than a place to find help. The last thing we want to say to someone who's stuck is 'here are multiple options!'

What's wrong with the LLM bit? Encouraging mutual aid and community, and contrasting that with solipsistic hallucination machines, feels in line with our values. (Though I do intend to add another item to this list — 'I'm an artificial intelligence' — with a link to the one pager. Which I've just realised we don't have an issue for.)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I too find the LLM bit funny and have no problem with it being there.

</p>
</a>
</div>
</div>

<style>
.page {
padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
justify-items: center;
max-width: 100rem;
max-width: var(--sk-page-main-width);
box-sizing: content-box;
margin: auto;
text-wrap: balance;
}

.options a {
display: block;
color: var(--sk-text-2);
margin: 1em -2em;
padding: 2em;
background-color: var(--sk-back-1);
border-radius: var(--sk-border-radius);

& > div {
padding: 2rem;
max-width: 50rem;
&:hover {
background-color: var(--sk-back-2);
filter: drop-shadow(1px 2px 4px rgb(0 0 0 / 0.1));
text-decoration: none;

h2 {
text-decoration: underline;
}
}
}

a {
font-size: var(--sk-font-size-body-small);
h2 {
padding-right: 4rem;
background: url(./arrow-right.svg) no-repeat 100% 50%;
background-size: 3rem;

.external & {
background-image: url(./external-link.svg);
background-size: 3rem;
}
}

p:last-child {
margin-bottom: 0;
}
}
</style>
1 change: 1 addition & 0 deletions apps/svelte.dev/src/routes/docs/arrow-right.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions apps/svelte.dev/src/routes/docs/external-link.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions packages/site-kit/src/lib/styles/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
--sk-page-padding-side: 2.4rem;
--sk-thick-border-width: 0.3rem;
--sk-border-radius: 0.4rem;
--sk-page-main-width: 80rem;
--sk-page-main-width: 84rem;
--sk-banner-bottom-height: 0px;

/* typography */
Expand All @@ -37,7 +37,7 @@
--sk-font-size-ui-large: 3rem; /* TODO add regular/small */
--sk-font-size-code: 1.4rem;

--sk-line-max-width: 84rem;
--sk-line-max-width: 84rem; /* TODO can this be merged with --sk-page-main-width?

/* Base colors */
--sk-theme-1-hsl: 12, 93%, 43%;
Expand Down
Loading