From 951b042824100d1a36e8b0667a81c8957084f2ca Mon Sep 17 00:00:00 2001
From: Don Harper <duck@duckland.org>
Date: Wed, 24 Feb 2021 20:55:10 -0600
Subject: [PATCH] victorhugo | added to casper3

---
 .../casper3/layouts/partials/victorhugo.html  | 1571 +++++++++++++++++
 1 file changed, 1571 insertions(+)
 create mode 100644 themes/casper3/layouts/partials/victorhugo.html

diff --git a/themes/casper3/layouts/partials/victorhugo.html b/themes/casper3/layouts/partials/victorhugo.html
new file mode 100644
index 00000000..99aa9d23
--- /dev/null
+++ b/themes/casper3/layouts/partials/victorhugo.html
@@ -0,0 +1,1571 @@
+{{ if .Site.IsServer }}
+
+{{ if .Params.Victor_Hugo }}
+
+    {{ if .Params.focus_keyword }}
+    <!-- Victor Hugo the SEO tool -->
+
+    <!-- jQuery import -->
+    {{ if eq .Params.Victor_Hugo_clean "true" }}{{ else }}
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+    {{ end }}
+
+    <script>
+    window.addEventListener('DOMContentLoaded', function(){
+        // VICTOR HUGO
+        // By Javier Cabrera
+        // https://github.com/doncabreraphone/victorhugo
+
+        // READABILITY SCORE by Ahava
+        // https://www.simoahava.com/analytics/calculate-readability-scores-for-content/
+        // from this github https://github.com/sahava/readability-score-javascript
+        // Many thanks, Simo!
+        // readabilityFunction("{{ .Content }}");
+        
+        function readabilityFunction(text){
+
+        /* To speed the script up, you can set a sampling rate in words. For example, if you set
+        * sampleLimit to 1000, only the first 1000 words will be parsed from the input text.
+        * Set to 0 to never sample.
+        */     
+        var sampleLimit = 1000;
+
+        // Manual rewrite of the textstat Python library (https://github.com/shivam5992/textstat/)
+
+        /* 
+        * Regular expression to identify a sentence. No, it's not perfect. 
+        * Fails e.g. with abbreviations and similar constructs mid-sentence.
+        */
+        var sentenceRegex = new RegExp('[.?!]\\s[^a-z]', 'g');
+
+        /*
+        * Regular expression to identify a syllable. No, it's not perfect either.
+        * It's based on English, so other languages with different vowel / consonant distributions
+        * and syllable definitions need a rewrite.
+        * Inspired by https://bit.ly/2VK9dz1
+        */
+        var syllableRegex = new RegExp('[aiouy]+e*|e(?!d$|ly).|[td]ed|le$', 'g');
+
+        // Baseline for FRE - English only
+        var freBase = {
+          base: 206.835,
+          sentenceLength: 1.015,
+          syllablesPerWord: 84.6,
+          syllableThreshold: 3
+        };
+
+        var cache = {};
+
+        var punctuation = ['!','"','#','$','%','&','\'','(',')','*','+',',','-','.','/',':',';','<','=','>','?','@','[',']','^','_','`','{','|','}','~'];
+
+        var legacyRound = function(number, precision) {
+          var k = Math.pow(10, (precision || 0));
+          return Math.floor((number * k) + 0.5 * Math.sign(number)) / k;
+        };
+
+        var charCount = function(text) {
+          if (cache.charCount) return cache.charCount;
+          if (sampleLimit > 0) text = text.split(' ').slice(0, sampleLimit).join(' ');
+          text = text.replace(/\s/g, '');
+          return cache.charCount = text.length;
+        };
+
+        var removePunctuation = function(text) {
+          return text.split('').filter(function(c) {
+            return punctuation.indexOf(c) === -1;
+          }).join('');
+        };
+
+        var letterCount = function(text) {
+          if (sampleLimit > 0) text = text.split(' ').slice(0, sampleLimit).join(' ');
+          text = text.replace(/\s/g, '');
+          return removePunctuation(text).length;
+        };
+
+        var lexiconCount = function(text, useCache, ignoreSample) {
+          if (useCache && cache.lexiconCount) return cache.lexiconCount;
+          if (ignoreSample !== true && sampleLimit > 0) text = text.split(' ').slice(0, sampleLimit).join(' ');
+          text = removePunctuation(text);
+          var lexicon = text.split(' ').length;
+          return useCache ? cache.lexiconCount = lexicon : lexicon;
+        };
+
+        var getWords = function(text, useCache) {
+          if (useCache && cache.getWords) return cache.getWords;
+          if (sampleLimit > 0) text = text.split(' ').slice(0, sampleLimit).join(' ');
+          text = text.toLowerCase();
+          text = removePunctuation(text);
+          var words = text.split(' ');
+          return useCache ? cache.getWords = words : words;
+        }
+
+        var syllableCount = function(text, useCache) {
+          if (useCache && cache.syllableCount) return cache.syllableCount;
+          var count = 0;
+          var syllables = getWords(text, useCache).reduce(function(a, c) {  
+            return a + (c.match(syllableRegex) || [1]).length;
+          }, 0);
+          return useCache ? cache.syllableCount = syllables : syllables;
+        };
+
+        var polySyllableCount = function(text, useCache) {
+          var count = 0;
+          getWords(text, useCache).forEach(function(word) {
+            var syllables = syllableCount(word);
+            if (syllables >= 3) {
+              count += 1;
+            }
+          });
+          return count;
+        };
+
+        var sentenceCount = function(text, useCache) {
+          if (useCache && cache.sentenceCount) return cache.sentenceCount;
+          if (sampleLimit > 0) text = text.split(' ').slice(0, sampleLimit).join(' ');
+          var ignoreCount = 0;
+          var sentences = text.split(sentenceRegex);
+          sentences.forEach(function(s) {
+            if (lexiconCount(s, true, false) <= 2) { ignoreCount += 1; }
+          });
+          var count = Math.max(1, sentences.length - ignoreCount);
+          return useCache ? cache.sentenceCount = count : count;
+        };
+
+        var avgSentenceLength = function(text) {
+          var avg = lexiconCount(text, true) / sentenceCount(text, true);
+          return legacyRound(avg, 2);
+        };
+
+        var avgSyllablesPerWord = function(text) {
+          var avg = syllableCount(text, true) / lexiconCount(text, true);
+          return legacyRound(avg, 2);
+        };
+
+        var avgCharactersPerWord = function(text) {
+          var avg = charCount(text) / lexiconCount(text, true);
+          return legacyRound(avg, 2);
+        };
+
+        var avgLettersPerWord = function(text) {
+          var avg = letterCount(text, true) / lexiconCount(text, true);
+          return legacyRound(avg, 2);
+        };
+
+        var avgSentencesPerWord = function(text) {
+          var avg = sentenceCount(text, true) / lexiconCount(text, true);
+          return legacyRound(avg, 2);
+        };
+
+        var fleschReadingEase = function(text) {
+          var sentenceLength = avgSentenceLength(text);
+          var syllablesPerWord = avgSyllablesPerWord(text);
+          return legacyRound(
+            freBase.base - 
+            freBase.sentenceLength * sentenceLength - 
+            freBase.syllablesPerWord * syllablesPerWord,
+            2
+          );
+        };
+
+        var fleschKincaidGrade = function(text) {
+          var sentenceLength = avgSentenceLength(text);
+          var syllablesPerWord = avgSyllablesPerWord(text);
+          return legacyRound(
+            0.39 * sentenceLength +
+            11.8 * syllablesPerWord -
+            15.59,
+            2
+          );
+        };
+
+        var smogIndex = function(text) {
+          var sentences = sentenceCount(text, true);
+          if (sentences >= 3) {
+            var polySyllables = polySyllableCount(text, true);
+            var smog = 1.043 * (Math.pow(polySyllables * (30 / sentences), 0.5)) + 3.1291;
+            return legacyRound(smog, 2);
+          }
+          return 0.0;
+        };
+
+        var colemanLiauIndex = function(text) {
+          var letters = legacyRound(avgLettersPerWord(text) * 100, 2);
+          var sentences = legacyRound(avgSentencesPerWord(text) * 100, 2);
+          var coleman = 0.0588 * letters - 0.296 * sentences - 15.8;
+          return legacyRound(coleman, 2);
+        };
+
+        var automatedReadabilityIndex = function(text) {
+          var chars = charCount(text);
+          var words = lexiconCount(text, true);
+          var sentences = sentenceCount(text, true);
+          var a = chars / words;
+          var b = words / sentences;
+          var readability = (
+            4.71 * legacyRound(a, 2) +
+            0.5 * legacyRound(b, 2) -
+            21.43
+          );
+          return legacyRound(readability, 2); 
+        };
+
+        var linsearWriteFormula = function(text) {
+          var easyWord = 0;
+          var difficultWord = 0;
+          var roughTextFirst100 = text.split(' ').slice(0,100).join(' ');
+          var plainTextListFirst100 = getWords(text, true).slice(0,100);
+          plainTextListFirst100.forEach(function(word) {
+            if (syllableCount(word) < 3) {
+              easyWord += 1;
+            } else {
+              difficultWord += 1;
+            }
+          });
+          var number = (easyWord + difficultWord * 3) / sentenceCount(roughTextFirst100);
+          if (number <= 20) {
+            number -= 2;
+          }
+          return legacyRound(number / 2, 2);
+        };
+
+        var rix = function(text) {
+          var words = getWords(text, true);
+          var longCount = words.filter(function(word) {
+            return word.length > 6;
+          }).length;
+          var sentencesCount = sentenceCount(text, true);
+          return legacyRound(longCount / sentencesCount, 2);
+        };
+
+        var readingTime = function(text) {
+          var wordsPerSecond = 4.17;
+          // To get full reading time, ignore cache and sample
+          return legacyRound(lexiconCount(text, false, true) / wordsPerSecond, 2);
+        };
+
+        // Build textStandard
+        var grade = [];
+        var obj = {};
+        (function() {
+          
+          // FRE
+          var fre = obj.fleschReadingEase = fleschReadingEase(text);
+          if (fre < 100 && fre >= 90) {
+            grade.push(5);
+          } else if (fre < 90 && fre >= 80) {
+            grade.push(6);
+          } else if (fre < 80 && fre >= 70) {
+            grade.push(7);
+          } else if (fre < 70 && fre >= 60) {
+            grade.push(8);
+            grade.push(9);
+          } else if (fre < 60 && fre >= 50) {
+            grade.push(10);
+          } else if (fre < 50 && fre >= 40) {
+            grade.push(11);
+          } else if (fre < 40 && fre >= 30) {
+            grade.push(12);
+          } else {
+            grade.push(13);
+          }
+          
+          // FK
+          var fk = obj.fleschKincaidGrade = fleschKincaidGrade(text);
+          grade.push(Math.floor(fk));
+          grade.push(Math.ceil(fk));
+          
+          // SMOG
+          var smog = obj.smogIndex = smogIndex(text);
+          grade.push(Math.floor(smog));
+          grade.push(Math.ceil(smog));
+          
+          // CL
+          var cl = obj.colemanLiauIndex = colemanLiauIndex(text);
+          grade.push(Math.floor(cl));
+          grade.push(Math.ceil(cl));
+          
+          // ARI
+          var ari = obj.automatedReadabilityIndex = automatedReadabilityIndex(text);
+          grade.push(Math.floor(ari));
+          grade.push(Math.ceil(ari));
+          
+          // LWF
+          var lwf = obj.linsearWriteFormula = linsearWriteFormula(text);
+          grade.push(Math.floor(lwf));
+          grade.push(Math.ceil(lwf));
+          
+          // RIX
+          var rixScore = obj.rix = rix(text);
+          if (rixScore >= 7.2) {
+            grade.push(13);
+          } else if (rixScore < 7.2 && rixScore >= 6.2) {
+            grade.push(12);
+          } else if (rixScore < 6.2 && rixScore >= 5.3) {
+            grade.push(11);
+          } else if (rixScore < 5.3 && rixScore >= 4.5) {
+            grade.push(10);
+          } else if (rixScore < 4.5 && rixScore >= 3.7) {
+            grade.push(9);
+          } else if (rixScore < 3.7 && rixScore >= 3.0) {
+            grade.push(8);
+          } else if (rixScore < 3.0 && rixScore >= 2.4) {
+            grade.push(7);
+          } else if (rixScore < 2.4 && rixScore >= 1.8) {
+            grade.push(6);
+          } else if (rixScore < 1.8 && rixScore >= 1.3) {
+            grade.push(5);
+          } else if (rixScore < 1.3 && rixScore >= 0.8) {
+            grade.push(4);
+          } else if (rixScore < 0.8 && rixScore >= 0.5) {
+            grade.push(3);
+          } else if (rixScore < 0.5 && rixScore >= 0.2) {
+            grade.push(2);
+          } else {
+            grade.push(1);
+          }
+          
+          // Find median grade
+          grade = grade.sort(function(a, b) { return a - b; });
+          var midPoint = Math.floor(grade.length / 2);
+          var medianGrade = legacyRound(
+            grade.length % 2 ? 
+            grade[midPoint] : 
+            (grade[midPoint-1] + grade[midPoint]) / 2.0
+          );
+          obj.medianGrade = medianGrade;
+          
+        })();
+
+        obj.readingTime = readingTime(text);
+          
+        return obj;
+        };
+
+        
+
+        /// END
+
+        
+        
+        
+        
+
+
+          
+
+
+        // PASSIVE VOICE
+        // passive('{{ .Content }}').length
+
+        var irregulars = [
+        'awoken',
+        'been',
+        'born',
+        'beat',
+        'become',
+        'begun',
+        'bent',
+        'beset',
+        'bet',
+        'bid',
+        'bidden',
+        'bound',
+        'bitten',
+        'bled',
+        'blown',
+        'broken',
+        'bred',
+        'brought',
+        'broadcast',
+        'built',
+        'burnt',
+        'burst',
+        'bought',
+        'cast',
+        'caught',
+        'chosen',
+        'clung',
+        'come',
+        'cost',
+        'crept',
+        'cut',
+        'dealt',
+        'dug',
+        'dived',
+        'done',
+        'drawn',
+        'dreamt',
+        'driven',
+        'drunk',
+        'eaten',
+        'fallen',
+        'fed',
+        'felt',
+        'fought',
+        'found',
+        'fit',
+        'fled',
+        'flung',
+        'flown',
+        'forbidden',
+        'forgotten',
+        'foregone',
+        'forgiven',
+        'forsaken',
+        'frozen',
+        'gotten',
+        'given',
+        'gone',
+        'ground',
+        'grown',
+        'hung',
+        'heard',
+        'hidden',
+        'hit',
+        'held',
+        'hurt',
+        'kept',
+        'knelt',
+        'knit',
+        'known',
+        'laid',
+        'led',
+        'leapt',
+        'learnt',
+        'left',
+        'lent',
+        'let',
+        'lain',
+        'lighted',
+        'lost',
+        'made',
+        'meant',
+        'met',
+        'misspelt',
+        'mistaken',
+        'mown',
+        'overcome',
+        'overdone',
+        'overtaken',
+        'overthrown',
+        'paid',
+        'pled',
+        'proven',
+        'put',
+        'quit',
+        'read',
+        'rid',
+        'ridden',
+        'rung',
+        'risen',
+        'run',
+        'sawn',
+        'said',
+        'seen',
+        'sought',
+        'sold',
+        'sent',
+        'set',
+        'sewn',
+        'shaken',
+        'shaven',
+        'shorn',
+        'shed',
+        'shone',
+        'shod',
+        'shot',
+        'shown',
+        'shrunk',
+        'shut',
+        'sung',
+        'sunk',
+        'sat',
+        'slept',
+        'slain',
+        'slid',
+        'slung',
+        'slit',
+        'smitten',
+        'sown',
+        'spoken',
+        'sped',
+        'spent',
+        'spilt',
+        'spun',
+        'spit',
+        'split',
+        'spread',
+        'sprung',
+        'stood',
+        'stolen',
+        'stuck',
+        'stung',
+        'stunk',
+        'stridden',
+        'struck',
+        'strung',
+        'striven',
+        'sworn',
+        'swept',
+        'swollen',
+        'swum',
+        'swung',
+        'taken',
+        'taught',
+        'torn',
+        'told',
+        'thought',
+        'thrived',
+        'thrown',
+        'thrust',
+        'trodden',
+        'understood',
+        'upheld',
+        'upset',
+        'woken',
+        'worn',
+        'woven',
+        'wed',
+        'wept',
+        'wound',
+        'won',
+        'withheld',
+        'withstood',
+        'wrung',
+        'written'
+        ];
+
+        var exceptions = [
+        'indeed',
+        ];
+
+        var re = new RegExp('\\b(am|are|were|being|is|been|was|be)\\b\\s*([\\w]+ed|' + irregulars.join('|') + ')\\b', 'gi');
+        var byRe; // lazly construct
+
+        function passive(text, options) {
+        var r = (options && options.by) ?
+                (byRe || constructByRe()) : re; // not sorry
+
+        var suggestions = [];
+        while (match = r.exec(text)) {
+            if (exceptions.indexOf(match[2].toLowerCase()) === -1) {
+            suggestions.push({
+                index: match.index,
+                offset: match[0].length
+            });
+            }
+        }
+        return suggestions;
+        }
+
+        // lol
+        function constructByRe () {
+            return byRe = new RegExp(re.toString().slice(1, -3) + '\\s*by\\b', 'gi');
+        }
+
+
+        /// HELPERS
+        function percentage(num, per) {
+            return (num/100)*per;
+        }
+
+
+        // if PASSIVE VOICE
+        var c = "{{ .Content | plainify}}";
+        victorhugo__total_sentences = c.trim().split(/[\.\?\!]\s/).length;
+
+
+        var victorhugo__passive = passive(c).length;  
+        
+        var passive__1 = victorhugo__total_sentences;
+        var passive__2 = victorhugo__passive;
+
+        var victorhugo__passive_result = percentage(passive__1,passive__2);
+        
+
+        if (victorhugo__passive_result >= 10) {
+            $("#victorhugo__passive").html( victorhugo__passive_result.toFixed(1) + "% sentences contain passive voice, which is more than the recommended maximum of 10%. Try to use their active counterparts.").addClass('fix');        
+            
+        } else if  (victorhugo__passive_result >= 7 && victorhugo__passive_result <= 9 )  {
+            $("#victorhugo__passive").html( victorhugo__passive_result.toFixed(1) + "% sentences contain passive voice, which is less than the recommended maximum of 10%, but you are getting too close. There is space for improvement.").addClass('improve');        
+        } else {
+            $("#victorhugo__passive").html( victorhugo__passive_result.toFixed(1) + "% sentences contain passive voice, which is less than the recommended maximum of 10%. Well done.").addClass('good').appendTo($("#victorhugo__passive").parent());        
+        }
+
+            ///
+        
+
+        /// STOPWORDS 
+        var stopwords = ["a", "about", "above", "after", "again", "against", "ain", "all", "am", "an", "and", "any", "are", "aren", "aren't", "as", "at", "be", "because", "been", "before", "being", "below", "between", "both", "but", "by", "can", "couldn", "couldn't", "d", "did", "didn", "didn't", "do", "does", "doesn", "doesn't", "doing", "don", "don't", "down", "during", "each", "few", "for", "from", "further", "had", "hadn", "hadn't", "has", "hasn", "hasn't", "have", "haven", "haven't", "having", "he", "her", "here", "hers", "herself", "him", "himself", "his", "how", "i", "if", "in", "into", "is", "isn", "isn't", "it", "it's", "its", "itself", "just", "ll", "m", "ma", "me", "mightn", "mightn't", "more", "most", "mustn", "mustn't", "my", "myself", "needn", "needn't", "no", "nor", "not", "now", "o", "of", "off", "on", "once", "only", "or", "other", "our", "ours", "ourselves", "out", "over", "own", "re", "s", "same", "shan", "shan't", "she", "she's", "should", "should've", "shouldn", "shouldn't", "so", "some", "such", "t", "than", "that", "that'll", "the", "their", "theirs", "them", "themselves", "then", "there", "these", "they", "this", "those", "through", "to", "too", "under", "until", "up", "ve", "very", "was", "wasn", "wasn't", "we", "were", "weren", "weren't", "what", "when", "where", "which", "while", "who", "whom", "why", "will", "with", "won", "won't", "wouldn", "wouldn't", "y", "you", "you'd", "you'll", "you're", "you've", "your", "yours", "yourself", "yourselves", "could", "he'd", "he'll", "he's", "here's", "how's", "i'd", "i'll", "i'm", "i've", "let's", "ought", "she'd", "she'll", "that's", "there's", "they'd", "they'll", "they're", "they've", "we'd", "we'll", "we're", "we've", "what's", "when's", "where's", "who's", "why's", "would"]
+
+        // SLUG
+        var slug = "{{ .File.BaseFileName | humanize | lower }}";
+        
+        
+        // CHECK STOPWORDS IN SLUG
+        var stopwordFind = new RegExp('\\b('+stopwords.join('|')+')\\b');
+        var stopwordFound = stopwordFind.test(slug);
+
+        if (stopwordFound) {
+            $("#stopword").html("The slug for this page contains <a href='http://en.wikipedia.org/wiki/Stop_words'>stop words</a>, consider removing them. ").addClass('improve');        
+        } else {
+            $("#stopword").html("The slug for this page looks good.").addClass('good').appendTo($("#stopword").parent());
+        }
+
+        var focusKeyword = "{{ .Params.focus_keyword | lower }}";
+
+        if (focusKeyword != "") {
+            $("#focusKeyword").html("Keyword was set for this page. You are good to go.").addClass('good').appendTo($("#focusKeyword").parent());
+        } else {
+            $("#focusKeyword").html("No focus keyword was set for this page. If you do not set a focus keyword, no score can be calculated.").addClass('improve');
+        }
+      
+        if (focusKeyword != ""){
+            $("#stopword").show();
+            // CHECK KEYWORD IN SLUG
+            // It can also be a keyphrase, but not tested
+            
+            var res = focusKeyword.match(/\b\w+?\b/g)
+            // getting words from second string
+            .reduce(function(a, b) {
+                return a || new RegExp('\\b' + b + '\\b', 'i').test(slug);
+                //checking string in first string
+            }, false);
+            // also set initial value as false since no strings are matched now
+        
+            if (res) {
+                $("#slug").html("The focus keyword appears in the URL of this page.").addClass('good').appendTo($("#slug").parent());
+            } else {
+                $("#slug").html("The focus keyword does not appear in slug. Consider renaming this page.").addClass('improve');
+            }
+        } else {
+            $("#stopword").hide();
+        }
+
+
+        // META DESCRIPTION
+        var victorhugo__meta_description = $("meta[name='description'").attr("content");
+        if (victorhugo__meta_description){
+
+          if(victorhugo__meta_description === "") {
+              $("#meta__description").text( "No meta description has been specified. Search engines will display copy from the page instead." ).addClass('fix');
+          } else if(victorhugo__meta_description.length < 5) {
+              $("#meta__description").text( "The meta description is under 120 characters long. However, up to 320 characters are available." ).addClass('improve');
+          } else if(victorhugo__meta_description.length >= 125 && victorhugo__meta_description.length <= 320 ) {
+              $("#meta__description").text( "The meta description has a nice length." ).addClass("good").appendTo($("#meta__description").parent());
+          } else if(victorhugo__meta_description.length >= 320) {
+              $("#meta__description").text( "The meta description is over 320 characters. Reducing the length will ensure the entire description will be visible.").addClass('fix');
+          } 
+        } else {
+          $("#meta__description").html( "The meta description is not set. Please add a <a href='https://github.com/doncabreraphone/victorhugo/blob/master/misc/hugo-seo-snippets.md'>meta description</a> to your post.").addClass('fix');
+        }
+
+        // CONTENT
+        var victorhugo__content = "{{ .Content | lower }}";
+        var victorhugo__rawcontent = victorhugo__content;
+        victorhugo__content = victorhugo__content.split(' ');
+
+
+        if(victorhugo__content === "") {
+            $("#victorhugo__content").text( "This page has no content. Please add some." ).addClass('fix');
+
+        } else if(victorhugo__content.length >= 1 && victorhugo__content.length <= 200 ) {
+            $("#victorhugo__content").text( "The text contains " + victorhugo__content.length + " words. This is far below the recommended minimum of 300 words. Add more content that is relevant for the topic. ").addClass('fix');
+            
+        }  else if(victorhugo__content.length >= 200 && victorhugo__content.length <= 290 ) {
+            $("#victorhugo__content").text( "The text contains under " + victorhugo__content.length + " words long. This is slightly below the recommended minimum of 300 words. Add a bit more copy ").addClass('improve');
+
+        } else if(victorhugo__content.length >= 301) {
+            $("#victorhugo__content").text( "The text is over 300 words. This is more than or equal to the recommended minimum of 300 words.").addClass('good').appendTo($("#victorhugo__content").parent());
+        }
+
+        // FIRST PARAGRAPH
+        // The focus keyword doesn't appear in the first paragraph of the copy. Make sure the topic is clear immediately
+
+        victorhugo__firstParagraph = $(victorhugo__rawcontent).first('p').first().text();
+        var victorhugo__firstParagraph_check = focusKeyword.match(/\b\w+?\b/g)
+
+        .reduce(function(a, b) {
+            return a || new RegExp('\\b' + b + '\\b', 'i').test(victorhugo__firstParagraph);
+        }, false);
+
+        if (victorhugo__firstParagraph_check) {
+            $("#victorhugo__firstParagraph").html("The focus keyword appears in the first paragraph of the copy. Well done. This adds visibility. ").addClass('good').appendTo($("#victorhugo__firstParagraph").parent());
+        } else {
+            $("#victorhugo__firstParagraph").html("The focus keyword doesn't appear in the first paragraph of the copy. Make sure the topic is clear immediately. ").addClass('fix');
+        };
+
+
+        // SUBHEADINGS
+        // Checks if there is a subheading in the tex
+        // returns true if there is
+        // checks if the subheading contains focus keywords
+
+
+        var victorhugo__subheadings = victorhugo__rawcontent.indexOf('<h2>') >= 0; // true
+          
+        if( victorhugo__subheadings ) {
+
+          
+          var a= $(victorhugo__rawcontent).filter('h2').text().split(' ');
+          var b= focusKeyword.split(' ');
+
+              var unique = $.grep(a, function(element) {
+                  return $.inArray(element, b) == -1;
+              });
+          var index = $.grep(a, function(element) {   
+          if($.inArray(element,b)>=0)
+          {
+              return a
+          }
+            });
+          // console.log(index.length);
+
+          
+          if (index.length > 0 && index.length <= 1 ) {
+            $("#victorhugo__subheadings").html("The focus keyword appears only in 1 subheadings in your copy. Try to use it in at least one more subheading.").addClass('improve');
+          } else if (index.length >= 2 ) {
+            $("#victorhugo__subheadings").html("The focus keyword appears in more than one subheadings in your copy, which is optimal.").addClass('good').appendTo($("#victorhugo__subheadings").parent());
+          } else {
+            $("#victorhugo__subheadings").html("You have not used the focus keyword in any subheading (such as an H2) in your copy.").addClass('improve');
+          }
+
+        } else {
+          $("#victorhugo__subheadings").html("The text does not contain any subheadings. Add at least one subheading. ").addClass('fix');  
+        }
+        
+
+        // TITLE
+        // The focus keyword 'Welcome' does not appear in the SEO title.
+        victorhugo__title = "{{ .Page.Title }}";
+
+        if (victorhugo__title) {
+            
+            var victorhugo__title_check = focusKeyword.match(/\b\w+?\b/g)
+
+            .reduce(function(a, b) {
+                return a || new RegExp('\\b' + b + '\\b', 'i').test(victorhugo__title);
+            }, false);
+
+            if (victorhugo__title_check) {
+                $("#victorhugo__title").html("The focus keyword appears in the title. ").addClass('good').appendTo($("#victorhugo__title").parent());
+            } else {
+                $("#victorhugo__title").html("The focus keyword '" + focusKeyword + "' does not appear in the SEO title.").addClass('fix');
+            }
+        } else {
+            $("#victorhugo__title").html("Please add a title to the page.").addClass('fix');
+        }
+
+        // CONTENT KEYWORD DENSITY
+        // The focus keyword doesn't appear in the first paragraph of the copy. Make sure the topic is clear immediately
+
+        var victorhugo__density = $(victorhugo__rawcontent).not('img').text();
+        var victorhugo__density_check = focusKeyword.match(/\b\w+?\b/g).reduce(function(a, b) {
+            return a || new RegExp('\\b' + b + '\\b', 'i').test(victorhugo__density);
+        }, false);
+
+        if (victorhugo__density_check) {
+            // get the density
+            var victorhugo__focusKeyword = focusKeyword.split(' ');
+            var victorhugo__density_amount = 0;
+            var victorhugo__densityWords = victorhugo__rawcontent.replace(/[\.,-\/#!$%\^&\*;:{}=\-_`~()]/g," ").toLowerCase().split(' ');
+            $.each(victorhugo__densityWords, function(index, victorhugo__densityWords) {
+                if ($.inArray(victorhugo__densityWords, victorhugo__focusKeyword) != -1) { 
+                    ++victorhugo__density_amount;
+                }
+            });
+
+            
+          
+            var density__1 = victorhugo__density_amount;
+            var density__2 = victorhugo__densityWords.length;
+
+            // console.log(density__1 + " x " + density__2);
+
+            var victorhugo__density_result = density__1 * 100 / density__2;
+            if (!isFinite(victorhugo__density_result)) victorhugo__density_result = 0;
+                // console.log(victorhugo__density_result.toFixed(1) + "%");
+                victorhugo__density_result = victorhugo__density_result;
+
+                
+                
+            var victorhugo__density_calc; 
+
+            if (victorhugo__density_result >= 0.1 && victorhugo__density_result <= 0.2) {
+                victorhugo__density_calc = "good, but you can do better";
+                $("#victorhugo__density").addClass('improve');
+            } else if (victorhugo__density_result > 0.2) {
+                victorhugo__density_calc = "great";
+                $("#victorhugo__density").addClass('good').appendTo($("#victorhugo__density").parent());
+            } else {
+              victorhugo__density_calc = "bad";
+              $("#victorhugo__density").addClass('fix');
+            }
+            
+            $("#victorhugo__density").html("The keyword density is " + victorhugo__density_result.toFixed(1) + "%, which is " + victorhugo__density_calc + "; the focus keyword was found " + victorhugo__density_amount + " times (including subheadings).");
+
+        } else {
+            $("#victorhugo__density").html("The keyword density is 0%, which is too low; the focus keyword was found 0 times (including subheadings).").addClass('fix');
+        }
+
+    
+        
+    
+
+        // Check for LINKS   
+        var hugoLinks = $(victorhugo__rawcontent).find('a[href], area[href], base[href], link[href]').length;
+
+        if (hugoLinks == "0") {
+            $("#victorhugo__content_links").text( "No links appear in this page, consider adding some (outbound and internal)." ).addClass('fix');
+        } else if (hugoLinks <= "2") {
+            $("#victorhugo__content_links").text( "This page has just " + hugoLinks + " link(s). You can do better!" ).addClass('improve');
+        } else {
+            $("#victorhugo__content_links").text( "This page has " + hugoLinks + " link(s). That's more than enough!" ).addClass('good').appendTo($("#victorhugo__content_links").parent());
+        }
+        
+        // Check for IMGS
+        var hugoIMGS = $(victorhugo__rawcontent).find('img').length;
+
+        if (hugoIMGS == "0") {
+            $("#victorhugo__content_imgs").text( "No images appear in this page, consider adding some as appropriate." ).addClass('fix');
+        } else if (hugoIMGS == "1") {
+            $("#victorhugo__content_imgs").text( "This page has just one image. You can do better!" ).addClass('improve')
+        } else if (hugoIMGS <= 2) {
+            $("#victorhugo__content_imgs").text( "This page has the right amount of images. You can add more if you like." ).addClass("good").appendTo($("#victorhugo__content_imgs").parent());
+
+            
+            var re = 0;
+
+            $($(victorhugo__rawcontent).find('img')).each(function(){
+                
+                // $(this).is(':contains("Replace Me")')
+                if($(this).attr('alt')) {
+                    var attr = $(this).attr('alt');
+
+                    var attr_res = focusKeyword.match(/\b\w+?\b/g)
+                    .reduce(function(a, b) {
+                        return a || new RegExp('\\b' + b + '\\b', 'i').test(attr);
+                    }, false);           
+
+                    
+                    if (attr_res){                   
+                        re = re +1;
+                    }
+
+                } 
+            });
+            
+            if (re == hugoIMGS) {
+                $("#victorhugo__content_imgs").text( "The images on this page contain alt attributes with the focus keyword." ).addClass("good").appendTo($("#victorhugo__content_imgs").parent());
+            } else if (re == 0) {
+                $("#victorhugo__content_imgs").text( "The images in this page are missing the alt attributes." ).addClass("improve").prependTo($("#victorhugo__content_imgs").parent());
+            } else {
+                $("#victorhugo__content_imgs").text( "Some of the images on this page do not have alt attributes containing the focus keyword." ).addClass("improve").prependTo($("#victorhugo__content_imgs").parent());
+            }
+
+        }
+
+        
+        // GOOGLE SNIPPET
+        ///////////////////////////////////////
+        $("#victorhugo #snippet_msg").hide();
+
+        if (victorhugo__title && victorhugo__meta_description) {
+          $("#victorhugo .snippet__desc").html(victorhugo__meta_description);
+        } else {
+          // We show the error msg
+          $("#victorhugo #snippet_msg").show();
+          $("#victorhugo .snippet_wrap").hide(); 
+        }
+         
+        var victorhugo__snippet__title = "{{ .Params.Title }}";
+        victorhugo__snippet__title = victorhugo__snippet__title.substring(0,57);
+        $(".snippet__title").html(victorhugo__snippet__title);
+        
+
+
+        /// READABILITY SCORE
+        var victorhugo__readability = readabilityFunction("{{ .Content }}").fleschReadingEase;
+
+        if ( victorhugo__readability >= 60 ) {
+            $("#victorhugo__readability").html( "The copy scores '" + victorhugo__readability.toFixed(1) +"' in the '<a href='https://en.wikipedia.org/wiki/Flesch%E2%80%93Kincaid_readability_tests' target='_blank'>Flesch Reading Ease test</a>', which is considered ok to read. Well done! " ).addClass("good").appendTo($("#victorhugo__readability").parent());
+        } else if ( victorhugo__readability >= 45 && victorhugo__readability < 60 ) {
+            $("#victorhugo__readability").html( "The copy scores '" + victorhugo__readability.toFixed(1) +"' in the <a href='https://en.wikipedia.org/wiki/Flesch%E2%80%93Kincaid_readability_tests' target='_blank'>Flesch Reading Ease test</a>, which is considered fairly difficult to read. Try to make shorter sentences to improve readability." ).addClass("improve");
+        } else if ( victorhugo__readability < 45 ) {
+            $("#victorhugo__readability").html( "The copy scores '" + victorhugo__readability.toFixed(1) +"' in the <a href='https://en.wikipedia.org/wiki/Flesch%E2%80%93Kincaid_readability_tests' target='_blank'>Flesch Reading Ease test</a>, which is considered extremely difficult to read. Try to make shorter sentences to improve readability. This needs improvement." ).addClass("fix");
+        }
+        
+        // TIME READING SCORE
+        var victorhugo__readingTime = readabilityFunction("{{ .Content }}").readingTime;
+
+        // SVG CIRCLES
+        (function() {
+            document.querySelectorAll('#victorhugo__audit .circular-progress').forEach((progress) => {    
+
+              // First we set the score
+              var victorhugo__seoScoreCircle = $('#victorhugo__seoScore_circle');
+              var victorhugo__readingCircle = $('#victorhugo__readingTime_circle ');
+
+              victorhugo__readingPercent = Math.round( ( victorhugo__readingTime * 100 / 270 )   );
+
+              
+              victorhugo__readingCircle.attr("data-percentage", victorhugo__readingPercent);  
+              
+
+        
+        /// SEO SCORE
+        /// Has to be calcualted at the end since we went through every other factor
+        var victorhugo__seoScore = $('#victorhugo__list .good').length;
+
+        victorhugo__seoScorePercent = Math.round( ( victorhugo__seoScore * 100 / 13 )   );
+
+        if (victorhugo__seoScore >= 0) {
+          victorhugo__seoScoreCircle.attr("data-percentage", victorhugo__seoScorePercent);  
+        }
+              
+              
+
+
+              // Now we start the animation
+
+              const percentage = progress.dataset.percentage;
+              const circle = progress.querySelector('.circle');
+              
+              if (percentage >= 100) {
+                progress.querySelector('#victorhugo__audit .percentage').innerHTML = `100`;
+                circle.setAttribute('stroke-dasharray', `100, 100`);                
+              } else {
+                progress.querySelector('#victorhugo__audit .percentage').innerHTML = `${percentage}`;
+                circle.setAttribute('stroke-dasharray', `${percentage}, 100`);
+              }
+
+              circle.classList.add('-play');
+
+              if (percentage >= 70) {
+                circle.setAttribute("style", "stroke: #8fd739;");
+              } else if (percentage < 70 && percentage >= 45) {
+                circle.setAttribute("style", "stroke: #ffd636;");
+              } else if (percentage < 45) {
+                circle.setAttribute("style", "stroke: #f45a5a;");
+              }
+
+              
+            });  
+        })();
+
+
+        
+
+        // OPEN CLOSE DRAWER
+        $("#victorhugo__close").on('click', function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+            $('#victorhugo').removeClass("victorhugo__open");
+            $('#victorhugo').addClass("victorhugo__close");
+            $('#victorhugo__open').show();
+        });
+
+        $("#victorhugo__open").on('click', function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+            $('#victorhugo').removeClass("victorhugo__close");
+            $('#victorhugo').addClass("victorhugo__open");
+        });
+    
+        
+
+        var victorhugo__snippet_tw_img = $("meta[name='twitter:image']").attr("content");
+        var victorhugo__snippet_tw_link = '<svg style="position:relative; width:18px; margin-left: 9px; margin-right: -4px;" viewBox="0 0 24 24" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M11.96 14.945c-.067 0-.136-.01-.203-.027-1.13-.318-2.097-.986-2.795-1.932-.832-1.125-1.176-2.508-.968-3.893s.942-2.605 2.068-3.438l3.53-2.608c2.322-1.716 5.61-1.224 7.33 1.1.83 1.127 1.175 2.51.967 3.895s-.943 2.605-2.07 3.438l-1.48 1.094c-.333.246-.804.175-1.05-.158-.246-.334-.176-.804.158-1.05l1.48-1.095c.803-.592 1.327-1.463 1.476-2.45.148-.988-.098-1.975-.69-2.778-1.225-1.656-3.572-2.01-5.23-.784l-3.53 2.608c-.802.593-1.326 1.464-1.475 2.45-.15.99.097 1.975.69 2.778.498.675 1.187 1.15 1.992 1.377.4.114.633.528.52.928-.092.33-.394.547-.722.547z"></path><path d="M7.27 22.054c-1.61 0-3.197-.735-4.225-2.125-.832-1.127-1.176-2.51-.968-3.894s.943-2.605 2.07-3.438l1.478-1.094c.334-.245.805-.175 1.05.158s.177.804-.157 1.05l-1.48 1.095c-.803.593-1.326 1.464-1.475 2.45-.148.99.097 1.975.69 2.778 1.225 1.657 3.57 2.01 5.23.785l3.528-2.608c1.658-1.225 2.01-3.57.785-5.23-.498-.674-1.187-1.15-1.992-1.376-.4-.113-.633-.527-.52-.927.112-.4.528-.63.926-.522 1.13.318 2.096.986 2.794 1.932 1.717 2.324 1.224 5.612-1.1 7.33l-3.53 2.608c-.933.693-2.023 1.026-3.105 1.026z"></path></g></svg>'
+
+        $(".snippet__tw_img").html("<img src='" + victorhugo__snippet_tw_img + "' style='width: 100%; border:1px solid #777777; border-top-left-radius: 12px;border-top-right-radius: 12px;'><div id='victorhugo__tw_preview'><span><b>" + victorhugo__title + "</b></span><span>" + victorhugo__meta_description +"</span><span style='color:#888888'>" + victorhugo__snippet_tw_link + "yourwebsite.com</span></div>");
+  
+
+    });
+    </script>
+
+
+    <style>
+
+        #victorhugo {
+            overflow-y: auto;
+            box-shadow: 0 0 25px #ccc;
+            position: fixed;
+            height: 100vh;
+            left: 0;
+            width: 520px;
+            z-index: 10000;
+            background: #fff;
+            padding: 18px 25px;
+            font-family: Arial, Helvetica, sans-serif !important;
+            color: #444;
+            user-select: none;
+            transform: translateX(-900px);
+        }
+
+        #victorhugo .bi-question-circle {
+          cursor:help;
+        }
+
+        #victorhugo span#victorhugo__keyword {
+          background: #eee;
+          padding: 6px 8px;
+          border-radius: .3rem;
+        }
+        #victorhugo span#victorhugo__keyword .bi-question-circle {
+          position: relative;
+          top: -2px; /* Because the icon looks funny at me */
+        }
+
+        #victorhugo .victorhugo_panel {
+          margin: 0 0 1.6em 0;
+        }
+
+        #victorhugo .victorhugo_panel #victorhugo_logo {
+          width: 142px;
+          display: block;
+          margin: 0 auto;
+        }
+
+        #victorhugo hr {
+          border: none; 
+          background-color: none; 
+          background-image: none; 
+          border-top: 1px solid #eee; 
+          margin: 15px 0;
+        }
+
+        #victorhugo::after {
+          content: "v.1.0";
+          color: #ccc;
+          padding: 5px;
+          position: absolute;
+          width: 40px;
+          top: 0;
+          left: 0;
+          font-size: x-small;
+        }
+
+
+        #victorhugo svg {
+          display: inline-block;
+          vertical-align: middle;
+        }
+        
+        #victorhugo a {
+            color: blue;
+            text-decoration: underline;
+        }
+
+        #victorhugo a:hover {
+            text-decoration: none;
+        }
+
+        #victorhugo ul {
+            list-style: none; /* Remove default bullets */
+            margin: 0;
+            padding: 0 25px;
+        }
+
+        #victorhugo li {
+            text-indent: -0.7rem;
+            line-height: 1.4rem;
+            margin-bottom: 14px;
+        }
+
+        #victorhugo ul li::before {
+            content: "•";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
+            font-weight: bold; /* If you want it to be bold */
+            display: inline-block; /* Needed to add space between the bullet and the text */
+            font-size: 2.2rem;
+            vertical-align: bottom;
+            
+            padding-right: 0.5rem;
+            color:#fff;
+        }
+
+        #victorhugo ul li.fix::before {
+            color: #dc3232; 
+        }
+
+        #victorhugo ul li.good::before {
+            color: #7ad03a; 
+        }
+
+        #victorhugo ul li.improve::before {
+            color: #ff7300;
+        }
+
+        /* GOOGLE SNIPPET */
+        #victorhugo #snippet_msg {
+          background: #eee;
+          padding: 15px;
+          text-align: center;
+        }
+
+        #victorhugo #snippet_msg svg {
+          width: 2.5em;
+          height: 2.5em;
+          display: block;
+          margin: 0 auto 5px auto;
+        }
+
+        #victorhugo .snippet_wrap {
+          border: 1px solid #e9e9e9;
+          box-shadow: 0 4px 3px #eee;
+          padding: 1em 1em;
+          border-radius: 0.5em;
+          cursor: pointer;
+          margin: 0 0 2em 0;
+          display: flex;
+          position: relative;
+          column-gap: .7em;
+        }
+
+        #victorhugo .snippet_wrap.column {
+          flex-direction: column;
+        }
+   
+        #victorhugo .snippet_wrap svg { 
+          width: 1.4em;
+          position: absolute;
+          right: 10px;
+        }
+        
+        #victorhugo .snippet_wrap .snippet__title {
+          font-size: 1.3rem;
+          display: block;
+          color: #1a0dab;
+        }
+
+        #victorhugo .snippet_wrap .snippet__title:hover {
+          text-decoration: underline;
+        }
+
+        #victorhugo .snippet_wrap .snippet__link {
+          display: block;
+          color: #5f6368;
+        }
+
+        /* TWITTER SNIPPET */
+        #victorhugo .snippet_wrap #victorhugo__twitter_post {
+          line-height: 1.2rem;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        }
+
+        #victorhugo #victorhugo_twitter_snippet .snippet_wrap:hover {
+          background-color:rgb(245, 248, 250);
+        }
+
+        #victorhugo .snippet_wrap #victorhugo__twitter_post span:first-of-type {
+          color: #777;
+        }
+
+        #victorhugo .snippet_wrap #victorhugo__twitter_post .snippet__desc {
+          display: block;
+          margin: 7px 10px 20px 0;
+        }
+        #victorhugo .snippet_wrap #victorhugo__twitter_post .snippet__bottom {
+          display: flex;
+          flex-direction: row;
+          column-count: 4;
+          column-gap: 5em;
+          margin-left:1em;
+        }
+
+        #victorhugo .snippet_wrap #victorhugo__twitter_post .snippet__bottom svg {
+          position: relative;
+          max-width: 1.2rem;
+          fill: #777;
+        }
+
+        #victorhugo__tw_preview {
+          background: #fff;
+          padding: 12px;
+          font-size: 0.95rem;
+          border-bottom-left-radius: 16px;
+          border-bottom-right-radius: 16px;
+          border: 1px solid #dbdbdb;
+          margin-bottom: 1.2em;
+        }
+
+        #victorhugo__tw_preview span {
+          padding-top: .3em;
+          color: #333;
+          display: block;
+        }
+
+
+        /* VICTOR HUGO AUDITS */
+        #victorhugo__audit {
+          text-align: center;
+          margin: 0 0 3em 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-flow: row nowrap;         
+        }
+
+        #victorhugo__audit .bi-question-circle {
+          position: absolute;
+          right: 0;
+          fill: #999;
+        }
+
+        #victorhugo__audit .bi-question-circle:hover {
+          fill: green;
+        }
+
+        #victorhugo__audit .circular-progress {
+          display: block;
+          max-width: 95px;
+        }
+        #victorhugo__audit .circular-progress .circle-bg,
+        #victorhugo__audit .circular-progress .circle {
+          fill: none;
+          stroke-width: .1em;
+        }
+        #victorhugo__audit .circular-progress .circle-bg {
+          stroke: #eee;
+        }
+        #victorhugo__audit .circular-progress .circle {
+          animation: progress 1s ease-out forwards;
+          animation-play-state: paused;
+          stroke: #000;
+          stroke-linecap: round;
+        }
+        #victorhugo__audit .circular-progress .circle.-play {
+          animation-play-state: running;
+        }
+        @keyframes progress {
+          0% {
+            stroke-dasharray: 0 100;
+          }
+        }
+        #victorhugo__audit .circular-progress .percentage {
+          fill: #000;
+          font-family: sans-serif;
+          font-size: 0.5em;
+          text-anchor: middle;
+        }
+
+        /* SEO Score */
+        #victorhugo__seoScore,
+        #victorhugo__readingTime {
+          margin: 10px 20px;
+          position: relative;
+        }
+        #victorhugo__seoScore::after {
+          content: "SEO Score";
+          font-size: 0.90rem;
+          white-space: nowrap;
+          padding: 0.7em 0 0 0;
+          position: absolute;
+          width: 100%;
+          left: 0;
+          text-align: center;
+        }
+        /* Reading Time */
+        #victorhugo__readingTime::after {
+          content: "Dwell Time Score";
+          font-size: 0.90rem;
+          white-space: nowrap;
+          padding: 0.7em 0 0 0;
+          position: absolute;
+          width: 100%;
+          left: 0;
+          text-align: center;
+        }
+        
+        #victorhugo__bottom {
+          text-align: center;
+          margin: 4em 0 1em 0;
+        }
+
+        #victorhugo__close svg {
+          width: 1.2rem;
+          height: 1.2rem;
+          position: absolute;
+          right: 10px;
+          top: 10px;
+          fill: #777;
+        }
+
+        #victorhugo__close svg:hover {
+          fill: green;
+        }
+
+        /* DRAWER */
+        .victorhugo__open {
+          left: 0;
+          animation: Open .4s forwards;
+        }
+
+
+        #victorhugo__open img {
+          max-width: 75px;
+          margin: 7px;
+        }
+
+        .victorhugo__close {
+          animation: Close .4s forwards;
+        }
+                
+        @keyframes Open {
+          0% {
+            transform: translateX(-900px);
+          }
+          100% {
+            transform: translateX(0);
+          }
+        }
+
+        @keyframes Close {
+          0% {
+            transform: translateX(0);
+          }
+          100% {
+            transform: translateX(-900px);
+          }
+        }
+
+        #victorhugo__open {
+          position: fixed;
+          left: 5px;
+          top: 5px;
+          padding: 5px;
+          z-index: 100;
+          transition: all .2s ease-in-out; 
+        }
+
+        #victorhugo__open:hover {
+          transform: scale(1.1); 
+        }
+
+    </style>
+
+    <a href="#" id="victorhugo__open">
+      <img src="https://raw.githubusercontent.com/doncabreraphone/victorhugo/master/misc/victorhugo__logo_small.png">
+    </a>
+
+    <div id="victorhugo">
+        <a href="#" id="victorhugo__close">
+          <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z"/>
+            <path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z"/>
+          </svg>
+        </a>
+
+        <div class="victorhugo_panel">
+          <img src="https://raw.githubusercontent.com/doncabreraphone/victorhugo/master/misc/victorhugo__logo_small.png" id="victorhugo_logo">
+        </div>
+
+        <!-- Audit Circles -->
+                 
+        <div id="victorhugo__audit">
+
+          <div id="victorhugo__seoScore">
+            <span title="This is your overal score. The less fixed and improvements you have left, the higher your score.">
+              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-question-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                <path d="M5.25 6.033h1.32c0-.781.458-1.384 1.36-1.384.685 0 1.313.343 1.313 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.007.463h1.307v-.355c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.326 0-2.786.647-2.754 2.533zm1.562 5.516c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
+              </svg>
+            </span>
+
+          <svg viewBox="0 0 36 36" id="victorhugo__seoScore_circle" class="circular-progress" data-percentage="0">
+            <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
+            <path class="circle" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
+            <text x="18" y="20.35" class="percentage">0</text>
+          </svg>
+          </div>
+          
+          <div id="victorhugo__readingTime">
+            <span title="This is the duration the user will spend reading your content. It is the time between when a user clicks on a search engine result, and when the user returns from that result, or leaves.">
+              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-question-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                <path d="M5.25 6.033h1.32c0-.781.458-1.384 1.36-1.384.685 0 1.313.343 1.313 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.007.463h1.307v-.355c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.326 0-2.786.647-2.754 2.533zm1.562 5.516c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
+              </svg>
+            </span>
+
+          <svg viewBox="0 0 36 36" id="victorhugo__readingTime_circle" class="circular-progress" data-percentage="0">
+            <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
+            <path class="circle" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
+            <text x="18" y="20.35" class="percentage">0</text>
+          </svg>
+          </div>
+        
+          
+          
+
+
+        </div>
+
+
+        <hr>
+        <!-- Focus Keyword -->
+        <div class="victorhugo_panel">
+            <p style="text-align:center;">Focus Keyword: 
+              <span id="victorhugo__keyword" title="Enter the keyword/keyphrase you would like this page to rank for in Google. Victor Hugo will run checks to make sure you stay on track.">{{ if .Params.focus_keyword }}{{ .Params.focus_keyword }}{{ end }}
+                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-question-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                  <path d="M5.25 6.033h1.32c0-.781.458-1.384 1.36-1.384.685 0 1.313.343 1.313 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.007.463h1.307v-.355c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.326 0-2.786.647-2.754 2.533zm1.562 5.516c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
+                </svg>
+              </span>  
+            </p>
+        </div>
+            
+        <!-- Full Audit -->
+        <div class="victorhugo_panel">
+            <ul id="victorhugo__list">
+                <li id="focusKeyword"></li>
+                <li id="stopword"></li>
+                <li id="slug"></li>
+                <li id="victorhugo__content"></li>
+                <li id="meta__description"></li>
+                <li id="victorhugo__content_links"></li>
+                <li id="victorhugo__content_imgs"></li>
+                <li id="victorhugo__firstParagraph"></li>
+                <li id="victorhugo__title"></li>
+                <li id="victorhugo__density"></li>
+                <li id="victorhugo__passive"></li>
+                <li id="victorhugo__readability"></li>
+                <li id="victorhugo__subheadings"></li>
+            </ul>
+        </div>
+
+        <!-- SERP -->
+        <div class="victorhugo_panel">
+
+          <div id="snippet_msg">
+            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-exclamation-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+              <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
+            </svg>
+            To see the Google and Social Media Snippet, add a description and a title for this post in the front matter.
+          </div>
+
+          <div id="victorhugo_google_snippet">
+            {{ $victorhugo__slug := .RelPermalink }}
+            {{  $victorhugo__slug := substr $victorhugo__slug 0 -1 }}
+            {{  $victorhugo__slug := substr $victorhugo__slug 1 200 }}
+            
+            <p>Your post on Google</p>
+            <div class="snippet_wrap column">
+              <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 262">
+                <defs/>
+                <path fill="#4285F4" d="M256 133c0-10-1-18-3-26H131v48h71c-1 12-9 30-26 43v1l38 30h3c25-22 39-56 39-96"/>
+                <path fill="#34A853" d="M131 261c35 0 64-12 86-32l-41-31c-11 7-26 13-45 13-35 0-64-23-75-55l-1 1-41 31v1c21 43 65 72 117 72"/>
+                <path fill="#FBBC05" d="M56 156a80 80 0 010-51v-2L15 71l-1 1a131 131 0 000 117l42-33"/>
+                <path fill="#EB4335" d="M131 50c24 0 41 11 50 20l37-36A130 130 0 0014 72l42 33c11-32 40-55 75-55"/>
+              </svg>
+              
+              <span class="snippet__link">{{ replace $victorhugo__slug "/" " › " }}</span>
+              <span class="snippet__title"></span>
+              <span class="snippet__desc"></span>
+            </div>
+            
+          </div>
+
+          <div id="victorhugo_twitter_snippet">
+            <p>Your post when shared on Twitter</p>
+
+            <div class="snippet_wrap">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1110 902">
+                <defs/>
+                <path fill="#5da8dc" stroke="#5da8dc" stroke-width=".5" d="M741 0v0h52l19 4a203 203 0 0165 24 285 285 0 0147 33c6 6 16 8 29 5l42-12 44-18a516 516 0 0032-16h0l1-1h1l1-1h1v-1h1l1-1h1v2l-1 1v3l-1 1v1l-1 2-1 4-9 20a233 233 0 01-70 82l-5 3-1 1-1 1h0-1 0l-1 1-1 1h0-1 0v1h0-1 5l28-5c19-4 37-9 54-15l27-9 3-1h1l1-1h1l1-1h1l2-1h2v2h0l-1 1h0-1 0v1h0-1 0v1h0-1v2h-1a4398 4398 0 01-29 37l-21 22c-13 14-26 25-38 35a47 47 0 00-19 38 878 878 0 01-10 111 721 721 0 01-143 316 597 597 0 01-122 114 428 428 0 01-76 45 474 474 0 01-107 43 521 521 0 01-121 22l-36 4v0h-65v0l-8-1a456 456 0 01-56-6 599 599 0 01-239-85l-9-5v-1h0-1v-1H2v-1h0-1v-1h0-1v-2h1l1 1h5a607 607 0 00113-3 518 518 0 00186-71l23-16h1v-1h1v-1h2v-2h1v-1h-8l-15-1a226 226 0 01-94-35 177 177 0 01-46-39 202 202 0 01-38-60l-8-18-1-1v-2l-1-1v-1h2l1 1 11 1 35 1a267 267 0 0043-4h2l3-1h2v-1h1v-1h-4l-2-1h-2l-2-1a184 184 0 01-34-13c-15-6-26-12-35-18a242 242 0 01-25-20c-8-7-16-17-25-28a240 240 0 01-41-82 232 232 0 01-8-42l-2-21h2l1 1 1 1h1l1 1 16 7 38 12 28 5 4 1h9v-1h-1 0v-1h-1 0l-1-1h-1v-1h-1 0l-1-1h-1v-1a1247 1247 0 01-26-22l-18-21a162 162 0 01-16-24 285 285 0 01-26-70A220 220 0 0166 63l9-19v-1l1-2h0v-1h1v1h1v1h1v1l1 1h0v1l14 15a892 892 0 0077 75 588 588 0 00106 69 595 595 0 00179 63 785 785 0 0082 11h7v-3l-2-12a235 235 0 011-77 246 246 0 0142-96 216 216 0 0169-60 260 260 0 0186-30z"/>
+                <path fill="#fff" stroke="#fff" stroke-width=".5" d="M0 399V0h741v0l-13 3a260 260 0 00-113 56 216 216 0 00-60 89 246 246 0 00-12 115l2 12v3h-7a506 506 0 01-82-11 635 635 0 01-107-31 595 595 0 01-203-124l-20-19-32-33-14-15v-1h0l-1-1v-1h-1v-1h0-1v-1h0-1v1h0l-1 2v1l-9 19a238 238 0 00-19 67 242 242 0 0030 141l16 24a588 588 0 0035 37l9 6h0l1 1 1 1h1l1 1 1 1h1v1h1-13a444 444 0 01-66-17l-16-7-1-1h-1l-1-1h-1l-1-1h-1l2 21a232 232 0 0074 152 242 242 0 0025 20 384 384 0 0069 32h4l2 1h2l2 1h0-1 0v1h-2l-3 1h-2a210 210 0 01-43 4l-35-1-11-1-1-1h-2v1l1 1v2l1 1 8 18a245 245 0 0038 60l20 20a266 266 0 00119 54l16 1h8v1h-1v2h-2v1h-1 0v1h-1 0l-23 16a370 370 0 01-131 59 518 518 0 01-144 17l-24-2H2l-1-1H0V399zm1108-289h0l1-1h0v792H382v0l36-4a825 825 0 00121-22 759 759 0 00147-64 428 428 0 0073-53 666 666 0 0085-85 675 675 0 00153-427c0-15 6-28 19-38a503 503 0 0088-94h1v-1l1-1h0v-1h1v-1h1zM812 4l-19-4h316v107h-2l-2 1h-1l-1 1h-1l-1 1h-1l-3 1-27 9c-17 6-35 11-54 15l-28 6h-5v-1h1v-1h1l1-1h1v-1h1l1-1h1l5-4 9-7 14-13a250 250 0 0057-87l1-1v-1l1-1v-1l1-2v-3h-2v1h-1 0l-1 1-1 1h-1l-1 1h0a384 384 0 01-32 16 564 564 0 01-86 30c-13 3-23 1-29-5s-13-12-21-17l-26-16a245 245 0 00-30-14c-11-4-22-8-35-10zM0 851v-51h1v1h1v1h1l1 1h1v1l9 5 16 9 36 18a594 594 0 00187 58 1669 1669 0 0056 6l8 1v0H0v-50z"/>
+              </svg>  
+
+              <div class="left">
+                <img src="https://raw.githubusercontent.com/doncabreraphone/victorhugo/master/misc/victorhugo__logo_small.png" class="victorhugo__avatar" style="border-radius: 100%;width: 50px">
+              </div>
+              
+
+
+              <div id="victorhugo__twitter_post">
+                <b>Victor Hugo</b> <span>@thefreebundle</span> · {{ .Date.Format "Jan 2" }}
+                <span class="snippet__desc"></span>
+
+                <span class="snippet__tw_img"></span>
+              
+                <div class="snippet__bottom">
+
+                  <svg viewBox="0 0 24 24" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"><g><path d="M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.044.286.12.403.142.225.384.347.632.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.367-3.43-7.787-7.8-7.788zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.335-.75-.75-.75h-.396c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z"></path></g></svg>
+
+                  <svg viewBox="0 0 24 24" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"><g><path d="M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06zm-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z"></path></g></svg>
+
+                  <svg viewBox="0 0 24 24" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"><g><path d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z"></path></g></svg>
+
+                  <svg viewBox="0 0 24 24" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"><g><path d="M17.53 7.47l-5-5c-.293-.293-.768-.293-1.06 0l-5 5c-.294.293-.294.768 0 1.06s.767.294 1.06 0l3.72-3.72V15c0 .414.336.75.75.75s.75-.336.75-.75V4.81l3.72 3.72c.146.147.338.22.53.22s.384-.072.53-.22c.293-.293.293-.767 0-1.06z"></path><path d="M19.708 21.944H4.292C3.028 21.944 2 20.916 2 19.652V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 .437.355.792.792.792h15.416c.437 0 .792-.355.792-.792V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 1.264-1.028 2.292-2.292 2.292z"></path></g></svg>
+
+                </div>
+              </div>
+
+            </div>
+
+
+          </div>
+
+          
+          <p id="victorhugo__bottom"><a href="https://github.com/doncabreraphone/victorhugo" target="_blank">About Victor Hugo</a></p>
+
+        </div>
+    
+    
+      </div>
+
+
+        
+
+    </div>
+
+    {{ else }}
+    <div style="
+    overflow-y: auto;
+        box-shadow: 0 0 25px #ccc;
+        position: fixed;
+        height: 100vh;
+        left: 0;
+        width: 520px;
+        z-index: 10000;
+        background: #fff;
+        padding: 18px 25px;
+        font-family: Arial, Helvetica, sans-serif !important;
+        color: #444;
+
+        
+
+    display: table;
+    text-align: center;
+    ">
+
+    <div style="
+        display: table-cell;
+    vertical-align: middle;
+    text-align: left;
+    ">
+
+    <ul style="list-style-type: none; margin: 0; padding: 0 15px;">
+
+    <li style="text-indent: -1rem;  margin: 15px 0;"><span style="font-size: 2rem; vertical-align: middle; line-height: 1.2rem; color: #dc3232">•</span> You forgot to add, either "Focus_Keyword", or "Victor_Hugo" params in the front matter of this page. <a href="https://github.com/doncabreraphone/victorhugo/#configure-victor-hugo" target="_blank">Read More.</a></li>
+
+    </ul>
+
+    <hr>
+
+    <div style="text-align: center; font-size: small;">
+    <b>Tip:</b> whenever you see this icon <svg width="1em" height="1em" viewBox="0 0 16 16" style="display: inline-block;
+    vertical-align: middle;" class="bi bi-question-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+      <path d="M5.25 6.033h1.32c0-.781.458-1.384 1.36-1.384.685 0 1.313.343 1.313 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.007.463h1.307v-.355c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.326 0-2.786.647-2.754 2.533zm1.562 5.516c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
+    </svg> you can hover with your mouse for a few seconds and a quick tip will be displayed. 
+    </div>
+
+    </div>
+
+    </div>
+    {{ end }}
+
+    {{ else }}
+{{ end }}
+{{ end }}
+