Skip to content

[codex] Refresh homepage design #709

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
justin808 merged 11 commits into from
Apr 4, 2026
Merged

[codex] Refresh homepage design #709

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a885b35
Refresh homepage design
justin808 Apr 2, 2026
0fc52be
Fix homepage CI failures
justin808 Apr 2, 2026
e31a1c5
Promote review app commands on homepage
justin808 Apr 2, 2026
6b617bd
Fix homepage CI regressions
justin808 Apr 2, 2026
ff4faca
Simplify homepage content density
justin808 Apr 3, 2026
6bd9a95
Modernize footer branding
justin808 Apr 3, 2026
bb7056b
Trim legacy footer copy
justin808 Apr 3, 2026
abc0837
Simplify react router demo
justin808 Apr 3, 2026
913c714
Address homepage review feedback
justin808 Apr 3, 2026
faa8363
Fix CSS quoting for lint CI
justin808 Apr 3, 2026
92e89e0
Fix final homepage review issues
justin808 Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions app/views/layouts/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<% content_for :body_content do %>
<%= react_component "NavigationBarApp" %>

<div class="container mx-auto px-4 flex-grow">
<div class="container mx-auto flex-grow px-4 sm:px-6 lg:px-8">
<%= yield %>
</div>

Expand All @@ -16,7 +16,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RailsReactTutorial</title>
<title>React Webpack Rails Tutorial</title>

<%= append_stylesheet_pack_tag('stimulus-bundle') %>
<%= append_javascript_pack_tag('stimulus-bundle') %>
Expand All @@ -26,7 +26,7 @@

<%= csrf_meta_tags %>
</head>
<body class="min-h-screen flex flex-col bg-sky-50 text-gray-700">
<body class="min-h-screen flex flex-col bg-[#fffef9] text-slate-700 antialiased">
<%= yield :body_content %>
</body>
</html>
106 changes: 61 additions & 45 deletions app/views/pages/_header.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,63 @@
<div class="prose max-w-full prose-a:text-sky-700 prose-li:my-0 prose-code:text-rose-600 prose-code:bg-yellow-100 prose-headings:text-gray-700">
<p>Current Commit:
<%= link_to git_commit_sha_short,
"https://github.com/shakacode/react-webpack-rails-tutorial/commit/#{git_commit_sha}",
id: "git-commit-sha" %>
</p>
<section class="overflow-hidden rounded-[2rem] border border-white/80 bg-white/80 p-6 shadow-[0_24px_70px_-48px_rgba(15,23,42,0.45)] backdrop-blur sm:p-8">
<div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
<div class="max-w-3xl">
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-sky-700">Project Snapshot</p>
<h2 class="mt-3 text-4xl text-slate-900">Useful links, deployment context, and support paths without the old wall of bullets.</h2>
<p class="mt-3 text-base leading-7 text-slate-600">
This tutorial is more than a starter app. It also documents the real project context around deployment, docs, videos, and support.
</p>
</div>

<ul>
<li>
<%= link_to "Can ShakaCode Help You?",
"https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9" %>
We're actively seeking new projects with React, React-Native, or Ruby on Rails
</li>
<li>
This project is deployed on
<%= link_to "Control Plane",
"https://shakacode.controlplane.com" %>
using
<%= link_to "Heroku to Control Plane",
"https://github.com/shakacode/heroku-to-control-plane" %>
Ruby gem.
</li>
<li>
See the
<%= link_to "github.com/shakacode/react-webpack-rails-tutorial/README.md",
"https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/README.md" %>
for details of how this example site was built.
</li>
<li>
Read <%= link_to "Documentation for React on Rails",
"https://shakacode.gitbooks.io/react-on-rails/content/" %> and
<%= link_to "The React on Rails Doctrine",
"https://www.shakacode.com/blog/the-react-on-rails-doctrine" %>.
</li>
<li>
Watch the <%= link_to "React On Rails Tutorial Series",
"https://www.youtube.com/playlist?list=PL5VAKH-U1M6dj84BApfUtvBjvF-0-JfEU" %>.
</li>
<li>
<%= link_to "ShakaCode", "http://www.shakacode.com"%>
is doing support for React on Rails, including a private Slack channel, source code reviews, and pair programming sessions.
<b><%= link_to "Click here", "http://www.shakacode.com/work/index.html" %></b> for more information.
</li>
</ul>
</div>
<div class="inline-flex items-center gap-3 self-start rounded-full border border-slate-200 bg-slate-50 px-4 py-2 text-sm text-slate-600 shadow-sm shadow-slate-200">
<span class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Current Commit</span>
<%= link_to git_commit_sha_short,
"https://github.com/shakacode/react-webpack-rails-tutorial/commit/#{git_commit_sha}",
id: "git-commit-sha",
class: "font-semibold text-slate-900 hover:text-sky-700" %>
</div>
</div>

