rails new my_rails_app --skip-javascript
cd my_rails_app/

# Thêm vào nhóm chính
gem "tailwindcss-rails"
gem "importmap-rails"

# Thêm vào nhóm phát triển và kiểm thử
group :development, :test do
  gem "foreman"
end

bundle install
rails tailwindcss:install
rails importmap:install
bin/importmap pin [email protected]
rails generate controller Home index
rails generate model Post title:string
rails db:migrate db:seed
rails generate controller Posts

import "htmx.org"

document.addEventListener('DOMContentLoaded', () => {
  const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  document.body.addEventListener('htmx:configRequest', (event) => {
    event.detail.headers['X-CSRF-Token'] = token;
  });
});

pin "htmx.org", to: "https://unpkg.com/[email protected]/dist/htmx.min.js"

root "home#index"
resources :posts, only: [:create]

Post.create!(title: "First Post")
Post.create!(title: "Hello, SQLite!")
Post.create!(title: "HTMX + Rails 8 + SQLite Demo")

rails db:seed

class HomeController < ApplicationController
  def index
    @posts = Post.all
  end
end

class PostsController < ApplicationController
  def create
    @post = Post.create!(title: params[:title])
    render partial: "posts/post", locals: { post: @post }
  end
end

<div class="text-center">
  <h1 class="text-4xl font-bold text-blue-500 mb-4">SQLite3 + HTMX Demo</h1>
  <form hx-post="/posts" hx-target="#post-list" hx-swap="beforeend" class="mb-4">
    <input type="text" name="title" placeholder="New Post" class="p-2 border rounded">
    <button class="px-4 py-2 bg-blue-500 text-white rounded">Add Post</button>
  </form>
  <ul id="post-list" class="mt-4 text-lg text-gray-700">
    <% @posts.each do |post| %>
      <%= render partial: "posts/post", locals: { post: post } %>
    <% end %>
  </ul>
</div>

<li class="p-2 border-b border-gray-300"><%= post.title %></li>

bin/dev