frontsite 0.1.3

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 217acb351c3a1da9fd4456bedb46ac82eb97b48090d272ae22084caedefe2407
+  data.tar.gz: 150d0b0d54941d131e534ec260e714f3fd171ba1c6a2e721938e8a4b03525df8
+SHA512:
+  metadata.gz: 9b4697d1cc65ac734e0b1705bcfc340687d2231eac85b40ba31ded63687b8156cb9cb382df1da6383e78abfcc3b2aee4dfad0fa526c7521ea5156fec9bbeee1c
+  data.tar.gz: 4e2dc7c24a736cc14bffb95c6767abb5dae67ba9cdc3d18148e18475d877e43df248136f89806782a44fee5c3689035c862ecfd6939b5406e70f6c37955c0fd8

data/CHANGELOG.md

@@ -0,0 +1,31 @@
+# v0.1.0
+Initial concept, uploaded to secure the name. XD
+
+# v0.1.1
+Initial version
+
+- Added:
+  - Site layout
+  - Bootstrap
+  - Bootstrap Icons
+  - Site controller
+  - about page
+  - contact page
+  - home page
+  - faqs page
+  - feed page
+  - pricing page
+  - products page
+  - privacy policy page
+  - terms page
+  - Navigation partial
+  - Footer partial
+
+# v0.1.2
+
+Fixed major bug: Templates not found
+
+# v0.1.3
+
+Fixed major bug: Generator doesn't work
+  - Mispelling in the copy_file argument... Finally works!

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2021 Otoniel Reyes
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,32 @@
+# Frontsite
+Create a site for your app.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'frontsite'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install frontsite
+```
+
+## Usage
+
+Run the generator:
+```bash
+$ bin/rails g frontsite:install
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,18 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"
+
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/config/routes.rb

@@ -0,0 +1,2 @@
+Rails.application.routes.draw do
+end

data/lib/frontsite/engine.rb

@@ -0,0 +1,4 @@
+module Frontsite
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/frontsite/version.rb

@@ -0,0 +1,3 @@
+module Frontsite
+  VERSION = '0.1.3'
+end

data/lib/frontsite.rb

@@ -0,0 +1,6 @@
+require "frontsite/version"
+require "frontsite/engine"
+
+module Frontsite
+  # Your code goes here...
+end

data/lib/generators/frontsite/install_generator.rb

@@ -0,0 +1,55 @@
+require 'rails/generators/base'
+
+module Frontsite
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path('templates', __dir__)
+
+      def copy_controller
+        copy_file "site_controller.rb", "app/controllers/site_controller.rb"
+      end
+
+      def copy_helper
+        copy_file "site_helper.rb", "app/helpers/site_helper.rb"
+      end
+
+      def copy_layout
+        copy_file "site.html.erb", "app/views/layouts/site.html.erb"
+      end
+
+      def copy_partials
+        copy_file "_site_navigation.html.erb", "app/views/shared/_site_navigation.html.erb"
+        copy_file "_site_footer.html.erb", "app/views/shared/_site_footer.html.erb"
+      end
+
+      def copy_views
+        copy_file "index.html.erb", "app/views/site/index.html.erb"
+        copy_file "about.html.erb", "app/views/site/about.html.erb"
+        copy_file "products.html.erb", "app/views/site/products.html.erb"
+        copy_file "pricing.html.erb", "app/views/site/pricing.html.erb"
+        copy_file "contact.html.erb", "app/views/site/contact.html.erb"
+        copy_file "feed.html.erb", "app/views/site/feed.html.erb"
+        copy_file "privacy_policy.html.erb", "app/views/site/privacy_policy.html.erb"
+        copy_file "terms.html.erb", "app/views/site/terms.html.erb"
+        copy_file "faqs.html.erb", "app/views/site/faqs.html.erb"
+      end
+
+      def copy_styles
+        copy_file "site.scss", "app/stylesheets/site.scss"
+      end
+
+      def add_routes
+        route "root to: 'site#index'"
+        route "get 'home', to: 'site#index'"
+        route "get 'about', to: 'site#about'"
+        route "get 'products', to: 'site#products'"
+        route "get 'pricing', to: 'site#pricing'"
+        route "get 'contact', to: 'site#contact'"
+        route "get 'feed', to: 'site#feed'"
+        route "get 'privacy_policy', to: 'site#privacy_policy'"
+        route "get 'terms', to: 'site#terms'"
+        route "get 'faqs', to: 'site#faqs'"
+      end
+    end
+  end
+end

