chore: Update CSS for code blocks, sidebar, and feed XML files

jmservera · May 22, 2024 · 7232a45 · 7232a45
1 parent d0a1b67
commit 7232a45
Show file tree

Hide file tree

Showing 18 changed files with 224 additions and 247 deletions.
diff --git a/web/Gemfile b/web/Gemfile
@@ -37,4 +37,4 @@ gem "wdm", "~> 0.1.0", :platforms => [:mingw, :x64_mingw, :mswin]
 # kramdown v1, comment out this line.
 gem "kramdown-parser-gfm"
 
-gem 'webrick'
+gem 'webrick'
diff --git a/web/Gemfile.lock b/web/Gemfile.lock
@@ -23,6 +23,7 @@ GEM
     commonmarker (0.23.10)
     concurrent-ruby (1.2.3)
     connection_pool (2.4.1)
+    cssminify2 (2.0.1)
     dnsruby (1.72.1)
       simpleidn (~> 0.2.1)
     drb (2.2.1)
@@ -94,6 +95,7 @@ GEM
     html-pipeline (2.14.3)
       activesupport (>= 2)
       nokogiri (>= 1.4)
+    htmlcompressor (0.4.0)
     http_parser.rb (0.8.0)
     i18n (1.14.5)
       concurrent-ruby (~> 1.0)
@@ -136,6 +138,12 @@ GEM
     jekyll-mentions (1.6.0)
       html-pipeline (~> 2.3)
       jekyll (>= 3.7, < 5.0)
+    jekyll-minifier (0.1.10)
+      cssminify2 (~> 2.0)
+      htmlcompressor (~> 0.4)
+      jekyll (>= 3.5)
+      json-minify (~> 0.0.3)
+      uglifier (~> 4.1)
     jekyll-optional-front-matter (0.3.2)
       jekyll (>= 3.0, < 5.0)
     jekyll-paginate (1.1.0)
@@ -205,6 +213,9 @@ GEM
       gemoji (>= 3, < 5)
       html-pipeline (~> 2.2)
       jekyll (>= 3.0, < 5.0)
+    json (2.7.2)
+    json-minify (0.0.3)
+      json (> 0)
     kramdown (2.4.0)
       rexml
     kramdown-parser-gfm (1.1.0)
