Hugo shortcode pro kopírování KiCad schémat do schránky

Následující je příklad, jak vložit část KiCad schématu do Hugo příspěvku.

Jak to implementovat ve vaší Hugo instanci

Implementujte custom JS pro vaše theme, viz Jak vložit custom JS do vašeho Hugo theme
Přidejte následující custom JS do vašeho theme, který umožní tlačítko Copy to clipboard:

V hugo.yaml

shortcode.yaml

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

V assets/js/kicad.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');
            });
        });
    });
});

Přidejte následující shortcode do vaší Hugo instance:

V layouts/shortcodes/kicad_schematic.html:

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>

Povolte custom CSS, viz Hugo theme kód pro vložení custom CSS souborů
Přidejte následující custom CSS do vašeho theme:

V hugo.yaml:

hugo.yaml

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

V assets/css/kicad.css:

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;
        }
    }
}

Ve vašich příspěvcích použijte shortcode takto:

example.md

{{< 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 >}}

Můžete si zvolit unikátní ID pro každé kicad-schematic {{< kicad_schematic id="strap-pin-high-led" ... >}}. Můžete také vynechat ID, v takovém případě bude vygenerováno náhodné ID

Musíte exportovat schéma jako SVG soubor z KiCad a umístit ho do adresáře. Pro usnadnění se podívejte na náš skript Hugo skript pro snadné přidání obrázků do vašeho blogu

Tento skript je zdeby vydán pod CC0 1.0 Universal. Můžete ho použít pro jakýkoliv účel bez jakýchkoliv omezení. Není poskytována žádná záruka. Pokud je to možné, ocenil bych link zpět na https://techoverflow.net ale není to vyžadováno. Užijte si to!