fix(site-2): styles (#8288)

pull/8453/head
Puru Vijay 2 years ago committed by GitHub
parent 95c346ca41
commit 339ea85d55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

File diff suppressed because it is too large Load Diff

@ -16,8 +16,8 @@
"test": "uvu -r ts-node/register src/lib/server/markdown" "test": "uvu -r ts-node/register src/lib/server/markdown"
}, },
"dependencies": { "dependencies": {
"@supabase/supabase-js": "^2.7.1", "@supabase/supabase-js": "^2.11.0",
"@sveltejs/repl": "^0.1.2", "@sveltejs/repl": "^0.2.0",
"cookie": "^0.5.0", "cookie": "^0.5.0",
"devalue": "^4.3.0", "devalue": "^4.3.0",
"do-not-zip": "^1.0.0", "do-not-zip": "^1.0.0",
@ -27,31 +27,31 @@
"svelte-local-storage-store": "^0.4.0" "svelte-local-storage-store": "^0.4.0"
}, },
"devDependencies": { "devDependencies": {
"@resvg/resvg-js": "^2.4.0", "@resvg/resvg-js": "^2.4.1",
"@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.5.6", "@sveltejs/kit": "^1.12.0",
"@sveltejs/site-kit": "^3.2.2", "@sveltejs/site-kit": "^3.2.2",
"@sveltejs/vite-plugin-svelte": "^2.0.2", "@sveltejs/vite-plugin-svelte": "^2.0.3",
"@types/marked": "^4.0.8", "@types/marked": "^4.0.8",
"@types/prismjs": "^1.26.0", "@types/prismjs": "^1.26.0",
"degit": "^2.8.4", "degit": "^2.8.4",
"dotenv": "^16.0.3", "dotenv": "^16.0.3",
"jimp": "^0.22.4", "jimp": "^0.22.7",
"marked": "^4.2.12", "marked": "^4.2.12",
"node-fetch": "^3.3.0", "node-fetch": "^3.3.1",
"prettier": "^2.8.4", "prettier": "^2.8.4",
"prettier-plugin-svelte": "^2.9.0", "prettier-plugin-svelte": "^2.9.0",
"prism-svelte": "^0.5.0", "prism-svelte": "^0.5.0",
"prismjs": "^1.29.0", "prismjs": "^1.29.0",
"satori": "^0.3.1", "satori": "^0.4.3",
"satori-html": "^0.3.2", "satori-html": "^0.3.2",
"shelljs": "^0.8.5", "shelljs": "^0.8.5",
"shiki": "^0.14.1", "shiki": "^0.14.1",
"shiki-twoslash": "^3.1.0", "shiki-twoslash": "^3.1.1",
"svelte": "^3.55.1", "svelte": "^3.57.0",
"svelte-check": "^3.0.3", "svelte-check": "^3.1.4",
"typescript": "^4.9.5", "typescript": "^5.0.2",
"vite": "^4.1.1", "vite": "^4.2.0",
"vite-imagetools": "^4.0.18" "vite-imagetools": "^4.0.18"
} }
} }

