merge for hireform

src/components/HireMe/Form.astro

@@ -6,7 +6,12 @@
     <form
         name="contact"
         method="POST"
+        role="form"
         netlify-honeypot="bot-field"
+<<<<<<< HEAD
+=======
+        id="contact"
+>>>>>>> 437d57d9b18d8247ce4e63094b4b13ff17a4a5db
         class="hireform"
         netlify
     >

src/components/Navbar.astro

@@ -211,7 +211,7 @@ a {
     }
 }
 
-@media(max-width: 500px){
+@media(max-width: 450px){
     .nav-menu {
         width: 50%;
     }
@@ -239,7 +239,7 @@ a {
         text-align: center;
         transition: 0.3s;
     }
-    
+
 }
 </style>
 <!--

src/layouts/BlogPost.astro

@@ -51,13 +51,4 @@ const { title, publishDate, writer, href, description, img, alt, permalink } = c
 .bodyContainer {
 	background-color: var(--bg-color);
 }
-
-
-
-@media (min-width: 768px) {
-	.mainContainer {
-		width: 100%;
-		height: 100%;
-	}
-}
 </style>

src/pages/blog/7-component-with-nextjs.mdx

@@ -0,0 +1,67 @@
+---
+layout: ../../layouts/BlogPost.astro
+title: Creating a Component in NextJS
+publishDate: 4/20/2023
+writer: Mark
+description: a step-by-step guide for creating a reusable component within NextJS, including an example of how to define the component as a function that returns a JSX element and export it from a file.
+img: /assets/images/nextjs.jpg
+alt: 
+tags: NextJS, React, Web development, Component, Reusable code, JSX, Exporting, Front-end development, User interface, Code composition
+draft: false
+---
+
+
+NextJS is a popular framework for building React-based web applications. It comes with many features, including server-side rendering, automatic code splitting, and optimized performance. In this article, we will explore how to create a component within NextJS.
+
+# What is a Component in NextJS?
+In NextJS, a component is a reusable piece of code that represents a specific part of a web page. It can be a button, form, navigation menu, or any other element that you want to use across multiple pages. Components can be used to build complex user interfaces by composing them together.
+
+## Creating a Component in NextJS
+
+To create a component in NextJS, you need to follow these steps:
+
+ 1: Create a new file with a .jsx or .tsx extension in the components directory of your NextJS project. For example, if you want to create a button component, you can create a file named Button.jsx or Button.tsx in the components directory.
+
+ 2: Define your component as a function that returns a JSX element. For example, here's how you can define a simple button component:
+
+```jsx
+function Button(props) {
+  return (
+    <button className={props.className} onClick={props.onClick}>
+      {props.label}
+    </button>
+  );
+}
+```
+
+In this example, the Button function takes a props object as its parameter, which contains properties like className, onClick, and label. The function returns a `<button>` element with the `className`, `onClick`, and `label` properties set to the values provided by the props object.
+
+ 3: Export your component from the file. For example, you can export the Button component like this:
+
+```jsx
+export default Button;
+```
+
+ 4: Use your component in your NextJS pages by importing it from the components directory. For example, if you want to use the Button component in a page named HomePage.jsx, you can import it like this:
+```jsx
+import Button from '../components/Button';
+```
+
+You can then use the Button component in your HomePage page like any other JSX element:
+
+```jsx
+function HomePage() {
+  return (
+    <div>
+      <h1>Welcome to my NextJS app!</h1>
+      <Button label="Click me" onClick={() => alert('Button clicked!')} />
+    </div>
+  );
+}
+```
+
+In this example, the HomePage function returns a `<div>` element that contains an `<h1>` element and a `<Button>` element.
+
+## Conclusion
+
+Creating a component in NextJS is a straightforward process. By following the steps outlined in this article, you can easily create reusable components that can be used across multiple pages in your NextJS app. Components help you to build more complex user interfaces by composing simpler elements together.

src/pages/blog/8-ssr-explained.mdx

@@ -0,0 +1,110 @@
+---
+layout: ../../layouts/BlogPost.astro
+title: Creating a Component in NextJS
+publishDate: 4/21/2023
+writer: Mark
+description: The article provides a step-by-step guide for implementing Server-Side Rendering (SSR) with NextJS, a popular framework for building React-based web applications, with codeblock examples.
+img: /assets/images/ssr.jpg
+alt: 
+tags: NextJS, React, server-side rendering, performance optimization, web development, front-end development, Node.js, SEO, routing
+draft: false
+---
+
+# Server-Side Rendering with NextJS
+
+Server-side rendering (SSR) is an important technique for optimizing the performance of web applications. With SSR, web pages are generated on the server and sent to the client as fully-formed HTML documents. This can improve page load times, reduce the amount of work required by the client's browser, and improve search engine optimization (SEO). In this article, we'll explore how to implement SSR using NextJS, a popular framework for building React-based web applications.
+
+## What is Server-Side Rendering?
+
+Traditionally, web pages have been generated entirely on the client side, using JavaScript to manipulate the HTML, CSS, and other assets in the browser. While this approach has some advantages, such as flexibility and interactivity, it can also lead to slow load times and poor SEO, since search engines may have difficulty crawling JavaScript-generated content.
+
+Server-side rendering addresses these issues by generating the HTML document on the server before sending it to the client. This can result in faster load times, better SEO, and improved performance on low-powered devices.
+
+## Implementing Server-Side Rendering with NextJS
+
+NextJS is a powerful framework for building React-based web applications, and it includes built-in support for SSR. Here's how to implement SSR using NextJS:
+
+1: Create a new NextJS project by running `npx create-next-app` in your terminal.
+
+2: Define your application's routes using the `pages` directory. Each file in this directory will correspond to a route in your application. For example, if you create a file named `about.jsx` in the pages directory, it will correspond to the `/about` route.
+
+
+```
+Note that in NextJS 13 the routing will be handled in the app folder instead of the pages folder. You can read the Docs here: <a href="https://nextjs.org/blog">Next.js 13.3 Blog Post<a>
+```
+
+```jsx
+// pages/about.jsx
+
+import React from 'react';
+
+const AboutPage = () => {
+  return <h1>About us</h1>;
+};
+
+export default AboutPage;
+```
+
+3: Define your page components using JSX. These components will define the content of each page in your application. For example, you might create a component named `HomePage` that renders a list of blog posts.
+
+```jsx
+// components/HomePage.jsx
+
+import React from 'react';
+
+const HomePage = ({ posts }) => {
+  return (
+    <div>
+      <h1>Welcome to my blog</h1>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.id}>{post.title}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default HomePage;
+```
+
+4: Add a `getServerSideProps` function to each page component. This function will be called on the server to generate the HTML document for the page. It should return an object containing the page's props. For example, if your `HomePage` component requires a list of blog posts, the `getServerSideProps` function might fetch that data from an API and return it as a prop.
+
+```jsx
+// components/HomePage.jsx
+
+import React from 'react';
+
+export const getServerSideProps = async () => {
+  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
+  const posts = await res.json();
+  return {
+    props: {
+      posts,
+    },
+  };
+};
+
+const HomePage = ({ posts }) => {
+  return (
+    <div>
+      <h1>Welcome to my blog</h1>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.id}>{post.title}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default HomePage;
+```
+
+5: Start your NextJS application using the `npm run dev` command.
+
+With these steps completed, your NextJS application will now use SSR to generate HTML documents for each page, improving performance and SEO.
+
+## Conclusion
+
+Server-side rendering is an important technique for optimizing the performance and SEO of web applications. With NextJS, implementing SSR is straightforward and can be done using built-in features. By following the steps outlined in this article, you can easily implement SSR in your NextJS application and reap the benefits of faster load times and improved search engine visibility.

src/styles/shiki.css

@@ -41,4 +41,14 @@ pre .code-container {
     padding: var(--size-1);
     font-size: var(--size-4);
     background: var(--surface3) !important;
+}
+
+@media (min-width: 768px) {
+    pre{
+        width: 50%;
+    }
+
+    pre .code-container {
+        font-size: var(--size-5);
+    }
 }

src/styles/theme.postcss

@@ -428,9 +428,3 @@ a:hover {
   color: var(--text2);
 }
 
-/* in mobile view force navbar size */
-@media (max-width: 768px) {
-  .navbar {
-    inline-size: 100%;
-  }
-}