<hr class="border-t my-8"/>
<div class="mt-8 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
<%= link_to "https://www.shakacode.com/work/index.html",
class: "group rounded-3xl border border-slate-200 bg-slate-50/80 p-5 transition hover:-translate-y-0.5 hover:border-sky-300 hover:bg-white hover:no-underline hover:shadow-lg hover:shadow-sky-100" do %>
Comment thread
justin808 marked this conversation as resolved.
Outdated
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Services</p>
<p class="mt-3 text-xl font-semibold text-slate-900">Can ShakaCode help you?</p>
<p class="mt-2 text-sm leading-6 text-slate-600">ShakaCode is actively seeking new React, React Native, and Rails projects, with support ranging from code reviews to pairing.</p>
<% end %>

<%= link_to "https://shakacode.controlplane.com",
class: "group rounded-3xl border border-slate-200 bg-slate-50/80 p-5 transition hover:-translate-y-0.5 hover:border-sky-300 hover:bg-white hover:no-underline hover:shadow-lg hover:shadow-sky-100" do %>
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Deployment</p>
<p class="mt-3 text-xl font-semibold text-slate-900">Control Plane Example</p>
<p class="mt-2 text-sm leading-6 text-slate-600">This tutorial is deployed on Control Plane and ties into the Heroku-to-Control Plane migration tooling.</p>
<% end %>
Comment thread
cursor[bot] marked this conversation as resolved.

<%= link_to "https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/README.md",
class: "group rounded-3xl border border-slate-200 bg-slate-50/80 p-5 transition hover:-translate-y-0.5 hover:border-sky-300 hover:bg-white hover:no-underline hover:shadow-lg hover:shadow-sky-100" do %>
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Build Notes</p>
<p class="mt-3 text-xl font-semibold text-slate-900">Repository README</p>
<p class="mt-2 text-sm leading-6 text-slate-600">See how the app is wired together, how to boot it locally, and how the React on Rails integration is structured.</p>
<% end %>

<%= link_to "https://shakacode.gitbooks.io/react-on-rails/content/",
class: "group rounded-3xl border border-slate-200 bg-slate-50/80 p-5 transition hover:-translate-y-0.5 hover:border-sky-300 hover:bg-white hover:no-underline hover:shadow-lg hover:shadow-sky-100" do %>
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Docs</p>
<p class="mt-3 text-xl font-semibold text-slate-900">React on Rails Documentation</p>
<p class="mt-2 text-sm leading-6 text-slate-600">Dive into the official guides when you want more than the demo can reasonably show in one screen.</p>
<% end %>

<%= link_to "https://www.shakacode.com/blog/the-react-on-rails-doctrine",
class: "group rounded-3xl border border-slate-200 bg-slate-50/80 p-5 transition hover:-translate-y-0.5 hover:border-sky-300 hover:bg-white hover:no-underline hover:shadow-lg hover:shadow-sky-100" do %>
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Doctrine</p>
<p class="mt-3 text-xl font-semibold text-slate-900">React on Rails Philosophy</p>
<p class="mt-2 text-sm leading-6 text-slate-600">Read the architectural rationale behind mixing Rails and React without surrendering the strengths of either.</p>
<% end %>

