feat: add buysellads extension

lepture · Aug 21, 2024 · 4ec47b0 · 4ec47b0
1 parent 0023376
commit 4ec47b0
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 16 deletions.
diff --git a/docs/_templates/partials/page-bottom.html b/docs/_templates/partials/page-bottom.html
@@ -0,0 +1 @@
+{% include "extensions/buysellads.html" %}
diff --git a/docs/conf.py b/docs/conf.py
@@ -146,6 +146,9 @@
         "source_type": "github",
         "source_user": "lepture",
         "source_repo": "shibuya",
+        "buysellads_code": "CE7DKK3M",
+        "buysellads_placement": "shibuya",
+        "buysellads_container_selector": ".yue > section > section",
     }
 
 

diff --git a/src/shibuya/theme/shibuya/extensions/buysellads.html b/src/shibuya/theme/shibuya/extensions/buysellads.html
@@ -1,22 +1,40 @@
-<div class="bsa"></div>
+{% if buysellads_container_selector %}
+<script>
+  (function() {
+    const el = document.querySelector('{{ buysellads_container_selector }}');
+    if (el) {
+      const target = document.createElement('div');
+      target.id = 'bsa-custom-container';
+      el.appendChild(target);
+    }
+  })();
+</script>
+{% endif %}
+<div id="bsa-container"></div>
 <script src="//m.servedby-buysellads.com/monetization.custom.js"></script>
 <script>
 (function() {
   if (typeof _bsa !== 'undefined' && _bsa) {
+    let target = '#bsa-container';
+    if (document.querySelector('#bsa-custom-container')) {
+      target = '#bsa-custom-container';
+    }
     _bsa.init('custom', '{{ buysellads_code }}', 'placement:{{ buysellads_placement }}', {
-      target: '.bsa',
-      id: 'bsa-bar',
+      target: target,
       template: `
-<a class="bsa-bar" style="background-color: ##backgroundColor##; color: ##textColor##" href="##link##" rel="sponsored noopener" target="_blank" title="##company## — ##tagline##">
+<div class="bsa">
+<a class="bsa-container bsa__##external_id##" style="background-color: ##backgroundColor##; color: ##textColor##" href="##link##" rel="sponsored noopener" target="_blank" title="##company## — ##tagline##">
   <div class="bsa-main">
     <img class="bsa-img" src="##logo##">
     <div class="bsa-details" style="color: ##textColor##">
-      <span class="bsa-tagline">Sponsored by ##company##</span>
+      <span class="bsa-tagline">##company## — ##tagline##</span>
       <span class="bsa-desc">##description##</span>
     </div>
     <span class="bsa-cta" style="color: ##ctaTextColor##; background-color: ##ctaBackgroundColor##;">##callToAction##</span>
   </div>
 </a>
+<div class="bsa-ad-via"><a title="ad via BuySellAds" href="##ad_via_link##">Ads via BuySellAds</a></div>
+</div>
 `
     });
   }

diff --git a/static/css/components/external.css b/static/css/components/external.css
@@ -109,19 +109,41 @@
 }
 
 /* buysellads */
-.bsa-bar {
+.bsa {
+  margin: 1rem 0;
+}
+
+.bsa a {
+  text-decoration: none;
+  border-bottom: none;
+}
+
+.bsa-container {
   display: flex;
 
   flex-flow: row nowrap;
   align-items: center;
   justify-content: space-between;
 
   padding: 15px 20px;
-  border-radius: 10px;
-  box-shadow: inset 0 0 2px hsla(0, 0%, 0%, 0.15);
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
   text-decoration: none;
 }
 
+.bsa-ad-via {
+  text-align: right;
+}
+
+.bsa-ad-via a {
+  font-weight: 300;
+  font-size: 10px;
+  border: none;
+  background: var(--gray-a3);
+  padding: 3px 10px;
+  border-radius: 2px;
+}
+
 .bsa-main {
   display: flex;
 
@@ -138,6 +160,10 @@
   line-height: 0;
 }
 
+.yue a.bsa-container .bsa-img {
+  margin-top: 0;
+  margin-bottom: 0;
+}
 
 .bsa-details {
   display: flex;

diff --git a/static/css/modules.css b/static/css/modules.css
@@ -1,6 +1,14 @@
 @import "./icons/lucide.css";
 @import "./icons/simpleicons.css";
 
+@import "./contents/yue.css";
+@import "./contents/sphinx.css";
+@import "./contents/admonition.css";
+@import "./contents/quote.css";
+@import "./contents/code.css";
+@import "./contents/table.css";
+@import "./contents/api-doc.css";
+
 @import "./components/hamburger.css";
 @import "./components/search.css";
 @import "./components/container.css";
@@ -20,14 +28,6 @@
 @import "./layout/rside.css";
 @import "./layout/navigation.css";
 
-@import "./contents/yue.css";
-@import "./contents/sphinx.css";
-@import "./contents/admonition.css";
-@import "./contents/quote.css";
-@import "./contents/code.css";
-@import "./contents/table.css";
-@import "./contents/api-doc.css";
-
 @import "./extensions/rtd.css";
 @import "./extensions/copybutton.css";
 @import "./extensions/sphinx-design.css";