diff --git a/packages/core/app/layout.tsx b/packages/core/app/layout.tsx index a14e64fc..631f7910 100644 --- a/packages/core/app/layout.tsx +++ b/packages/core/app/layout.tsx @@ -1,6 +1,20 @@ +import { Inter } from "next/font/google" + +import { Overpass } from "next/font/google" + +const overpass = Overpass({ + subsets: ["latin"], + variable: "--font-overpass", + display: "swap", +}) +const inter = Inter({ + subsets: ["latin"], + display: "swap", +}) + export const metadata = { - title: 'Next.js', - description: 'Generated by Next.js', + title: "Next.js", + description: "Generated by Next.js", } export default function RootLayout({ @@ -9,7 +23,10 @@ export default function RootLayout({ children: React.ReactNode }) { return ( - + {children} ) diff --git a/packages/core/app/playthrough.tsx b/packages/core/app/playthrough.tsx new file mode 100644 index 00000000..1c438a4c --- /dev/null +++ b/packages/core/app/playthrough.tsx @@ -0,0 +1,76 @@ +"use client" + +import React from "react" + +export function Playthrough({ steps }) { + const [index, setIndex] = React.useState(0) + const step = steps[index] + return ( +
+ +
+ {step.children} + { + e.preventDefault() + setIndex(index + 1) + }} + > + Next + +
+
+
Code
+
Preview
+
+
+ ) +} diff --git a/packages/core/posts/svelte.mdx b/packages/core/posts/svelte.mdx new file mode 100644 index 00000000..6a233366 --- /dev/null +++ b/packages/core/posts/svelte.mdx @@ -0,0 +1,74 @@ +--- +title: Learn Svelte +--- + +import { Hike } from "../app/hike" +import { Playthrough } from "../app/playthrough" +import { Code } from "../app/code" + + + +Welcome to the Svelte tutorial! This will teach you everything you need to know to easily build web applications of all sizes, with high performance and a small footprint. + +You can also consult the [API docs](https://svelte.dev/docs) and the [examples](https://svelte.dev/examples), or — if you're impatient to start hacking on your machine locally — create a project with `npm init svelte`. + +## What is Svelte? + +Svelte is a tool for building web applications. Like other user interface frameworks, it allows you to build your app _declaratively_ out of components that combine markup, styles and behaviours. + +These components are _compiled_ into small, efficient JavaScript modules that eliminate overhead traditionally associated with UI frameworks. + +You can build your entire app with Svelte (for example, using an application framework like [SvelteKit](https://kit.svelte.dev/), which this tutorial will cover), or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere. + +## How to use this tutorial + +> You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte. + +This tutorial is split into four main parts: + +- [Basic Svelte](https://learn.svelte.dev/tutorial/welcome-to-svelte) (you are here) +- [Advanced Svelte](https://learn.svelte.dev/tutorial/tweens) +- [Basic SvelteKit](https://learn.svelte.dev/tutorial/introducing-sveltekit) +- [Advanced SvelteKit](https://learn.svelte.dev/tutorial/optional-params) + +Each section will present an exercise designed to illustrate a feature. Later exercises build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above. + +```svelte src/App.svelte +

Welcome!

+``` + +If you get stuck, you can click the `solve` button to the left of the editorin the top right of the editor view. (Use the toggle below to switch between tutorial and editor views. The `solve` button is disabled on sections like this one that don't include an exercise.) Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor. + +--- + +## Part 1 / Introduction / Your first component + +In Svelte, an application is composed from one or more _components_. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a `.svelte` file. The `App.svelte` file, open in the code editor to the right, is a simple component. + +## Adding data + +A component that just renders some static markup isn't very interesting. Let's add some data. + +First, add a script tag to your component and declare a `name` variable: + +```svelte App.svelte + + +

Hello world!

+``` + +Then, we can refer to `name` in the markup: + +```svelte App.svelte +

Hello {name}!

+``` + +Inside the curly braces, we can put any JavaScript we want. Try changing `name` to `name.toUpperCase()` for a shoutier greeting. + +```svelte App.svelte +

Hello {name.toUpperCase()}!

+``` + +