<%= link_to "https://www.youtube.com/playlist?list=PL5VAKH-U1M6dj84BApfUtvBjvF-0-JfEU",
class: "group rounded-3xl border border-slate-200 bg-slate-50/80 p-5 transition hover:-translate-y-0.5 hover:border-sky-300 hover:bg-white hover:no-underline hover:shadow-lg hover:shadow-sky-100" do %>
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Video</p>
<p class="mt-3 text-xl font-semibold text-slate-900">Tutorial Series</p>
<p class="mt-2 text-sm leading-6 text-slate-600">Watch the original walkthrough when you want the historical context and the step-by-step build process.</p>
<% end %>
</div>
</section>
151 changes: 136 additions & 15 deletions app/views/pages/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,136 @@
<h2>
<%= link_to "Open Source example",
"https://github.com/shakacode/react-webpack-rails-tutorial/" %> of using the <%= link_to "React on Rails gem", "https://github.com/shakacode/react_on_rails" %>
and the <%= link_to "Shakapacker gem", "https://github.com/shakacode/shakapacker" %>
</h2>
<h3>Using <%= link_to "Ruby on Rails", "http://rubyonrails.org/" %> with
<%= link_to "Action Cable", "http://guides.rubyonrails.org/action_cable_overview.html" %> +
<%= link_to "React", "http://facebook.github.io/react/" %> (Server rendering) +
<%= link_to "Redux", "https://github.com/reactjs/redux" %> +
<%= link_to "React Router", "https://github.com/reactjs/react-router" %>
</h3>
<%= render "header" %>

<!--Note, pre-rendering set in /config/initializers/react_on_rails.rb -->
<%= react_component('RouterApp', id: "RouterApp-react-component-0") %>
<div class="relative isolate overflow-hidden py-10 sm:py-14">
<div class="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[32rem] bg-[radial-gradient(circle_at_top_left,_rgba(14,165,233,0.18),_transparent_42%),radial-gradient(circle_at_80%_20%,_rgba(245,158,11,0.14),_transparent_32%)]"></div>

<section class="mx-auto max-w-6xl">
<div class="grid gap-8 lg:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)] lg:items-start">
<div class="space-y-6">
<span class="inline-flex items-center rounded-full border border-sky-200 bg-white/80 px-4 py-2 text-xs font-semibold uppercase tracking-[0.28em] text-sky-700 shadow-sm shadow-sky-100 backdrop-blur">
React on Rails Tutorial
</span>

<div class="space-y-4">
<h1 class="max-w-4xl text-5xl leading-[1.05] text-slate-900 sm:text-6xl">
Server-rendered React, Rails, and real-time updates in one sharper demo.
</h1>
<p class="max-w-3xl text-lg leading-8 text-slate-600 sm:text-xl">
This open source example shows how the
<%= link_to "React on Rails gem", "https://github.com/shakacode/react_on_rails" %>
and
<%= link_to "Shakapacker gem", "https://github.com/shakacode/shakapacker" %>
fit into a Rails application without forcing the whole stack into a single-page app mold.
</p>
</div>

<div class="flex flex-wrap gap-3">
<%= link_to "Browse the Source",
"https://github.com/shakacode/react-webpack-rails-tutorial/",
class: "inline-flex items-center rounded-full bg-slate-900 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-slate-200 transition hover:bg-slate-800" %>
<%= link_to "Read the README",
"https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/README.md",
class: "inline-flex items-center rounded-full border border-slate-300 bg-white/80 px-5 py-3 text-sm font-semibold text-slate-700 shadow-sm shadow-slate-200 transition hover:border-sky-300 hover:text-sky-700" %>
<%= link_to "See the React-only Route",
no_router_path,
class: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-5 py-3 text-sm font-semibold text-amber-900 shadow-sm shadow-amber-100 transition hover:border-amber-300 hover:bg-amber-100" %>
</div>

