Finish layout and routes

khin-alu · khin-alu · commit 04be326317f4 · 2025-09-18T21:43:00.000+07:00
diff --git a/.gitignore b/.gitignore
@@ -34,4 +34,8 @@
 /config/master.key
 
 # Ignore db test files.
-db/test.*
+db/test.*
+/app/assets/builds/*
+!/app/assets/builds/.keep
+
+/node_modules
diff --git a/Gemfile b/Gemfile
@@ -4,6 +4,7 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 ruby "3.4.3"
 
 gem "rails", "8.0.2"
+gem "cssbundling-rails", "1.4.3"
 gem "propshaft", "1.2.1"
 gem "importmap-rails", "2.1.0"
 gem "turbo-rails", "2.0.14"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -96,6 +96,8 @@ GEM
     concurrent-ruby (1.3.5)
     connection_pool (2.5.4)
     crass (1.0.6)
+    cssbundling-rails (1.4.3)
+      railties (>= 6.0.0)
     date (3.4.1)
     debug (1.11.0)
       irb (~> 1.10)
@@ -347,6 +349,7 @@ PLATFORMS
 DEPENDENCIES
   bootsnap (= 1.18.6)
   capybara (= 3.40.0)
+  cssbundling-rails (= 1.4.3)
   debug (= 1.11.0)
   guard (= 2.19.1)
   guard-minitest (= 2.4.6)
diff --git a/Procfile.dev b/Procfile.dev
@@ -0,0 +1,2 @@
+web: env RUBY_DEBUG_OPEN=true bin/rails server
+css: yarn watch:css
diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep
diff --git a/app/assets/images/rails.svg b/app/assets/images/rails.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 400 140" enable-background="new 0 0 400 140" xml:space="preserve">
+<style>.a{fill:#c00;}</style>
+<title>rails-logo</title>
+<g>
+	<path class="a" d="M346.6,121.5v18.1c0,0,23.4,0,32.7,0c6.7,0,18.2-4.9,18.6-18.6c0-0.6,0-6.5,0-7c0-11.7-9.6-18.6-18.6-18.6
+		c-4.2,0-16.3,0-16.3,0V87l32.3,0V68.8c0,0-22.2,0-31,0c-8,0-18.7,6.6-18.7,18.9c0,1.2,0,5.2,0,6.3c0,12.3,10.6,18.6,18.7,18.6
+		c22.5,0.1-5.4,0,15.4,0c0,8.8,0,8.8,0,8.8"/>
+	<path class="a" d="M171.4,117.1c0,0,17.5-1.5,17.5-24.1s-21.2-24.7-21.2-24.7h-38.2v71.3h19.2v-17.2l16.6,17.2h28.4
+		L171.4,117.1z M164,102.5h-15.3V86.2h15.4c0,0,4.3,1.6,4.3,8.1S164,102.5,164,102.5z"/>
+	<path class="a" d="M236.3,68.8c-4.9,0-5.6,0-19.5,0c-13.9,0-18.6,12.6-18.6,18.6c0,13,0,52.2,0,52.2h19.5v-12.5H236v12.5h18.9
+		c0,0,0-38.5,0-52.2C254.9,72.2,241.1,68.8,236.3,68.8z M236,106.9h-18.4V89.6c0,0,0-3.9,6.1-3.9c5.6,0,1,0,6.7,0
+		c5.4,0,5.5,3.9,5.5,3.9V106.9z"/>
+	<rect x="263.8" y="68.8" class="a" width="20.3" height="70.8"/>
+	<polygon class="a" points="312.6,121.3 312.6,68.8 292.4,68.8 292.4,121.3 292.4,139.6 312.6,139.6 339.9,139.6 339.9,121.3 	
+		"/>
+	<path class="a" d="M9,139.6h79c0,0-15.1-68.9,34.9-96.8c10.9-5.3,45.6-25.1,102.4,16.9c1.8-1.5,3.5-2.7,3.5-2.7
+		S176.8,5.1,118.9,10.9C89.8,13.5,54,40,33,75S9,139.6,9,139.6z"/>
+	<path class="a" d="M9,139.6h79c0,0-15.1-68.9,34.9-96.8c10.9-5.3,45.6-25.1,102.4,16.9c1.8-1.5,3.5-2.7,3.5-2.7
+		S176.8,5.1,118.9,10.9C89.8,13.5,54,40,33,75S9,139.6,9,139.6z"/>
+	<path class="a" d="M9,139.6h79c0,0-15.1-68.9,34.9-96.8c10.9-5.3,45.6-25.1,102.4,16.9c1.8-1.5,3.5-2.7,3.5-2.7
+		S176.8,5.1,118.9,10.9C89.7,13.5,53.9,40,32.9,75S9,139.6,9,139.6z"/>
+	<path class="a" d="M173.6,16.5l0.4-6.7c-0.9-0.5-3.4-1.7-9.7-3.5l-0.4,6.6C167.2,14,170.4,15.2,173.6,16.5z"/>
+	<path class="a" d="M164.1,37.7l-0.4,6.3c3.3,0.1,6.6,0.5,9.9,1.2l0.4-6.2C170.6,38.3,167.3,37.9,164.1,37.7z"/>
+	<path class="a" d="M127.1,6.5c0.3,0,0.7,0,1,0l-2-6.1c-3.1,0-6.3,0.2-9.6,0.6l1.9,5.9C121.3,6.6,124.2,6.5,127.1,6.5z"/>
+	<path class="a" d="M131.9,43.3l2.3,6.9c2.9-1.4,5.8-2.6,8.7-3.5l-2.2-6.6C137.3,41.1,134.4,42.2,131.9,43.3z"/>
+	<path class="a" d="M86.5,17L82,10.1c-2.5,1.3-5.1,2.7-7.8,4.3l4.6,7C81.4,19.8,83.9,18.3,86.5,17z"/>
+	<path class="a" d="M107,62l4.8,7.2c1.7-2.5,3.7-4.8,5.9-7.1l-4.5-6.8C110.9,57.4,108.8,59.7,107,62z"/>
+	<path class="a" d="M92.5,94.2l8.1,6.4c0.4-3.9,1.1-7.8,2.1-11.7l-7.2-5.7C94.2,86.9,93.3,90.6,92.5,94.2z"/>
+	<path class="a" d="M48.7,46.7l-7.1-6.2c-2.6,2.5-5.1,5-7.4,7.5l7.7,6.6C44,51.9,46.3,49.2,48.7,46.7z"/>
+	<path class="a" d="M18.5,91.4L7,87.2c-1.9,4.3-4,9.3-5,12l11.5,4.2C14.8,100,16.9,95.1,18.5,91.4z"/>
+	<path class="a" d="M91,119.6c0.2,5.3,0.7,9.6,1.2,12.6l12,4.3c-0.9-3.9-1.8-8.3-2.4-13L91,119.6z"/>
+</g>
+</svg>
diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
@@ -0,0 +1,92 @@
+@import "bootstrap/scss/bootstrap";
+@import "bootstrap-icons/font/bootstrap-icons";
+
+/* mixins, variables, etc. */
+$gray: gray;
+$gray-light: #777;
+$gray-medium-light: #eaeaea;
+$gray-darker: #555;
+/* universal */
+
+body > div {
+  padding-top: 30px;
+}
+
+section {
+  overflow: auto;
+}
+textarea {
+  resize: vertical;
+}
+.center {
+  text-align: center;
+  h1 {
+    margin-bottom: 10px;
+  }
+}
+/* typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1;
+}
+h1 {
+  font-size: 3em;
+  letter-spacing: -2px;
+  margin-bottom: 30px;
+  text-align: center;
+}
+h2 {
+  font-size: 1.2em;
+  letter-spacing: -1px;
+  margin-bottom: 30px;
+  text-align: center;
+  font-weight: normal;
+  color: $gray-light;
+}
+p {
+  font-size: 1.1em;
+  line-height: 1.7em;
+}
+/* header */
+#logo {
+  float: left;
+  margin-right: 10px;
+  font-size: 1.7em;
+  color: white;
+  text-transform: uppercase;
+  letter-spacing: -1px;
+  padding-top: 9px;
+  font-weight: bold;
+  &:hover {
+    color: white;
+    text-decoration: none;
+  }
+}
+/* footer */
+footer {
+  margin-top: 45px;
+  padding-top: 5px;
+  border-top: 1px solid $gray-medium-light;
+  color: $gray-light;
+  a {
+    color: $gray;
+    &:hover {
+      color: $gray-darker;
+    }
+  }
+  small {
+    float: left;
+  }
+  ul {
+    float: right;
+    list-style: none;
+    li {
+      float: left;
+      margin-left: 15px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
diff --git a/app/controllers/static_pages_controller.rb b/app/controllers/static_pages_controller.rb
@@ -7,4 +7,8 @@ def help
 
   def about
   end
+
+  def contact
+    
+  end
 end
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
@@ -0,0 +1,4 @@
+class UsersController < ApplicationController
+  def new
+  end
+end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -1,2 +1,11 @@
 module ApplicationHelper
+  # Returns the full title on a per-page basis.
+  def full_title(page_title = "")
+    base_title = "Ruby on Rails Tutorial Sample App"
+    if page_title.empty?
+      base_title
+    else
+      "#{page_title} | #{base_title}"
+    end
+  end
 end
diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb
@@ -0,0 +1,2 @@
+module UsersHelper
+end
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
@@ -0,0 +1,13 @@
+<footer class="footer">
+    <small>
+        The <a href="https://www.railstutorial.org/">Ruby on Rails Tutorial</a>
+        by <a href="https://www.michaelhartl.com/">Michael Hartl</a>
+    </small>
+    <nav>
+        <ul>
+            <li><%= link_to "About", about_path %></li>
+            <li><%= link_to "Contact", contact_path %></li>
+            <li><a href="https://news.railstutorial.org/">News</a></li>
+        </ul>
+    </nav>
+</footer>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
@@ -0,0 +1,18 @@
+<header>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
+        <div class="container">
+            <%= link_to "sample app", '#', id: "logo", class: "navbar-brand" %>
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <%= link_to "Home", root_path, class: "nav-link" %>
+                </li>
+                <li class="nav-item">
+                    <%= link_to "Help", help_path, class: "nav-link" %>
+                </li>
+                <li class="nav-item">
+                    <%= link_to "Log in", "#", class: "nav-link" %>
+                </li>
+            </ul>
+        </div>
+    </nav>
+</header>
diff --git a/app/views/layouts/_shim.html.erb b/app/views/layouts/_shim.html.erb
@@ -0,0 +1,4 @@
+<!--[if lt IE 9]>
+    <SCRIPT SRC="//CDNJS.CLOUDFLARE.COM/AJAX/LIBS/HTML5SHIV/R29/HTML5.MIN.JS">
+    </SCRIPT>
+<![ENDIF]-->
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
+    <title><%= full_title(yield(:title)) %></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="mobile-web-app-capable" content="yes">
@@ -20,10 +20,15 @@
 
     <%# Includes all stylesheet files in app/assets/stylesheets %>
     <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
+
 </head>
 
 <body>
-    <%= yield %>
+    <%= render 'layouts/header' %>
+    <div class="container">
+        <%= yield %>
+        <%= render 'layouts/footer' %>
+    </div>
 </body>
 
 </html>
diff --git a/app/views/static_pages/contact.html.erb b/app/views/static_pages/contact.html.erb
@@ -0,0 +1,6 @@
+<% provide(:title, 'Contact') %>
+<h1>Contact</h1>
+<p>
+    Contact the Ruby on Rails Tutorial about the sample app at the
+    <a href="https://www.railstutorial.org/contact">contact page</a>.
+</p>
diff --git a/app/views/static_pages/home.html.erb b/app/views/static_pages/home.html.erb
@@ -1,7 +1,11 @@
-<% provide(:title, "Home") %>
-<h1>Sample App</h1>
-<p>
-    This is the home page for the
-    <a href="https://www.railstutorial.org/">Ruby on Rails Tutorial</a>
-    sample application.
-</p>
+<div class="center jumbotron">
+    <h1>Welcome to the Sample App</h1>
+    <h2>
+        This is the home page for the
+        <a href="https://www.railstutorial.org/">Ruby on Rails Tutorial</a>
+        sample application.
+    </h2>
+    <%= link_to "Sign up now!", signup_path, class: "btn btn-lg btn-primary" %>
+</div>
+<%= link_to image_tag("rails.svg", alt: "Rails logo", width: "200"),
+"https://rubyonrails.org/" %>
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
@@ -0,0 +1,3 @@
+<% provide(:title, 'Sign up') %>
+<h1>Sign up</h1>
+<p>This will be a signup page for new users.</p>
diff --git a/bin/dev b/bin/dev
@@ -1,2 +1,11 @@
-#!/usr/bin/env ruby
-exec "./bin/rails", "server", *ARGV
+#!/usr/bin/env sh
+
+if gem list --no-installed --exact --silent foreman; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
+exec foreman start -f Procfile.dev --env /dev/null "$@"
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -5,3 +5,4 @@
 
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
+Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
diff --git a/config/routes.rb b/config/routes.rb
@@ -1,9 +1,10 @@
 Rails.application.routes.draw do
   # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
-  get "static_pages/home"
-  get "static_pages/help"
-  get "static_pages/about"
-  root "application#hello"
+  root "static_pages#home"
+  get "/help", to: "static_pages#help"
+  get "/about", to: "static_pages#about"
+  get "/contact", to: "static_pages#contact"
+  get "/signup", to: "users#new"
   # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
   # Can be used by load balancers and uptime monitors to verify that the app is live.
   get "up" => "rails/health#show", as: :rails_health_check
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "app",
+  "private": "true",
+  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "autoprefixer": "^10.4.21",
+    "bootstrap": "^5.3.8",
+    "bootstrap-icons": "^1.13.1",
+    "nodemon": "^3.1.10",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "sass": "^1.92.1"
+  },
+  "scripts": {
+    "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
+    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
+    "build:css": "yarn build:css:compile && yarn build:css:prefix",
+    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
+  },
+  "browserslist": [
+    "defaults"
+  ]
+}
diff --git a/test/controllers/static_pages_controller_test.rb b/test/controllers/static_pages_controller_test.rb
diff --git a/test/controllers/users_controller_test.rb b/test/controllers/users_controller_test.rb
diff --git a/test/integration/site_layout_test.rb b/test/integration/site_layout_test.rb
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+web: env RUBY_DEBUG_OPEN=true bin/rails server`
	`2`	`+css: yarn watch:css`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +class UsersController < ApplicationController
 +  def new
 +  end
 +end