ajuste das imagens

ifpb · Sep 5, 2023 · 104888d · 104888d
1 parent 2319057
commit 104888d
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 71 deletions.
diff --git a/src/components/Iframe.tsx b/src/components/Iframe.tsx
@@ -15,6 +15,69 @@ export default function Iframe({ src, srcDoc, height }: Props) {
 
   const $isDark = useStore(isDark);
 
+  iFrameRef?.current?.contentWindow?.document.head.insertAdjacentHTML(
+    'beforeend',
+    `<style>
+      :root {
+        --color-primary: #000;
+      }
+
+      :root.dark {
+        --color-primary: #fff;
+      }
+
+      body {
+        color: var(--color-primary);
+      }
+
+      a {
+        color: var(--color-primary);
+      }
+
+      * {
+        border-color: var(--color-primary);
+      }
+
+      /* * {
+         border-color: var(--color-primary) !important;
+       } */
+
+       ::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+      }
+
+      ::-webkit-scrollbar-button:start:decrement,
+      ::-webkit-scrollbar-button:end:increment {
+        display: none;
+      }
+
+      *::-webkit-scrollbar-track-piece {
+        @apply bg-transparent;
+        -webkit-border-radius: 6px;
+      }
+
+      *::-webkit-scrollbar-thumb:vertical {
+        @apply bg-gray-400;
+        -webkit-border-radius: 6px;
+      }
+
+      * {
+        scrollbar-color: #9ca3af transparent;
+      }
+    </style>`
+  );
+
+  if ($isDark) {
+    iFrameRef?.current?.contentWindow?.document.documentElement.classList.add(
+      'dark'
+    );
+  } else {
+    iFrameRef?.current?.contentWindow?.document.documentElement.classList.remove(
+      'dark'
+    );
+  }
+
   const handleResize = useCallback(
     (iframe: React.RefObject<HTMLIFrameElement>) => {
       const { body, documentElement } =
@@ -34,64 +97,7 @@ export default function Iframe({ src, srcDoc, height }: Props) {
     []
   );
 
-  useEffect(() => {
-    handleResize(iFrameRef);
-
-    iFrameRef?.current?.contentWindow?.document.head.insertAdjacentHTML(
-      'beforeend',
-      `<style>
-        :root {
-          --color-primary: #000;
-        }
-
-        :root.dark {
-          --color-primary: #fff;
-        }
-
-        body {
-          color: var(--color-primary);
-        }
-
-        a {
-          color: var(--color-primary);
-        }
-
-        * {
-          border-color: var(--color-primary);
-        }
-
-        /* * {
-           border-color: var(--color-primary) !important;
-         } */
-
-         ::-webkit-scrollbar {
-          width: 10px;
-          height: 10px;
-        }
-
-        ::-webkit-scrollbar-button:start:decrement,
-        ::-webkit-scrollbar-button:end:increment {
-          display: none;
-        }
-
-        *::-webkit-scrollbar-track-piece {
-          @apply bg-transparent;
-          -webkit-border-radius: 6px;
-        }
-
-        *::-webkit-scrollbar-thumb:vertical {
-          @apply bg-gray-400;
-          -webkit-border-radius: 6px;
-        }
-
-        * {
-          scrollbar-color: #9ca3af transparent;
-        }
-      </style>`
-    );
-  }, [handleResize, iFrameRef]);
-
-  useEffect(() => {
+  const handleDarkMode = () => {
     if ($isDark) {
       iFrameRef?.current?.contentWindow?.document.documentElement.classList.add(
         'dark'
@@ -101,6 +107,14 @@ export default function Iframe({ src, srcDoc, height }: Props) {
         'dark'
       );
     }
+  };
+
+  useEffect(() => {
+    handleResize(iFrameRef);
+  }, [handleResize, iFrameRef]);
+
+  useEffect(() => {
+    handleDarkMode();
   }, [$isDark]);
 
   return (

diff --git a/src/content/classnotes/ecma/expression-and-operator/index.mdx b/src/content/classnotes/ecma/expression-and-operator/index.mdx
@@ -6,7 +6,7 @@ title: Expressões e operadores
 
 ## Expressões
 
-![](/imgs/ecma/expression-and-operator/celsius2fahrenheit.svg)
+![](/ls/imgs/ecma/expression-and-operator/celsius2fahrenheit.svg)
 
 Option 1:
 
@@ -16,7 +16,7 @@ const celsius = fahrenheit - 32 / 1.8;
 console.log(celsius); //=> 32.2
 ```
 
-![](/imgs/ecma/expression-and-operator/celsius2fahrenheit1.svg)
+![](/ls/imgs/ecma/expression-and-operator/celsius2fahrenheit1.svg)
 
 Option 2 (grouping operator):
 
@@ -26,7 +26,7 @@ const celsius = (fahrenheit - 32) / 1.8;
 console.log(celsisu); //=> 10
 ```
 
-![](/imgs/ecma/expression-and-operator/celsius2fahrenheit2.svg)
+![](/ls/imgs/ecma/expression-and-operator/celsius2fahrenheit2.svg)
 
 References:
 

diff --git a/src/content/classnotes/ecma/function/index.mdx b/src/content/classnotes/ecma/function/index.mdx
@@ -96,3 +96,17 @@ console.log(addition(1)); //=> 1 ([1])
 console.log(addition(1, 1)); //=> 2 ([1, 1])
 console.log(addition(1, 1, 1, 1)); //=> 4 ([1, 1, 1, 1])
 ```
+
+## Callback
+
+```js
+function calc(param1, param2, callback) {
+  return callback(param1, param2);
+}
+
+console.log(calc(2, 1, (x, y) => x + y)); //=> 3
+console.log(calc(2, 1, (x, y) => x - y)); //=> 1
+console.log(calc(2, 1, (x, y) => x * y)); //=> 2
+console.log(calc(2, 1, (x, y) => x / y)); //=> 2
+console.log(calc(2, 1, (x, y) => x ** y)); //=> 2
+```
diff --git a/src/content/classnotes/ecma/object/index.mdx b/src/content/classnotes/ecma/object/index.mdx
@@ -79,7 +79,7 @@ const students = {
 
 ## Acesso e Alteração
 
-![](/imgs/ecma/object/object-ip.png)
+![](/ls/imgs/ecma/object/object-ip.png)
 
 ```js
 const ip = { address: '192.168.0.2', mask: '255.255.255.0' };

diff --git a/src/content/classnotes/ecma/regexp/index.mdx b/src/content/classnotes/ecma/regexp/index.mdx
@@ -23,7 +23,7 @@ title: Expressão Regular
 
 > /[01]{8}/
 
-![](/imgs/ecma/regexp/byte.png)
+![](/ls/imgs/ecma/regexp/byte.png)
 
 ```txt
 01010101
@@ -42,7 +42,7 @@ console.log(pattern.test('11110002')); //=> false
 
 > /^(\d{11}\|\d{3}\.\d{3}\.\d{3}-\d{2})$/
 
-![](/imgs/ecma/regexp/cpf.png)
+![](/ls/imgs/ecma/regexp/cpf.png)
 
 ```txt
 11122233344
@@ -67,7 +67,7 @@ console.log(pattern.test('11122233344X')); //=> false
 
 > /^(\d{8}\|\d{2}\\.?\d{3}-\d{3})\$/
 
-![](/imgs/ecma/regexp/cep.png)
+![](/ls/imgs/ecma/regexp/cep.png)
 
 ```txt
 01001000

diff --git a/src/content/classnotes/w3c/browser-objects/index.mdx b/src/content/classnotes/w3c/browser-objects/index.mdx
@@ -44,7 +44,7 @@ import CodePreview from '../../../../components/CodePreview.astro';
 
 ### Window Hierarchy
 
-![](/imgs/w3c/browser-objects/dom-hierarchy.svg)
+![](/ls/imgs/w3c/browser-objects/dom-hierarchy.svg)
 
 ### Window.innerWidth
 
@@ -205,7 +205,7 @@ const fruits = ["apples", "oranges", "bananas"];
 console.table(fruits);
 ```
 
-![](/imgs/w3c/browser-objects/console-table-fruits.png)
+![](/ls/imgs/w3c/browser-objects/console-table-fruits.png)
 
 [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Console/table)
 

diff --git a/src/content/classnotes/w3c/dom-api/index.mdx b/src/content/classnotes/w3c/dom-api/index.mdx
@@ -6,7 +6,7 @@ title: Manipulação do DOM
 
 ## Árvore DOM
 
-![](/imgs/w3c/dom-api/dom-tree.png)
+![](/ls/imgs/w3c/dom-api/dom-tree.png)
 
 Fonte: [Google Developers - Constructing the Object Model](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model)
 

diff --git a/src/content/classnotes/w3c/dynamic-elements/index.mdx b/src/content/classnotes/w3c/dynamic-elements/index.mdx
@@ -60,7 +60,7 @@ body.appendChild(h1);
 ## InvestApp
 
 <div class="border-2 mb-6">
-![](/imgs/w3c/dynamic-elements/invest-app.png)
+![](/ls/imgs/w3c/dynamic-elements/invest-app.png)
 </div>
 
 {/* [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/ifpb/ls) */}

diff --git a/src/content/classnotes/w3c/event-handling/index.mdx b/src/content/classnotes/w3c/event-handling/index.mdx
@@ -10,7 +10,7 @@ title: Manipulação de Eventos
 
 ### Hierarchy
 
-![](/imgs/w3c/event-handling/global-event-handlers-hierarchy.svg)
+![](/ls/imgs/w3c/event-handling/global-event-handlers-hierarchy.svg)
 
 ### Registering on-event handlers
 
@@ -68,7 +68,7 @@ button.onclick = function () {
 
 [MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget)
 
-![](/imgs/w3c/event-handling/event-target-hierarchy.svg)
+![](/ls/imgs/w3c/event-handling/event-target-hierarchy.svg)
 
 ### EventTarget.addEventListener()