<div class="grid gap-4 pt-2 sm:grid-cols-2 xl:grid-cols-4">
<div class="rounded-3xl border border-white/80 bg-white/70 p-5 shadow-sm shadow-sky-100 backdrop-blur">
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700">Rendering</p>
<p class="mt-3 text-lg font-semibold text-slate-900">SSR + Hydration</p>
<p class="mt-2 text-sm leading-6 text-slate-600">React content renders on the server first, then hydrates cleanly on the client.</p>
</div>
<div class="rounded-3xl border border-white/80 bg-white/70 p-5 shadow-sm shadow-sky-100 backdrop-blur">
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700">Real Time</p>
<p class="mt-3 text-lg font-semibold text-slate-900">Action Cable</p>
<p class="mt-2 text-sm leading-6 text-slate-600">New comments stream in live, so the sample feels like an app instead of static documentation.</p>
</div>
<div class="rounded-3xl border border-white/80 bg-white/70 p-5 shadow-sm shadow-sky-100 backdrop-blur">
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700">Tooling</p>
<p class="mt-3 text-lg font-semibold text-slate-900">Webpack or Rspack</p>
<p class="mt-2 text-sm leading-6 text-slate-600">The tutorial shows a modern Shakapacker setup that can switch bundlers without reworking the app.</p>
</div>
<div class="rounded-3xl border border-white/80 bg-white/70 p-5 shadow-sm shadow-sky-100 backdrop-blur">
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700">Comparison</p>
<p class="mt-3 text-lg font-semibold text-slate-900">Multiple UI Paths</p>
<p class="mt-2 text-sm leading-6 text-slate-600">Compare React Router, plain React, Stimulus, classic Rails, and ReScript in the same project.</p>
</div>
</div>
</div>

<aside class="relative overflow-hidden rounded-[2rem] border border-slate-800/5 bg-slate-900 px-6 py-7 text-slate-100 shadow-2xl shadow-sky-100">
<div class="pointer-events-none absolute inset-x-0 top-0 h-36 bg-[radial-gradient(circle_at_top,_rgba(125,211,252,0.35),_transparent_60%)]"></div>
<div class="relative space-y-6">
<div>
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-sky-300">Stack at a Glance</p>
<h2 class="mt-3 text-3xl text-white">One codebase, several integration styles.</h2>
<p class="mt-3 text-sm leading-7 text-slate-300">
Use this page as the front door, then jump into the specific route that demonstrates the architecture choice you care about.
</p>
</div>

<div class="grid gap-3">
<%= link_to simple_path,
class: "group rounded-2xl border border-white/10 bg-white/5 p-4 transition hover:border-sky-300/40 hover:bg-white/10 hover:no-underline" do %>
<p class="text-sm font-semibold text-white">Simple React</p>
<p class="mt-1 text-sm text-slate-300">Minimal client-side React mount with no server-rendered HTML.</p>
<% end %>

<%= link_to stimulus_path,
class: "group rounded-2xl border border-white/10 bg-white/5 p-4 transition hover:border-sky-300/40 hover:bg-white/10 hover:no-underline" do %>
<p class="text-sm font-semibold text-white">Stimulus Demo</p>
<p class="mt-1 text-sm text-slate-300">See Hotwire-style behavior next to the React examples inside the same Rails app.</p>
<% end %>

<%= link_to rescript_path,
class: "group rounded-2xl border border-white/10 bg-white/5 p-4 transition hover:border-sky-300/40 hover:bg-white/10 hover:no-underline" do %>
<p class="text-sm font-semibold text-white">ReScript Variant</p>
<p class="mt-1 text-sm text-slate-300">Compare a typed front-end implementation that still runs through the same Rails integration story.</p>
<% end %>
</div>

<div class="rounded-2xl border border-white/10 bg-white/5 p-4">
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-300">Core Stack</p>
<ul class="mt-3 space-y-2 text-sm leading-6 text-slate-300">
<li>Ruby on Rails for routing, controllers, persistence, and the demo shell.</li>
<li>React + Redux for the interactive comment workflow.</li>
<li>React Router for server rendering and route transitions.</li>
<li>Tailwind CSS for utility-first styling layered on the Rails app.</li>
</ul>
</div>
</div>
</aside>
</div>
</section>

