Skip to content

Commit

Permalink
chore(landing): update examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@dimaslz
dimaslz committed Mar 10, 2024
1 parent de1f903 commit bc3eeef
Show file tree
Hide file tree
Showing 22 changed files with 506 additions and 36 deletions.
17 changes: 15 additions & 2 deletions src/routes/guide/useDebounce/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,22 @@
<div slot="description" class="space-y-2">
<p>This hook allows you to debounce a value.</p>

<p>Related hook</p>
<ul class="list-disc ml-6">
<h3 class="text-lg">Related hooks</h3>
<ul class="list-disc pl-6">
<li><Link href="/guide/useState">useState</Link></li>
<li><Link href="/guide/useDebounceFn">useDebounceFn</Link></li>
</ul>

<h3 class="text-lg">Inspired on:</h3>
<ul class="list-disc pl-6">
<li>
<Link href="https://usehooks.com/usedebounce">https://usehooks.com/usedebounce</Link>
</li>
<li>
<Link href="https://usehooks-ts.com/react-hook/use-debounce"
>https://usehooks-ts.com/react-hook/use-debounce</Link
>
</li>
</ul>
</div>

Expand Down
15 changes: 12 additions & 3 deletions src/routes/guide/useDebounceFn/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,19 @@
debounce a value by excecution a callback (follow the example).
</p>

<p>Related hook</p>
<ul class="list-disc ml-6">
<li><Link href="/guide/useDebounce">useDebounce</Link></li>
<h3 class="text-lg">Related hooks</h3>
<ul class="list-disc pl-6">
<li><Link href="/guide/useState">useState</Link></li>
<li><Link href="/guide/useDebounce">useDebounce</Link></li>
</ul>

<h3 class="text-lg">Inspired on:</h3>
<ul class="list-disc pl-6">
<li>
<Link href="https://vueuse.org/shared/useDebounceFn/"
>https://vueuse.org/shared/useDebounceFn/</Link
>
</li>
</ul>
</div>

Expand Down
21 changes: 19 additions & 2 deletions src/routes/guide/useDocumentTitle/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,27 @@
<div slot="description" class="space-y-2">
<p>Allow to update the site title easily.</p>

<p>Related hook</p>
<ul class="list-disc ml-6">
<h3 class="text-lg">Related hooks</h3>
<ul class="list-disc pl-6">
<li><Link href="/guide/useState">useState</Link></li>
</ul>

<h3 class="text-lg">Inspired on:</h3>
<ul class="list-disc pl-6">
<li>
<Link href="https://usehooks-ts.com/react-hook/use-document-title"
>https://usehooks-ts.com/react-hook/use-document-title</Link
>
</li>
<li>
<Link href="https://vueuse.org/core/useTitle">https://vueuse.org/core/useTitle</Link>
</li>
<li>
<Link href="https://usehooks.com/usedocumenttitle"
>https://usehooks.com/usedocumenttitle</Link
>
</li>
</ul>
</div>

<div slot="visual-example">
Expand Down
26 changes: 25 additions & 1 deletion src/routes/guide/useElementSize/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount } from "svelte";
import { Browser, DocTpl, H2, Highlight } from "@/components";
import { Browser, DocTpl, H2, Highlight, Link } from "@/components";
import { useElementSize } from "@/hooks";
import { exampleCode, sourceCode } from "./code-snippet";
Expand All @@ -24,6 +24,30 @@
<DocTpl title="useElementSize">
<div slot="description">
<p>Listen the size of the element.</p>

<h3 class="text-lg">Related hooks</h3>
<ul class="list-disc pl-6">
<li><Link href="/guide/useState">useState</Link></li>
</ul>

<h3 class="text-lg">Inspired on:</h3>
<ul class="list-disc pl-6">
<li>
<Link href="https://usehooks-ts.com/react-hook/use-element-size"
>https://usehooks-ts.com/react-hook/use-element-size</Link
>
</li>
<li>
<Link href="https://vueuse.org/core/useElementSize/"
>https://vueuse.org/core/useElementSize/</Link
>
</li>
<li>
<Link href="https://vueuse.org/core/useResizeObserver"
>https://vueuse.org/core/useResizeObserver</Link
>
</li>
</ul>
</div>