data/lib/generators/frontsite/templates/_site_footer.html.erb

@@ -0,0 +1,12 @@
+<div class="container">
+  <footer class="py-3 my-4">
+    <ul class="nav justify-content-center border-bottom pb-3 mb-3">
+      <li class="nav-item"><%= link_to 'Feed', feed_path, class: 'nav-link px-2 text-muted' %></li>
+      <li class="nav-item"><%= link_to 'Privacy Policy', privacy_policy_path, class: 'nav-link px-2 text-muted' %></li>
+      <li class="nav-item"><%= link_to 'Pricing', pricing_path, class: 'nav-link px-2 text-muted' %></li>
+      <li class="nav-item"><%= link_to 'Terms and Conditions', terms_path, class: 'nav-link px-2 text-muted' %></li>
+      <li class="nav-item"><%= link_to 'FAQs', faqs_path, class: 'nav-link px-2 text-muted' %></li>
+    </ul>
+    <p class="text-center text-muted">&copy; <%= Time.now.year %> Company, Inc</p>
+  </footer>
+</div>

data/lib/generators/frontsite/templates/_site_navigation.html.erb

@@ -0,0 +1,18 @@
+<div class="container">
+  <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3">
+    <%= link_to tag.i('', class:'bi bi-app-indicator h3 mb-0'), root_path, class:"d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none" %>
+
+    <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
+      <li><%= link_to 'Home', root_path, class:'nav-link px-2 link-secondary' %></li>
+      <li><%= link_to 'About', about_path, class:'nav-link px-2 link-secondary' %></li>
+      <li><%= link_to 'Products', products_path, class:'nav-link px-2 link-secondary' %></li>
+      <li><%= link_to 'Pricing', pricing_path, class:'nav-link px-2 link-secondary' %></li>
+      <li><%= link_to 'Contact', contact_path, class:'nav-link px-2 link-secondary' %></li>
+    </ul>
+
+    <div class="col-md-3 text-end">
+      <%= link_to 'Login', root_path, class:"btn btn-outline-info me-2" %>
+      <%= link_to 'Sign-up', root_path, class:"btn btn-info" %>
+    </div>
+  </header>
+</div>

data/lib/generators/frontsite/templates/about.html.erb

@@ -0,0 +1,87 @@
+<%= render 'shared/site_navigation' %>
+<% content_for :title, 'Awesome Site | About Us' %>
+
+<div class="p-5">
+  <div class="container-fluid py-5 text-center">
+    <i class="bi bi-app-indicator h1"></i>
+    <h1 class="display-5 fw-bold">About Us</h1>
+    <p class="fs-4">A short description about the team, the work we do, who we work for and our motivation.</p>
+    <p class="fs-4">We are moving forward</p>
+    <button class="btn btn-primary btn-lg" type="button">Sign-up</button>
+    <button class="btn btn-outline-primary btn-lg" type="button">Contact Us</button>
+  </div>
+</div>
+
+<div class="album py-5 bg-light">
+  <h2 class="text-center border-bottom mb-4 pb-3">The Team</h2>
+  <div class="container">
+    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-3">
+      <div class="col">
+        <div class="card shadow-sm">
+          <img src="//picsum.photos/id/555/200" class="card-img-top">
+
+          <div class="card-body text-center">
+          <h4 class="card-title">
+            Awesome Name
+          </h4>
+          <hr>
+            <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 class="d-grid gap-2">
+              <button type="button" class="btn btn-dark rounded-0">Contact</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card shadow-sm">
+          <img src="//picsum.photos/id/555/200" class="card-img-top">
+
+          <div class="card-body text-center">
+          <h4 class="card-title">
+            Awesome Name
+          </h4>
+          <hr>
+            <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 class="d-grid gap-2">
+              <button type="button" class="btn btn-dark rounded-0">Contact</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card shadow-sm">
+          <img src="//picsum.photos/id/555/200" class="card-img-top">
+
+          <div class="card-body text-center">
+          <h4 class="card-title">
+            Awesome Name
+          </h4>
+          <hr>
+            <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 class="d-grid gap-2">
+              <button type="button" class="btn btn-dark rounded-0">Contact</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card shadow-sm">
+          <img src="//picsum.photos/id/555/200" class="card-img-top">
+
+          <div class="card-body text-center">
+          <h4 class="card-title">
+            Awesome Name
+          </h4>
+          <hr>
+            <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 class="d-grid gap-2">
+              <button type="button" class="btn btn-dark rounded-0">Contact</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<%= render 'shared/site_footer' %>

