rails_app_generator 0.0.6 → 0.0.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a9db638d5387a342cec3c8ad01cf7aa69298a2e592f005608a603c17ec336b20
-  data.tar.gz: 192fd7e39c98346954ddb9752fba2c7cd5380e306d07e32b638d8d5c0201a637
+  metadata.gz: eb8e4527b8ed4718b6e87844e6bf5f531b3747fd98e4ea0d6b9a00a362a6e690
+  data.tar.gz: 5ce9f0b4ca298a820ab8bdfd4cff8947163230fb2548b40a2e6432506fe43fd4
 SHA512:
-  metadata.gz: b3d1733fb92b31e44eaaa31cf062038e7f8715cca8adf2e29351e7363e74c24a5ba488186143c803be5d814d17bfcc80b8fa5b945b9bd06cd0e2da966244c065
-  data.tar.gz: 1f2955850cf06ad10529dc86355f9db15af680bc017284ec01524f3c83c7314cb903b6deff6beefb7673ab78fc2d57152fef36a015d7a7b282df03310509dc24
+  metadata.gz: 32689a628daeebed93c2e415d71fe9ed68adcce3737c55a55ad2966a378125dd22dc948f1c46325aa992c0f2bb7ba1fc37d0560f47dd385e094dbe5e2f63d9e2
+  data.tar.gz: c3094d0c0384107b80ffe00b766a51e6c72b43135bdf298b3c0b3b524aa9aff3729cfe9a1b9d38886d5542a8a090ca7ce0708be0d3f03d09d5a7968a53e407e1

data/.builders/boot.rb

@@ -23,6 +23,7 @@ KConfig.configure(CONFIG_KEY) do |config|
   config.template_folders.add(:template           , File.expand_path('.templates', Dir.pwd))
 
   config.target_folders.add(:app                  , base_folder)
+  config.target_folders.add(:docs                 , :app, 'docs')
   config.target_folders.add(:builder              , builder_folder)
 end
 

data/.builders/generators/project-plan.rb

