Merge pull request #1069 from preactjs/refactor/tutorial-titles

refactor: Keep tutorial titles in w/ markdown content

content/en/tutorial/01-vdom.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial
 next: /tutorial/02-events
-title: Virtual DOM
 solvable: true
 ---
 
+# Virtual DOM
+
 You might have heard people refer to "Virtual DOM", and wondered:
 what makes it "virtual"? How is a "virtual" DOM different from
 the real DOM we use when programming for the browser?

content/en/tutorial/02-events.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/01-vdom
 next: /tutorial/03-components
-title: Events
 solvable: true
 ---
 
+# Events
+
 Events are how we make applications interactive, responding to inputs like
 keyboard and mouse, and reacting to changes like an image loading. Events
 work the same way in Preact as they do in the DOM – any event type or behavior

content/en/tutorial/03-components.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/02-events
 next: /tutorial/04-state
-title: Components
 solvable: true
 ---
 
+# Components
+
 As we alluded to in part one of this tutorial, the key building block
 in Virtual DOM applications is the Component. A Component is a self-contained
 piece of an application that can be rendered as part of the Virtual DOM

content/en/tutorial/04-state.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/03-components
 next: /tutorial/05-refs
-title: State
 solvable: true
 ---
 
+# State
+
 Now that we know how to create HTML elements and components, and how to
 pass props and event handlers to both using JSX, it's time to learn how
 to update the Virtual DOM tree.

content/en/tutorial/05-refs.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/04-state
 next: /tutorial/06-context
-title: Refs
 solvable: true
 ---
 
+# Refs
+
 As we learned in the first chapter, the DOM provides an imperative API,
 which lets us make changes by calling functions on elements. One example
 where we might need to access the imperative DOM API from a Preact

content/en/tutorial/06-context.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/05-refs
 next: /tutorial/07-side-effects
-title: Context
 solvable: true
 ---
 
+# Context
+
 As an application grows larger, its Virtual DOM tree often becomes deeply
 nested and composed of many different components. Components at various
 locations within the tree sometimes need to access common data - typically

content/en/tutorial/07-side-effects.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/06-context
 next: /tutorial/08-keys
-title: Side Effects
 solvable: true
 ---
 
+# Side Effects
+
 Side effects are bits of code that run when changes happen in the Virtual
 DOM tree. They don't follow the standard approach of accepting `props`
 and returning a new Virtual DOM tree, and often reach out of the tree

content/en/tutorial/08-keys.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/07-side-effects
 next: /tutorial/09-error-handling
-title: Keys
 solvable: true
 ---
 
+# Keys
+
 In chapter one, we saw how Preact uses a Virtual DOM to calculate what
 changed between two trees described by our JSX, then applies those
 changes to the HTML DOM to update pages. This works well for most

content/en/tutorial/09-error-handling.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/08-keys
 next: /tutorial/10-links
-title: Error Handling
 solvable: true
 ---
 
+# Error Handling
+
 JavaScript is a flexible interpreted language, which means it's possible (and even easy)
 to encounter errors at runtime. Whether the result of an unexpected scenario or a mistake
 in code we've written, it's important to be able to monitor errors and implement some form

content/en/tutorial/10-links.md

@@ -1,9 +1,10 @@
 ---
 prev: /tutorial/09-error-handling
-title: Congratulations!
 solvable: false
 ---
 
+# Congratulations!
+
 You've completed the Preact tutorial!
 
 Feel free to play around a bit more with the demo code.

content/en/tutorial/index.md

@@ -1,11 +1,12 @@
 ---
 next: /tutorial/01-vdom
 nextText: 'Begin Tutorial'
-title: Learn Preact
 code: false
 solvable: false
 ---
 
+# Learn Preact
+
 Have you ever wondered what Preact is all about, or how it works?
 
 Maybe you've been creating awesome websites using WordPress, designing

content/kr/tutorial/01-vdom.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial
 next: /tutorial/02-events
-title: 가상 DOM
 solvable: true
 ---
 
