Adding better support for ads including the chance to

block them without breaking the website.

content/categories/donde-comer.xml

@@ -11,6 +11,19 @@
 	<menu_text>Donde comer</menu_text>
 	<slug>donde-comer</slug>
     <attributes>
+        <attribute>
+            <title>Comida veganos en Burguillos.</title>
+            <identifier>comida-vegana</identifier>
+            <priority>1</priority>
+            <menu_text>Listado de sitios que tienen oferta de platos veganos.</menu_text>
+            <description>
+                <h2>Comida vegana en Burguillos</h2>
+
+                <p>Todos los negocios de restauración que tienen una oferta de platos veganos.</p>
+
+                <p>¿Conoces algún negocio que debería estar listado aquí? Contacta con <a href="mailto:contact@owlcode.tech">contact@owlcode.tech</a> y lo añadiremos a este registro.</p>
+            </description>
+        </attribute>
         <attribute>
             <title>Pedir comida a domicilio en Burguillos.</title>
             <identifier>reparto-a-domicilio-comida</identifier>

content/posts/0000030-yo-te-lo-guiso.xml

@@ -0,0 +1,28 @@
+<post>
+    <author>Burguillos.info</author>
+    <date>2023-08-21T13:23+00:00</date>
+    <last_modification_date>2023-06-06T15:06+00:00</last_modification_date>
+    <title>Descubre "Yo te lo guiso" en Burguillos y sus datos de contacto.</title>
+    <ogdesc>Descubre "Yo te lo guiso" en Burguillos y sus datos de contacto.</ogdesc>
+    <img src="/img/anuncio-yo-te-lo-guiso-1.webp"/>
+    <category>donde-comer</category>
+    <attributes>
+        <attribute>comida-vegana</attribute>
+    </attributes>
+    <slug>yo-te-lo-guiso</slug>
+    <content>
+        <img witdh="50%" alt="Cartel 'Yo te lo guiso'" style="border: solid 1px black" src="/img/anuncio-yo-te-lo-guiso-1.webp"/>
+
+        <p>Con localización en Calle los Palmeros número 32, "Yo te lo guiso" ofrece una propuesta de catering de cambio diario única en Burguillos.</p>
+        
+        <p>Los horarios del negocio son de 12:00 a 15:00 y de 20:30 a 23:00 de Miercoles a Domingo. El Domingo no está disponible el horario nocturno.</p>
+
+        <p>El negocio ofrece platos vegetarianos y veganos, siendo de los pocos restaurantes en Burguillos que ofrecen este tipo de servicio.</p>
+
+        <p>Los Jueves son los días del pescado, hay otra oferta de comidas además de pescado; no obstante el porcentaje de platos de pescado es mucho más amplio esos días.</p>
+
+        <p>Habitualmente nos agrada compartir con vosotros la carta, pero ya que este negocio cambia su oferta de comidas de forma diaria esto no es posible.</p>
+
+        <p>¿Quieres ver tu negocio localizado en Burguillos en este espacio? Contacta con <a href="mailto:contact@owlcode.tech">contact@owlcode.tech</a>.</p>
+    </content>
+</post>

js-src/index.js

