@qubit-ltd/jsdoc-theme 1.3.3

package/tmpl/container.tmpl

@@ -0,0 +1,261 @@
+<?js
+    var self = this;
+    var isGlobalPage;
+    docs.forEach(function(doc, i) {
+?>
+
+<?js
+    // we only need to check this once
+    if (typeof isGlobalPage === 'undefined') {
+        isGlobalPage = (doc.kind === 'globalobj');
+    }
+?>
+<div style="background: yellow; padding: 10px; margin: 10px; border: 1px solid red;">
+    DEBUG: doc.kind = <?js= doc.kind ?><br>
+    DEBUG: packageInfo = <?js= JSON.stringify(packageInfo) ?><br>
+    DEBUG: typeof packageInfo = <?js= typeof packageInfo ?>
+</div>
+<?js if (doc.kind === 'mainpage' || (doc.kind === 'package')) { ?>
+    <?js if (packageInfo && packageInfo.version) { ?>
+        <div class="package-version-info">
+            <p class="package-version"><?js= t('version') ?>: v<?js= packageInfo.version ?></p>
+        </div>
+    <?js } ?>
+    <?js= self.partial('mainpage.tmpl', doc) ?>
+<?js } else if (doc.kind === 'source') { ?>
+    <?js= self.partial('source.tmpl', doc) ?>
+<?js } else { ?>
+
+<section>
+
+<?js if (((doc.ancestors && doc.ancestors.length) || doc.name || doc.variation) || (doc.kind === 'module' && doc.modules)) { ?>
+<header>
+    <?js if (!doc.longname || doc.kind !== 'module') { ?>
+        <?js if ((doc.ancestors && doc.ancestors.length) || doc.name || doc.variation) { ?>
+        <h1 id="<?js= doc.name ?>-title" class="has-anchor">
+        <?js if (doc.ancestors && doc.ancestors.length) { ?>
+            <span class="ancestors"><?js= doc.ancestors.join('') ?></span>
+        <?js } ?>
+        <?js= doc.name ?>
+        <?js if (doc.variation) { ?>
+            <sup class="variation"><?js= doc.variation ?></sup>
+        <?js } ?>
+        </h1>
+        <?js } ?>
+        <?js if (doc.classdesc) { ?>
+            <div class="class-description"><?js= doc.classdesc ?></div>
+        <?js } ?>
+    <?js } else if (doc.kind === 'module' && doc.modules) { ?>
+        <?js doc.modules.forEach(function(module) { ?>
+            <?js if (module.name && self.displayModuleHeader) { ?>
+                <h1 id="<?js= module.name ?>-title" class="has-anchor">
+                    <?js= module.name ?>
+                </h1>
+                <?js if (module.version) { ?>
+                    <p class="module-version"><?js= t('version') ?>: v<?js= module.version ?></p>
+                <?js } ?>
+            <?js } ?>
+            <?js if (module.classdesc) { ?>
+                <div class="class-description"><?js= module.classdesc ?></div>
+            <?js } ?>
+        <?js }) ?>
+    <?js } ?>
+</header>
+<?js } ?>
+
+<article>
+    <div class="container-overview">
+    <?js if (doc.kind === 'module' && doc.modules) { ?>
+        <?js if (doc.description) { ?>
+            <div class="description"><?js= doc.description ?></div>
+        <?js } ?>
+
+        <?js doc.modules.forEach(function(module) { ?>
+            <?js= self.partial('method.tmpl', module) ?>
+        <?js }) ?>
+    <?js } else if (doc.kind === 'class' || (doc.kind === 'namespace' && doc.signature)) { ?>
+        <?js= self.partial('method.tmpl', doc) ?>
+    <?js } else { ?>
+        <?js if (doc.description) { ?>
+            <div class="description"><?js= doc.description ?></div>
+        <?js } ?>
+
+        <?js= self.partial('details.tmpl', doc) ?>
+
+        <?js if (doc.examples && doc.examples.length) { ?>
+            <h2 id="example" class="has-anchor">Example<?js= doc.examples.length > 1? 's':'' ?></h2>
+            <?js= self.partial('examples.tmpl', doc.examples) ?>
+        <?js } ?>
+    <?js } ?>
+    </div>
+
+    <?js if (doc.augments && doc.augments.length) { ?>
+        <h2 id="Extends" class="subsection-title has-anchor"><?js= t('extends') ?></h2>
+
+        <?js= self.partial('augments.tmpl', doc) ?>
+    <?js } ?>
+
+    <?js if (doc.requires && doc.requires.length) { ?>
+        <h2 id="requires" class="subsection-title has-anchor"><?js= t('requires') ?></h2>
+
+        <ul><?js doc.requires.forEach(function(r) { ?>
+            <li><?js= self.linkto(r, r) ?></li>
+        <?js }); ?></ul>
+    <?js } ?>
+
+    <?js
+        var shouldExcludeInherited = { ...(self.excludeInherited ? { inherited: {isUndefined: true} } : {}) };
+        var classes = self.find({kind: 'class', memberof: doc.longname, ...shouldExcludeInherited } );
+        if (!isGlobalPage && classes && classes.length) {
+    ?>
+        <h2 id="classes" class="subsection-title has-anchor"><?js= t('classes') ?></h2>
+
+        <dl><?js classes.forEach(function(c) { ?>
+            <dt><?js= self.linkto(c.longname, c.name) ?></dt>
+            <dd><?js if (c.summary) { ?><?js= c.summary ?><?js } ?></dd>
+        <?js }); ?></dl>
+    <?js } ?>
+
+    <?js
+        var interfaces = self.find({kind: 'interface', memberof: doc.longname, ...shouldExcludeInherited});
+        if (!isGlobalPage && interfaces && interfaces.length) {
+    ?>
+        <h2 id="interfaces" class="subsection-title has-anchor"><?js= t('interfaces') ?></h2>
+
+        <dl><?js interfaces.forEach(function(i) { ?>
+            <dt><?js= self.linkto(i.longname, i.name) ?></dt>
+            <dd><?js if (i.summary) { ?><?js= i.summary ?><?js } ?></dd>
+        <?js }); ?></dl>
+    <?js } ?>
+
+    <?js
+        var mixins = self.find({kind: 'mixin', memberof: doc.longname, ...shouldExcludeInherited});
+        if (!isGlobalPage && mixins && mixins.length) {
+    ?>
+        <h2 id="mixins" class="subsection-title has-anchor"><?js= t('mixins') ?></h2>
+
+        <dl><?js mixins.forEach(function(m) { ?>
+            <dt><?js= self.linkto(m.longname, m.name) ?></dt>
+            <dd><?js if (m.summary) { ?><?js= m.summary ?><?js } ?></dd>
+        <?js }); ?></dl>
+    <?js } ?>
+
+    <?js
+        var namespaces = self.find({kind: 'namespace', memberof: doc.longname, ...shouldExcludeInherited});
+        if (!isGlobalPage && namespaces && namespaces.length) {
+    ?>
+        <h2 id="namespaces" class="subsection-title has-anchor"><?js= t('namespaces') ?></h2>
+
+        <dl><?js namespaces.forEach(function(n) { ?>
+            <dt><?js= self.linkto(n.longname, n.name) ?></dt>
+            <dd><?js if (n.summary) { ?><?js= n.summary ?><?js } ?></dd>
+        <?js }); ?></dl>
+    <?js } ?>
+
+        <?js
+        // Add independent Properties section
+        // Collect property information directly from members
+        var allMembers = self.find({kind: 'member', memberof: isGlobalPage ? {isUndefined: true} : doc.longname, ...shouldExcludeInherited});
+
+        // Filter out module exports for global pages
+        if (isGlobalPage && allMembers && allMembers.length && allMembers.forEach) {
+            allMembers = allMembers.filter(function(m) {
+                return m.longname && m.longname.indexOf('module:') !== 0;
+            });
+        }
+
+        if (allMembers && allMembers.length && allMembers.forEach) {
+            // Create a temporary properties array
+            var propertiesData = {
+                properties: allMembers.map(function(member) {
+                    return {
+                        name: member.name,
+                        type: member.type,
+                        description: member.description || '',
+                        nullable: member.nullable,
+                        optional: member.optional,
+                        defaultvalue: member.defaultvalue
+                    };
+                })
+            };
+    ?>
+        <h2 id="properties" class="subsection-title has-anchor"><?js= t('properties') ?></h2>
+        <?js= self.partial('properties.tmpl', propertiesData) ?>
+    <?js } ?>
+
+    <?js
+        var members = self.find({kind: 'member', memberof: isGlobalPage ? {isUndefined: true} : doc.longname, ...shouldExcludeInherited});
+
+        // symbols that are assigned to module.exports are not globals, even though they're not a memberof anything
+        if (isGlobalPage && members && members.length && members.forEach) {
+            members = members.filter(function(m) {
+                return m.longname && m.longname.indexOf('module:') !== 0;
+            });
+        }
+
+        // Filter out properties, only show methods
+        if (members && members.length && members.forEach) {
+            members = members.filter(function(m) {
+                // Hide all properties, only show methods
+                return false;
+            });
+        }
+
+        if (members && members.length && members.forEach) {
+    ?>
+        <h2 id="members" class="subsection-title has-anchor"><?js= t('members') ?></h2>
+
+        <?js members.forEach(function(p) { ?>
+            <?js= self.partial('members.tmpl', p) ?>
+        <?js }); ?>
+    <?js } ?>
+
+    <?js
+        var methods = self.find({kind: 'function', memberof: isGlobalPage ? {isUndefined: true} : doc.longname, ...shouldExcludeInherited});
+        if (methods && methods.length && methods.forEach) {
+    ?>
+        <h2 id="methods" class="subsection-title has-anchor"><?js= t('methods') ?></h2>
+
+        <?js methods.forEach(function(m) { ?>
+            <?js= self.partial('method.tmpl', m) ?>
+        <?js }); ?>
+    <?js } ?>
+
+    <?js
+        var typedefs = self.find({kind: 'typedef', memberof: isGlobalPage ? {isUndefined: true} : doc.longname, ...shouldExcludeInherited});
+        if (typedefs && typedefs.length && typedefs.forEach) {
+    ?>
+        <h2 id="type-definitions" class="subsection-title has-anchor"><?js= t('type_definitions') ?></h2>
+
+        <?js typedefs.forEach(function(e) {
+                if (e.signature) {
+            ?>
+                <?js= self.partial('method.tmpl', e) ?>
+            <?js
+                }
+                else {
+            ?>
+                <?js= self.partial('members.tmpl', e) ?>
+            <?js
+                }
+            }); ?>
+    <?js } ?>
+
+    <?js
+        var events = self.find({kind: 'event', memberof: isGlobalPage ? {isUndefined: true} : doc.longname, ...shouldExcludeInherited});
+        if (events && events.length && events.forEach) {
+    ?>
+        <h2 id="events" class="subsection-title has-anchor"><?js= t('events') ?></h2>
+
+        <?js events.forEach(function(e) { ?>
+            <?js= self.partial('method.tmpl', e) ?>
+        <?js }); ?>
+    <?js } ?>
+</article>
+
+</section>
+<?js } ?>
+
+<?js }); ?>
+
+<?js= self.partial('include-target-script-and-styles.tmpl', arguments[0].filename) ?>

