Skip to content

Instantly share code, notes, and snippets.

@AltanS
Created April 7, 2020 13:26
Show Gist options
  • Save AltanS/e5432e3fedd7dc51784d04d6b5279148 to your computer and use it in GitHub Desktop.
Save AltanS/e5432e3fedd7dc51784d04d6b5279148 to your computer and use it in GitHub Desktop.
title length prismic bookmarklet
<html>
<head>
<title>Check Prismic SEO Length Bookmarklet</title>
</head>
<body>
<div>
<h1>Drag this button to your bookmarks</h1>
<button><a id="bookmarklet" href="" title="Check SEO Length">Check SEO length</a></button>
<p>Then press the button on the editor page</p>
</div>
<h2>The following code is executed</h2>
<pre>
<code id="code" class=="language-javascript">
(function() {
const maxTitleLength = 90;
const maxDescrLength = 150;
const maxSlugLength = 70;
let metaTitleLabel = document.querySelector('[data-widget-key="meta_title"] label');
let metaTitleText = document.querySelector('[data-widget-key="meta_title"] textarea').innerHTML;
if (metaTitleText.length < maxTitleLength) {
metaTitleLabel.style.color = 'green';
let indication = document.createElement('span');
indication.innerText = 'status: OK';
indication.style.color = 'green';
indication.style.marginLeft = "10px";
metaTitleLabel.append(indication);
} else {
let indication = document.createElement('span');
indication.style.marginLeft = "10px";
indication.innerText = 'status: too long';
indication.style.color = 'red';
metaTitleLabel.append(indication);
};
let metaDescriptionLabel = document.querySelector('[data-widget-key="meta_description"] label');
let metaDescriptionText = document.querySelector('[data-widget-key="meta_description"] textarea').innerHTML;
if (metaDescriptionText.length < maxTitleLength) {
metaDescriptionLabel.style.color = 'green';
let indication = document.createElement('span');
indication.innerText = 'status: OK';
indication.style.color = 'green';
indication.style.marginLeft = "10px";
metaDescriptionLabel.append(indication);
} else {
let indication = document.createElement('span');
indication.style.marginLeft = "10px";
indication.innerText = 'status: too long';
indication.style.color = 'red';
metaDescriptionLabel.append(indication);
};
let slugLabel = document.querySelector('[data-widget-key="uid"] label');
let slugText = document.querySelector('[data-widget-key="uid"] > input').value;
if (slugText.length < maxTitleLength) {
let indication = document.createElement('span');
indication.innerText = 'status: OK';
indication.style.color = 'green';
indication.style.marginLeft = "10px";
slugLabel.append(indication);
} else {
let indication = document.createElement('span');
indication.style.marginLeft = "10px";
indication.innerText = 'status: too long';
indication.style.color = 'red';
slugLabel.append(indication);
};
let metaDescrStatus = ((metaDescriptionText.length > maxDescrLength) ? 'too Long' : 'OK');
let metaTitleStatus = ((metaTitleText.length > maxTitleLength) ? 'too Long' : 'OK');
let slugStatus = ((slugText.length > maxSlugLength) ? 'too Long' : 'OK');
let messageTemplate = `
Meta title length status: ${metaTitleText.length} / ${maxTitleLength} - ${metaTitleStatus}\n
Meta descr length status: ${metaDescriptionText.length} / ${maxDescrLength} - ${metaDescrStatus}\n
Meta descr length status: ${slugText.length} / ${maxSlugLength} - ${slugStatus}
`;
alert(messageTemplate);
})()
</code>
</pre>
</body>
<script>
const bookmarklet = document.querySelector('#bookmarklet');
const scriptCode = document.querySelector('#code').innerText; //remove whitespaces
bookmarklet.href = `javascript:${scriptCode}`;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
<style>
body {
margin-left: auto;
margin-right: auto;
width: 600px;
margin-top: 40px;
}
</style>
<style>
/**
* GHColors theme by Avi Aryan (http://aviaryan.in)
* Inspired by Github syntax coloring
*/
code[class*="language-"],
pre[class*="language-"] {
color: #393A34;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
font-size: 0.95em;
line-height: 1.2em;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
background: #b3d4fc;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border: 1px solid #dddddd;
background-color: white;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .2em;
padding-top: 1px; padding-bottom: 1px;
background: #f8f8f8;
border: 1px solid #dddddd;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999988; font-style: italic;
}
.token.namespace {
opacity: .7;
}
.token.string,
.token.attr-value {
color: #e3116c;
}
.token.punctuation,
.token.operator {
color: #393A34; /* no highlight */
}
.token.entity,
.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.variable,
.token.constant,
.token.property,
.token.regex,
.token.inserted {
color: #36acaa;
}
.token.atrule,
.token.keyword,
.token.attr-name,
.language-autohotkey .token.selector {
color: #00a4db;
}
.token.function,
.token.deleted,
.language-autohotkey .token.tag {
color: #9a050f;
}
.token.tag,
.token.selector,
.language-autohotkey .token.keyword {
color: #00009f;
}
.token.important,
.token.function,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
</style>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment