Skip to content

Commit

Permalink
docs: added embedded example for linking css file (#299)
Browse files Browse the repository at this point in the history
* add example for how to add a static file to a template

* Update docs/0.4.x/en-US/fundamentals/static-content.md

* Update docs/0.4.x/en-US/fundamentals/static-content.md

---------

Co-authored-by: Sam Brew <arctic.hen@pm.me>
  • Loading branch information
ezesundayeze and arctic-hen7 authored Aug 28, 2023
1 parent ba1608a commit 1d5f859
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions docs/0.4.x/en-US/fundamentals/static-content.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,18 @@

As nice as it is to write everything in Rust, you will, in web development, undoubtedly have to have some static content eventually. This is usually in the form of stylesheets, or images, or even binaries that your users can download, but there will be something. This is where Perseus' static content system comes into play. The simplest way to use this is through a `static/` directory in the root of your project, which Perseus will serve at `/.perseus/static`. For example, if you create `static/index.css`, that will be available in a `<link rel="stylesheet" />` tag at `href=".perseus/static/index.css"`. *Notice the lack of a leading forward slash!* This is because it's unnecessary: Perseus implants a `<base />` tag that makes it so, and this makes your app flexible to being served at relative paths (like `framesurge.sh/perseus`).

Here's an example of how you might link a CSS file (in `static/index.css` in your project):

```rust
#[engine_only_fn]
fn head(cx: Scope) -> View<SsrNode> {
view! { cx,
title { "Page Title" }
link(rel="stylesheet", href=".perseus/static/index.css") {}
}
}
```

Sometimes, however, you'll want static content from outside `static/`, which is where *static aliases* come into play. These allow you to link in arbitrary files hosted at arbitrary paths, which will be served unquestioningly by Perseus. You can declare static aliases on your `PerseusApp` like so:

```rust
Expand Down

0 comments on commit 1d5f859

Please sign in to comment.