Skip to content

Commit 5859d5f

Browse files
marshallswainmarshallswain
committed
fix documentation examples
1 parent adf6184 commit 5859d5f

14 files changed

Lines changed: 222 additions & 51 deletions

File tree

‎app/components/CodePreview.vue‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { codeToHtml } from 'shiki'
3-
import { computed, onMounted, ref, resolveComponent, watch } from 'vue'
3+
import { computed, onMounted, ref, watch } from 'vue'
44
55
const props = defineProps<{
66
path: string
@@ -25,6 +25,7 @@ const language = computed(() => {
2525
'ts': 'typescript',
2626
'js': 'javascript',
2727
'vue': 'vue',
28+
'svelte': 'svelte', // Add this line
2829
'html': 'html',
2930
'css': 'css',
3031
'json': 'json',
@@ -37,21 +38,30 @@ const language = computed(() => {
3738
3839
async function loadCodeAndComponent() {
3940
try {
40-
// Get all example files using a glob pattern that includes all possible example directories
41-
const files = import.meta.glob('../../examples/**/*', { as: 'raw', eager: false })
41+
// Look in the app/.cache/examples directory
42+
const files = import.meta.glob([
43+
'../.cache/examples/**/*.ts',
44+
'../.cache/examples/**/*.tsx',
45+
'../.cache/examples/**/*.js',
46+
'../.cache/examples/**/*.jsx',
47+
'../.cache/examples/**/*.vue',
48+
'../.cache/examples/**/*.svelte',
49+
'../.cache/examples/**/*.md'
50+
], {
51+
as: 'raw',
52+
eager: false
53+
})
4254
43-
console.log('files', files)
44-
45-
// Normalize the path by removing @/ if present and any leading/trailing slashes
55+
// Normalize the path by removing prefixes and cleaning up
4656
let normalizedPath = props.path
47-
.replace(/^@\//, '')
48-
.replace(/^\/+|\/+$/g, '')
57+
.replace(/^@\/examples\//, '') // Remove @/examples/ prefix
58+
.replace(/^\.\.\/\.\.\/\.\.\/\.\.\/examples\//, '') // Remove ../../../../examples/ prefix
59+
.replace(/^examples\//, '') // Remove examples/ prefix if present
60+
.replace(/^\/*|\/*$/g, '') // Remove leading/trailing slashes
4961
50-
console.log('Looking for file:', normalizedPath)
51-
52-
// Try to find the file with the exact path first
62+
// Try to find the file with the normalized path
5363
let fileKey = Object.keys(files).find(key =>
54-
key.endsWith(`/${normalizedPath}`)
64+
key.includes(`/${normalizedPath}`)
5565
)
5666
5767
// If not found, try to find it by just the filename
@@ -60,15 +70,13 @@ async function loadCodeAndComponent() {
6070
fileKey = Object.keys(files).find(key => key.endsWith(`/${filename}`))
6171
}
6272
63-
console.log('Found file at:', fileKey)
64-
6573
if (!fileKey) {
66-
throw new Error(`File not found: ${normalizedPath}. Available files: ${Object.keys(files).slice(0, 10).join(', ')}...`)
74+
throw new Error(`File not found: ${normalizedPath}. Make sure the file exists in the examples directory and has been copied to the cache.`)
6775
}
6876
6977
const loadRaw = files[fileKey]
7078
if (!loadRaw) {
71-
throw new Error(`Failed to load file: ${fileKey}`)
79+
throw new Error(`File not found: ${normalizedPath}. Make sure the file exists in the examples directory and has been copied to the cache.`)
7280
}
7381
code.value = await loadRaw()
7482
@@ -115,7 +123,6 @@ watch(() => props.path, () => {
115123

116124
<style>
117125
pre.shiki {
118-
/* Diagonal stripes, subtle effect */
119126
background-color: var(--tw-prose-pre-bg) !important;
120127
color: var(--tw-prose-pre-code) !important;
121128
}

‎content/auth/docs/guide/react.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,22 @@ npm create feathersdev@latest app --framework react --app-id "<your-app-id>"
1212

1313
In your React application, create a `src/auth.ts` file that allows to make authenticated requests to the backend like this:
1414

15-
<CodePreview path="../../../../examples/frontend/react/src/auth.ts" />
15+
::CodePreview
16+
---
17+
path: frontend/react/src/auth.ts
18+
---
19+
::
1620

1721
This file exports an `authFetch` function that can be used just like the normal [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) and will redirect to the login page if the user needs to log in.
1822

1923
## Usage
2024

2125
A React component using this function and loading the message from one of the [platform example servers](../platforms/index.md) can look like this:
2226

23-
<CodePreview path="@/examples/frontend/react/src/App.tsx" />
27+
::CodePreview
28+
---
29+
path: frontend/react/src/App.tsx
30+
---
31+
::
2432

2533
You can find the full Vite + React example application [here](https://github.com/feathersdev/examples/tree/main/frontend/react).

‎content/auth/docs/guide/svelte.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,22 @@ npm create feathersdev@latest app --framework svelte --app-id "<your-app-id>"
1212

1313
In your Svelte application, create a `src/auth.ts` file that allows to make authenticated requests to the backend like this:
1414

15-
<<< @/examples/frontend/svelte/src/auth.ts
15+
::CodePreview
16+
---
17+
path: frontend/svelte/src/auth.ts
18+
---
19+
::
1620

1721
This file exports an `authFetch` function that can be used just like the normal [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) and will redirect to the login page if the user needs to log in.
1822

1923
## Usage
2024

2125
A Svelte component using the Auth client and loading the message from one of the [platform example servers](../platforms/index.md) looks like this:
2226

23-
<<< @/examples/frontend/svelte/src/App.svelte
27+
::CodePreview
28+
---
29+
path: frontend/svelte/src/App.svelte
30+
---
31+
::
2432

2533
You can find the full Vite + Svelte example application [here](https://github.com/feathersdev/examples/tree/main/client/svelte).

‎content/auth/docs/guide/typescript.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@ npm create feathersdev@latest app --framework vanilla --app-id "<your-app-id>"
1212

1313
In any web application, create an `auth.ts` file that allows to make authenticated requests to the backend like this:
1414

15-
<<< @/examples/frontend/auth.ts
15+
::CodePreview
16+
---
17+
path: frontend/auth.ts
18+
---
19+
::
1620

1721
This file exports an `authFetch` function that can be used just like the normal [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) and will redirect to the login page if the user needs to log in.
1822

‎content/auth/docs/guide/vue.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,22 @@ npm create feathersdev@latest app --framework vue --app-id "<your-app-id>"
1212

1313
In your VueJS application, create a `src/auth.ts` file that allows to make authenticated requests to the backend like this:
1414

15-
<<< @/examples/frontend/react/src/auth.ts
15+
::CodePreview
16+
---
17+
path: frontend/vue/src/auth.ts
18+
---
19+
::
1620

1721
This file exports an `authFetch` function that can be used just like the normal [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) and will redirect to the login page if the user needs to log in.
1822

1923
## Usage
2024

2125
A VueJS component using this function to load the message from one of the [platform example servers](../platforms/index.md) looks like this:
2226

23-
<<< @/examples/frontend/vue/src/App.vue
27+
::CodePreview
28+
---
29+
path: frontend/vue/src/App.vue
30+
---
31+
::
2432

2533
You can find the full Vite + Vue example application [here](https://github.com/feathersdev/examples/tree/main/client/vue).

‎content/auth/docs/pricing.md‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
<script setup lang="ts">
2-
import CTAButton from '../components/CTAButton.vue'
3-
import Pricing from '../components/Pricing.vue'
4-
</script>
5-
61
# Pricing
72

83
Cloud Auth is billed on a tokens-per-month basis. A token is normally issued per user and valid for the next day.
94

10-
<Pricing />
5+
::Pricing
6+
::

‎content/auth/docs/server/bun.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,20 @@ npm create feathersdev@latest server --platform bun --app-id "<your-app-id>"
1010

1111
An `authenticateRequest` function that validates an incoming web standard request can be implemented in `src/authenticate.ts` like this:
1212

13-
<<< @/examples/server/bun/src/authenticate.ts
13+
::CodePreview
14+
---
15+
path: server/bun/src/authenticate.ts
16+
---
17+
::
1418

1519
## Server
1620

1721
Then the BunJS server can then use it in a `src/index.ts` like this:
1822

19-
<<< @/examples/server/bun/src/index.ts
23+
::CodePreview
24+
---
25+
path: server/bun/src/index.ts
26+
---
27+
::
2028

2129
The full Bun example server can be found [here](https://github.com/feathersdev/examples/tree/main/server/bun).

‎content/auth/docs/server/cloudflare.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,20 @@ npm create feathersdev@latest server --platform cloudflare --app-id "<your-app-i
1010

1111
An `authenticateRequest` function that validates an incoming web standard request can be implemented in `src/authenticate.ts` like this:
1212

13-
<<< @/examples/server/cloudflare/src/authenticate.ts
13+
::CodePreview
14+
---
15+
path: server/cloudflare/src/authenticate.ts
16+
---
17+
::
1418

1519
## Worker
1620

1721
It can then be used in a Cloudflare worker like this:
1822

19-
<<< @/examples/server/cloudflare/src/index.ts
23+
::CodePreview
24+
---
25+
path: server/cloudflare/src/index.ts
26+
---
27+
::
2028

2129
The full Cloudflare Worker example can be found [here](https://github.com/feathersdev/examples/tree/main/server/cloudflare).

‎content/auth/docs/server/deno.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,20 @@ npm create feathersdev@latest server --platform deno --app-id "<your-app-id>"
1010

1111
An `authenticateRequest` function that validates an incoming web standard request can be implemented in `src/authenticate.ts` like this:
1212

13-
<<< @/examples/server/deno/src/authenticate.ts
13+
::CodePreview
14+
---
15+
path: server/deno/src/authenticate.ts
16+
---
17+
::
1418

1519
## Server
1620

1721
A Deno server can then use it in `src/server.ts` like this:
1822

19-
<<< @/examples/server/deno/src/server.ts
23+
::CodePreview
24+
---
25+
path: server/deno/src/server.ts
26+
---
27+
::
2028

2129
The full Deno example can be found [here](https://github.com/feathersdev/examples/tree/main/server/deno).

‎content/auth/docs/server/nodejs.md‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ outline: deep
44

55
# NodeJS
66

7-
Feathers Auth requests can be verified in [NodeJS](https://nodejs.org/) with any framework.
7+
Feathers Auth requests can be verified in [NodeJS](https://nodejs.org/) with or without a framework.
88

99
## HTTP
1010

@@ -16,11 +16,19 @@ npm create feathersdev@latest server --platform nodejs --app-id "<your-app-id>"
1616

1717
Create an `src/authenticate.ts` file that validates an incoming request like this:
1818

19-
<<< @/examples/server/nodejs/src/authenticate.ts{js}
19+
::CodePreview
20+
---
21+
path: server/nodejs/src/authenticate.ts
22+
---
23+
::
2024

2125
Then implement an HTTP handler with basic CORS [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (necessary to allow requests from any [client framework](../client/index.md)) in `src/app.ts` like this:
2226

23-
<<< @/examples/server/nodejs/src/server.ts{js}
27+
::CodePreview
28+
---
29+
path: server/nodejs/src/server.ts
30+
---
31+
::
2432

2533
The full NodeJS example server can be found [here](https://github.com/feathersdev/examples/tree/main/server/nodejs).
2634

@@ -32,10 +40,18 @@ npm create feathersdev@latest server --platform express --app-id "<your-app-id>"
3240

3341
For Express we can add our own `authenticate` middleware to authenticate incoming requests in `src/authenticate.ts`:
3442

35-
<<< @/examples/server/express/src/authenticate.ts{js}
43+
::CodePreview
44+
---
45+
path: server/express/src/authenticate.ts
46+
---
47+
::
3648

3749
And then implement an Express application in `src/app.ts` like this:
3850

39-
<<< @/examples/server/express/src/app.ts{js}
51+
::CodePreview
52+
---
53+
path: server/express/src/app.ts
54+
---
55+
::
4056

4157
The full Express example server can be found [here](https://github.com/feathersdev/examples/tree/main/server/express).

0 commit comments

Comments
 (0)