@@ -32,6 +32,22 @@ window.onload = () => {
 
 let current_ad_number = null
 
+function expand_page_contents() {
+    const page_contents = document.querySelector('div.page-contents'); 
+    if (page_contents === null) {
+        return;
+    }
+    page_contents.classList.add('no-carousel');
+}
+
+function no_more_ads() {
+    const carousel = document.querySelector('.carousel');
+    if (carousel !== null) {
+        carousel.remove();
+    }
+    expand_page_contents();
+}
+
 function loadAd() {
     const params = new URLSearchParams();
     if (current_ad_number !== null) {
@@ -44,7 +60,10 @@ function loadAd() {
         const ad = res.ad
         const must_continue = res.continue
         const carousel = document.querySelector('.carousel');
-        if (must_continue === 0) {
+        if (must_continue === 0
+                || carousel === null
+                || carousel.offsetWidth === 0) {
+            no_more_ads();
             return;
         }
         carousel.innerHTML = ""

lib/BurguillosInfo/Ad.pm

@@ -21,8 +21,8 @@ sub regenerate_alternative($self) {
     $self->alternative(int(rand() * ($self->max_alternative+1)));
 }
 
-sub order {
-    return 999;
+sub weight {
+    return 25;
 }
 
 sub seconds {

lib/BurguillosInfo/Ads.pm

@@ -33,19 +33,9 @@ use Module::Pluggable
         for my $ad (@array_ads) {
             $self->_check_ad_valid($ad);
         }
-        @array_ads = sort { $self->_order_two_ads( $a, $b ); } @array_ads;
     }
 }
 
-sub _order_two_ads ( $self, $a, $b ) {
-    my $by_order = $a->order <=> $b->order;
-    if ($by_order) {
-        return $by_order;
-    }
-    my $by_alpha = $a->id cmp $b->id;
-    return $by_alpha;
-}
-
 sub get_next ( $self, $current_ad_number = undef ) {
     my $array = $self->_array;
     use Data::Dumper;
@@ -61,6 +51,7 @@ sub get_next ( $self, $current_ad_number = undef ) {
     if ( !$ad->is_active ) {
         return $self->get_next( $self->_get_next_number($current_ad_number) );
     }
+    my $ad = $self->get_rand_ad($array);
     $ad->regenerate_alternative;
     return {
         ad                => $ad->serialize,
@@ -69,6 +60,28 @@ sub get_next ( $self, $current_ad_number = undef ) {
     };
 }
 
+sub get_rand_ad($self, $array) {
+    my $valid_ads = [ grep { $_->is_active } @$array ];
+    my $max_weight = $self->sum_weights($array);
+    my $rand = int(rand() * $max_weight);
+    my $sum_weight = 0;
+    for my $ad (@$array) {
+        $sum_weight += $ad->weight;
+        if ($rand < $sum_weight) {
+            return $ad;
+        }
+    }
+    die "This should not happen, there should be always a corresponding ad.";
+}
+
+sub sum_weights($self, $array) {
+    my $sum = 0;
+    for my $ad (@$array) {
+        $sum += $ad->weight;
+    }
+    return $sum;
+}
+
 sub _get_next_number ( $self, $current_ad_number = undef ) {
     my $array = $self->_array;
     if ( !scalar @$array ) {

lib/BurguillosInfo/Ads/YoTeLoGuiso.pm

@@ -16,12 +16,12 @@ sub id ($self) {
     return 'yo-te-lo-guiso';
 }
 
-sub order {
+sub weight {
     return 50;
 }
 
 sub max_alternative {
-    return 2;
+    return 3;
 }
 
 sub is_active ($self) {
@@ -29,6 +29,9 @@ sub is_active ($self) {
 }
 
 sub img ($self) {
+    if ( $self->alternative == 2 ) {
+        return '/img/anuncio-yo-te-lo-guiso-3.webp';
+    }
     if ( $self->alternative == 1 ) {
         return '/img/anuncio-yo-te-lo-guiso-2.webp';
     }
@@ -36,6 +39,9 @@ sub img ($self) {
 }
 
 sub text($self) {
+    if ( $self->alternative == 2 ) {
+        return '¡Comida distinta cada día! Ven a "Yo te lo guiso".';
+    }
     if ( $self->alternative == 1 ) {
         return
 'Una comida como esta no la ves todos los días, disponible en Burguillos, entra y descubrelo.';
@@ -44,6 +50,6 @@ sub text($self) {
 }
 
 sub href {
-    return 'https://example.com';
+    return '/posts/yo-te-lo-guiso?come-from-ad=1';
 }
 1;

public/css/styles.css

@@ -26,11 +26,9 @@ body {
     top: 80%;
     height: calc(20% - 6px);
     width: calc(100% - 6px);
-    background: #f2eb8c;
     border: solid 3px black; }
-    body div.carousel:hover {
-      background: blueviolet; }
     body div.carousel a {
+      background: #f2eb8c;
       color: blueviolet;
       display: flex;
       text-align: center;
@@ -39,6 +37,7 @@ body {
       height: 100%;
       text-decoration: none; }
       body div.carousel a:hover {
+        background: blueviolet;
         color: #f2eb8c; }
     body div.carousel div.promoted-tag, body div.carousel h3 {
       margin: 0;
@@ -58,10 +57,13 @@ body {
     left: 0%;
     height: 100%;
     width: 100%; }
+  body div.page-contents.no-carousel {
+    height: calc(100% - 60px); }
   body div.page-contents {
     position: fixed;
     top: 60px;
     height: calc(80% - 60px);
+    width: 100%;
     overflow-y: scroll; }
     body div.page-contents div.child-categories-mobile a {
       padding-left: 2.5rem; }

public/css/styles.scss

@@ -44,12 +44,9 @@ body {
     top: 80%;
     height: calc(20% - 6px);
     width: calc(100% - 6px);
-    background: $color_div;
-    &:hover {
-        background: $background_div;
-    }
     border: solid 3px black;
     a {
+        background: $color_div;
         color: $background_div;
         display: flex;
         text-align: center;
@@ -58,6 +55,7 @@ body {
         height: 100%;
         text-decoration: none;
         &:hover {
+            background: $background_div;
             color: $color_div;
         }
     }
@@ -87,10 +85,15 @@ body {
     width: 100%;
   }
 
+  div.page-contents.no-carousel {
+      height: calc(100% - 60px);
+  }
+
   div.page-contents {
     position: fixed;
     top: 60px;
     height: calc(80% - 60px);
+    width: 100%;
     overflow-y: scroll;
     div.child-categories-mobile a {
       padding-left: 2.5rem;

public/js/bundle.js

@@ -16,7 +16,7 @@
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(tablesort__WEBPACK_IMPORTED_MODULE_0__);\n\n\nwindow.Tablesort = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n__webpack_require__(/*! tablesort/src/sorts/tablesort.number */ \"./node_modules/tablesort/src/sorts/tablesort.number.js\");\n\nwindow.onload = () => {\n    const menu_expand = document.querySelector('a.menu-expand');\n    const mobile_foldable = document.querySelector('nav.mobile-foldable');\n    const tables = document.querySelectorAll('table')\n\n    loadAd()\n\n    if (menu_expand !== null && mobile_foldable !== null) {\n        menu_expand.addEventListener('click', () => {\n            mobile_foldable.classList.toggle('show');\n        });\n    }\n\n    for (const table of tables) {\n        const header = table.querySelector('tr');\n        if (header !== null) {\n            header.setAttribute('data-sort-method', 'none')\n            for (const th of header.querySelectorAll('th')) {\n                if (th.getAttribute('data-sort-method') == null) {\n                    th.setAttribute('data-sort-method', 'thead')\n                }\n            }\n        }\n        new (tablesort__WEBPACK_IMPORTED_MODULE_0___default())(table)\n    }\n};\n\nlet current_ad_number = null\n\nfunction loadAd() {\n    const params = new URLSearchParams();\n    if (current_ad_number !== null) {\n        params.append('n', \"\"+current_ad_number);\n    }\n    fetch('/next-ad.json?' + params).then((res) => {\n        return res.json()\n    }).then((res) => {\n        current_ad_number = res.current_ad_number\n        const ad = res.ad\n        const must_continue = res.continue\n        const carousel = document.querySelector('.carousel');\n        if (must_continue === 0) {\n            return;\n        }\n        carousel.innerHTML = \"\"\n        const a = document.createElement('a')\n        const image = document.createElement('img')\n        const text_container = document.createElement('div')\n        const text = document.createElement('h4')\n        const promoted = document.createElement('p')\n\n        promoted.classList.add('promoted-tag')\n        promoted.innerText = \"Promocionado\"\n        image.src = ad.img\n        text.innerText = ad.text\n        a.href = ad.href\n\n        a.append(image)\n        text_container.append(promoted)\n        text_container.append(text)\n        a.append(text_container)\n        carousel.append(a);\n\n        window.setTimeout(() => {\n            loadAd()\n        }, ad.seconds * 1000)\n    })\n}\n\n\n//# sourceURL=webpack://BurguillosInfo/./js-src/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n/* harmony import */ var tablesort__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(tablesort__WEBPACK_IMPORTED_MODULE_0__);\n\n\nwindow.Tablesort = __webpack_require__(/*! tablesort */ \"./node_modules/tablesort/src/tablesort.js\");\n__webpack_require__(/*! tablesort/src/sorts/tablesort.number */ \"./node_modules/tablesort/src/sorts/tablesort.number.js\");\n\nwindow.onload = () => {\n    const menu_expand = document.querySelector('a.menu-expand');\n    const mobile_foldable = document.querySelector('nav.mobile-foldable');\n    const tables = document.querySelectorAll('table')\n\n    loadAd()\n\n    if (menu_expand !== null && mobile_foldable !== null) {\n        menu_expand.addEventListener('click', () => {\n            mobile_foldable.classList.toggle('show');\n        });\n    }\n\n    for (const table of tables) {\n        const header = table.querySelector('tr');\n        if (header !== null) {\n            header.setAttribute('data-sort-method', 'none')\n            for (const th of header.querySelectorAll('th')) {\n                if (th.getAttribute('data-sort-method') == null) {\n                    th.setAttribute('data-sort-method', 'thead')\n                }\n            }\n        }\n        new (tablesort__WEBPACK_IMPORTED_MODULE_0___default())(table)\n    }\n};\n\nlet current_ad_number = null\n\nfunction expand_page_contents() {\n    const page_contents = document.querySelector('div.page-contents'); \n    if (page_contents === null) {\n        return;\n    }\n    page_contents.classList.add('no-carousel');\n}\n\nfunction no_more_ads() {\n    const carousel = document.querySelector('.carousel');\n    if (carousel !== null) {\n        carousel.remove();\n    }\n    expand_page_contents();\n}\n\nfunction loadAd() {\n    const params = new URLSearchParams();\n    if (current_ad_number !== null) {\n        params.append('n', \"\"+current_ad_number);\n    }\n    fetch('/next-ad.json?' + params).then((res) => {\n        return res.json()\n    }).then((res) => {\n        current_ad_number = res.current_ad_number\n        const ad = res.ad\n        const must_continue = res.continue\n        const carousel = document.querySelector('.carousel');\n        if (must_continue === 0\n                || carousel === null\n                || carousel.offsetWidth === 0) {\n            no_more_ads();\n            return;\n        }\n        carousel.innerHTML = \"\"\n        const a = document.createElement('a')\n        const image = document.createElement('img')\n        const text_container = document.createElement('div')\n        const text = document.createElement('h4')\n        const promoted = document.createElement('p')\n\n        promoted.classList.add('promoted-tag')\n        promoted.innerText = \"Promocionado\"\n        image.src = ad.img\n        text.innerText = ad.text\n        a.href = ad.href\n\n        a.append(image)\n        text_container.append(promoted)\n        text_container.append(text)\n        a.append(text_container)\n        carousel.append(a);\n\n        window.setTimeout(() => {\n            loadAd()\n        }, ad.seconds * 1000)\n    })\n}\n\n\n//# sourceURL=webpack://BurguillosInfo/./js-src/index.js?");
 
 /***/ }),
 

templates/ads/_carousel.html.ep

@@ -0,0 +1,3 @@
+<div class="carousel">
+    Cargando anuncios...
+</div>