package/tmpl/details.tmpl

@@ -0,0 +1,207 @@
+<?js
+var data = obj;
+var self = this;
+var defaultObjectClass = '';
+var loopVar = 0;
+var detailsKeys = [
+    'copyright',
+    'defaultvalue',
+    'deprecated',
+    'license',
+    'overrides',
+    'since',
+    'version',
+]
+var hasToPrintDetails = (data.meta && self.outputSourceFiles) ||
+                        (data.author && author.length) ||
+                        (data.mixes && data.mixes.length) ||
+                        (data.inherited && data.inherits && !data.overrides) ||
+                        (data.implementations && data.implementations.length) ||
+                        (data.implements && data.implements.length) ||
+                        (data.tutorials && tutorials.length) ||
+                        (data.see && see.length) ||
+                        (data.todo && todo.length)
+
+
+// // Check if the default value is an object or array; if so, apply code highlighting
+if (data.defaultvalue && (data.defaultvaluetype === 'object' || data.defaultvaluetype === 'array')) {
+    data.defaultvalue = "<pre class='prettyprint'><code class='nohljsln compact'>" + data.defaultvalue + "</code></pre>";
+}
+
+// Check whether to print details or not
+for(; loopVar < detailsKeys.length; loopVar += 1) {
+    if(data[detailsKeys[loopVar]]) {
+        hasToPrintDetails = true
+        break
+    }
+}
+
+?>
+
+<?js
+    var properties = data.properties;
+    if (properties && properties.length && properties.forEach) {
+?>
+
+    <b class="subsection-title"><?js= t('properties') ?></b>
+
+    <?js= this.partial('properties.tmpl', data) ?>
+
+<?js } ?>
+
+<?js if(hasToPrintDetails) { ?>
+<dl class="details">
+
+    <?js if (data.version) {?>
+        <div class="details-item-container">
+            <dt class="tag-version bold"><?js= t('version') ?></dt>
+            <dd class="tag-version"><ul><li><?js= version ?></li></ul></dd>
+        </div>
+    <?js } ?>
+
+    <?js if (data.since) {?>
+        <div class="details-item-container">
+            <dt class="tag-since bold"><?js= t('since') ?></dt>
+            <dd class="tag-since"><ul><li><?js= since ?></li></ul></dd>
+        </div>
+    <?js } ?>
+
+    <?js if (data.inherited && data.inherits && !data.overrides) { ?>
+        <div class="details-item-container">
+            <dt class="inherited-from bold"><?js= t('inherited_from') ?></dt>
+            <dd class="inherited-from"><ul><li>
+                <?js= this.linkto(data.inherits, this.htmlsafe(data.inherits)) ?>
+            </li></ul></dd>
+        </div>
+    <?js } ?>
+
+    <?js if (data.overrides) { ?>
+        <div class="details-item-container">
+            <dt class="tag-overrides bold"><?js= t('overrides') ?></dt>
+            <dd class="tag-overrides"><ul><li>
+                <?js= this.linkto(data.overrides, this.htmlsafe(data.overrides)) ?>
+            </li></ul></dd>
+        </div>
+    <?js } ?>
+
+    <?js if (data.implementations && data.implementations.length) { ?>
+        <div class="details-item-container">
+            <dt class="implementations bold"><?js= t('implementations') ?></dt>
+            <dd class="implementations"><ul>
+                <?js data.implementations.forEach(function(impl) { ?>
+                    <li><?js= self.linkto(impl, self.htmlsafe(impl)) ?></li>
+                <?js }); ?>
+            </ul></dd>
+        </div>
+    <?js } ?>
+
+    <?js if (data.implements && data.implements.length) { ?>
+        <div class="details-item-container">
+            <dt class="implements bold"><?js= t('implements') ?></dt>
+            <dd class="implements"><ul>
+                <?js data.implements.forEach(function(impl) { ?>
+                    <li><?js= self.linkto(impl, self.htmlsafe(impl)) ?></li>
+                <?js }); ?>
+            </ul></dd>
+        </div>
+    <?js } ?>
+
+    <?js if (data.mixes && data.mixes.length) { ?>
+        <div class="details-item-container">
+            <dt class="mixes bold"><?js= t('mixes_in') ?></dt>
+
+            <dd class="mixes"><ul>
+            <?js data.mixes.forEach(function(a) { ?>
+                <li><?js= self.linkto(a, a) ?></li>
+            <?js }); ?>
+            </ul></dd>
+        </div>
+    <?js } ?>
+
+    <?js if (data.deprecated) { ?>
+        <div class="details-item-container">
+            <dt class="important tag-deprecated bold"><?js= t('deprecated') ?></dt><?js
+                if (data.deprecated === true) { ?><dd class="tag-deprecated"><ul><li><?js= t('yes') ?></li></ul></dd><?js }
+                else { ?><dd><ul><li><?js= data.deprecated ?></li></ul></dd><?js }
+            ?>
+        </div>
+    <?js } ?>
+
+    <?js if (data.author && author.length) {?>
+        <div class="details-item-container">
+            <dt class="tag-author bold"><?js= t('author') ?></dt>
+            <dd class="tag-author">
+                <ul><?js author.forEach(function(a) { ?>
+                    <li><?js= self.resolveAuthorLinks(a) ?></li>
+                <?js }); ?></ul>
+            </dd>
+        </div>
+    <?js } ?>
+
+    <?js if (data.copyright) {?>
+        <div class="details-item-container">
+            <dt class="tag-copyright bold"><?js= t('copyright') ?></dt>
+            <dd class="tag-copyright"><ul><li><?js= copyright ?></li></ul></dd>
+        </div>
+    <?js } ?>
+
+    <?js if (data.license) {?>
+        <div class="details-item-container">
+            <dt class="tag-license bold"><?js= t('license') ?></dt>
+            <dd class="tag-license"><ul><li><?js= license ?></li></ul></dd>
+        </div>
+    <?js } ?>
+
+    <?js if (data.defaultvalue) {?>
+        <div class="details-item-container">
+            <dt class="tag-default bold"><?js= t('default_value') ?></dt>
+            <dd class="tag-default"><ul>
+                    <li data-skip-pre-process="true"><?js= data.defaultvalue ?></li>
+                </ul></dd>
+        </div>
+    <?js } ?>
+
+    <?js if (data.meta && self.outputSourceFiles) {?>
+        <div class="details-item-container">
+            <dt class="tag-source bold"><?js= t('source') ?></dt>
+            <dd class="tag-source"><ul><li>
+                <?js= self.linkto(meta.shortpath) ?>, <?js= self.linkto(meta.shortpath, 'line ' + meta.lineno, null, 'line' + meta.lineno) ?>
+            </li></ul></dd>
+        </div>
+    <?js } ?>
+
+    <?js if (data.tutorials && tutorials.length) {?>
+        <div class="details-item-container">
+            <dt class="tag-tutorial bold"><?js= t('tutorials') ?></dt>
+            <dd class="tag-tutorial">
+                <ul><?js tutorials.forEach(function(t) { ?>
+                    <li><?js= self.tutoriallink(t) ?></li>
+                <?js }); ?></ul>
+            </dd>
+        </div>
+    <?js } ?>
+
+    <?js if (data.see && see.length) {?>
+        <div class="details-item-container">
+            <dt class="tag-see bold"><?js= t('see') ?></dt>
+            <dd class="tag-see">
+                <ul><?js see.forEach(function(s) { ?>
+                    <li><?js= self.linkto(s) ?></li>
+                <?js }); ?></ul>
+            </dd>
+        </div>
+    <?js } ?>
+
+    <?js if (data.todo && todo.length) {?>
+        <div class="details-item-container">
+            <dt class="tag-todo bold"><?js= t('todo') ?></dt>
+            <dd class="tag-todo">
+                <ul><?js todo.forEach(function(t) { ?>
+                    <li><?js= t ?></li>
+                <?js }); ?></ul>
+            </dd>
+        </div>
+    <?js } ?>
+</dl>
+
+<?js } ?>

