geb 0.1.11 → 0.1.12

data/lib/geb/samples/bootstrap_jquery/blog/blog_post_1.html

@@ -6,30 +6,88 @@ Blog Post 1
 
 <% start: content %>
 
-<h1>Blog Post 1 Title</h1>
-
-<p class="lead">
-  This is the first blog post. It is very interesting and you should read it.
-</p>
-
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac purus nec
-  libero ultrices ultricies. Nullam nec nunc nec nunc ultricies ultricies. Ut
-  eget nunc nec nunc ultricies ultricies. Ut eget nunc nec nunc ultricies
-  ultricies. Ut eget nunc nec nunc ultricies ultricies. Ut eget nunc nec nunc
-  ultricies ultricies. Ut eget nunc nec nunc ultricies ultricies. Ut eget nunc
-  nec nunc ultricies ultricies. Ut eget nunc nec nunc ultricies ultricies. Ut
-  eget nunc nec nunc ultricies ultricies. Ut eget nunc nec nunc ultricies
-</p>
-
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac purus nec
-  libero ultrices ultricies. Nullam nec nunc nec nunc ultricies ultricies. Ut
-  eget nunc nec nunc ultricies ultricies. Ut eget nunc nec nunc ultricies
-  ultricies. Ut eget nunc nec nunc ultricies ultricies. Ut eget nunc nec nunc
-  ultricies ultricies. Ut eget nunc nec nunc ultricies ultricies. Ut eget nunc
-  nec nunc ultricies ultricies. Ut eget nunc nec nunc ultricies ultricies. Ut
-  eget nunc nec nunc ultricies ultricies. Ut eget nunc nec nunc ultricies
-</p>
+<main class="container mt-5">
 
+
+  <div class="row g-5">
+    <div class="col-md-8">
+
+      <article class="blog-post">
+        <h2 class="blog-post-title">Sample blog post</h2>
+        <p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>
+
+        <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
+        <hr>
+        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
+        <h2>Blockquotes</h2>
+        <p>This is an example blockquote in action:</p>
+        <blockquote class="blockquote">
+          <p>Quoted text goes here.</p>
+        </blockquote>
+        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
+        <h3>Example lists</h3>
+        <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:</p>
+        <ul>
+          <li>First list item</li>
+          <li>Second list item with a longer description</li>
+          <li>Third list item to close it out</li>
+        </ul>
+        <p>And this is an ordered list:</p>
+        <ol>
+          <li>First list item</li>
+          <li>Second list item with a longer description</li>
+          <li>Third list item to close it out</li>
+        </ol>
+        <p>And this is a definiton list:</p>
+        <dl>
+          <dt>HyperText Markup Language (HTML)</dt>
+          <dd>The language used to describe and define the content of a Web page</dd>
+          <dt>Cascading Style Sheets (CSS)</dt>
+          <dd>Used to describe the appearance of Web content</dd>
+          <dt>JavaScript (JS)</dt>
+          <dd>The programming language used to build advanced Web sites and applications</dd>
+        </dl>
+        <h2>Inline HTML elements</h2>
+        <p>HTML defines a long list of available inline tags, a complete list of which can be found on the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Mozilla Developer Network</a>.</p>
+        <ul>
+          <li><strong>To bold text</strong>, use <code class="language-plaintext highlighter-rouge">&lt;strong&gt;</code>.</li>
+          <li><em>To italicize text</em>, use <code class="language-plaintext highlighter-rouge">&lt;em&gt;</code>.</li>
+          <li>Abbreviations, like <abbr title="HyperText Markup Langage">HTML</abbr> should use <code class="language-plaintext highlighter-rouge">&lt;abbr&gt;</code>, with an optional <code class="language-plaintext highlighter-rouge">title</code> attribute for the full phrase.</li>
+          <li>Citations, like <cite>— Mark Otto</cite>, should use <code class="language-plaintext highlighter-rouge">&lt;cite&gt;</code>.</li>
+          <li><del>Deleted</del> text should use <code class="language-plaintext highlighter-rouge">&lt;del&gt;</code> and <ins>inserted</ins> text should use <code class="language-plaintext highlighter-rouge">&lt;ins&gt;</code>.</li>
+          <li>Superscript <sup>text</sup> uses <code class="language-plaintext highlighter-rouge">&lt;sup&gt;</code> and subscript <sub>text</sub> uses <code class="language-plaintext highlighter-rouge">&lt;sub&gt;</code>.</li>
+        </ul>
+        <p>Most of these elements are styled by browsers with few modifications on our part.</p>
+        <h2>Heading</h2>
+        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
+        <h3>Sub-heading</h3>
+        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
+        <pre><code>Example code block</code></pre>
+        <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
+      </article>
+
+
+    </div>
+
+    <div class="col-md-4">
+      <div class="position-sticky" style="top: 2rem;">
+        <div class="p-4 mb-3 bg-dark rounded">
+          <h4 class="fst-italic">Just Becasue</h4>
+          <p class="mb-0">Something interesting should go here. May the Geb bring you sites.</p>
+        </div>
+
+
+        <div class="p-4">
+          <h4 class="fst-italic">Elsewhere</h4>
+          <ol class="list-unstyled">
+            <li><a href="#">GitHub</a></li>
+            <li><a href="#">Twitter</a></li>
+            <li><a href="#">Facebook</a></li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</main>
 <% end: content %>

