Created
April 7, 2020 13:26
-
-
Save AltanS/e5432e3fedd7dc51784d04d6b5279148 to your computer and use it in GitHub Desktop.
title length prismic bookmarklet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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