First blog post

src/app/_components/post-header.tsx

@@ -8,7 +8,7 @@ export function PostHeader({ post }: { post: Post }) {
   const { title, coverImage, date, author, minRead } = post;
   return (
     <>
-      <h1 className="text-5xl md:text-7xl font-bold tracking-tighter leading-tight md:leading-none mb-6 text-center md:text-left">
+      <h1 className="text-5xl md:text-7xl font-bold tracking-tighter leading-tight mb-6 text-center md:text-left">
         {title}
       </h1>
       <div className="flex gap-5 items-center mb-7 md:mb-12 flex-wrap">

src/content/blog/dynamic-routing.mdx → src/content/blog/grapesjs-and-beyond.mdx

@@ -2,39 +2,44 @@
 title: "GrapesJS and Beyond: Introducing Grapes Studio and Our Plans for the Future"
 excerpt: "As some of you may have heard, I've recently started working full-time on GrapesJS. I wanted to take a moment to share what this journey is all about, the vision behind it, and the long-term commitment."
 coverImage: "/assets/images/grapesjs-og-image.png"
-date: "2024-06-11T01:35:07.322Z"
+date: "2024-06-13T19:00:00Z"
 author:
   name: Artur Arseniev
 ogImage:
   url: "/assets/images/grapesjs-og-image.png"
 ---
-LINK: https://www.linkedin.com/company/grapes-studio
 
 As some of you may have heard, I've recently started working full-time on GrapesJS. I wanted to take a moment to share what this journey is all about, the vision behind it, and the long-term commitment.
 
 # About GrapesJS
 
 Back in 2015, I started a simple application to help me with basic website layouts. At that time, the WYSIWYG web editors I found online were more focused on simple content creation rather than full-page layouts. Eventually, this application evolved into GrapesJS, a framework that allows other developers to create their own builders without reinventing the wheel.
 
-After releasing GrapesJS as an open-source project, it grew unexpectedly fast, gathering thousands of stars on the repository and attracting users from all around the world. Developers leveraged GrapesJS's API to build custom web builders for websites, landing pages, newsletters, documents, and more. Others also used our demos to quickly build webpages or newsletters.
+After releasing [GrapesJS as an open-source project](https://github.com/GrapesJS/grapesjs), it grew unexpectedly fast, gathering thousands of stars on the repository and attracting users from all around the world. Developers leveraged GrapesJS's API to build custom web builders for websites, landing pages, newsletters, documents, and more. Others also used our demos to quickly build webpages or newsletters.
+
+GrapesJS has become more than just a framework; it is a community and a tool that many individuals and companies have made part of their core products and workflows. With the fast changes in web technology, we are inspired to think about the future and how we can keep improving and expanding its capabilities.
 
 At its core, GrapesJS is about empowerment. It's about giving individuals and companies the tools they need to bring their ideas to life, creating something meaningful and beautiful in a reasonable amount of time.
 
 # New Journey
 
 GrapesJS has always been a side project I enjoyed working on in my spare time. Despite the great contributions from the community, it was challenging to evolve and push the project further.
 
-Fortunately, I had the luck to find and join the wonderful people at Open Core Ventures. This partnership will turn many ideas into reality. Grapes Studio Inc. was born as a company with a mission to democratize the web development experience, making it more inclusive and accessible to everyone.
+Fortunately, I had the luck to find and join the wonderful people at [Open Core Ventures](https://opencoreventures.com/). This partnership will turn many ideas into reality. [Grapes Studio Inc.](https://www.linkedin.com/company/grapes-studio) was born as a company with a mission to democratize the web development experience, making it more inclusive and accessible to everyone.
 
 It's natural to be skeptical about mixing open-source with a commercial entity — I was skeptical too. The reality is, most open-source projects, with few exceptions, must find a way to commercialize or risk going stale. The key is to establish the scope and boundaries of these entities. GrapesJS project is fortunate enough to explore various monetization possibilities without compromising its open-source nature.
 
-This means the GrapesJS framework will remain open-source and free of charge, with no changes. Our goal at Grapes Studio is to extend its capabilities, not limit them. We see a great opportunity in investing in GrapesJS Studio, an application built on top of the GrapesJS framework. This can be commercialized as a SaaS for end-users and potentially embedded in external applications with just a few lines of code. Extending and improving the open-source framework benefits everyone.
+This means the GrapesJS framework will remain open-source and free of charge, with no changes. Our goal at Grapes Studio is to extend its capabilities, not limit them. We see a great opportunity in investing in [GrapesJS Studio](https://studio.grapesjs.com/), an application built on top of the GrapesJS framework.
+
+![GrapesJS Studio](/assets/images/blog/grapesjs-studio-alpha.jpeg)
+
+This can be commercialized as a SaaS for end-users and potentially embedded in external applications with just a few lines of code. Extending and improving the open-source framework benefits everyone.
 
 In addition to GrapesJS Studio, we'll explore various ways to support and enhance the open-source community. This might include offering more support, documentation, and training to help companies and individuals make the most of GrapesJS.
 
 # Join Us
 
-I'm excited about the future and the opportunities it will bring. I hope you are too. If you share the same ambitions and are eager to contribute to our mission of empowering and democratizing web development, check out our career page for open positions!
+I'm excited about the future and the opportunities it will bring. I hope you are too. If you share the same ambitions and are eager to contribute to our mission of empowering and democratizing web development, check out our [career page](/careers) for open positions!
 
 
-Thank you to everyone who made this possible and stay tuned for more updates.
+Thank you to everyone who made this possible and [stay tuned](https://x.com/grapesjs) for more updates.

src/lib/utils.ts

@@ -1 +1,12 @@
-export const getPathBlog = (slug?: string) => `/blog${slug ? `/${slug}` : ''}`;
+export const getPathBlog = (slug?: string) => `/blog${slug ? `/${slug}` : ''}`;
+
+export function slugify(str: any) {
+    return String(str)
+        .normalize('NFKD') // split accented characters into their base characters and diacritical marks
+        .replace(/[\u0300-\u036f]/g, '') // remove all the accents, which happen to be all in the \u03xx UNICODE block.
+        .trim() // trim leading or trailing whitespace
+        .toLowerCase() // convert to lowercase
+        .replace(/[^a-z0-9 -]/g, '') // remove non-alphanumeric characters
+        .replace(/\s+/g, '-') // replace spaces with hyphens
+        .replace(/-+/g, '-'); // remove consecutive hyphens
+}

src/mdx-components.tsx

@@ -1,6 +1,8 @@
 import markdownStyles from "@/app/_components/markdown-styles.module.css";
 import type { MDXComponents } from 'mdx/types';
 import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote/rsc';
+import Link from "next/link";
+import { slugify } from "./lib/utils";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
@@ -9,6 +11,13 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
 }
 
 const mdxComponents = {
+  a: ({ children, ...rest}: any) => <Link className="link-gjs" {...rest}>{ children }</Link>,
+  img: ({ children, ...rest}: React.HTMLProps<any>) => <img className="rounded-md shadow-md" {...rest}>{children}</img>,
+  h1: ({ children, ...rest}: React.HTMLProps<any>) => (
+    <h1 className="font-bold text-xl" id={slugify(children!)} {...rest}>
+      <a href={`#${slugify(children!)}`}>{ children }</a>
+    </h1>
+  ),
 };
 
 export function ContainerMDX({ source }: MDXRemoteProps) {

tailwind.config.ts

@@ -5,6 +5,7 @@ const config: Config = {
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/mdx-components.tsx",
   ],
   theme: {
     extend: {