@@ -0,0 +1,47 @@
+KManager.action :project_plan do
+  action do
+
+    DrawioDsl::Drawio
+      .init(k_builder, on_exist: :write, on_action: :execute)
+      .diagram(rounded: 1, glass: 1)
+      .page('In progress', theme: :style_03, margin_left: 0, margin_top: 0) do
+        h5(x: 300, y: 0, w: 400, h: 80, title: 'DrawIO DSL')
+        # p(x: 350, y: 40, w: 400, h: 80, title: 'Project plan - In progress')
+
+        grid_layout(y: 90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
+
+        todo(title: '')
+      end
+      .page('To Do', theme: :style_02, margin_left: 0, margin_top: 0) do
+
+        # h5(x: 300, y: 0, w: 400, h: 80, title: 'DrawIO DSL')
+        # p(x: 350, y: 40, w: 400, h: 80, title: 'Project plan')
+
+        todo(title: 'add diff tool with support')
+        todo(title: 'add diff tool left hand side only option')
+        todo(title: 'add diff tool right hand side only option')
+        todo(title: 'add diff tool lhs/rhs differences')
+        todo(title: 'add diff tool open in vscode option')
+        todo(title: 'rag new should work like rails new')
+        todo(title: 'rag profile is the default option')
+
+        grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
+
+      end
+      .page('Done', theme: :style_06, margin_left: 0, margin_top: 0) do
+
+        # h5(x: 300, y: 0, w: 400, h: 80, title: 'DrawIO DSL')
+        # p(x: 350, y: 40, w: 400, h: 80, title: 'Done')
+
+        todo(title: 'add project plan to do list')
+
+        grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
+
+      end
+      .cd(:docs)
+      .save('project-plan/project.drawio')
+      .export_svg('project-plan/project_in_progress', page: 1)
+      .export_svg('project-plan/project_todo'       , page: 2)
+      .export_svg('project-plan/project_done'       , page: 3)
+  end
+end

data/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [0.0.8](https://github.com/klueless-io/rails_app_generator/compare/v0.0.7...v0.0.8) (2022-07-24)
+
+
+### Bug Fixes
+
+* add support for bootstrap profile ([f70d17d](https://github.com/klueless-io/rails_app_generator/commit/f70d17d28cae3f7758c62360bd3d97ca27bf06b5))
+* add support for bootstrap profile ([a114339](https://github.com/klueless-io/rails_app_generator/commit/a1143391166c10fc802800e2e1236f69aeda9091))
+
+## [0.0.7](https://github.com/klueless-io/rails_app_generator/compare/v0.0.6...v0.0.7) (2022-07-22)
+
+
+### Bug Fixes
+
+* add support for profiles and after templates ([1ecf4ab](https://github.com/klueless-io/rails_app_generator/commit/1ecf4abef1bc0f45928a33319ed9db8bebe1c27a))
+
+## [0.0.6](https://github.com/klueless-io/rails_app_generator/compare/v0.0.5...v0.0.6) (2022-07-21)
+
+
+### Bug Fixes
+
+* add a bunch of addons ([b781af6](https://github.com/klueless-io/rails_app_generator/commit/b781af66d7fe7d7dcd2550577166213deefc06c6))
+* add a bunch of addons ([d9a85b7](https://github.com/klueless-io/rails_app_generator/commit/d9a85b7b32c2c25577d98b4b3be9aab7947ff6e9))
+* update template paths in app_generator ([9b28a5e](https://github.com/klueless-io/rails_app_generator/commit/9b28a5ee58535a761581e619eb01dc3059a79948))
+
 ## [0.0.5](https://github.com/klueless-io/rails_app_generator/compare/v0.0.4...v0.0.5) (2022-07-19)
 
 

data/after_templates/README.md

@@ -0,0 +1,3 @@
+# After Templates
+
+A set of templates that can be used via the `--template` argument

data/after_templates/___base_template.rb

@@ -0,0 +1 @@
+# frozen_string_literal: true

data/after_templates/___r7_hotwire.rb

@@ -0,0 +1 @@
+# frozen_string_literal: true

data/after_templates/rag_bootstrap/application-yield.html.erb

@@ -0,0 +1,5 @@
+    <div class="container">
+      <div class="row">
+        <%= yield %>
+      </div>
+    </div>

data/after_templates/rag_bootstrap/application.html.erb

@@ -0,0 +1,4 @@
+    <%= stylesheet_link_tag "custom-using-css" %>
+    <%= stylesheet_link_tag "custom-using-scss" %>
+    <%= stylesheet_link_tag "custom-component" %>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

data/after_templates/rag_bootstrap/component-cards-fancy.css

@@ -0,0 +1,84 @@
+// Cards 1 : Source: https://codepen.io/donho_zamo/pen/YzXzPXZ
+
+/*----  Main Style  ----*/
+#cards_landscape_wrap-2{
+  text-align: center;
+  background: #F7F7F7;
+}
+#cards_landscape_wrap-2 .container{
+  padding-top: 80px; 
+  padding-bottom: 100px;
+}
+#cards_landscape_wrap-2 a{
+  text-decoration: none;
+  outline: none;
+}
+#cards_landscape_wrap-2 .card-flyer {
+  border-radius: 5px;
+}
+#cards_landscape_wrap-2 .card-flyer .image-box{
+  background: #ffffff;
+  overflow: hidden;
+  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.50);
+  border-radius: 5px;
+}
+#cards_landscape_wrap-2 .card-flyer .image-box img{
+  -webkit-transition:all .9s ease; 
+  -moz-transition:all .9s ease; 
+  -o-transition:all .9s ease;
+  -ms-transition:all .9s ease; 
+  width: 100%;
+  height: 200px;
+}
+#cards_landscape_wrap-2 .card-flyer:hover .image-box img{
+  opacity: 0.7;
+  -webkit-transform:scale(1.15);
+  -moz-transform:scale(1.15);
+  -ms-transform:scale(1.15);
+  -o-transform:scale(1.15);
+  transform:scale(1.15);
+}
+#cards_landscape_wrap-2 .card-flyer .text-box{
+  text-align: center;
+}
+#cards_landscape_wrap-2 .card-flyer .text-box .text-container{
+  padding: 30px 18px;
+}
+#cards_landscape_wrap-2 .card-flyer{
+  background: #FFFFFF;
+  margin-top: 50px;
+  -webkit-transition: all 0.2s ease-in;
+  -moz-transition: all 0.2s ease-in;
+  -ms-transition: all 0.2s ease-in;
+  -o-transition: all 0.2s ease-in;
+  transition: all 0.2s ease-in;
+  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.40);
+}
+#cards_landscape_wrap-2 .card-flyer:hover{
+  background: #fff;
+  box-shadow: 0px 15px 26px rgba(0, 0, 0, 0.50);
+  -webkit-transition: all 0.2s ease-in;
+  -moz-transition: all 0.2s ease-in;
+  -ms-transition: all 0.2s ease-in;
+  -o-transition: all 0.2s ease-in;
+  transition: all 0.2s ease-in;
+  margin-top: 50px;
+}
+#cards_landscape_wrap-2 .card-flyer .text-box p{
+  margin-top: 10px;
+  margin-bottom: 0px;
+  padding-bottom: 0px; 
+  font-size: 14px;
+  letter-spacing: 1px;
+  color: #000000;
+}
+#cards_landscape_wrap-2 .card-flyer .text-box h6{
+  margin-top: 0px;
+  margin-bottom: 4px; 
+  font-size: 18px;
+  font-weight: bold;
+  text-transform: uppercase;
+  font-family: 'Roboto Black', sans-serif;
+  letter-spacing: 1px;
+  color: #00acc1;
+}

