rebuilding site Tue May 28 01:41:31 PM IST 2024

404.html

@@ -170,6 +170,7 @@ <h1 class="mt-5" style="text-align: center">404 - Not Found</h1>
   <span class="text-muted" style="font-size:0.8em">
      Copyright © 2016-2024 Pankaj Pipada. All Rights Reserved. 
     <br />
+    Made with ♥️ using <a href="https://gohugo.io/" target="_blank">Hugo</a> and <a href="https://github.com/austingebauer/devise" target="_blank">Devise theme</a>
   </span>
 </footer>
 

index.html

@@ -133,6 +133,20 @@ <h2 class="m-0 mt-4">
   <div class="pb-3">
     <h4><span class="badge category">2024</span></h4><ul class="list-unstyled" style="margin-bottom: 1rem">
   <li>
+  <div style="text-align: left">
+    <a href="https://pankajpipada.com/posts/2024-05-28-hugo-copy-button/">Hugo - Introduce a Copy Button for Code Blocks</a>
+  </div>
+</li>
+<li
+  style="
+    font-size: 0.8em;
+    color: #6c757d;
+    margin-bottom: 0.8rem;
+  "
+>
+  <div style="text-align: left">May 28, 2024</div>
+</li>
+<li>
   <div style="text-align: left">
     <a href="https://pankajpipada.com/posts/2024-05-27-hugo-datatables/">Hugo - Integrating Datatables</a>
   </div>
@@ -602,6 +616,7 @@ <h4><span class="badge category">2019</span></h4><ul class="list-unstyled" style
   <span class="text-muted" style="font-size:0.8em">
      Copyright © 2016-2024 Pankaj Pipada. All Rights Reserved. 
     <br />
+    Made with ♥️ using <a href="https://gohugo.io/" target="_blank">Hugo</a> and <a href="https://github.com/austingebauer/devise" target="_blank">Devise theme</a>
   </span>
 </footer>
 

index.json

