From 363e304d859c4f66648bf46570e1ad35e5c21eaf Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 00:03:26 +0100 Subject: [PATCH 01/37] Remove home-button-sep node --- content/de/index.md | 2 -- content/en/index.md | 1 - content/es/index.md | 2 -- content/fr/index.md | 2 -- content/it/index.md | 2 -- content/pt-br/index.md | 2 -- content/tr/index.md | 2 -- content/zh/index.md | 2 -- 8 files changed, 15 deletions(-) diff --git a/content/de/index.md b/content/de/index.md index 200bbb2ab..f3608aa41 100755 --- a/content/de/index.md +++ b/content/de/index.md @@ -13,7 +13,6 @@ toc: false

Schnelle 3kB-Alternative zu React mit der gleichen ES6-API.

Fang an -   •   Wechsle zu Preact

@@ -233,7 +232,6 @@ render(

Fang an -   •   Wechsle zu Preact

diff --git a/content/en/index.md b/content/en/index.md index b2b5d8f8e..356bad0df 100755 --- a/content/en/index.md +++ b/content/en/index.md @@ -227,7 +227,6 @@ render(

Get Started -   •   Switch to Preact

diff --git a/content/es/index.md b/content/es/index.md index 64986a369..42973bda8 100755 --- a/content/es/index.md +++ b/content/es/index.md @@ -13,7 +13,6 @@ toc: false

Una alternativa veloz a React en 3kB con la misma API de ES6.

Primeros pasos -   •   Cambiar a Preact

@@ -238,7 +237,6 @@ render(

Primeros pasos -   •   Cambiando a Preact

diff --git a/content/fr/index.md b/content/fr/index.md index cb94e15a1..835177fce 100755 --- a/content/fr/index.md +++ b/content/fr/index.md @@ -12,7 +12,6 @@ toc: false

Alternative légère et rapide à React avec le même API en seulement 3Ko.

Commencer -   •   Passer à preact

@@ -232,7 +231,6 @@ render(

Commencer -   •   Passer à Preact

diff --git a/content/it/index.md b/content/it/index.md index c90c0e241..dd0eb69a2 100755 --- a/content/it/index.md +++ b/content/it/index.md @@ -13,7 +13,6 @@ toc: false

Un alternativa veloce e leggera 3Kb a React con le stesse moderne API.

Primi Passi -       Passare a Preact

@@ -239,7 +238,6 @@ render(

Primi passi -   •   Passa a Preact

diff --git a/content/pt-br/index.md b/content/pt-br/index.md index e875e0032..f5a447628 100755 --- a/content/pt-br/index.md +++ b/content/pt-br/index.md @@ -13,7 +13,6 @@ toc: false

Uma alternativa ao React com apenas 3kB e a mesma API ES6.

Como começar -   •   Mudando para Preact

@@ -229,7 +228,6 @@ render(

Como começar -   •   Mudando para Preact

diff --git a/content/tr/index.md b/content/tr/index.md index 3f63fbf87..f28d71343 100755 --- a/content/tr/index.md +++ b/content/tr/index.md @@ -13,7 +13,6 @@ toc: false

Aynı modern API ile React'e hızlı ve 3kB'lık alternatif.

Başlangıç -       Preact'e Geçiş

@@ -241,7 +240,6 @@ render(

Başlangıç -   •   Preact'e Geçiş

diff --git a/content/zh/index.md b/content/zh/index.md index 6f0275e2f..24cfa944c 100755 --- a/content/zh/index.md +++ b/content/zh/index.md @@ -13,7 +13,6 @@ toc: false

React 的 3kb 轻量化方案，拥有同样的 ES6 API

如何开始 -   •   切换到 preact

@@ -232,7 +231,6 @@ render(

如何开始 -   •   切换到 Preact

From c8fac43130f29efeb33e6ce4f3d3f3c968175fc2 Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 00:04:13 +0100 Subject: [PATCH 02/37] Cleanup home button styles --- src/style/index.less | 27 ++++++--------------------- 1 file changed, 6 insertions(+), 21 deletions(-) diff --git a/src/style/index.less b/src/style/index.less index 11033cfcf..849eba2db 100755 --- a/src/style/index.less +++ b/src/style/index.less @@ -223,18 +223,6 @@ main .markup { justify-content: center; align-items: initial; } - - .home-button + .home-button { - margin-top: 1.3rem; - - @media (min-width: 600px) { - margin-top: 0; - } - } - } - - .home-button { - margin: 0 1rem; } .home-demo { @@ -327,17 +315,14 @@ main .markup { font-weight: bold; text-transform: uppercase; white-space: nowrap; - - & + .home-button-sep + .home-button { - @media (max-width: 600px) { - margin-top: 1.3rem; - } - } + margin: 0 1rem; } -.home-button-sep { - @media (max-width: 600px) { - display: none; +.home-button + .home-button { + margin-top: 1.3rem; + + @media (min-width: 600px) { + margin-top: 0; } } From 82bc19326ec416a1f1345262cdb618a0868c6e7b Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 00:08:26 +0100 Subject: [PATCH 03/37] Create buttons.less --- src/style/buttons.less | 22 ++++++++++++++++++++++ src/style/index.less | 24 +----------------------- 2 files changed, 23 insertions(+), 23 deletions(-) create mode 100644 src/style/buttons.less diff --git a/src/style/buttons.less b/src/style/buttons.less new file mode 100644 index 000000000..0d7f1e11a --- /dev/null +++ b/src/style/buttons.less @@ -0,0 +1,22 @@ +.home-button { + display: inline-block; + min-width: 12em; + padding: 0.5em 0.9em; + background: #eee !important; + box-shadow: 0 2px 0 rgba(@color-brand, 0.3); + border: none; + border-radius: 4px; + color: var(--color-home-btn) !important; + font-weight: bold; + text-transform: uppercase; + white-space: nowrap; + margin: 0 1rem; +} + +.home-button + .home-button { + margin-top: 1.3rem; + + @media (min-width: 600px) { + margin-top: 0; + } +} diff --git a/src/style/index.less b/src/style/index.less index 849eba2db..3117e2f7f 100755 --- a/src/style/index.less +++ b/src/style/index.less @@ -1,5 +1,6 @@ @import './helpers'; @import './reset'; +@import './buttons'; @import './markdown'; @import './gh-btn'; @import './list-view'; @@ -303,29 +304,6 @@ main .markup { } } -.home-button { - display: inline-block; - min-width: 12em; - padding: 0.5em 0.9em; - background: #eee !important; - box-shadow: 0 2px 0 rgba(@color-brand, 0.3); - border: none; - border-radius: 4px; - color: var(--color-home-btn) !important; - font-weight: bold; - text-transform: uppercase; - white-space: nowrap; - margin: 0 1rem; -} - -.home-button + .home-button { - margin-top: 1.3rem; - - @media (min-width: 600px) { - margin-top: 0; - } -} - @break-s: ~'(min-width: 700px)'; // Styles for a typical media/flag layout where you have one image on the left From d14fc6b6ad63e6907b1eed5fbf9309e719951473 Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 00:11:52 +0100 Subject: [PATCH 04/37] Minor home button design changes --- src/style/buttons.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/style/buttons.less b/src/style/buttons.less index 0d7f1e11a..053120cb0 100644 --- a/src/style/buttons.less +++ b/src/style/buttons.less @@ -1,16 +1,16 @@ .home-button { display: inline-block; min-width: 12em; - padding: 0.5em 0.9em; + padding: 0.75rem 2rem; + margin: 0 1rem; background: #eee !important; - box-shadow: 0 2px 0 rgba(@color-brand, 0.3); + box-shadow: 0 0.125rem 0 rgba(@color-brand, 0.3); border: none; - border-radius: 4px; + border-radius: 0.25rem; color: var(--color-home-btn) !important; - font-weight: bold; text-transform: uppercase; white-space: nowrap; - margin: 0 1rem; + letter-spacing: 0.075em; } .home-button + .home-button { From 37678729e2459384650e030edb32d554b561f3a2 Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 00:14:40 +0100 Subject: [PATCH 05/37] Rename css class home-button to btn --- content/de/index.md | 8 ++++---- content/en/index.md | 8 ++++---- content/es/index.md | 8 ++++---- content/fr/index.md | 8 ++++---- content/it/index.md | 8 ++++---- content/pt-br/index.md | 8 ++++---- content/tr/index.md | 8 ++++---- content/zh/index.md | 8 ++++---- src/style/buttons.less | 4 ++-- 9 files changed, 34 insertions(+), 34 deletions(-) diff --git a/content/de/index.md b/content/de/index.md index f3608aa41..1045d6547 100755 --- a/content/de/index.md +++ b/content/de/index.md @@ -12,8 +12,8 @@ toc: false

Schnelle 3kB-Alternative zu React mit der gleichen ES6-API.

- Fang an - Wechsle zu Preact + Fang an + Wechsle zu Preact

5,000+ @@ -231,7 +231,7 @@ render( Wähle die Anleitung aus, die für dich am besten geeignet ist!

- Fang an - Wechsle zu Preact + Fang an + Wechsle zu Preact

diff --git a/content/en/index.md b/content/en/index.md index 356bad0df..fa58ac03b 100755 --- a/content/en/index.md +++ b/content/en/index.md @@ -12,8 +12,8 @@ description: 'Preact is a fast 3kB alternative to React with the same modern API

Fast 3kB alternative to React with the same modern API.

- Get Started - Switch to Preact + Get Started + Switch to Preact

20,000+ @@ -226,7 +226,7 @@ render( Pick the guide that works best for you!

- Get Started - Switch to Preact + Get Started + Switch to Preact

diff --git a/content/es/index.md b/content/es/index.md index 42973bda8..d51863521 100755 --- a/content/es/index.md +++ b/content/es/index.md @@ -12,8 +12,8 @@ toc: false

Una alternativa veloz a React en 3kB con la misma API de ES6.

- Primeros pasos - Cambiar a Preact + Primeros pasos + Cambiar a Preact

5,000+ @@ -236,7 +236,7 @@ render( ¡Elige la guía que mejor te funcione!

- Primeros pasos - Cambiando a Preact + Primeros pasos + Cambiando a Preact

diff --git a/content/fr/index.md b/content/fr/index.md index 835177fce..c36c52714 100755 --- a/content/fr/index.md +++ b/content/fr/index.md @@ -11,8 +11,8 @@ toc: false

Alternative légère et rapide à React avec le même API en seulement 3Ko.

- Commencer - Passer à preact + Commencer + Passer à preact

5,000+ @@ -230,7 +230,7 @@ render( Choisissez celui qui vous convient.

- Commencer - Passer à Preact + Commencer + Passer à Preact

diff --git a/content/it/index.md b/content/it/index.md index dd0eb69a2..309140979 100755 --- a/content/it/index.md +++ b/content/it/index.md @@ -12,8 +12,8 @@ toc: false

Un alternativa veloce e leggera 3Kb a React con le stesse moderne API.

- Primi Passi - Passare a Preact + Primi Passi + Passare a Preact

19,000+ @@ -237,7 +237,7 @@ render( Scegli la guida migliore per te!

- Primi passi - Passa a Preact + Primi passi + Passa a Preact

diff --git a/content/pt-br/index.md b/content/pt-br/index.md index f5a447628..f02847345 100755 --- a/content/pt-br/index.md +++ b/content/pt-br/index.md @@ -12,8 +12,8 @@ toc: false

Uma alternativa ao React com apenas 3kB e a mesma API ES6.

- Como começar - Mudando para Preact + Como começar + Mudando para Preact

5,000+ @@ -227,7 +227,7 @@ render( Escolha a melhor opção pra você!

- Como começar - Mudando para Preact + Como começar + Mudando para Preact

diff --git a/content/tr/index.md b/content/tr/index.md index f28d71343..9a5bf825a 100755 --- a/content/tr/index.md +++ b/content/tr/index.md @@ -12,8 +12,8 @@ toc: false

Aynı modern API ile React'e hızlı ve 3kB'lık alternatif.

- Başlangıç - Preact'e Geçiş + Başlangıç + Preact'e Geçiş

5,000+ @@ -239,7 +239,7 @@ render( Size uygun olan kılavuzu seçin!

- Başlangıç - Preact'e Geçiş + Başlangıç + Preact'e Geçiş

diff --git a/content/zh/index.md b/content/zh/index.md index 24cfa944c..608696970 100755 --- a/content/zh/index.md +++ b/content/zh/index.md @@ -12,8 +12,8 @@ toc: false

React 的 3kb 轻量化方案，拥有同样的 ES6 API

- 如何开始 - 切换到 preact + 如何开始 + 切换到 preact

5,000+ @@ -230,7 +230,7 @@ render( 选取最适合您的指导规范！

- 如何开始 - 切换到 Preact + 如何开始 + 切换到 Preact

diff --git a/src/style/buttons.less b/src/style/buttons.less index 053120cb0..2b3e30fa1 100644 --- a/src/style/buttons.less +++ b/src/style/buttons.less @@ -1,4 +1,4 @@ -.home-button { +.btn { display: inline-block; min-width: 12em; padding: 0.75rem 2rem; @@ -13,7 +13,7 @@ letter-spacing: 0.075em; } -.home-button + .home-button { +.btn + .btn { margin-top: 1.3rem; @media (min-width: 600px) { From 40638f998bd24e9b66b311e81f0bd5a861aa2079 Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 00:25:54 +0100 Subject: [PATCH 06/37] Add primary and secondary button styles --- content/de/index.md | 8 ++++---- content/en/index.md | 8 ++++---- content/es/index.md | 8 ++++---- content/fr/index.md | 8 ++++---- content/it/index.md | 8 ++++---- content/pt-br/index.md | 8 ++++---- content/tr/index.md | 8 ++++---- content/zh/index.md | 8 ++++---- src/style/buttons.less | 14 +++++++++++--- src/style/index.less | 6 ++++-- src/style/variables.less | 6 ++++-- 11 files changed, 51 insertions(+), 39 deletions(-) diff --git a/content/de/index.md b/content/de/index.md index 1045d6547..02a0df57d 100755 --- a/content/de/index.md +++ b/content/de/index.md @@ -12,8 +12,8 @@ toc: false

Schnelle 3kB-Alternative zu React mit der gleichen ES6-API.

- Fang an - Wechsle zu Preact + Fang an + Wechsle zu Preact

5,000+ @@ -231,7 +231,7 @@ render( Wähle die Anleitung aus, die für dich am besten geeignet ist!

- Fang an - Wechsle zu Preact + Fang an + Wechsle zu Preact

diff --git a/content/en/index.md b/content/en/index.md index fa58ac03b..95db8ae8b 100755 --- a/content/en/index.md +++ b/content/en/index.md @@ -12,8 +12,8 @@ description: 'Preact is a fast 3kB alternative to React with the same modern API

Fast 3kB alternative to React with the same modern API.

- Get Started - Switch to Preact + Get Started + Switch to Preact

20,000+ @@ -226,7 +226,7 @@ render( Pick the guide that works best for you!

- Get Started - Switch to Preact + Get Started + Switch to Preact

diff --git a/content/es/index.md b/content/es/index.md index d51863521..86f760e65 100755 --- a/content/es/index.md +++ b/content/es/index.md @@ -12,8 +12,8 @@ toc: false

Una alternativa veloz a React en 3kB con la misma API de ES6.

- Primeros pasos - Cambiar a Preact + Primeros pasos + Cambiar a Preact

5,000+ @@ -236,7 +236,7 @@ render( ¡Elige la guía que mejor te funcione!

- Primeros pasos - Cambiando a Preact + Primeros pasos + Cambiando a Preact

diff --git a/content/fr/index.md b/content/fr/index.md index c36c52714..32c245dfc 100755 --- a/content/fr/index.md +++ b/content/fr/index.md @@ -11,8 +11,8 @@ toc: false

Alternative légère et rapide à React avec le même API en seulement 3Ko.

- Commencer - Passer à preact + Commencer + Passer à preact

5,000+ @@ -230,7 +230,7 @@ render( Choisissez celui qui vous convient.

- Commencer - Passer à Preact + Commencer + Passer à Preact

diff --git a/content/it/index.md b/content/it/index.md index 309140979..b6744a37b 100755 --- a/content/it/index.md +++ b/content/it/index.md @@ -12,8 +12,8 @@ toc: false

Un alternativa veloce e leggera 3Kb a React con le stesse moderne API.

- Primi Passi - Passare a Preact + Primi Passi + Passare a Preact

19,000+ @@ -237,7 +237,7 @@ render( Scegli la guida migliore per te!

- Primi passi - Passa a Preact + Primi passi + Passa a Preact

diff --git a/content/pt-br/index.md b/content/pt-br/index.md index f02847345..f2091b7c1 100755 --- a/content/pt-br/index.md +++ b/content/pt-br/index.md @@ -12,8 +12,8 @@ toc: false

Uma alternativa ao React com apenas 3kB e a mesma API ES6.

- Como começar - Mudando para Preact + Como começar + Mudando para Preact

5,000+ @@ -227,7 +227,7 @@ render( Escolha a melhor opção pra você!

- Como começar - Mudando para Preact + Como começar + Mudando para Preact

diff --git a/content/tr/index.md b/content/tr/index.md index 9a5bf825a..f9dfe6bfb 100755 --- a/content/tr/index.md +++ b/content/tr/index.md @@ -12,8 +12,8 @@ toc: false

Aynı modern API ile React'e hızlı ve 3kB'lık alternatif.

- Başlangıç - Preact'e Geçiş + Başlangıç + Preact'e Geçiş

5,000+ @@ -239,7 +239,7 @@ render( Size uygun olan kılavuzu seçin!

- Başlangıç - Preact'e Geçiş + Başlangıç + Preact'e Geçiş

diff --git a/content/zh/index.md b/content/zh/index.md index 608696970..9e0add005 100755 --- a/content/zh/index.md +++ b/content/zh/index.md @@ -12,8 +12,8 @@ toc: false

React 的 3kb 轻量化方案，拥有同样的 ES6 API

- 如何开始 - 切换到 preact + 如何开始 + 切换到 preact

5,000+ @@ -230,7 +230,7 @@ render( 选取最适合您的指导规范！

- 如何开始 - 切换到 Preact + 如何开始 + 切换到 Preact

diff --git a/src/style/buttons.less b/src/style/buttons.less index 2b3e30fa1..977fdc81b 100644 --- a/src/style/buttons.less +++ b/src/style/buttons.less @@ -3,14 +3,22 @@ min-width: 12em; padding: 0.75rem 2rem; margin: 0 1rem; - background: #eee !important; box-shadow: 0 0.125rem 0 rgba(@color-brand, 0.3); - border: none; + border: 0.2rem solid var(--color-btn-background); border-radius: 0.25rem; - color: var(--color-home-btn) !important; text-transform: uppercase; white-space: nowrap; letter-spacing: 0.075em; + + &.primary { + background: var(--color-btn-background) !important; + color: var(--color-btn) !important; + } + + &.secondary  { + background: transparent !important; + color: white !important; + } } .btn + .btn { diff --git a/src/style/index.less b/src/style/index.less index 3117e2f7f..65e8a0135 100755 --- a/src/style/index.less +++ b/src/style/index.less @@ -12,7 +12,8 @@ html.light { --color-page-bg: white; --color-text: #444; - --color-home-btn: #673ab8; + --color-btn: #673ab8; + --color-btn-background: #eee; --color-heading: black; --color-link: #673ab8; --color-hr: #f8f8f8; @@ -48,7 +49,8 @@ html.dark { --color-text: #b0b0b0; --color-heading: #c5c5c5; --color-link: #ae80ff; - --color-home-btn: #673ab8; + --color-btn: #673ab8; + --color-btn-background: #eee; --color-hr: #444; --color-quote-bg: #29475f; --color-quote-border: #3f6b9c; diff --git a/src/style/variables.less b/src/style/variables.less index ff7671181..988939265 100644 --- a/src/style/variables.less +++ b/src/style/variables.less @@ -22,7 +22,8 @@ --color-text: #444; --color-heading: black; --color-link: #673ab8; - --color-home-btn: #673ab8; + --color-btn: #673ab8; + --color-btn-background: #eee; --color-hr: #f8f8f8; --color-quote-bg: #ebf6ff; --color-quote-border: #5aa8ff; @@ -55,7 +56,8 @@ --color-text: #b0b0b0; --color-heading: #c5c5c5; --color-link: #ae80ff; - --color-home-btn: #673ab8; + --color-btn: #673ab8; + --color-btn-background: #eee; --color-hr: #444; --color-quote-bg: #29475f; --color-quote-border: #3f6b9c; From 135c156abff3a8d6bb66cf8fcdb3ee9e797b5706 Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 00:27:40 +0100 Subject: [PATCH 07/37] Enlarge diagonal home background --- src/components/jumbotron/style.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/jumbotron/style.less b/src/components/jumbotron/style.less index 57c8db4b5..34e6da915 100644 --- a/src/components/jumbotron/style.less +++ b/src/components/jumbotron/style.less @@ -57,11 +57,11 @@ width: 100%; height: 100%; transform-origin: 0 100%; - transform: skewY(-10deg) scale(2.6) translate3d(-50%, -8%, 0); + transform: skewY(-10deg) scale(2.6) translate3d(-50%, 12%, 0); background: @color-brand; @media @sidebar-break { - transform: skewY(-6deg) scale(2.6) translate3d(-50%,-8%,0); + transform: skewY(-6deg) scale(2.6) translate3d(-50%, 12%, 0); } // TODO: Fix specifity From 138c6dbd19b52b334db5179e8db16c8d94496082 Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 00:33:44 +0100 Subject: [PATCH 08/37] Remove GitHub button --- content/de/index.md | 3 --- content/en/index.md | 3 --- content/es/index.md | 3 --- content/fr/index.md | 3 --- content/it/index.md | 3 --- content/pt-br/index.md | 3 --- content/tr/index.md | 3 --- content/zh/index.md | 3 --- src/style/index.less | 2 ++ 9 files changed, 2 insertions(+), 24 deletions(-) diff --git a/content/de/index.md b/content/de/index.md index 02a0df57d..5b003a5d5 100755 --- a/content/de/index.md +++ b/content/de/index.md @@ -15,9 +15,6 @@ toc: false Fang an Wechsle zu Preact

-

- 5,000+ -

```jsx diff --git a/content/en/index.md b/content/en/index.md index 95db8ae8b..b9784c011 100755 --- a/content/en/index.md +++ b/content/en/index.md @@ -15,9 +15,6 @@ description: 'Preact is a fast 3kB alternative to React with the same modern API Get Started Switch to Preact

-

- 20,000+ -

```jsx diff --git a/content/es/index.md b/content/es/index.md index 86f760e65..79443fa59 100755 --- a/content/es/index.md +++ b/content/es/index.md @@ -15,9 +15,6 @@ toc: false Primeros pasos Cambiar a Preact

-

- 5,000+ -

```jsx diff --git a/content/fr/index.md b/content/fr/index.md index 32c245dfc..0e84030ce 100755 --- a/content/fr/index.md +++ b/content/fr/index.md @@ -14,9 +14,6 @@ toc: false Commencer Passer à preact

-

- 5,000+ -

```jsx diff --git a/content/it/index.md b/content/it/index.md index b6744a37b..25ed058d7 100755 --- a/content/it/index.md +++ b/content/it/index.md @@ -15,9 +15,6 @@ toc: false Primi Passi Passare a Preact

-

- 19,000+ -

```jsx diff --git a/content/pt-br/index.md b/content/pt-br/index.md index f2091b7c1..dc88e4a5a 100755 --- a/content/pt-br/index.md +++ b/content/pt-br/index.md @@ -15,9 +15,6 @@ toc: false Como começar Mudando para Preact

-

- 5,000+ -

```jsx diff --git a/content/tr/index.md b/content/tr/index.md index f9dfe6bfb..5e5a526e8 100755 --- a/content/tr/index.md +++ b/content/tr/index.md @@ -15,9 +15,6 @@ toc: false Başlangıç Preact'e Geçiş

-

- 5,000+ -

```js diff --git a/content/zh/index.md b/content/zh/index.md index 9e0add005..c91670d28 100755 --- a/content/zh/index.md +++ b/content/zh/index.md @@ -15,9 +15,6 @@ toc: false 如何开始 切换到 preact

-

- 5,000+ -

```jsx diff --git a/src/style/index.less b/src/style/index.less index 65e8a0135..42182d46e 100755 --- a/src/style/index.less +++ b/src/style/index.less @@ -220,11 +220,13 @@ main .markup { display: flex; flex-direction: column; align-items: center; + margin-bottom: 3rem; @media (min-width: 600px) { flex-direction: row-reverse; justify-content: center; align-items: initial; + margin-bottom: 4rem; } } From be9ac1db98488a47d43b814a05e23ae107609ebd Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 00:36:26 +0100 Subject: [PATCH 09/37] Fix button min-width --- src/style/buttons.less | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/style/buttons.less b/src/style/buttons.less index 977fdc81b..6a263e38e 100644 --- a/src/style/buttons.less +++ b/src/style/buttons.less @@ -1,6 +1,6 @@ .btn { display: inline-block; - min-width: 12em; + min-width: 16em; padding: 0.75rem 2rem; margin: 0 1rem; box-shadow: 0 0.125rem 0 rgba(@color-brand, 0.3); @@ -10,6 +10,10 @@ white-space: nowrap; letter-spacing: 0.075em; + @media (min-width: 600px) { + min-width: auto; + } + &.primary { background: var(--color-btn-background) !important; color: var(--color-btn) !important; From a7b6fcfdbb112d394310dec436805430899ce46b Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 01:06:02 +0100 Subject: [PATCH 10/37] Change jumbotron spacings --- content/de/index.md | 2 +- content/en/index.md | 2 +- content/es/index.md | 2 +- content/fr/index.md | 2 +- content/it/index.md | 2 +- content/pt-br/index.md | 2 +- content/tr/index.md | 2 +- content/zh/index.md | 2 +- src/components/jumbotron/style.less | 17 +---------------- src/components/logo.js | 1 + src/style/buttons.less | 4 ---- src/style/home.less | 28 ++++++++++++++++++++++++++++ src/style/index.less | 3 ++- 13 files changed, 40 insertions(+), 29 deletions(-) create mode 100644 src/style/home.less diff --git a/content/de/index.md b/content/de/index.md index 5b003a5d5..fc4f40d81 100755 --- a/content/de/index.md +++ b/content/de/index.md @@ -10,7 +10,7 @@ toc: false

Preact

-

Schnelle 3kB-Alternative zu React mit der gleichen ES6-API.

+

Schnelle 3kB-Alternative zu React mit der gleichen ES6-API.

Fang an Wechsle zu Preact diff --git a/content/en/index.md b/content/en/index.md index b9784c011..8b9b9ea7a 100755 --- a/content/en/index.md +++ b/content/en/index.md @@ -10,7 +10,7 @@ description: 'Preact is a fast 3kB alternative to React with the same modern API

Preact

-

Fast 3kB alternative to React with the same modern API.

+

Fast 3kB alternative to React with the same modern API.

Get Started Switch to Preact diff --git a/content/es/index.md b/content/es/index.md index 79443fa59..6b0b38755 100755 --- a/content/es/index.md +++ b/content/es/index.md @@ -10,7 +10,7 @@ toc: false

Preact

-

Una alternativa veloz a React en 3kB con la misma API de ES6.

+

Una alternativa veloz a React en 3kB con la misma API de ES6.

Primeros pasos Cambiar a Preact diff --git a/content/fr/index.md b/content/fr/index.md index 0e84030ce..9d8ead9ab 100755 --- a/content/fr/index.md +++ b/content/fr/index.md @@ -9,7 +9,7 @@ toc: false

Preact

-

Alternative légère et rapide à React avec le même API en seulement 3Ko.

+

Alternative légère et rapide à React avec le même API en seulement 3Ko.

Commencer Passer à preact diff --git a/content/it/index.md b/content/it/index.md index 25ed058d7..1a8cfb449 100755 --- a/content/it/index.md +++ b/content/it/index.md @@ -10,7 +10,7 @@ toc: false

Preact

-

Un alternativa veloce e leggera 3Kb a React con le stesse moderne API.

+

Un alternativa veloce e leggera 3Kb a React con le stesse moderne API.

Primi Passi Passare a Preact diff --git a/content/pt-br/index.md b/content/pt-br/index.md index dc88e4a5a..c9156f7c1 100755 --- a/content/pt-br/index.md +++ b/content/pt-br/index.md @@ -10,7 +10,7 @@ toc: false

Preact

-

Uma alternativa ao React com apenas 3kB e a mesma API ES6.

+

Uma alternativa ao React com apenas 3kB e a mesma API ES6.

Como começar Mudando para Preact diff --git a/content/tr/index.md b/content/tr/index.md index 5e5a526e8..ce25a6f84 100755 --- a/content/tr/index.md +++ b/content/tr/index.md @@ -10,7 +10,7 @@ toc: false

Preact

-

Aynı modern API ile React'e hızlı ve 3kB'lık alternatif.

+

Aynı modern API ile React'e hızlı ve 3kB'lık alternatif.

Başlangıç Preact'e Geçiş diff --git a/content/zh/index.md b/content/zh/index.md index c91670d28..60404d676 100755 --- a/content/zh/index.md +++ b/content/zh/index.md @@ -10,7 +10,7 @@ toc: false

Preact

-

React 的 3kb 轻量化方案，拥有同样的 ES6 API

+

React 的 3kb 轻量化方案，拥有同样的 ES6 API

如何开始 切换到 preact diff --git a/src/components/jumbotron/style.less b/src/components/jumbotron/style.less index 34e6da915..5f8c9f48e 100644 --- a/src/components/jumbotron/style.less +++ b/src/components/jumbotron/style.less @@ -9,21 +9,6 @@ // TODO: Fix specifity padding: 0 !important; - p:first-of-type { - display: inline-block; - font-size: 150%; - font-weight: 300; - line-height: 1.2; - color: white; - position: relative; - transform: translate3d(0, 0, 0); - - @media @sidebar-break { - margin: 1.6rem 1rem 1rem; - padding: 1rem; - } - } - h1 { color: #fff; text-transform: uppercase; @@ -61,7 +46,7 @@ background: @color-brand; @media @sidebar-break { - transform: skewY(-6deg) scale(2.6) translate3d(-50%, 12%, 0); + transform: skewY(-6deg) scale(2.6) translate3d(-50%, 22%, 0); } // TODO: Fix specifity diff --git a/src/components/logo.js b/src/components/logo.js index d4dee8b23..2bbcb516f 100644 --- a/src/components/logo.js +++ b/src/components/logo.js @@ -76,6 +76,7 @@ export default class Logo extends Component { return (

foo
; diff --git a/content/en/guide/v10/components.md b/content/en/guide/v10/components.md index 4ff5f020c..a09442701 100755 --- a/content/en/guide/v10/components.md +++ b/content/en/guide/v10/components.md @@ -39,14 +39,13 @@ Class components can have state and lifecycle methods. The latter are special me Here we have a simple class component called `` that displays the current time: -```js +```jsx class Clock extends Component { constructor() { super(); this.state = { time: Date.now() }; } - // Lifecycle: Called whenever our component is created componentDidMount() { @@ -159,7 +158,7 @@ const Bar = <>foo; You can also return arrays from your components: -```js +```jsx function Columns() { return [ Hello, @@ -170,7 +169,7 @@ function Columns() { Don't forget to add keys to `Fragments` if you create them in a loop: -```js +```jsx function Glossary(props) { return (
diff --git a/content/en/guide/v10/extending-component.md b/content/en/guide/v10/extending-component.md index fa77e6078..a6e8f3267 100755 --- a/content/en/guide/v10/extending-component.md +++ b/content/en/guide/v10/extending-component.md @@ -13,7 +13,7 @@ Perhaps you want to do automatic connection to stores/reducers within a Flux-lik In any case, just use ES2015 class inheritance to extend Preact's `Component` class: -```js +```jsx class BoundComponent extends Component { // example: get bound methods binds() { @@ -32,7 +32,7 @@ class BoundComponent extends Component { Example Usage: -```js +```jsx class Link extends BoundComponent { bind = ['click']; click() { @@ -53,7 +53,7 @@ render( The possibilities are endless. Here's an extended `Component` class that supports rudimentary mixins: -```js +```jsx class MixedComponent extends Component { constructor() { super(); diff --git a/content/en/guide/v10/external-dom-mutations.md b/content/en/guide/v10/external-dom-mutations.md index 486dd4825..7bb03708c 100755 --- a/content/en/guide/v10/external-dom-mutations.md +++ b/content/en/guide/v10/external-dom-mutations.md @@ -20,7 +20,7 @@ In Preact (and similarly in React), working with these types of libraries requir This can be as simple as defining a `shouldComponentUpdate()` method on your component, and having it return `false`: -```js +```jsx class Block extends Component { shouldComponentUpdate() { return false; @@ -30,7 +30,7 @@ class Block extends Component { ... or for shorthand: -```js +```jsx class Block extends Component { shouldComponentUpdate = () => false; } @@ -44,7 +44,7 @@ With this lifecycle hook in place and telling Preact not to re-render the Compon Here is an example of "turning off" re-rendering for a Component. Note that `render()` is still invoked as part of creating and mounting the Component, in order to generate its initial DOM structure. -```js +```jsx class Example extends Component { shouldComponentUpdate() { // do not re-render via diff: diff --git a/content/en/guide/v10/forms.md b/content/en/guide/v10/forms.md index c3f24ee6b..c2dbbf174 100755 --- a/content/en/guide/v10/forms.md +++ b/content/en/guide/v10/forms.md @@ -105,7 +105,7 @@ So, instead of listening for a `input` event we should listen for a `click` even ### Checkbox Example -```js +```jsx class MyForm extends Component { toggle = e => { let checked = !this.state.checked; diff --git a/content/en/guide/v10/tutorial.md b/content/en/guide/v10/tutorial.md index 9c72acd9d..8c0205bc8 100755 --- a/content/en/guide/v10/tutorial.md +++ b/content/en/guide/v10/tutorial.md @@ -157,7 +157,7 @@ Boom! We're done! We can now enter a custom name, click "Update" and our new nam We wrote our first component, so let's get a little more practice. This time we build a clock. -```js +```jsx import { h, render, Component } from 'preact'; class Clock extends Component { @@ -174,7 +174,7 @@ Ok, that was easy enough! Problem is, that the time doesn't change. It's frozen So, we want to have a 1-second timer start once the Component gets added to the DOM, and stop if it is removed. We'll create the timer and store a reference to it in `componentDidMount`, and stop the timer in `componentWillUnmount`. On each timer tick, we'll update the component's `state` object with a new time value. Doing this will automatically re-render the component. -```js +```jsx import { h, render, Component } from 'preact'; class Clock extends Component { diff --git a/content/en/guide/v10/unit-testing-with-enzyme.md b/content/en/guide/v10/unit-testing-with-enzyme.md index bda27fe3d..1fc3dc367 100644 --- a/content/en/guide/v10/unit-testing-with-enzyme.md +++ b/content/en/guide/v10/unit-testing-with-enzyme.md @@ -56,7 +56,7 @@ documentation. Suppose we have a simple `Counter` component which displays an initial value, with a button to update it: -```js +```jsx import { h } from 'preact'; import { useState } from 'preact/hooks'; @@ -76,7 +76,7 @@ export default function Counter({ initialCount }) { Using a test runner such as mocha or Jest, you can write a test to check that it works as expected: -```js +```jsx import { expect } from 'chai'; import { h } from 'preact'; import { mount } from 'enzyme'; @@ -117,7 +117,7 @@ the output. Enzyme has three rendering "modes": -```js +```jsx import { mount, shallow, render } from 'enzyme'; // Render the full component tree: @@ -179,7 +179,7 @@ through the `simulate` method: import { act } from 'preact/test-utils'; ``` -```js +```jsx it('should increment after "Increment" button is clicked', () => { const wrapper = mount(); const onClick = wrapper.find('button').props().onClick; diff --git a/content/en/guide/v10/upgrade-guide.md b/content/en/guide/v10/upgrade-guide.md index b2175fa24..fe6461c4e 100644 --- a/content/en/guide/v10/upgrade-guide.md +++ b/content/en/guide/v10/upgrade-guide.md @@ -162,7 +162,7 @@ If you are looking for behavior that exactly matches how React's `render` method In Preact X we can't guarantee `props.children` to always be of type `array` anymore. This change was necessary to resolve parsing ambiguities in regards to `Fragments` and components that return an `array` of children. In most cases you may not even notice it. Only in places where you'll use array methods on `props.children` directly need to be wrapped with `toChildArray`. This function will always return an array. -```js +```jsx // Preact 8.x function Foo(props) { // `.length` is an array method. In Preact X when `props.children` is not an diff --git a/content/pt-br/guide/v10/api-reference.md b/content/pt-br/guide/v10/api-reference.md index 4b0758e0c..f089541fd 100644 --- a/content/pt-br/guide/v10/api-reference.md +++ b/content/pt-br/guide/v10/api-reference.md @@ -44,7 +44,7 @@ Renderizar um componente Preact no `containerNode` do DOM. Não retorna nada. Se o nó DOM opcional `replaceNode` for fornecido e for filho de `containerNode`, o Preact atualizará ou substituirá esse elemento usando seu algoritmo de comparação. -```js +```jsx import { render } from 'preact'; const Foo = () =>
foo
; diff --git a/content/pt-br/guide/v10/components.md b/content/pt-br/guide/v10/components.md index d5dbb9f6a..9a7b0a652 100755 --- a/content/pt-br/guide/v10/components.md +++ b/content/pt-br/guide/v10/components.md @@ -39,7 +39,7 @@ Os componentes de classe podem ter métodos de estado e ciclo de vida. Os últim Aqui temos um componente de classe simples chamado `` que exibe a hora atual: -```js +```jsx class Clock extends Component { state = { time: Date.now() } @@ -150,7 +150,7 @@ const Bar = <>foo; Você também pode retornar arrays de seus componentes: -```js +```jsx function Columns() { return [ Olá, @@ -161,7 +161,7 @@ function Columns() { Não se esqueça de adicionar chaves ao `Fragments` se você as criar em um loop: -```js +```jsx function Glossary(props) { return (
diff --git a/content/pt-br/guide/v10/debugging.md b/content/pt-br/guide/v10/debugging.md index 33867c0b0..d0f85e257 100644 --- a/content/pt-br/guide/v10/debugging.md +++ b/content/pt-br/guide/v10/debugging.md @@ -43,7 +43,7 @@ render(, document.getElementById('root')); A maioria dos bundlers permite remover o código quando eles detectam que um ramo dentro de uma instrução `if` nunca será atingido. Podemos usar isso para incluir apenas `preact/debug` durante o desenvolvimento e salvar esses bytes preciosos em uma applição em produção. -```js +```jsx // Deve ser o primeiro import if (process.env.NODE_ENV==='development') { // Deve ser obrigatório o uso aqui, pois as instruções de importação são permitidas apenas @@ -94,7 +94,7 @@ render(, dom); O mesmo erro será gerado quando for o contrário. Quando você declara uma exportação `nomeada` e está tentando usá-la como uma exportação `padrão`. Uma maneira rápida de verificar isso (caso o seu editor ainda não o faça) é apenas desconectar a importação: -```js +```jsx // app.js export function App() { return
Olá Mundo
; diff --git a/content/pt-br/guide/v10/extending-component.md b/content/pt-br/guide/v10/extending-component.md index 19f87104a..759861de7 100755 --- a/content/pt-br/guide/v10/extending-component.md +++ b/content/pt-br/guide/v10/extending-component.md @@ -33,7 +33,7 @@ class BoundComponent extends Component { Exemplo de uso: -```js +```jsx class Link extends BoundComponent { bind = ['click']; click() { diff --git a/content/pt-br/guide/v10/external-dom-mutations.md b/content/pt-br/guide/v10/external-dom-mutations.md index bab2c97bf..887403b5e 100755 --- a/content/pt-br/guide/v10/external-dom-mutations.md +++ b/content/pt-br/guide/v10/external-dom-mutations.md @@ -46,7 +46,7 @@ Com esse gancho no _lifecycle_ adicionado, dizendo ao Preact para não re-render Aqui está um exemplo para "desligar" a re-renderização de com Componente. Note que `render()` ainda é invocado com parte da criação e montagem do Componente, de modo a gerar sua estrutura geral DOM. -```js +```jsx class Example extends Component { shouldComponentUpdate() { // não renderize via diff: diff --git a/content/pt-br/guide/v10/forms.md b/content/pt-br/guide/v10/forms.md index e72b2640f..570c62bff 100755 --- a/content/pt-br/guide/v10/forms.md +++ b/content/pt-br/guide/v10/forms.md @@ -107,7 +107,7 @@ Portanto, em vez de ouvir um evento `input`, devemos ouvir um evento `click`, qu ### Exemplo da caixa de seleção -```js +```jsx class MyForm extends Component { toggle = e => { let checked = !this.state.checked; diff --git a/content/pt-br/guide/v10/tutorial.md b/content/pt-br/guide/v10/tutorial.md index cffd4de87..b782370c9 100755 --- a/content/pt-br/guide/v10/tutorial.md +++ b/content/pt-br/guide/v10/tutorial.md @@ -157,7 +157,7 @@ Estrondo! Foram realizadas! Agora podemos inserir um nome personalizado, clicar Nós escrevemos nosso primeiro componente, então vamos praticar um pouco mais. Desta vez, construímos um relógio. -```js +```jsx import { h, render, Component } from 'preact'; class Clock extends Component { @@ -174,7 +174,7 @@ Ok, isso foi fácil! O problema é que o tempo não muda. Está congelado no mom Portanto, queremos que o cronômetro de 1 segundo seja iniciado assim que o componente for adicionado ao DOM e pare se for removido. Criaremos o timer e armazenaremos uma referência a ele em `componentDidMount`, e pararemos o timer em `componentWillUnmount`. Em cada marca de timer, atualizaremos o objeto `state 'do componente com um novo valor de tempo. Fazer isso renderiza automaticamente o componente. -```js +```jsx import { h, render, Component } from 'preact'; class Clock extends Component { diff --git a/content/pt-br/guide/v10/unit-testing-with-enzyme.md b/content/pt-br/guide/v10/unit-testing-with-enzyme.md index 486cd899c..3ddc08134 100644 --- a/content/pt-br/guide/v10/unit-testing-with-enzyme.md +++ b/content/pt-br/guide/v10/unit-testing-with-enzyme.md @@ -55,7 +55,7 @@ Seção [Guias](https://airbnb.io/enzyme/docs/guides.html) da documentação do Suponha que tenhamos um simples componente `Counter 'que exibe um valor inicial, com um botão para atualizá-lo: -```js +```jsx import { h } from 'preact'; import { useState } from 'preact/hooks'; @@ -75,7 +75,7 @@ export default function Counter({ initialCount }) { Usando um corredor de teste como mocha ou Jest, você pode escrever um teste para verificar se funciona como esperado: -```js +```jsx import { expect } from 'chai'; import { h } from 'preact'; import { mount } from 'enzyme'; @@ -116,7 +116,7 @@ a saída. A Enzyme possui três "modos" de renderização: -```js +```jsx import { mount, shallow, render } from 'enzyme'; // Renderiza a árvore de componentes completa: @@ -178,7 +178,7 @@ através do método `simulate`: import { act } from 'preact/test-utils'; ``` -```js +```jsx it("deve incrementar após clicar no botão 'Incrementar'", () => { const wrapper = mount(); const onClick = wrapper.find('button').props().onClick; diff --git a/content/pt-br/guide/v10/upgrade-guide.md b/content/pt-br/guide/v10/upgrade-guide.md index 58bbc9d87..a0e5ab7ee 100644 --- a/content/pt-br/guide/v10/upgrade-guide.md +++ b/content/pt-br/guide/v10/upgrade-guide.md @@ -102,7 +102,7 @@ _Nota: Esta alteração não afeta o `preact/compat`. Ele ainda tem uma exporta No Preact 8.x, `render ()` acrescenta um componente Preact quando `render ()` é repetido. No Preact X, `render ()` substitui um componente Preact existente quando `render ()` é repetido. -```js +```jsx render(

foo

, document.body); render(

bar

, document.body); @@ -114,7 +114,7 @@ render(

bar

, document.body); No Preact X, não podemos garantir que `props.children 'sempre seja do tipo` array'. Essa alteração foi necessária para resolver ambiguidades de análise em relação a `Fragmentos` e componentes que retornam um `array` de filhos. Na maioria dos casos, você pode nem perceber. Somente em lugares onde você usará métodos de array em `props.children` diretamente precisa ser envolvido com `toChildArray`. Esta função sempre retornará um array. -```js +```jsx // Preact 8.x function Foo(props) { // `.length` é um método de matriz. No Preact X, quando `props.children` não é um diff --git a/content/tr/index.md b/content/tr/index.md index ce25a6f84..d1b6b0566 100755 --- a/content/tr/index.md +++ b/content/tr/index.md @@ -17,7 +17,7 @@ toc: false

-```js +```jsx function Counter() { const [value, setValue] = useState(0); From 6ae7bfe0f626abadd2d356efc7231c4e19ca121e Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 13:13:39 +0100 Subject: [PATCH 18/37] Add Gold and Platinum sponsors to home page --- content/de/index.md | 5 ++ content/en/index.md | 5 ++ content/es/index.md | 5 ++ content/fr/index.md | 5 ++ content/it/index.md | 5 ++ content/pt-br/index.md | 5 ++ content/tr/index.md | 5 ++ content/zh/index.md | 5 ++ src/components/sponsors/index.js | 79 ++++++++++++++++++++++++++++++ src/components/sponsors/style.less | 47 ++++++++++++++++++ src/components/widgets.js | 2 + src/style/markdown.less | 2 + 12 files changed, 170 insertions(+) create mode 100644 src/components/sponsors/index.js create mode 100644 src/components/sponsors/style.less diff --git a/content/de/index.md b/content/de/index.md index fc4f40d81..ef1e69762 100755 --- a/content/de/index.md +++ b/content/de/index.md @@ -31,6 +31,11 @@ function Counter() { } ``` +
+

Gesponsort von:

+ +
+

Eine Bibliothek der anderen Art.

diff --git a/content/en/index.md b/content/en/index.md index 8b9b9ea7a..64c1eaabf 100755 --- a/content/en/index.md +++ b/content/en/index.md @@ -31,6 +31,11 @@ function Counter() { } ``` +
+

Proudly sponsored by:

+ +
+

A different kind of library.

diff --git a/content/es/index.md b/content/es/index.md index 6b0b38755..b0a124259 100755 --- a/content/es/index.md +++ b/content/es/index.md @@ -31,6 +31,11 @@ function Counter() { } ``` +
+

Patrocinado por:

+ +
+

Una librería distinta.

diff --git a/content/fr/index.md b/content/fr/index.md index 9d8ead9ab..977eb2f7b 100755 --- a/content/fr/index.md +++ b/content/fr/index.md @@ -30,6 +30,11 @@ function Counter() { } ``` +
+

Sponsorisé par:

+ +
+

Un concept différent

diff --git a/content/it/index.md b/content/it/index.md index 1a8cfb449..c2723fd87 100755 --- a/content/it/index.md +++ b/content/it/index.md @@ -31,6 +31,11 @@ function Counter() { } ``` +
+

Sponsorizzata da:

+ +
+

Una Libreria differente!

diff --git a/content/pt-br/index.md b/content/pt-br/index.md index c9156f7c1..1648cfcf5 100755 --- a/content/pt-br/index.md +++ b/content/pt-br/index.md @@ -31,6 +31,11 @@ function Counter() { } ``` +
+

Patrocinado por:

+ +
+

Uma biblioteca diferente.

diff --git a/content/tr/index.md b/content/tr/index.md index d1b6b0566..ab5771157 100755 --- a/content/tr/index.md +++ b/content/tr/index.md @@ -31,6 +31,11 @@ function Counter() { } ``` +
+

Sponsorluğunda:

+ +
+

Başka bir tür kütüphane.

diff --git a/content/zh/index.md b/content/zh/index.md index 60404d676..5ed11989f 100755 --- a/content/zh/index.md +++ b/content/zh/index.md @@ -31,6 +31,11 @@ function Counter() { } ``` +
+

Proudly sponsored by:

+ +
+

与众不同的库

diff --git a/src/components/sponsors/index.js b/src/components/sponsors/index.js new file mode 100644 index 000000000..98f068072 --- /dev/null +++ b/src/components/sponsors/index.js @@ -0,0 +1,79 @@ +import styles from './style.less'; + +/** + * Sponsors on the main page is a unique selling point of our + * gold and platinum tier on opencollective. See: + * https://opencollective.com/preact for an overview of + * available tiers and their advantages. + */ +export default function Sponsors() { + return ( +
+ +
+ ); +} + +function AMPLogo() { + return ( + + + + + + + ); +} + +function WebflowLogo() { + return ( + + + + ); +} diff --git a/src/components/sponsors/style.less b/src/components/sponsors/style.less new file mode 100644 index 000000000..4514acc92 --- /dev/null +++ b/src/components/sponsors/style.less @@ -0,0 +1,47 @@ +:global(.sponsors) { + text-align: center; + margin-bottom: -2rem; + + p { + margin-bottom: 0; + } +} + +.sponsorList { + display: flex; + justify-content: center; + align-items: center; + padding: 0 !important; + margin: 1rem 0 0 0; +} + +.sponsorItem { + list-style: none; + opacity: 0.5; + transition: all 0.3s; + filter: grayscale(1); + + @media (prefers-color-scheme: dark) { + filter: brightness(0) invert(1); + } + :global(.dark) & { + filter: brightness(0) invert(1); + } + :global(.light) & { + filter: grayscale(1); + } + + &:hover { + opacity: 1; + } + + a { + text-decoration: none; + display: block; + color: transparent !important; + } + + & + .sponsorItem { + margin-left: 3rem; + } +} diff --git a/src/components/widgets.js b/src/components/widgets.js index 54b012c80..9e2219c30 100644 --- a/src/components/widgets.js +++ b/src/components/widgets.js @@ -4,6 +4,7 @@ import GithubStars from './github-stars'; import TodoList from './todo-list'; import Logo from './logo'; import Toc from './table-of-contents'; +import Sponsors from './sponsors'; export default { Toc, @@ -11,5 +12,6 @@ export default { Jumbotron, GithubStars, TodoList, + Sponsors, Logo }; diff --git a/src/style/markdown.less b/src/style/markdown.less index 4f25159b6..aba29f3a2 100644 --- a/src/style/markdown.less +++ b/src/style/markdown.less @@ -40,6 +40,7 @@ padding: 0; font-weight: bold; cursor: text; + position: relative; &:hover a.anchor { text-decoration: none; @@ -49,6 +50,7 @@ &:before { content: ''; display: block; + position: absolute; height: @header-height; margin: -@header-height 0 0; } From 246230cc72823fd3f38a56e3f5df6e8afafdefaf Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 13:53:45 +0100 Subject: [PATCH 19/37] Fix IE11 glitch --- src/components/sponsors/style.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/sponsors/style.less b/src/components/sponsors/style.less index 4514acc92..845a63773 100644 --- a/src/components/sponsors/style.less +++ b/src/components/sponsors/style.less @@ -39,6 +39,8 @@ text-decoration: none; display: block; color: transparent !important; + // Fix IE 11 border + background: none !important; } & + .sponsorItem { From 72ce72cebeedaafe50a175dc241177a054dd48ee Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 14:03:55 +0100 Subject: [PATCH 20/37] Fix unreadable secondary button in light mode --- src/style/buttons.less | 8 +++++++- src/style/index.less | 2 ++ src/style/variables.less | 2 ++ 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/style/buttons.less b/src/style/buttons.less index ee65226c6..8255e38d3 100644 --- a/src/style/buttons.less +++ b/src/style/buttons.less @@ -21,7 +21,13 @@ &.secondary  { background: transparent !important; - color: white !important; + color: var(--color-btn-secondary) !important; + } + + .intro-buttons & { + &.secondary { + color: white !important; + } } } diff --git a/src/style/index.less b/src/style/index.less index ccbe0eeb2..318614dbb 100755 --- a/src/style/index.less +++ b/src/style/index.less @@ -14,6 +14,7 @@ html.light { --color-page-bg: white; --color-text: #444; --color-btn: #673ab8; + --color-btn-secondary: #673ab8; --color-btn-background: #eee; --color-heading: black; --color-link: #673ab8; @@ -51,6 +52,7 @@ html.dark { --color-heading: #c5c5c5; --color-link: #ae80ff; --color-btn: #673ab8; + --color-btn-secondary: white; --color-btn-background: #eee; --color-hr: #444; --color-quote-bg: #29475f; diff --git a/src/style/variables.less b/src/style/variables.less index 988939265..bc0fa2b3d 100644 --- a/src/style/variables.less +++ b/src/style/variables.less @@ -23,6 +23,7 @@ --color-heading: black; --color-link: #673ab8; --color-btn: #673ab8; + --color-btn-secondary: #673ab8; --color-btn-background: #eee; --color-hr: #f8f8f8; --color-quote-bg: #ebf6ff; @@ -57,6 +58,7 @@ --color-heading: #c5c5c5; --color-link: #ae80ff; --color-btn: #673ab8; + --color-btn-secondary: white; --color-btn-background: #eee; --color-hr: #444; --color-quote-bg: #29475f; From 03652653e0f8260b3342d747b6dea6fa2562390d Mon Sep 17 00:00:00 2001 From: "size-plugin[bot]" <52573255+size-plugin[bot]@users.noreply.github.com> Date: Sat, 29 Feb 2020 13:23:30 +0000 Subject: [PATCH 21/37] =?UTF-8?q?=F0=9F=87=A9=F0=9F=87=BF=20=F0=9F=9A=B4?= =?UTF-8?q?=F0=9F=8F=BF=E2=80=8D=E2=99=80=EF=B8=8F=20update=20size-plugin-?= =?UTF-8?q?ssr.json=20=F0=9F=91=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- size-plugin-ssr.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/size-plugin-ssr.json b/size-plugin-ssr.json index 77945f842..a6b93dc51 100644 --- a/size-plugin-ssr.json +++ b/size-plugin-ssr.json @@ -1,6 +1,6 @@ [ { - "timestamp": 1582966782900, + "timestamp": 1582982531450, "files": [ { "filename": "editor.chunk.*****.js", @@ -22,9 +22,9 @@ }, { "filename": "ssr-bundle.js", - "previous": 28286, + "previous": 28292, "size": 28292, - "diff": 6 + "diff": 0 }, { "filename": "markdown.c9960.worker.js", @@ -51,16 +51,16 @@ "diff": 0 }, { - "filename": "ssr-bundle.8178b.css", - "previous": 11783, + "filename": "ssr-bundle.2f095.css", + "previous": 11820, "size": 0, - "diff": -11783 + "diff": -11820 }, { - "filename": "ssr-bundle.2f095.css", + "filename": "ssr-bundle.bb7c2.css", "previous": 0, - "size": 11820, - "diff": 11820 + "size": 11875, + "diff": 11875 } ] } From 0626e9a35efefe7f539dd9a990f3a67dcda6c0da Mon Sep 17 00:00:00 2001 From: "size-plugin[bot]" <52573255+size-plugin[bot]@users.noreply.github.com> Date: Sat, 29 Feb 2020 13:23:31 +0000 Subject: [PATCH 22/37] =?UTF-8?q?=F0=9F=8E=9A=EF=B8=8F=20=F0=9F=A4=B8?= =?UTF-8?q?=F0=9F=8F=BD=20update=20size-plugin-browser.json=20=F0=9F=91=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- size-plugin-browser.json | 94 ++++++++++++++++++++-------------------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/size-plugin-browser.json b/size-plugin-browser.json index 0a0866297..1d7568314 100644 --- a/size-plugin-browser.json +++ b/size-plugin-browser.json @@ -1,6 +1,6 @@ [ { - "timestamp": 1582966863119, + "timestamp": 1582982605473, "files": [ { "filename": "sw-esm.js", @@ -56,18 +56,6 @@ "size": 2136, "diff": 0 }, - { - "filename": "5.chunk.65231.css", - "previous": 1467, - "size": 0, - "diff": -1467 - }, - { - "filename": "5.chunk.2e498.esm.js", - "previous": 3382, - "size": 0, - "diff": -3382 - }, { "filename": "markdown.f1c81.worker.js", "previous": 10256, @@ -99,73 +87,85 @@ "diff": 0 }, { - "filename": "5.chunk.7d278.js", - "previous": 3456, + "filename": "runner.chunk.cc4fb.esm.js", + "previous": 5860, + "size": 5860, + "diff": 0 + }, + { + "filename": "runner.chunk.32860.js", + "previous": 5912, + "size": 5912, + "diff": 0 + }, + { + "filename": "bundle.7bc91.css", + "previous": 9358, "size": 0, - "diff": -3456 + "diff": -9358 }, { - "filename": "bundle.447b7.css", - "previous": 9336, + "filename": "bundle.4c91a.esm.js", + "previous": 23848, "size": 0, - "diff": -9336 + "diff": -23848 }, { - "filename": "bundle.00e28.esm.js", - "previous": 23845, + "filename": "5.chunk.34067.css", + "previous": 1470, "size": 0, - "diff": -23845 + "diff": -1470 }, { - "filename": "runner.chunk.cc4fb.esm.js", - "previous": 5860, - "size": 5860, - "diff": 0 + "filename": "5.chunk.15a95.esm.js", + "previous": 3382, + "size": 0, + "diff": -3382 }, { - "filename": "bundle.80e34.js", - "previous": 24260, + "filename": "bundle.dc911.js", + "previous": 24263, "size": 0, - "diff": -24260 + "diff": -24263 }, { - "filename": "runner.chunk.32860.js", - "previous": 5912, - "size": 5912, - "diff": 0 + "filename": "5.chunk.8551a.js", + "previous": 3455, + "size": 0, + "diff": -3455 }, { - "filename": "bundle.7bc91.css", + "filename": "bundle.4b143.css", "previous": 0, - "size": 9358, - "diff": 9358 + "size": 9383, + "diff": 9383 }, { - "filename": "bundle.4c91a.esm.js", + "filename": "bundle.32272.esm.js", "previous": 0, - "size": 23848, - "diff": 23848 + "size": 23849, + "diff": 23849 }, { - "filename": "5.chunk.34067.css", + "filename": "5.chunk.429c6.css", "previous": 0, - "size": 1470, - "diff": 1470 + "size": 1483, + "diff": 1483 }, { - "filename": "5.chunk.15a95.esm.js", + "filename": "5.chunk.63f0a.esm.js", "previous": 0, - "size": 3382, - "diff": 3382 + "size": 3381, + "diff": 3381 }, { - "filename": "bundle.dc911.js", + "filename": "bundle.6cb92.js", "previous": 0, "size": 24263, "diff": 24263 }, { - "filename": "5.chunk.8551a.js", + "filename": "5.chunk.13309.js", "previous": 0, "size": 3455, "diff": 3455 From b8134fc20b463a6891109dc870cf33f7191f2c08 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Sat, 29 Feb 2020 13:11:31 -0500 Subject: [PATCH 23/37] Suggestion: shadow behind homepage code sample --- src/components/jumbotron/style.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/jumbotron/style.less b/src/components/jumbotron/style.less index 5f8c9f48e..3a5c96ccf 100644 --- a/src/components/jumbotron/style.less +++ b/src/components/jumbotron/style.less @@ -27,6 +27,7 @@ + :global(pre.highlight) { margin-left: 1rem; margin-right: 1rem; + box-shadow: 0 5px 25px rgba(0,0,0,0.5); @media @sidebar-break { margin-left: auto; From aca23dfc1aa0c965667c7b1769fb1daaec473f3e Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 21:34:29 +0100 Subject: [PATCH 24/37] Use svg files instead of inline svg --- src/components/sponsors/amp.svg | 16 ++++++ src/components/sponsors/index.js | 81 +++++------------------------ src/components/sponsors/webflow.svg | 26 +++++++++ 3 files changed, 56 insertions(+), 67 deletions(-) create mode 100644 src/components/sponsors/amp.svg create mode 100644 src/components/sponsors/webflow.svg diff --git a/src/components/sponsors/amp.svg b/src/components/sponsors/amp.svg new file mode 100644 index 000000000..db6d8a768 --- /dev/null +++ b/src/components/sponsors/amp.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/src/components/sponsors/index.js b/src/components/sponsors/index.js index 98f068072..d7e1afca2 100644 --- a/src/components/sponsors/index.js +++ b/src/components/sponsors/index.js @@ -1,4 +1,6 @@ import styles from './style.less'; +import AMPSvg from './amp.svg'; +import WebflowSvg from './webflow.svg'; /** * Sponsors on the main page is a unique selling point of our @@ -8,72 +10,17 @@ import styles from './style.less'; */ export default function Sponsors() { return ( -
- -
- ); -} - -function AMPLogo() { - return ( - - - - - - - ); -} - -function WebflowLogo() { - return ( - - - + ); } diff --git a/src/components/sponsors/webflow.svg b/src/components/sponsors/webflow.svg new file mode 100644 index 000000000..4762402e2 --- /dev/null +++ b/src/components/sponsors/webflow.svg @@ -0,0 +1,26 @@ + + + From 2623581f9c1de66e877dc4f9d611afa1ec8264cb Mon Sep 17 00:00:00 2001 From: "size-plugin[bot]" <52573255+size-plugin[bot]@users.noreply.github.com> Date: Sat, 29 Feb 2020 20:48:27 +0000 Subject: [PATCH 25/37] =?UTF-8?q?=F0=9F=A4=B2=20=F0=9F=A5=BF=20update=20si?= =?UTF-8?q?ze-plugin-ssr.json=20=F0=9F=91=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- size-plugin-ssr.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/size-plugin-ssr.json b/size-plugin-ssr.json index a6b93dc51..e48b6c224 100644 --- a/size-plugin-ssr.json +++ b/size-plugin-ssr.json @@ -1,6 +1,6 @@ [ { - "timestamp": 1582982531450, + "timestamp": 1583009206563, "files": [ { "filename": "editor.chunk.*****.js", @@ -23,8 +23,8 @@ { "filename": "ssr-bundle.js", "previous": 28292, - "size": 28292, - "diff": 0 + "size": 28603, + "diff": 311 }, { "filename": "markdown.c9960.worker.js", @@ -51,16 +51,16 @@ "diff": 0 }, { - "filename": "ssr-bundle.2f095.css", - "previous": 11820, + "filename": "ssr-bundle.bb7c2.css", + "previous": 11875, "size": 0, - "diff": -11820 + "diff": -11875 }, { - "filename": "ssr-bundle.bb7c2.css", + "filename": "ssr-bundle.db1a2.css", "previous": 0, - "size": 11875, - "diff": 11875 + "size": 12113, + "diff": 12113 } ] } From 4f8bcc85fe29b9919af7b05204826563f4a60b81 Mon Sep 17 00:00:00 2001 From: "size-plugin[bot]" <52573255+size-plugin[bot]@users.noreply.github.com> Date: Sat, 29 Feb 2020 20:48:28 +0000 Subject: [PATCH 26/37] =?UTF-8?q?=F0=9F=92=AA=F0=9F=8F=BF=20=F0=9F=92=86?= =?UTF-8?q?=F0=9F=8F=BF=E2=80=8D=E2=99=82=EF=B8=8F=20update=20size-plugin-?= =?UTF-8?q?browser.json=20=F0=9F=91=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- size-plugin-browser.json | 74 +++++++++++++++------------------------- 1 file changed, 28 insertions(+), 46 deletions(-) diff --git a/size-plugin-browser.json b/size-plugin-browser.json index 1d7568314..11685aed0 100644 --- a/size-plugin-browser.json +++ b/size-plugin-browser.json @@ -1,6 +1,6 @@ [ { - "timestamp": 1582982605473, + "timestamp": 1583009286936, "files": [ { "filename": "sw-esm.js", @@ -99,76 +99,58 @@ "diff": 0 }, { - "filename": "bundle.7bc91.css", - "previous": 9358, + "filename": "bundle.4b143.css", + "previous": 9383, "size": 0, - "diff": -9358 + "diff": -9383 }, { - "filename": "bundle.4c91a.esm.js", - "previous": 23848, + "filename": "bundle.32272.esm.js", + "previous": 23849, "size": 0, - "diff": -23848 + "diff": -23849 }, { - "filename": "5.chunk.34067.css", - "previous": 1470, - "size": 0, - "diff": -1470 + "filename": "5.chunk.429c6.css", + "previous": 1483, + "size": 1483, + "diff": 0 }, { - "filename": "5.chunk.15a95.esm.js", - "previous": 3382, - "size": 0, - "diff": -3382 + "filename": "5.chunk.63f0a.esm.js", + "previous": 3381, + "size": 3381, + "diff": 0 }, { - "filename": "bundle.dc911.js", + "filename": "bundle.6cb92.js", "previous": 24263, "size": 0, "diff": -24263 }, { - "filename": "5.chunk.8551a.js", + "filename": "5.chunk.13309.js", "previous": 3455, - "size": 0, - "diff": -3455 - }, - { - "filename": "bundle.4b143.css", - "previous": 0, - "size": 9383, - "diff": 9383 - }, - { - "filename": "bundle.32272.esm.js", - "previous": 0, - "size": 23849, - "diff": 23849 - }, - { - "filename": "5.chunk.429c6.css", - "previous": 0, - "size": 1483, - "diff": 1483 + "size": 3455, + "diff": 0 }, { - "filename": "5.chunk.63f0a.esm.js", + "filename": "bundle.605e4.css", "previous": 0, - "size": 3381, - "diff": 3381 + "size": 9560, + "diff": 9560 }, { - "filename": "bundle.6cb92.js", + "filename": "bundle.89cbb.esm.js", "previous": 0, - "size": 24263, - "diff": 24263 + "size": 24191, + "diff": 24191 }, { - "filename": "5.chunk.13309.js", + "filename": "bundle.cf3a7.js", "previous": 0, - "size": 3455, - "diff": 3455 + "size": 24615, + "diff": 24615 } ] } From 8ab06c6d899ed4f64f765790773dc672ff87e92b Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 19:12:54 +0100 Subject: [PATCH 27/37] Add sidebar categories --- .../controllers/page/sidebar-nav.js | 7 + .../controllers/page/sidebar-nav.less | 8 + src/components/controllers/page/sidebar.js | 40 ++- src/config.json | 283 ++++++++++-------- 4 files changed, 208 insertions(+), 130 deletions(-) diff --git a/src/components/controllers/page/sidebar-nav.js b/src/components/controllers/page/sidebar-nav.js index deff66c77..c8b5263e4 100644 --- a/src/components/controllers/page/sidebar-nav.js +++ b/src/components/controllers/page/sidebar-nav.js @@ -28,6 +28,13 @@ export default function SidebarNav({ items, onClick }) { class={cx(style.toc, !(items && items.length > 1) && style.disabled)} > {items.map(({ text, level, href }) => { + if (!href) { + return ( + + {text} + + ); + } let activeCss = href === url ? style.linkActive : undefined; return ( item.path.indexOf(`/v${docVersion}`) > -1) - .map(item => ({ - text: getRouteName(item, lang), - level: 2, - href: item.path - })); - + .filter(item => { + // We know that nested routes are part of the same + // doc version, so we just need to check the first + // route. + if (item.routes) { + item = item.routes[0]; + } + + return item.path.indexOf(`/v${docVersion}`) > -1; + }) + .reduce((acc, item) => { + if (item.routes) { + acc.push({ + text: getRouteName(item, lang), + level: 2, + href: null + }); + return acc.concat( + item.routes.map(nested => ({ + text: getRouteName(nested, lang), + level: 3, + href: nested.path + })) + ); + } + acc.push({ + text: getRouteName(item, lang), + level: 2, + href: item.path + }); + return acc; + }, []); + // TODO: use URL match instead of .content const guide = config.nav.filter(item => item.content === 'guide')[0]; const sectionName = getRouteName(guide, lang); diff --git a/src/config.json b/src/config.json index 55eaa321d..7cae39793 100644 --- a/src/config.json +++ b/src/config.json @@ -218,142 +218,179 @@ }, { - "path": "/guide/v10/getting-started", "name": { - "en": "Getting Started", - "pt-br": "Começando", - "de": "Los geht's" - } - }, - { - "path": "/guide/v10/whats-new", - "name": { - "en": "What's new?", - "pt-br": "o que há de novo" - } - }, - { - "path": "/guide/v10/upgrade-guide", - "name": { - "en": "Upgrading from 8.x", - "pt-br": "Fazendo upgrade do 8.x", - "de": "Migration von 8.x" - } - }, - { - "path": "/guide/v10/tutorial", - "name": "Tutorial" - }, - { - "path": "/guide/v10/differences-to-react", - "name": { - "en": "Differences to React", - "pt-br": "Diferenças do React", - "de": "Unterschiede zu React" - } - }, - { - "path": "/guide/v10/switching-to-preact", - "name": { - "en": "Switching to Preact", - "pt-br": "Mudando para Preact", - "de": "Wechsel zu Preact" - } - }, - { - "path": "/guide/v10/components", - "name": { - "en": "Components", - "pt-br": "Componentes", - "de": "Komponenten" - } - }, - { - "path": "/guide/v10/hooks", - "name": "Hooks" - }, - { - "path": "/guide/v10/api-reference", - "name": { - "en": "API Reference", - "pt-br": "Referência da API", - "de": "API Referenz" - } - }, - { - "path": "/guide/v10/forms", - "name": { - "en": "Forms", - "pt-br": "Formulários", - "de": "Formulare" - } - }, - { - "path": "/guide/v10/refs", - "name": { - "en": "References", - "pt-br": "Referências", - "de": "Referenzen" - } - }, - { - "path": "/guide/v10/context", - "name": { - "en": "Context", - "pt-br": "Contexto", - "de": "Kontext" - } - }, - { - "path": "/guide/v10/external-dom-mutations", - "name": { - "en": "External DOM Mutations", - "pt-br": "Mutações do DOM externas", - "de": "Externe DOM Mutationen" - } + "en": "Introduction", + "de": "Einführung" + }, + "routes": [ + { + "path": "/guide/v10/getting-started", + "name": { + "en": "Getting Started", + "pt-br": "Começando", + "de": "Los geht's" + } + }, + { + "path": "/guide/v10/whats-new", + "name": { + "en": "What's new?", + "pt-br": "o que há de novo" + } + }, + { + "path": "/guide/v10/upgrade-guide", + "name": { + "en": "Upgrading from 8.x", + "pt-br": "Fazendo upgrade do 8.x", + "de": "Migration von 8.x" + } + } + ] }, { - "path": "/guide/v10/debugging", "name": { - "en": "Debugging Tools", - "pt-br": "Ferramentas de depuração", - "de": "Entwickler-Tools" - } - }, - { - "path": "/guide/v10/server-side-rendering", - "name": "Server-Side Rendering" + "en": "Essentials" + }, + "routes": [ + { + "path": "/guide/v10/tutorial", + "name": "Tutorial" + }, + { + "path": "/guide/v10/components", + "name": { + "en": "Components", + "pt-br": "Componentes", + "de": "Komponenten" + } + }, + { + "path": "/guide/v10/extending-component", + "name": { + "en": "Extending Component", + "pt-br": "Extendendo Componentes", + "de": "Komponente Erweitern" + } + }, + { + "path": "/guide/v10/hooks", + "name": "Hooks" + }, + { + "path": "/guide/v10/forms", + "name": { + "en": "Forms", + "pt-br": "Formulários", + "de": "Formulare" + } + }, + { + "path": "/guide/v10/refs", + "name": { + "en": "References", + "pt-br": "Referências", + "de": "Referenzen" + } + }, + { + "path": "/guide/v10/context", + "name": { + "en": "Context", + "pt-br": "Contexto", + "de": "Kontext" + } + }, + { + "path": "/guide/v10/debugging", + "name": { + "en": "Debugging Tools", + "pt-br": "Ferramentas de depuração", + "de": "Entwickler-Tools" + } + } + ] }, { - "path": "/guide/v10/extending-component", "name": { - "en": "Extending Component", - "pt-br": "Extendendo Componentes", - "de": "Komponente Erweitern" - } + "en": "React compatibility" + }, + "routes": [ + { + "path": "/guide/v10/differences-to-react", + "name": { + "en": "Differences to React", + "pt-br": "Diferenças do React", + "de": "Unterschiede zu React" + } + }, + { + "path": "/guide/v10/switching-to-preact", + "name": { + "en": "Switching to Preact", + "pt-br": "Mudando para Preact", + "de": "Wechsel zu Preact" + } + } + ] }, { - "path": "/guide/v10/unit-testing-with-enzyme", "name": { - "en": "Unit Testing with Enzyme", - "pt-br": "Teste unitario com Enzyme", - "de": "Unit-Tests mit Enzyme" - } - }, - { - "path": "/guide/v10/web-components", - "name": "Web Components" - }, - { - "path": "/guide/v10/progressive-web-apps", - "name": "Progressive Web Apps" + "en": "Testing" + }, + "routes": [ + { + "path": "/guide/v10/unit-testing-with-enzyme", + "name": { + "en": "Unit Testing with Enzyme", + "pt-br": "Teste unitario com Enzyme", + "de": "Unit-Tests mit Enzyme" + } + } + ] }, { - "path": "/guide/v10/options", "name": { - "en": "Options", - "de": "Optionen" - } + "en": "Advanced", + "de": "Fortgeschritten" + }, + "routes": [ + { + "path": "/guide/v10/api-reference", + "name": { + "en": "API Reference", + "pt-br": "Referência da API", + "de": "API Referenz" + } + }, + { + "path": "/guide/v10/web-components", + "name": "Web Components" + }, + { + "path": "/guide/v10/progressive-web-apps", + "name": "Progressive Web Apps" + }, + { + "path": "/guide/v10/server-side-rendering", + "name": "Server-Side Rendering" + }, + { + "path": "/guide/v10/external-dom-mutations", + "name": { + "en": "External DOM Mutations", + "pt-br": "Mutações do DOM externas", + "de": "Externe DOM Mutationen" + } + }, + { + "path": "/guide/v10/options", + "name": { + "en": "Options", + "de": "Optionen" + } + } + ] } ] } From 82dd9c24112e261aec3c95a2769422ddfa937689 Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 20:16:45 +0100 Subject: [PATCH 28/37] Add accordion navigation --- .../controllers/page/sidebar-nav.js | 108 ++++++++++++++++-- .../controllers/page/sidebar-nav.less | 25 +++- src/components/controllers/page/sidebar.js | 19 ++- 3 files changed, 132 insertions(+), 20 deletions(-) diff --git a/src/components/controllers/page/sidebar-nav.js b/src/components/controllers/page/sidebar-nav.js index c8b5263e4..4a1c6afc7 100644 --- a/src/components/controllers/page/sidebar-nav.js +++ b/src/components/controllers/page/sidebar-nav.js @@ -1,7 +1,8 @@ -import { h } from 'preact'; +import { h, Fragment } from 'preact'; import cx from '../../../lib/cx'; import style from './sidebar-nav.less'; import { getCurrentUrl } from 'preact-router'; +import { useState, useCallback } from 'preact/hooks'; /** * @typedef {object} SidebarNavProps @@ -14,6 +15,8 @@ import { getCurrentUrl } from 'preact-router'; * @param {SidebarNavProps} props */ export default function SidebarNav({ items, onClick }) { + const [activeGroup, setActiveGroup] = useState(''); + // Remove trailing slash to fix activeCss check below. // Note that netlify will always append a slash to the url so that we end // up with something like "foo/bar/?lang=de". That's why we first remove @@ -27,25 +30,112 @@ export default function SidebarNav({ items, onClick }) { tabIndex="0" class={cx(style.toc, !(items && items.length > 1) && style.disabled)} > - {items.map(({ text, level, href }) => { + {items.map(({ text, level, href, routes }) => { if (!href) { + const headerId = `accordion_header_${text}`; + const id = `accordion_body_${text}`; + const isActive = + activeGroup === headerId || + routes.some(r => r.href === url) || + true; + return ( - - {text} - + + + {text} + + + ); } - let activeCss = href === url ? style.linkActive : undefined; return ( - {text} - + ); })} ); } + +function AccordionHeader(props) { + const { id, level, onClick, children, isActive, controls } = props; + const onClickFn = useCallback(() => { + onClick(!isActive ? id : ''); + }, [onClick, id, isActive]); + + return ( + + ); +} + +function SidebarNavLink(props) { + const { href, onClick, level, isActive, children } = props; + let activeCss = isActive ? style.linkActive : undefined; + return ( + + {children} + + ); +} diff --git a/src/components/controllers/page/sidebar-nav.less b/src/components/controllers/page/sidebar-nav.less index 841ff2b5e..b1fd61da7 100644 --- a/src/components/controllers/page/sidebar-nav.less +++ b/src/components/controllers/page/sidebar-nav.less @@ -47,9 +47,32 @@ .category { color: var(--color-sidebar-link-active); text-transform: uppercase; - letter-spacing: 0.075em; + letter-spacing: 0.125em; display: block; margin-top: 1rem; + background: none; + border: none; + padding: 0.5rem 0; + width: 100%; + text-align: left; + cursor: pointer; + font-size: 0.9rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.accordionIcon { + transform: rotate(0); + transition: all 0.3s; + + &.active { + transform: rotate(-180deg); + } +} + +.accordionBody { + margin-top: 0.25rem; } .level-3 { diff --git a/src/components/controllers/page/sidebar.js b/src/components/controllers/page/sidebar.js index 75d1ccd77..0a56be77c 100644 --- a/src/components/controllers/page/sidebar.js +++ b/src/components/controllers/page/sidebar.js @@ -32,21 +32,20 @@ export default function Sidebar() { acc.push({ text: getRouteName(item, lang), level: 2, - href: null - }); - return acc.concat( - item.routes.map(nested => ({ + href: null, + routes: item.routes.map(nested => ({ text: getRouteName(nested, lang), level: 3, href: nested.path })) - ); + }); + } else { + acc.push({ + text: getRouteName(item, lang), + level: 2, + href: item.path + }); } - acc.push({ - text: getRouteName(item, lang), - level: 2, - href: item.path - }); return acc; }, []); From 6af7629955dd5db6821d44d24d0dc1798717de32 Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sat, 29 Feb 2020 22:13:15 +0100 Subject: [PATCH 29/37] Open all sidebar categories by default --- .../controllers/page/sidebar-nav.js | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/controllers/page/sidebar-nav.js b/src/components/controllers/page/sidebar-nav.js index 4a1c6afc7..93471d69c 100644 --- a/src/components/controllers/page/sidebar-nav.js +++ b/src/components/controllers/page/sidebar-nav.js @@ -15,7 +15,7 @@ import { useState, useCallback } from 'preact/hooks'; * @param {SidebarNavProps} props */ export default function SidebarNav({ items, onClick }) { - const [activeGroup, setActiveGroup] = useState(''); + const [activeGroups, setActiveGroup] = useState({}); // Remove trailing slash to fix activeCss check below. // Note that netlify will always append a slash to the url so that we end @@ -35,21 +35,23 @@ export default function SidebarNav({ items, onClick }) { const headerId = `accordion_header_${text}`; const id = `accordion_body_${text}`; const isActive = - activeGroup === headerId || - routes.some(r => r.href === url) || - true; + activeGroups[headerId] === undefined || !!activeGroups[headerId]; + routes.some(r => r.href === url); return ( - + setActiveGroup({ ...activeGroups, [name]: value }) + } > {text} - +
{ - onClick(!isActive ? id : ''); + onClick(id, !isActive); }, [onClick, id, isActive]); return ( From 025ffe7d96eb30d6f1625ff6171bbe8153776dee Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sun, 1 Mar 2020 06:51:26 +0100 Subject: [PATCH 30/37] Restructure categories --- src/config.json | 56 ++++++++++++++++++++++++------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/config.json b/src/config.json index 7cae39793..6deda1be0 100644 --- a/src/config.json +++ b/src/config.json @@ -245,6 +245,10 @@ "pt-br": "Fazendo upgrade do 8.x", "de": "Migration von 8.x" } + }, + { + "path": "/guide/v10/tutorial", + "name": "Tutorial" } ] }, @@ -253,10 +257,6 @@ "en": "Essentials" }, "routes": [ - { - "path": "/guide/v10/tutorial", - "name": "Tutorial" - }, { "path": "/guide/v10/components", "name": { @@ -265,14 +265,6 @@ "de": "Komponenten" } }, - { - "path": "/guide/v10/extending-component", - "name": { - "en": "Extending Component", - "pt-br": "Extendendo Componentes", - "de": "Komponente Erweitern" - } - }, { "path": "/guide/v10/hooks", "name": "Hooks" @@ -300,7 +292,14 @@ "pt-br": "Contexto", "de": "Kontext" } - }, + } + ] + }, + { + "name": { + "en": "Debug & Test" + }, + "routes": [ { "path": "/guide/v10/debugging", "name": { @@ -308,6 +307,14 @@ "pt-br": "Ferramentas de depuração", "de": "Entwickler-Tools" } + }, + { + "path": "/guide/v10/unit-testing-with-enzyme", + "name": { + "en": "Unit Testing with Enzyme", + "pt-br": "Teste unitario com Enzyme", + "de": "Unit-Tests mit Enzyme" + } } ] }, @@ -334,21 +341,6 @@ } ] }, - { - "name": { - "en": "Testing" - }, - "routes": [ - { - "path": "/guide/v10/unit-testing-with-enzyme", - "name": { - "en": "Unit Testing with Enzyme", - "pt-br": "Teste unitario com Enzyme", - "de": "Unit-Tests mit Enzyme" - } - } - ] - }, { "name": { "en": "Advanced", @@ -383,6 +375,14 @@ "de": "Externe DOM Mutationen" } }, + { + "path": "/guide/v10/extending-component", + "name": { + "en": "Extending Component", + "pt-br": "Extendendo Componentes", + "de": "Komponente Erweitern" + } + }, { "path": "/guide/v10/options", "name": { From 1f05c0cd2adc97eaea49ed6108146cc143721647 Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Sun, 1 Mar 2020 06:52:29 +0100 Subject: [PATCH 31/37] Delete "Extending Component" page --- content/en/guide/v10/extending-component.md | 67 ------------------ .../pt-br/guide/v10/extending-component.md | 68 ------------------- src/config.json | 8 --- 3 files changed, 143 deletions(-) delete mode 100755 content/en/guide/v10/extending-component.md delete mode 100755 content/pt-br/guide/v10/extending-component.md diff --git a/content/en/guide/v10/extending-component.md b/content/en/guide/v10/extending-component.md deleted file mode 100755 index a6e8f3267..000000000 --- a/content/en/guide/v10/extending-component.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -name: Extending Component -permalink: '/guide/extending-component' ---- - -# Extending Component - -It is possible that some projects would wish to extend Component with additional functionality. - -There are varying opinions on the value of inheritance in JavaScript, but if you wish to build your own "base class" from which all of your components inherit, Preact has you covered. - -Perhaps you want to do automatic connection to stores/reducers within a Flux-like architecture. Maybe you want to add property-based mixins to make it feel more like `React.createClass()` _(note: the [`@bind` decorator](https://github.com/developit/decko#bind) is preferable)_. - -In any case, just use ES2015 class inheritance to extend Preact's `Component` class: - -```jsx -class BoundComponent extends Component { - // example: get bound methods - binds() { - let list = this.bind || [], - binds = this._binds; - if (!binds) { - binds = this._binds = {}; - for (let i=list.length; i--; ) { - binds[list[i]] = this[list[i]].bind(this); - } - } - return binds; - } -} -``` - -Example Usage: - -```jsx -class Link extends BoundComponent { - bind = ['click']; - click() { - open(this.props.href); - } - render({ children }) { - let { click } = this.binds(); - return { children }; - } -} - -render( - Click Me, - document.body -); -``` - - -The possibilities are endless. Here's an extended `Component` class that supports rudimentary mixins: - -```jsx -class MixedComponent extends Component { - constructor() { - super(); - (this.mixins || []).forEach( m => Object.assign(this, m) ); - } -} -``` - ---- - -> **Footnote:** It's worth noting that inheritance can lock you into brittle parent-child relationships. Often when faced with a programming task that can be solved adequately with inheritance, there is a more functional way to achieve the same goal that would avoid creating such a relationship. diff --git a/content/pt-br/guide/v10/extending-component.md b/content/pt-br/guide/v10/extending-component.md deleted file mode 100755 index 759861de7..000000000 --- a/content/pt-br/guide/v10/extending-component.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -name: Extendendo Componentes -permalink: '/guide/extending-component' ---- - -# Extendendo Componentes - -É possível que alguns projetos queiram extender `Component` com funcionalidade adicional. - -Opniões sobre o valor da herança em JavaScript são variadas, mas se você deseja criar sua própria "class base" da qual todos os seus componentes herdem, Preact tem o que você precisa. - -Talvez você queira fazer conexão automática a `stores`/`reducers` dentro de uma arquitetura Flux. Talvez você queira adicionar _mixins_ baseados em propriedades para o fazer mais parecido com o `React.createClass()` _(nota: o [decorador `@bind`](https://github.com/developit/decko#bind) é preferível)_. - -Em qualquer caso, apenas use a herança de classes do ES2015 para extender a class `Component` do Preact: - - -```js -class BoundComponent extends Component { - // Exemplo: obter métodos vinculados - binds() { - let list = this.bind || [], - binds = this._binds; - if (!binds) { - binds = this._binds = {}; - for (let i=list.length; i--; ) { - binds[list[i]] = this[list[i]].bind(this); - } - } - return binds; - } -} -``` - -Exemplo de uso: - -```jsx -class Link extends BoundComponent { - bind = ['click']; - click() { - open(this.props.href); - } - render({ children }) { - let { click } = this.binds(); - return { children }; - } -} - -render( - Click Me, - document.body -); -``` - -As possibilidades são sem fim. Aqui, uma class `Componente` que suporta _mixins_ rudimentares: - - -```js -class MixedComponent extends Component { - constructor() { - super(); - (this.mixins || []).forEach( m => Object.assign(this, m) ); - } -} -``` - ---- - -> **Nota:** Vale a pena atentar-se de que a herança pode te prender em relacões _parent-child_ frágeis. Frequentemente quando encontra-se uma tarefa que pode ser resolvida com herança há uma maneira mais funcional de alcançar o mesmo objetivo que evitaria a criação de tal relacionamento. diff --git a/src/config.json b/src/config.json index 6deda1be0..63ea159ac 100644 --- a/src/config.json +++ b/src/config.json @@ -375,14 +375,6 @@ "de": "Externe DOM Mutationen" } }, - { - "path": "/guide/v10/extending-component", - "name": { - "en": "Extending Component", - "pt-br": "Extendendo Componentes", - "de": "Komponente Erweitern" - } - }, { "path": "/guide/v10/options", "name": { From e30c35580465e15fb694d3b77ae53aac3f66da9d Mon Sep 17 00:00:00 2001 From: "size-plugin[bot]" <52573255+size-plugin[bot]@users.noreply.github.com> Date: Sun, 1 Mar 2020 06:07:37 +0000 Subject: [PATCH 32/37] =?UTF-8?q?=F0=9F=9B=A3=EF=B8=8F=20=F0=9F=91=99=20up?= =?UTF-8?q?date=20size-plugin-ssr.json=20=F0=9F=91=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- size-plugin-ssr.json | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/size-plugin-ssr.json b/size-plugin-ssr.json index e48b6c224..2c0bb125c 100644 --- a/size-plugin-ssr.json +++ b/size-plugin-ssr.json @@ -1,6 +1,6 @@ [ { - "timestamp": 1583009206563, + "timestamp": 1583042762439, "files": [ { "filename": "editor.chunk.*****.js", @@ -22,9 +22,9 @@ }, { "filename": "ssr-bundle.js", - "previous": 28292, - "size": 28603, - "diff": 311 + "previous": 28603, + "size": 29330, + "diff": 727 }, { "filename": "markdown.c9960.worker.js", @@ -51,16 +51,16 @@ "diff": 0 }, { - "filename": "ssr-bundle.bb7c2.css", - "previous": 11875, + "filename": "ssr-bundle.db1a2.css", + "previous": 12113, "size": 0, - "diff": -11875 + "diff": -12113 }, { - "filename": "ssr-bundle.db1a2.css", + "filename": "ssr-bundle.2a517.css", "previous": 0, - "size": 12113, - "diff": 12113 + "size": 12287, + "diff": 12287 } ] } From 6efc1be0b3ef9a2f340d05b91c8fc4c24b9af940 Mon Sep 17 00:00:00 2001 From: "size-plugin[bot]" <52573255+size-plugin[bot]@users.noreply.github.com> Date: Sun, 1 Mar 2020 06:07:39 +0000 Subject: [PATCH 33/37] =?UTF-8?q?=F0=9F=8D=87=20=F0=9F=A6=BC=20update=20si?= =?UTF-8?q?ze-plugin-browser.json=20=F0=9F=91=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- size-plugin-browser.json | 54 ++++++++++++++++++++-------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/size-plugin-browser.json b/size-plugin-browser.json index 11685aed0..ea722654c 100644 --- a/size-plugin-browser.json +++ b/size-plugin-browser.json @@ -1,6 +1,6 @@ [ { - "timestamp": 1583009286936, + "timestamp": 1583042842113, "files": [ { "filename": "sw-esm.js", @@ -98,18 +98,6 @@ "size": 5912, "diff": 0 }, - { - "filename": "bundle.4b143.css", - "previous": 9383, - "size": 0, - "diff": -9383 - }, - { - "filename": "bundle.32272.esm.js", - "previous": 23849, - "size": 0, - "diff": -23849 - }, { "filename": "5.chunk.429c6.css", "previous": 1483, @@ -122,12 +110,6 @@ "size": 3381, "diff": 0 }, - { - "filename": "bundle.6cb92.js", - "previous": 24263, - "size": 0, - "diff": -24263 - }, { "filename": "5.chunk.13309.js", "previous": 3455, @@ -136,21 +118,39 @@ }, { "filename": "bundle.605e4.css", - "previous": 0, - "size": 9560, - "diff": 9560 + "previous": 9560, + "size": 0, + "diff": -9560 }, { "filename": "bundle.89cbb.esm.js", - "previous": 0, - "size": 24191, - "diff": 24191 + "previous": 24191, + "size": 0, + "diff": -24191 }, { "filename": "bundle.cf3a7.js", + "previous": 24615, + "size": 0, + "diff": -24615 + }, + { + "filename": "bundle.7bfa4.css", + "previous": 0, + "size": 9684, + "diff": 9684 + }, + { + "filename": "bundle.6b182.esm.js", + "previous": 0, + "size": 24811, + "diff": 24811 + }, + { + "filename": "bundle.c4f1c.js", "previous": 0, - "size": 24615, - "diff": 24615 + "size": 25242, + "diff": 25242 } ] } From d36782e58e45fcad350e9a8b7f2d2e3e82c0167a Mon Sep 17 00:00:00 2001 From: 38elements <38elements@users.noreply.github.com> Date: Sun, 1 Mar 2020 22:26:44 +0900 Subject: [PATCH 34/37] Fix options.event description --- content/en/guide/v10/options.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/en/guide/v10/options.md b/content/en/guide/v10/options.md index 00a56b5df..3fe4050b5 100644 --- a/content/en/guide/v10/options.md +++ b/content/en/guide/v10/options.md @@ -68,9 +68,9 @@ Invoked immediately after a vnode is rendered, once its DOM representation is co #### `options.event` -**Signature:** `(event: Event) => void` +**Signature:** `(event: Event) => any` -Invoked just before a DOM event is handled by its associated Virtual DOM listener. +Invoked just before a DOM event is handled by its associated Virtual DOM listener. When `options.event` is setted, the event which is event listener argument is replaced return value of `options.event`. #### `options.requestAnimationFrame` From de3d9a8bfa013c7367ef5026cd975fbf6e0cfac5 Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Mon, 2 Mar 2020 09:54:26 +0100 Subject: [PATCH 35/37] Remove all references to react devtools --- content/de/index.md | 1 - content/en/index.md | 1 - content/fr/index.md | 1 - content/it/index.md | 1 - content/pt-br/guide/v10/debugging.md | 21 +++++++++++---------- content/pt-br/index.md | 1 - content/tr/index.md | 1 - 7 files changed, 11 insertions(+), 16 deletions(-) diff --git a/content/de/index.md b/content/de/index.md index ef1e69762..243e1a06c 100755 --- a/content/de/index.md +++ b/content/de/index.md @@ -112,7 +112,6 @@ function Counter() {
  • `props`, `state` und `context` werden zu `render()` weitergegeben
  • Standard HTML-Attribute (z.B. `class` und `for`) können verwendet werden
    • -
  • Funktioniert ohne jegliche Modifikation mit React DevTools
diff --git a/content/en/index.md b/content/en/index.md index 64c1eaabf..beec407b9 100755 --- a/content/en/index.md +++ b/content/en/index.md @@ -110,7 +110,6 @@ function Counter() {
  • props, state and context are passed to render()
  • Use standard HTML attributes like class and for
    • -
  • Works with React DevTools right out of the box
diff --git a/content/fr/index.md b/content/fr/index.md index 977eb2f7b..fb6c1bb9f 100755 --- a/content/fr/index.md +++ b/content/fr/index.md @@ -112,7 +112,6 @@ function Counter() {
  • Les `props`, `state` et `context` sont passés en arguments de la méthode `render()`
  • Les attributs standards HTML comme `class` et `for` peuvent être utilisés
    • -
  • Fonctionnne avec React DevTools sans effort
diff --git a/content/it/index.md b/content/it/index.md index c2723fd87..5e0fcb896 100755 --- a/content/it/index.md +++ b/content/it/index.md @@ -117,7 +117,6 @@ function Counter() {
  • `props`, `state` e `context` sono passati a `render()`
  • Usa attributi standard dell' HTML come `class` e `for`
    • -
  • Funziona con React DevTools senza alcuna configurazione
diff --git a/content/pt-br/guide/v10/debugging.md b/content/pt-br/guide/v10/debugging.md index d0f85e257..07cf58322 100644 --- a/content/pt-br/guide/v10/debugging.md +++ b/content/pt-br/guide/v10/debugging.md @@ -7,7 +7,7 @@ description: 'Como debugar aplicativos preact quando algo der errado.' O Preact é fornecido com muitas ferramentas para facilitar a depuração. Eles são empacotados em uma única importação e podem ser incluídos importando `preact / debug`. -Isso inclui uma ponte para a excelente [React Developer Tools] Extenção para o Chrome e Firefox. Se você já os tiver instalado, pode **experimentá-lo neste site.** Basta abrir os devtools e começar a inspecionar como o construímos. +Isso inclui uma ponte para a excelente [Preact Developer Tools] Extenção para o Chrome e Firefox. Se você já os tiver instalado, pode **experimentá-lo neste site.** Basta abrir os devtools e começar a inspecionar como o construímos. imprimiremos um aviso ou erro sempre que detectarmos algo errado, como aninhamento incorreto nos elementos ``. @@ -19,10 +19,11 @@ imprimiremos um aviso ou erro sempre que detectarmos algo errado, como aninhamen ## Intalação -O [React Developer Tools] pode ser instalado no loja de extensões do seu navegador. +O [Preact Developer Tools] pode ser instalado no loja de extensões do seu navegador. -- [Para o Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) -- [Para o Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) +- [Para o Chrome](https://chrome.google.com/webstore/detail/preact-developer-tools/ilcajpmogmhpliinlbcdebhbcanbghmd) +- [Para o Firefox](https://addons.mozilla.org/en-US/firefox/addon/preact-devtools/) +- [Para o Edge](https://microsoftedge.microsoft.com/addons/detail/hdkhobcafnfejjieimdkmjaiihkjpmhk) Uma vez instalado, precisamos importar o `preact / debug` em algum lugar para inicializar a conexão com a extensão. Verifique se essa importação é **a primeira** importação em todo o aplicativo. @@ -175,11 +176,11 @@ function Foo() { Com o Preact X, fizemos algumas mudanças no formato interno do 'vnode'. -| Preact 8.x | Preact 10.x | -|---|---| -| `vnode.nodeName` | `vnode.type` | -| `vnode.attributes` | `vnode.props` | -| `vnode.children` | `vnode.props.children`| +| Preact 8.x | Preact 10.x | +| ------------------ | ---------------------- | +| `vnode.nodeName` | `vnode.type` | +| `vnode.attributes` | `vnode.props` | +| `vnode.children` | `vnode.props.children` | ### Encontrou filhos com a mesmas chaves @@ -208,4 +209,4 @@ const pessoas = [ ``` -[React Developer Tools]: https://github.com/facebook/react/tree/master/packages/react-devtools +[React Developer Tools]: https://preactjs.github.io/preact-devtools/ diff --git a/content/pt-br/index.md b/content/pt-br/index.md index 1648cfcf5..6a972e34f 100755 --- a/content/pt-br/index.md +++ b/content/pt-br/index.md @@ -108,7 +108,6 @@ function Counter() {
  • `props`, `state` e `context` são passados pro `render()` como parâmetro
  • Uso de atributos HTML padrão como `class` e `for`
    • -
  • Funciona com o React DevTools sem nenhuma configuração adicional
diff --git a/content/tr/index.md b/content/tr/index.md index ab5771157..33542e341 100755 --- a/content/tr/index.md +++ b/content/tr/index.md @@ -119,7 +119,6 @@ function Counter() {
  • `props`, `state` ve `context` zaten `render()`'a paslanmış durumda.
  • `class` ve `for` gibi standart HTML attribute'larını kullanabilirsiniz.
    • -
  • Kutudan çıktığı gibi React DevTools ile çalışır.
From 560d59a0304d827aed3b7d3b5dd4b2be28c38656 Mon Sep 17 00:00:00 2001 From: 38elements <38elements@users.noreply.github.com> Date: Mon, 2 Mar 2020 19:37:46 +0900 Subject: [PATCH 36/37] Fix link --- content/pt-br/guide/v10/debugging.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/pt-br/guide/v10/debugging.md b/content/pt-br/guide/v10/debugging.md index 07cf58322..e10cb5226 100644 --- a/content/pt-br/guide/v10/debugging.md +++ b/content/pt-br/guide/v10/debugging.md @@ -7,7 +7,7 @@ description: 'Como debugar aplicativos preact quando algo der errado.' O Preact é fornecido com muitas ferramentas para facilitar a depuração. Eles são empacotados em uma única importação e podem ser incluídos importando `preact / debug`. -Isso inclui uma ponte para a excelente [Preact Developer Tools] Extenção para o Chrome e Firefox. Se você já os tiver instalado, pode **experimentá-lo neste site.** Basta abrir os devtools e começar a inspecionar como o construímos. +Isso inclui uma ponte para a excelente [Preact Devtools] Extenção para o Chrome e Firefox. Se você já os tiver instalado, pode **experimentá-lo neste site.** Basta abrir os devtools e começar a inspecionar como o construímos. imprimiremos um aviso ou erro sempre que detectarmos algo errado, como aninhamento incorreto nos elementos `
`. @@ -19,7 +19,7 @@ imprimiremos um aviso ou erro sempre que detectarmos algo errado, como aninhamen ## Intalação -O [Preact Developer Tools] pode ser instalado no loja de extensões do seu navegador. +O [Preact Devtools] pode ser instalado no loja de extensões do seu navegador. - [Para o Chrome](https://chrome.google.com/webstore/detail/preact-developer-tools/ilcajpmogmhpliinlbcdebhbcanbghmd) - [Para o Firefox](https://addons.mozilla.org/en-US/firefox/addon/preact-devtools/) @@ -209,4 +209,4 @@ const pessoas = [ ``` -[React Developer Tools]: https://preactjs.github.io/preact-devtools/ +[Preact Devtools]: https://preactjs.github.io/preact-devtools/ From cae4bb3382fd11ca02f5498d85a8f42d6ecfc6c9 Mon Sep 17 00:00:00 2001 From: Vinci Rufus Date: Mon, 2 Mar 2020 18:34:50 +0000 Subject: [PATCH 37/37] reminder to call the script as a module (#556) * reminder to call the script as a module * Some suggestions to clarify without-build-tools usage * Update getting-started.md * Update getting-started.md * Update getting-started.md Co-authored-by: Jason Miller --- content/en/guide/v10/getting-started.md | 80 ++++++++++++++----------- 1 file changed, 44 insertions(+), 36 deletions(-) diff --git a/content/en/guide/v10/getting-started.md b/content/en/guide/v10/getting-started.md index a84d6951b..7285aabe2 100644 --- a/content/en/guide/v10/getting-started.md +++ b/content/en/guide/v10/getting-started.md @@ -5,9 +5,9 @@ description: "How to get started with Preact. We'll learn how to setup the tooli # Getting Started -This guide helps you get up and running to start developing Preact apps. There are 3 popular ways to do so. +This guide helps you get up and running to start developing Preact apps. -If you're just starting out we highly recommend going with [preact-cli](#best-practices-powered-with-preact-cli). +There are 3 popular options. If you're new to Preact, we recommend starting with [Preact CLI](#best-practices-powered-by-preact-cli). --- @@ -17,78 +17,86 @@ If you're just starting out we highly recommend going with [preact-cli](#best-pr ## No build tools route -Preact has always been readily packaged to be used right in the browser. This doesn't require any build tools at all. +Preact is packaged to be used directly in the browser, and doesn't require any build or tools: -```js -import { h, Component, render } from 'https://unpkg.com/preact?module'; - -// Create your app -const app = h('div', null, 'Hello World!'); +```html + ``` -The only difference is that you cannot use JSX, because JSX needs to be transpiled. We got you covered with an alternative in the next section. So keep reading. +[🔨 Edit on Glitch](https://glitch.com/~preact-no-build-tools) + +The primary drawback of developing this way is the lack of JSX, which requires a build step. An ergonomic and performant alternative to JSX is documented in the next section. ### Alternatives to JSX -Writing raw `h` or `createElement` calls all the time is much less fun than using something JSX-like. JSX has the advantage of looking similar to HTML, which makes it easier to understand for many developers in our experience. It requires a built-step though, so we highly recommend an alternative called [htm]. +Writing raw `h` or `createElement` calls can be tedious. JSX has the advantage of looking similar to HTML, which makes it easier to understand for many developers in our experience. JSX requires a built-step though, so we highly recommend an alternative called [HTM][htm]. -In a nutshell [htm] can be best described as: JSX-like syntax in plain JavaScript without a need for a transpiler. Instead of using a custom syntax it relies on native tagged template strings which were added to JavaScript a while back. +[HTM][htm] is a JSX-like syntax that works in standard JavaScript. Instead of requiring a build step, it uses JavaScript's own [Tagged Templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates) syntax, which was added in 2015 and is supported in [all modern browsers](https://caniuse.com/#feat=template-literals). This is an increasingly popular way to write Preact apps, since there are fewer moving parts to understand than a traditional front-end build tooling setup. -```js -import { h, Component, render } from 'https://unpkg.com/preact?module'; -import htm from 'https://unpkg.com/htm?module'; +```html + ``` -It's a very popular way of writing Preact apps and we highly recommend checking out htm's [README][htm] file if you're interested in going with this route. +[🔨 Edit on Glitch](https://glitch.com/~preact-with-htm) + +For more information on HTM, check out its [documentation][htm]. -## Best practices powered with `preact-cli` +## Best practices powered by Preact CLI -The `preact-cli` project is a ready made solution to bundle Preact applications with the optimal bundler configuration that's best for modern web application. It's built on standard tooling projects like `webpack`, `babel` and `postcss`. Because of the simplicity this is the most popular way to use Preact among our users. +[Preact CLI] is an off-the-shelf solution for building Preact applications that is optimized for modern web development. It's built on standard tooling projects like Webpack, Babel and PostCSS. Preact CLI does not require any configuration or prior knowledge to get started, and this simplicity makes it the most popular way to use Preact. -As the name implies, `preact-cli` is a **c**ommand-**li**ne tool that can be run in the terminal on your machine. Install it globally by running: +As the name implies, Preact CLI is a **c**ommand-**li**ne tool that can be run in the terminal on your machine. Install it globally by running: ```bash npm install -g preact-cli ``` -After that you'll have a new command in your terminal called `preact`. With it you can create a new application by executing the following command: +After that you'll have a new command in your terminal called `preact`. With it you can create a new application by running the `preact create` command: ```bash preact create default my-project ``` -The above command pulls the template from `preactjs-templates/default`, prompts for some information, and generates the project at `./my-project/`. +This will create a new application based on our [default template](https://github.com/preactjs-templates/default). You will be asked for some information about your project, which will then be generated in the directory you specified (`my-project` in this case). -> Tip: Any Github repo with a `'template'` folder can be used as a custom template: `preact create / ` +> **Tip:** Any GitHub repository with a `template/` folder can be used as a custom template: +> +> `preact create / ` ### Getting ready for development -Now we're ready to start our application. To fire up the development server run the following command inside the freshly generated project folder (`my-project` in this example): +Now we're ready to start our application. To start a development server, run the following command inside your newly generated project folder (`my-project` from above): ```bash # Go into the generated project folder -cd my-project/ +cd my-project -# Start the devserver +# Start a development server npm start ``` -Once the server is up you can access your app at the URL that was printed in the console. Now you're ready to develop your app! +Once the server has started, it will print a local development URL to open in your browser. +Now you're ready to start coding your app! ### Making a production build -There comes a time when you need to deploy your app somewhere. The CLI ships with a handy `build` command which will generate a highly optimized build. +There comes a time when you need to deploy your app somewhere. The CLI ships with a handy `build` command which will generate a highly optimized production build. ```bash npm run build @@ -96,7 +104,7 @@ npm run build Upon completion you'll have a new `build/` folder which can be deployed directly to a server. -> For a full list of all available commands check out the list in preact-cli's [README file](https://github.com/preactjs/preact-cli#cli-options). +> For a full list of all available commands check out the [Preact CLI Documentation](https://github.com/preactjs/preact-cli#cli-options). ## Integrating Into An Existing Pipeline @@ -117,7 +125,7 @@ To transpile JSX you need a babel plugin that converts it to valid JavaScript co } ``` -> [babeljs](https://babeljs.io/) has one of the best documentation out there. We highly recommend checking it out for questions surrounding babel and how to set it up. +> [babeljs](https://babeljs.io/) has some of the best documentation out there. We highly recommend checking it out for questions surrounding babel and how to set it up. ### Aliasing React to Preact @@ -175,4 +183,4 @@ jest configuration: ``` [htm]: https://github.com/developit/htm - +[Preact CLI]: https://github.com/preactjs/preact-cli