@ -12,7 +12,7 @@ export async function GET({ url }) {
stringify({ stringify({
code: url.searchParams.get('code'), code: url.searchParams.get('code'),
client_id, client_id,
client_secret client_secret,
}) })
); );
const access_token = new URLSearchParams(await r1.text()).get('access_token'); const access_token = new URLSearchParams(await r1.text()).get('access_token');
@ -21,8 +21,8 @@ export async function GET({ url }) {
const r2 = await fetch('https://api.github.com/user', { const r2 = await fetch('https://api.github.com/user', {
headers: { headers: {
'User-Agent': 'svelte.dev', 'User-Agent': 'svelte.dev',
Authorization: `token ${access_token}` Authorization: `token ${access_token}`,
} },
}); });
const profile = await r2.json(); const profile = await r2.json();
@ -33,7 +33,7 @@ export async function GET({ url }) {
github_id: profile.id, github_id: profile.id,
github_name: profile.name, github_name: profile.name,
github_login: profile.login, github_login: profile.login,
github_avatar_url: profile.avatar_url github_avatar_url: profile.avatar_url,
}; };
const { sessionid, expires } = await session.create(user, access_token); const { sessionid, expires } = await session.create(user, access_token);
@ -52,10 +52,10 @@ export async function GET({ url }) {
expires: new Date(expires), expires: new Date(expires),
path: '/', path: '/',
httpOnly: true, httpOnly: true,
secure: url.protocol === 'https' secure: url.protocol === 'https',
}), }),
'Content-Type': 'text/html; charset=utf-8' 'Content-Type': 'text/html; charset=utf-8',
} },
} }
); );
} catch (err) { } catch (err) {

@ -24,7 +24,7 @@
<style> <style>
.container { .container {
--sidebar-menu-width: 20rem; --sidebar-menu-width: 28rem;
--sidebar-width: var(--sidebar-menu-width); --sidebar-width: var(--sidebar-menu-width);
--ts-toggle-height: 4.2rem; --ts-toggle-height: 4.2rem;
} }
@ -38,13 +38,13 @@
display: none; display: none;
} }
.content { /* .content {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: var(--sk-page-padding-top) var(--sk-page-padding-side); padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
tab-size: 2; tab-size: 2;
-moz-tab-size: 2; -moz-tab-size: 2;
} } */
@media (min-width: 832px) { @media (min-width: 832px) {
/* can't use vars in @media :( */ /* can't use vars in @media :( */
@ -229,34 +229,6 @@
cursor: pointer; cursor: pointer;
} }
.content :global(blockquote) {
color: var(--sk-text-1);
background-color: rgba(255, 62, 0, 0.1);
border-left: 4px solid var(--sk-theme-1-variant);
padding: 1rem;
}
.content :global(blockquote) :global(:first-child) {
margin-top: 0;
}
.content :global(blockquote) :global(:last-child) {
margin-bottom: 0;
}
.content :global(blockquote) :global(code) {
background: var(--sk-code-bg);
}
.content :global(section) :global(a):hover {
text-decoration: underline;
}
.content :global(section) :global(a) :global(code) {
color: inherit;
background: rgba(255, 62, 0, 0.1) !important;
}
/* this replaces the offset-anchor hack, which we should remove from this CSS /* this replaces the offset-anchor hack, which we should remove from this CSS
once https://github.com/sveltejs/action-deploy-docs/issues/1 is closed */ once https://github.com/sveltejs/action-deploy-docs/issues/1 is closed */
.content :global(h2[id]), .content :global(h2[id]),
@ -289,7 +261,7 @@
@media (min-width: 832px) { @media (min-width: 832px) {
.toc-container { .toc-container {
width: var(--sidebar-width); width: var(--sidebar-width);
height: calc(100vh - var(--sk-nav-height) - var(--ts-toggle-height)); height: calc(100vh - var(--sk-nav-height));
position: fixed; position: fixed;
left: 0; left: 0;
top: var(--sk-nav-height); top: var(--sk-nav-height);
@ -323,7 +295,7 @@
@media (min-width: 1200px) { @media (min-width: 1200px) {
.container { .container {
--sidebar-width: max(20rem, 18vw); --sidebar-width: max(28rem, 23vw);
} }
.page { .page {

@ -27,9 +27,6 @@
top: 0; top: 0;
left: 0; left: 0;
color: var(--sk-text-3); color: var(--sk-text-3);
display: grid;
justify-content: center;
} }
.sidebar { .sidebar {
@ -74,17 +71,21 @@
color: var(--sk-text-1); color: var(--sk-text-1);
} }
ul ul li {
margin: 0;
}
@media (min-width: 600px) { @media (min-width: 600px) {
.sidebar { .sidebar {
columns: 2; columns: 2;
padding-left: var(--sk-page-padding-side); /* padding-left: var(--sk-page-padding-side); */
padding-right: var(--sk-page-padding-side); padding-right: var(--sk-page-padding-side);
} }
} }
@media (min-width: 700px) { @media (min-width: 700px) {
.sidebar { .sidebar {
/* columns: 3; */ columns: 3;
} }
} }

@ -9,7 +9,9 @@
<title>{data.page.title} - Svelte</title> <title>{data.page.title} - Svelte</title>
</svelte:head> </svelte:head>
<div class="text">
{@html data.page.content} {@html data.page.content}
</div>
{#if data.page.sections.length !== 0} {#if data.page.sections.length !== 0}
<OnThisPage details={data.page} /> <OnThisPage details={data.page} />

@ -101,16 +101,14 @@
position: fixed; position: fixed;
padding: 0 var(--sk-page-padding-side) 0 0; padding: 0 var(--sk-page-padding-side) 0 0;
width: min(280px, calc(var(--sidebar-width) - var(--sk-page-padding-side))); width: min(280px, calc(var(--sidebar-width) - var(--sk-page-padding-side)));
/* top: calc(var(--sk-page-padding-top) + var(--sk-nav-height)); */
top: var(--sk-nav-height); top: var(--sk-nav-height);
left: calc(100vw - (var(--sidebar-width))); left: calc(100vw - (var(--sidebar-width)));
} }
h2 { h2 {
text-transform: uppercase; text-transform: uppercase;
font-size: 1.4rem; font-size: 1.4rem !important;
font-weight: 400; font-weight: 400;
line-height: 0;
margin: 0 0 1rem 0 !important; margin: 0 0 1rem 0 !important;
padding: 0 0 0 0.6rem; padding: 0 0 0 0.6rem;
color: var(--sk-text-3); color: var(--sk-text-3);
@ -125,8 +123,6 @@
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
color: var(--sk-text-3); color: var(--sk-text-3);
border-left: 2px solid transparent; border-left: 2px solid transparent;
font-size: 1.3rem;
} }
a:hover { a:hover {

@ -2,6 +2,7 @@ import { redirect } from '@sveltejs/kit';
import { PUBLIC_API_BASE } from '$env/static/public'; import { PUBLIC_API_BASE } from '$env/static/public';
export async function load({ fetch, params, setHeaders }) { export async function load({ fetch, params, setHeaders }) {
// TODO: Use local data
const tutorial = await fetch(`${PUBLIC_API_BASE}/docs/svelte/tutorial/${params.slug}`); const tutorial = await fetch(`${PUBLIC_API_BASE}/docs/svelte/tutorial/${params.slug}`);
if (!tutorial.ok) { if (!tutorial.ok) {
@ -9,7 +10,7 @@ export async function load({ fetch, params, setHeaders }) {
} }
setHeaders({ setHeaders({
'cache-control': 'public, max-age=60' 'cache-control': 'public, max-age=60',
}); });
return { tutorial: await tutorial.json(), slug: params.slug }; return { tutorial: await tutorial.json(), slug: params.slug };

Loading…
Cancel
Save