@@ -252,6 +263,8 @@ GEM
       ethon (>= 0.9.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
+    uglifier (4.2.0)
+      execjs (>= 0.3.0, < 3)
     unicode-display_width (1.8.0)
     uri (0.13.0)
     webrick (1.8.1)
@@ -262,6 +275,7 @@ PLATFORMS
 DEPENDENCIES
   github-pages (~> 231)
   jekyll-feed (~> 0.6)
+  jekyll-minifier
   kramdown-parser-gfm
   minima (~> 2.0)
   tzinfo (~> 1.2)

diff --git a/web/_config.yml b/web/_config.yml
@@ -25,8 +25,9 @@ github_username:  jmservera
 # Build settings
 markdown: kramdown
 theme: minima
-plugins:
-  - jekyll-feed
+# plugins:
+#   - jekyll-feed
+#   - jekyll-minifier
 
 # Exclude from processing.
 # The following items will not be processed, by default. Create a custom list

diff --git a/web/_includes/custom-head.html b/web/_includes/custom-head.html
@@ -0,0 +1 @@
+<link rel="stylesheet" href="{{ "/assets/css/custom.css" | relative_url }}">
diff --git a/web/_includes/head.html b/web/_includes/head.html
@@ -0,0 +1,15 @@
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {%- seo -%}
+    <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+    {%- feed_meta -%}
+    {%- if jekyll.environment == 'production' and site.google_analytics -%}
+      {%- include google-analytics.html -%}
+    {%- endif -%}
+
+    <!--custom head-->
+    {%- include custom-head.html -%}
+
+  </head>
diff --git a/web/_layouts/custom.html b/web/_layouts/custom.html
@@ -1,12 +1,6 @@
 ---
 layout: page
 ---
-<head>
-    <!-- other head elements -->
-    <link rel="stylesheet" href="{{ "/assets/css/sidebar.css" | relative_url }}">
-    <link rel="stylesheet" href="{{ "/assets/css/code.css" | relative_url }}">
-</head>
-
 <div id="sidebar-index"></div>
 
 {{ content }}
@@ -16,20 +10,34 @@
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script lang="JavaScript">
 $(document).ready(function() {
-  // Find all the headings in the content
-  var headings = $('.page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6');
+  var hierarchy = [$('<ul>')];
+  var currentLevel = 2;
 
-
-  // Create a link for each heading
+  var headings = $('.page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6');
   headings.each(function(i, heading) {
+    var level = parseInt(heading.tagName.slice(1));
     var id = $(heading).attr('id');
     var text = $(heading).text();
     var link = $('<a>').attr('href', '#' + id).text(text);
+    var item = $('<li>').append(link);
 
-    // Add the link to the sidebar index
-    $('#sidebar-index').append(link);
+    while (level > currentLevel) {
+      var newList = $('<ul>');
+      hierarchy[hierarchy.length - 1].append(newList);
+      hierarchy.push(newList);
+      currentLevel++;
+    }
+
+    while (level < currentLevel) {
+      hierarchy.pop();
+      currentLevel--;
+    }
+
+    hierarchy[hierarchy.length - 1].append(item);
   });
 
+  $('#sidebar-index').append(hierarchy[0]);
+
   $('pre code').each(function() {
     var button = $('<button>').attr('type', 'button').attr('title','Copy').addClass('copy-button').text('📋');
     $(this).parent().prepend(button);

diff --git a/web/_site/assets/css/code.css → web/_sass/_code.scss b/web/_site/assets/css/code.css → web/_sass/_code.scss
diff --git a/web/_sass/_sidebar.scss b/web/_sass/_sidebar.scss
@@ -0,0 +1,22 @@
+#sidebar-index {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 200px;
+  height: 100%;
+  padding: 1em;
+  background-color: #f9f9f9;
+  overflow: auto;
+  border-left: 1px solid #ccc;
+}
+
+#sidebar-index a {
+  display: block;
+  margin-bottom: 0.5em;
+}
+
+@media screen and (max-width: 1200px) {
+  #sidebar-index {
+    display: none;
+  }
+}
diff --git a/web/_site/404.html b/web/_site/404.html
@@ -1,25 +1,25 @@
 <!DOCTYPE html>
 <html lang="en"><head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
 <title>Demos and labs | Demos of tools and Azure services.</title>
 <meta name="generator" content="Jekyll v3.9.0" />
 <meta property="og:title" content="Demos and labs" />
 <meta property="og:locale" content="en_US" />
 <meta name="description" content="Demos of tools and Azure services." />
 <meta property="og:description" content="Demos of tools and Azure services." />
-<link rel="canonical" href="http://localhost:4000/404.html" />
-<meta property="og:url" content="http://localhost:4000/404.html" />
+<link rel="canonical" href="/404.html" />
+<meta property="og:url" content="/404.html" />
 <meta property="og:site_name" content="Demos and labs" />
 <meta property="og:type" content="website" />
 <meta name="twitter:card" content="summary" />
 <meta property="twitter:title" content="Demos and labs" />
 <script type="application/ld+json">
-{"@context":"https://schema.org","@type":"WebPage","description":"Demos of tools and Azure services.","headline":"Demos and labs","url":"http://localhost:4000/404.html"}</script>
+{"@context":"https://schema.org","@type":"WebPage","description":"Demos of tools and Azure services.","headline":"Demos and labs","url":"/404.html"}</script>
 <!-- End Jekyll SEO tag -->
-<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="Demos and labs" /></head>
-<body><header class="site-header" role="banner">
+<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="/feed.xml" title="Demos and labs" /><!--custom head--><link rel="stylesheet" href="/assets/css/custom.css">
+</head><body><header class="site-header" role="banner">
 
   <div class="wrapper"><a class="site-title" rel="author" href="/">Demos and labs</a><nav class="site-nav">
         <input type="checkbox" id="nav-trigger" class="nav-trigger" />
@@ -31,7 +31,7 @@
           </span>
         </label>
 
-        <div class="trigger"><a class="page-link" href="/">Home</a><a class="page-link" href="/prompt-engineering">Prompt Engineering Hands on Lab</a></div>
+        <div class="trigger"><a class="page-link" href="/">Home</a><a class="page-link" href="/prompt-engineering">Prompt Engineering Hands-on Lab</a></div>
       </nav></div>
 </header>
 <main class="page-content" aria-label="Content">

diff --git a/web/_site/assets/css/custom.css b/web/_site/assets/css/custom.css
@@ -0,0 +1,13 @@
+pre { position: relative; white-space: pre-wrap; /* Since CSS 2.1 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ overflow: auto; }
+
+pre code { overflow: visible; white-space: pre-wrap; word-wrap: break-word; }
+
+pre .copy-button { position: absolute; top: 0; right: 0; padding: 2px 5px; background-color: rgba(255, 255, 255, 0.5); border: 1px solid #ccc; cursor: pointer; }
+
+#copy-message { position: absolute; padding: 5px; background-color: #f9f9f9; border: 1px solid #ccc; font-size: 12px; }
+
+#sidebar-index { position: fixed; top: 0; right: 0; width: 200px; height: 100%; padding: 1em; background-color: #f9f9f9; overflow: auto; border-left: 1px solid #ccc; }
+
+#sidebar-index a { display: block; margin-bottom: 0.5em; }
+
+@media screen and (max-width: 1200px) { #sidebar-index { display: none; } }
diff --git a/web/_site/assets/css/sidebar.css b/web/_site/assets/css/sidebar.css
diff --git a/web/_site/feed.xml b/web/_site/feed.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.0">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-05-22T18:23:42+02:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Demos and labs</title><subtitle>Demos of tools and Azure services.</subtitle></feed>
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.0">Jekyll</generator><link href="/feed.xml" rel="self" type="application/atom+xml" /><link href="/" rel="alternate" type="text/html" /><updated>2024-05-23T00:29:48+02:00</updated><id>/feed.xml</id><title type="html">Demos and labs</title><subtitle>Demos of tools and Azure services.</subtitle></feed>
diff --git a/web/_site/index.html b/web/_site/index.html
@@ -1,25 +1,25 @@
 <!DOCTYPE html>
 <html lang="en"><head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
 <title>Home | Demos and labs</title>
 <meta name="generator" content="Jekyll v3.9.0" />
 <meta property="og:title" content="Home" />
 <meta property="og:locale" content="en_US" />
 <meta name="description" content="Demos of tools and Azure services." />
 <meta property="og:description" content="Demos of tools and Azure services." />
-<link rel="canonical" href="http://localhost:4000/" />
-<meta property="og:url" content="http://localhost:4000/" />
+<link rel="canonical" href="/" />
+<meta property="og:url" content="/" />
 <meta property="og:site_name" content="Demos and labs" />
 <meta property="og:type" content="website" />
 <meta name="twitter:card" content="summary" />
 <meta property="twitter:title" content="Home" />
 <script type="application/ld+json">
-{"@context":"https://schema.org","@type":"WebSite","description":"Demos of tools and Azure services.","headline":"Home","name":"Demos and labs","url":"http://localhost:4000/"}</script>
+{"@context":"https://schema.org","@type":"WebSite","description":"Demos of tools and Azure services.","headline":"Home","name":"Demos and labs","url":"/"}</script>
 <!-- End Jekyll SEO tag -->
-<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="Demos and labs" /></head>
-<body><header class="site-header" role="banner">
+<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="/feed.xml" title="Demos and labs" /><!--custom head--><link rel="stylesheet" href="/assets/css/custom.css">
+</head><body><header class="site-header" role="banner">
 
   <div class="wrapper"><a class="site-title" rel="author" href="/">Demos and labs</a><nav class="site-nav">
         <input type="checkbox" id="nav-trigger" class="nav-trigger" />
@@ -31,7 +31,7 @@
           </span>
         </label>
 
-        <div class="trigger"><a class="page-link" href="/">Home</a><a class="page-link" href="/prompt-engineering">Prompt Engineering Hands on Lab</a></div>
+        <div class="trigger"><a class="page-link" href="/">Home</a><a class="page-link" href="/prompt-engineering">Prompt Engineering Hands-on Lab</a></div>
       </nav></div>
 </header>
 <main class="page-content" aria-label="Content">
@@ -43,18 +43,12 @@ <h1 class="post-title">Home</h1>
   </header>
 
   <div class="post-content">
-    <head>
-    <!-- other head elements -->
-    <link rel="stylesheet" href="/assets/css/sidebar.css">
-    <link rel="stylesheet" href="/assets/css/code.css">
-</head>
-
-<div id="sidebar-index"></div>
+    <div id="sidebar-index"></div>
 
 <p>Here’s a list of all the pages on this site:</p>
 
 <ul>
-  <li><a href="/prompt-engineering">Prompt Engineering Hands on Lab</a></li>
+  <li><a href="/prompt-engineering">Prompt Engineering Hands-on Lab</a></li>
 </ul>
 
 
@@ -64,20 +58,34 @@ <h1 class="post-title">Home</h1>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script lang="JavaScript">
 $(document).ready(function() {
-  // Find all the headings in the content
-  var headings = $('.page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6');
+  var hierarchy = [$('<ul>')];
+  var currentLevel = 2;
 
-
-  // Create a link for each heading
+  var headings = $('.page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6');
   headings.each(function(i, heading) {
+    var level = parseInt(heading.tagName.slice(1));
     var id = $(heading).attr('id');
     var text = $(heading).text();
     var link = $('<a>').attr('href', '#' + id).text(text);
+    var item = $('<li>').append(link);
 
-    // Add the link to the sidebar index
-    $('#sidebar-index').append(link);
+    while (level > currentLevel) {
+      var newList = $('<ul>');
+      hierarchy[hierarchy.length - 1].append(newList);
+      hierarchy.push(newList);
+      currentLevel++;
+    }
+
+    while (level < currentLevel) {
+      hierarchy.pop();
+      currentLevel--;
+    }
+
+    hierarchy[hierarchy.length - 1].append(item);
   });
 
+  $('#sidebar-index').append(hierarchy[0]);
+
   $('pre code').each(function() {
     var button = $('<button>').attr('type', 'button').attr('title','Copy').addClass('copy-button').text('📋');
     $(this).parent().prepend(button);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<link rel="stylesheet" href="{{ "/assets/css/custom.css" \| relative_url }}">
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.0">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-05-22T18:23:42+02:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Demos and labs</title><subtitle>Demos of tools and Azure services.</subtitle></feed>
		<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.0">Jekyll</generator><link href="/feed.xml" rel="self" type="application/atom+xml" /><link href="/" rel="alternate" type="text/html" /><updated>2024-05-23T00:29:48+02:00</updated><id>/feed.xml</id><title type="html">Demos and labs</title><subtitle>Demos of tools and Azure services.</subtitle></feed>