feat: inital setup blog post page

BRonen · Jan 21, 2023 · fcf9dc8 · fcf9dc8
1 parent d565636
commit fcf9dc8
Show file tree

Hide file tree

Showing 15 changed files with 291 additions and 68 deletions.
diff --git a/public/banner.png b/public/banner.png
diff --git a/public/header-wave.svg b/public/header-wave.svg
diff --git a/public/logo-he4rt-blog.svg b/public/logo-he4rt-blog.svg
diff --git a/public/logo-he4rt.svg b/public/logo-he4rt.svg
diff --git a/public/search-icon.svg b/public/search-icon.svg
diff --git a/public/sun.svg b/public/sun.svg
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -0,0 +1,10 @@
+<style>
+  footer {
+      display: flex;
+      gap: 0.5rem;
+      margin-top: 2rem;
+  }
+</style>
+
+<footer>
+</footer>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -0,0 +1,47 @@
+---
+import "../../styles/global.css";
+---
+
+<div class="header-background">
+  <img src="/logo-he4rt.svg" alt="Logo da Heart" />
+  <img src="/logo-he4rt-blog.svg" alt="Logo da HeartBlog" />
+  <img src="/search-icon.svg" alt="Icone de pesquisa" />
+  <input
+    id="dark-mode"
+    class="dark-mode-checkbox visually-hidden"
+    type="checkbox"
+  />
+</div>
+
+<style>
+  .header-background {
+    background-image: url("/header-wave.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    width: 100%;
+    height: 350px;
+
+    position: absolute;
+    top: 0;
+  }
+
+  .header-background img {
+  }
+</style>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const checkbox = document.querySelector(
+      ".dark-mode-checkbox"
+    ) as HTMLInputElement;
+
+    checkbox.checked = localStorage.getItem("darkMode") === "true";
+
+    checkbox.addEventListener("change", (event: Event) => {
+      const target = event.currentTarget as HTMLInputElement;
+      localStorage.setItem("darkMode", target.checked.toString());
+    });
+  });
+</script>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,35 +1,37 @@
 ---
-export interface Props {
-	title: string;
-}
+import Footer from "../components/Footer.astro";
+import Header from "../components/Header.astro";
+import "../../styles/global.css"
 
-const { title } = Astro.props;
+const { pageTitle } = Astro.props;
 ---
 
-<!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
-	</head>
-	<body>
-		<slot />
-	</body>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{pageTitle}</title>
+  </head>
+  <body>
+    <Header />
+		<div class="container">
+      <slot />
+      <Footer />
+    </div>
+  </body>
 </html>
