chore: Update sidebar CSS and feed XML files

jmservera · May 22, 2024 · 65db2ef · 65db2ef
1 parent 779a214
commit 65db2ef
Show file tree

Hide file tree

Showing 9 changed files with 202 additions and 18 deletions.
diff --git a/web/_layouts/custom.html b/web/_layouts/custom.html
@@ -4,6 +4,7 @@
 <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>
@@ -28,5 +29,36 @@
     // Add the link to the sidebar index
     $('#sidebar-index').append(link);
   });
+
+  $('pre code').each(function() {
+    var button = $('<button>').attr('type', 'button').attr('title','Copy').addClass('copy-button').text('📋');
+    $(this).parent().prepend(button);
+  });
+
+  var message = $('<div>').attr('id', 'copy-message').text('Text copied to clipboard').hide();
+  $('body').append(message);
+
+  $('.copy-button').click(function() {
+    var code = $(this).siblings('code').text();
+    var position = $(this).offset();
+
+    navigator.clipboard.writeText(code).then(function() {
+      // Get the position of the button
+
+      // Set the position of the message
+      $('#copy-message').css({
+        top: position.top + 'px',
+        left: (position.left - $('#copy-message').width()) + 'px'
+      });
+      // Show the message
+      $('#copy-message').fadeIn('slow', function() {
+        // Hide the message after 800 ms
+        $(this).delay(800).fadeOut('slow');
+      });
+    }, function() {
+      // failure
+      alert('Failed to copy text');
+    });
+  });
 });
 </script>
diff --git a/web/_site/404.html b/web/_site/404.html
@@ -3,20 +3,20 @@
   <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 tols and azure services.</title>
+<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 tols and azure services." />
-<meta property="og:description" content="Demos of tols and azure services." />
+<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" />
 <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 tols 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":"http://localhost:4000/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">
@@ -75,7 +75,7 @@ <h2 class="footer-heading">Demos and labs</h2>
 </div>
 
       <div class="footer-col footer-col-3">
-        <p>Demos of tols and azure services.</p>
+        <p>Demos of tools and Azure services.</p>
       </div>
     </div>
 

diff --git a/web/_site/assets/css/code.css b/web/_site/assets/css/code.css
@@ -0,0 +1,33 @@
+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: 5px 10px;
+    background-color: #f9f9f9;
+    border: 1px solid #ccc;
+    cursor: pointer;
+  }
+
+  #copy-message {
+    position: absolute;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border: 1px solid #ccc;
+    font-size: 12px;
+  }
diff --git a/web/_site/assets/css/sidebar.css b/web/_site/assets/css/sidebar.css
@@ -13,4 +13,10 @@
   #sidebar-index a {
     display: block;
     margin-bottom: 0.5em;
+  }
+
+  @media screen and (max-width: 1200px) {
+    #sidebar-index {
+      display: none;
+    }
   }
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-22T15:26:24+02:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Demos and labs</title><subtitle>Demos of tols 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="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:16:34+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>
diff --git a/web/_site/index.html b/web/_site/index.html
@@ -7,16 +7,16 @@
 <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 tols and azure services." />
-<meta property="og:description" content="Demos of tols and azure services." />
+<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/" />
 <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 tols 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":"http://localhost:4000/"}</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">
@@ -46,6 +46,7 @@ <h1 class="post-title">Home</h1>
     <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>
@@ -76,6 +77,37 @@ <h1 class="post-title">Home</h1>
     // Add the link to the sidebar index
     $('#sidebar-index').append(link);
   });
