Skip to content

Commit

Permalink
Initialized docs
Browse files Browse the repository at this point in the history
  • Loading branch information
treagod committed Aug 28, 2024
1 parent e896090 commit d487aa3
Show file tree
Hide file tree
Showing 7 changed files with 411 additions and 0 deletions.
Empty file added docs/.nojekyll
Empty file.
147 changes: 147 additions & 0 deletions docs/README.md
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>
```
4 changes: 4 additions & 0 deletions docs/_navbar.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
* [Overview](/)
* [Installation](installation.md)
* [Usage](usage.md)
* [Changelog](changelog.md)
45 changes: 45 additions & 0 deletions docs/changelog.md
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.
28 changes: 28 additions & 0 deletions docs/index.html
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>
45 changes: 45 additions & 0 deletions docs/installation.md
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).
Loading

0 comments on commit d487aa3

Please sign in to comment.