data/lib/generators/frontsite/templates/contact.html.erb

@@ -0,0 +1,37 @@
+<% content_for :title, 'Awesome Site | Contact' %>
+
+<%= render 'shared/site_navigation' %>
+
+<div class="p-5">
+  <div class="container-fluid py-5 text-center">
+    <h1 class="display-5 fw-bold">Contact Us</h1>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row align-items-center">
+    <div class="col-4"><img src="//picsum.photos/400" class="image-responsive w-100"></div>
+    <div class="col-8">
+      <form>
+        <h4>Leave us a message</h4>
+        <div class="form-group">
+          <label>Name</label>
+          <input type="text" class="form-control">
+        </div>
+        <div class="form-group">
+          <label>Email</label>
+          <input type="email" class="form-control">
+        </div>
+        <div class="form-group">
+          <label>Message</label>
+          <textarea class="form-control"></textarea>
+        </div>
+        <div class="my-2">
+          <input type="submit" value="Send" class="btn btn-primary">
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<%= render 'shared/site_footer' %>

data/lib/generators/frontsite/templates/faqs.html.erb

@@ -0,0 +1,3 @@
+<% content_for :title, 'Awesome Site | FAQs' %>
+
+<%= render 'shared/site_navigation' %>

data/lib/generators/frontsite/templates/feed.html.erb

@@ -0,0 +1,3 @@
+<% content_for :title, 'Awesome Site | Feed' %>
+
+<%= render 'shared/site_navigation' %>

data/lib/generators/frontsite/templates/index.html.erb

@@ -0,0 +1,88 @@
+<% content_for :title, 'Awesome Site' %>
+<%= render 'shared/site_navigation' %>
+
+<div class="px-4 py-5 my-5 text-center">
+  <i class="bi bi-app-indicator h1"></i>
+  <h1 class="display-5 fw-bold">Site Home</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">
+      <button type="button" class="btn btn-primary btn-lg px-4 gap-3">Primary button</button>
+      <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
+    </div>
+  </div>
+</div>
+
+<div class="container marketing">
+
+  <!-- Three columns of text below the carousel -->
+  <div class="row justify-content-center py-4">
+    <div class="col-lg-4 text-center">
+      <img src="//picsum.photos/id/80/128" class="rounded-circle d-block mx-auto">
+
+      <h2>Heading</h2>
+      <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
+      <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
+    </div><!-- /.col-lg-4 -->
+    <div class="col-lg-4 text-center">
+      <img src="//picsum.photos/id/80/128" class="rounded-circle d-block mx-auto">
+
+      <h2>Heading</h2>
+      <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
+      <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
+    </div><!-- /.col-lg-4 -->
+    <div class="col-lg-4 text-center">
+      <img src="//picsum.photos/id/80/128" class="rounded-circle d-block mx-auto">
+
+      <h2>Heading</h2>
+      <p>And lastly this, the third column of representative placeholder content.</p>
+      <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
+    </div><!-- /.col-lg-4 -->
+  </div><!-- /.row -->
+
+
+  <!-- START THE FEATURETTES -->
+
+  <hr class="featurette-divider">
+
+  <div class="row featurette align-items-center">
+    <div class="col-md-7">
+      <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
+      <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
+    </div>
+    <div class="col-md-5">
+      <img src="//picsum.photos/id/26/600" class="w-100 image-responsive">
+
+    </div>
+  </div>
+
+  <hr class="featurette-divider">
+
+  <div class="row featurette align-items-center">
+    <div class="col-md-7 order-md-2">
+      <h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
+      <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
+    </div>
+    <div class="col-md-5 order-md-1">
+      <img src="//picsum.photos/id/24/600" class="w-100 image-responsive">
+
+    </div>
+  </div>
+
+  <hr class="featurette-divider">
+
+  <div class="row featurette align-items-center">
+    <div class="col-md-7">
+      <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
+      <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
+    </div>
+    <div class="col-md-5">
+      <img src="//picsum.photos/id/25/600" class="w-100 image-responsive">
+
+    </div>
+  </div>
+</div>
+
+    <hr class="my-3">
+
+<%= render 'shared/site_footer' %>

