add bootstrap, mainpage

o-200 · Dec 15, 2024 · 90f9790 · 90f9790
1 parent 8c9a0f7
commit 90f9790
Show file tree

Hide file tree

Showing 22 changed files with 925 additions and 18 deletions.
diff --git a/.gitignore b/.gitignore
@@ -33,3 +33,8 @@
 
 # Ignore master key for decrypting credentials and more.
 /config/master.key
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
+
+/node_modules
diff --git a/Gemfile b/Gemfile
@@ -60,3 +60,5 @@ group :test do
   gem "capybara"
   gem "selenium-webdriver"
 end
+
+gem "cssbundling-rails", "~> 1.4"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -96,6 +96,8 @@ GEM
     concurrent-ruby (1.3.4)
     connection_pool (2.4.1)
     crass (1.0.6)
+    cssbundling-rails (1.4.1)
+      railties (>= 6.0.0)
     date (3.4.1)
     debug (1.9.2)
       irb (~> 1.10)
@@ -330,6 +332,7 @@ DEPENDENCIES
   bootsnap
   brakeman
   capybara
+  cssbundling-rails (~> 1.4)
   debug
   error_highlight (>= 0.4.0)
   importmap-rails

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/config/manifest.js b/app/assets/config/manifest.js
@@ -1,4 +1,4 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js
+//= link_tree ../builds
diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
@@ -0,0 +1,2 @@
+@import 'bootstrap/scss/bootstrap';
+@import 'bootstrap-icons/font/bootstrap-icons';
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
diff --git a/app/controllers/main_controller.rb b/app/controllers/main_controller.rb
@@ -0,0 +1,4 @@
+class MainController < ApplicationController
+  def index
+  end
+end
diff --git a/app/helpers/main_helper.rb b/app/helpers/main_helper.rb
@@ -0,0 +1,2 @@
+module MainHelper
+end
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -1,3 +1,4 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
+import * as bootstrap from "bootstrap"
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -18,6 +18,56 @@
   </head>
 
   <body>
-    <%= yield %>
+    <div class="container">
+      <nav class="navbar navbar-expand-lg bg-body-tertiary mb-3">
+        <div class="container-fluid">
+          <a class="navbar-brand" href="#"><%= content_for(:title) || "Podcaster" %></a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <%# <li class="nav-item">
+                  <a class="nav-link active" aria-current="page" href="#">Home</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#">Link</a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    Dropdown
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li><a class="dropdown-item" href="#">Action</a></li>
+                    <li><a class="dropdown-item" href="#">Another action</a></li>
+                    <li><hr class="dropdown-divider"></li>
+                    <li><a class="dropdown-item" href="#">Something else here</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+                </li> %>
+            </ul>
+            <div class="d-flex">
+              <button class="btn btn-outline-success">Register</button>
+            </form>
+          </div>
+        </div>
+      </nav>
+
+      <div class="mb-3">
+        <%= yield %>
+      </div>
+
+      <footer class="mb-3">
+        <div class="card">
+          <div class="card-body">
+            <h6 class="card-subtitle mb-2 text-body-secondary">Footer</h6>
+            <a href="#" class="card-link">Card link</a>
+            <a href="#" class="card-link">Another link</a>
+          </div>
+        </div>
+      </footer>
+    </div>
   </body>
 </html>
diff --git a/app/views/main/index.html.erb b/app/views/main/index.html.erb
@@ -0,0 +1,37 @@
+<div class="row justify-content-center">
+  <div class="col-md-8">
+    <div class="card-group">
+      <div class="card">
+        <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/9abc28136491393.61fa8bcfee8ce.png" class="card-img-top" alt="...">
+        <div class="card-body">
+          <h5 class="card-title">Card title</h5>
+          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+        </div>
+        <div class="card-footer">
+          <small class="text-body-secondary">Last uploaded podcast</small>
+        </div>
+      </div>
+      <div class="card">
+        <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/c4c965136491393.6336af6811b4b.jpg" class="card-img-top" alt="...">
+        <div class="card-body">
+          <h5 class="card-title">Card title</h5>
+          <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+        </div>
+        <div class="card-footer">
+          <small class="text-body-secondary">Random podcast</small>
+        </div>
+      </div>
+      <div class="card">
+        <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/45ddba136491393.6336af6812b61.jpg" class="card-img-top" alt="...">
+        <div class="card-body">
+          <h5 class="card-title">Card title</h5>
+          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+        </div>
+        <div class="card-footer">
+          <small class="text-body-secondary">The most popular podcast</small>
+        </div>
+      </div>
+      <button type="button" class="btn btn-primary btn-lg btn-center">Check it out!</button>
+    </div>
+  </div>
+</div>
diff --git a/bin/dev b/bin/dev
@@ -0,0 +1,11 @@
+#!/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/importmap.rb b/config/importmap.rb
@@ -5,3 +5,4 @@
 pin "@hotwired/stimulus", to: "stimulus.min.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin "bootstrap", to: "bootstrap.min.js"
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -5,8 +5,12 @@
 
 # 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/dist/js")
+Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
+Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap/dist/js")
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets
 # folder are already added.
 # Rails.application.config.assets.precompile += %w[ admin.js admin.css ]
+Rails.application.config.assets.precompile << "bootstrap.min.js"
diff --git a/config/routes.rb b/config/routes.rb
@@ -10,5 +10,5 @@
   get "manifest" => "rails/pwa#manifest", as: :pwa_manifest
 
   # Defines the root path route ("/")
-  # root "posts#index"
+  root "main#index"
 end
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.20",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
+    "nodemon": "^3.1.9",
+    "postcss": "^8.4.49",
+    "postcss-cli": "^11.0.0",
+    "sass": "^1.83.0"
+  },
+  "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/spec/helpers/main_helper_spec.rb b/spec/helpers/main_helper_spec.rb
@@ -0,0 +1,15 @@
+require 'rails_helper'
+
+# Specs in this file have access to a helper object that includes
+# the MainHelper. For example:
+#
+# describe MainHelper do
+#   describe "string concat" do
+#     it "concats two strings with spaces" do
+#       expect(helper.concat_strings("this","that")).to eq("this that")
+#     end
+#   end
+# end
+RSpec.describe MainHelper, type: :helper do
+  pending "add some examples to (or delete) #{__FILE__}"
+end
diff --git a/spec/requests/main_spec.rb b/spec/requests/main_spec.rb
@@ -0,0 +1,11 @@
+require 'rails_helper'
+
+RSpec.describe "Mains", type: :request do
+  describe "GET /index" do
+    it "returns http success" do
+      get "/main/index"
+      expect(response).to have_http_status(:success)
+    end
+  end
+
+end
diff --git a/spec/views/main/index.html.erb_spec.rb b/spec/views/main/index.html.erb_spec.rb
@@ -0,0 +1,5 @@
+require 'rails_helper'
+
+RSpec.describe "main/index.html.erb", type: :view do
+  pending "add some examples to (or delete) #{__FILE__}"
+end
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		web: env RUBY_DEBUG_OPEN=true bin/rails server
		css: yarn watch:css
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import 'bootstrap/scss/bootstrap';
		@import 'bootstrap-icons/font/bootstrap-icons';