we are migrating, just a few tips for our content writers.

readme.md

Dieses Tool ermöglicht euch Stellen zu markieren, die mit dem neuen Style eventuell nicht kompatibel sind. Generell ist das Problem die Headings. Nicht nur dass sie SEO technisch schlecht sind, sondern sie werden auch im neuen Style teilweise riesig dargestellt.

Es gibt Stellen, bei denen das Script rät, Headings auszutauschen. Wenn diese aber vom System generiert werden, braucht ihr euch nicht darum zu kümmern.

Ihr könnt zwischen WARNING und ERROR unterscheiden (braun und rot).

Um das script nutzen zu können würde es sich empfehlen

1. Legt einen neuen Bookmark an und benennt ihn z.B. nach "Migration Info"
2. als URL gibt ihr nicht einen link ein, sondern folgendes Script

    javascript:(function(){var ht = document.createElement('script');ht.type='text/javascript';ht.src = 'https://gist.github.com/theluk/7135416/raw/d33a0bde05eeab38ebbfedf09328a8d07d4123e5/main.js';var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ht, s);})();

3. Danach einfach auf irgendeine miBaby Seite gehen (Landingpages)
4. Wenn die Seite geladen hat, auf den neu erstellten Bookmark klicken!

loader.js

(function(){ 
    var ht = document.createElement('script');
    ht.type='text/javascript';
    ht.src = 'https://gist.github.com/theluk/7135416/raw/d33a0bde05eeab38ebbfedf09328a8d07d4123e5/main.js';
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ht, s);
})();

main.js

(function() {
    var definitions = [
        {
            finder : "h1 > strong, h2 > strong, h3 > strong, h4 > strong, h5 > strong",
            focus : function($el) { return $el.parent(); },
            caption : function($el) { return "Heading (" + $el.get(0).tagName + ") has a <strong> Tag!" },
            state : "warning"
        },
        {
            finder : ".contentBox h1, .contentBox h2",
            focus : function($el) {return $el},
            caption : function($el) {return "It is generally better not to use H1 and H2. Change it where you can."}
        },
        {
            finder : "h1:not(:first)",
            focus : function($el) {return $el},
            caption : function($el) {return "Use only ONE H1 per page"},
            state : "error"
        },
        {
            finder : "h1.journal, h2.journal, h3.journal, h1 .journal, h2 .journal, h3 .journal",
            focus : function($el) {return $el},
            caption : function($el) {return "Try not to use Journal H1, H2, H3 as they will be huge..."},
            state : "warning"
        },
        {
            finder : ".col_4x4 h1, .col_4x4 h2, .col_4x4 h3",
            focus : function($el) {return $el},
            caption : function($el) {return "DONT use h1,h2,h3 in slim columns!"},
            state : "error"
        },
        {
            finder : function() {
                return $('p').filter(function() {
                    var $this = $(this);
                    if($this.html().replace(/\s|&nbsp;|\<br\>|\<br\/\>/g, '').length == 0)
                        return true;
                    return false;
                });
            },
            focus : function($el) {return $el},
            caption : function() {return "Empty Paragraph (new styles will get extra margin to paragraphs)"},
            state : "warning"
        },
        {
            finder : ".col_4x4 .list.list-normal",
            focus : function($el) {return $el},
            caption : function($el) {return "Remove class 'list-normal' in slim columns from UL as it looks better"},
            state : "warning"
        }
    ];
    
    //execute
    run();
    
    function run() {
        var i=0, 
            len = definitions.length,
            definition,
            $els,
            elementsWithErrors = [];
            
        for (;i < len;i++) {
            definition = definitions[i];
            $els = $.isFunction(definition.finder) ? definition.finder() : $(definition.finder);
            $els.each(function() {
                var focused = definition.focus($(this));
                var obj = null;
                if (elementsWithErrors.indexOf(focused.get(0)) == -1) {
                    obj = {errors : []};
                    focused.data("migration-errors", obj);
                    elementsWithErrors.push(focused.get(0));
                } else {
                    obj = focused.data("migration-errors");
                }
                obj.errors.push({state : definition.state, message : definition.caption(focused)});
            });
        }
        renderAll(elementsWithErrors);
    }
    
    function renderAll(elements) {
        var i=0,len=elements.length;
        for (;i<len;i++) {
            var $el = $(elements[i]);
            var data = $el.data("migration-errors").errors;
            for (var i2=0;i2<data.length;i2++) {
                render($el, data[i2].state, data[i2].message);
            }
        }
    }
    
    function render($target, state, message) {
        var color = state == "warning" ? "brown" : "red;"
        $target.css("border", "1px solid red");
        $('<div style="background-color:'+color+';color:white;font:9px Verdana;">')
            .css("maxWidth", (parseInt($target.outerWidth(true)) + "px"))
            .css("margin", "1px 0")
            .insertAfter($target)
            .text(message)
            .position({
                my : "left top",
                at : "left top",
                of : $target
            });
    }
})();