Merge pull request #1034 from preactjs/fix/home-repl-examples

fix: REPL examples on landing page
preactjs · Dec 3, 2023 · 2d43d44 · 2d43d44
2 parents 9e7798a + 07aa2df
commit 2d43d44
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 14 deletions.
diff --git a/content/de/index.md b/content/de/index.md
@@ -141,23 +141,25 @@ function Counter() {
     <div>
         <h2>To Do-Listen-Komponente</h2>
         <pre><code class="lang-jsx">
-export default class ToDoList extends Component {
+// --repl
+export default class TodoList extends Component {
     state = { todos: [], text: '' };
     setText = e =&gt; {
         this.setState({ text: e.target.value });
     };
-    addToDo = () =&gt; {
+    addTodo = () =&gt; {
         let { todos, text } = this.state;
         todos = todos.concat({ text });
         this.setState({ todos, text: '' });
     };
     render({ }, { todos, text }) {
         return (
-            &lt;form onSubmit={this.addToDo} action="javascript:"&gt;
+            &lt;form onSubmit={this.addTodo} action="javascript:"&gt;
                 &lt;label&gt;
                   &lt;span&gt;Add Todo&lt;/span&gt;
                   &lt;input value={text} onInput={this.setText} /&gt;
                 &lt;/label&gt;
+                &lt;button type="submit"&gt;Add&lt;/button&gt;
                 &lt;ul&gt;
                     { todos.map( todo =&gt; (
                         &lt;li&gt;{todo.text}&lt;/li&gt;
@@ -167,6 +169,8 @@ export default class ToDoList extends Component {
         );
     }
 }
+// --repl-after
+render(&lt;TodoList /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>
@@ -187,20 +191,23 @@ render(&lt;ToDoList /&gt;, document.body);
     <div>
         <h2>Zeige GitHub-Stars</h2>
         <pre><code class="lang-jsx">
+// --repl
 export default class Stars extends Component {
     async componentDidMount() {
         let stars = await githubStars(this.props.repo);
         this.setState({ stars });
     }
     render({ repo }, { stars=0 }) {
-        let url = \`https://github.com/${repo}\`;
+        let url = `https://github.com/${repo}`;
         return (
             &lt;a href={url} class="stars"&gt;
                 ⭐️ {stars} Stars
             &lt;/a&gt;
         );
     }
 }
+// --repl-after
+render(&lt;Stars /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/en/index.md b/content/en/index.md
@@ -138,6 +138,7 @@ function Counter() {
     <div>
         <h2>Todo List</h2>
         <pre><code class="lang-jsx">
+// --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
     setText = e =&gt; {
@@ -165,6 +166,8 @@ export default class TodoList extends Component {
         );
     }
 }
+// --repl-after
+render(&lt;TodoList /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>
@@ -184,6 +187,7 @@ render(&lt;TodoList /&gt;, document.body);
     <div>
         <h2>Fetch GitHub Stars</h2>
         <pre><code class="lang-jsx">
+// --repl
 export default class Stars extends Component {
     async componentDidMount() {
         let stars = await githubStars(this.props.repo);
@@ -198,6 +202,8 @@ export default class Stars extends Component {
         );
     }
 }
+// --repl-after
+render(&lt;Stars /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/es/index.md b/content/es/index.md
@@ -147,6 +147,7 @@ function Counter() {
     <div>
         <h2>Componente de Todo List</h2>
         <pre><code class="lang-jsx">
+// --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
     setText = e =&gt; {
@@ -161,9 +162,10 @@ export default class TodoList extends Component {
         return (
             &lt;form onSubmit={this.addTodo} action="javascript:"&gt;
                 &lt;label&gt;
-                  &lt;span&gt;Add Todo&lt;span&gt;
+                  &lt;span&gt;Add Todo&lt;/span&gt;
                   &lt;input value={text} onInput={this.setText} /&gt;
                 &lt;/label&gt;
+                &lt;button type="submit"&gt;Add&lt;/button&gt;
                 &lt;ul&gt;
                     { todos.map( todo =&gt; (
                         &lt;li&gt;{todo.text}&lt;/li&gt;
@@ -173,6 +175,8 @@ export default class TodoList extends Component {
         );
     }
 }
+// --repl-after
+render(&lt;TodoList /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>
@@ -193,20 +197,23 @@ render(&lt;TodoList /&gt;, document.body);
     <div>
         <h2>Buscando las estrellas de Github</h2>
         <pre><code class="lang-jsx">
+// --repl
 export default class Stars extends Component {
     async componentDidMount() {
         let stars = await githubStars(this.props.repo);
         this.setState({ stars });
     }
     render({ repo }, { stars=0 }) {
-        let url = \`https://github.com/${repo}\`;
+        let url = `https://github.com/${repo}`;
         return (
             &lt;a href={url} class="stars"&gt;
                 ⭐️ {stars} Stars
             &lt;/a&gt;
         );
     }
 }
+// --repl-after
+render(&lt;Stars /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/fr/index.md b/content/fr/index.md
@@ -140,6 +140,7 @@ function Counter() {
     <div>
         <h2>Composant liste de tâches</h2>
         <pre><code class="lang-jsx">
+// --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
     setText = e =&gt; {
@@ -154,9 +155,10 @@ export default class TodoList extends Component {
         return (
             &lt;form onSubmit={this.addTodo} action="javascript:"&gt;
                 &lt;label&gt;
-                  &lt;span&gt;Add Todo&lt;span&gt;
+                  &lt;span&gt;Add Todo&lt;/span&gt;
                   &lt;input value={text} onInput={this.setText} /&gt;
                 &lt;/label&gt;
+                &lt;button type="submit"&gt;Add&lt;/button&gt;
                 &lt;ul&gt;
                     { todos.map( todo =&gt; (
                         &lt;li&gt;{todo.text}&lt;/li&gt;
@@ -166,6 +168,8 @@ export default class TodoList extends Component {
         );
     }
 }
+// --repl-after
+render(&lt;TodoList /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>
@@ -186,20 +190,23 @@ render(&lt;TodoList /&gt;, document.body);
     <div>
         <h2>Récupérer les Stars Github</h2>
         <pre><code class="lang-jsx">
+// --repl
 export default class Stars extends Component {
     async componentDidMount() {
         let stars = await githubStars(this.props.repo);
         this.setState({ stars });
     }
     render({ repo }, { stars=0 }) {
-        let url = \`https://github.com/${repo}\`;
+        let url = `https://github.com/${repo}`;
         return (
             &lt;a href={url} class="stars"&gt;
                 ⭐️ {stars} Stars
             &lt;/a&gt;
         );
     }
 }
+// --repl-after
+render(&lt;Stars /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/it/index.md b/content/it/index.md
@@ -147,6 +147,7 @@ function Counter() {
     <div>
         <h2>Componente Lista delle attività</h2>
         <pre><code class="lang-jsx">
+// --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
     setText = e =&gt; {
@@ -161,9 +162,10 @@ export default class TodoList extends Component {
         return (
             &lt;form onSubmit={this.addTodo} action="javascript:"&gt;
                 &lt;label&gt;
-                  &lt;span&gt;Add Todo&lt;span&gt;
+                  &lt;span&gt;Add Todo&lt;/span&gt;
                   &lt;input value={text} onInput={this.setText} /&gt;
                 &lt;/label&gt;
+                &lt;button type="submit"&gt;Add&lt;/button&gt;
                 &lt;ul&gt;
                     { todos.map( todo =&gt; (
                         &lt;li&gt;{todo.text}&lt;/li&gt;
@@ -173,6 +175,8 @@ export default class TodoList extends Component {
         );
     }
 }
+// --repl-after
+render(&lt;TodoList /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>
@@ -193,20 +197,23 @@ render(&lt;TodoList /&gt;, document.body);
     <div>
         <h2>Visualizzare le stelle su GitHub</h2>
         <pre><code class="lang-jsx">
+// --repl
 export default class Stars extends Component {
     async componentDidMount() {
         let stars = await githubStars(this.props.repo);
         this.setState({ stars });
     }
     render({ repo }, { stars=0 }) {
-        let url = \`https://github.com/${repo}\`;
+        let url = `https://github.com/${repo}`;
         return (
             &lt;a href={url} class="stars"&gt;
                 ⭐️ {stars} Stars
             &lt;/a&gt;
         );
     }
 }
+// --repl-after
+render(&lt;Stars /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/ja/index.md b/content/ja/index.md
@@ -137,6 +137,7 @@ function Counter() {
     <div>
         <h2>Todoリスト</h2>
         <pre><code class="lang-jsx">
+// --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
     setText = e =&gt; {
@@ -164,6 +165,8 @@ export default class TodoList extends Component {
         );
     }
 }
+// --repl-after
+render(&lt;TodoList /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>
@@ -183,6 +186,7 @@ render(&lt;TodoList /&gt;, document.body);
     <div>
         <h2>GitHubのスター数を取得</h2>
         <pre><code class="lang-jsx">
+// --repl
 export default class Stars extends Component {
     async componentDidMount() {
         let stars = await githubStars(this.props.repo);
@@ -197,6 +201,8 @@ export default class Stars extends Component {
         );
     }
 }
+// --repl-after
+render(&lt;Stars /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/kr/index.md b/content/kr/index.md
@@ -133,6 +133,7 @@ function Counter() {
     <div>
         <h2>Todo 리스트</h2>
         <pre><code class="lang-jsx">
+// --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
     setText = e =&gt; {
@@ -160,6 +161,8 @@ export default class TodoList extends Component {
         );
     }
 }
+// --repl-after
+render(&lt;TodoList /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>
@@ -179,6 +182,7 @@ render(&lt;TodoList /&gt;, document.body);
     <div>
         <h2>GitHub Star 가져오기</h2>
         <pre><code class="lang-jsx">
+// --repl
 export default class Stars extends Component {
     async componentDidMount() {
         let stars = await githubStars(this.props.repo);
@@ -193,6 +197,8 @@ export default class Stars extends Component {
         );
     }
 }
+// --repl-after
+render(&lt;Stars /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/pt-br/index.md b/content/pt-br/index.md
@@ -137,6 +137,7 @@ function Counter() {
     <div>
         <h2>Componente de <i>Todo List</i> </h2>
         <pre><code class="lang-jsx">
+// --repl
 export default class TodoList extends Component {
     state = { todos: [], text: '' };
     setText = e =&gt; {
@@ -151,9 +152,10 @@ export default class TodoList extends Component {
         return (
             &lt;form onSubmit={this.addTodo} action="javascript:"&gt;
                 &lt;label&gt;
-                  &lt;span&gt;Add Todo&lt;span&gt;
+                  &lt;span&gt;Add Todo&lt;/span&gt;
                   &lt;input value={text} onInput={this.setText} /&gt;
                 &lt;/label&gt;
+                &lt;button type="submit"&gt;Add&lt;/button&gt;
                 &lt;ul&gt;
                     { todos.map( todo =&gt; (
                         &lt;li&gt;{todo.text}&lt;/li&gt;
@@ -163,6 +165,8 @@ export default class TodoList extends Component {
         );
     }
 }
+// --repl-after
+render(&lt;TodoList /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>
@@ -183,20 +187,23 @@ render(&lt;TodoList /&gt;, document.body);
     <div>
         <h2>Buscar estrelas no Github</h2>
         <pre><code class="lang-jsx">
+// --repl
 export default class Stars extends Component {
     async componentDidMount() {
         let stars = await githubStars(this.props.repo);
         this.setState({ stars });
     }
     render({ repo }, { stars=0 }) {
-        let url = \`https://github.com/${repo}\`;
+        let url = `https://github.com/${repo}`;
         return (
             &lt;a href={url} class="stars"&gt;
                 ⭐️ {stars} Stars
             &lt;/a&gt;
         );
     }
 }
+// --repl-after
+render(&lt;Stars /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>