From 347039d690cdb03d7d93dfa62dd903d0bbc51061 Mon Sep 17 00:00:00 2001 From: AoDev <> Date: Mon, 30 Oct 2023 23:36:49 +0100 Subject: [PATCH] docs: fix an issue with quotes being formatted by prettier --- documentation/docs/about_router.md | 8 +++++--- documentation/docs/component_link.md | 10 ++++++---- documentation/docs/component_route.md | 4 ++-- documentation/docs/faq.md | 4 ++-- documentation/docs/plugins_html5_history.md | 4 ++-- documentation/docs/plugins_scroll.md | 4 ++-- documentation/docs/plugins_window_title.md | 4 ++-- documentation/docs/router_hooks.md | 8 ++++---- 8 files changed, 25 insertions(+), 21 deletions(-) diff --git a/documentation/docs/about_router.md b/documentation/docs/about_router.md index 3877e78..3de9951 100644 --- a/documentation/docs/about_router.md +++ b/documentation/docs/about_router.md @@ -1,10 +1,10 @@ --- id: about_router -title: "Philosophy" -sidebar_label: "Philosophy" +title: Philosophy +sidebar_label: Philosophy --- -**You can always fix a bug in a library, but a bad architecture will turn your entire project into Hell.** +**You can always fix a bug in a library, but a bad architecture will turn your entire project into Hell.** With that in mind, I have been on a never ending quest to find a simple but effective architecture to easily build mobx / react apps in particular. The journey so far has lead me to the following three points for a happy developer experience. @@ -19,11 +19,13 @@ Note: these principles can be applied to any kind of software, `Bard router` was [Link to Robert site](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html) ### Decouple state and UI by mobx author + > "Strategies for dealing with routing, data fetching, authentication and workflow testing without the UI layer." [Link to Michel Weststrate article](https://hackernoon.com/how-to-decouple-state-and-ui-a-k-a-you-dont-need-componentwillmount-cc90b787aa37) ### App shell architecture + > "An application shell (or app shell) architecture is one way to build a Progressive Web App that reliably and instantly loads on your users' screens, similar to what you see in native applications." [Link to developer.google.com](https://developers.google.com/web/fundamentals/architecture/app-shell) diff --git a/documentation/docs/component_link.md b/documentation/docs/component_link.md index 1287174..813e5fe 100644 --- a/documentation/docs/component_link.md +++ b/documentation/docs/component_link.md @@ -1,7 +1,7 @@ --- id: component_link -title: " component" -sidebar_label: "" +title: component +sidebar_label: --- The Link component lets your users navigate through your UI. @@ -13,18 +13,20 @@ To help with typical UI patterns, you can automatically get an `active` CSS clas You can manually control this behaviour by setting `active={true|false}`. #### Link component example + ```js import React from 'react' import {Link} from 'bard-router' -export default function SomeTextWithLink () { +export default function SomeTextWithLink() { return (

Do something

View your things - . + + .

) diff --git a/documentation/docs/component_route.md b/documentation/docs/component_route.md index 34249ae..640ca56 100644 --- a/documentation/docs/component_route.md +++ b/documentation/docs/component_route.md @@ -1,7 +1,7 @@ --- id: component_route -title: ' component' -sidebar_label: '' +title: component +sidebar_label: --- `Route` are simple UI switches that either render or not the corresponding UI component depending on the router state. diff --git a/documentation/docs/faq.md b/documentation/docs/faq.md index 6610f15..f4e3f24 100644 --- a/documentation/docs/faq.md +++ b/documentation/docs/faq.md @@ -1,7 +1,7 @@ --- id: faq -title: "How-to's / FAQ" -sidebar_label: "How-to's / FAQ" +title: How-to's / FAQ +sidebar_label: How-to's / FAQ --- Simple solutions for challenges that one faces usually with routing. diff --git a/documentation/docs/plugins_html5_history.md b/documentation/docs/plugins_html5_history.md index e36fd3d..bf5d87d 100644 --- a/documentation/docs/plugins_html5_history.md +++ b/documentation/docs/plugins_html5_history.md @@ -1,7 +1,7 @@ --- id: plugins_html5_history -title: "Html5 history plugin" -sidebar_label: "Html5 history plugin" +title: Html5 history plugin +sidebar_label: Html5 history plugin --- > **Synchronize the router with the browser history / URL.** diff --git a/documentation/docs/plugins_scroll.md b/documentation/docs/plugins_scroll.md index 5fd1b2f..fc2de91 100644 --- a/documentation/docs/plugins_scroll.md +++ b/documentation/docs/plugins_scroll.md @@ -1,7 +1,7 @@ --- id: plugins_scroll -title: 'Scroll plugin' -sidebar_label: 'Scroll plugin' +title: Scroll plugin +sidebar_label: Scroll plugin --- > **Simple plugin that manages the window scroll automatically when navigating.** diff --git a/documentation/docs/plugins_window_title.md b/documentation/docs/plugins_window_title.md index 14a4dfd..79cd841 100644 --- a/documentation/docs/plugins_window_title.md +++ b/documentation/docs/plugins_window_title.md @@ -1,7 +1,7 @@ --- id: plugins_window_title -title: 'Window title plugin' -sidebar_label: 'Window title plugin' +title: Window title plugin +sidebar_label: Window title plugin --- > **Automatically sync the page title with the router state.** diff --git a/documentation/docs/router_hooks.md b/documentation/docs/router_hooks.md index 079a347..db0da72 100644 --- a/documentation/docs/router_hooks.md +++ b/documentation/docs/router_hooks.md @@ -1,15 +1,15 @@ --- id: router_hooks -title: "Router hooks" -sidebar_label: "Router hooks" +title: Router hooks +sidebar_label: Router hooks --- As opposed to route specific hooks, the router hooks are handlers that you want to call any time there is a navigation event. ## Hooks available -* `beforeNav` (called before the view / navigation transition) -* `afterNav` (called after the view / navigation was done) +- `beforeNav` (called before the view / navigation transition) +- `afterNav` (called after the view / navigation was done) These handlers are called with an event object like this: