Add first article

src/Article.tsx

@@ -1,6 +1,7 @@
 import { Tooltip } from "@kobalte/core";
 import cn from "classnames";
 import { Component, lazy } from "solid-js";
+import Icon from "~/components/Icon";
 import IconText from "~/components/IconText";
 
 const articlesImportMap = import.meta.glob("./articles/*/*.mdx");
@@ -49,6 +50,38 @@ const Article: Component<Props> = (props) => {
             </figure>
           );
         },
+
+        ul: (props: any) => (
+          <ul {...props} class={cn(props.className, "list-disc pl-8")} />
+        ),
+        li: (props: any) => <li {...props} />,
+
+        Embed: (props: any) => {
+          if (props.url?.includes("://github.com")) {
+            const [s, username, projectName] = props.url.match(
+              new RegExp("github.com/(.+)/(.*)")
+            );
+            return (
+              <a
+                class="mb-8 ml-auto mr-auto mt-8 flex h-40 w-[440px] rounded bg-colors-primary-300 text-colors-text-600a no-underline"
+                target="_blank"
+                href={props.url}>
+                <Icon
+                  icon="github"
+                  class="ml-8 mr-8 h-full w-16 flex-shrink-0"
+                />
+                <div class="flex flex-1 flex-col gap-2 bg-colors-primary-200 pl-4 pr-4 shadow">
+                  <span class="mt-6 text-h2">
+                    <span class="text-colors-text-300a">{username}/</span>
+                    <span class="text-colors-text-900a">{projectName}</span>
+                  </span>
+                  <span>{props.description}</span>
+                </div>
+              </a>
+            );
+          }
+          return null;
+        },
         div: (props: any) => {
           if (props.className?.includes("code-title")) {
             const { className, ...rest } = $destructure(props);

src/AspectBox.tsx

@@ -0,0 +1,23 @@
+import { JSX, Component } from "solid-js";
+import { css } from "@linaria/core";
+import cn from "classnames";
+
+interface Props {
+  children?: JSX.Element;
+  style?: JSX.CSSProperties;
+  class?: string;
+}
+
+const AspectBox: Component<Props> = (props) => {
+  const { children, class: $class, ...rest } = $destructure(props);
+
+  return (
+    <div class={cn(_AspectBox, $class, "relative h-0 pt-[100%]")} {...rest}>
+      <div class="absolute left-0 top-0 h-full w-full">{children}</div>
+    </div>
+  );
+};
+
+const _AspectBox = css``;
+
+export default AspectBox;

src/articles/2024-03-25-starting-a-blog/article.mdx

@@ -1,6 +1,26 @@
 # Staring a blog!
 
-Since everyone and their dog likes to post about cool new tech on their blog, I decided to try it out.
+Since everyone and their dog likes to post about cool new tech on their blog I decided to try it out.
 
 I'll mostly write about frameworks, libraries and how to make lots of moving parts work together.
+For starts I'm planning to do some articles about building static sites like this blog, using
+[Solid.js](https://www.solidjs.com/s) - an amazing framework that will be more popular than React someday (maybe).
 
+
+<Embed
+  url="https://github.com/shiro/blog"
+  name="blog"
+  description="My personal blog website"
+/>
+
+All code is available [gitHub](https://github.com/shiro/blog), feel free to check it out.
+
+Some other topics I intend to cover:
+- Solid Start development progress
+- Rust, wasm and wgpu
+- Keyboard input remapping and macros
+- NixOS guides, tips and tricks
+- System automation and backups
+- Photography on Linux
+
+And lots of other topics that are worth discussing!

src/style/global.style.tsx

@@ -85,7 +85,7 @@ export const globals = css`
     }
 
     p + p {
-      margin-top: 4px;
+      margin-top: 16px;
     }
     p + h1 {
       margin-top: 36px;
@@ -131,7 +131,7 @@ export const globals = css`
 
     p + ul,
     p + ol {
-      margin-top: 16px;
+      margin-top: 4px;
     }
     ul + p,
     ol + p {