-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #29 from armanbilge/feature/docs
Create docs
- Loading branch information
Showing
8 changed files
with
348 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
# http4s-dom | ||
|
||
Use http4s in your browser with Scala.js! | ||
Features: | ||
|
||
* A [`Client` implementation](https://www.javadoc.io/doc/org.http4s/http4s-dom_sjs1_2.13/latest/org/http4s/dom/FetchClientBuilder.html) backed by [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) | ||
* A [`Service Worker` integration](https://www.javadoc.io/doc/org.http4s/http4s-dom_sjs1_2.13/latest/org/http4s/dom/ServiceWorker$.html) to install your `HttpRoutes` as a [`FetchEvent` handler](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/onfetch) | ||
* Encoders for [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File), [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) and [`ReadableStream`](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) | ||
|
||
Notably, http4s-dom can also be used to create _serverless_ apps with [Cloudflare Workers](https://workers.cloudflare.com) which have adopted the same APIs used in the browser! | ||
|
||
## Installation | ||
|
||
[![http4s-dom Scala version support](https://index.scala-lang.org/http4s/http4s-dom/http4s-dom/latest-by-scala-version.svg?targetType=Js)](https://index.scala-lang.org/http4s/http4s-dom/http4s-dom) | ||
|
||
```scala | ||
// Supports http4s 0.23.x and scala-js-dom 2.x | ||
libraryDependencies += "org.http4s" %%% "http4s-dom" % "0.2.0" | ||
|
||
// Or, for compatibility with scala-js-dom 1.x | ||
// libraryDependencies += "org.http4s" %%% "http4s-dom" % "0.1.0" | ||
|
||
// recommended, brings in the latest client module | ||
libraryDependencies += "org.http4s" %%% "http4s-client" % "0.23.6" | ||
|
||
// optional, for JSON support | ||
libraryDependencies += "org.http4s" %%% "http4s-circe" % "0.23.6" | ||
libraryDependencies += "io.circe" %%% "circe-generic" % "0.15.0-M1" | ||
``` | ||
|
||
## Example | ||
|
||
```scala mdoc:js | ||
<div style="text-align:center"> | ||
<h3 style="padding:10px"> | ||
I'm bored. | ||
</h3> | ||
<button id="button">Fetch Activity</button> | ||
<p style="padding:10px" id="activity"></p> | ||
</div> | ||
--- | ||
import cats.effect._ | ||
import cats.effect.unsafe.implicits._ | ||
import io.circe.generic.auto._ | ||
import org.http4s.circe.CirceEntityCodec._ | ||
import org.http4s.dom._ | ||
import org.scalajs.dom._ | ||
|
||
val client = FetchClientBuilder[IO].create | ||
|
||
val activityElement = document.getElementById("activity") | ||
|
||
case class Activity(activity: String) | ||
|
||
val fetchActivity: IO[Unit] = for { | ||
_ <- IO(activityElement.innerHTML = "<i>fetching...</i>") | ||
activity <- client.expect[Activity]("https://www.boredapi.com/api/activity") | ||
_ <- IO(activityElement.innerHTML = activity.activity) | ||
} yield () | ||
|
||
val button = document.getElementById("button").asInstanceOf[html.Button] | ||
|
||
button.onclick = _ => fetchActivity.unsafeRunAndForget() | ||
``` | ||
|
||
## Learn more | ||
|
||
The [`FetchClientBuilder`](https://www.javadoc.io/doc/org.http4s/http4s-dom_sjs1_2.13/latest/org/http4s/dom/FetchClientBuilder.html) creates a standard http4s [`Client`](https://http4s.org/v0.23/api/org/http4s/client/client) that is described in the [http4s documentation](https://http4s.org/v0.23/client/). | ||
Similarly, the [`ServiceWorker`](https://www.javadoc.io/doc/org.http4s/http4s-dom_sjs1_2.13/latest/org/http4s/dom/ServiceWorker$.html) `FetchEvent` listener integrates directly with [http4s services](https://http4s.org/v0.23/service/). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,105 @@ | ||
<!DOCTYPE html> | ||
<html lang="${?laika.site.metadata.language}"> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta name="generator" content="Laika 0.18.0 + Helium Theme" /> | ||
<title>${cursor.currentDocument.title}</title> | ||
@:for(laika.site.metadata.authors) | ||
<meta name="author" content="${_}"/> | ||
@:@ | ||
@:for(laika.site.metadata.description) | ||
<meta name="description" content="${_}"/> | ||
@:@ | ||
@:for(helium.favIcons) | ||
<link rel="icon" @:attribute(sizes, _.sizes) @:attribute(type, _.type) href="@:path(_.target)"/> | ||
@:@ | ||
@:for(helium.webFonts) | ||
<link rel="stylesheet" href="${_}"> | ||
@:@ | ||
@:linkCSS { paths = ${helium.site.includeCSS} } | ||
@:linkJS { paths = ${helium.site.includeJS} } | ||
@:heliumInitVersions | ||
@:heliumInitPreview(container) | ||
<script> /* for avoiding page load transitions */ </script> | ||
</head> | ||
|
||
<body> | ||
|
||
<header id="top-bar"> | ||
|
||
<!-- visibility trickery, for layout to match http4s.org --> | ||
<div class="row" style="visibility:hidden"> | ||
<a id="nav-icon"> | ||
@:icon(navigationMenu) | ||
</a> | ||
<div id="version-menu-container"> | ||
<a id="version-menu-toggle" class="text-link drop-down-toggle" href="#"> | ||
Version 1.0 | ||
</a> | ||
<nav id="version-menu"> | ||
<ul id="version-list" class="nav-list"> | ||
</ul> | ||
</nav> | ||
</div> | ||
</div> | ||
|
||
${?helium.topBar.home} | ||
|
||
${?helium.topBar.links} | ||
|
||
</header> | ||
|
||
<nav id="sidebar"> | ||
|
||
<!-- custom start - adjust left navigation - add extra section --> | ||
@:navigationTree { | ||
entries = [ | ||
{ target = "/README.md", excludeSections = true } | ||
{ target = "/", excludeRoot = true, excludeSections = true, depth = 2 } | ||
] | ||
} | ||
|
||
<ul class="nav-list"> | ||
<li class="level1 nav-header">Related Projects</li> | ||
<li class="level2"><a href="https://http4s.org/">http4s</a></li> | ||
<li class="level2"><a href="https://github.com/http4s/blaze">blaze</a></li> | ||
<li class="level2"><a href="https://jdk-http-client.http4s.org/">http4s-jdk-http-client</a></li> | ||
<li class="level2"><a href="https://github.com/http4s/rho">rho</a></li> | ||
</ul> | ||
<!-- custom end --> | ||
|
||
</nav> | ||
|
||
<div id="container"> | ||
|
||
<nav id="page-nav"> | ||
<p class="header"><a href="#">${cursor.currentDocument.title}</a></p> | ||
|
||
@:navigationTree { | ||
entries = [ | ||
{ target = "#", excludeRoot = true, depth = 2 } | ||
] | ||
} | ||
|
||
<p class="footer">@:for(helium.markupEditLinks)<a href="${_.baseURL}${cursor.currentDocument.path}">${_.icon}${_.text}</a>@:@</p> | ||
</nav> | ||
|
||
<main class="content"> | ||
|
||
${cursor.currentDocument.content} | ||
|
||
<!-- custom start - integrate footer, a feature not yet available in Helium --> | ||
<hr style="margin-top: 30px"/> | ||
<footer style="font-size: 90%; text-align: center"> | ||
http4s is a <a href="https://typelevel.org/">Typelevel</a> Project distributed under the <a href="https://github.com/http4s/http4s/LICENSE">Apache 2 License</a>. | ||
</footer> | ||
<!-- custom end --> | ||
|
||
</main> | ||
|
||
</div> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
header img { | ||
height: 28px; | ||
width: auto; | ||
margin-top: 6px; | ||
} | ||
|
||
#sidebar li.nav-header { | ||
margin-top: -20px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters