Skip to content

Commit

Permalink
docs: fix an issue with quotes being formatted by prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
AoDev committed Oct 30, 2023
1 parent 50b5817 commit 347039d
Show file tree
Hide file tree
Showing 8 changed files with 25 additions and 21 deletions.
8 changes: 5 additions & 3 deletions 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.

Expand All @@ -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)
10 changes: 6 additions & 4 deletions documentation/docs/component_link.md
@@ -1,7 +1,7 @@
---
id: component_link
title: "<Link/> component"
sidebar_label: "<Link/>"
title: <Link/> component
sidebar_label: <Link/>
---

The Link component lets your users navigate through your UI.
Expand All @@ -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 (
<div>
<h3>Do something</h3>
<p>
<Link autoActive to="/private/my-things" params={{id: 1}}>
View your things
</Link>.
</Link>
.
</p>
</div>
)
Expand Down
4 changes: 2 additions & 2 deletions documentation/docs/component_route.md
@@ -1,7 +1,7 @@
---
id: component_route
title: '<Route/> component'
sidebar_label: '<Route/>'
title: <Route/> component
sidebar_label: <Route/>
---

`Route` are simple UI switches that either render or not the corresponding UI component depending on the router state.
Expand Down
4 changes: 2 additions & 2 deletions 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.
Expand Down
4 changes: 2 additions & 2 deletions 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.**
Expand Down
4 changes: 2 additions & 2 deletions 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.**
Expand Down
4 changes: 2 additions & 2 deletions 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.**
Expand Down
8 changes: 4 additions & 4 deletions 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:

Expand Down

0 comments on commit 347039d

Please sign in to comment.