<div class="mx-auto mt-12 max-w-6xl">
<%= render "header" %>
</div>

<section class="mx-auto mt-12 max-w-6xl">
<div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
<div class="max-w-3xl">
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-sky-700">Live Playground</p>
<h2 class="mt-3 text-4xl text-slate-900">Try the server-rendered React Router demo directly on the home page.</h2>
<p class="mt-3 text-base leading-7 text-slate-600">
The block below is the actual interactive sample. It renders on the server, hydrates on the client, and keeps comment updates flowing through Action Cable.
</p>
</div>

<div class="flex flex-wrap gap-3">
<%= link_to "Classic Rails",
comments_path,
class: "inline-flex items-center rounded-full border border-slate-300 bg-white/80 px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm shadow-slate-200 transition hover:border-sky-300 hover:text-sky-700" %>
<%= link_to "No Router React",
no_router_path,
class: "inline-flex items-center rounded-full border border-slate-300 bg-white/80 px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm shadow-slate-200 transition hover:border-sky-300 hover:text-sky-700" %>
</div>
</div>

<div class="relative mt-8 overflow-hidden rounded-[2rem] border border-white/80 bg-white/80 p-6 shadow-[0_32px_80px_-48px_rgba(15,23,42,0.5)] backdrop-blur sm:p-8 lg:p-10">
<div class="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-sky-50 via-white/60 to-transparent"></div>
<div class="relative">
<%= react_component('RouterApp', id: "RouterApp-react-component-0") %>
Copy link
Copy Markdown

@greptile-apps greptile-apps Bot Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Hardcoded id on react_component may cause duplicate-id issues

Passing id: "RouterApp-react-component-0" pins the element id that React on Rails would otherwise auto-generate. If a second RouterApp is ever added to the same page (or if this partial is reused), duplicate ids will break client-side hydration and violate HTML uniqueness. Unless there is an external dependency on this specific id, let React on Rails generate it automatically:

Suggested change
<%= react_component('RouterApp', id: "RouterApp-react-component-0") %>
<%= react_component('RouterApp') %>

</div>
</div>
</section>
</div>
37 changes: 30 additions & 7 deletions client/app/assets/styles/application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,43 @@
@font-face {
font-family: 'OpenSans-Light';
src: url('../../assets/fonts/OpenSans-Light.ttf') format('truetype');
font-family: "OpenSans-Light";
src: url("../../assets/fonts/OpenSans-Light.ttf") format("truetype");
}

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@font-face {
font-family: "OpenSans-Bold";
src: url("../../assets/fonts/OpenSans-Bold.ttf") format("truetype");
}

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

body {
background-image: radial-gradient(circle at top left, rgba(14, 165, 233, 0.12), transparent 38%),
radial-gradient(circle at 85% 15%, rgba(245, 158, 11, 0.12), transparent 28%),
linear-gradient(180deg, rgb(255 254 249) 0%, rgb(239 246 255) 50%, rgb(255 250 240) 100%);
font-family: "OpenSans-Light", "Avenir Next", "Segoe UI", sans-serif;
}

h1,
h2 {
font-family: "OpenSans-Bold", "Avenir Next", "Segoe UI", sans-serif;
@apply tracking-tight;
}

h2 {
@apply text-3xl font-medium mt-5 mb-2.5;
}

h3 {
@apply text-xl font-medium mt-5 mb-2.5
font-family: "OpenSans-Bold", "Avenir Next", "Segoe UI", sans-serif;
@apply text-xl font-medium mt-5 mb-2.5;
Comment thread
cursor[bot] marked this conversation as resolved.
Outdated
}

a {
@apply text-sky-700
@apply text-sky-700 transition-colors duration-200;
}

::selection {
@apply bg-amber-200 text-slate-900;
}
Loading
Loading