feat(ui-docs): offer quick import snippet for each component

front/ui-docs/components/ui/activity.md

@@ -92,6 +92,10 @@ const user: User = {
 }
 </script>
 
+```ts
+import Activity from "~/components/ui/Activity.vue"
+```
+
 # Activity
 
 Activities display history entries for a Funkwhale pod. Each item contains the following information:

front/ui-docs/components/ui/alert.md

@@ -3,6 +3,10 @@ import Alert from "~/components/ui/Alert.vue"
 import Button from "~/components/ui/Button.vue"
 </script>
 
+```ts
+import Alert from "~/components/ui/Alert.vue"
+```
+
 # Alert
 
 | Prop    | Data type                                          | Required? | Default     | Description                      |

front/ui-docs/components/ui/button.md

@@ -5,6 +5,10 @@ import Layout from '~/components/ui/Layout.vue'
 const click = ():Promise<void> => new Promise(resolve => setTimeout(resolve, 1000))
 </script>
 
+```ts
+import Button from "~/components/ui/Button.vue"
+```
+
 # Button
 
 Buttons are UI elements that users can interact with to perform actions and manipulate objects. They are distinct from [Links](link) and will not change the user's position.

front/ui-docs/components/ui/button/options.md

@@ -2,6 +2,10 @@
 import OptionsButton from '~/components/ui/button/Options.vue'
 </script>
 
+```ts
+import OptionsButton from "~/components/ui/button/Options.vue"
+```
+
 # Options Button
 
 -> For use cases, see [components/popover](../popover)

front/ui-docs/components/ui/button/play.md

@@ -2,6 +2,10 @@
 import PlayButton from '~/components/ui/button/Play.vue'
 </script>
 
+```ts
+import PlayButton from "~/components/ui/button/Play.vue"
+```
+
 # Play Button
 
 The play button is a specialized button used in many places across the Funkwhale app. Map a function to the `@play` event handler to toggle it on click.

front/ui-docs/components/ui/card.md

@@ -3,13 +3,17 @@
   import Card from '~/components/ui/Card.vue'
   import Layout from '~/components/ui/Layout.vue'
   import OptionsButton from '~/components/ui/button/Options.vue'
-  import Spacer from '~/components/ui/layout/Spacer.vue'
+  import Spacer from '~/components/ui/Spacer.vue'
   // import { useRoute } from 'vue-router'
 
   const alert = ( message: string ) => window.alert(message)
   // const router = useRouter()
 </script>
 
+```ts
+import Card from "~/components/ui/Card.vue"
+```
+
 # Card
 
 Funkwhale cards are used to contain textual information, links, and interactive buttons. You can use these to create visually pleasing links to content or to present information.

front/ui-docs/components/ui/input.md

@@ -6,22 +6,24 @@ import Spacer from "~/components/ui/Spacer.vue"
 import Alert from "~/components/ui/Alert.vue"
 </script>
 
+```ts
+import Input from "~/components/ui/Input.vue"
+```
+
 # Input
 
 Inputs are areas in which users can enter information. In Funkwhale, these mostly take the form of search fields.
 
-| Prop            | Data type | Required? | Description                                                                 |
-| --------------- | --------- | --------- | --------------------------------------------------------------------------- |
-| `placeholder`   | String    | No        | The placeholder text that appears when the input is empty.                  |
-| `icon`          | String    | No        | The [Bootstrap icon](https://icons.getbootstrap.com/) to show on the input. |
-| `v-model:value` | String    | Yes       | The text entered in the input.                                              |
-
-## Input model
+| Prop          | Data type | Required? | Description                                                                 |
+| ------------- | --------- | --------- | --------------------------------------------------------------------------- |
+| `placeholder` | String    | No        | The placeholder text that appears when the input is empty.                  |
+| `icon`        | String    | No        | The [Bootstrap icon](https://icons.getbootstrap.com/) to show on the input. |
+| `v-model`     | String    | Yes       | The text entered in the input.                                              |
 
 You can link a user's input to form data by referencing the data in a `v-model` directive.
 
 ```vue-html{2}
-<Input v-model="value" placeholder="Search" />
+<Input v-model="value" placeholder="Your favorite animal" />
 ```
 
 <Input placeholder="Your favorite animal" />

front/ui-docs/components/ui/layout.md

@@ -14,6 +14,9 @@ const isGrowing = ref(true)
 const noGap = ref(true)
 </script>
 
+```ts
+import Layout from "~/components/ui/Layout.vue"
+```
 # Layout
 
 CSS provides [four methods to arrange items in a container](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods): Flow, Columns, Flex and Grid. To make typical alignment tasks in the Funkwhale Ui easier, we have created a few useful presets.

front/ui-docs/components/ui/layout/spacer.md

@@ -17,6 +17,10 @@ const size = ref(32)
   }
 </style>
 
+```ts
+import Spacer from "~/components/ui/Spacer.vue"
+```
+
 # Spacer
 
 Add a 16px gap between adjacent items.

front/ui-docs/components/ui/link.md

@@ -6,6 +6,9 @@ import Card from '~/components/ui/Card.vue'
 import Alert from '~/components/ui/Alert.vue'
 </script>
 
+```ts
+import Link from "~/components/ui/Link.vue"
+```
 # Link
 
 Users can navigate by following Links. They expect that in contrast to clicking a [button](button), following a link does not manipulate items or trigger any action.

front/ui-docs/components/ui/loader.md

@@ -9,6 +9,10 @@ import Loader from '~/components/ui/Loader.vue'
 }
 </style>
 