data/lib/generators/frontsite/templates/pricing.html.erb

@@ -0,0 +1,117 @@
+<% content_for :title, 'Awesome Site | Pricing' %>
+
+<%= render 'shared/site_navigation' %>
+
+<main class="container-fluid">
+  <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
+    <div class="col">
+      <div class="card mb-4 rounded-3 shadow-sm">
+        <div class="card-header py-3">
+          <h4 class="my-0 fw-normal">Free</h4>
+        </div>
+        <div class="card-body">
+          <h1 class="card-title pricing-card-title">$0<small class="text-muted fw-light">/mo</small></h1>
+          <ul class="list-unstyled mt-3 mb-4">
+            <li>10 users included</li>
+            <li>2 GB of storage</li>
+            <li>Email support</li>
+            <li>Help center access</li>
+          </ul>
+          <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button>
+        </div>
+      </div>
+    </div>
+    <div class="col">
+      <div class="card mb-4 rounded-3 shadow-sm">
+        <div class="card-header py-3">
+          <h4 class="my-0 fw-normal">Pro</h4>
+        </div>
+        <div class="card-body">
+          <h1 class="card-title pricing-card-title">$15<small class="text-muted fw-light">/mo</small></h1>
+          <ul class="list-unstyled mt-3 mb-4">
+            <li>20 users included</li>
+            <li>10 GB of storage</li>
+            <li>Priority email support</li>
+            <li>Help center access</li>
+          </ul>
+          <button type="button" class="w-100 btn btn-lg btn-primary">Get started</button>
+        </div>
+      </div>
+    </div>
+    <div class="col">
+      <div class="card mb-4 rounded-3 shadow-sm border-primary">
+        <div class="card-header py-3 text-white bg-primary border-primary">
+          <h4 class="my-0 fw-normal">Enterprise</h4>
+        </div>
+        <div class="card-body">
+          <h1 class="card-title pricing-card-title">$29<small class="text-muted fw-light">/mo</small></h1>
+          <ul class="list-unstyled mt-3 mb-4">
+            <li>30 users included</li>
+            <li>15 GB of storage</li>
+            <li>Phone and email support</li>
+            <li>Help center access</li>
+          </ul>
+          <button type="button" class="w-100 btn btn-lg btn-primary">Contact us</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <h2 class="display-6 text-center mb-4">Compare plans</h2>
+
+  <div class="container">
+    <table class="table text-center">
+      <thead>
+        <tr>
+          <th style="width: 34%;"></th>
+          <th style="width: 22%;">Free</th>
+          <th style="width: 22%;">Pro</th>
+          <th style="width: 22%;">Enterprise</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row" class="text-start">Public</th>
+          <td><i class="bi bi-check text-success"></i></td>
+          <td><i class="bi bi-check text-success"></i></td>
+          <td><i class="bi bi-check text-success"></i></td>
+        </tr>
+        <tr>
+          <th scope="row" class="text-start">Private</th>
+          <td></td>
+          <td><i class="bi bi-check text-success"></i></td>
+          <td><i class="bi bi-check text-success"></i></td>
+        </tr>
+      </tbody>
+
+      <tbody>
+        <tr>
+          <th scope="row" class="text-start">Permissions</th>
+          <td><i class="bi bi-check text-success"></i></td>
+          <td><i class="bi bi-check text-success"></i></td>
+          <td><i class="bi bi-check text-success"></i></td>
+        </tr>
+        <tr>
+          <th scope="row" class="text-start">Sharing</th>
+          <td></td>
+          <td><i class="bi bi-check text-success"></i></td>
+          <td><i class="bi bi-check text-success"></i></td>
+        </tr>
+        <tr>
+          <th scope="row" class="text-start">Unlimited members</th>
+          <td></td>
+          <td><i class="bi bi-check text-success"></i></td>
+          <td><i class="bi bi-check text-success"></i></td>
+        </tr>
+        <tr>
+          <th scope="row" class="text-start">Extra security</th>
+          <td></td>
+          <td></td>
+          <td><i class="bi bi-check text-success"></i></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</main>
+
+<%= render 'shared/site_footer' %>

