Add footer and AdSense integration

2026-09-18 19:43:16 +00:00 · 2025-07-02 16:21:29 +02:00
parent 78fb118c28
commit e9610bdb10
3 changed files with 48 additions and 5 deletions
@@ -4,6 +4,11 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>XSLT Playground</title>
+    <script
+      async
+      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=%VITE_ADSENSE_CLIENT%"
+      crossorigin="anonymous"
+    ></script>
  </head>
  <body>
    <div id="root"></div>
@@ -58,6 +58,8 @@ function debounce(fn, delay) {
 }

 const goPro = import.meta.env.VITE_GO_PRO === "true";
+const adsenseClient = import.meta.env.VITE_ADSENSE_CLIENT;
+const adsenseSlot = import.meta.env.VITE_ADSENSE_SLOT;

 function defaultTab() {
  return {
@@ -256,6 +258,14 @@ export default function App() {
    URL.revokeObjectURL(url);
  };

+  useEffect(() => {
+    if (adsenseClient && adsenseSlot && window.adsbygoogle) {
+      try {
+        window.adsbygoogle.push({});
+      } catch {}
+    }
+  }, []);
+
  return (
    <div className="app-container">
      <div className="header">
@@ -445,7 +455,30 @@ export default function App() {
          options={{ readOnly: true, minimap: { enabled: false }, automaticLayout: true }}
        />
      </div>
-      <div className="banner">Anuncio</div>
+      <div className="banner">
+        {adsenseClient && adsenseSlot ? (
+          <ins
+            className="adsbygoogle"
+            style={{ display: "block" }}
+            data-ad-client={adsenseClient}
+            data-ad-slot={adsenseSlot}
+            data-ad-format="auto"
+            data-full-width-responsive="true"
+          />
+        ) : (
+          "Anuncio"
+        )}
+      </div>
+      <div className="footer">
+        © 2025 Alexandre Vazquez. All rights reserved.{' '}
+        <a
+          href="https://alexandre-vazquez.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          alexandre-vazquez.com
+        </a>
+      </div>
    </div>
  );
 }
@@ -95,10 +95,15 @@ body,
  text-align: center;
  padding: 0.5rem;
  background: #f0f0f0;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  border-top: 1px solid #ddd;
+}
+
+.footer {
+  text-align: center;
+  padding: 0.5rem;
+  background: #fafafa;
+  border-top: 1px solid #ddd;
+  font-size: 0.85rem;
 }

 .icon-button {