diff --git a/docs/latest/advanced/app-wrapper.md b/docs/latest/advanced/app-wrapper.md index 752a31c2c4d..d4e501b0d06 100644 --- a/docs/latest/advanced/app-wrapper.md +++ b/docs/latest/advanced/app-wrapper.md @@ -47,7 +47,7 @@ export default define.page(({ Component, url }) => { When building your app with `new App()` instead of file-based routing: -```tsx main.tsx +```tsx function AppWrapper({ Component }) { return ( diff --git a/docs/latest/advanced/error-handling.md b/docs/latest/advanced/error-handling.md index 6056d7fd45e..f32df961c30 100644 --- a/docs/latest/advanced/error-handling.md +++ b/docs/latest/advanced/error-handling.md @@ -21,6 +21,8 @@ Fresh supports two kind of error pages: To add an error page use [`app.onError()`](/docs/concepts/app#onerror). ```ts main.ts +import { App } from "fresh"; + const app = new App() .onError("*", (ctx) => { console.log(`Error: ${ctx.error}`); @@ -36,7 +38,7 @@ will be invoked. You can also nest error pages: -```ts main.ts +```ts const app = new App() // Top level error page .onError("*", (ctx) => { @@ -56,7 +58,7 @@ Not found errors are often treated differently than generic errors. You can both treat them with the `.onError()` way, but by adding a specific `.notFound()` handler, Fresh ensures that every 404 error will invoke this callback. -```ts main.ts +```ts const app = new App() // Top level error page .notFound((ctx) => { @@ -103,7 +105,7 @@ async function authMiddleware(ctx) { When an `HttpError` is thrown, Fresh catches it and invokes the error handler. You can check the status code in your error handler: -```ts main.ts +```ts import { HttpError } from "fresh"; app.onError("*", (ctx) => { diff --git a/docs/latest/advanced/layouts.md b/docs/latest/advanced/layouts.md index ab194b9c160..cae5e2d2ad7 100644 --- a/docs/latest/advanced/layouts.md +++ b/docs/latest/advanced/layouts.md @@ -12,7 +12,7 @@ HTML structure and only the content changes, a layout is a neat way to abstract this. Layouts only ever render on the server. The passed `Component` value represents the children of this component. -```tsx main.tsx +```tsx function PageLayout({ Component }) { return (
@@ -42,7 +42,7 @@ You can register multiple layouts for different paths. Layouts are inherited from parent paths - a layout at `"*"` applies to all routes, and more specific layouts are added on top: -```ts main.ts +```ts const app = new App() .layout("*", MainLayout) // Applied to all routes .layout("/admin/*", AdminLayout) // Added on top for /admin/* routes @@ -69,6 +69,6 @@ const app = new App() Ignore the [app wrapper](/docs/concepts/app) component: -```ts main.ts +```ts app.layout("/foo/bar", MyComponent, { skipAppWrapper: true }); ``` diff --git a/docs/latest/concepts/app.md b/docs/latest/concepts/app.md index 51f403143ea..215fed0dcaa 100644 --- a/docs/latest/concepts/app.md +++ b/docs/latest/concepts/app.md @@ -40,7 +40,7 @@ mounted alongside other apps. The base path is available in handlers via All items are applied from top to bottom. This means that when you defined a middleware _after_ a `.get()` handler, it won't be included. -```ts main.ts +```ts const app = new App() .use((ctx) => { // Will be called for all middlewares diff --git a/docs/latest/concepts/routing.md b/docs/latest/concepts/routing.md index 74571110c90..4a7c3468ad4 100644 --- a/docs/latest/concepts/routing.md +++ b/docs/latest/concepts/routing.md @@ -7,6 +7,8 @@ Routing defines which middlewares and routes should respond to a particular request. ```ts main.ts +import { App } from "fresh"; + const app = new App() .get("/", () => new Response("hello")) // Responds to: GET / .get("/other", () => new Response("other")) // Responds to: GET /other diff --git a/docs/latest/concepts/static-files.md b/docs/latest/concepts/static-files.md index e47ae154751..71f93b84588 100644 --- a/docs/latest/concepts/static-files.md +++ b/docs/latest/concepts/static-files.md @@ -52,7 +52,7 @@ once in your build output. By default, Fresh adds caching headers for the `src` and `srcset` attributes on `` and `` tags. -```tsx main.tsx +```ts // Caching headers will be automatically added app.get("/user", (ctx) => ctx.render()); ``` @@ -60,7 +60,7 @@ app.get("/user", (ctx) => ctx.render()); You can always opt out of this behaviour per tag, by adding the `data-fresh-disable-lock` attribute. -```tsx main.tsx +```ts // Opt-out of automatic caching headers app.get( "/user", diff --git a/docs/latest/introduction/index.md b/docs/latest/introduction/index.md index 0e833398320..81c7f6cbcbe 100644 --- a/docs/latest/introduction/index.md +++ b/docs/latest/introduction/index.md @@ -9,7 +9,7 @@ Fresh is a small, fast and extensible full stack web framework built on Web Standards. It's designed for building high-quality, performant, and personalized web applications. -```tsx main.tsx +```tsx main.ts import { App } from "fresh"; const app = new App()