+```ts
+import Loader from "~/components/ui/Loader.vue"
+```
+
 # Loader
 
 Loaders visually indicate when an operation is loading. This makes it visually clear that the user can't interact with the element until the loading process is complete.

front/ui-docs/components/ui/modal.md

@@ -23,6 +23,10 @@ const isOpen6 = ref(false)
 
 </script>
 
+```ts
+import Modal from "~/components/ui/Modal.vue"
+```
+
 # Modal
 
 | Prop      | Data type         | Required? | Default | Description                        |

front/ui-docs/components/ui/pill.md

@@ -2,6 +2,10 @@
 import Pill from '~/components/ui/Pill.vue'
 </script>
 
+```ts
+import Pill from "~/components/ui/Pill.vue"
+```
+
 # Pill
 
 Pills are decorative elements that display information about content they attach to. They can be links to other content or simple colored labels.

front/ui-docs/components/ui/pills.md

@@ -20,6 +20,10 @@ const interactiveModel = ref({
 });
 </script>
 
+```ts
+import Pills from "~/components/ui/Pills.vue"
+```
+
 # Pills
 
 <Layout class="preview" style="padding:16px">

front/ui-docs/components/ui/popover.md

@@ -42,6 +42,10 @@ const fullMenu= ref(false)
 const isOpen = ref(false)
 </script>
 
+```ts
+import Popover from "~/components/ui/Popover.vue"
+```
+
 # Popover (Dropdown Menu)
 
 Popovers (`Popover`) are dropdown menus activated by a button. Use popovers to create dropdown menus ranging from simple lists to complex nested menus.

front/ui-docs/components/ui/tabs.md

@@ -4,6 +4,10 @@ import Tabs from '~/components/ui/Tabs.vue'
 import Tab from '~/components/ui/Tab.vue'
 </script>
 
+```ts
+import Tabs from "~/components/ui/Tabs.vue"
+```
+
 # Tabs
 
 Tabs are used to hide information until a user chooses to see it. You can use tabs to show two sets of information on the same page without the user needing to navigate away.

front/ui-docs/components/ui/textarea.md

@@ -8,6 +8,10 @@ const text2 = ref('# Funk\nwhale')
 const text3 = ref('')
 </script>
 
+```ts
+import Textarea from "~/components/ui/Textarea.vue"
+```
+
 # Textarea
 
 Textareas are input blocks that enable users to write in textual information. These blocks are used throughout the Funkwhale interface for entering item descriptions, moderation notes, and custom notifications.

front/ui-docs/components/ui/toc.md

@@ -2,6 +2,10 @@
 import Toc from '~/components/ui/Toc.vue'
 </script>
 
+```ts
+import Toc from "~/components/ui/Toc.vue"
+```
+
 # Table of Contents
 
 The table of contents component renders a navigation bar on the right of the screen. Users can click on the items in the contents bar to skip to specific headers.

front/ui-docs/components/ui/toggle.md

@@ -8,6 +8,10 @@ import { ref } from 'vue'
 const toggle = ref(false)
 </script>
 
+```ts
+import Toggle from "~/components/ui/Toggle.vue"
+```
+
 # Toggle
 
 Toggles are basic form inputs that visually represent a boolean value. Toggles can be **on** (`true`) or **off** (`false`). For actions with more than 2 states or delayed, fallible, or effectful actions, [consider using a Button with `aria-pressed` logic instead](button#on-off).