package/tmpl/example.tmpl

@@ -0,0 +1,3 @@
+<?js var data = obj; ?>
+<pre class="prettyprint"><code><?js= data ?></code>
+</pre>

package/tmpl/examples.tmpl

@@ -0,0 +1,48 @@
+<?js
+    var data = obj;
+    var self = this;
+    var codepen = this.codepen;
+    var enable_for = codepen.enable_for || [];
+
+    data.forEach(function(example) {
+
+        if (example.caption) {
+    ?>
+        <p class="code-caption"><?js= example.caption ?></p>
+    <?js } ?>
+    <div class="rel">
+    <pre class="prettyprint"><code><?js= self.htmlsafe(example.code) ?></code></pre>
+
+    <?js
+        if(enable_for.findIndex(function (val) { return val === "examples"}) !== -1) {
+            var options = codepen.options || {};
+            var optionsString = '';
+
+            var code = `${options.js}
+${example.code}
+            `
+
+            var jsonString = JSON.stringify(code)
+                                    .replace(/"/g, "&quot;")
+                                    .replace(/'/g, "&apos;");
+
+            var optionsKey = Object.keys(options).filter((key) => key !== 'js' )
+            optionsKey.map((key, idx) => {
+                optionsString += '"' + key +'": "' + options[key].replace(/"/g, "&quot;").replace(/'/g, "&apos;") + '"';
+                if(idx !== optionsKey.length - 1) {
+                    optionsString += ','
+                }
+            })
+
+    ?>
+        <form action="https://codepen.io/pen/define" method="POST" target="_blank" class="codepen-form">
+            <input type="hidden" name="data" value='{"title": "<?js= example.caption || t('example') ?>", "js": <?js= jsonString ?>, <?js= optionsString ?> }' />
+            <button class="icon-button codepen-button" type="submit" value="Create New Pen with Prefilled Data" aria-label='<?js= t('open_in_codepen') ?>'>
+                <svg><use xlink:href="#codepen-icon"></use></svg>
+            </button>
+        </form>
+    <?js } ?>
+    </div>
+<?js
+    });
+?>

package/tmpl/exceptions.tmpl

@@ -0,0 +1,32 @@
+<?js
+    var data = obj;
+?>
+<?js if (data.description && data.type && data.type.names) { ?>
+<dl>
+    <dt>
+        <div class="param-desc">
+        <?js= data.description ?>
+        </div>
+    </dt>
+    <dd></dd>
+    <dt>
+        <dl>
+            <dt>
+                Type
+            </dt>
+            <dd>
+                <?js= this.partial('type.tmpl', data.type.names) ?>
+            </dd>
+        </dl>
+    </dt>
+    <dd></dd>
+</dl>
+<?js } else { ?>
+    <div class="param-desc">
+    <?js if (data.description) { ?>
+        <?js= data.description ?>
+    <?js } else if (data.type && data.type.names) { ?>
+        <?js= this.partial('type.tmpl', data.type.names) ?>
+    <?js } ?>
+    </div>
+<?js } ?>

package/tmpl/i18n-tooltips.tmpl

@@ -0,0 +1,30 @@
+<script>
+// Initialize tooltips with i18n support
+document.addEventListener('DOMContentLoaded', function() {
+  if (typeof tippy !== 'undefined') {
+    // eslint-disable-next-line no-undef
+    tippy(".home-button", {
+      content: "<?js= t('home_tooltip') ?>",
+      delay: 500,
+    });
+
+    // eslint-disable-next-line no-undef
+    tippy(".theme-toggle", {
+      content: "<?js= t('toggle_theme_tooltip') ?>",
+      delay: 500,
+    });
+
+    // eslint-disable-next-line no-undef
+    tippy(".search-button", {
+      content: "<?js= t('search_tooltip') ?>",
+      delay: 500,
+    });
+
+    // eslint-disable-next-line no-undef
+    tippy(".font-size", {
+      content: "<?js= t('font_size_tooltip') ?>",
+      delay: 500,
+    });
+  }
+});
+</script>

package/tmpl/icons.tmpl

@@ -0,0 +1,77 @@
+<svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+    style="display:none">
+    <defs>
+        <symbol id="home-icon" viewBox="0 0 24 24">
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path d="M19 21H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9a1 1 0 0 1-1 1zM6 19h12V9.157l-6-5.454-6 5.454V19z" />
+        </symbol>
+        <symbol id="copy-icon" viewbox="0 0 488.3 488.3">
+            <g>
+                <path
+                    d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124    C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124    c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z" />
+                <path
+                    d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227    c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6    V38.6C439.65,17.3,422.35,0,401.05,0z" />
+            </g>
+        </symbol>
+        <symbol id='search-icon' viewBox="0 0 512 512">
+            <g>
+                <g>
+                    <path
+                        d="M225.474,0C101.151,0,0,101.151,0,225.474c0,124.33,101.151,225.474,225.474,225.474    c124.33,0,225.474-101.144,225.474-225.474C450.948,101.151,349.804,0,225.474,0z M225.474,409.323    c-101.373,0-183.848-82.475-183.848-183.848S124.101,41.626,225.474,41.626s183.848,82.475,183.848,183.848    S326.847,409.323,225.474,409.323z" />
+                </g>
+            </g>
+            <g>
+                <g>
+                    <path
+                        d="M505.902,476.472L386.574,357.144c-8.131-8.131-21.299-8.131-29.43,0c-8.131,8.124-8.131,21.306,0,29.43l119.328,119.328    c4.065,4.065,9.387,6.098,14.715,6.098c5.321,0,10.649-2.033,14.715-6.098C514.033,497.778,514.033,484.596,505.902,476.472z" />
+                </g>
+            </g>
+        </symbol>
+        <symbol id="font-size-icon" viewBox="0 0 24 24">
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path
+                d="M11.246 15H4.754l-2 5H.6L7 4h2l6.4 16h-2.154l-2-5zm-.8-2L8 6.885 5.554 13h4.892zM21 12.535V12h2v8h-2v-.535a4 4 0 1 1 0-6.93zM19 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
+        </symbol>
+        <symbol id="add-icon" viewBox="0 0 24 24">
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
+        </symbol>
+        <symbol id="minus-icon" viewBox="0 0 24 24">
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path d="M5 11h14v2H5z" />
+        </symbol>
+        <symbol id="dark-theme-icon" viewBox="0 0 24 24">
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path
+                d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z" />
+        </symbol>
+        <symbol id="light-theme-icon" viewBox="0 0 24 24">
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path
+                d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" />
+        </symbol>
+        <symbol id="reset-icon" viewBox="0 0 24 24">
+            <path fill="none" d="M0 0h24v24H0z"/>
+            <path d="M18.537 19.567A9.961 9.961 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 2.136-.67 4.116-1.81 5.74L17 12h3a8 8 0 1 0-2.46 5.772l.997 1.795z"/>
+        </symbol>
+
+        <symbol id="down-icon" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z">
+            </path>
+        </symbol>
+
+        <symbol id="codepen-icon" viewBox="0 0 24 24">
+            <path fill="none" d="M0 0h24v24H0z"/>
+            <path d="M16.5 13.202L13 15.535v3.596L19.197 15 16.5 13.202zM14.697 12L12 10.202 9.303 12 12 13.798 14.697 12zM20 10.869L18.303 12 20 13.131V10.87zM19.197 9L13 4.869v3.596l3.5 2.333L19.197 9zM7.5 10.798L11 8.465V4.869L4.803 9 7.5 10.798zM4.803 15L11 19.131v-3.596l-3.5-2.333L4.803 15zM4 13.131L5.697 12 4 10.869v2.262zM2 9a1 1 0 0 1 .445-.832l9-6a1 1 0 0 1 1.11 0l9 6A1 1 0 0 1 22 9v6a1 1 0 0 1-.445.832l-9 6a1 1 0 0 1-1.11 0l-9-6A1 1 0 0 1 2 15V9z"/>
+        </symbol>
+        <symbol id="close-icon" viewBox="0 0 24 24">
+            <path fill="none" d="M0 0h24v24H0z"/>
+            <path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/>
+        </symbol>
+        <symbol id="menu-icon" viewBox="0 0 24 24">
+            <path fill="none" d="M0 0h24v24H0z"/>
+            <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/>
+        </symbol>
+    </defs>
+</svg>