[PLAY-739] Rebuild Getting Started

playbook-website/app/controllers/pages_controller.rb

@@ -34,8 +34,27 @@ def enable_dark_mode
   end
 
   def getting_started
+    render "pages/getting_started/index"
+  end
+
+  def getting_started_rails
     @rails_getting_started = Rails.root.join("app/views/pages/getting_started_partials/_rails_getting_started.md").read
+    render "pages/getting_started/rails"
+  end
+
+  def getting_started_react
     @react_getting_started = Rails.root.join("app/views/pages/getting_started_partials/_react_getting_started.md").read
+    render "pages/getting_started/react"
+  end
+
+  def getting_started_rails_react
+    @rails_react_getting_started = Rails.root.join("app/views/pages/getting_started_partials/_rails_react_getting_started.md").read
+    render "pages/getting_started/rails_react"
+  end
+
+  def getting_started_html_css
+    @html_css_getting_started = Rails.root.join("app/views/pages/getting_started_partials/_html_css_getting_started.md").read
+    render "pages/getting_started/html"
   end
 
   def changelog

playbook-website/app/javascript/packs/application.js

@@ -8,6 +8,7 @@ import 'playbook-ui/dist/playbook-rails'
 import 'playbook-ui/dist/playbook-doc' // playbook-react doc components
 import '@fortawesome/fontawesome-pro/js/fontawesome.min.js'
 import '@fortawesome/fontawesome-pro/js/regular.min.js'
+import '@fortawesome/fontawesome-pro/js/brands.min.js'
 
 import '../site_styles/main.scss'
 

playbook-website/app/javascript/site_styles/_getting_started.scss

@@ -5,7 +5,31 @@
 .getting_started {
   display: flex;
   justify-content: center;
-  padding: $space_lg $space_xl;
+  padding: $space_lg 0;
+  [class^=pb_bread_crumbs_kit] {
+    border-color: $transparent;
+  }
+  [class^=pb_selectable_card] {
+    [class*=pb_icon_kit] {
+      color: $text_lt_lighter;
+    }
+  }
+  [class^=pb_bread_crumbs_kit] {
+    [class*=pb_icon_kit],
+    [class*=pb_title_kit_4] {
+      &:not(.current) {
+        color: $text_lt_light !important;
+      }  
+    }
+  }
+  [class^=pb_selectable_card_icon_kit] {
+    label {
+      padding: $space_xl 0;
+    }
+    .pb_body_kit_light {
+      display: none;
+    }
+  }
   .markdown {
     code {
       // override
@@ -15,5 +39,9 @@
         border-radius: $border_rad_heavy;
       }
     }
+    img {
+      width: 100%;
+      height: auto;
+    }
   }
-}
+}

playbook-website/app/javascript/site_styles/_site-style.scss