-<style is:global>
-	:root {
-		--accent: 124, 58, 237;
-		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
-	}
-	html {
-		font-family: system-ui, sans-serif;
-		background-color: #F6F6F6;
-	}
-	code {
-		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-			Bitstream Vera Sans Mono, Courier New, monospace;
+
+<style>
+	.post-banner {
+		width: 100%;
+		height: 300px;
+		object-fit: cover;
 	}
+  .container {
+    max-width: 800px;
+    margin: 300px auto;
+    padding: 0 1rem;
+  }
 </style>
diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro
@@ -0,0 +1,40 @@
+---
+import Layout from "./Layout.astro";
+const { frontmatter } = Astro.props;
+---
+
+<Layout pageTitle={frontmatter.title}>
+  <div class="banner-post">
+    <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
+  </div>
+  <div class="container-post">
+    <slot />
+  </div>
+</Layout>
+
+<style>
+  p {
+    color: black;
+  }
+</style>
+
+<style>
+  .container-post {
+    display: block;
+  }
+  .banner-post {
+    position: absolute;
+    width: 100vw;
+    height: 600px;
+    background-color: #000;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    display: block;
+  }
+
+  img {
+    object-fit: contain;
+    z-index: -1;
+  }
+</style>
diff --git a/src/pages/article/desconstruindo-o-useffect-usando-javascript.mdx b/src/pages/article/desconstruindo-o-useffect-usando-javascript.mdx
@@ -0,0 +1,41 @@
+---
+layout: "../../layouts/PostLayout.astro"
+title: Desconstruindo o useEffect usando Javascript
+author: Rickmff
+date: 20 jan
+tags: ["#React", "#!He4rt4Noobs", "#Hooks"]
+image:
+  url: "https://media.discordapp.net/attachments/1065993634182348850/1066135788934410330/leEdBc.png"
+  alt: "Banner Desconstruindo o useEffect usando Javascript"
+stars: "2.8k"
+fork: "122"
+watching: "198"
+
+---
+
+# Desconstruindo o useEffect usando Javascript
+
+Se você quiser simular o comportamento do useEffect apenas com JavaScript puro, pode usar uma função de efeito que é chamada imediatamente após o carregamento inicial da página e, em seguida, usar addEventListener para chamá-la novamente quando as dependências são alteradas.
+
+```JavaScript
+
+    let myProp = 'initial value';
+
+    function myEffect() {
+      // side effect logic
+    }
+
+    myEffect();
+
+    document.addEventListener('myPropChanged', (event) => {
+      myProp = event.detail;
+      myEffect();
+    });
+
+    document.dispatchEvent(new CustomEvent('myPropChanged', { detail: 'new value' }));
+
+```
+
+Neste exemplo, a função myEffect é chamada imediatamente após o carregamento inicial da página. Em seguida, um evento personalizado 'myPropChanged' é adicionado ao document, e quando este evento é disparado, o valor de myProp é atualizado e a função myEffect é chamada novamente.
+
+É importante notar que este exemplo é apenas uma simulação rudimentar do useEffect e não inclui as funcionalidades avançadas, como o gerenciamento de limpeza e o gerenciamento de erros, que são fornecidos pelo React.
diff --git a/src/pages/article/sample-post.mdx b/src/pages/article/sample-post.mdx
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,38 +6,6 @@ const posts = await Astro.glob('./article/*.mdx');
 ---
 
 <Layout title="Welcome to Astro.">
-	<main>
-		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
-
-		{posts.map(post => <p>{post.frontmatter.title}</p>)}
-
-		<p class="instructions">
-			To get started, open the directory <code>src/pages</code> in your project.<br />
-			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
-		</p>
-		<ul role="list" class="link-card-grid">
-			<Card
-				href="https://docs.astro.build/"
-				title="Documentation"
-				body="Learn how Astro works and explore the official API docs."
-			/>
-			<Card
-				href="https://astro.build/integrations/"
-				title="Integrations"
-				body="Supercharge your project with new frameworks and libraries."
-			/>
-			<Card
-				href="https://astro.build/themes/"
-				title="Themes"
-				body="Explore a galaxy of community-built starter themes."
-			/>
-			<Card
-				href="https://astro.build/chat/"
-				title="Community"
-				body="Come say hi to our amazing Discord community. ❤️"
-			/>
-		</ul>
-	</main>
 </Layout>
 
 <style>

diff --git a/styles/global.css b/styles/global.css
@@ -0,0 +1,97 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600&display=swap');
+
+
+:root {
+  /* Light theme */
+  --c-light-text: #333;
+  --c-light-background: #fff;
+  --c-light-focus: deepskyblue;
+  --c-light-interactive: mediumvioletred;
+
+  /* Dark theme */
+  --c-dark-text: #fff;
+  --c-dark-background: #333;
+  --c-dark-focus: deeppink;
+  --c-dark-interactive: palegreen;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
+body {
+  margin: 0;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 1.25em;
+  line-height: 1.5;
+}
+
+a {
+  color: var(--c-interactive);
+}
+
+h1 {
+  margin-top: 0;
+}
+
+.theme-container {
+  /* Make the light theme the default */
+  --c-text: var(--c-light-text);
+  --c-background: var(--c-light-background);
+  --c-focus: var(--c-light-focus);
+  --c-interactive: var(--c-light-interactive);
+
+  padding: 1.5rem;
+  color: var(--c-text);
+  background-color: var(--c-background);
+}
+
+.dark-mode-checkbox:checked ~ .theme-container {
+  /* Override the default theme */
+  --c-text: var(--c-dark-text);
+  --c-background: var(--c-dark-background);
+  --c-focus: var(--c-dark-focus);
+  --c-interactive: var(--c-dark-interactive);
+}
+
+.dark-mode-label {
+  margin-bottom: 1em;
+}
+
+:focus,
+.dark-mode-checkbox:focus ~ .theme-container .dark-mode-label {
+  outline: 2px solid var(--c-focus);
+}
+
+.dark-mode-label::before {
+  content: "\2610";
+}
+
+.dark-mode-checkbox:checked ~ .theme-container .dark-mode-label::before {
+  content: "\2611";
+}
+
+.visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  white-space: nowrap; /* 1. */
+}
+
+.grow {
+  flex-grow: 1; /* 1. */
+}
+
+.wrapper {
+  max-width: 600px;
+}