custom-tech.hbs

{{!< default}}

{{!-- The tag above means: insert everything in this file into the {body} tag of the default.hbs template --}}

{{#post}}
{{!-- Everything inside the #post block pulls data from the page --}}

<main id="site-main" class="site-main inner">
    <article class="article {{post_class}}">

        {{#match @page.show_title_and_feature_image}}
            <header class="article-header gh-canvas">
                <h1 class="article-title">{{title}}</h1>
                {{#if feature_image}}
                    <figure class="article-image">
                        <img
                            srcset="{{img_url feature_image size="s"}} 300w,
                                    {{img_url feature_image size="m"}} 600w,
                                    {{img_url feature_image size="l"}} 1000w,
                                    {{img_url feature_image size="xl"}} 2000w"
                            sizes="(min-width: 1400px) 1400px, 92vw"
                            src="{{img_url feature_image size="xl"}}"
                            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                        />
                        {{#if feature_image_caption}}
                            <figcaption>{{feature_image_caption}}</figcaption>
                        {{/if}}
                    </figure>
                {{/if}}
            </header>
        {{/match}}

        <section class="gh-content gh-canvas">
            {{content}}

            {{!-- Custom Tech Check Form --}}
            <form id="techCheckForm">
                <label for="url">Enter a URL or domain to check:</label>
                <input type="text" id="url" name="url" required>
                <button type="submit">Check</button>
            </form>

            <div class="loader" style="display: none;"></div>
            <div id="urls" style="margin-top: 20px;"></div>
            <div id="results"></div>
        </section>
    </article>
</main>

{{/post}}

<link rel="stylesheet" type="text/css" href="https://gova11y.io/assets/css/tech.css">
<script src="https://gova11y.io/assets/js/tech.js"></script>