data/lib/geb/samples/bootstrap_jquery/blog/index.html

@@ -6,12 +6,45 @@ Blog
 
 <% start: content %>
 
-<h1>Welcome to the Blog</h1>
+<main class="container mt-5">
+  <div class="row p-4 p-md-5 mb-4 text-white rounded bg-dark">
+    <div class="col-md-6 px-3">
+      <h1 class="display-4 fst-italic">Title of a featured blog post</h1>
+      <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
+      <p class="lead mb-0"><a href="/blog/blog_post_1.html" class="text-white fw-bold">Continue reading...</a></p>
+    </div>
+    <div class="col-md-6 px-3">
+      <img class="img-fluid" src="/assets/images/hero.png" alt="">
+    </div>
+  </div>
 
-<ul>
-  <li><a href="blog_post_1.html">First Blog Post</a></li>
-  <li><a href="blog_post_2.html">Second Blog Post</a></li>
-  <li><a href="blog_post_3.html">Third Blog Post</a></li>
-</ul>
+  <div class="row mb-2">
+    <div class="col-md-6">
+      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+        <div class="col p-4 d-flex flex-column position-static">
+          <strong class="d-inline-block mb-2">Best Category</strong>
+          <h3 class="mb-0">Another Post We Wrote</h3>
+          <div class="mb-1 text-muted">July 7</div>
+          <p class="card-text mb-auto">Some short content, you get the point</p>
+          <a href="/blog/blog_post_1.html" class="stretched-link">Continue reading</a>
+        </div>
+      </div>
+    </div>
 
+    <div class="col-md-6">
+      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+        <div class="col p-4 d-flex flex-column position-static">
+          <strong class="d-inline-block mb-2 text-success">Super Interesting</strong>
+          <h3 class="mb-0">Yet Another Post</h3>
+          <div class="mb-1 text-muted">Nov 11</div>
+          <p class="card-text mb-auto">Some more short content, to wet your appetite.</p>
+          <a href="/blog/blog_post_1.html" class="stretched-link">Continue reading</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  
+
+</main>
 <% end: content %>

data/lib/geb/samples/bootstrap_jquery/geb.config.yml

@@ -1,4 +1,3 @@
-
 # Geb Configuration File
 # =======================
 #
@@ -33,7 +32,7 @@
 # Set the local web server port that the site will run on.
 # Geb server command will use this port to start the local web server
 # If you don't specify a port, geb server command auto selects a port
-#local_port: 4000
+local_port: 4000
 
 # Specifies the output directory, this directory will be used to store the output of
 # the build and release commands. 
@@ -66,4 +65,22 @@
 # The site template files will be archived into geb-template.tar.gz file and put within
 # the release directory.
 # e.g. template_paths: ["assets", "shared", "*.html", "site.webmanifest"]
-template_paths: ["assets", "shared", "*.html", "site.webmanifest", "geb.config.yml"]
+template_paths: ['assets', 'shared', '**/*.html', 'site.webmanifest', 'geb.config.yml']
+
+# If you want to specify site variables, you can do so here.  These variables will be available
+# to the site as site.site_variables.  You can specify different variables for different environments
+# by specifying the environment name and the variables for that environment. Site variables are
+# processed last, after templates and partials band can be used in pages, templates or partials.
+# to use a site variable, use the syntax _{variable_name}_. If a variable is missing Geb will 
+# simply replace the _{tag}_ with an empty string.
+# In the example below, use _{title}_ and _{site_url}_ in your pages, templates or partials.
+# Geb will use local or release version depending if you are running the build or release command.
+# Geb has the following site variables by default: page_relative_path, site_name, geb_version, page_title
+site_variables:
+  local:
+    title: "My Local Site"
+    site_url: "http://localhost:4000"
+  release:
+    title: "My Site"
+    site_url: "https://example.com"
+  

