Skip to content

Commit

Permalink
hey man the examples are up
Browse files Browse the repository at this point in the history
  • Loading branch information
ryan-haskell committed Apr 27, 2021
1 parent f757b10 commit 8553d14
Show file tree
Hide file tree
Showing 11 changed files with 509 additions and 60 deletions.
17 changes: 12 additions & 5 deletions docs/public/content/examples.md
Original file line number Diff line number Diff line change
@@ -1,31 +1,38 @@
# Examples

Prefer to learn by example? Wonderful! The source code for all of the examples on this site can be found in the Github repo's [examples](https://github.com/ryannhg/elm-spa/tree/main/examples) folder.
Prefer to learn by example? Wonderful! The source code for all of the examples on this site can be found in the GitHub repo's [examples](https://github.com/ryannhg/elm-spa/tree/main/examples) folder.

### Hello, world!

Get an introduction to the framework with a simple app.

[![Hello, world!](/content/images/01-hello-world.png)](/examples/01-hello-world)
[![Example 1 screenshot](/content/images/01-hello-world.png)](/examples/01-hello-world)

### Pages

Learn how pages and URL routing work together.

[![Hello, world!](/content/images/02-pages.png)](/examples/02-pages)
[![Example 2 screenshot](/content/images/02-pages.png)](/examples/02-pages)

### Local storage

Use ports and local storage to persist data on refresh.

[![Hello, world!](/content/images/03-storage.png)](/examples/03-storage)
[![Example 3 screenshot](/content/images/03-storage.png)](/examples/03-storage)

### User authentication

Explore the elm-spa's user authentication API.

[![Hello, world!](/content/images/04-authentication.png)](/examples/04-authentication)
[![Example 4 screenshot](/content/images/04-authentication.png)](/examples/04-authentication)

## Realworld example

Implements the [Realworld app project](), inspired by Richard Feldman's "elm-spa-example" project.

[![Realworld app screenshot](/content/images/realworld.png)](https://realworld.elm-spa.dev)

Source code: [GitHub](https://github.com/ryannhg/elm-spa-realworld)

## More examples

Expand Down
6 changes: 6 additions & 0 deletions docs/public/content/examples/01-hello-world.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Hello, world!

__Source code__: [GitHub](https://github.com/ryannhg/elm-spa/tree/main/examples/01-hello-world)

Welcome to __elm-spa__! This guide is a breakdown of the simplest project you can make: the "Hello, world!" example.

### Installation
Expand Down Expand Up @@ -134,3 +136,7 @@ elm-spa build

This command will also minify your `/dist/elm.js` file so it's production ready.


---

__Next up:__ [Pages](./02-pages)
7 changes: 6 additions & 1 deletion docs/public/content/examples/02-pages.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
# Pages & routing

__Source code__: [GitHub](https://github.com/ryannhg/elm-spa/tree/main/examples/01-pages)

This next guide will show you how pages, routing, and the `elm-spa add` command work together to automatically handle URLs in your __elm-spa__ application.

> You can see the source code in the [examples](https://github.com/ryannhg/elm-spa/tree/next/examples/02-pages) folder on GitHub.

### The setup

Expand Down Expand Up @@ -202,3 +203,7 @@ After creating `style.css`, we can import the file in our `public/index.html` en

Using the `<link>` tag as shown above (with the leading slash!) imports our CSS file. All files in the `public` folder are available at the root of our web application. That means a file stored at `public/images/dog.png` would be at `http://localhost:1234/images/dog`, without including `public` in the URL at all.


---

__Next up:__ [Storage](./03-storage)
Loading

0 comments on commit 8553d14

Please sign in to comment.