Skip to content

Commit a885b35

Browse files
justin808justin808
committed
Refresh homepage design
1 parent 1e191ab commit a885b35

11 files changed

Lines changed: 506 additions & 212 deletions

File tree

‎app/views/layouts/application.html.erb‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<% content_for :body_content do %>
22
<%= react_component "NavigationBarApp" %>
33

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

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

2121
<%= append_stylesheet_pack_tag('stimulus-bundle') %>
2222
<%= append_javascript_pack_tag('stimulus-bundle') %>
@@ -26,7 +26,7 @@
2626

2727
<%= csrf_meta_tags %>
2828
</head>
29-
<body class="min-h-screen flex flex-col bg-sky-50 text-gray-700">
29+
<body class="min-h-screen flex flex-col bg-[#fffef9] text-slate-700 antialiased">
3030
<%= yield :body_content %>
3131
</body>
3232
</html>

‎app/views/pages/_header.html.erb‎

Lines changed: 61 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,63 @@
1-
<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">
2-
<p>Current Commit:
3-
<%= link_to git_commit_sha_short,
4-
"https://github.com/shakacode/react-webpack-rails-tutorial/commit/#{git_commit_sha}",
5-
id: "git-commit-sha" %>
6-
</p>
1+
<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">
2+
<div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
3+
<div class="max-w-3xl">
4+
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-sky-700">Project Snapshot</p>
5+
<h2 class="mt-3 text-4xl text-slate-900">Useful links, deployment context, and support paths without the old wall of bullets.</h2>
6+
<p class="mt-3 text-base leading-7 text-slate-600">
7+
This tutorial is more than a starter app. It also documents the real project context around deployment, docs, videos, and support.
8+
</p>
9+
</div>
710

8-
<ul>
9-
<li>
10-
<%= link_to "Can ShakaCode Help You?",
11-
"https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9" %>
12-
We're actively seeking new projects with React, React-Native, or Ruby on Rails
13-
</li>
14-
<li>
15-
This project is deployed on
16-
<%= link_to "Control Plane",
17-
"https://shakacode.controlplane.com" %>
18-
using
19-
<%= link_to "Heroku to Control Plane",
20-
"https://github.com/shakacode/heroku-to-control-plane" %>
21-
Ruby gem.
22-
</li>
23-
<li>
24-
See the
25-
<%= link_to "github.com/shakacode/react-webpack-rails-tutorial/README.md",
26-
"https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/README.md" %>
27-
for details of how this example site was built.
28-
</li>
29-
<li>
30-
Read <%= link_to "Documentation for React on Rails",
31-
"https://shakacode.gitbooks.io/react-on-rails/content/" %> and
32-
<%= link_to "The React on Rails Doctrine",
33-
"https://www.shakacode.com/blog/the-react-on-rails-doctrine" %>.
34-
</li>
35-
<li>
36-
Watch the <%= link_to "React On Rails Tutorial Series",
37-
"https://www.youtube.com/playlist?list=PL5VAKH-U1M6dj84BApfUtvBjvF-0-JfEU" %>.
38-
</li>
39-
<li>
40-
<%= link_to "ShakaCode", "http://www.shakacode.com"%>
41-
is doing support for React on Rails, including a private Slack channel, source code reviews, and pair programming sessions.
42-
<b><%= link_to "Click here", "http://www.shakacode.com/work/index.html" %></b> for more information.
43-
</li>
44-
</ul>
45-
</div>
11+
<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">
12+
<span class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Current Commit</span>
13+
<%= link_to git_commit_sha_short,
14+
"https://github.com/shakacode/react-webpack-rails-tutorial/commit/#{git_commit_sha}",
15+
id: "git-commit-sha",
16+
class: "font-semibold text-slate-900 hover:text-sky-700" %>
17+
</div>
18+
</div>
4619

47-
<hr class="border-t my-8"/>
20+
<div class="mt-8 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
21+
<%= link_to "https://www.shakacode.com/work/index.html",
22+
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 %>
23+
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Services</p>
24+
<p class="mt-3 text-xl font-semibold text-slate-900">Can ShakaCode help you?</p>
25+
<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>
26+
<% end %>
27+
28+
<%= link_to "https://shakacode.controlplane.com",
29+
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 %>
30+
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Deployment</p>
31+
<p class="mt-3 text-xl font-semibold text-slate-900">Control Plane Example</p>
32+
<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>
33+
<% end %>
34+
35+
<%= link_to "https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/README.md",
36+
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 %>
37+
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Build Notes</p>
38+
<p class="mt-3 text-xl font-semibold text-slate-900">Repository README</p>
39+
<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>
40+
<% end %>
41+
42+
<%= link_to "https://shakacode.gitbooks.io/react-on-rails/content/",
43+
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 %>
44+
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Docs</p>
45+
<p class="mt-3 text-xl font-semibold text-slate-900">React on Rails Documentation</p>
46+
<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>
47+
<% end %>
48+
49+
<%= link_to "https://www.shakacode.com/blog/the-react-on-rails-doctrine",
50+
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 %>
51+
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Doctrine</p>
52+
<p class="mt-3 text-xl font-semibold text-slate-900">React on Rails Philosophy</p>
53+
<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>
54+
<% end %>
55+
56+
<%= link_to "https://www.youtube.com/playlist?list=PL5VAKH-U1M6dj84BApfUtvBjvF-0-JfEU",
57+
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 %>
58+
<p class="text-sm font-semibold uppercase tracking-[0.22em] text-sky-700">Video</p>
59+
<p class="mt-3 text-xl font-semibold text-slate-900">Tutorial Series</p>
60+
<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>
61+
<% end %>
62+
</div>
63+
</section>