data/lib/generators/frontsite/templates/privacy_policy.html.erb

@@ -0,0 +1,3 @@
+<% content_for :title, 'Awesome Site | Privacy Policy' %>
+
+<%= render 'shared/site_navigation' %>

data/lib/generators/frontsite/templates/products.html.erb

@@ -0,0 +1,200 @@
+<% content_for :title, 'Awesome Site | Products' %>
+<%= render 'shared/site_navigation' %>
+
+<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
+  <div class="col-md-5 p-lg-5 mx-auto my-5">
+    <h1 class="display-4 fw-normal">Punny headline</h1>
+    <p class="lead fw-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
+    <a class="btn btn-outline-secondary" href="#">Coming soon</a>
+  </div>
+  <div class="product-device shadow-sm d-none d-md-block"></div>
+  <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
+</div>
+
+<div class="album py-5 bg-light">
+  <div class="container">
+
+    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
+      <div class="col">
+        <div class="card shadow-sm">
+          <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
+
+          <div class="card-body">
+            <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 class="d-flex justify-content-between align-items-center">
+              <div class="btn-group">
+                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+              </div>
+              <small class="text-muted">9 mins</small>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card shadow-sm">
+          <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
+
+          <div class="card-body">
+            <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 class="d-flex justify-content-between align-items-center">
+              <div class="btn-group">
+                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+              </div>
+              <small class="text-muted">9 mins</small>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card shadow-sm">
+          <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
+
+          <div class="card-body">
+            <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 class="d-flex justify-content-between align-items-center">
+              <div class="btn-group">
+                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+              </div>
+              <small class="text-muted">9 mins</small>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col">
+        <div class="card shadow-sm">
+          <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
+
+          <div class="card-body">
+            <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 class="d-flex justify-content-between align-items-center">
+              <div class="btn-group">
+                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+              </div>
+              <small class="text-muted">9 mins</small>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card shadow-sm">
+          <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
+
+          <div class="card-body">
+            <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 class="d-flex justify-content-between align-items-center">
+              <div class="btn-group">
+                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+              </div>
+              <small class="text-muted">9 mins</small>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card shadow-sm">
+          <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
+
+          <div class="card-body">
+            <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 class="d-flex justify-content-between align-items-center">
+              <div class="btn-group">
+                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+              </div>
+              <small class="text-muted">9 mins</small>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col">
+        <div class="card shadow-sm">
+          <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
+
+          <div class="card-body">
+            <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 class="d-flex justify-content-between align-items-center">
+              <div class="btn-group">
+                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+              </div>
+              <small class="text-muted">9 mins</small>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card shadow-sm">
+          <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
+
+          <div class="card-body">
+            <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 class="d-flex justify-content-between align-items-center">
+              <div class="btn-group">
+                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+              </div>
+              <small class="text-muted">9 mins</small>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card shadow-sm">
+          <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
+
+          <div class="card-body">
+            <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 class="d-flex justify-content-between align-items-center">
+              <div class="btn-group">
+                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
+              </div>
+              <small class="text-muted">9 mins</small>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<%= render 'shared/site_footer' %>
+
+<style type="text/css">
+  .product-device {
+  position: absolute;
+  right: 10%;
+  bottom: -30%;
+  width: 300px;
+  height: 540px;
+  background-color: #333;
+  border-radius: 21px;
+  transform: rotate(30deg);
+}
+
+.product-device::before {
+  position: absolute;
+  top: 10%;
+  right: 10px;
+  bottom: 10%;
+  left: 10px;
+  content: "";
+  background-color: rgba(255, 255, 255, .1);
+  border-radius: 5px;
+}
+
+.product-device-2 {
+  top: -25%;
+  right: auto;
+  bottom: 0;
+  left: 5%;
+  background-color: #e5e5e5;
+}
+</style>

