add codefund

Author: Kent C. Dodds

website/siteConfig.js

@@ -135,6 +135,7 @@ const siteConfig = {
  'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
  '/js/code-block-buttons.js',
  '/js/sidenav.js',
+ '/js/codefund.js',
  ],
 
  stylesheets: [

website/static/css/custom.css

@@ -83,7 +83,7 @@ a {
 
 .tabs .nav-tabs > div.active {
  border-bottom: none;
- background: #F0F0F0; /* same as code block */
+ background: #f0f0f0; /* same as code block */
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
 }
@@ -93,7 +93,7 @@ a {
 }
 
 details > summary {
- cursor: pointer; 
+ cursor: pointer;
 }
 
 /* Responsive */
@@ -123,3 +123,52 @@ details > summary {
 
 @media only screen and (min-width: 1500px) {
 }
+
+/* codefund ads */
+#codefund-container {
+ background-color: rgba(255, 255, 255, 0.9);
+ overflow: hidden;
+ padding-bottom: 15px;
+ height: 155px;
+ font-size: 12px;
+ z-index: 1;
+}
+
+#codefund-container #codefund {
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+/* mobile */
+@media (max-width: 624px) {
+ #codefund-container #cf {
+ width: auto !important;
+ }
+ #codefund-container .cf-img-wrapper {
+ float: left;
+ margin-right: 10px;
+ }
+}
+
+/* tablet */
+@media (min-width: 625px) {
+ #codefund-container {
+ float: right;
+ width: 165px;
+ padding-left: 25px;
+ height: auto;
+ }
+}
+
+/* desktop */
+@media (min-width: 1024px) {
+ #codefund-container {
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ padding: 20px;
+ height: auto;
+ }
+}

website/static/js/codefund.js

@@ -0,0 +1,26 @@
+// add the codefund div
+// funds generated from codefund ad revenue are sent directly to the
+// Testing Library open collective which are used to help support the project.
+document.addEventListener('DOMContentLoaded', () => {
+ const post = document.querySelector('.mainContainer .wrapper .post')
+ if (!post) {
+ // we only put the ad on pages that have a "post"
+ return
+ }
+ const codefundDiv = document.createElement('div')
+ codefundDiv.id = 'codefund-container'
+ codefundDiv.innerHTML = `
+ <div id="codefund">
+ <div>
+ Testing Library loads relevant ethical ads via <a href="https://codefund.io" rel="noopener noreferrer">CodeFund.io</a>.
+ The funds are contributed to <a href="https://opencollective.com/testing-library" rel="noopener noreferrer">our Open Collective</a>.
+ Please disable your ad blocker for testing-library.com
+ </div>
+ </div>
+ `
+ post.prepend(codefundDiv)
+
+ const scriptEl = document.createElement('script')
+ scriptEl.src = 'https://codefund.io/properties/389/funder.js'
+ document.body.appendChild(scriptEl)
+})