TechOverflow Logo
TechOverflow

Hugo shortcode to copy KiCad schematics to clipboard

The following is an example of how to include part of a KiCad schematic in a Hugo paste.

How to implement this in your Hugo instance

  1. Implement custom JS for your theme, see How to include custom JS in your Hugo theme

  2. Add the following custom JS to your theme, which will enable the Copy to clipboard button:

In hugo.yaml

params:
  custom_js:
    - 'js/kicad.js'

In assets/js/kicad.js:

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.kicad-copy-button').forEach(function(button) {
        // Copy to clipboard button for kicad schematic
        button.addEventListener('click', function() {
            var dataId = this.getAttribute('data-id');
            /* Get the <script> tag with id=dataId */
            var script = document.getElementById(dataId);
            var text = script.innerText;
            /* Copy to clipboard */
            navigator.clipboard.writeText(text).then(function() {
                /* Change button text */
                const originalInnerHTML = button.innerHTML;
                button.innerHTML = '✔️ Copied to clipboard';
                setTimeout(() => {
                    button.innerHTML = originalInnerHTML;
                }, 2000);
            }, function() {
                console.error('Failed to copy to clipboard');
            });
        });
    });
});
  1. Add the following shortcode to your Hugo instance:

In layouts/shortcodes/kicad_schematic.html:

{{ $seed := now.Unix }}
{{ $randomId := printf "%.10s" (sha256 $seed) }}
{{ $id := .Get "id" | default $randomId }}
<div class="kicad-schematic">
    <div class="toolbar" style="width: 100%">
        <button class="kicad-copy-button" data-id="{{ $id }}">
            📋 Click here to copy schematic to clipboard (paste in KiCad schematic editor)
        </button>
    </div>
    <div class="image-container">
        <image src="{{ .Get `image`}}"></image>
    </div>
    <script type="kicad" id="{{ $id }}">
        {{.Inner}}
    </script>
</div>

  1. Enable custom CSS, see Hugo theme code to include custom CSS files

  2. Add the following custom CSS to your theme:

In hugo.yaml:

params:
  custom_css:
    - 'css/kicad.css'

In assets/css/kicad.css:


.kicad-schematic {
    border: 1px solid #3034ec;
    border-radius: 1em;
    width: 100%;
    max-width: 600px;

    .toolbar {
        margin-top: -0.15em; /* Fix rounded corners not lining up */
        text-align: center;
        margin-bottom: 1em;
        width: 100%;

        button {
            background-color: #3034ec;
            color: white;
            cursor: pointer;
            width: 100%;
            border: 1px solid #3034ec;
            border-radius: 1em 1em 0em 0em;
            padding: 0.2em 0.4em;
        }

        button:hover {
            background-color: darkblue;
        }
    }

    .image-container {
        text-align: center;
        width: 100%;

        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    }
}
  1. In your posts, use the shortcode like this:
{{< kicad_schematic image="/images/2024/9/Ethernet PHY Strap pin high with LED.svg" >}}
PASTE THE SCHEMATIC PART YOU COPIED FROM KICAD HERE
{{< /kicad_schematic >}}

You canhoose a unique ID for each kicad-schematic {{< kicad_schematic id="strap-pin-high-led" ... >}}. You can also leave out the ID, in which case a random ID will be generated

You need to export the schematic as an SVG file from KiCad and place it in the directory. To make that easier for you, checkout our script Hugo script to easily add images to your blog

This script is hereby released under CC0 1.0 Universal. You can use it for any purpose without any restrictions. No warranty is provided. If possible, I would appreciate a link back to https://techoverflow.net but it’s not required. Enjoy!