data/lib/generators/frontsite/templates/site.html.erb

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= yield :title %></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
+  </head>
+  <body>
+
+    <%= yield %>
+
+  </body>
+</html>

data/lib/generators/frontsite/templates/site.scss

@@ -0,0 +1,60 @@
+/*
+  Place all the styles related to the matching controller here.
+  They will automatically be included in application.css.
+*/
+
+/* Styles bellow are taken from bootstrap examples */
+
+/*
+ * Globals
+ */
+
+
+/* Custom default button */
+.btn-secondary,
+.btn-secondary:hover,
+.btn-secondary:focus {
+  color: #333;
+  text-shadow: none; /* Prevent inheritance from `body` */
+}
+
+
+/*
+ * Base structure
+ */
+
+body {
+  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
+  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
+}
+
+.cover-container {
+  max-width: 42em;
+}
+
+
+/*
+ * Header
+ */
+
+.nav-masthead .nav-link {
+  padding: .25rem 0;
+  font-weight: 700;
+  color: rgba(255, 255, 255, .5);
+  background-color: transparent;
+  border-bottom: .25rem solid transparent;
+}
+
+.nav-masthead .nav-link:hover,
+.nav-masthead .nav-link:focus {
+  border-bottom-color: rgba(255, 255, 255, .25);
+}
+
+.nav-masthead .nav-link + .nav-link {
+  margin-left: 1rem;
+}
+
+.nav-masthead .active {
+  color: #fff;
+  border-bottom-color: #fff;
+}

data/lib/generators/frontsite/templates/site_controller.rb

@@ -0,0 +1,28 @@
+class SiteController < ApplicationController
+  def index
+  end
+
+  def about
+  end
+
+  def products
+  end
+
+  def pricing
+  end
+
+  def contact
+  end
+
+  def feed
+  end
+
+  def privacy_policy
+  end
+
+  def terms
+  end
+
+  def faqs
+  end
+end

data/lib/generators/frontsite/templates/site_helper.rb

@@ -0,0 +1,2 @@
+module SiteHelper
+end

data/lib/generators/frontsite/templates/terms.html.erb

@@ -0,0 +1,3 @@
+<% content_for :title, 'Awesome Site | Terms and Conditions' %>
+
+<%= render 'shared/site_navigation' %>

data/lib/tasks/frontsite_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :frontsite do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,87 @@
+--- !ruby/object:Gem::Specification
+name: frontsite
+version: !ruby/object:Gem::Version
+  version: 0.1.3
+platform: ruby
+authors:
+- kenliten
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2021-08-23 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 6.1.4
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 6.1.4
+description: Generate a full front site to your new rails app
+email:
+- kenliten@otonielreyes.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/frontsite_manifest.js
+- config/routes.rb
+- lib/frontsite.rb
+- lib/frontsite/engine.rb
+- lib/frontsite/version.rb
+- lib/generators/frontsite/install_generator.rb
+- lib/generators/frontsite/templates/_site_footer.html.erb
+- lib/generators/frontsite/templates/_site_navigation.html.erb
+- lib/generators/frontsite/templates/about.html.erb
+- lib/generators/frontsite/templates/contact.html.erb
+- lib/generators/frontsite/templates/faqs.html.erb
+- lib/generators/frontsite/templates/feed.html.erb
+- lib/generators/frontsite/templates/index.html.erb
+- lib/generators/frontsite/templates/pricing.html.erb
+- lib/generators/frontsite/templates/privacy_policy.html.erb
+- lib/generators/frontsite/templates/products.html.erb
+- lib/generators/frontsite/templates/site.html.erb
+- lib/generators/frontsite/templates/site.scss
+- lib/generators/frontsite/templates/site_controller.rb
+- lib/generators/frontsite/templates/site_helper.rb
+- lib/generators/frontsite/templates/terms.html.erb
+- lib/tasks/frontsite_tasks.rake
+homepage: https://github.com/kenliten/frontsite
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/kenliten/frontsite
+  documentation_uri: https://github.com/kenliten/frontsite
+  source_code_uri: https://github.com/kenliten/frontsite
+  changelog_uri: https://github.com/kenliten/frontsite/blob/main/CHANGELOG.md
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.2.15
+signing_key: 
+specification_version: 4
+summary: A frontsite generator tool
+test_files: []