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 3 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>
117 changes: 70 additions & 47 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,70 @@
<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>

<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>

<hr class="border-t my-8"/>
<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>

<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>

<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 %>
<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://github.com/shakacode/control-plane-flow",
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">Deployment</p>
<p class="mt-3 text-xl font-semibold text-slate-900">control-plane-flow Library</p>
<p class="mt-2 text-sm leading-6 text-slate-600">See the library behind the review-app and deployment flow, including the slash-command-driven Control Plane workflow used around this project.</p>
<% end %>

<%= link_to "#review-app-commands",
Comment thread
justin808 marked this conversation as resolved.
Outdated
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">Review Apps</p>
<p class="mt-3 text-xl font-semibold text-slate-900">Quick PR Commands</p>
<p class="mt-2 text-sm leading-6 text-slate-600">Promote the fast path for preview environments with <code>/deploy-review-app</code>, <code>/delete-review-app</code>, and <code>/help</code>.</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>
Loading
Loading