Update nav bar to support links from metadata

RockSolt · Oct 9, 2024 · 637963a · 637963a
1 parent e17f51a
commit 637963a
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 13 deletions.
diff --git a/src/_components/shared/.keep b/src/_components/shared/.keep
diff --git a/src/_components/shared/navbar.erb b/src/_components/shared/navbar.erb
diff --git a/src/_components/shared/navbar.rb b/src/_components/shared/navbar.rb
diff --git a/src/_data/site_metadata.yml b/src/_data/site_metadata.yml
@@ -11,3 +11,11 @@ description: >-
   Rockridge Solutions is a boutique software consulting firm that has been helping clients tell
   the story of their businesses for 20 years. Let Todd and John leverage the power of Ruby on 
   Rails to help tell your story.
+
+menu:
+  # home:
+  #   - name: Blog
+  #     url: "/posts"
+  post:
+    - name: Rockridge Solutions
+      url: "/"
diff --git a/src/_layouts/default.erb b/src/_layouts/default.erb
@@ -4,7 +4,7 @@
     <%= render "head", metadata: site.metadata, title: data.title %>
   </head>
   <body class="<%= data.layout %> <%= data.page_class %> postcard">
-    <%= render Shared::Navbar.new(metadata: site.metadata, resource: resource) %>
+    <%= render "navbar", links: site.metadata.menu[data.layout] %>
 
     <main class="main container">
       <%= yield %>

diff --git a/src/_layouts/post.erb b/src/_layouts/post.erb
@@ -2,6 +2,17 @@
 layout: default
 ---
 
-<h1><%= data.title %></h1>
+<section class="hero is-small">
+  <div class="hero-body">
+    <p class="title has-text-white"><%= data.title %></p>
+    <p class="subtitle has-text-white"><%= data.subtitle %></p>
+  </div>
+</section>
 
-<%= yield %>
+<section class="section">
+  <article class="box">
+    <div class="content">
+      <%= yield %>
+    </div>
+  </article>
+</section>
diff --git a/src/_partials/_head.erb b/src/_partials/_head.erb
@@ -11,8 +11,8 @@
 <meta property="og:description" content="<%= resource.data.og_description %>">
 <meta property="og:image" content="<%= resource.data.og_image %>">
 <link rel="stylesheet" href="<%= asset_path :css %>" />
-<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
 <script src="<%= asset_path :js %>" defer></script>
 <%= live_reload_dev_js %>
diff --git a/src/_partials/_navbar.erb b/src/_partials/_navbar.erb
@@ -0,0 +1,14 @@
+<nav class="navbar is-primary has-shadow" role="navigation" aria-label="main navigation">
+
+  <%# is-active prevents the menu from disappearing < 1024px %>
+  <%# container keeps the menu within the same boundaries as the main content %>
+  <div class="navbar-menu is-active container">
+    <div class="navbar-end">
+      <% (links || []).each do |link| %>
+        <a class="navbar-item has-text-white has-text-weight-bold" href="<%= link.url %>">
+          <%= link.name %>
+        </a>
+      <% end %>
+    </div>
+  </div>
+</nav>