🏡 index : quine-global-labs/mirror-cockpit-project-cockpit.git

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Cockpit playground</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../base1/cockpit.js"></script>
</head>
<body class="pf-v6-m-tabular-nums" hidden="true">
   <div class="pf-v6-c-page">
        <main class="pf-v6-c-page__main" tabindex="-1">
            <section id="internal" class="pf-v6-c-page__main-section pf-m-light">
                <h2>HTML translations</h2>

                <p>For translating HTML use these forms:</p>

                <p>
                    <code>&lt;span translate&gt;Ready&lt;/span&gt;</code>
                    = <span translate="yes" id="translate-html">Ready</span>
                </p>

                <p>
                    <code>&lt;span translate translate-context="verb"&gt;Ready&lt;/span&gt;</code>
                    = <span translate="yes" translate-context="verb" id="translate-html-context">Ready</span>
                </p>

                <p>
                    <code>&lt;span translate="yes"&gt;Not ready&lt;/span&gt;</code>
                    = <span translate="yes" id="translate-html-yes">Not ready</span>
                </p>

                <p>Note that we do <b>not support</b>:</p>
                <ul>
                    <li>Interpolation of variables.</li>
                    <li>Pluralization</li>
                    <li>The <code>&lt;translate&gt;</code> element</li>
                </ul>

                <hr />

                <h2>Old Glade style</h2>

                <p>The old Glade style is not recommended:</p>

                <p>
                    <code>&lt;span translate="yes"&gt;Empty&lt;/span&gt;</code>
                    = <span translate="yes" id="translatable-glade">Empty</span>
                </p>

                <p>
                    <code>&lt;span translate="yes" context="verb"&gt;Empty&lt;/span&gt;</code>
                    = <span translate="yes" context="verb" id="translatable-glade-context">Empty</span>
                </p>

                <p>Note that we do <b>not support</b>:</p>
                <ul>
                    <li>Interpolation of variables.</li>
                    <li>Translatable attributes.</li>
                    <li>Pluralization</li>
                    <li>The <code>&lt;translate&gt;</code> element</li>
                </ul>

                <hr />

                <h2>Code Translations</h2>

                <p>For translating in javascript code, use these forms:</p>

                <p>
                    <code>_("Empty")</code>
                    = <span id="underscore-empty"></span>
                </p>

                <p>
                    <code>_("verb", "Empty")</code>
                    = <span id="underscore-context-empty"></span>
                </p>

                <p>
                    <code>C_("verb", "Empty")</code>
                    = <span id="cunderscore-context-empty"></span>
                </p>

                <p>
                    <code>cockpit.gettext("Control")</code>
                    = <span id="gettext-control"></span>
                </p>

                <p>
                    <code>cockpit.gettext("key", "Control")</code>
                    = <span id="gettext-context-control"></span>
                </p>

                <p>
                    <code>cockpit.ngettext("$0 disk is missing", "$0 disks are missing", 1)</code>
                    = <span id="ngettext-disks-1"></span>
                </p>

                <p>
                    <code>cockpit.ngettext("$0 disk is missing", "$0 disks are missing", 2)</code>
                    = <span id="ngettext-disks-2"></span>
                </p>

                <p>
                    <code>cockpit.ngettext("disk-non-rotational", "$0 disk is missing", "$0 disks are missing", 1)</code>
                    = <span id="ngettext-context-disks-1"></span>
                </p>

                <p>
                    <code>cockpit.ngettext("disk-non-rotational", "$0 disk is missing", "$0 disks are missing", 2)</code>
                    = <span id="ngettext-context-disks-2"></span>
                </p>

                <p>Note that we do <b>not support</b>:</p>
                <ul>
                    <li>Extraction of single quoted strings.</li>
                </ul>
            </section>
        </main>
    </div>
    <script src="translate.js"></script>
    <!-- Bring in initial translations -->
    <script src="../base1/po.js"></script>
    <script src="po.js"></script>
    <!-- Override translations from here -->
    <script src="po.extra.js"></script>
</body>
</html>