data/lib/geb/samples/bootstrap_jquery/index.html

@@ -1,11 +1,261 @@
 <% template: shared/templates/_site.html %>
 
 <% start: title %>
-This is a website title
+Sample Site - (bootstrap 5 & jquery 3.6.0)
 <% end: title %>
 
 <% start: content %>
 
-<p>Welcome to the site</p>
+<div class="container px-5 mt-5 mb-5">
+  <div class="row gx-5 align-items-center">
+    <div class="col-lg-6">
+        <img src="/assets/images/hero.png" class="img-fluid hero-image" alt="...">
+    </div>
+      <div class="col-lg-6">
+          <!-- Mashead text and app badges-->
+          <div class="mb-5 mb-lg-0 text-center text-lg-start">
+              <h1 class="display-4 lh-1 mb-3 mt-5">gem install <highlight>geb</highlight></h1>
+              <p class="lead fw-normal text-white mb-5">Build, manage and share static websites and templates, all hail geb the great</p>
+              <div class="d-flex flex-column flex-lg-row align-items-center">
+                  <a class="btn btn-success me-lg-3 mb-4 mb-lg-0" href="https://github.com/mainfram-work/geb.git" target="_blank" role="button"><i class="bi bi-github"></i> Github Repo</a>
+                  <a class="btn btn-success me-lg-3 mb-4 mb-lg-0" href="https://rubygems.org/gems/geb" target="_blank" role="button">
+                    <svg width="18px" height="18px" viewBox="-18.5 0 293 293" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+                      <g fill="#FFFFFF">
+                        <path d="M76.7478977,97.4337652 L76.585237,97.2711045 L40.4745594,133.381782 L128.148682,220.893244 L164.25936,184.945227 L215.822805,133.381782 L179.712127,97.2711045 L179.712127,97.1084438 L76.585237,97.1084438 L76.7478977,97.4337652 Z"></path>
+                        <path d="M127.823361,0.975964259 L0.1347034,74.1732837 L0.1347034,220.567923 L127.823361,293.765242 L255.512018,220.567923 L255.512018,74.1732837 L127.823361,0.975964259 L127.823361,0.975964259 Z M231.112911,206.579102 L127.823361,266.112921 L24.5338099,206.579102 L24.5338099,87.8367833 L127.823361,28.3029635 L231.112911,87.8367833 L231.112911,206.579102 L231.112911,206.579102 Z"></path>
+                      </g>
+                    </svg>
+                    Rubygems
+                  </a>
+              </div>
+          </div>
+      </div>
+  </div>
+</div>
 