+# 가상 DOM
+
 사람들이 "가상 DOM"을 언급하는 것을 듣고 "가상"으로 만드는 것이 무엇인지 궁금했을 것입니다. 브라우저용으로 프로그래밍할 때 사용하는 실제 DOM과 "가상" DOM은 어떻게 다릅니까?
 
 가상 DOM 의 객체를 사용하는 트리 구조에 대한 간단한 설명입니다 :

content/kr/tutorial/02-events.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/01-vdom
 next: /tutorial/03-components
-title: 이벤트
 solvable: true
 ---
 
+# 이벤트
+
 이벤트는 애플리케이션을 interactive 하게 만들고, 키보드와 마우스와 같은 입력에 응답하며, 이미지 로드와 같은 변화에 대응하는 방식입니다. 이벤트는 DOM에서와 동일한 방식으로 Preact에서 작동합니다. [MDN] 에서 찾을 수 있는 모든 이벤트 유형 또는 동작은 Preact에서 사용할 수 있습니다. 예를 들어, 다음은 일반적으로  DOM API를 사용하여 이벤트 핸들러를 등록하는 방법입니다.:
 
 ```js

content/kr/tutorial/index.md

@@ -1,11 +1,12 @@
 ---
 next: /tutorial/01-vdom
 nextText: '튜토리얼 시작'
-title: Preact 배우기
 code: false
 solvable: false
 ---
 
+# Preact 배우기
+
 Preact가 무엇이며, 어떻게 동작하는지 궁금했던 적이 있나요?
 
 여러분은 아마도 워드프레스를 이용하여 멋진 웹사이트를 만들거나, D3로 그래픽 요소를 디자인하거나, jQuery로 유용한 대화형 폼을 만들어 본 경험이 있을 것입니다. 그리고 어느 순간에는 작성한 JavaScript가 복잡해져서 페이지의 일부를 제어하는 파일이 무엇인지 기억하기 어려웠거나 두 플러그인 간 상호 작용을 디버깅하는 것이 어려웠던 적도 경험해 봤을 것입니다.

content/ru/tutorial/01-vdom.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial
 next: /tutorial/02-events
-title: Virtual DOM
 solvable: true
 ---
 
+# Virtual DOM
+
 Возможно, вы слышали, как люди упоминают «Virtual DOM», и задавались вопросом: что делает его «виртуальным»? Чем «виртуальный» DOM отличается от реального DOM, который мы используем при программировании для браузера?
 
 [Virtual DOM](https://doka.guide/tools/react-and-alternatives/#virtual-dom) — это простое описание древовидной структуры с использованием объектов:

content/ru/tutorial/02-events.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/01-vdom
 next: /tutorial/03-components
-title: События
 solvable: true
 ---
 
+# События
+
 События — это то, с помощью чего мы делаем приложения интерактивными, реагируя на вводимые данные, такие как клавиатура и мышь, и на изменения, например, загрузку изображения. События в Preact работают так же, как и в DOM — любой тип события или поведение, которые вы можете найти в [MDN], могут быть использованы в Preact. В качестве примера приведем, как обычно регистрируются обработчики событий с использованием императивного DOM API:
 
 ```js

content/ru/tutorial/03-components.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/02-events
 next: /tutorial/04-state
-title: Компоненты
 solvable: true
 ---
 
+# Компоненты
+
 Как мы уже упоминали в первой части этого учебника, ключевым элементом приложений Virtual DOM является компонент. Компонент — это самостоятельная часть приложения, которая может быть отображена как часть дерева Virtual DOM, подобно элементу HTML. Компонент можно рассматривать как вызов функции: оба являются механизмами, обеспечивающими повторное использование и перенаправление кода.
 
 Для иллюстрации создадим простой компонент `MyButton`, который возвращает дерево Virtual DOM, описывающее элемент HTML `<button>`:

content/ru/tutorial/04-state.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/03-components
 next: /tutorial/05-refs
-title: Состояние
 solvable: true
 ---
 
