adverts section

site/app/(marketing)/blog/[slug]/page.tsx

@@ -2,11 +2,12 @@ import { notFound } from 'next/navigation';
 import { allPosts } from 'contentlayer/generated';
 
 import Mdx from '@/components/MDX';
+import { Ad } from '@/components/Ad';
 
 interface PageProps {
   params: {
-    slug: string
-  }
+    slug: string;
+  };
 }
 
 async function getPageFromParams(params) {
@@ -35,19 +36,47 @@ export default async function PostPage({ params }: PageProps) {
 
   return (
     <>
-      {post && post.title && (
-        <div className="hero">
-          <div className="container container-narrow">
-            <div className="hero-subheader">{post.product}</div>
-            <h1 className="hero-title">{post.title}</h1>
-          </div>
-        </div>
-      )}
       <section className="section pt-0">
-        <div className="container container-narrow">
-          <div className="markdown">
-            {post.description && <p className="lead">{post.description}</p>}
-            <Mdx code={post.body.code} />
+        <div className="container">
+          <div className="row">
+            <div className="col-side">
+              <div className="sticky-top">
+                <div className="py-7">back</div>
+              </div>
+            </div>
+            <div className="col">
+              <div className="row g-6">
+                <div className="col-12">
+                  <div className="row g-6">
+                    <div className="col">
+                      {post && post.title && (
+                        <div className="py-7 text-center">
+                          {post.product && <div className="hero-subheader">{post.product}</div>}
+                          <div className="text-muted mb-2">July 25, 2023</div>
+                          <h1 className="hero-title">{post.title}</h1>
+                        </div>
+                      )}
+                    </div>
+                    <div className="col-side"></div>
+                  </div>
+                </div>
+                <div className="col-12">
+                  <div className="row g-6">
+                    <div className="col">
+                      <div className="markdown">
+                        {post.description && <p className="lead">{post.description}</p>}
+                        <Mdx code={post.body.code} />
+                      </div>
+                    </div>
+                    <div className="col-side">
+                      <div className="sticky-top">
+                        <Ad />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </section>

site/app/(marketing)/blog/layout.tsx

-
-export default function CoreLayout({
-  children
-}: {
-  children: React.ReactNode,
-}) {
-  return (
-    <section className="section">
-      <div className="container">
-        <div className="row">
-          <div className="col">
-            <main className="main">{children}</main>
-          </div>
-          <div className="col-3">
-            <h1 className="section-title section-title-lg">Tabler Blog</h1>
-            <p className="section-description">
-              Stay in the loop with all things Tabler. We provide regular
-              updates on new features, changelogs, and news, ensuring you never
-              miss any of our software developments.
-            </p>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}

site/components/Ad.tsx

+'use client';
+
+import { useRef, useEffect } from 'react';
+
+export const Ad = () => {
+  const ad = useRef<any>(null);
+
+  useEffect(() => {
+    if (ad.current) {
+      const script = document.createElement('script');
+      script.async = true;
+      script.src = '//cdn.carbonads.com/carbon.js?serve=CWYDCKQE&placement=tabler-iconsio';
+      script.id = '_carbonads_js';
+      ad.current.appendChild(script);
+    }
+  }, []);
+
+  return (
+    <div ref={ad} className="ads"></div>
+  );
+};

site/components/layout/Header.tsx

@@ -262,7 +262,7 @@ export default function Header({ headerStatic, className, pageProps, ...props }:
           className,
         )}
       >
-        <div className="container" data-aos="fade-down">
+        <div className="container">
           <nav className="row items-center">
             <div className="col-auto">
               <Link href="/" className={clsx('logo' /*, pageProps.brand ? `logo-${pageProps.brand}` : ''*/)} aria-label="Tabler" />

site/styles/_config.scss

@@ -166,6 +166,7 @@ $grid-breakpoints: (
 
 $container-max-width: px2rem(1280px);
 $container-narrow-max-width: px2rem(990px);
+$container-slim-max-width: px2rem(768px);
 
 $zindex-modal: 100;
 $zindex-gototop: 90;

site/styles/_grid.scss

@@ -14,6 +14,10 @@
   max-width: $container-narrow-max-width;
 }
 
+.container-slim {
+  max-width: $container-slim-max-width;
+}
+
 .container-fluid {
   max-width: 100%;
 }

site/styles/_mixins.scss

@@ -255,6 +255,11 @@
         @include make-col-auto();
       }
 
+      .#{$prefix}col-side {
+        flex: 0 0 auto;
+        width: 12rem;
+      }
+
       @if $columns > 0 {
         @for $i from 1 through $columns {
           .#{$prefix}col-#{$i} {