Skip to content
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

chore(sites): tweak homepage background colors #10530

Merged
merged 14 commits into from
Sep 14, 2023
Merged

chore(sites): tweak homepage background colors #10530

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
9ce1f8e
Push
PuruVJ Aug 11, 2023
47ff390
Hide redundant Contents on mobile
PuruVJ Aug 14, 2023
f7141b5
Prepare for new site-kit changes
PuruVJ Aug 18, 2023
c267eac
Bump deps
PuruVJ Aug 21, 2023
90e431a
Merge remote-tracking branch 'upstream/master' into chore/post-svelte…
PuruVJ Aug 30, 2023
77c6c4c
adapt
PuruVJ Sep 2, 2023
6a8a411
Bump site-kit
PuruVJ Sep 13, 2023
cdcef69
Merge remote-tracking branch 'upstream/master' into chore/post-svelte…
PuruVJ Sep 13, 2023
48f6636
Update sites/kit.svelte.dev/package.json
PuruVJ Sep 13, 2023
5847971
Update sites/kit.svelte.dev/package.json
PuruVJ Sep 13, 2023
4688dda
Fix yaml rendering, two spaces
PuruVJ Sep 13, 2023
8890caa
Add scroll restoration
PuruVJ Sep 13, 2023
849a2a7
Add tsconfig to scripts
PuruVJ Sep 13, 2023
43e05aa
vite 4.4.8 in site
PuruVJ Sep 14, 2023
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
564 changes: 427 additions & 137 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

17 changes: 9 additions & 8 deletions sites/kit.svelte.dev/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,24 @@
"@sveltejs/adapter-vercel": "workspace:^",
"@sveltejs/amp": "workspace:^",
"@sveltejs/kit": "workspace:^",
"@sveltejs/site-kit": "6.0.0-next.36",
"@types/d3-geo": "^3.0.3",
"@types/node": "^20.4.9",
"@sveltejs/site-kit": "6.0.0-next.42",
"@types/d3-geo": "^3.0.4",
"@types/node": "^20.6.0",
PuruVJ marked this conversation as resolved.
Show resolved Hide resolved
"browserslist": "^4.21.10",
"flexsearch": "^0.7.31",
"lightningcss": "^1.21.5",
"magic-string": "^0.30.2",
"lightningcss": "^1.21.8",
"magic-string": "^0.30.3",
Copy link
Member

Choose a reason for hiding this comment

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

this could be removed as unused. i'm not sure how it got here

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done

"marked": "^9.0.0",
"prettier": "^3.0.3",
"prism-svelte": "^0.5.0",
"prismjs": "^1.29.0",
"shiki-twoslash": "^3.1.2",
"svelte": "^4.1.2",
"svelte": "^4.2.0",
"tiny-glob": "^0.2.9",
"typescript": "5.0.4",
"vite": "^4.4.9",
"vite-imagetools": "^5.0.7",
"vitest": "^0.34.1"
"vite-imagetools": "^5.0.8",
"vitest": "^0.34.4"
PuruVJ marked this conversation as resolved.
Show resolved Hide resolved
},
"type": "module",
"dependencies": {
Expand Down
34 changes: 18 additions & 16 deletions sites/kit.svelte.dev/scripts/types/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import fs from 'fs';
import path from 'path';
// @ts-check
Copy link
Member

Choose a reason for hiding this comment

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

could we configure the tsconfig to check this file instead of having to annotate it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done!

import { readFile, readdir, writeFile } from 'node:fs/promises';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { format } from 'prettier';
import ts from 'typescript';
import prettier from 'prettier';
import { mkdirp } from '../../../../packages/kit/src/utils/filesystem.js';
import { fileURLToPath } from 'url';

/**
* @typedef {{
Expand All @@ -23,7 +24,7 @@ const modules = [];
* @param {string} code
* @param {ts.NodeArray<ts.Statement>} statements
*/
function get_types(code, statements) {
async function get_types(code, statements) {
/** @type {Extracted[]} */
const exports = [];

Expand Down Expand Up @@ -109,14 +110,15 @@ function get_types(code, statements) {
}
}

const snippet = prettier
.format(snippet_unformatted, {
const snippet = (
await format(snippet_unformatted, {
parser: 'typescript',
printWidth: 60,
useTabs: true,
singleQuote: true,
trailingComma: 'none'
})
)
.replace(/\s*(\/\*…\*\/)\s*/g, '/*…*/')
.trim();

Expand Down Expand Up @@ -239,12 +241,12 @@ function strip_origin(str) {
/**
* @param {string} file
*/
function read_d_ts_file(file) {
async function read_d_ts_file(file) {
const resolved = path.resolve('../../packages/kit', file);

// We can't use JSDoc comments inside JSDoc, so we would get ts(7031) errors if
// we didn't ignore this error specifically for `/// file:` code examples
const str = fs.readFileSync(resolved, 'utf-8');
const str = await readFile(resolved, 'utf-8');

//! For some reason, typescript 5.1> is reading this @errors as a jsdoc tag, and splitting it into separate pieces
return str.replace(/(\s*\*\s*)```js([\s\S]+?)```/g, (match, prefix, code) => {
Expand All @@ -253,23 +255,23 @@ function read_d_ts_file(file) {
}

{
const code = read_d_ts_file('src/types/private.d.ts');
const code = await read_d_ts_file('src/types/private.d.ts');
const node = ts.createSourceFile('private.d.ts', code, ts.ScriptTarget.Latest, true);

modules.push({
name: 'Private types',
comment: '',
...get_types(code, node.statements)
...(await get_types(code, node.statements))
});
}

const dir = fileURLToPath(
new URL('../../../../packages/kit/src/types/synthetic', import.meta.url).href
);
for (const file of fs.readdirSync(dir)) {
for (const file of await readdir(dir)) {
if (!file.endsWith('.md')) continue;

const comment = strip_origin(read_d_ts_file(`${dir}/${file}`));
const comment = strip_origin(await read_d_ts_file(`${dir}/${file}`));

modules.push({
name: file.replace(/\+/g, '/').slice(0, -3),
Expand All @@ -281,7 +283,7 @@ for (const file of fs.readdirSync(dir)) {
}

{
const code = read_d_ts_file('types/index.d.ts');
const code = await read_d_ts_file('types/index.d.ts');
const node = ts.createSourceFile('index.d.ts', code, ts.ScriptTarget.Latest, true);

for (const statement of node.statements) {
Expand All @@ -296,7 +298,7 @@ for (const file of fs.readdirSync(dir)) {
name,
comment,
// @ts-ignore
...get_types(code, statement.body?.statements)
...(await get_types(code, statement.body?.statements))
});
}
}
Expand All @@ -321,7 +323,7 @@ app_environment.exports.push(
modules.sort((a, b) => (a.name < b.name ? -1 : 1));

mkdirp('src/lib/generated');
fs.writeFileSync(
writeFile(
'src/lib/generated/type-info.js',
`
/* This file is generated by running \`pnpm run update\`
Expand Down
8 changes: 3 additions & 5 deletions sites/kit.svelte.dev/src/lib/server/docs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,22 +106,20 @@ async function get_sections(markdown) {
const secondLevelHeadings = [];
let match;

const placeholders_rendered = replaceExportTypePlaceholders(markdown, modules);
const placeholders_rendered = await replaceExportTypePlaceholders(markdown, modules);

while ((match = headingRegex.exec(placeholders_rendered)) !== null) {
const unTYPED = match[1].startsWith('[TYPE]:') ? match[1].replace('[TYPE]: ', '') : match[1];

secondLevelHeadings.push({
title: removeMarkdown(
escape(await markedTransform(unTYPED, { paragraph: (txt) => txt }))
escape(await markedTransform(match[1], { paragraph: (txt) => txt }))
.replace(/<\/?code>/g, '')
.replace(/&#39;/g, "'")
.replace(/&quot;/g, '"')
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>')
.replace(/<(\/)?(em|b|strong|code)>/g, '')
),
slug: normalizeSlugify(unTYPED)
slug: normalizeSlugify(match[1])
});
}

Expand Down
2 changes: 1 addition & 1 deletion sites/kit.svelte.dev/src/lib/server/renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const render_content = (filename, body) =>
}

if (source.includes('./$types') && !source.includes('@filename: $types.d.ts')) {
const params = parse_route_id(options.file || `+page.${language}`)
const params = parse_route_id(`${options.file}` || `+page.${language}`)
.params.map((param) => `${param.name}: string`)
.join(', ');

Expand Down
4 changes: 3 additions & 1 deletion sites/kit.svelte.dev/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { browser } from '$app/environment';
import { page } from '$app/stores';
import { Icon, Shell } from '@sveltejs/site-kit/components';
import { Nav } from '@sveltejs/site-kit/nav';
import { Nav, Separator } from '@sveltejs/site-kit/nav';
import { Search, SearchBox } from '@sveltejs/site-kit/search';
import '@sveltejs/site-kit/styles/index.css';

Expand Down Expand Up @@ -31,6 +31,8 @@
>
<a href="https://svelte.dev">Svelte</a>

<Separator />

<a href="https://svelte.dev/chat" rel="external" title="Discord Chat">
<span class="small">Discord</span>
<span class="large"><Icon name="discord" /></span>
Expand Down
64 changes: 35 additions & 29 deletions sites/kit.svelte.dev/src/routes/content.json/content.server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,10 @@ export async function content() {
const slug = match[1];

const filepath = `../../documentation/${category.slug}/${file}`;
const markdown = replaceExportTypePlaceholders(await readFile(filepath, 'utf-8'), modules);
const markdown = await replaceExportTypePlaceholders(
await readFile(filepath, 'utf-8'),
modules
);

const { body, metadata } = extractFrontmatter(markdown);

Expand Down Expand Up @@ -82,38 +85,41 @@ export async function content() {
return blocks;
}

/** @param {string} markdown */
async function plaintext(markdown) {
const block = (text) => `${text}\n`;
const inline = (text) => text;

return (await markedTransform(markdown, {
code: (source) =>
source
.split('// ---cut---\n')
.pop()
.replace(/^\/\/((\/ file:)|( @errors:))[\s\S]*/gm, ''),
blockquote: block,
html: () => '\n',
heading: (text) => `${text}\n`,
hr: () => '',
list: block,
listitem: block,
checkbox: block,
paragraph: (text) => `${text}\n\n`,
table: block,
tablerow: block,
tablecell: (text, opts) => {
return text + ' ';
},
strong: inline,
em: inline,
codespan: inline,
br: () => '',
del: inline,
link: (href, title, text) => text,
image: (href, title, text) => text,
text: inline
}))
return (
await markedTransform(markdown, {
code: (source) =>
source
.split('// ---cut---\n')
.pop()
.replace(/^\/\/((\/ file:)|( @errors:))[\s\S]*/gm, ''),
blockquote: block,
html: () => '\n',
heading: (text) => `${text}\n`,
hr: () => '',
list: block,
listitem: block,
checkbox: block,
paragraph: (text) => `${text}\n\n`,
table: block,
tablerow: block,
tablecell: (text, opts) => {
return text + ' ';
},
strong: inline,
em: inline,
codespan: inline,
br: () => '',
del: inline,
link: (href, title, text) => text,
image: (href, title, text) => text,
text: inline
})
)
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>')
.replace(/&#(\d+);/g, (match, code) => {
Expand Down
2 changes: 2 additions & 0 deletions sites/kit.svelte.dev/src/routes/docs/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,12 @@

.toc-container {
background: var(--sk-back-3);
display: none;
}

@media (min-width: 832px) {
.toc-container {
display: block;
width: var(--sidebar-width);
height: calc(
100vh - var(--sk-nav-height) - var(--ts-toggle-height) - var(--sk-banner-bottom-height)
Expand Down
50 changes: 35 additions & 15 deletions sites/kit.svelte.dev/src/routes/home/Hero.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</div>

<div class="tagline">web development, streamlined</div>
<a class="cta" href="{base}/docs/introduction">read the docs</a>
<a href="{base}/docs/introduction" class="cta"> read the docs </a>
</div>

<div class="hero-image">
Expand All @@ -25,17 +25,16 @@
<style>
.hero {
--gradient: radial-gradient(
34.14% 72.25% at 47.58% 31.75%,
hsla(209, 100%, 95%, 0.52) 0%,
hsla(0, 0%, 100%, 0) 100%
83.39% 117.39% at 47.58% 31.75%,
rgba(242, 249, 255, 0.52) 0%,
rgba(255, 255, 255, 0) 100%
),
linear-gradient(
92.4deg,
hsl(210, 7%, 83%) 14.67%,
hsla(208, 100%, 97%, 0.48) 54.37%,
hsla(207, 22%, 84%, 0.62) 92.49%
),
linear-gradient(0deg, hsl(204, 38%, 90%), hsl(204, 38%, 90%));
125deg,
#e7f1fa 0%,
rgba(238, 247, 255, 0.48) 34.51%,
rgba(222, 234, 244, 0.62) 100%
);

--dark-gradient: radial-gradient(
64.14% 72.25% at 47.58% 31.75%,
Expand All @@ -53,8 +52,10 @@
max-width: 100vw;
background: hsl(210, 7%, 84%);
background: var(--gradient);
background-blend-mode: hard-light, multiply, normal;
position: relative;
padding: 8rem var(--sk-page-padding-side);
margin-bottom: 2rem;
}

.hero-contents {
Expand Down Expand Up @@ -89,7 +90,7 @@
--size: 64rem;
position: absolute;
left: calc(50% - 0.53 * var(--size));
bottom: -28rem;
bottom: -30rem;
pointer-events: none;
}

Expand All @@ -103,12 +104,27 @@

.cta {
display: inline-block;
align-items: center;
gap: 0.1rem;
background: var(--sk-theme-1);
padding: 0.5em 1em;
font-size: var(--sk-text-m);
padding: 0.35em 0.8em;
width: max-content;
margin-top: 1.6rem;
font-size: var(--sk-text-s);
letter-spacing: 0.05em;
font-weight: 600;
white-space: nowrap;
border-radius: var(--sk-border-radius);
color: white;
margin: 1em 0;
box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.08);
color: #fff;
color: color-mix(in hwb, hsl(var(--sk-theme-1-hsl)) 10%, var(--sk-back-1) 95%);
transition: 0.5s var(--quint-out);
transition-property: box-shadow, color;
}

.cta:hover {
text-decoration: none;
box-shadow: 0px 0.8px 3.8px rgba(0, 0, 0, 0.115), 0px 6px 30px rgba(0, 0, 0, 0.23);
}

@media (min-width: 400px) {
Expand Down Expand Up @@ -136,6 +152,10 @@
right: -20rem;
bottom: calc(-5rem - 0.38 * var(--size));
}

.cta {
font-size: var(--sk-text-m);
}
}

@media (prefers-color-scheme: dark) {
Expand Down
Loading