+# Состояние
+
 Теперь, когда мы знаем, как создавать HTML-элементы и компоненты, как передавать им параметры и обработчики событий с помощью JSX, пришло время научиться обновлять дерево Virtual DOM.
 
 Как мы уже упоминали в предыдущей главе, и функциональные, и классовые компоненты могут иметь **состояние** — данные, хранимые компонентом, которые используются для изменения его дерева Virtual DOM. Когда компонент обновляет свое состояние, Preact перерисовывает этот компонент, используя обновленное значение состояния. Для функциональных компонентов это означает, что Preact повторно вызовет функцию, в то время как для классовых компонентов он повторно вызовет только метод класса `render()`. Рассмотрим пример каждого из них.

content/ru/tutorial/05-refs.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/04-state
 next: /tutorial/06-context
-title: Refs
 solvable: true
 ---
 
+# Refs
+
 Как мы узнали в первой главе, DOM предоставляет императивный API, позволяющий вносить изменения путем вызова функций для элементов. Одним из примеров, когда нам может потребоваться доступ к императивному DOM API из компонента Preact, является автоматическое перемещение фокуса на элемент ввода.
 
 Свойство `autoFocus` (или атрибут `autofocus`) может быть использовано для фокусировки ввода при первом его отображении, однако бывают ситуации, когда мы хотим переместить фокус на ввод в определённое время или в ответ на определённое событие.

content/ru/tutorial/06-context.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/05-refs
 next: /tutorial/07-side-effects
-title: Контекст
 solvable: true
 ---
 
+# Контекст
+
 По мере роста приложения его дерево Virtual DOM часто становится глубоко вложенным и состоит из множества различных компонентов. Компоненты, расположенные в разных местах дерева, иногда нуждаются в доступе к общим данным — как правило, это фрагменты состояния приложения, такие как аутентификация, информация о профиле пользователя, кэши, хранилища и т. д. Хотя можно передавать всю эту информацию вниз по дереву в виде параметров компонентов, это означает, что каждый компонент должен иметь некоторое осознание всего этого состояния — даже если всё, что оно делает, это передает его дальше по дереву.
 
 Контекст — это функция, позволяющая нам передавать значения вниз по дереву _автоматически_, без необходимости информирования компонентов. Для этого используется подход «поставщик/потребитель»:

content/ru/tutorial/07-side-effects.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/06-context
 next: /tutorial/08-keys
-title: Побочные эффекты
 solvable: true
 ---
 
+# Побочные эффекты
+
 Побочные эффекты — это фрагменты кода, которые выполняются при изменениях в дереве Virtual DOM. Они не следуют стандартному подходу, заключающемуся в приеме `props` и возврате нового дерева Virtual DOM, и часто выходят за пределы дерева для изменения состояния или вызова императивного кода, например, для обращения к API DOM. Побочные эффекты также часто используются в качестве способа инициирования выборки данных.
 
 ### Эффекты: побочные эффекты у функциональных компонентов

content/ru/tutorial/08-keys.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/07-side-effects
 next: /tutorial/09-error-handling
-title: Ключи
 solvable: true
 ---
 
+# Ключи
+
 В первой главе мы рассмотрели, как Preact использует Virtual DOM для вычисления того, что изменилось между двумя деревьями, описанными нашим JSX, а затем применяет эти изменения к HTML DOM для обновления страниц. Это хорошо работает для большинства сценариев, но иногда требуется, чтобы Preact «угадывал», как изменилась форма дерева между двумя рендерами.
 
 Наиболее распространённым сценарием, когда предположение Preact может отличаться от нашего замысла, является сравнение списков. Рассмотрим простой компонент списка дел:

content/ru/tutorial/09-error-handling.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/08-keys
 next: /tutorial/10-links
-title: Обработка ошибок
 solvable: true
 ---
 