@@ -1,4 +1,13 @@
 [
+ {
+  "content": "One way to enhance the usability of your documentation or blog is by adding a copy button to your code blocks, allowing users to easily copy code snippets to their clipboard. In this post, we will integrate a copy button for code blocks in a Hugo-based static site.\nThe implementation involves creating a JavaScript function to add the button and then integrating that into your page layouts. The example provided uses Bootstrap 5 but can be adapted as needed.\nStep 1: JavaScript: Adding the Copy Button Create a new JavaScript file, copybutton.js with below code. This can be placed in the static/js or assets/js directory of your Hugo project. The implementation introduces a header row with language and copy button. It will do this for all code blocks with the language-* class and with some parent as highlight. The business logic can be easily modified to suit any other class layout (e.g: all pre code blocks, or all code blocks etc) In this current form, it would work for both table based class generation in hugo or normal one. Please note that you would need to adjust the styling to your theme. 1function addCopyButtonToCodeBlocks() { 2 // Function to determine if the background color is light or dark 3 function isColorDark(color) { 4 const rgb = color.match(/\\d+/g); 5 const r = parseInt(rgb[0], 10); 6 const g = parseInt(rgb[1], 10); 7 const b = parseInt(rgb[2], 10); 8 // Calculate luminance 9 const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255; 10 return luminance \u003c 0.5; 11 } 12 13 // Function to adjust color brightness significantly 14 function adjustColorBrightness(color, amount) { 15 const rgb = color.match(/\\d+/g); 16 const r = Math.min(255, Math.max(0, parseInt(rgb[0], 10) + amount)); 17 const g = Math.min(255, Math.max(0, parseInt(rgb[1], 10) + amount)); 18 const b = Math.min(255, Math.max(0, parseInt(rgb[2], 10) + amount)); 19 return `rgb(${r}, ${g}, ${b})`; 20 } 21 22 // Get all code blocks with a class of \"language-*\" 23 const codeBlocks = document.querySelectorAll( 24 'pre \u003e code[class^=\"language-\"]' 25 ); 26 const copyIcon = '\u003ci class=\"fas fa-copy\"\u003e\u003c/i\u003e copy code'; 27 const copiedIcon = '\u003ci class=\"fas fa-check\"\u003e\u003c/i\u003e copied!'; 28 29 // For each code block, add a copy button inside a header 30 codeBlocks.forEach((codeBlock) =\u003e { 31 // Get the background color of the code block 32 const computedStyle = window.getComputedStyle(codeBlock); 33 const backgroundColor = computedStyle.backgroundColor; 34 35 // Adjust the header color to be significantly lighter or darker than the background color 36 const headerColor = isColorDark(backgroundColor) 37 ? adjustColorBrightness(backgroundColor, 65) 38 : adjustColorBrightness(backgroundColor, -65); 39 const textColor = isColorDark(backgroundColor) ? \"#d1d1d1\" : \"#606060\"; 40 41 // Create the header div 42 const header = document.createElement(\"div\"); 43 header.style.backgroundColor = headerColor; 44 header.style.display = \"flex\"; 45 header.style.justifyContent = \"space-between\"; 46 header.style.alignItems = \"center\"; 47 header.style.paddingRight = \"0.5rem\"; 48 header.style.paddingLeft = \"0.5rem\"; 49 header.style.borderTopLeftRadius = \"5px\"; 50 header.style.borderTopRightRadius = \"5px\"; 51 header.style.color = textColor; 52 header.style.borderBottom = `1px solid ${headerColor}`; 53 header.classList.add(\"small\"); 54 55 // Create the copy button 56 const copyButton = document.createElement(\"button\"); 57 copyButton.classList.add(\"btn\", \"copy-code-button\"); 58 copyButton.style.background = \"none\"; 59 copyButton.style.border = \"none\"; 60 copyButton.style.color = textColor; 61 copyButton.style.fontSize = \"100%\"; // Override the font size 62 copyButton.style.cursor = \"pointer\"; 63 copyButton.innerHTML = copyIcon; 64 copyButton.style.marginLeft = \"auto\"; 65 66 // Add a click event listener to the copy button 67 copyButton.addEventListener(\"click\", () =\u003e { 68 // Copy the code inside the code block to the clipboard 69 const codeToCopy = codeBlock.innerText; 70 navigator.clipboard.writeText(codeToCopy); 71 72 // Update the copy button text to indicate that the code has been copied 73 copyButton.innerHTML = copiedIcon; 74 setTimeout(() =\u003e { 75 copyButton.innerHTML = copyIcon; 76 }, 1500); 77 }); 78 79 // Get the language from the class 80 const classList = Array.from(codeBlock.classList); 81 const languageClass = classList.find((cls) =\u003e cls.startsWith(\"language-\")); 82 const language = languageClass 83 ? languageClass.replace(\"language-\", \"\") 84 : \"\"; 85 86 // Create the language label 87 const languageLabel = document.createElement(\"span\"); 88 languageLabel.textContent = language ? language.toLowerCase() : \"\"; 89 languageLabel.style.marginRight = \"10px\"; 90 91 // Append the language label and copy button to the header 92 header.appendChild(languageLabel); 93 header.appendChild(copyButton); 94 95 // Find the parent element with the \"highlight\" class and insert the header before it 96 const highlightParent = codeBlock.closest(\".highlight\"); 97 if (highlightParent) { 98 highlightParent.parentNode.insertBefore(header, highlightParent); 99 } 100 }); 101} 102 103// Call the function to add copy buttons to code blocks 104document.addEventListener(\"DOMContentLoaded\", addCopyButtonToCodeBlocks); Step 2: Integration in layouts To include this JavaScript file in your Hugo site, you need to modify a layout page where you want to have the copybutton present. If you want it to be present in all your pages, it could be the baseof.html file. If you place it in the assets/js directory, it can integrated as: 1{{ with resources.Get \"js/copybutton.js\" }} 2 {{ $minifiedScript := . | minify | fingerprint }} 3 \u003cscript src=\"{{ $minifiedScript.Permalink }}\" integrity=\"{{ $minifiedScript.Data.Integrity }}\" defer\u003e\u003c/script\u003e 4{{ else }} 5 {{ errorf \"copybutton.js not found in assets/js/\" }} 6{{ end }} If you place it in the static/js directory, it can integrated as: 1\u003cscript src=\"{{ \"js/copybutton.js\" | relURL }}\" defer\u003e\u003c/script\u003e ",
+  "date": "May 28, 2024",
+  "tags": [
+   "hugo"
+  ],
+  "title": "Hugo - Introduce a Copy Button for Code Blocks",
+  "url": "https://pankajpipada.com/posts/2024-05-28-hugo-copy-button/"
+ },
  {
   "content": "In this guide, we will walk through the steps to integrate Datatables into a Hugo site. We will cover both node-based and CDN-based installations, and discuss the necessary page layout, table layout, and Datatable initialization functions.\nWhat Datatables Provide Datatables offer numerous features to enhance the user experience when working with tabular data:\nSorting: Allows users to sort data by clicking on column headers. Searching: Provides a search box to filter table data. Pagination: Splits the table into pages for easier navigation. Responsive Design: Ensures tables look good on different screen sizes. Customization: Extensive options to customize the appearance and behavior of tables. Step 1: Installation Datatables provides various styling and js options that supports jQuery, bootstrap and others. Below we talk about Bootstrap5 packages, but this can be adopted to any other styling system too.\nNode-Based Installation For a node-based Hugo setup, you can install Datatables and its dependencies using npm:\n1npm install jquery datatables.net datatables.net-bs5 After installation, ensure that the required JS and CSS files are included in your Hugo site’s assets.\nFirst, you would need to mount the node_modules to the assets folder. This can be done in config.toml:\n1[module] 2[[module.mounts]] 3source = \"node_modules\" 4target = \"assets/vendor\" Note that if you do this, you have to explicitly mount other folders too. Defaults are shown in the Hugo documentation here .\nNow you have to refer to the mount path (i.e., assets/vendor above) when using Hugo pipes to process this file. For example:\n1{{ $datatablesBS5CSS := resources.Get \"vendor/datatables.net-bs5/css/dataTables.bootstrap5.min.css\" }} 2\u003clink rel=\"stylesheet\" href=\"{{ $datatablesBS5CSS.RelPermalink }}\"\u003e CDN-Based Installation For a simpler approach, you can use the CDN links to include Datatables and its dependencies:\n1\u003clink rel=\"stylesheet\" href=\"https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css\"\u003e 2 3\u003c!-- These can be included in the specific page directly so that other pages are not impacted--\u003e 4\u003cscript src=\"https://code.jquery.com/jquery-3.6.0.min.js\"\u003e\u003c/script\u003e 5\u003cscript src=\"https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js\"\u003e\u003c/script\u003e 6\u003cscript src=\"https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js\"\u003e\u003c/script\u003e Step 2: Content Page The content page defines the table structure to use with Datatables.\nFirst, you can create the content with a specialized layout. For example at: content/movies/_index.md.\nIf your actual data comes from a csv file, you can load that file and populate the table using a shortcode. Else, your data can directly go as content in the page.\nBelow is a sample content page and the associated csv read and table populate shortcode.\nSample content file:\n1--- 2title: \"Movie ratings\" 3layout: \"movie\" 4type: \"movie\" 5toc: false 6summary: \"A table of my watched movies over the years and associated metadata along with my ratings.\" 7--- 8 9\u003c!-- Uncomment this invocation of shortcode --\u003e 10{{/* \u003c csvtable src=\"movies/imdbratings_26052024.csv\" \u003e */}} --\u003e The csvtable shortcode defined at layouts/shortcodes/csvtable.html:\n1{{ $path := .Get \"src\" }} 2\u003c!-- Read the csv --\u003e 3{{ $csv := readFile $path }} 4{{ if $csv }} 5\u003c!-- Unmarshal it as a data object --\u003e 6{{ $data := $csv | transform.Unmarshal }} 7\u003c!-- Populate the table --\u003e 8\u003ctable id=\"movieRatingsDataTable\" class=\"display\"\u003e 9 \u003cthead\u003e 10 \u003c!-- Declare the columns for your table --\u003e 11 \u003ctr\u003e 12 \u003cth\u003eNo\u003c/th\u003e 13 \u003cth\u003eTitle\u003c/th\u003e 14 \u003cth\u003eMy Rating\u003c/th\u003e 15 \u003cth\u003eIMDb Rating\u003c/th\u003e 16 \u003cth\u003eDate Rated\u003c/th\u003e 17 \u003cth\u003eRelease Year\u003c/th\u003e 18 \u003cth\u003eDirectors\u003c/th\u003e 19 \u003cth\u003eGenres\u003c/th\u003e 20 \u003c/tr\u003e 21 \u003c/thead\u003e 22 \u003c!-- Populate rows --\u003e 23 \u003ctbody\u003e 24 {{ range $index, $row := $data }} 25 {{ if ne $index 0 }} 26 \u003ctr\u003e 27 \u003c!-- Note that the row object is dependent on your csv structure. Map proper column names. --\u003e 28 \u003ctd\u003e{{ $index }}\u003c/td\u003e 29 \u003ctd\u003e 30 \u003ca href=\"{{ index $row 5 }}\" target=\"_blank\"\u003e{{ index $row 3 }}\u003c/a\u003e 31 \u003c/td\u003e 32 \u003ctd\u003e{{ index $row 1 }}\u003c/td\u003e 33 \u003ctd\u003e{{ index $row 7 }}\u003c/td\u003e 34 \u003ctd\u003e{{ index $row 2 }}\u003c/td\u003e 35 \u003ctd\u003e{{ index $row 9 }}\u003c/td\u003e 36 \u003ctd\u003e{{ index $row 13 }}\u003c/td\u003e 37 \u003ctd\u003e{{ index $row 10 }}\u003c/td\u003e 38 \u003c/tr\u003e 39 {{ end }} 40 {{ end }} 41 \u003c/tbody\u003e 42\u003c/table\u003e 43{{ else }} 44\u003cp\u003eError: CSV file not found.\u003c/p\u003e 45{{ end }} Step 3: Page Layout The above page content now needs to be served using a specialized layout.\nThis layout includes the Datatables setup as well.\nThe name of the file and the layout name used in the content page should match.\nAdd the javascript dependencies here.\nFor example, layouts/_default/movie.html:\n1{{ define \"main\" }} 2\u003cdiv class=\"container\" style=\"max-width: 1080px; margin: auto; overflow-x: auto\"\u003e 3 \u003ch1 style=\"text-align: center; margin-bottom: 3rem\"\u003e{{ .Title }}\u003c/h1\u003e 4 \u003c!-- The .Content will be the page content loaded by Hugo --\u003e 5 \u003csection\u003e{{ .Content }}\u003c/section\u003e 6\u003c/div\u003e 7 8\u003c!-- Ensure scripts are deferred to improve page render performance --\u003e 9\u003cscript src=\"https://code.jquery.com/jquery-3.6.0.min.js\" defer\u003e\u003c/script\u003e 10\u003cscript src=\"https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js\" defer\u003e\u003c/script\u003e 11\u003cscript src=\"https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js\" defer\u003e\u003c/script\u003e 12\u003cscript src=\"/js/movietables.js\" defer\u003e\u003c/script\u003e 13{{ end }} Step 4: Datatable Initialization Function The Datatable initialization is a javascript function.\nYou can write that as a separate script in static/js and use it, or add it in assets/js and load it via resource.Get as shown before or even embed it directly into the page layout file.\nAll your options related to page render can be added here.\nBelow is a simple example. This can be enhanced further as per your styling needs.\n1jQuery(function () { 2 $(\"#movieRatingsDataTable\").DataTable({ 3 ordering: true, 4 order: [[4, \"desc\"]], // Sort by the \"Date Rated\" column, assumed to be the fifth column (index 4) 5 pageLength: 10, // Set the default number of rows per page 6 columnDefs: [ 7 { orderable: false, targets: [6, 7] }, // Make the Directors and Genres columns non-orderable 8 { className: \"dt-head-center\", targets: \"_all\" }, // Center align all header cells 9 { className: \"dt-body-center\", targets: \"_all\" }, // Center align all body cells 10 ], 11 pagingType: \"full_numbers\", // Enhance pagination controls 12 responsive: true, // Enable responsiveness 13 scrollX: true, // Enable horizontal scrolling 14 language: { 15 search: \"Filter records:\", // Customizing the search box text 16 lengthMenu: \"Display _MENU_ records per page\", // Customize the length menu text 17 info: \"Showing page _PAGE_ of _PAGES_\", // Customize the page information text 18 }, 19 }); 20}); Conclusion With these steps, you can effectively integrate Datatables into your Hugo site, providing a robust and user-friendly way to display tabular data. Example integration is present in this sites Movie ratings page here ",
   "date": "May 27, 2024",

index.xml

@@ -7,8 +7,15 @@
     <generator>Hugo -- gohugo.io</generator>
     <language>en</language>
     <copyright>Copyright © 2016-2024 Pankaj Pipada. All Rights Reserved.</copyright>
-    <lastBuildDate>Tue, 28 May 2024 12:58:22 +0530</lastBuildDate>
+    <lastBuildDate>Tue, 28 May 2024 13:41:25 +0530</lastBuildDate>
     <atom:link href="https://pankajpipada.com/index.xml" rel="self" type="application/rss+xml" />
+    <item>
+      <title>Hugo - Introduce a Copy Button for Code Blocks</title>
+      <link>https://pankajpipada.com/posts/2024-05-28-hugo-copy-button/</link>
+      <pubDate>Tue, 28 May 2024 13:07:14 +0530</pubDate>
+      <guid>https://pankajpipada.com/posts/2024-05-28-hugo-copy-button/</guid>
+      <description>Create a header with language name and copy button on top of highlighted code blocks</description>
+    </item>
     <item>
       <title>Hugo - Integrating Datatables</title>
       <link>https://pankajpipada.com/posts/2024-05-27-hugo-datatables/</link>

movies/index.html

@@ -24095,6 +24095,7 @@ <h1 style="text-align: center; margin-bottom: 3rem">Movie ratings</h1>
   <span class="text-muted" style="font-size:0.8em">
      Copyright © 2016-2024 Pankaj Pipada. All Rights Reserved. 
     <br />
+    Made with ♥️ using <a href="https://gohugo.io/" target="_blank">Hugo</a> and <a href="https://github.com/austingebauer/devise" target="_blank">Devise theme</a>
   </span>
 </footer>
 

posts/2019-11-09-py-helpers-closures/index.html

@@ -304,6 +304,7 @@ <h2 id="example">Example</h2>
   <span class="text-muted" style="font-size:0.8em">
      Copyright © 2016-2024 Pankaj Pipada. All Rights Reserved. 
     <br />
+    Made with ♥️ using <a href="https://gohugo.io/" target="_blank">Hugo</a> and <a href="https://github.com/austingebauer/devise" target="_blank">Devise theme</a>
   </span>
 </footer>
 

posts/2019-11-09-py-helpers-profiling/index.html

@@ -210,6 +210,7 @@ <h2 id="cprofile-a-single-function-in-python">CProfile a single function in pyth
   <span class="text-muted" style="font-size:0.8em">
      Copyright © 2016-2024 Pankaj Pipada. All Rights Reserved. 
     <br />
+    Made with ♥️ using <a href="https://gohugo.io/" target="_blank">Hugo</a> and <a href="https://github.com/austingebauer/devise" target="_blank">Devise theme</a>
   </span>
 </footer>
 

posts/2019-11-09-screen/index.html

@@ -341,6 +341,7 @@ <h2 id="rc-file">RC File</h2>
   <span class="text-muted" style="font-size:0.8em">
      Copyright © 2016-2024 Pankaj Pipada. All Rights Reserved. 
     <br />
+    Made with ♥️ using <a href="https://gohugo.io/" target="_blank">Hugo</a> and <a href="https://github.com/austingebauer/devise" target="_blank">Devise theme</a>
   </span>
 </footer>
 

posts/2019-11-10-commands/index.html

@@ -283,6 +283,7 @@ <h2 id="disk-paritions">Disk paritions</h2>
   <span class="text-muted" style="font-size:0.8em">
      Copyright © 2016-2024 Pankaj Pipada. All Rights Reserved. 
     <br />
+    Made with ♥️ using <a href="https://gohugo.io/" target="_blank">Hugo</a> and <a href="https://github.com/austingebauer/devise" target="_blank">Devise theme</a>
   </span>
 </footer>
 

posts/2019-11-11-docker-commands/index.html

@@ -229,6 +229,7 @@ <h2 id="commands">Commands</h2>
   <span class="text-muted" style="font-size:0.8em">
      Copyright © 2016-2024 Pankaj Pipada. All Rights Reserved. 
     <br />
+    Made with ♥️ using <a href="https://gohugo.io/" target="_blank">Hugo</a> and <a href="https://github.com/austingebauer/devise" target="_blank">Devise theme</a>
   </span>
 </footer>
 

posts/2019-11-17-go-intro-primer/index.html

@@ -335,6 +335,7 @@ <h2 id="testing">Testing</h2>
   <span class="text-muted" style="font-size:0.8em">
      Copyright © 2016-2024 Pankaj Pipada. All Rights Reserved. 
     <br />
+    Made with ♥️ using <a href="https://gohugo.io/" target="_blank">Hugo</a> and <a href="https://github.com/austingebauer/devise" target="_blank">Devise theme</a>
   </span>
 </footer>
 

posts/2020-01-30-samba-setup/index.html

@@ -221,6 +221,7 @@ <h1 style="text-align: center">Samba setup</h1>
   <span class="text-muted" style="font-size:0.8em">
      Copyright © 2016-2024 Pankaj Pipada. All Rights Reserved. 
     <br />
+    Made with ♥️ using <a href="https://gohugo.io/" target="_blank">Hugo</a> and <a href="https://github.com/austingebauer/devise" target="_blank">Devise theme</a>
   </span>
 </footer>
 

posts/2020-01-30-ubuntu-1804-server-debug/index.html

@@ -232,6 +232,7 @@ <h1 style="text-align: center">Linux - Ubuntu 18.04 server setup debug</h1>
   <span class="text-muted" style="font-size:0.8em">
      Copyright © 2016-2024 Pankaj Pipada. All Rights Reserved. 
     <br />
+    Made with ♥️ using <a href="https://gohugo.io/" target="_blank">Hugo</a> and <a href="https://github.com/austingebauer/devise" target="_blank">Devise theme</a>
   </span>
 </footer>