feat: add carbonads snippet

prevwong · Mar 16, 2022 · d8ad5cf · d8ad5cf
1 parent e511077
commit d8ad5cf
Show file tree

Hide file tree

Showing 5 changed files with 687 additions and 0 deletions.
diff --git a/examples/landing/components/editor/Viewport/Sidebar/index.tsx b/examples/landing/components/editor/Viewport/Sidebar/index.tsx
@@ -16,6 +16,86 @@ export const SidebarDiv = styled.div<{ enabled: boolean }>`
   margin-right: ${(props) => (props.enabled ? 0 : -280)}px;
 `;
 
+const CarbonAdsContainer = styled.div`
+  width: 100%;
+  margin-top: auto;
+
+  #carbonads * {
+    margin: initial;
+    padding: initial;
+  }
+
+  #carbonads {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
+      sans-serif;
+
+    padding: 10px 0.5rem;
+    border-top: 1px solid rgb(229 231 235);
+  }
+
+  #carbonads {
+    display: flex;
+    width: 100%;
+    background-color: transparent;
+    z-index: 100;
+  }
+
+  #carbonads a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  #carbonads a:hover {
+    color: inherit;
+  }
+
+  #carbonads span {
+    position: relative;
+    display: block;
+    overflow: hidden;
+  }
+
+  #carbonads .carbon-wrap {
+    display: flex;
+  }
+
+  #carbonads .carbon-img {
+    display: block;
+    margin: 0;
+    line-height: 1;
+  }
+
+  #carbonads .carbon-img img {
+    display: block;
+  }
+
+  #carbonads .carbon-text {
+    font-size: 11px;
+    padding: 10px;
+    margin-bottom: 16px;
+    line-height: 1.5;
+    text-align: left;
+    color: #333333;
+    font-weight: 400;
+  }
+
+  #carbonads .carbon-poweredby {
+    display: block;
+    padding: 6px 8px;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+    font-size: 8px;
+    line-height: 1;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    color: #8f8f8f;
+  }
+`;
+
 export const Sidebar = () => {
   const [layersVisible, setLayerVisible] = useState(true);
   const [toolbarVisible, setToolbarVisible] = useState(true);
@@ -46,6 +126,14 @@ export const Sidebar = () => {
             <Layers expandRootOnLoad={true} />
           </div>
         </SidebarItem>
+        <CarbonAdsContainer>
+          <script
+            async
+            type="text/javascript"
+            src="//cdn.carbonads.com/carbon.js?serve=CEAI453N&placement=craftjsorg"
+            id="_carbonads_js"
+          ></script>
+        </CarbonAdsContainer>
       </div>
     </SidebarDiv>
   );

diff --git a/examples/landing/styles/app.css b/examples/landing/styles/app.css
@@ -25,3 +25,17 @@ body {
 .transition {
   transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
 }
+
+#carbonads * {
+  margin: initial;
+  padding: initial;
+}
+
+#carbonads {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+
+  padding: 10px 0.5rem;
+  border-top: 1px solid rgb(0 0 0 / 6%);
+}
diff --git a/site/src/css/custom.css b/site/src/css/custom.css
@@ -323,6 +323,10 @@ html[data-theme='dark'] .api-description {
   outline: none;
 }
 
+.footer {
+  z-index: 98;
+}
+
 .footer .footer__links {
   margin-bottom: 1.5rem;
   padding-bottom: 1.5rem;
@@ -450,3 +454,98 @@ html[data-theme='dark'] .api-description {
   top: 0;
   margin-top: 0;
 }
+
+#carbonads-container {
+  padding: var(--ifm-menu-link-padding-vertical)
+    calc(var(--ifm-menu-link-padding-horizontal))
+    var(--ifm-menu-link-padding-vertical)
+    var(--ifm-menu-link-padding-horizontal);
+  border-top: 1px solid var(--ifm-toc-border-color);
+  border-right: 1px solid var(--ifm-toc-border-color);
+}
+
+@media screen and (max-width: 996px) {
+  #carbonads-container {
+    position: fixed;
+    margin-top: 20px;
+    width: 300px;
+    bottom: 5px;
+    z-index: 9;
+    left: 19px;
+    border-radius: 3px;
+    background: #fff;
+    box-shadow: 0px 3px 28px 0px rgb(1 1 1 / 11%);
+    border: none;
+  }
+}
+
+#carbonads * {
+  margin: initial;
+  padding: initial;
+}
+#carbonads {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+}
+
+#carbonads {
+  display: flex;
+  max-width: 330px;
+  background-color: transparent;
+  z-index: 100;
+}
+
+#carbonads a {
+  color: inherit;
+  text-decoration: none;
+}
+
+#carbonads a:hover {
+  color: inherit;
+}
+
+#carbonads span {
+  position: relative;
+  display: block;
+  overflow: hidden;
+}
+
+#carbonads .carbon-wrap {
+  display: flex;
+}
+
+#carbonads .carbon-img {
+  display: block;
+  margin: 0;
+  line-height: 1;
+}
+
+#carbonads .carbon-img img {
+  display: block;
+}
+
+#carbonads .carbon-text {
+  font-size: 11px;
+  padding: 10px;
+  margin-bottom: 16px;
+  line-height: 1.5;
+  text-align: left;
+  color: #333333;
+  font-weight: 400;
+}
+
+#carbonads .carbon-poweredby {
+  display: block;
+  padding: 6px 8px;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 1;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  color: #8f8f8f;
+}