domma-cms 0.88.1 → 0.89.0

package/plugins/seo/admin/templates/seo.html

@@ -0,0 +1,224 @@
+<!-- SEO. Bound with M.applyBindings - admin/views/seo.js inserts the item templates (the router renders a
+     templateUrl through _.render, eating any {{…}}). Refresh and Settings are banner actions. -->
+<div class="sox">
+    <p class="sox-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
+    <p class="sox-note is-warn" data-bind-hidden="hooksOk.value">This version of Domma CMS cannot take SEO's changes to the sitemap, robots.txt and page tags - they are core's own until it is updated (0.89 or later). The audit, the editor and redirects work.</p>
+
+    <nav class="sox-tabs" role="tablist" aria-label="SEO">
+        <button type="button" role="tab" data-on-click="tab_overview" data-bind-class="tab.value === 'overview' && 'is-on'"><span data-icon="search" data-icon-size="14"></span> Pages <small class="sox-count" data-bind-hidden="!attention.value" data-bind-text="attention.value"></small></button>
+        <button type="button" role="tab" data-on-click="tab_redirects" data-bind-class="tab.value === 'redirects' && 'is-on'"><span data-icon="corner-up-right" data-icon-size="14"></span> Redirects <small class="sox-count" data-bind-hidden="!ruleCount.value" data-bind-text="ruleCount.value"></small></button>
+        <button type="button" role="tab" data-on-click="tab_sitemap" data-bind-class="tab.value === 'sitemap' && 'is-on'"><span data-icon="map" data-icon-size="14"></span> Sitemap</button>
+        <span class="sox-ext-tabs"></span>
+    </nav>
+
+    <!-- Pages: the audit -->
+    <section class="sox-panel" data-bind-hidden="tab.value !== 'overview'" data-bind-class="busy.value && 'is-busy'">
+        <div class="sox-tiles">
+            <div class="sox-card sox-tile sox-score" data-bind-data-tone="scoreTone.value">
+                <small>Score <span data-help="The average of every page's score. A page's score is the share of its checks that pass - a check that could be better counts half; one for information only is left out. Pages hidden from search engines are not counted."></span></small>
+                <strong data-bind-text="scoreText.value">—</strong>
+                <span class="sox-bar"><span data-bind-style-width="scoreWidth.value"></span></span>
+            </div>
+            <div class="sox-card sox-tile"><small>Pages checked <span data-help="Every address in the sitemap - your pages and what plugins serve, such as blog posts - plus published pages hidden from search engines."></span></small><strong data-bind-text="ov.value.pages">—</strong></div>
+            <div class="sox-card sox-tile"><small>Need attention <span data-help="Pages with at least one failing check, or that could not be fetched."></span></small><strong data-bind-text="ov.value.failing">—</strong></div>
+            <div class="sox-card sox-tile"><small>Duplicates <span data-help="Titles or descriptions used on more than one page. Each page should say what makes it different - search engines may show only one of them."></span></small><strong data-bind-text="ov.value.duplicates">—</strong></div>
+            <div class="sox-card sox-tile"><small>Redirects <span data-help="Old addresses sent on to new ones. See the Redirects tab."></span></small><strong data-bind-text="ov.value.redirects">—</strong></div>
+        </div>
+
+        <div class="sox-card" data-bind-hidden="!siteRows.value.length">
+            <div class="sox-card-title">Across the site <span data-help="Problems that no single page shows: the same title or description on several pages, and site-wide settings worth a look."></span></div>
+            <div class="sox-list sox-site" data-each="siteRows.value key=id"></div>
+        </div>
+
+        <div class="sox-toolbar">
+            <div class="sox-seg" role="group" aria-label="Which pages">
+                <button type="button" data-on-click="show_all" data-bind-class="show.value === 'all' && 'is-on'">All</button>
+                <button type="button" data-on-click="show_problems" data-bind-class="show.value === 'problems' && 'is-on'">Need attention</button>
+                <button type="button" data-on-click="show_hidden" data-bind-class="show.value === 'hidden' && 'is-on'">Hidden</button>
+            </div>
+            <select class="form-input sox-select" aria-label="Where from" data-model="source.value" data-bind-hidden="sourceOptions.value.length < 2"></select>
+            <input type="search" class="form-input sox-search" placeholder="Address, title…" aria-label="Search pages" data-model="query.value">
+            <span class="sox-spacer"></span>
+            <small class="sox-muted" data-bind-text="asOf.value"></small>
+            <span data-help-title="Pages" data-help="Click a page to see its search result and share card as they will look, what could be better, and to change its title, description, focus keyphrase and share image. Right-click (or ⋮) for more."></span>
+        </div>
+        <div class="sox-card sox-flush">
+            <p class="sox-note sox-pad" data-bind-hidden="pageRows.value.length" data-bind-text="pagesEmpty.value"></p>
+            <div class="sox-list sox-pages" data-each="pageRows.value key=id"></div>
+        </div>
+    </section>
+
+    <!-- Redirects -->
+    <section class="sox-panel" data-bind-hidden="tab.value !== 'redirects'">
+        <div class="sox-card">
+            <div class="sox-card-title">Add a redirect
+                <span data-help-title="Redirects" data-help="Sends an old address to a new one, so links and search results keep working. 301 is permanent (search engines move the old page's standing to the new one); 302 is for a while; 410 says the page is gone for good. End the old address with /* to move everything under it: /news/* to /blog/* sends /news/hello to /blog/hello."></span>
+                <span class="sox-spacer"></span>
+                <button type="button" class="btn btn-xs btn-ghost" data-on-click="importCsv" data-bind-disabled="!canManage.value"><span data-icon="upload" data-icon-size="12"></span> Import</button>
+                <button type="button" class="btn btn-xs btn-ghost" data-on-click="exportRules"><span data-icon="download" data-icon-size="12"></span> CSV</button>
+            </div>
+            <form class="sox-add" data-on-submit="addRule" data-bind-hidden="!canManage.value">
+                <input type="text" class="form-input sox-mono" placeholder="/old-address" aria-label="From" data-model="newFrom.value">
+                <span class="sox-arrow" aria-hidden="true">→</span>
+                <input type="text" class="form-input sox-mono" placeholder="/new-address or https://…" aria-label="To" data-model="newTo.value" data-bind-disabled="newCode.value === '410'">
+                <select class="form-input sox-code" aria-label="Kind" data-model="newCode.value">
+                    <option value="301">301 moved</option><option value="302">302 for now</option><option value="307">307 for now, same method</option><option value="308">308 moved, same method</option><option value="410">410 gone</option>
+                </select>
+                <button type="submit" class="btn btn-sm btn-primary" data-bind-disabled="!newFrom.value"><span data-icon="plus" data-icon-size="12"></span> Add</button>
+            </form>
+            <small class="sox-muted" data-bind-text="renameText.value"></small>
+        </div>
+        <p class="sox-note is-warn" data-bind-hidden="!chainText.value" data-bind-text="chainText.value"></p>
+        <div class="sox-toolbar">
+            <input type="search" class="form-input sox-search" placeholder="Address…" aria-label="Search redirects" data-model="ruleQuery.value">
+            <span class="sox-spacer"></span>
+            <small class="sox-muted" data-bind-text="ruleText.value"></small>
+        </div>
+        <div class="sox-card sox-flush">
+            <p class="sox-note sox-pad" data-bind-hidden="ruleRows.value.length" data-bind-text="rulesEmpty.value"></p>
+            <div class="sox-list sox-rules" data-each="ruleRows.value key=id"></div>
+        </div>
+    </section>
+
+    <!-- Sitemap -->
+    <section class="sox-panel" data-bind-hidden="tab.value !== 'sitemap'">
+        <div class="sox-grid2">
+            <div class="sox-card">
+                <div class="sox-card-title">What it lists
+                    <span data-help="Your pages, and what each plugin serves. Switch a source off to leave all of it out; leave out single addresses in the settings, or hide one page from search engines in its editor."></span>
+                    <span class="sox-spacer"></span>
+                    <a class="btn btn-xs btn-ghost" href="/sitemap.xml" target="_blank" rel="noopener"><span data-icon="external-link" data-icon-size="12"></span> sitemap.xml</a>
+                </div>
+                <div class="sox-list sox-sources" data-each="sourceRows.value key=id"></div>
+            </div>
+            <div class="sox-card">
+                <div class="sox-card-title">robots.txt
+                    <span data-help="What crawlers are asked to leave alone, and where the sitemap is. Add rules in the settings - or ask every search engine to stay away while a site is not ready."></span>
+                    <span class="sox-spacer"></span>
+                    <a class="btn btn-xs btn-ghost" href="/robots.txt" target="_blank" rel="noopener"><span data-icon="external-link" data-icon-size="12"></span> robots.txt</a>
+                </div>
+                <pre class="sox-code" data-bind-text="robots.value"></pre>
+            </div>
+        </div>
+        <div class="sox-toolbar">
+            <div class="sox-seg" role="group" aria-label="Which addresses">
+                <button type="button" data-on-click="sm_in" data-bind-class="smShow.value === 'in' && 'is-on'">Listed</button>
+                <button type="button" data-on-click="sm_out" data-bind-class="smShow.value === 'out' && 'is-on'">Left out</button>
+            </div>
+            <input type="search" class="form-input sox-search" placeholder="Address…" aria-label="Search the sitemap" data-model="smQuery.value">
+            <span class="sox-spacer"></span>
+            <small class="sox-muted" data-bind-text="smText.value"></small>
+        </div>
+        <div class="sox-card sox-flush">
+            <p class="sox-note sox-pad" data-bind-hidden="smRows.value.length" data-bind-text="smEmpty.value"></p>
+            <div class="sox-list sox-entries" data-each="smRows.value key=id"></div>
+        </div>
+    </section>
+
+    <section class="sox-ext" data-bind-hidden="!extOn.value"><div class="sox-panel sox-ext-body"></div></section>
+</div>
+
+<style>
+.sox { display: flex; flex-direction: column; gap: 1rem; }
+.sox [hidden] { display: none !important; }
+.sox-panel { display: flex; flex-direction: column; gap: 1rem; transition: opacity .2s; min-width: 0; }
+.sox-panel.is-busy { opacity: .6; }
+.sox-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.sox-note.is-bad, .sox-note.is-warn { padding: .6rem .8rem; border-radius: var(--dm-radius-md); }
+.sox-note.is-bad { background: color-mix(in srgb, var(--dm-danger) 14%, transparent); color: var(--dm-danger); }
+.sox-note.is-warn { background: color-mix(in srgb, var(--dm-warning) 14%, transparent); color: var(--dm-text); }
+.sox-pad { padding: .8rem .9rem; }
+.sox-tabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--dm-border); overflow-x: auto; }
+.sox-ext-tabs { display: contents; }
+.sox-tabs button { border: 0; background: none; color: var(--dm-text-muted); font: inherit; font-size: var(--dm-text-sm); padding: .45rem .75rem; cursor: pointer;
+    border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
+.sox-tabs button:hover { color: var(--dm-text); }
+.sox-tabs button.is-on { color: var(--dm-text); border-bottom-color: var(--dm-primary); font-weight: 600; }
+.sox-pro { font-size: .65rem; font-weight: 700; letter-spacing: .04em; padding: 0 .3rem; border-radius: var(--dm-radius-sm); background: color-mix(in srgb, var(--dm-primary) 16%, transparent); color: var(--dm-primary); }
+.sox-count { font-size: var(--dm-text-xs); padding: 0 .4rem; border-radius: 999px; background: color-mix(in srgb, var(--dm-text) 10%, transparent); }
+.sox-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
+.sox-flush { padding: 0; }
+.sox-card-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; flex-wrap: wrap; }
+.sox-spacer { flex: 1; }
+.sox-muted { color: var(--dm-text-muted); font-weight: 400; font-size: var(--dm-text-xs); }
+.sox-mono { font-family: var(--dm-font-mono, monospace); }
+.sox-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 1rem; }
+.sox-tile { gap: .15rem; }
+.sox-tile small { color: var(--dm-text-muted); font-size: var(--dm-text-sm); display: inline-flex; align-items: center; gap: .3rem; }
+.sox-tile strong { font-size: var(--dm-text-2xl, 1.5rem); line-height: 1.15; font-weight: 600; }
+.sox-bar { display: block; height: .35rem; border-radius: 999px; background: color-mix(in srgb, var(--dm-text) 10%, transparent); overflow: hidden; margin-top: .3rem; }
+.sox-bar span { display: block; height: 100%; border-radius: inherit; background: var(--dm-primary); }
+.sox-score[data-tone="good"] .sox-bar span { background: var(--dm-success); }
+.sox-score[data-tone="poor"] .sox-bar span { background: var(--dm-warning); }
+.sox-score[data-tone="bad"] .sox-bar span { background: var(--dm-danger); }
+.sox-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
+.sox-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
+.sox-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.sox-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.sox-seg button + button { border-left: 1px solid var(--dm-border); }
+.sox-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.sox-select, .sox-search { width: auto; padding: .25rem .5rem; font-size: var(--dm-text-sm); }
+.sox-search { flex: 0 1 15rem; }
+.sox-list { display: flex; flex-direction: column; max-height: 36rem; overflow-y: auto; }
+.sox-row { display: grid; align-items: center; gap: .6rem; padding: .45rem .8rem; border-bottom: 1px solid var(--dm-border); font-size: var(--dm-text-sm); cursor: default; min-width: 0; }
+.sox-row:last-child { border-bottom: 0; }
+.sox-row:hover, .sox-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.sox-pages .sox-row { grid-template-columns: 3.2rem minmax(8rem, 1fr) minmax(8rem, 1.3fr) minmax(8rem, 1.4fr) 1.5rem; cursor: pointer; }
+.sox-rules .sox-row { grid-template-columns: minmax(8rem, 1fr) 1rem minmax(8rem, 1.2fr) 4.2rem 5.5rem 1.5rem; }
+.sox-entries .sox-row { grid-template-columns: minmax(10rem, 1.5fr) 7rem minmax(6rem, 1fr) 1.5rem; }
+.sox-sources .sox-row, .sox-site .sox-row { grid-template-columns: minmax(0, 1fr) auto 1.5rem; padding: .45rem .3rem; }
+.sox-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.sox-cell small { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); overflow: hidden; text-overflow: ellipsis; }
+.sox-pill { display: inline-flex; align-items: center; justify-content: center; justify-self: start; font-size: var(--dm-text-xs); font-weight: 600; padding: .05rem .5rem; border-radius: 999px; min-width: 2.4rem;
+    color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text) 8%, transparent); }
+.sox-pill[data-tone="good"] { color: var(--dm-success); background: color-mix(in srgb, var(--dm-success) 14%, transparent); }
+.sox-pill[data-tone="poor"] { color: var(--dm-warning); background: color-mix(in srgb, var(--dm-warning) 16%, transparent); }
+.sox-pill[data-tone="bad"] { color: var(--dm-danger); background: color-mix(in srgb, var(--dm-danger) 12%, transparent); }
+.sox-pill[data-tone="info"] { color: var(--dm-info); background: color-mix(in srgb, var(--dm-info) 14%, transparent); }
+.sox-arrow { color: var(--dm-text-muted); text-align: center; }
+.sox-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); line-height: 1; color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .25rem; }
+.sox-kebab:hover { color: var(--dm-primary); }
+.sox-add { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: 0; }
+.sox-add .form-input { width: auto; flex: 1 1 11rem; padding: .25rem .5rem; font-size: var(--dm-text-sm); }
+.sox-add .sox-code { flex: 0 1 11rem; }
+.sox-code { font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-xs); background: color-mix(in srgb, var(--dm-text) 7%, transparent); padding: .5rem .65rem; border-radius: var(--dm-radius-sm); white-space: pre-wrap; margin: 0; max-height: 16rem; overflow: auto; }
+/* the page editor (slideover) */
+.sox-form { display: flex; flex-direction: column; gap: 1.1rem; padding-bottom: 1rem; }
+.sox-form h4 { margin: 0 0 .5rem; font-size: var(--dm-text-base); display: flex; align-items: center; gap: .5rem; }
+.sox-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .7rem 1rem; }
+.sox-wide { grid-column: 1 / -1; }
+.sox-err { color: var(--dm-danger); font-size: var(--dm-text-xs); }
+.sox-actions { display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--dm-border); padding-top: .8rem; }
+.sox-meter { display: flex; align-items: center; gap: .5rem; font-size: var(--dm-text-xs); color: var(--dm-text-muted); margin-top: .25rem; }
+.sox-meter .sox-bar { flex: 1; margin: 0; }
+.sox-meter[data-tone="good"] .sox-bar span { background: var(--dm-success); }
+.sox-meter[data-tone="poor"] .sox-bar span { background: var(--dm-warning); }
+.sox-meter[data-tone="bad"] .sox-bar span { background: var(--dm-danger); }
+.sox-serp { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .8rem 1rem; background: #fff; color: #202124; font-family: Arial, sans-serif; }
+.sox-serp-crumbs { font-size: 12px; color: #4d5156; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sox-serp-title { font-size: 20px; line-height: 1.3; color: #1a0dab; margin: .15rem 0 .2rem; overflow-wrap: anywhere; }
+.sox-serp-desc { font-size: 14px; line-height: 1.58; color: #4d5156; overflow-wrap: anywhere; }
+.sox-share { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; max-width: 30rem; background: var(--dm-surface, var(--dm-bg)); }
+.sox-share-img { aspect-ratio: 1.91 / 1; background: color-mix(in srgb, var(--dm-text) 8%, transparent) center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.sox-share-body { padding: .55rem .75rem; display: flex; flex-direction: column; gap: .15rem; }
+.sox-share-body small { text-transform: uppercase; font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+.sox-share-body strong { font-size: var(--dm-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sox-share-body span { font-size: var(--dm-text-xs); color: var(--dm-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.sox-checks { display: flex; flex-direction: column; }
+.sox-group { font-size: var(--dm-text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--dm-text-muted); padding: .6rem .1rem .2rem; font-weight: 600; }
+.sox-check { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .5rem; align-items: start; padding: .4rem .1rem; border-bottom: 1px solid var(--dm-border); }
+.sox-status { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; font-size: .72rem; font-weight: 700; margin-top: .05rem; }
+.sox-status[data-status="pass"] { color: var(--dm-success); background: color-mix(in srgb, var(--dm-success) 14%, transparent); }
+.sox-status[data-status="warn"] { color: var(--dm-warning); background: color-mix(in srgb, var(--dm-warning) 16%, transparent); }
+.sox-status[data-status="fail"] { color: var(--dm-danger); background: color-mix(in srgb, var(--dm-danger) 14%, transparent); }
+.sox-status[data-status="info"] { color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text) 8%, transparent); }
+.sox-check-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; font-size: var(--dm-text-sm); }
+.sox-check-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); overflow-wrap: anywhere; }
+.sox-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; align-items: start; }
+@media (max-width: 720px) {
+    .sox-pages .sox-row { grid-template-columns: 3.2rem minmax(0, 1fr) 1.5rem; }
+    .sox-rules .sox-row { grid-template-columns: minmax(0, 1fr) 1rem minmax(0, 1fr) 1.5rem; }
+    .sox-entries .sox-row { grid-template-columns: minmax(0, 1fr) 1.5rem; }
+    .sox-hide-sm { display: none; }
+}
+</style>