<div slot="visual-example">
Expand Down
24 changes: 24 additions & 0 deletions src/routes/guide/useEventListener/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { onMount } from "svelte";
import { Browser, Button, DocTpl, H2, Highlight } from "@/components";
import Link from "@/components/link/Link.svelte";
import { useEventListener } from "@/hooks";
import { exampleCode, sourceCode } from "./code-snippet";
Expand Down Expand Up @@ -36,6 +37,29 @@
</script>

<DocTpl title="useEventListener">
<div slot="description">
<p>Listen any event from a element.</p>

<h3 class="text-lg">Inspired on:</h3>
<ul class="list-disc pl-6">
<li>
<Link href="https://vueuse.org/core/useEventListener/"
>https://vueuse.org/core/useEventListener/</Link
>
</li>
<li>
<Link href="https://usehooks.com/useeventlistener"
>https://usehooks.com/useeventlistener</Link
>
</li>
<li>
<Link href="https://usehooks-ts.com/react-hook/use-event-listener"
>https://usehooks-ts.com/react-hook/use-event-listener</Link
>
</li>
</ul>
</div>

<div slot="visual-example">
<H2>Visual example</H2>

Expand Down
34 changes: 28 additions & 6 deletions src/routes/guide/useFetch/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { Browser, H2, Highlight } from "@/components";
import { Browser, DocTpl, H2, Highlight, Link } from "@/components";
import { useFetch } from "@/hooks";
import { exampleCode, sourceCode } from "./code-snippet";
Expand All @@ -16,10 +16,32 @@
});
</script>

<div class="w-full space-y-12">
<h1 class="text-4xl">useFetch</h1>
<DocTpl title="useFetch">
<div slot="description">
<p>Make HTTP requests by a hook.</p>

<div>
<h3 class="text-lg">Related hooks</h3>
<ul class="list-disc pl-6">
<li><Link href="/guide/useState">useState</Link></li>
</ul>

<h3 class="text-lg">Inspired on:</h3>
<ul class="list-disc pl-6">
<li>
<Link href="https://vueuse.org/core/useFetch/">https://vueuse.org/core/useFetch/</Link>
</li>
<li>
<Link href="https://usehooks.com/usefetch">https://usehooks.com/usefetch</Link>
</li>
<li>
<Link href="https://usehooks-ts.com/react-hook/use-fetch"
>https://usehooks-ts.com/react-hook/use-fetch</Link
>
</li>
</ul>
</div>

<div slot="visual-example">
<H2>Visual example</H2>

<Browser body="p-4 bg-gray-950/50">
Expand All @@ -33,7 +55,7 @@
</Browser>
</div>

<div class="mt-12 text-xs">
<div slot="code-example">
<div>
<H2>Code base</H2>

Expand All @@ -46,4 +68,4 @@
<Highlight code={exampleCode} />
</div>
</div>
</div>
</DocTpl>
29 changes: 28 additions & 1 deletion src/routes/guide/useHover/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount } from "svelte";
import { DocTpl, H2, Highlight } from "@/components";
import { DocTpl, H2, Highlight, Link } from "@/components";
import Browser from "@/components/browser/Browser.svelte";
import { useHover } from "@/hooks";
Expand All @@ -16,6 +16,33 @@
</script>

<DocTpl title="useHover">
<div slot="description">
<p>Listen the hover event of a element.</p>

<h3 class="text-lg">Related hooks</h3>
<ul class="list-disc pl-6">
<li><Link href="/guide/useState">useState</Link></li>
<li><Link href="/guide/useEventListener">useEventListener</Link></li>
</ul>

<h3 class="text-lg">Inspired on:</h3>
<ul class="list-disc pl-6">
<li>
<Link href="https://usehooks-ts.com/react-hook/use-hover"
>https://usehooks-ts.com/react-hook/use-hover</Link
>
</li>
<li>
<Link href="https://usehooks.com/usehover">https://usehooks.com/usehover</Link>
</li>
<li>
<Link href="https://vueuse.org/core/useElementHover/"
>https://vueuse.org/core/useElementHover/</Link
>
</li>
</ul>
</div>

