From 949f5432a9fc17ccbe2819e011a9ebd710c3d3c1 Mon Sep 17 00:00:00 2001
From: Sivert <sivertgh@stud.ntnu.no>
Date: Sat, 28 Oct 2023 14:16:17 +0200
Subject: [PATCH] Massive styling update

---
 components/ArticleCard.tsx      |  6 ++--
 components/FeaturedCard.tsx     | 18 ++++++-----
 posts/introduction.mdx          |  1 -
 posts/websockets-superpower.mdx | 57 ++++++++++++++++++++++++++++++---
 4 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/components/ArticleCard.tsx b/components/ArticleCard.tsx
index 19b0e0e..3ed55a4 100644
--- a/components/ArticleCard.tsx
+++ b/components/ArticleCard.tsx
@@ -25,15 +25,15 @@ export default function ArticleCard({
       variants={ArticleCardVariant}
       className={`w-full h-fit border-0 ${className}`}
     >
-      <Link scroll={false} href={post.url}>
+      <Link scroll={false} href={post.url} className="flex flex-col">
         {post.image && (
-          <div className="rounded-2xl border-2 p-1 border-base-300">
+          <div className="rounded-2xl border-2 p-1 border-base-300 h-52 sm:h-72 md:h-52 flex">
             <ImageWithFallback
               quality={100}
               width={640}
               height={640}
               alt={post.imageAlt || 'A placeholder image'}
-              className="object-cover w-full max-h-52 rounded-xl"
+              className="object-cover rounded-xl w-full"
               imageName={post.image}
             />
           </div>
diff --git a/components/FeaturedCard.tsx b/components/FeaturedCard.tsx
index 335b0be..3bbc70c 100644
--- a/components/FeaturedCard.tsx
+++ b/components/FeaturedCard.tsx
@@ -15,7 +15,7 @@ export async function getStaticProps() {
 
 export default function FeaturedCard({
   post,
-  className,
+  className = '',
 }: {
   post: Post;
   className?: string;
@@ -23,15 +23,17 @@ export default function FeaturedCard({
   return (
     <motion.div
       variants={ArticleCardVariant}
-      className={`flex sm:flex-row flex-col w-full sm:gap-10 gap-4 sm:max-h-[420px] ${className}`}
+      className={`md:grid flex flex-col md:grid-cols-[2.13fr_1fr] w-full gap-4 md:gap-12 ${className}`}
     >
       {post.image && (
-        <Link scroll={false} href={post.url} className="sm:w-[786px]">
-          <div className="rounded-2xl border-2 p-1 border-base-300 h-full w-full">
+        <Link scroll={false} href={post.url} className="md:max-h-[420px] sm:max-h-72 max-h-52 flex">
+          <div className="rounded-2xl border-2 p-1 border-base-300 flex">
             <ImageWithFallback
               quality={100}
+              width={1200}
+              heigth={512}
               alt={post.imageAlt || 'A placeholder image'}
-              className="object-cover w-full h-full rounded-xl"
+              className="object-cover rounded-xl"
               imageName={post.image}
             />
           </div>
@@ -40,10 +42,10 @@ export default function FeaturedCard({
       <Link
         scroll={false}
         href={post.url}
-        className="flex flex-col gap-1 h-fit"
+        className="flex flex-col gap-1 break-word hyphens-auto"
       >
-        <h1 className="text-5xl font-bold">{post.title}</h1>
-        <p className="line-clamp-2">{post.description}</p>
+        <h1 className="text-3xl sm:text-5xl font-bold">{post.title}</h1>
+        <p className="line-clamp-2  ">{post.description}</p>
         <ReactTimeAgo
           className="text-sm text-primary"
           date={Date.parse(post.date)}
diff --git a/posts/introduction.mdx b/posts/introduction.mdx
index aa10c86..a9f19c3 100644
--- a/posts/introduction.mdx
+++ b/posts/introduction.mdx
@@ -1,6 +1,5 @@
 ---
 title: Who am I?
-short: Introduction
 date: '2023-10-20T23:42:00'
 description: "Introducing: Sivert!"
 published: true
diff --git a/posts/websockets-superpower.mdx b/posts/websockets-superpower.mdx
index 1da9547..f1978f2 100644
--- a/posts/websockets-superpower.mdx
+++ b/posts/websockets-superpower.mdx
@@ -1,13 +1,60 @@
 ---
-title: "WebSockets: Hidden superpower"
-short: WebSockets = amazing
+title: "Secret Superpowers of WebSockets"
 date: '2023-10-27T22:22:00'
-description: "WebSockets are incredible, and in this post I express why you should consider using it for your next project."
-published: false
+description: "WebSockets are incredible, and in this post I express why you should consider using it!"
+published: true
 image: pexels-willian-justen-de-vasconcellos-15641522.jpg
 imageCredits: Willian Justen de Vasconcellos
 imageCreditsLink: https://www.pexels.com/@willianjusten/
 allowComments: true
 tags:
   - networking
----
\ No newline at end of file
+---
+
+WebSockets are a powerful technology for real-time communication in web applications. While they are well-known for enabling chat applications and live updates, there's a secret superpower hidden beneath the surface. In this article, we'll explore the versatility and potential of WebSockets, along with valuable resources to dive deeper into the topic.
+
+## Understanding WebSockets
+
+WebSockets are a protocol that provides full-duplex communication channels over a single TCP connection. Unlike traditional HTTP, which is request-response-based, WebSockets allow bidirectional, low-latency communication between the client and server. This technology can be applied in various ways:
+
+### Real-Time Chat
+
+WebSockets are commonly used to power real-time chat applications. Users can exchange messages instantly without the need for constant polling or frequent requests to the server.
+
+### Live Updates
+
+WebSockets make it possible to push updates to clients when changes occur on the server, resulting in live data synchronization without page refreshes.
+
+### Multiplayer Games
+
+Online multiplayer games heavily rely on WebSockets for real-time player interactions, game state synchronization, and chat functionality.
+
+## The Secret Superpower: Beyond Real-Time
+
+WebSockets are not limited to just real-time applications. Their secret superpower lies in their adaptability for various use cases:
+
+### IoT and Home Automation
+
+WebSockets are ideal for connecting and controlling Internet of Things (IoT) devices, enabling seamless interactions with smart appliances and home automation systems.
+
+### Financial Data Streaming
+
+In the finance sector, WebSockets are used to deliver real-time stock market data, allowing traders to make informed decisions without delays.
+
+### Collaborative Tools
+
+Collaborative tools, such as Google Docs, use WebSockets for real-time document editing and collaboration, offering a seamless user experience.
+
+## Exploring WebSockets Further
+
+To continue your journey into the world of WebSockets, here are some recommended resources:
+
+1. [MDN Web Docs - WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket): MDN provides an excellent guide on WebSockets, covering everything from basics to advanced usage.
+
+2. [WebSocket.org](https://websocket.org/): This official WebSocket website offers in-depth documentation, tutorials, and examples to help you get started.
+
+3. [A Guide to WebSockets by Flavio Copes](https://flaviocopes.com/websockets/): A comprehensive tutorial by Flavio Copes that explains WebSockets from scratch.
+
+4. [WebSocket vs. REST: A Comparative Analysis](https://www.smashingmagazine.com/2018/02/sse-websockets-data-flow-http2/): This Smashing Magazine article explores when to use WebSockets and how they compare to traditional REST APIs.
+
+Now that you've uncovered the secret superpower of WebSockets, you can harness their potential for a wide range of applications beyond real-time communication. Whether you're developing a real-time chat app, streaming financial data, or building IoT solutions, WebSockets are your key to seamless, low-latency communication.