‎app/views/pages/index.html.erb‎

Lines changed: 136 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,136 @@
1-
<h2>
2-
<%= link_to "Open Source example",
3-
"https://github.com/shakacode/react-webpack-rails-tutorial/" %> of using the <%= link_to "React on Rails gem", "https://github.com/shakacode/react_on_rails" %>
4-
and the <%= link_to "Shakapacker gem", "https://github.com/shakacode/shakapacker" %>
5-
</h2>
6-
<h3>Using <%= link_to "Ruby on Rails", "http://rubyonrails.org/" %> with
7-
<%= link_to "Action Cable", "http://guides.rubyonrails.org/action_cable_overview.html" %> +
8-
<%= link_to "React", "http://facebook.github.io/react/" %> (Server rendering) +
9-
<%= link_to "Redux", "https://github.com/reactjs/redux" %> +
10-
<%= link_to "React Router", "https://github.com/reactjs/react-router" %>
11-
</h3>
12-
<%= render "header" %>
13-
14-
<!--Note, pre-rendering set in /config/initializers/react_on_rails.rb -->
15-
<%= react_component('RouterApp', id: "RouterApp-react-component-0") %>
1+
<div class="relative isolate overflow-hidden py-10 sm:py-14">
2+
<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>
3+
4+
<section class="mx-auto max-w-6xl">
5+
<div class="grid gap-8 lg:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)] lg:items-start">
6+
<div class="space-y-6">
7+
<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">
8+
React on Rails Tutorial
9+
</span>
10+
11+
<div class="space-y-4">
12+
<h1 class="max-w-4xl text-5xl leading-[1.05] text-slate-900 sm:text-6xl">
13+
Server-rendered React, Rails, and real-time updates in one sharper demo.
14+
</h1>
15+
<p class="max-w-3xl text-lg leading-8 text-slate-600 sm:text-xl">
16+
This open source example shows how the
17+
<%= link_to "React on Rails gem", "https://github.com/shakacode/react_on_rails" %>
18+
and
19+
<%= link_to "Shakapacker gem", "https://github.com/shakacode/shakapacker" %>
20+
fit into a Rails application without forcing the whole stack into a single-page app mold.
21+
</p>
22+
</div>
23+
24+
<div class="flex flex-wrap gap-3">
25+
<%= link_to "Browse the Source",
26+
"https://github.com/shakacode/react-webpack-rails-tutorial/",
27+
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" %>
28+
<%= link_to "Read the README",
29+
"https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/README.md",
30+
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" %>
31+
<%= link_to "See the React-only Route",
32+
no_router_path,
33+
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" %>
34+
</div>
35+
36+
<div class="grid gap-4 pt-2 sm:grid-cols-2 xl:grid-cols-4">
37+
<div class="rounded-3xl border border-white/80 bg-white/70 p-5 shadow-sm shadow-sky-100 backdrop-blur">
38+
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700">Rendering</p>
39+
<p class="mt-3 text-lg font-semibold text-slate-900">SSR + Hydration</p>
40+
<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>
41+
</div>
42+
<div class="rounded-3xl border border-white/80 bg-white/70 p-5 shadow-sm shadow-sky-100 backdrop-blur">
43+
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700">Real Time</p>
44+
<p class="mt-3 text-lg font-semibold text-slate-900">Action Cable</p>
45+
<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>
46+
</div>
47+
<div class="rounded-3xl border border-white/80 bg-white/70 p-5 shadow-sm shadow-sky-100 backdrop-blur">
48+
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700">Tooling</p>
49+
<p class="mt-3 text-lg font-semibold text-slate-900">Webpack or Rspack</p>
50+
<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>
51+
</div>
52+
<div class="rounded-3xl border border-white/80 bg-white/70 p-5 shadow-sm shadow-sky-100 backdrop-blur">
53+
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700">Comparison</p>
54+
<p class="mt-3 text-lg font-semibold text-slate-900">Multiple UI Paths</p>
55+
<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>
56+
</div>
57+
</div>
58+
</div>
59+
60+
<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">
61+
<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>
62+
<div class="relative space-y-6">
63+
<div>
64+
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-sky-300">Stack at a Glance</p>
65+
<h2 class="mt-3 text-3xl text-white">One codebase, several integration styles.</h2>
66+
<p class="mt-3 text-sm leading-7 text-slate-300">
67+
Use this page as the front door, then jump into the specific route that demonstrates the architecture choice you care about.
68+
</p>
69+
</div>
70+
71+
<div class="grid gap-3">
72+
<%= link_to simple_path,
73+
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 %>
74+
<p class="text-sm font-semibold text-white">Simple React</p>
75+
<p class="mt-1 text-sm text-slate-300">Minimal client-side React mount with no server-rendered HTML.</p>
76+
<% end %>
77+
78+
<%= link_to stimulus_path,
79+
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 %>
80+
<p class="text-sm font-semibold text-white">Stimulus Demo</p>
81+
<p class="mt-1 text-sm text-slate-300">See Hotwire-style behavior next to the React examples inside the same Rails app.</p>
82+
<% end %>
83+
84+
<%= link_to rescript_path,
85+
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 %>
86+
<p class="text-sm font-semibold text-white">ReScript Variant</p>
87+
<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>
88+
<% end %>
89+
</div>
90+
91+
<div class="rounded-2xl border border-white/10 bg-white/5 p-4">
92+
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-300">Core Stack</p>
93+
<ul class="mt-3 space-y-2 text-sm leading-6 text-slate-300">
94+
<li>Ruby on Rails for routing, controllers, persistence, and the demo shell.</li>
95+
<li>React + Redux for the interactive comment workflow.</li>
96+
<li>React Router for server rendering and route transitions.</li>
97+
<li>Tailwind CSS for utility-first styling layered on the Rails app.</li>
98+
</ul>
99+
</div>
100+
</div>
101+
</aside>
102+
</div>
103+
</section>
104+
105+
<div class="mx-auto mt-12 max-w-6xl">
106+
<%= render "header" %>
107+
</div>
108+
109+
<section class="mx-auto mt-12 max-w-6xl">
110+
<div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
111+
<div class="max-w-3xl">
112+
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-sky-700">Live Playground</p>
113+
<h2 class="mt-3 text-4xl text-slate-900">Try the server-rendered React Router demo directly on the home page.</h2>
114+
<p class="mt-3 text-base leading-7 text-slate-600">
115+
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.
116+
</p>
117+
</div>
118+
119+
<div class="flex flex-wrap gap-3">
120+
<%= link_to "Classic Rails",
121+
comments_path,
122+
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" %>
123+
<%= link_to "No Router React",
124+
no_router_path,
125+
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" %>
126+
</div>
127+
</div>
128+
129+
<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">
130+
<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>
131+
<div class="relative">
132+
<%= react_component('RouterApp', id: "RouterApp-react-component-0") %>
133+
</div>
134+
</div>
135+
</section>
136+
</div>

