Views & Templates

<!-- Basic variable output -->
<h1><%= title %></h1>
<p>Hello, <%= name %>!</p>

<!-- Accessing hash data -->
<p>User: <%= user["name"] %></p>

<!-- Expressions -->
<p>Total: $<%= price * quantity %></p>

<!-- Conditionals -->
<% if user_logged_in %>
    <span>Welcome back!</span>
<% else %>
    <a href="/login">Login</a>
<% end %>

<!-- Loops -->
<ul>
    <% for post in posts %>
        <li><%= post["title"] %></li>
    <% end %>
</ul>

<!-- Get current timestamp -->
<%= datetime_now() %>

<!-- Format a timestamp with strftime -->
<%= datetime_format(post["created_at"], "%Y-%m-%d") %>
<%= datetime_format(post["created_at"], "%B %d, %Y") %>
<%= datetime_format(datetime_now(), "%A, %B %d, %Y at %H:%M") %>

<!-- Parse a date string to timestamp -->
<%= datetime_parse("2024-01-15") %>

<!-- Add/subtract time -->
<%= datetime_add_days(datetime_now(), 7) %>   <!-- 7 days from now -->
<%= datetime_add_days(datetime_now(), -30) %> <!-- 30 days ago -->
<%= datetime_add_hours(datetime_now(), 2) %>  <!-- 2 hours from now -->

<!-- Human-readable relative time -->
<%= time_ago(post["created_at"]) %>  <!-- "5 minutes ago", "2 hours ago", etc. -->
<%= time_ago(post["updated_at"]) %>

<!-- Difference in seconds -->
<%= datetime_diff(start_time, end_time) %>

<!-- Localized date formatting (uses current I18n locale) -->
<%= l(post["created_at"]) %>                 <!-- short format: "01/15/2024" -->
<%= l(post["created_at"], "long") %>         <!-- "January 15, 2024" -->
<%= l(post["created_at"], "full") %>         <!-- "Monday, January 15, 2024" -->
<%= l(post["created_at"], "time") %>         <!-- "10:30 AM" -->
<%= l(post["created_at"], "datetime") %>     <!-- "01/15/2024 10:30 AM" -->
<%= l(post["created_at"], "%Y-%m-%d") %>     <!-- custom strftime -->

<!-- ISO format -->
<%= datetime_format(ts, "%Y-%m-%d") %>              <!-- 2024-01-15 -->
<%= datetime_format(ts, "%Y-%m-%dT%H:%M:%S") %>    <!-- 2024-01-15T14:30:45 -->

<!-- Human-readable -->
<%= datetime_format(ts, "%B %d, %Y") %>            <!-- January 15, 2024 -->
<%= datetime_format(ts, "%A, %B %e, %Y") %>        <!-- Monday, January 15, 2024 -->

<!-- Time formats -->
<%= datetime_format(ts, "%H:%M") %>                <!-- 14:30 (24h) -->
<%= datetime_format(ts, "%I:%M %p") %>             <!-- 02:30 PM (12h) -->

<!-- Combined -->
<%= datetime_format(ts, "%b %d at %I:%M %p") %>    <!-- Jan 15 at 02:30 PM -->

<!-- Get current locale -->
<%= locale() %>  <!-- "en", "fr", etc. -->

<!-- Set locale (usually done in controller) -->
<% set_locale("fr") %>

<!-- Translate a key -->
<%= t("hello") %>

<!-- Translate with fallback -->
<%= t("greeting", "Welcome!") %>

<!-- HTML escaping (prevent XSS) -->
<%= html_escape(user_input) %>
<%= h(user_input) %>  <!-- shorthand -->

<!-- Strip HTML tags -->
<%= strip_html(post["content"]) %>

<!-- Sanitize HTML (remove dangerous tags/attributes) -->
<%= sanitize_html(user_content) %>

<!-- Unescape HTML entities -->
<%= html_unescape("&lt;p&gt;") %>

<!-- Substring (useful for truncating) -->
<%= substring(post["content"], 0, 100) %>...

<!-- Generate a range for loops -->
<% for i in range(1, 5) %>
    <p>Item <%= i %></p>
<% end %>

<!-- Asset paths with cache busting -->
<link href="<%= public_path("css/app.css") %>" rel="stylesheet">
<script src="<%= public_path("js/app.js") %>"></script>
<!-- Output: /css/app.css?v=a1b2c3... -->

<!-- String concatenation -->
<%= "Hello, " + name + "!" %>
<%= "Total: $" + price * quantity %>

<!-- Truncate text with ellipsis -->
<%= truncate(post["content"], 100) %>
<!-- "This is a very long article that..." -->

<%= truncate(title, 50, " [more]") %>
<!-- "This is a long title that gets cut [more]" -->

<!-- Capitalize first letter -->
<%= capitalize("hello world") %>
<!-- "Hello world" -->

<%= capitalize(user["status"]) %>
<!-- "Active" (if status was "active") -->

<!-- Pluralize based on count -->
<%= pluralize(1, "item") %>
<!-- "1 item" -->

<%= pluralize(5, "item") %>
<!-- "5 items" -->

<%= pluralize(count, "person", "people") %>
<!-- "1 person" or "3 people" -->

<!-- Format numbers with thousands separator (auto-detects from locale) -->
<%= number_with_delimiter(1234567) %>
<!-- en: "1,234,567" | fr: "1 234 567" | de: "1.234.567" -->

<!-- Override delimiter manually -->
<%= number_with_delimiter(1234567, "'") %>
<!-- "1'234'567" -->

<!-- Format as currency (locale-aware: symbol, delimiter, position) -->
<%= currency(1000) %>
<!-- en: "$1,000" | fr: "1 000 €" | de: "1.000 €" | ja: "¥1,000" -->

<%= currency(order["total"]) %>

<!-- Override symbol manually -->
<%= currency(1234, "£") %>
<!-- "£1,234" -->

<!-- Generate safe HTML links (XSS protected) -->
<%= link_to("Home", "/") %>
<!-- <a href="/">Home</a> -->

<%= link_to("View Profile", "/users/" + user["id"]) %>
<!-- <a href="/users/123">View Profile</a> -->

<%= link_to("Edit", "/posts/" + post["id"] + "/edit", "btn btn-primary") %>
<!-- <a href="/posts/456/edit" class="btn btn-primary">Edit</a> -->

<!-- Convert text to URL-friendly slug -->
<%= slugify("Hello World!") %>
<!-- "hello-world" -->

<%= slugify("My Blog Post Title") %>
<!-- "my-blog-post-title" -->

<%= slugify("Café & Restaurant") %>
<!-- "cafe-restaurant" -->

<!-- Use in URLs -->
<a href="/posts/<%= slugify(post["title"]) %>">
    <%= post["title"] %>
</a>

<article class="post">
    <h1><%= post["title"] %></h1>

    <div class="meta">
        <!-- Localized date (respects I18n.set_locale) -->
        <span>Published: <%= l(post["created_at"], "long") %></span>
        <span>(<%= time_ago(post["created_at"]) %>)</span>
    </div>

    <% if post["updated_at"] != post["created_at"] %>
        <p class="updated">Last updated: <%= time_ago(post["updated_at"]) %></p>
    <% end %>

    <div class="content">
        <%= truncate(post["content"], 500) %>
    </div>

    <div class="stats">
        <span><%= number_with_delimiter(post["views"]) %> views</span>
        <span><%= pluralize(post["comment_count"], "comment") %></span>
    </div>

    <div class="actions">
        <%= link_to("Edit", "/posts/" + post["id"] + "/edit", "btn btn-secondary") %>
        <%= link_to("Back to Posts", "/posts", "btn btn-link") %>
    </div>

    <footer>
        <p>&copy; <%= datetime_format(datetime_now(), "%Y") %> My Blog</p>
    </footer>
</article>

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <nav>...</nav>
    
    <main>
        <%= yield %>
    </main>
</body>
</html>

<!-- Render _user_card.html.erb -->
<%= render_partial("partials/user_card", { "user": user }) %>

fn show(req) {
    let post = Post.find(req.params["id"]);
    
    return render("posts/show", {
        "title": post["title"],
        "post": post
    });
}