data/after_templates/rag_bootstrap/component-cards-fancy.html

@@ -0,0 +1,80 @@
+<!-- Topic Cards -->
+<div id="cards_landscape_wrap-2">
+  <div class="container">
+    <div class="row">
+      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
+        <a href="">
+          <div class="card-flyer">
+            <div class="text-box">
+              <div class="image-box">
+                <img src="https://cdn.pixabay.com/photo/2018/03/30/15/11/deer-3275594_960_720.jpg" alt="" />
+              </div>
+              <div class="text-container">
+                <h6>Title 01</h6>
+                <p>
+                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+                  industry's standard dummy text ever since the 1500s.
+                </p>
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
+        <a href="">
+          <div class="card-flyer">
+            <div class="text-box">
+              <div class="image-box">
+                <img src="https://cdn.pixabay.com/photo/2018/04/09/19/55/low-poly-3305284_960_720.jpg" alt="" />
+              </div>
+              <div class="text-container">
+                <h6>Title 02</h6>
+                <p>
+                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+                  industry's standard dummy text ever since the 1500s.
+                </p>
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
+        <a href="">
+          <div class="card-flyer">
+            <div class="text-box">
+              <div class="image-box">
+                <img src="https://cdn.pixabay.com/photo/2018/04/06/13/46/poly-3295856_960_720.png" alt="" />
+              </div>
+
+              <div class="text-container">
+                <h6>Title 03</h6>
+                <p>
+                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+                  industry's standard dummy text ever since the 1500s.
+                </p>
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
+        <a href="">
+          <div class="card-flyer">
+            <div class="text-box">
+              <div class="image-box">
+                <img src="https://cdn.pixabay.com/photo/2018/03/30/15/12/dog-3275593_960_720.jpg" alt="" />
+              </div>
+              <div class="text-container">
+                <h6>Title 04</h6>
+                <p>
+                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+                  industry's standard dummy text ever since the 1500s.
+                </p>
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>

data/after_templates/rag_bootstrap/component-cards-staff.css