+<div class="lead m-5">
+  <p class="m-2">
+    Geb, draws a symbolic connection to the ancient Egyptian god Geb, the deity of the Earth.
+    Just as Geb the god provides a stable foundation for the world, software Geb offers a robust 
+    and essential foundation for building and managing static websites, which are the very bedrock
+    of the web. 
+  </p>
+</div>
+
+<div class="container">
+  <ul class="nav nav-tabs bg-transparent " id="myTab" role="tablist">
+    <li class="nav-item" role="presentation">
+      <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#installation" type="button" role="tab" aria-controls="home" aria-selected="true">Installation</button>
+    </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#workflow" type="button" role="tab" aria-controls="profile" aria-selected="false">Typical Workflow</button>
+    </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#templates" type="button" role="tab" aria-controls="contact" aria-selected="false">Working With Site Templates</button>
+    </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#sitestructure" type="button" role="tab" aria-controls="contact" aria-selected="false">Site Structure</button>
+    </li>
+    <li class="nav-item" role="presentation">
+      <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#pagestemplatespartials" type="button" role="tab" aria-controls="contact" aria-selected="false">Pages, Templates and Partials</button>
+    </li>
+  </ul>
+  <div class="tab-content" id="myTabContent">
+    <div class="tab-pane fade show active" id="installation" role="tabpanel" aria-labelledby="home-tab">
+      <a name="installation"></a>
+<pre class="code-block mb-5">
+  <h4>Installation</h4>
+  <code>
+    <span class="comment"># as simple as installing a ruby gem</span>
+    <span class="prompt">$</span> gem <strong>install</strong> geb
+
+    <span class="comment"># installing from source is just as simple</span>
+    <span class="prompt">$</span> <strong>git</strong> clone https://github.com/mainfram-work/geb.git
+    <span class="prompt">$</span> <strong>cd</strong> geb
+    <span class="prompt">$</span> <strong>bundle</strong> install
+    <span class="prompt">$</span> <strong>rake</strong> test
+    <span class="prompt">$</span> <strong>rake</strong> build
+    <span class="prompt">$</span> <strong>rake</strong> install
+
+    <span class="comment"># list all available geb commands and get help for each individual geb command</span>
+    <span class="prompt">$</span> geb <strong>help</strong>
+    <span class="prompt">$</span> geb &lt;command&gt; <strong>help</strong>
+  </code>
+</pre>
+    </div>
+    <div class="tab-pane fade" id="workflow" role="tabpanel" aria-labelledby="profile-tab">
+      <a name="typical_workflow"></a>
+<pre class="code-block mb-5">
+  <h4>Typical <strong>Workflow</strong></h4>
+  <code>
+    <span class="comment"># initialize a new site in the directory nexthing</span>
+    <span class="prompt">$</span> geb <strong>init</strong> nexthing
+    <span class="prompt">$</span> cd nexthing
+
+    <span class="comment"># build the site</span>
+    <span class="prompt">$</span> geb <strong>build</strong>
+
+    <span class="comment"># start a local web server to access your built site</span>
+    <span class="prompt">$</span> geb <strong>server</strong>
+
+    <span class="comment"># build a release version of the site</span>
+    <span class="prompt">$</span> geb <strong>release</strong>
+
+    <span class="comment"># upload the released site to your remote server</span>
+    <span class="prompt">$</span> geb <strong>upload</strong>
+  </code>
+</pre>
+    </div>
+    <div class="tab-pane fade" id="templates" role="tabpanel" aria-labelledby="contact-tab">
+      <a name="site_templates"></a>
+<pre class="code-block mb-5">
+  <h4>Working with <strong>site templates</strong></h4>
+  <code>
+    <span class="comment"># get started with one of the built in templates (full list on our <a href="#"><i class="bi bi-github"></i> github page</a>)</span>
+    <span class="prompt">$</span> geb <strong>init</strong> nexthing --template <strong>bootstrap_jquery</strong> 
+    <span class="prompt">$</span> cd nexthing
+
+    <span class="comment"># create a template from your own site, it will upload with the rest of your site</span>
+    <span class="prompt">$</span> geb <strong>release</strong> --with_template
+
+    <span class="comment"># you can initialize new projects based on your previous projects</span>
+    <span class="prompt">$</span> geb <strong>init</strong> nexthing --template /path/to/some/other/site
+
+    <span class="comment"># you can also initialize new projects using other people's deployed templates</span>
+    <span class="prompt">$</span> geb <strong>init</strong> nexthing --template https://www.example.com/
+  </code>
+</pre>
+  </div>
+  <div class="tab-pane fade" id="sitestructure" role="tabpanel" aria-labelledby="home-tab">
+    <pre class="code-block mb-5">
+      <h4>Site Structure, some basics</h4>
+      You can structure geb sites how ever you want.  
+      Here is a default structure that is created when you initialize a new site with geb.
+      The structure below is for the site you are currently viewing. 
+      There are several files and directories required by geb that are <code>highlighted</code>
+    
+      ├── <code>assets</code>                    # assets directory for images, css, js, etc.
+        ├── images                  <span class="comment"># images directory</span>
+        ├── css                     <span class="comment"># css directory</span>
+        ├── js                      <span class="comment"># js directory</span>
+      ├── blog                      <span class="comment"># just a directory to hold blog posts </span>
+        ├── blog_post_1.html        <span class="comment"># a sample blog post</span>
+        ├── index.html              <span class="comment"># the blog index page</span>
+      ├── <code>geb.config.yml</code>            # the site configuration file  
+      ├── index.html                <span class="comment"># site index pag, this page</span>
+      ├── page.html                 <span class="comment"># another page</span>
+      ├── <code>output</code>                    # the directory where the built site is output
+        ├── <code>local</code>                   # local build directory, this is where site is serverd from
+        ├── <code>release</code>                 # release build directory, this is we you would upload to a remote server
+      ├── shared                    <span class="comment"># shared directory for partials, templates, etc.</span>
+        ├── partials                <span class="comment"># partials directory</span>
+          ├── _analytics.html       <span class="comment"># partial with site analytics</span>
+          ├── _footer.html          <span class="comment"># footer partial</span>
+          ├── _global_assets.html   <span class="comment"># global assets partial (js and css references)</span>
+          ├── _header.html          <span class="comment"># header partial</span>
+          ├── _meta_tags.html       <span class="comment"># site mata tags partial</span>
+        ├── templates               <span class="comment"># templates directory</span>
+        ├── _blog_post.html         <span class="comment"># template for blog pages</span>
+        ├── _site.html              <span class="comment"># template for general site pages</span>
+      ├── site.webmanifest          <span class="comment"># site webmanifest file</span>
+    
+      Files that start with _ are partials or templates and are not meant to be served directly.
+      You won't see these files in the output directory.
+      
+      All references to assets (images, css, js, etc.) as well as links should be 
+      <code>relative to the site root.</code>
+    
+      It is possible to configure geb to use different directories for assets or output.
+      However, geb.config.yml must be updated to reflect these changes and located 
+      in the site root. Check geb.config.yml for more information.
+    
+      The rest is up to you.  We like the convention of putting partials and templates in the 
+      shared directory, but you can put them anywhere. You can create any directory structure
+      that makes sense for your site. 
+    
+    </pre>
+    </div>  
+    <div class="tab-pane fade" id="pagestemplatespartials" role="tabpanel" aria-labelledby="home-tab">
+<pre class="code-block mb-5">
+  <h4>Pages, Templates and Partials</h4>
+  Below are some examples of how to use pages, templates and partials with geb.
+  Read the examples, discussion is after the examples.
+  <hr>
+  <h5>Page Example <small><span class="comment">(e.g. /index.html)</span></small></h5>
+  <code>&lt;% template: shared/templates/_site.html %&gt;</code>
+  
+  <code>&lt;% start: title %&gt;</code>
+    Page Title
+  <code>&lt;% end: title %&gt;</code>
+  
+  <code>&lt;% start: content %&gt;</code>
+    This is page content
+    <code>&lt;% partial: shared/partials/_featured_product.html %&gt;</code>
+  <code>&lt;% end: content %&gt;</code>
+
+  <h5>Template Example <small><span class="comment">(e.g. /shared/templates/_site.html)</span></small></h5>
+  <code>&lt;% template: shared/templates/_site.html %&gt;</code>
+  
+  &lt;!DOCTYPE html&gt;
+  &lt;html&gt;
+    &lt;head&gt;
+      &lt;title&gt;<code>&lt;% insert: title %&gt;</code>&lt;/title&gt;
+        &lt;% partial: shared/partials/_analytics.html %&gt;
+        &lt;% partial: shared/partials/_meta_tags.html %&gt;
+        &lt;% partial: shared/partials/_global_assets.html %&gt;
+    &lt;/head&gt;
+    &lt;body&gt;
+      &lt;% partial: shared/partials/_header.html %&gt;
+      <code>&lt;% insert: content %&gt;</code>
+      &lt;% partial: shared/partials/_footer.html %&gt;
+    &lt;/body&gt;
+  &lt;/html&gt;
+  
+  <h5>Partial Example <small><span class="comment">(e.g. /shared/partials/_featued_product.html)</span></small></h5>
+  &lt;h1&gt;Best Product Ever&lt;h1&gt;
+  &lt;p&gt;This is the best product ever&lt;/p&gt;
+  <code>&lt;% partial: shared/partials/_product_analytics.html %&gt;</code>
+  
+  <h5>Result Page</h5>
+    &lt;!DOCTYPE html&gt;
+    &lt;html&gt;
+      &lt;head&gt;
+        &lt;title&gt;Page Title&lt;/title&gt;
+        <span class="comment">&lt;!-- content from shared/partials/_analytics.html --&gt;</span>
+        <span class="comment">&lt;!-- content from shared/partials/_meta_tags.html --&gt;</span>
+        <span class="comment">&lt;!-- content from shared/partials/_global_assets.html --&gt;</span>
+      &lt;/head&gt;
+      &lt;body&gt;
+        <span class="comment">&lt;!-- content from shared/partials/_header.html --&gt;</span>
+        This is page content
+        &lt;h1&gt;Best Product Ever&lt;h1&gt;
+        &lt;p&gt;This is the best product ever&lt;/p&gt;
+        <span class="comment">&lt;!-- content from shared/partials/_product_analytics.html --&gt;</span>
+        <span class="comment">&lt;!-- content from shared/partials/_footer.html --&gt;</span>
+      &lt;/body&gt;
+    &lt;/html&gt;
+  <hr>
+  - Pages are the actual content of the site. They are the only files that are served directly.
+  - Example page above uses a template found in /shared/templates/_site.html
+  - Templates are used to wrap pages in a common structure. They are not served directly.
+  - Example template above has two content blocks, title and content.
+  - Page above has those content areas filled in what ever is required
+  - Page <code>start: what_ever_name</code> and template <code>insert: what_ever_name</code> must have matching "names"
+  - If a page uses a template, the template must be defined at the top of the page.
+  - If a page uses a template, any content not in a "start: what_ever_name" -> "end: what_ever_name" block is ignored.
+  - Obviously, the "start: what_ever_name" -> "end: what_ever_name" must have matching "names"
+  - Partials are used to include common content in pages and templates. They are not served directly.
+  - Partials can be nested, but be careful not to create circular references.
+  - Thats about it... happy coding!
+</pre>
+    </div> 
+  </div>
+</div>
+
+
+
+
+
+
+  
 <% end: content %>