+
+  $('pre code').each(function() {
+    var button = $('<button>').attr('type', 'button').attr('title','Copy').addClass('copy-button').text('📋');
+    $(this).parent().prepend(button);
+  });
+
+  var message = $('<div>').attr('id', 'copy-message').text('Text copied to clipboard').hide();
+  $('body').append(message);
+
+  $('.copy-button').click(function() {
+    var code = $(this).siblings('code').text();
+    var position = $(this).offset();
+
+    navigator.clipboard.writeText(code).then(function() {
+      // Get the position of the button
+
+      // Set the position of the message
+      $('#copy-message').css({
+        top: position.top + 'px',
+        left: (position.left - $('#copy-message').width()) + 'px'
+      });
+      // Show the message
+      $('#copy-message').fadeIn('slow', function() {
+        // Hide the message after 800 ms
+        $(this).delay(800).fadeOut('slow');
+      });
+    }, function() {
+      // failure
+      alert('Failed to copy text');
+    });
+  });
 });
 </script>
   </div>
@@ -100,7 +132,7 @@ <h2 class="footer-heading">Demos and labs</h2>
 </div>
 
       <div class="footer-col footer-col-3">
-        <p>Demos of tols and azure services.</p>
+        <p>Demos of tools and Azure services.</p>
       </div>
     </div>
 

diff --git a/web/_site/prompt-engineering.html b/web/_site/prompt-engineering.html
@@ -7,16 +7,16 @@
 <meta name="generator" content="Jekyll v3.9.0" />
 <meta property="og:title" content="Prompt Engineering Hands on Lab" />
 <meta property="og:locale" content="en_US" />
-<meta name="description" content="Demos of tols and azure services." />
-<meta property="og:description" content="Demos of tols and azure services." />
+<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/prompt-engineering" />
 <meta property="og:url" content="http://localhost:4000/prompt-engineering" />
 <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="Prompt Engineering Hands on Lab" />
 <script type="application/ld+json">
-{"@context":"https://schema.org","@type":"WebPage","description":"Demos of tols and azure services.","headline":"Prompt Engineering Hands on Lab","url":"http://localhost:4000/prompt-engineering"}</script>
+{"@context":"https://schema.org","@type":"WebPage","description":"Demos of tools and Azure services.","headline":"Prompt Engineering Hands on Lab","url":"http://localhost:4000/prompt-engineering"}</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">
@@ -46,13 +46,23 @@ <h1 class="post-title">Prompt Engineering Hands on Lab</h1>
     <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>
 
+<p>Authors:</p>
+
+<ul>
+  <li>Florian Follonier - Cloud Solution Architect Data &amp; AI - Microsoft</li>
+  <li>Juan Manuel Servera - Cloud Solution Architect App Inno - Microsoft</li>
+</ul>
+
 <h2 id="prompt-engineering-hands-on-lab-an-introduction">Prompt Engineering Hands-on Lab: An Introduction</h2>
 
-<p>Welcome to the Prompt Engineering Hands-on Lab! This  guide is designed to assist you in understanding and utilizing Microsoft’s AI companion, Copilot, in a practical and engaging manner.</p>
+<p>Welcome to the Prompt Engineering Hands-on Lab!</p>
+
+<p>This  guide is designed to assist you in understanding and utilizing Microsoft’s AI companion, Copilot, in a practical and engaging manner.</p>
 
 <p>Throughout this lab, we will delve into the world of AI-powered chat, explore various types of prompts, and learn how to guide an AI language model to generate desired content. The exercises are designed to be hands-on, allowing you to learn by doing and apply your newfound skills in real-time.</p>
 
@@ -72,7 +82,8 @@ <h2 id="exercise-1--warmup--basic-prompts">Exercise 1 – Warmup &amp; Basic pro
 
 <p>Write the following prompt in the “Ask me anything…” textbox:</p>
 
-<p>The space is</p>
+<pre><code class="language-prompt">The space is
+</code></pre>
 
 <p>This is the most basic prompt and is called a <strong>seed text prompt</strong>. A seed text prompt is a simple, open-ended statement or question that serves as a starting point for AI-generated content.</p>
 
@@ -151,9 +162,9 @@ <h3 id="step-1-set-the-context">Step 1: Set the context</h3>
 
 <p>Usually, Large Language Model (LLM) chat apps use a System Message and some templates to set the rules of the generation. We cannot change the system message for Copilot, but we can provide our own context for the session as a first message.</p>
 