@@ -0,0 +1,90 @@
+// Cards 2 - Source: https://codepen.io/design007/pen/KKmbZzm
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://use.fontawesome.com/releases/v5.13.0/css/all.css');
+:root {
+  --font3: 'Roboto', sans-serif;
+}
+
+.h1,
+h1 {
+  font-size: 1.5rem;
+}
+
+.container-fluid {
+  max-width: 1400px;
+}
+
+.card {
+  background: #fff;
+  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05);
+  border: 1;
+  border-radius: 1rem;
+}
+
+.img-hover-zoom--colorize img {
+  border-radius: 50%;
+  width: 150px;
+  height: auto;
+  margin-top: 20px;
+  padding: 1px;
+  transition: transform 0.5s;
+  filter: grayscale(100%);
+}
+
+.img-hover-zoom--colorize:hover img {
+  filter: grayscale(0);
+  transform: scale(1.05);
+}
+
+.card h5 {
+  overflow: hidden;
+  height: 80px;
+  font-weight: 300;
+  font-size: 1rem;
+}
+
+.card h5 a {
+  color: black;
+  text-decoration: none;
+}
+
+.role {
+  color: #7a7a7a;
+}
+
+.box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fab {
+  font-size: 1.5rem;
+  color: darkgray;
+  transition: transform 0.5s;
+}
+
+.fab:hover {
+  color: black;
+  transform: scale(1.1);
+}
+
+.card h2 {
+  font-size: 1rem;
+}
+
+/* MEDIA */
+
+@media only screen and (min-width: 1200px) {
+  .img-hover-zoom--colorize img {
+    width: 200px;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .h1,
+  h1 {
+    font-size: 2rem;
+  }
+}

data/after_templates/rag_bootstrap/component-cards-staff.html

@@ -0,0 +1,140 @@
+<div class="container p-5">
+  <div class="row row-cols-1 row-cols-xs-2 row-cols-sm-2 row-cols-lg-4 g-3">
+    <div class="col">
+      <div class="card h-100 shadow-sm">
+        <div class="text-center">
+          <div class="img-hover-zoom img-hover-zoom--colorize">
+            <img
+              class="shadow"
+              src="https://source.unsplash.com/rDEOVtE7vOs/600x600"
+              alt="Another Image zoom-on-hover effect"
+            />
+          </div>
+        </div>
+
+        <div class="card-body">
+          <div class="clearfix mb-3"></div>
+
+          <div class="my-2 text-center">
+            <h1>Mia Wallace</h1>
+          </div>
+          <div class="mb-3">
+            <h2 class="text-uppercase text-center role">Senior Frontend Developer</h2>
+          </div>
+          <div class="box">
+            <div>
+              <ul class="list-inline">
+                <li class="list-inline-item"><i class="fab fa-github"></i></li>
+                <li class="list-inline-item"><i class="fab fa-linkedin-in"></i></li>
+                <li class="list-inline-item"><i class="fab fa-instagram"></i></li>
+                <li class="list-inline-item"><i class="fab fa-twitter"></i></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col">
+      <div class="card h-100 shadow-sm">
+        <div class="text-center">
+          <div class="img-hover-zoom img-hover-zoom--colorize">
+            <img
+              class="shadow"
+              src="https://source.unsplash.com/XHVpWcr5grQ/600x600"
+              alt="Another Image zoom-on-hover effect"
+            />
+          </div>
+        </div>
+
+        <div class="card-body">
+          <div class="clearfix mb-3"></div>
+
+          <div class="my-2 text-center">
+            <h1>Vincent Vega</h1>
+          </div>
+          <div class="mb-3">
+            <h2 class="text-uppercase text-center role">SEO Specialist</h2>
+          </div>
+          <div class="box">
+            <div>
+              <ul class="list-inline">
+                <li class="list-inline-item"><i class="fab fa-github"></i></li>
+                <li class="list-inline-item"><i class="fab fa-linkedin-in"></i></li>
+                <li class="list-inline-item"><i class="fab fa-instagram"></i></li>
+                <li class="list-inline-item"><i class="fab fa-twitter"></i></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col">
+      <div class="card h-100 shadow-sm">
+        <div class="text-center">
+          <div class="img-hover-zoom img-hover-zoom--colorize">
+            <img
+              class="shadow"
+              src="https://source.unsplash.com/n4KewLKFOZw/600x600"
+              alt="Another Image zoom-on-hover effect"
+            />
+          </div>
+        </div>
+
+        <div class="card-body">
+          <div class="clearfix mb-3"></div>
+
+          <div class="my-2 text-center">
+            <h1>Mr. Wolf</h1>
+          </div>
+          <div class="mb-3">
+            <h2 class="text-uppercase text-center role">DIGITAL MARKETING SPECIALIST</h2>
+          </div>
+          <div class="box">
+            <div>
+              <ul class="list-inline">
+                <li class="list-inline-item"><i class="fab fa-github"></i></li>
+                <li class="list-inline-item"><i class="fab fa-linkedin-in"></i></li>
+                <li class="list-inline-item"><i class="fab fa-instagram"></i></li>
+                <li class="list-inline-item"><i class="fab fa-twitter"></i></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col">
+      <div class="card h-100 shadow-sm">
+        <div class="text-center">
+          <div class="img-hover-zoom img-hover-zoom--colorize">
+            <img
+              class="shadow"
+              src="https://source.unsplash.com/B4TjXnI0Y2c/600x600"
+              alt="Another Image zoom-on-hover effect"
+            />
+          </div>
+        </div>
+
+        <div class="card-body">
+          <div class="clearfix mb-3"></div>
+
+          <div class="my-2 text-center">
+            <h1>O-Ren Ishii</h1>
+          </div>
+          <div class="mb-3">
+            <h2 class="text-uppercase text-center role">Web Developer</h2>
+          </div>
+          <div class="box">
+            <div>
+              <ul class="list-inline">
+                <li class="list-inline-item"><i class="fab fa-github"></i></li>
+                <li class="list-inline-item"><i class="fab fa-linkedin-in"></i></li>
+                <li class="list-inline-item"><i class="fab fa-instagram"></i></li>
+                <li class="list-inline-item"><i class="fab fa-twitter"></i></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/after_templates/rag_bootstrap/component-cards-styled.html

@@ -0,0 +1,31 @@
+<div class="m-4">
+  <div class="row row-cols-1 row-cols-md-3 g-3">
+      <div class="col">
+          <!-- Card with default left text alignment -->
+          <div class="card">
+              <div class="card-body card1">
+                  <h3 class="card-title">Bootstrap @import</h3>
+                  <p class="card-text">Use standard SAAS transpiling</p>
+              </div>
+          </div>
+      </div>
+      <div class="col">
+          <!-- Card with center text alignment -->
+          <div class="card text-center">
+              <div class="card-body card2">
+                  <h3 class="card-title">CSS</h3>
+                  <p class="card-text">Using plain CSS files</p>
+              </div>
+          </div>
+      </div>
+      <div class="col">
+      <!-- Card with right text alignment -->
+          <div class="card text-end">
+              <div class="card-body card3">
+                  <h3 class="card-title">SCSS</h3>
+                  <p class="card-text">Using SASS/SCSS files</p>
+              </div>
+          </div>
+      </div>
+  </div>
+</div>

data/after_templates/rag_bootstrap/component-footer.html

@@ -0,0 +1,34 @@
+<footer class="bg-dark text-center text-white">
+  <!-- Grid container -->
+  <div class="container p-4 pb-0">
+    <!-- Section: Social media -->
+    <section class="mb-4">
+      <!-- Facebook -->
+      <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-facebook-f"></i></a>
+
+      <!-- Twitter -->
+      <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-twitter"></i></a>
+
+      <!-- Google -->
+      <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-google"></i></a>
+
+      <!-- Instagram -->
+      <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-instagram"></i></a>
+
+      <!-- Linkedin -->
+      <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-linkedin-in"></i></a>
+
+      <!-- Github -->
+      <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"><i class="fab fa-github"></i></a>
+    </section>
+    <!-- Section: Social media -->
+  </div>
+  <!-- Grid container -->
+
+  <!-- Copyright -->
+  <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
+    © 2020 Copyright:
+    <a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
+  </div>
+  <!-- Copyright -->
+</footer>

data/after_templates/rag_bootstrap/component-hero.html

@@ -0,0 +1,15 @@
+<div class="px-4 pt-5 my-5 text-center border-bottom">
+  <h1 class="display-4 fw-bold">Centered screenshot</h1>
+  <div class="col-lg-6 mx-auto">
+    <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+    <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
+      <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3"  data-bs-toggle="modal" data-bs-target="#exampleModal">Click Me</button>
+      <%= link_to 'People',  people_path, class: "btn btn-outline-secondary btn-lg px-4" %>
+    </div>
+  </div>
+  <div class="overflow-hidden" style="max-height: 30vh;">
+    <div class="container px-5">
+      <img src="https://getbootstrap.com/docs/5.0/examples/heroes/bootstrap-themes.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
+    </div>
+  </div>
+</div>

data/after_templates/rag_bootstrap/component-nav.html

@@ -0,0 +1,36 @@
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="#">Navbar</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="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            Dropdown
+          </a>
+          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+        </li>
+      </ul>
+      <form class="d-flex">
+        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+        <button class="btn btn-outline-success" type="submit">Search</button>
+      </form>
+    </div>
+  </div>
+</nav>

data/after_templates/rag_bootstrap/custom-bootstrap-import.scss

@@ -0,0 +1,5 @@
+.card1 {
+  $color-left: #ffafbd;
+  $color-right: #ffc3a0;
+  background-image: linear-gradient(to right, $color-left, $color-right);
+}

data/after_templates/rag_bootstrap/custom-using-css.css

@@ -0,0 +1,3 @@
+.card2 {
+  background-image: linear-gradient(to bottom, #ff8f1f, #f32b60);
+}

data/after_templates/rag_bootstrap/custom-using-scss.scss

@@ -0,0 +1,5 @@
+.card3 {
+  $color-left: #ffdde1;
+  $color-right: #ee9ca7;
+  background-image: linear-gradient(to right, $color-left, $color-right);
+}

data/after_templates/rag_bootstrap/manifest.js

@@ -0,0 +1,3 @@
+//= link custom-using-css.css
+//= link custom-using-scss.css  
+//= link custom-component.css  

data/after_templates/rag_bootstrap.rb

@@ -0,0 +1 @@
+# frozen_string_literal: true