data/lib/geb/samples/bootstrap_jquery/page.html

@@ -5,7 +5,29 @@ This is another page
 <% end: title %>
 
 <% start: content %>
-
-<p>Welcome to the other page</p>
+<div class="px-4 py-5 my-5 text-center">
+  <img class="d-block mx-auto mb-4" src="/assets/images/hero.png" alt="" width="200" height="200">
+  <h1 class="display-5 fw-bold text-body-emphasis">All hail GEB the great</h1>
+  <div class="col-lg-6 mx-auto">
+    <p class="lead mb-4">
+      Geb, draws a symbolic connection to the ancient Egyptian god Geb, the deity of the Earth.
+      Just as Geb the god provides a stable foundation for the world, software Geb offers a robust 
+      and essential foundation for building and managing static websites, which are the very bedrock
+      of the web. 
+    </p>
+    <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
+      <a class="btn btn-lg btn-primary me-lg-3 mb-4 mb-lg-0" href="https://github.com/mainfram-work/geb.git" target="_blank" role="button"><i class="bi bi-github"></i> Github Repo</a>
+      <a class="btn btn-lg btn-outline-primary me-lg-3 mb-4 mb-lg-0 text-white" href="#" role="button">
+        <svg width="18px" height="18px" viewBox="-18.5 0 293 293" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+          <g fill="#FFFFFF">
+            <path d="M76.7478977,97.4337652 L76.585237,97.2711045 L40.4745594,133.381782 L128.148682,220.893244 L164.25936,184.945227 L215.822805,133.381782 L179.712127,97.2711045 L179.712127,97.1084438 L76.585237,97.1084438 L76.7478977,97.4337652 Z"></path>
+            <path d="M127.823361,0.975964259 L0.1347034,74.1732837 L0.1347034,220.567923 L127.823361,293.765242 L255.512018,220.567923 L255.512018,74.1732837 L127.823361,0.975964259 L127.823361,0.975964259 Z M231.112911,206.579102 L127.823361,266.112921 L24.5338099,206.579102 L24.5338099,87.8367833 L127.823361,28.3029635 L231.112911,87.8367833 L231.112911,206.579102 L231.112911,206.579102 Z"></path>
+          </g>
+        </svg>
+        Rubygems
+      </a>
+    </div>
+  </div>
+</div>
 
 <% end: content %>

