🔥 Add main page

pages/1172e9111a5fb396bcb8a05870b5eabf8abf221c.js

@@ -0,0 +1,88 @@
+// re-implement toggle blocks
+const showToggle = (content, arrow) => {
+  arrow.style.transform = "rotateZ(180deg)";
+  content.style.display = "block";
+};
+
+const hideToggle = (content, arrow) => {
+  arrow.style.transform = "rotateZ(90deg)";
+  content.style.display = "none";
+};
+
+const toggleButtons = document.getElementsByClassName("loconotion-toggle-button");
+for (let i = 0; i < toggleButtons.length; i++) {
+  const toggleButton = toggleButtons.item(i);
+  const toggleId = toggleButton.getAttribute("loconotion-toggle-id");
+  const toggleContent = document.querySelector(`.loconotion-toggle-content[loconotion-toggle-id='${toggleId}']`);
+  const toggleArrow = toggleButton.querySelector("svg");
+  if (toggleButton && toggleContent) {
+    hideToggle(toggleContent, toggleArrow);
+    toggleButton.addEventListener("click", () => {
+      if (toggleContent.style.display == "none") {
+        showToggle(toggleContent, toggleArrow);
+      } else {
+        hideToggle(toggleContent, toggleArrow);
+      }
+    });
+  }
+}
+
+// sets all iframes' parent container opacity to 1
+// originally notion has a callback to do that on iframe loaded
+const pendingIframes = document.getElementsByTagName("iframe");
+for (let i = 0; i < pendingIframes.length; i++) {
+  pendingIframes.item(i).parentElement.style.opacity = 1;
+}
+
+// const pendingIframes = document.getElementsByClassName("loconotion-iframe-target");
+// for (let i = 0; i < pendingIframes.length; i++) {
+//   const pendingIframe = pendingIframes.item(i);
+//   const iframeSrc = pendingIframe.getAttribute("loconotion-iframe-src");
+//   const iframe = document.createElement("iframe");
+
+//   pendingIframe.style.opacity = 0;
+//   iframe.onload = () => {
+//     pendingIframe.style.opacity = 1;
+//   };
+
+//   iframe.style.width = "100%";
+//   iframe.style.height = "100%";
+//   iframe.style.position = "absolute";
+//   iframe.style.left = 0;
+//   iframe.style.top = 0;
+//   iframe.style.pointerEvents = "auto";
+
+//   iframe.setAttribute("src", iframeSrc);
+//   iframe.setAttribute("frameborder", "0");
+//   iframe.setAttribute(
+//     "sandbox",
+//     "allow-scripts allow-popups allow-top-navigation-by-user-activation allow-forms allow-same-origin"
+//   );
+
+//   pendingIframe.appendChild(iframe);
+// }
+
+// hide search box on inline databases
+// couldn't find a reliable way to do this in css
+const collectionSearchBoxes = document.getElementsByClassName("collectionSearch");
+for (let i = 0; i < collectionSearchBoxes.length; i++) {
+  const collectionSearchBox = collectionSearchBoxes.item(i).parentElement;
+  collectionSearchBox.style.display = "none";
+}
+
+// re-implement anchor links
+const anchorLinks = document.querySelectorAll("a.loconotion-anchor-link");
+for (let i = 0; i < anchorLinks.length; i++) {
+  const anchorLink = anchorLinks.item(i);
+  const id = anchorLink.getAttribute("href").replace("#", "");
+  const targetBlockId =
+    id.slice(0, 8) + "-" + id.slice(8, 12) + "-" + id.slice(12, 16) + "-" + id.slice(16, 20) + "-" + id.slice(20);
+  anchorLink.addEventListener("click", (e) => {
+    e.preventDefault();
+    console.log(targetBlockId);
+    document.querySelector(`div[data-block-id='${targetBlockId}']`).scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+    });
+  });
+}

pages/4c758603f1604611142662f0ddecadcb583394b5.css

@@ -0,0 +1,81 @@
+html,
+body,
+#notion-app {
+	height: auto !important;
+	overflow: auto !important;
+	font-size: 14px !important;
+	-webkit-print-color-adjust: exact;
+	padding: 0 !important;
+	margin: 0 !important;
+}
+
+.notion-help-button,
+.notion-print-ignore,
+.notion-overlay-container,
+.notion-sidebar-container,
+.notion-presence-container,
+.notion-topbar,
+.notion-topbar-export-popup,
+.notion-selectable-halo,
+.notion-help-button,
+.notion-page-controls {
+	display: none !important;
+}
+
+.notion-frame {
+	width: 100% !important;
+	height: auto !important;
+	border: none !important;
+	padding: 0 !important;
+	margin: 0 !important;
+	-webkit-print-color-adjust: exact;
+}
+
+.notion-scroller {
+	height: auto !important;
+	width: 100% !important;
+	max-height: none !important;
+	max-width: none !important;
+	overflow: visible !important;
+	padding: 0 !important;
+	margin: 0 !important;
+
+	/* Remove the extra padding when the screen is wide. */
+	display: block !important;
+}
+
+html {
+	height: auto !important;
+	overflow: auto !important;
+	font-size: 14px !important;
+}
+
+.notion-invoice {
+	height: auto !important;
+}
+
+.notion-code-block > div {
+	white-space: normal !important;
+}
+
+.notion-selectable {
+	page-break-inside: avoid;
+	-webkit-region-break-inside: avoid;
+	position: relative;
+	overflow: initial;
+	min-height: 0;
+	max-width: none !important;
+}
+
+.notion-page-content {
+	display: block !important;
+	width: 100% !important;
+	position: relative;
+	overflow: initial;
+	min-height: 0;
+}
+
+@page {
+	size: auto;
+	margin: 20mm 0 20mm 0;
+}