‎client/app/assets/styles/application.css‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,42 @@
33
src: url('../../assets/fonts/OpenSans-Light.ttf') format('truetype');
44
}
55

6+
@font-face {
7+
font-family: 'OpenSans-Bold';
8+
src: url('../../assets/fonts/OpenSans-Bold.ttf') format('truetype');
9+
}
10+
611
@import 'tailwindcss/base';
712
@import 'tailwindcss/components';
813
@import 'tailwindcss/utilities';
914

15+
body {
16+
font-family: 'OpenSans-Light', 'Avenir Next', 'Segoe UI', sans-serif;
17+
background-image:
18+
radial-gradient(circle at top left, rgba(14, 165, 233, 0.12), transparent 38%),
19+
radial-gradient(circle at 85% 15%, rgba(245, 158, 11, 0.12), transparent 28%),
20+
linear-gradient(180deg, #fffef9 0%, #eff6ff 50%, #fffaf0 100%);
21+
}
22+
23+
h1,
24+
h2 {
25+
font-family: 'OpenSans-Bold', 'Avenir Next', 'Segoe UI', sans-serif;
26+
@apply tracking-tight;
27+
}
28+
1029
h2 {
1130
@apply text-3xl font-medium mt-5 mb-2.5;
1231
}
1332

1433
h3 {
15-
@apply text-xl font-medium mt-5 mb-2.5
34+
font-family: 'OpenSans-Bold', 'Avenir Next', 'Segoe UI', sans-serif;
35+
@apply text-xl font-medium mt-5 mb-2.5;
1636
}
1737

1838
a {
19-
@apply text-sky-700
39+
@apply text-sky-700 transition-colors duration-200;
40+
}
41+
42+
::selection {
43+
@apply bg-amber-200 text-slate-900;
2044
}

0 commit comments

Comments
 (0)