data/lib/geb/samples/bootstrap_jquery/shared/partials/_footer.html

@@ -1,3 +1,5 @@
 
 <!-- Bootstrap Bundle -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+
+<%= partial: shared/partials/_geb.html %>

data/lib/geb/samples/bootstrap_jquery/shared/partials/_geb.html

@@ -0,0 +1,26 @@
+
+<style>
+  .geb-footer {
+    display: flex; flex-direction: column; justify-content: center; gap: 1rem; margin-top: 1rem; margin-bottom: 2rem;
+    .geb-badge-container { display: flex; justify-content: center; gap: 1rem; }
+    a { text-decoration: none; color: inherit; border: none;  img { cursor: pointer; } }
+    code { width: auto; display: none; margin: 1rem auto 0; background-color: #f8f9fa; padding: 0.3rem; border-radius: 0.25rem; font-size: 0.7rem;}
+  }
+</style>
+<script>
+  function toggle_geb_code() {
+    const code = document.querySelector('.geb-footer code');
+    code.innerHTML = code.innerHTML.replace('[site_url]', window.location.origin);
+    code.style.display = code.style.display === 'none' ? 'block' : 'none';
+    window.scrollTo(0, document.body.scrollHeight);
+  }
+</script>
+<div class="geb-footer">
+  <div class="geb-badge-container">
+    <a href="https://github.com/mainfram-work/geb" target="_blank"><img src="https://img.shields.io/badge/built_with-geb-9FD88D" alt="Built with Geb" /></a>
+    <a href="javascript:toggle_geb_code()"><img src="https://img.shields.io/badge/geb-site_template_available-9FD88D" alt="Geb Site Template Available" /></a>
+  </div>  
+  <code style="display: none;">
+    $ gem install geb<br />$ geb init new_site --template [site_url]
+  </code>
+</div>

data/lib/geb/samples/bootstrap_jquery/shared/partials/_header.html

@@ -0,0 +1,25 @@
+<nav class="navbar navbar-expand-lg">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="/">
+      <img src="/assets/images/apple-touch-icon.png" alt="" width="32" height="32" class="d-inline-block">
+      <strong>Sample Site</strong> <small>(bootstrap 5 & jquery 3.6.0)</small>
+    </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 ms-auto mb-2 mb-lg-0">
+        <li class="nav-item">
+          <a class="nav-link active" aria-current="page" href="/index.html">Home</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/page.html">Sample Page</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/blog/index.html">Blog</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+

data/lib/geb/samples/bootstrap_jquery/shared/partials/_meta_tags.html

@@ -17,7 +17,7 @@
 
 <!-- Site manifest -->
 <link rel="canonical"                   href="_{site_url}_/_{relative_path}_" />
-<link rel="manifest"  type="image/png"  href="/site.webmanifest" />
+<link rel="manifest"  type="image/png"  href="_{site_url}_/site.webmanifest" />
 
 <!-- Open Graph -->
 <meta property="og:type"          content="website" />

data/lib/geb/samples/bootstrap_jquery/shared/templates/_blog_post.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+
+    <title><%= insert: title %></title>
+
+    <%= partial: shared/partials/_analytics.html %>
+    <%= partial: shared/partials/_meta_tags.html %>
+    <%= partial: shared/partials/_global_assets.html %>
+    
+  </head>
+  <body>
+    
+    <%= partial: shared/partials/_header.html %>
+    <%= insert: content %>
+    <%= partial: shared/partials/_footer.html %>
+
+  </body>
+</html>

data/lib/geb/samples/bootstrap_jquery/site.webmanifest

@@ -1 +1 @@
-{"name":"","short_name":"","icons":[{"src":"/assets/images/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/assets/images/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{"name":"","short_name":"","icons":[{"src":"_{site_url}_/assets/images/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"_{site_url}_/assets/images/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

data/lib/geb/samples/geb.config.yml

@@ -67,4 +67,21 @@
 # the release directory.
 # e.g. template_paths: ["assets", "shared", "*.html", "site.webmanifest"]
 #template_paths: []
+
+# If you want to specify site variables, you can do so here.  These variables will be available
+# to the site as site.site_variables.  You can specify different variables for different environments
+# by specifying the environment name and the variables for that environment. Site variables are
+# processed last, after templates and partials band can be used in pages, templates or partials.
+# to use a site variable, use the syntax _{variable_name}_. If a variable is missing Geb will 
+# simply replace the _{tag}_ with an empty string.
+# In the example below, use _{title}_ and _{site_url}_ in your pages, templates or partials.
+# Geb will use local or release version depending if you are running the build or release command.
+# Geb has the following site variables by default: page_relative_path, site_name, geb_version, page_title
+#site_variables:
+#  local:
+#    title: "My Local Site"
+#    site_url: "http://localhost:4000"
+#  release:
+#    title: "My Site"
+#    site_url: "https://example.com"