Hugo shortcode для копирования схем KiCad в буфер обмена

Ниже приведён пример того, как включить часть схемы KiCad в пост Hugo.

Как реализовать это в вашем экземпляре Hugo

Реализуйте пользовательский JS для вашей темы, см. Как подключить пользовательский JS в вашей теме Hugo
Добавьте следующий пользовательский JS в вашу тему, который включит кнопку Copy to clipboard:

In hugo.yaml

shortcode.yaml

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

In 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');
            });
        });
    });
});

Добавьте следующий shortcode в ваш экземпляр Hugo:

В 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>

Включите пользовательский CSS, см. Код темы Hugo для подключения пользовательских CSS-файлов
Добавьте следующий пользовательский CSS в вашу тему:

В hugo.yaml:

hugo.yaml

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

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

В ваших постах используйте shortcode вот так:

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

Вы можете выбрать уникальный ID для каждой kicad-схемы {{< kicad_schematic id="strap-pin-high-led" ... >}}. Вы также можете опустить ID, и в этом случае будет сгенерирован случайный ID.

Вам нужно экспортировать схему как SVG-файл из KiCad и поместить его в директорию. Чтобы вам было проще, посмотрите наш скрипт Скрипт Hugo для лёгкого добавления изображений в ваш блог

Этот скрипт настоящим выпускается под лицензией CC0 1.0 Universal. Вы можете использовать его для любых целей без каких-либо ограничений. Гарантия не предоставляется. Если возможно, я был бы признателен за ссылку на https://techoverflow.net, но это не обязательно. Наслаждайтесь!