Playthrough

code-hike · Aug 21, 2024 · 62a9b8f · 62a9b8f
1 parent 8d78b4f
commit 62a9b8f
Show file tree

Hide file tree

Showing 3 changed files with 170 additions and 3 deletions.
diff --git 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 (
-    <html lang="en">
+    <html
+      lang="en"
+      className={`${inter.className} ${overpass.variable}`}
+    >
       <body>{children}</body>
     </html>
   )

diff --git a/packages/core/app/playthrough.tsx 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 (
+    <div
+      style={{
+        display: "flex",
+        fontFamily: "var(--font-overpass)",
+        fontSize: 16,
+        lineHeight: 1.5,
+        height: "800px",
+        colorScheme: "dark",
+      }}
+    >
+      <style jsx global>
+        {`
+          body {
+            background: #242424;
+            color: #cccccc;
+            margin: 0;
+          }
+
+          article {
+            max-height: 100vh;
+            overflow: hidden;
+            height: 100vh;
+          }
+
+          a {
+            color: rgb(255, 83, 26);
+            text-decoration: none;
+            box-shadow: inset 0 -1px 0 0 rgb(255, 83, 26);
+          }
+
+          a:hover {
+            text-decoration: none;
+            box-shadow: inset 0 -2px 0 0 rgb(255, 83, 26);
+          }
+        `}
+      </style>
+      <div
+        style={{
+          width: 465,
+          borderRight: "2px solid #383838",
+          overflowY: "auto",
+          padding: "1em",
+        }}
+      >
+        {step.children}
+        <a
+          href="#"
+          onClick={e => {
+            e.preventDefault()
+            setIndex(index + 1)
+          }}
+        >
+          Next
+        </a>
+      </div>
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <div style={{ flex: 1 }}>Code</div>
+        <div style={{ height: 405 }}>Preview</div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/core/posts/svelte.mdx 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"
+
+<Hike as={Playthrough}>
+
+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
+<h1>Welcome!</h1>
+```
+
+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
+<script>
+	let name = 'Svelte';
+</script>
+
+<h1>Hello world!</h1>
+```
+
+Then, we can refer to `name` in the markup:
+
+```svelte App.svelte
+<h1>Hello {name}!</h1>
+```
+
+Inside the curly braces, we can put any JavaScript we want. Try changing `name` to `name.toUpperCase()` for a shoutier greeting.
+
+```svelte App.svelte
+<h1>Hello {name.toUpperCase()}!</h1>
+```
+
+</Hike>