+# Обработка ошибок
+
 JavaScript — гибкий интерпретируемый язык, а значит, на нём можно очень легко встретить ошибки во время выполнения. Будь то результат непредвиденного сценария или ошибка в написанном нами коде, важно уметь отслеживать ошибки и реализовывать некоторую форму восстановления или изящной обработки ошибок.
 
 В Preact для этого используется перехват ошибок и сохранение их в виде состояния. Это позволяет компоненту перехватить неожиданный или неработающий рендеринг и переключиться на рендеринг чего-то другого в качестве запасного варианта.

content/ru/tutorial/10-links.md

@@ -1,9 +1,10 @@
 ---
 prev: /tutorial/09-error-handling
-title: Поздравляем!
 solvable: false
 ---
 
+# Поздравляем!
+
 Вы завершили обучение Preact!
 
 Не стесняйтесь поработать с демонстрационным кодом.

content/ru/tutorial/index.md

@@ -1,11 +1,12 @@
 ---
 next: /tutorial/01-vdom
 nextText: 'Начать обучение'
-title: Изучение Preact
 code: false
 solvable: false
 ---
 
+# Изучение Preact
+
 Вы когда-нибудь задумывались о том, что такое Preact и как он работает?
 
 Возможно, вы создавали потрясающие сайты на WordPress, разрабатывали графики с помощью D3 или придумывали полезные интерактивные формы с помощью jQuery. В какой-то момент написанный вами JavaScript стал настолько сложным, что

content/zh/tutorial/01-vdom.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial
 next: /tutorial/02-events
-title: 虚拟 DOM
 solvable: true
 ---
 
+# 虚拟 DOM
+
 你可能已经听到不少人提到过 "虚拟 DOM"，你想知道:
 它到底是怎么"虚拟"的？ 虚拟 DOM 与我们在编程时使用的真实 DOM 有什么不同？
 

content/zh/tutorial/02-events.md

@@ -1,10 +1,11 @@
 ---
 prev: /tutorial/01-vdom
 next: /tutorial/03-components
-title: 事件
 solvable: true
 ---
 
+# 事件
+
 事件是应用对用户交互 (如键盘、鼠标输入或图像载入) 做出反馈的关键，您可以在 Preact 中使用所有 DOM 事件或行为 (参见 [MDN])。举个例子，下面是使用 DOM API 注册事件处理程序的方式：
 
 ```js

content/zh/tutorial/10-links.md

@@ -1,9 +1,10 @@
 ---
 prev: /tutorial/09-error-handling
-title: 恭喜您！
 solvable: false
 ---
 
+# 恭喜您！
+
 您完成了 Preact 教程！
 
 我们欢迎您继续捣鼓捣鼓示例代码。

content/zh/tutorial/index.md

@@ -1,11 +1,12 @@
 ---
 next: /tutorial/01-vdom
 nextText: '开始教程'
-title: 了解 Preact
 code: false
 solvable: false
 ---
 
+# 了解 Preact
+
 您有没有好奇过 Preact 是什么，或是其工作原理？
 
 或许您正在使用 WordPress 构建一个很棒的网站，或是使用 D3 设计图表，亦或是使用 jQuery 构建一款帮助别人的交互表格。但在途中，您总是会遇到 JavaScript 项目变得越来越复杂、越来越难管理的情况——也许会忘记哪个文件控制哪个页面，也许会在调试两个同时增强一个元素的插件时遇到困难。

src/components/controllers/tutorial/index.js

@@ -175,7 +175,6 @@ function TutorialView({
 	const { lang, solved } = useStore(['lang', 'solved']).state;
 	const fullPath = route.path.replace(':step?', step || route.first);
 	const page = usePage({ path: fullPath }, lang);
-	const title = (page && page.meta.title) || route.title;
 	const solvable = page && page.meta.solvable === true;
 	const hasCode = page && page.meta.code !== false && step && step !== 'index';
 	const showCode = showCodeOverride && hasCode;
@@ -278,8 +277,6 @@ function TutorialView({
 				}
 			>
 				<div class={style.tutorialWindow} ref={content}>
-					<h1 class={style.title}>{title}</h1>
-
 					<ContentRegion
 						current={page.current}
 						content={page.html}