-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
411 additions
and
0 deletions.
There are no files selected for viewing
Empty file.
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,147 @@ | ||
<h1> | ||
<img src="./logo.svg" height="32" width="32" alt="Marten Turbo Logo"> | ||
<span>Marten Turbo</span> | ||
</h1> | ||
|
||
[![GitHub Release](https://img.shields.io/github/v/release/treagod/marten-turbo?style=flat)](https://github.com/treagod/marten-turbo/releases) | ||
[![Marten Turbo Specs](https://github.com/treagod/marten-turbo/actions/workflows/specs.yml/badge.svg)](https://github.com/treagod/marten-turbo/actions/workflows/specs.yml) | ||
[![QA](https://github.com/treagod/marten-turbo/actions/workflows/qa.yml/badge.svg)](https://github.com/treagod/marten-turbo/actions/workflows/qa.yml) | ||
|
||
Marten Turbo provides helpers to interact with Turbo applications using the <a href="https://martenframework.com/">Marten Framework</a>. | ||
|
||
## Installation | ||
|
||
Simply add the following entry to your project's `shard.yml`: | ||
|
||
```yaml | ||
dependencies: | ||
marten_turbo: | ||
github: treagod/marten-turbo | ||
``` | ||
And run `shards install` afterward. | ||
|
||
First, add the following requirement to your project's `src/project.cr` file: | ||
|
||
```crystal | ||
require "marten_turbo" | ||
``` | ||
|
||
Afterwards you can use the template helper `dom_id` and the turbo handlers. | ||
|
||
## Tags | ||
|
||
Marten Turbo introduces a new template tag `dom_id`, which supports the creation of turbo frame ids for Marten models | ||
|
||
```html | ||
{% for article in articles %} | ||
<div id="{% dom_id article %}"> <!-- Generates id artcle_1, artcle_2, etc. --> | ||
<!-- some content--> | ||
</div> | ||
{% endfor %} | ||
<form id="{% dom_id article %}" method="POST" action="/articles"> | ||
<!-- Assuming the article instance is new an id of new_article is generated --> | ||
<!-- Otherwise the id will be for example article_1 --> | ||
</form> | ||
``` | ||
|
||
Identifier will respect your namespace of the model. I.e. if you have an Article model in the app blogging the generated id will be `blogging_article_1`. | ||
|
||
Marten Turbo also provides a turbo stream tag helper | ||
|
||
```html | ||
{% turbo_stream 'append' "articles" do %} | ||
<div class="{% dom_id article %}"> | ||
{{ article.name }} | ||
</div> | ||
{% end_turbo_stream %} | ||
<!-- | ||
<turbo-stream action="append" target="articles"> | ||
<template> | ||
<div class="article_1"> | ||
My First Article | ||
</div> | ||
</template> | ||
</turbo-stream> | ||
--> | ||
<!-- or in one line --> | ||
{% turbo_stream 'append' "articles" template: "articles/article.html" %} | ||
<!-- | ||
<turbo-stream action="append" target="articles"> | ||
<template> | ||
content of "articles/article.html" | ||
</template> | ||
</turbo-stream> | ||
--> | ||
<!-- dom_id is automatically applied if targeting a record --> | ||
{% turbo_stream 'remove' article %} | ||
<!-- | ||
<turbo-stream action="remove" target="article_1"> | ||
</turbo-stream> | ||
--> | ||
``` | ||
|
||
|
||
## Handlers | ||
|
||
Marten Turbo provides an extension to the generic Marten handlers: | ||
|
||
__Record Creation__: To create a record, use | ||
|
||
```crystal | ||
class ArticleCreateHandler < MartenTurbo::Handlers::RecordCreate | ||
model Article | ||
schema ArticleSchema | ||
template_name "articles/create.html" | ||
turbo_stream_name "articles/create.turbo_stream.html" | ||
success_route_name "articles" | ||
end | ||
``` | ||
|
||
Notice how we use `MartenTurbo::Handlers::RecordCreate` instead of `Marten::Handlers::RecordCreate`. | ||
Also the `#turbo_stream_name` class method gives you the option to define a turbo stream template which is | ||
rendered instead of the normal template if a turbo request is made. | ||
|
||
__Record Update__: To update a record, use | ||
|
||
```crystal | ||
class ArticleUpdateHandler < MartenTurbo::Handlers::RecordUpdate | ||
model Article | ||
schema ArticleSchema | ||
template_name "articles/update.html" | ||
turbo_stream_name "articles/update.turbo_stream.html" | ||
success_route_name "articles" | ||
end | ||
``` | ||
|
||
__Record Deletion__: It's also possible to define a `turbo_stream` method | ||
|
||
```crystal | ||
class ArticleDeleteHandler < MartenTurbo::Handlers::RecordDelete | ||
model Article | ||
template_name "articles/delete.html" | ||
success_route_name "articles" | ||
def turbo_stream | ||
MartenTurbo::TurboStream.remove(record) | ||
end | ||
end | ||
``` | ||
|
||
## Turbo Native | ||
|
||
Marten Turbo lets you check if a request is from a Turbo Native Application. To check, just check the `request.turbo_native_app?` variable. | ||
|
||
A context producer also adds the `turbo_native?` variable to your templates to adjust your HTML. For the context producer you have to insert `MartenTurbo::Template::ContextProducer::TurboNative` <a href="https://martenframework.com/docs/templates/introduction#using-context-producers" target="_blank" rel="noopener noreferrer">into your context producer array</a>. | ||
|
||
You could add a custom class to your body if a turbo native app hits your application: | ||
|
||
```html | ||
<body {% if turbo_native? %}class="turbo-native"{% endif %}> | ||
… | ||
</body> | ||
``` |
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,4 @@ | ||
* [Overview](/) | ||
* [Installation](installation.md) | ||
* [Usage](usage.md) | ||
* [Changelog](changelog.md) |
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,45 @@ | ||
# Changelog | ||
|
||
All notable changes to this project will be documented in this file. | ||
|
||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/). | ||
|
||
## [Unreleased] | ||
|
||
### Added | ||
- `MartenTurbo::TurboStream.new` now accepts a block which can be used to create multiple stream tags. | ||
|
||
### Changed | ||
- `dom_id` is now more general and accepts `Marten::Model` or anything that responds to `#to_s`. | ||
|
||
### Deprecated | ||
- Renamed `create_dom_id` to `dom_id` to better fit the template tag naming convention. | ||
|
||
## [0.2.1] - 2024-06-17 | ||
|
||
### Fixed | ||
- `TurboStream` can now correctly create target IDs from a `Marten::Model`. | ||
|
||
## [0.2.0] - 2024-06-13 | ||
|
||
### Added | ||
- New `MartenTurbo::TurboStream` class: Introduced a new `TurboStream` class to streamline the creation of Turbo Streams. This class provides a convenient API to generate various Turbo Stream actions. | ||
- Turbo Handlers Enhancement: Turbo handlers now support a `turbo_stream` method. This method should return a string that will be rendered instead of a template. It takes precedence over the `turbo_stream_name` attribute, offering greater flexibility in handling Turbo Stream responses. | ||
- `MartenTurbo::Handlers::TurboFrame` concern: Added a new concern, TurboFrame, which can be included to track Turbo-Frame requests. This enhancement simplifies the detection and handling of Turbo Frame specific requests. This adds the `turbo_frame_request?` and `turbo_frame_request_id` methods to your handler. | ||
|
||
### Changed | ||
- `RecordDelete` Enhancement: The `RecordDelete` handler now forwards a `DELETE` request to post, improving consistency and reliability in handling delete operations. | ||
|
||
### Breaking Changes | ||
- End Tag Update: The end tag for Turbo Streams has been updated from `{% end_turbostream %}` to `{% end_turbo_stream %}`. This change aligns the syntax with Marten’s end tags, enhancing readability and consistency across the codebase. | ||
|
||
## [0.1.1] - 2024-03-20 | ||
|
||
### Changed | ||
- Updated shard name. | ||
|
||
## [0.1.0] - 2024-03-20 | ||
|
||
### Added | ||
- Initial release of Marten Turbo. | ||
- Handlers for record creation, updating, and deletion with Turbo Streams. |
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,28 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<title>Document</title> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | ||
<meta name="description" content="Description"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> | ||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css"> | ||
<style> | ||
:root { | ||
--theme-color: #eb6864; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div id="app"></div> | ||
<script> | ||
window.$docsify = { | ||
name: 'Marten Turbo', | ||
repo: 'https://github.com/treagod/marten-turbo', | ||
loadNavbar: true | ||
} | ||
</script> | ||
<!-- Docsify v4 --> | ||
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script> | ||
</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,45 @@ | ||
# Installation | ||
|
||
## Prerequisites | ||
|
||
Before you begin, ensure you have the following installed: | ||
|
||
- **Crystal** programming language: [Installation Guide](https://crystal-lang.org/install/) | ||
- **Marten Framework**: Make sure your project is set up with the Marten framework. | ||
|
||
## Installation Steps | ||
|
||
To install Marten Turbo in your project, follow these steps: | ||
|
||
1. **Update your `shard.yml` file:** | ||
|
||
Add the following dependency to your `shard.yml` file: | ||
|
||
```yaml | ||
dependencies: | ||
marten_turbo: | ||
github: treagod/marten-turbo | ||
``` | ||
2. **Install the dependencies:** | ||
After updating shard.yml, run the following command to install the dependencies: | ||
```bash | ||
shards install | ||
``` | ||
|
||
3. **Add Marten Turbo to your project:** | ||
|
||
In your main project file (usually src/project.cr), require the Marten Turbo library by adding the following line: | ||
|
||
```crystal | ||
require "marten_turbo" | ||
``` | ||
|
||
## Post-Installation | ||
|
||
Once the installation is complete, you can start using Marten Turbo’s features in your project. For example, you can now use the `dom_id` template helper and Turbo handlers in your Marten framework application. | ||
|
||
|
||
For detailed usage instructions, refer to the [Usage Guide](usage.md). |
Oops, something went wrong.