fix(site): update tutorial links (#8780)

Co-authored-by: Ben McCann <[email protected]>

Author: PuruVJ

documentation/docs/05-misc/01-faq.md

@@ -4,7 +4,7 @@ title: Frequently asked questions
 
 ## I'm new to Svelte. Where should I start?
 
-We think the best way to get started is playing through the interactive [tutorial](/tutorial). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.
+We think the best way to get started is playing through the interactive [tutorial](https://learn.svelte.dev/). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.
 
 Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.
 

packages/svelte/scripts/generate-version.js

@@ -4,5 +4,14 @@ const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
 
 fs.writeFileSync(
 	'./src/shared/version.js',
-	`// generated during release, do not modify\n\n/** @type {string} */\nexport const VERSION = '${pkg.version}';\n`
+	`// generated during release, do not modify
+
+/**
+ * The current version, as set in package.json.
+ *
+ * https://svelte.dev/docs/svelte-compiler#svelte-version
+ * @type {string}
+ */
+export const VERSION = '${pkg.version}';
+`
 );

sites/svelte.dev/src/lib/server/markdown/renderer.js

@@ -921,7 +921,7 @@ function syntax_highlight({ source, filename, language, highlighter, twoslashBan
 			};
 		});
 
-		html = `<pre class="language-diff"><code>${lines
+		html = `<pre class="language-diff" style="background-color: var(--shiki-color-background)"><code>${lines
 			.map((line) => {
 				if (line.type) return `<span class="${line.type}">${line.content}\n</span>`;
 				return line.content + '\n';

sites/svelte.dev/src/routes/+layout.svelte

@@ -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';
 
@@ -35,8 +35,12 @@
 			</svelte:fragment>
 
 			<svelte:fragment slot="external-links">
+				<a href="https://learn.svelte.dev/">Tutorial</a>
+
 				<a href="https://kit.svelte.dev">SvelteKit</a>
 
+				<Separator />
+
 				<a href="/chat" title="Discord Chat">
 					<span class="small">Discord</span>
 					<span class="large"><Icon name="discord" /></span>

sites/svelte.dev/src/routes/_components/Hero.svelte

@@ -17,7 +17,7 @@
 		</strong>
 		<div class="buttons">
 			<a href="https://learn.svelte.dev" rel="external" class="cta">
-				tutorial <Icon name="arrow-right" />
+				tutorial<Icon name="external-link" size="1em" />
 			</a>
 			<a href="/docs/introduction" class="cta basic">read the docs</a>
 		</div>
@@ -86,11 +86,12 @@
 	.cta {
 		display: inline-flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: 0.1rem;
 		background: var(--sk-theme-1);
 		padding: 0.35em 0.8em;
 		font-size: var(--sk-text-s);
 		letter-spacing: 0.05em;
+		font-weight: 600;
 		white-space: nowrap;
 		border-radius: var(--sk-border-radius);
 		box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.08);

sites/svelte.dev/src/routes/nav.json/+server.js

@@ -1,7 +1,6 @@
 import { get_blog_data, get_blog_list } from '$lib/server/blog/index.js';
 import { get_docs_data, get_docs_list } from '$lib/server/docs/index.js';
 import { get_examples_data, get_examples_list } from '$lib/server/examples/index.js';
-import { get_tutorial_data, get_tutorial_list } from '$lib/server/tutorial/index.js';
 import { json } from '@sveltejs/kit';
 
 export const prerender = true;
@@ -33,12 +32,6 @@ async function get_nav_list() {
 		}
 	];
 
-	const tutorial_list = get_tutorial_list(get_tutorial_data());
-	const processed_tutorial_list = tutorial_list.map(({ title, tutorials }) => ({
-		title,
-		sections: tutorials.map(({ title, slug }) => ({ title, path: '/tutorial/' + slug }))
-	}));
-
 	const examples_list = get_examples_list(get_examples_data());
 	const processed_examples_list = examples_list
 		.map(({ title, examples }) => ({
@@ -48,12 +41,6 @@ async function get_nav_list() {
 		.filter(({ title }) => title !== 'Embeds');
 
 	return [
-		{
-			title: 'Tutorial',
-			prefix: 'tutorial',
-			pathname: '/tutorial',
-			sections: processed_tutorial_list
-		},
 		{
 			title: 'Docs',
 			prefix: 'docs',