<div slot="visual-example">
<H2>Visual example</H2>

Expand Down
23 changes: 22 additions & 1 deletion src/routes/guide/useImageOnLoad/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { Browser, DocTpl, H2, Highlight } from "@/components";
import { Browser, DocTpl, H2, Highlight, Link } from "@/components";
import { useImageOnLoad } from "@/hooks";
import { exampleCode, sourceCode } from "./code-snippet";
Expand All @@ -24,6 +24,27 @@
</script>

<DocTpl title="useImageOnLoad">
<div slot="description">
<p>Listen on image is loading.</p>

<h3 class="text-lg">Related hooks</h3>
<ul class="list-disc pl-6">
<li><Link href="/guide/useState">useState</Link></li>
</ul>

<h3 class="text-lg">Inspired on:</h3>
<ul class="list-disc pl-6">
<li>
<Link href="https://usehooks-ts.com/react-hook/use-image-on-load"
>https://usehooks-ts.com/react-hook/use-image-on-load</Link
>
</li>
<li>
<Link href="https://vueuse.org/core/useImage/">https://vueuse.org/core/useImage/</Link>
</li>
</ul>
</div>

<div slot="visual-example">
<H2>Visual example</H2>

Expand Down
29 changes: 28 additions & 1 deletion src/routes/guide/useInterval/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { Button, DocTpl, H2, Highlight } from "@/components";
import { Button, DocTpl, H2, Highlight, Link } from "@/components";
import Browser from "@/components/browser/Browser.svelte";
import { useInterval } from "@/hooks";
Expand All @@ -10,6 +10,33 @@
</script>

<DocTpl title="useInterval">
<div slot="description">
<p>Use interval event from a hook.</p>

<h3 class="text-lg">Related hooks</h3>
<ul class="list-disc pl-6">
<li><Link href="/guide/useState">useState</Link></li>
<li><Link href="/guide/useIntervalFn">useIntervalFn</Link></li>
</ul>

<h3 class="text-lg">Inspired on:</h3>
<ul class="list-disc pl-6">
<li>
<Link href="https://usehooks-ts.com/react-hook/use-interval"
>https://usehooks-ts.com/react-hook/use-interval</Link
>
</li>
<li>
<Link href="https://usehooks.com/useinterval">https://usehooks.com/useinterval</Link>
</li>
<li>
<Link href="https://vueuse.org/shared/useInterval"
>https://vueuse.org/shared/useInterval</Link
>
</li>
</ul>
</div>

<div slot="visual-example">
<H2>Visual example</H2>

Expand Down
25 changes: 24 additions & 1 deletion src/routes/guide/useIntervalFn/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { Button, DocTpl, H2, Highlight } from "@/components";
import { Button, DocTpl, H2, Highlight, Link } from "@/components";
import Browser from "@/components/browser/Browser.svelte";
import { useIntervalFn, useState } from "@/hooks";
Expand All @@ -12,6 +12,29 @@
</script>

<DocTpl title="useIntervalFn">
<div slot="description">
<p>Use interval event from a hook, triggering a callback.</p>

<h3 class="text-lg">Related hooks</h3>
<ul class="list-disc pl-6">
<li><Link href="/guide/useState">useState</Link></li>
<li><Link href="/guide/useIntervalFn">useIntervalFn</Link></li>
</ul>

<h3 class="text-lg">Inspired on:</h3>
<ul class="list-disc pl-6">
<li>
<Link href="https://vueuse.org/shared/useIntervalFn/"
>https://vueuse.org/shared/useIntervalFn/</Link
>
</li>
<li>
<Link href="https://usehooks.com/useintervalwhen">https://usehooks.com/useintervalwhen</Link
>
</li>
</ul>
</div>

<div slot="visual-example">
<H2>Visual example</H2>

Expand Down
Loading

0 comments on commit bc3eeef

Please sign in to comment.