-<pre><code class="language-prompt">In this exercise, we want you to be the CEO of a new spaceship startup, so Copilot will be your executive assistant that will help you shape your ideas. Write a prompt like this to set the context:
+<p>In this exercise, we want you to be the CEO of a new spaceship startup, so Copilot will be your executive assistant that will help you shape your ideas. Write a prompt like this to set the context, but remember to tailor it to your own preferences (i.e.: you don’t need to be an awarded cook 😉):</p>
 
-You are an executive assistant to an awarded cook that now is the CEO of a cutting-edge spaceship startup; your role is multifaceted and pivotal. You possess a deep understanding of aerospace engineering, which allows you to contribute significantly to the design and logistics of human spaceships bound for Mars. Your strategic planning skills enable you to assist in setting long-term goals, allocating resources effectively, and ensuring that every project milestone aligns with the company’s ambitious vision.
+<pre><code class="language-prompt">You are an executive assistant to an awarded cook that now is the CEO of a cutting-edge spaceship startup; your role is multifaceted and pivotal. You possess a deep understanding of aerospace engineering, which allows you to contribute significantly to the design and logistics of human spaceships bound for Mars. Your strategic planning skills enable you to assist in setting long-term goals, allocating resources effectively, and ensuring that every project milestone aligns with the company’s ambitious vision.
 
 Your creative input is crucial in ideating innovative solutions and designing a corporate image that encapsulates the startup’s spirit. You’re adept at translating complex engineering concepts into comprehensive strategies, facilitating effective communication across departments. Your project management expertise ensures that all initiatives are executed flawlessly, reflecting the company’s commitment to pioneering space exploration.
 
@@ -418,6 +429,37 @@ <h2 id="some-more-example-prompts">Some more example prompts</h2>
     // Add the link to the sidebar index
     $('#sidebar-index').append(link);
   });
+
+  $('pre code').each(function() {
+    var button = $('<button>').attr('type', 'button').attr('title','Copy').addClass('copy-button').text('📋');
+    $(this).parent().prepend(button);
+  });
+
+  var message = $('<div>').attr('id', 'copy-message').text('Text copied to clipboard').hide();
+  $('body').append(message);
+
+  $('.copy-button').click(function() {
+    var code = $(this).siblings('code').text();
+    var position = $(this).offset();
+
+    navigator.clipboard.writeText(code).then(function() {
+      // Get the position of the button
+
+      // Set the position of the message
+      $('#copy-message').css({
+        top: position.top + 'px',
+        left: (position.left - $('#copy-message').width()) + 'px'
+      });
+      // Show the message
+      $('#copy-message').fadeIn('slow', function() {
+        // Hide the message after 800 ms
+        $(this).delay(800).fadeOut('slow');
+      });
+    }, function() {
+      // failure
+      alert('Failed to copy text');
+    });
+  });
 });
 </script>
   </div>
@@ -442,7 +484,7 @@ <h2 class="footer-heading">Demos and labs</h2>
 </div>
 
       <div class="footer-col footer-col-3">
-        <p>Demos of tols and azure services.</p>
+        <p>Demos of tools and Azure services.</p>
       </div>
     </div>
 

diff --git a/web/assets/css/code.css b/web/assets/css/code.css
@@ -0,0 +1,33 @@
+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: 5px 10px;
+    background-color: #f9f9f9;
+    border: 1px solid #ccc;
+    cursor: pointer;
+  }
+
+  #copy-message {
+    position: absolute;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border: 1px solid #ccc;
+    font-size: 12px;
+  }
diff --git a/web/assets/css/sidebar.css b/web/assets/css/sidebar.css
@@ -13,4 +13,10 @@
   #sidebar-index a {
     display: block;
     margin-bottom: 0.5em;
+  }
+
+  @media screen and (max-width: 1200px) {
+    #sidebar-index {
+      display: none;
+    }
   }
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-22T15:26:24+02:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Demos and labs</title><subtitle>Demos of tols 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="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:16:34+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>