From 94032517e870880a4d61c3fc9d3bababd6753d72 Mon Sep 17 00:00:00 2001 From: Charan167 Date: Sat, 21 Sep 2024 19:39:42 +0530 Subject: [PATCH 1/4] Add editPageLink in demo lessons --- .../tutorial/1-forms-css/1-introduction/1-welcome/content.md | 1 + .../tutorial/1-forms-css/2-colors/1-accent-color/content.md | 1 + .../tutorial/1-forms-css/2-colors/2-progressbar/content.md | 1 + .../tutorial/1-forms-css/2-colors/3-more-progressbar/content.md | 1 + .../tutorial/1-forms-css/2-colors/4-handle-firefox/content.md | 1 + .../1-forms-css/3-fieldset/1-fieldset-element/content.md | 1 + .../tutorial/1-forms-css/3-fieldset/2-a-legend/content.md | 1 + .../1-forms-css/3-fieldset/3-fieldset-styling/content.md | 1 + .../tutorial/1-forms-css/3-fieldset/5-focus-within/content.md | 1 + .../content/tutorial/1-forms-css/3-fieldset/6-the-end/content.md | 1 + 10 files changed, 10 insertions(+) diff --git a/docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/content.md b/docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/content.md index 0f38433d..88a966f3 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/content.md @@ -3,6 +3,7 @@ type: lesson title: Style up your forms! slug: welcome focus: /welcome.css +editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/content.md?plain=1 --- :::info{noBorder=true title="Welcome!"} diff --git a/docs/demo/src/content/tutorial/1-forms-css/2-colors/1-accent-color/content.md b/docs/demo/src/content/tutorial/1-forms-css/2-colors/1-accent-color/content.md index 72d64953..a6b68c5e 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/2-colors/1-accent-color/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/2-colors/1-accent-color/content.md @@ -3,6 +3,7 @@ type: lesson title: Accent Color focus: /style.css slug: accent-color +editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/2-colors/1-accent-color/content.md?plain=1 --- ## Customize the input colors diff --git a/docs/demo/src/content/tutorial/1-forms-css/2-colors/2-progressbar/content.md b/docs/demo/src/content/tutorial/1-forms-css/2-colors/2-progressbar/content.md index 9b40e3db..3be779f9 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/2-colors/2-progressbar/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/2-colors/2-progressbar/content.md @@ -4,6 +4,7 @@ title: Progress bar slug: progress-bar focus: /style.css template: default +editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/2-colors/2-progressbar/content.md?plain=1 --- ## Styling the `` diff --git a/docs/demo/src/content/tutorial/1-forms-css/2-colors/3-more-progressbar/content.md b/docs/demo/src/content/tutorial/1-forms-css/2-colors/3-more-progressbar/content.md index 880bedd3..571a8135 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/2-colors/3-more-progressbar/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/2-colors/3-more-progressbar/content.md @@ -4,6 +4,7 @@ title: More Progress bar slug: more-progress-bar focus: /style.css template: default +editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/2-colors/3-more-progressbar/content.md?plain=1 --- ## Styling the `` diff --git a/docs/demo/src/content/tutorial/1-forms-css/2-colors/4-handle-firefox/content.md b/docs/demo/src/content/tutorial/1-forms-css/2-colors/4-handle-firefox/content.md index 7abd7487..e47b68b5 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/2-colors/4-handle-firefox/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/2-colors/4-handle-firefox/content.md @@ -4,6 +4,7 @@ title: Handle Firefox slug: handle-firefox focus: /style.css template: default +editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/2-colors/4-handle-firefox/content.md?plain=1 --- ## What about Firefox? diff --git a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md index f5a06d23..16bb1fcb 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md @@ -3,6 +3,7 @@ type: lesson title: Fieldset element slug: fieldset-element focus: /index.html +editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md?plain=1 --- The `
` HTML element groups related form controls, such as buttons, inputs, textareas, and labels, within a web form. diff --git a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/2-a-legend/content.md b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/2-a-legend/content.md index 96b3dc74..4f9265ab 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/2-a-legend/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/2-a-legend/content.md @@ -3,6 +3,7 @@ type: lesson title: A legend slug: a-legend focus: /index.html +editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/2-a-legend/content.md?plain=1 --- Even with the default styling `
` already visually separates one group of form controls from another. diff --git a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/3-fieldset-styling/content.md b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/3-fieldset-styling/content.md index 64af991f..94cf0be5 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/3-fieldset-styling/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/3-fieldset-styling/content.md @@ -3,6 +3,7 @@ type: lesson title: Styling fieldsets slug: fieldset-styling focus: /style.css +editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/3-fieldset-styling/content.md?plain=1 --- Our HTML looks great, but the default styles leave a lot of room for improvements. Thankfully, the way `
` and `` look like can be customized with a standard CSS. diff --git a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/5-focus-within/content.md b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/5-focus-within/content.md index 3356bb46..47361805 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/5-focus-within/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/5-focus-within/content.md @@ -3,6 +3,7 @@ type: lesson title: Focus within slug: focus-within focus: /style.css +editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/5-focus-within/content.md?plain=1 --- A great way to give our visitors a pointer to where they are in the form is the `:focus` state. The most common way to apply it is by highlighting the currently focused form controls like buttons and inputs. But now that the fieldset provides us with a higher level of organization for the form, we can also highlight it to give even better visual guidance! diff --git a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/6-the-end/content.md b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/6-the-end/content.md index bec59744..11092bd7 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/6-the-end/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/6-the-end/content.md @@ -3,6 +3,7 @@ type: lesson title: The end slug: the-end focus: /style.css +editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/6-the-end/content.md?plain=1 --- You've reached the end of this tutorial! We hope you've enjoyed it and learned something new about working with CSS and forms. From 72843074435dbf05b8dfa0dbd4deb3c82972e512 Mon Sep 17 00:00:00 2001 From: Charan167 Date: Mon, 23 Sep 2024 20:21:30 +0530 Subject: [PATCH 2/4] Address review comments --- .../tutorial/1-forms-css/1-introduction/1-welcome/content.md | 1 - .../tutorial/1-forms-css/2-colors/1-accent-color/content.md | 1 - .../tutorial/1-forms-css/2-colors/2-progressbar/content.md | 1 - .../1-forms-css/2-colors/3-more-progressbar/content.md | 1 - .../tutorial/1-forms-css/2-colors/4-handle-firefox/content.md | 1 - .../1-forms-css/3-fieldset/1-fieldset-element/content.md | 3 +-- .../tutorial/1-forms-css/3-fieldset/2-a-legend/content.md | 1 - .../1-forms-css/3-fieldset/3-fieldset-styling/content.md | 1 - .../tutorial/1-forms-css/3-fieldset/5-focus-within/content.md | 1 - .../tutorial/1-forms-css/3-fieldset/6-the-end/content.md | 1 - docs/demo/src/content/tutorial/meta.md | 4 +++- 11 files changed, 4 insertions(+), 12 deletions(-) diff --git a/docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/content.md b/docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/content.md index 88a966f3..0f38433d 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/content.md @@ -3,7 +3,6 @@ type: lesson title: Style up your forms! slug: welcome focus: /welcome.css -editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/content.md?plain=1 --- :::info{noBorder=true title="Welcome!"} diff --git a/docs/demo/src/content/tutorial/1-forms-css/2-colors/1-accent-color/content.md b/docs/demo/src/content/tutorial/1-forms-css/2-colors/1-accent-color/content.md index a6b68c5e..72d64953 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/2-colors/1-accent-color/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/2-colors/1-accent-color/content.md @@ -3,7 +3,6 @@ type: lesson title: Accent Color focus: /style.css slug: accent-color -editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/2-colors/1-accent-color/content.md?plain=1 --- ## Customize the input colors diff --git a/docs/demo/src/content/tutorial/1-forms-css/2-colors/2-progressbar/content.md b/docs/demo/src/content/tutorial/1-forms-css/2-colors/2-progressbar/content.md index 3be779f9..9b40e3db 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/2-colors/2-progressbar/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/2-colors/2-progressbar/content.md @@ -4,7 +4,6 @@ title: Progress bar slug: progress-bar focus: /style.css template: default -editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/2-colors/2-progressbar/content.md?plain=1 --- ## Styling the `` diff --git a/docs/demo/src/content/tutorial/1-forms-css/2-colors/3-more-progressbar/content.md b/docs/demo/src/content/tutorial/1-forms-css/2-colors/3-more-progressbar/content.md index 571a8135..880bedd3 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/2-colors/3-more-progressbar/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/2-colors/3-more-progressbar/content.md @@ -4,7 +4,6 @@ title: More Progress bar slug: more-progress-bar focus: /style.css template: default -editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/2-colors/3-more-progressbar/content.md?plain=1 --- ## Styling the `` diff --git a/docs/demo/src/content/tutorial/1-forms-css/2-colors/4-handle-firefox/content.md b/docs/demo/src/content/tutorial/1-forms-css/2-colors/4-handle-firefox/content.md index e47b68b5..7abd7487 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/2-colors/4-handle-firefox/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/2-colors/4-handle-firefox/content.md @@ -4,7 +4,6 @@ title: Handle Firefox slug: handle-firefox focus: /style.css template: default -editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/2-colors/4-handle-firefox/content.md?plain=1 --- ## What about Firefox? diff --git a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md index 16bb1fcb..d8a454d1 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md @@ -2,8 +2,7 @@ type: lesson title: Fieldset element slug: fieldset-element -focus: /index.html -editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md?plain=1 +focus: /index.html --- The `
` HTML element groups related form controls, such as buttons, inputs, textareas, and labels, within a web form. diff --git a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/2-a-legend/content.md b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/2-a-legend/content.md index 4f9265ab..96b3dc74 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/2-a-legend/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/2-a-legend/content.md @@ -3,7 +3,6 @@ type: lesson title: A legend slug: a-legend focus: /index.html -editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/2-a-legend/content.md?plain=1 --- Even with the default styling `
` already visually separates one group of form controls from another. diff --git a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/3-fieldset-styling/content.md b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/3-fieldset-styling/content.md index 94cf0be5..64af991f 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/3-fieldset-styling/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/3-fieldset-styling/content.md @@ -3,7 +3,6 @@ type: lesson title: Styling fieldsets slug: fieldset-styling focus: /style.css -editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/3-fieldset-styling/content.md?plain=1 --- Our HTML looks great, but the default styles leave a lot of room for improvements. Thankfully, the way `
` and `` look like can be customized with a standard CSS. diff --git a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/5-focus-within/content.md b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/5-focus-within/content.md index 47361805..3356bb46 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/5-focus-within/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/5-focus-within/content.md @@ -3,7 +3,6 @@ type: lesson title: Focus within slug: focus-within focus: /style.css -editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/5-focus-within/content.md?plain=1 --- A great way to give our visitors a pointer to where they are in the form is the `:focus` state. The most common way to apply it is by highlighting the currently focused form controls like buttons and inputs. But now that the fieldset provides us with a higher level of organization for the form, we can also highlight it to give even better visual guidance! diff --git a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/6-the-end/content.md b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/6-the-end/content.md index 11092bd7..bec59744 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/6-the-end/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/6-the-end/content.md @@ -3,7 +3,6 @@ type: lesson title: The end slug: the-end focus: /style.css -editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/6-the-end/content.md?plain=1 --- You've reached the end of this tutorial! We hope you've enjoyed it and learned something new about working with CSS and forms. diff --git a/docs/demo/src/content/tutorial/meta.md b/docs/demo/src/content/tutorial/meta.md index 86a50e02..b02a450b 100644 --- a/docs/demo/src/content/tutorial/meta.md +++ b/docs/demo/src/content/tutorial/meta.md @@ -2,5 +2,7 @@ type: tutorial mainCommand: ['npm run dev', 'Starting http server'] prepareCommands: - - ['npm install', 'Installing dependencies'] +- ['npm install', 'Installing dependencies'] +editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/${path}?plain=1 + --- From 0938f34e65ed19cdf4ff4513a6f25598829a54ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ari=20Perkki=C3=B6?= Date: Mon, 23 Sep 2024 19:22:11 +0300 Subject: [PATCH 3/4] chore: revert whitespace change --- .../1-forms-css/3-fieldset/1-fieldset-element/content.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md index d8a454d1..f5a06d23 100644 --- a/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md +++ b/docs/demo/src/content/tutorial/1-forms-css/3-fieldset/1-fieldset-element/content.md @@ -2,7 +2,7 @@ type: lesson title: Fieldset element slug: fieldset-element -focus: /index.html +focus: /index.html --- The `
` HTML element groups related form controls, such as buttons, inputs, textareas, and labels, within a web form. From 240d2427bf500cd99fc4bf13a02a7fd541627d68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ari=20Perkki=C3=B6?= Date: Mon, 23 Sep 2024 19:22:22 +0300 Subject: [PATCH 4/4] chore: revert whitespace change --- docs/demo/src/content/tutorial/meta.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/demo/src/content/tutorial/meta.md b/docs/demo/src/content/tutorial/meta.md index b02a450b..3f72e124 100644 --- a/docs/demo/src/content/tutorial/meta.md +++ b/docs/demo/src/content/tutorial/meta.md @@ -4,5 +4,4 @@ mainCommand: ['npm run dev', 'Starting http server'] prepareCommands: - ['npm install', 'Installing dependencies'] editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/docs/demo/src/content/tutorial/${path}?plain=1 - ---