@@ -10,6 +10,8 @@ $nav_breakpoint: breakpoint("lg");
 body {
   overflow-x: hidden;
   position: relative;
+  display: flex;
+  flex-direction: column;
   &.visual_guidelines,
   &.kits {
     overflow-y: hidden;
@@ -157,6 +159,7 @@ body {
   &--footer {
     background-color: $royal;
     padding: $space_lg * 2 $space_lg * 3;
+    margin-top: auto;
     .inner-footer-wrapper {
       max-width: 1350px;
       margin: 0 auto;

playbook-website/app/views/pages/getting_started/html.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails("flex", props:{ classname: "getting_started", justify: "center" })  do %>
+  <%= pb_rails("flex/flex_item", props:{ max_width: "md", classname: "markdown" })  do %>
+    <div>
+      <%= pb_rails("bread_crumbs", props: { aria: { label: "Breadcrumb Navigation" }, margin_bottom: "xl" }) do%>
+        <%= pb_rails("icon", props: { icon: "flag-checkered"}) %>
+        <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/getting_started" }) do %> 
+          <%= pb_rails("title", props: { size: 4, text: "Getting Started", tag: "span" }) %>
+        <%end%>
+        <%= pb_rails("icon", props: { icon: "file-code", classname: "current" }) %>
+        <%= pb_rails("bread_crumbs/bread_crumb_item") do %> 
+          <%= pb_rails("title", props: { size: 4, text: "HTML & CSS", tag: "span", classname: "current" }) %>
+        <%end%>
+      <%end%>
+    </div>
+    <%= pb_rails("title", props: { text: "HTML & CSS", tag: "h1", size: 1, margin_bottom: "sm" }) %>
+    <%= pb_rails("body", props: { margin_bottom: "md"}) do %>
+      If you have another environment like PHP you can still use Playbook through the raw CSS and using the copy 
+      HTML button on and Rails kit. See details below:
+    <% end %>
+    <%= markdown(@html_css_getting_started) %>
+  <% end %>
+<% end %>

playbook-website/app/views/pages/getting_started/index.html.erb

@@ -0,0 +1,58 @@
+<%= pb_rails("flex", props:{ classname: "getting_started", justify: "center" })  do %>
+  <%= pb_rails("flex/flex_item", props:{ max_width: "md"})  do %>
+    <%= pb_rails("title", props: { text: "Getting Started", tag: "h1", size: 1, margin_bottom: "sm" }) %>
+    <%= pb_rails("body", props: { margin_bottom: "md"}) do %>
+      Playbook is an open source design system built for Ruby on Rails, React, and very soon SwiftUI. Playbook is built 
+      & maintained by the User Experience & Development teams at <a href="https://powerhrg.com/">Power Home Remodeling</a>. Playbook is packaged 
+      up as a <a href="https://rubygems.org/gems/playbook_ui">RubyGem</a> and <a href="https://www.npmjs.com/package/playbook-ui">NPM Package</a> and can work with a variety of setups.
+    <% end %>
+    <%= pb_rails("section_separator", props: { margin_y: "lg" }) %>
+    <%= pb_rails("flex", props:{ justify: "center" }) do %>
+      <%= pb_rails("caption", props: { size: 'lg', margin_y: "lg" }) do %>
+        What type of setup do you have?
+      <% end %>
+    <% end %>
+    <%= pb_rails("flex", props:{ gap: "sm", wrap:true }) do %>
+      <%= pb_rails("flex/flex_item", props: { 
+        flex: 1 
+      }) do %>
+        <a href="/getting_started/rails">
+          <%= pb_rails("selectable_card_icon", props: {
+            icon: "gem", 
+            title_text: "Ruby on Rails",
+          }) %>
+        </a>
+      <% end %>
+      <%= pb_rails("flex/flex_item", props: { 
+        flex: 1 
+      }) do %>
+        <a href="/getting_started/rails_react">
+          <%= pb_rails("selectable_card_icon", props: {
+            icon: "object-intersect", 
+            title_text: "Rails & React",
+          }) %>
+        </a>
+      <% end %>
+      <%= pb_rails("flex/flex_item", props: { 
+        flex: 1 
+      }) do %>
+        <a href="/getting_started/react">
+          <%= pb_rails("selectable_card_icon", props: {
+            icon: "atom", 
+            title_text: "React",
+          }) %>
+        </a>
+      <% end %>
+      <%= pb_rails("flex/flex_item", props: { 
+        flex: 1 
+      }) do %>
+        <a href="/getting_started/html" id="html-setup">
+          <%= pb_rails("selectable_card_icon", props: {
+            icon: "file-code", 
+            title_text: "HTML & CSS", 
+          }) %>
+        </a>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

playbook-website/app/views/pages/getting_started/rails.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails("flex", props:{ classname: "getting_started", justify: "center" })  do %>
+  <%= pb_rails("flex/flex_item", props:{ max_width: "md", classname: "markdown" })  do %>
+    <div>
+      <%= pb_rails("bread_crumbs", props: { aria: { label: "Breadcrumb Navigation" }, margin_bottom: "xl" }) do%>
+        <%= pb_rails("icon", props: { icon: "flag-checkered"}) %>
+        <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/getting_started" }) do %> 
+          <%= pb_rails("title", props: { size: 4, text: "Getting Started", tag: "span" }) %>
+        <%end%>
+        <%= pb_rails("icon", props: { icon: "gem", classname: "current" }) %>
+        <%= pb_rails("bread_crumbs/bread_crumb_item") do %> 
+          <%= pb_rails("title", props: { size: 4, text: "Ruby on Rails", tag: "span", classname: "current" }) %>
+        <%end%>
+      <%end%>
+    </div>
+    <%= pb_rails("title", props: { text: "Ruby on Rails Setup", tag: "h1", size: 1, margin_bottom: "sm" }) %>
+    <%= pb_rails("body", props: { margin_bottom: "md"}) do %>
+      Jumpstart your React app's UI development with Playbook's design system. Here's a few routes you can take 
+      to get you started:
+    <% end %>
+    <%= markdown(@rails_getting_started) %>
+  <% end %>
+<% end %>

playbook-website/app/views/pages/getting_started/rails_react.erb

@@ -0,0 +1,22 @@
+<%= pb_rails("flex", props:{ classname: "getting_started", justify: "center" })  do %>
+  <%= pb_rails("flex/flex_item", props:{ max_width: "md", classname: "markdown" })  do %>
+    <div>
+      <%= pb_rails("bread_crumbs", props: { aria: { label: "Breadcrumb Navigation" }, margin_bottom: "xl" }) do%>
+        <%= pb_rails("icon", props: { icon: "flag-checkered"}) %>
+        <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/getting_started" }) do %> 
+          <%= pb_rails("title", props: { size: 4, text: "Getting Started", tag: "span" }) %>
+        <%end%>
+        <%= pb_rails("icon", props: { icon: "object-intersect"}) %>
+        <%= pb_rails("bread_crumbs/bread_crumb_item") do %> 
+          <%= pb_rails("title", props: { size: 4, text: "Rails & React Setup", tag: "span", classname: "current" }) %>
+        <%end%>
+      <%end%>
+    </div>
+    <%= pb_rails("title", props: { text: "Rails & React Setup", tag: "h1", size: 1, margin_bottom: "sm" }) %>
+    <%= pb_rails("body", props: { margin_bottom: "md"}) do %>
+      Integrate Playbook's design system seamlessly into your Rails and React app with the Playbook Ruby Gem and React components.
+      Get started today with our easy-to-follow tutorial.
+    <% end %>
+    <%= markdown(@rails_react_getting_started) %>
+  <% end %>
+<% end %>

playbook-website/app/views/pages/getting_started/react.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails("flex", props:{ classname: "getting_started", justify: "center" })  do %>
+  <%= pb_rails("flex/flex_item", props:{ max_width: "md", classname: "markdown" })  do %>
+    <div>
+      <%= pb_rails("bread_crumbs", props: { aria: { label: "Breadcrumb Navigation" }, margin_bottom: "xl" }) do%>
+        <%= pb_rails("icon", props: { icon: "flag-checkered"}) %>
+        <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/getting_started" }) do %> 
+          <%= pb_rails("title", props: { size: 4, text: "Getting Started", tag: "span" }) %>
+        <%end%>
+        <%= pb_rails("icon", props: { icon: "atom", classname: "current" }) %>
+        <%= pb_rails("bread_crumbs/bread_crumb_item") do %> 
+          <%= pb_rails("title", props: { size: 4, text: "React", tag: "span", classname: "current" }) %>
+        <%end%>
+      <%end%>
+    </div>
+    <%= pb_rails("title", props: { text: "React Setup", tag: "h1", size: 1, margin_bottom: "sm" }) %>
+    <%= pb_rails("body", props: { margin_bottom: "md"}) do %>
+      Playbook's Ruby Gem makes it easy to use playbook with your favorite rails app. Here's a few routes you can take 
+      to get you started:
+    <% end %>
+    <%= markdown(@react_getting_started) %>
+  <% end %>
+<% end %>

playbook-website/app/views/pages/getting_started_partials/_html_css_getting_started.md

@@ -0,0 +1,50 @@
+#### Add the Playbook NPM Package
+
+```sh
+yarn add "playbook-ui@stable"
+```
+
+This will allow you to choose what version you want.
+
+```sh
+yarn install
+```
+
+#### Import the CSS
+
+```sass
+@import "playbook-ui/dis/playbook";
+ @import "playbook-ui/dist/reset";
+```
+
+#### Optionally you can import the Javascript if you want some of the interactivity
+This will add all the Javascript to use the popovers & graphs for example.
+
+```js
+import 'playbook-ui/dist/playbook-rails.js';
+```
+
+#### Navigate to the Rails Kits and copy the raw HTML from the examples
+
+![Copy the raw HTML from the examples](/images/getting_started/copy_html.png) 
+
+#### How to include CSS and Javascript Assets
+To include CSS and JavaScript files in an HTML document, follow these steps:
+1. Create a CSS file with the extension ".css" and a JavaScript file with the extension ".js". Place them in a directory on your server, preferably in a subdirectory named "css" or "js" respectively.
+2. Open the HTML file you want to add the assets to in a text editor.
+3. To include a CSS file in the HTML document, add the following code to the "head" section of the HTML document:
+
+```html
+<link rel="stylesheet" type="text/css" href="path/to/your/css/file.css">
+```
+
+Replace "path/to/your/css/file.css" with the actual path to your CSS file.
+4. To include a JavaScript file in the HTML document, add the following code to the "head" section of the HTML document:
+
+```html
+<script src="path/to/your/js/file.js"></script>
+```
+
+Replace "path/to/your/js/file.js" with the actual path to your JavaScript file.
+5. Save the HTML file and upload all the files (HTML, CSS, and JavaScript) to your server.
+6. Test your HTML document in a web browser to ensure that the assets are being loaded correctly.

playbook-website/app/views/pages/getting_started_partials/_rails_getting_started.md

@@ -1,5 +1,3 @@
-# Rails Getting Started (with Webpacker)
-
 #### Update your Gemfile
 ```sh
 gem 'playbook_ui'
@@ -37,49 +35,4 @@ or be selective
  @import "pb_body/body";
 ```
 
-From here all of our display kits should work for you nicely
-
-
-## Javascript Enabled Rails Kits
-To use kits with interactivity, and our graphs you need to bring in the NPM package.
-
-#### Add the Playbook NPM Package
-```sh
-yarn add "playbook-ui@stable"
-```
-
-This will allow you to choose what version you want.
-
-```sh
-yarn install
-```
-
-Now that you have the package installed you could import styles via JS
-
-```jsx
-@import "playbook-ui/dist/tokens/screen_sizes.scss";
-```
-
-
-#### Import all the Javascript Needed for Rails Kits
-
-This will add all the javascript to use the popovers, & graphs for example.
-
-```js
-import 'playbook-ui/dist/playbook-rails.js';
-```
-
-#### Add Inline Rails JS to Your Layout (Needed for Rails Graphs)
-
-```erb
-<%%= yield :pb_js %>
-```
-
-#### Add Font Awesome
-
-Playbook ships with font awesome but you’ll need to include it in your application
-
-```js
-//= require regular-min.js
-//= require fontawesome-min.js
-```
+From here all of our display kits should work for you nicely