<commit_before><style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Noto+Sans');

    /* transitions */

    #preview-close.hidden {
        display: none;
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
        opacity: 0
    }

    .bounce-enter-active {
        animation: bounce linear 0.5s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
    }
    @keyframes bounce{
        0% { transform: translate(0px,0px) }
        15% { transform: translate(0px,-25px) }
        30% { transform: translate(0px,0px) }
        45% { transform: translate(0px,-15px) }
        60% { transform: translate(0px,0px) }
        75% {  transform: translate(0px,-5px) }
        100% { transform: translate(0px,0px)  }
    }

    .shake-enter-active{
        animation: shake linear 0.5s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
    }
    @keyframes shake{
        0% { transform: translate(0px,0px) }
        10% { transform: translate(-10px,0px) }
        20% { transform: translate(10px,0px) }
        30% { transform: translate(-10px,0px) }
        40% { transform: translate(10px,0px) }
        50% { transform: translate(-10px,0px) }
        60% { transform: translate(10px,0px) }
        70% { transform: translate(-10px,0px) }
        80% { transform: translate(10px,0px) }
        90% { transform: translate(-10px,0px) }
        100% { transform: translate(0px,0px) }
    }

    .fade-in-down-enter-active {
        animation: fadeInDown ease 0.5s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
        animation-fill-mode:forwards; /*when the spec is finished*/
    }

    @keyframes fadeInDown{
        0% { opacity: 0;  transform: translate(0px,-25px) }
        100% { opacity: 1; transform: translate(0px,0px) }
    }

    .preview-image {
        opacity: 0.3;
    }
    .preview-box {
        position: absolute;
    }
</style>

<template>
    <a v-bind:href="targetUrl" v-if="show" v-bind:style="[
        linkStyles,
        _position,
        dimensionOptions[dimensions]
    ]">
        <transition appear v-bind:name="transition">
            <div class="preview-box" v-bind:style="[
                boxStyles,
                dimensionOptions[dimensions],
                customBoxStyles
            ]">
                <a class="preview-close" href="javascript://" v-bind:class="[{hidden: !closeable}]" v-on:click="show = false" v-bind:style="closeStyles">&#x274C;</a>
                <p v-html="text" class="preview-text" v-bind:style="[
            _textAlign,<commit_msg>Fixing HTML entity used for closing up banners. The one used was always red.<commit_after><style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Noto+Sans');

    /* transitions */

    #preview-close.hidden {
        display: none;
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
        opacity: 0
    }

    .bounce-enter-active {
        animation: bounce linear 0.5s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
    }
    @keyframes bounce{
        0% { transform: translate(0px,0px) }
        15% { transform: translate(0px,-25px) }
        30% { transform: translate(0px,0px) }
        45% { transform: translate(0px,-15px) }
        60% { transform: translate(0px,0px) }
        75% {  transform: translate(0px,-5px) }
        100% { transform: translate(0px,0px)  }
    }

    .shake-enter-active{
        animation: shake linear 0.5s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
    }
    @keyframes shake{
        0% { transform: translate(0px,0px) }
        10% { transform: translate(-10px,0px) }
        20% { transform: translate(10px,0px) }
        30% { transform: translate(-10px,0px) }
        40% { transform: translate(10px,0px) }
        50% { transform: translate(-10px,0px) }
        60% { transform: translate(10px,0px) }
        70% { transform: translate(-10px,0px) }
        80% { transform: translate(10px,0px) }
        90% { transform: translate(-10px,0px) }
        100% { transform: translate(0px,0px) }
    }

    .fade-in-down-enter-active {
        animation: fadeInDown ease 0.5s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
        animation-fill-mode:forwards; /*when the spec is finished*/
    }

    @keyframes fadeInDown{
        0% { opacity: 0;  transform: translate(0px,-25px) }
        100% { opacity: 1; transform: translate(0px,0px) }
    }

    .preview-image {
        opacity: 0.3;
    }
    .preview-box {
        position: absolute;
    }
</style>

<template>
    <a v-bind:href="targetUrl" v-if="show" v-bind:style="[
        linkStyles,
        _position,
        dimensionOptions[dimensions]
    ]">
        <transition appear v-bind:name="transition">
            <div class="preview-box" v-bind:style="[
                boxStyles,
                dimensionOptions[dimensions],
                customBoxStyles
            ]">
                <a class="preview-close" href="javascript://" v-bind:class="[{hidden: !closeable}]" v-on:click="show = false" v-bind:style="closeStyles">&#x1f5d9;</a>
                <p v-html="text" class="preview-text" v-bind:style="[
            _textAlign,
{'fraction_non_alphanumeric': 0.14917733089579524, 'fraction_numerical': 0.04570383912248629, 'mean_word_length': 2.1587759815242493, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 19, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1560754', 'n_tokens_mistral': 1924, 'n_tokens_neox': 1773, 'n_words': 338}