add ew sections, blog, bump deps

Author: Arhell

astro.config.mjs

@@ -5,13 +5,18 @@ import starlightSidebarTopics from 'starlight-sidebar-topics';
 import starlightImageZoom from 'starlight-image-zoom';
 import rehypeAstroRelativeMarkdownLinks from "astro-rehype-relative-markdown-links";
 import starlightScrollToTop from 'starlight-scroll-to-top';
+import starlightBlog from 'starlight-blog';
+import astroExpressiveCode from 'astro-expressive-code';
 
 const options = {
     collectionBase: false,
 };
 
 export default defineConfig({
     integrations: [
+        astroExpressiveCode({
+            themes: ['material-theme'],
+        }),
         starlight({
             title: '',
             favicon: '/favicon.svg',
@@ -31,6 +36,9 @@ export default defineConfig({
                 './src/styles/global.css',
             ],
             plugins: [
+                starlightBlog({
+
+                }),
                 starlightImageZoom(),
                 starlightSidebarTopics([
                     {
@@ -142,6 +150,13 @@ export default defineConfig({
                             {label: 'Wiki', autogenerate: {directory: 'wiki/'}},
                         ],
                     },
+                    {
+                        label: 'blog',
+                        link: '/blog',
+                        items: [
+                            {label: 'blog', autogenerate: {directory: 'blog/'}},
+                        ],
+                    },
                 ]),
                 starlightScrollToTop({
                     position: 'right',

package.json

@@ -10,23 +10,24 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/markdown-remark": "^6.3.6",
-    "@astrojs/react": "^4.3.0",
-    "@astrojs/starlight": "^0.35.2",
-    "@astrojs/starlight-tailwind": "^4.0.1",
-    "@tailwindcss/vite": "^4.1.13",
-    "astro": "^5.13.5",
+    "@astrojs/markdown-remark": "^6.3.9",
+    "@astrojs/starlight": "^0.36.3",
+    "@astrojs/starlight-tailwind": "^4.0.2",
+    "@tailwindcss/vite": "^4.1.17",
+    "astro": "^5.16.0",
     "astro-breadcrumbs": "^3.3.1",
+    "astro-expressive-code": "^0.41.3",
     "astro-rehype-relative-markdown-links": "0.18.1",
-    "astro-vtbot": "^2.1.8",
+    "astro-vtbot": "^2.1.9",
     "meilisearch-docsearch": "^0.8.0",
     "schema-dts": "^1.1.5",
-    "sharp": "^0.34.3",
-    "starlight-image-zoom": "^0.13.0",
-    "starlight-scroll-to-top": "^0.3.1",
-    "starlight-sidebar-topics": "^0.6.0",
-    "swiper": "^11.2.10",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.13"
+    "sharp": "^0.34.5",
+    "starlight-blog": "^0.25.1",
+    "starlight-image-zoom": "^0.13.2",
+    "starlight-scroll-to-top": "^0.4.0",
+    "starlight-sidebar-topics": "^0.6.2",
+    "swiper": "^12.0.3",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17"
   }
 }

pnpm-lock.yaml

@@ -21,8 +21,8 @@ const isHomepage = Astro.locals.starlightRoute.id === '';
                 {/* Brand Column */}
                 <div class="lg:col-span-1">
                     <div class="flex items-center space-x-2 mb-6">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code2 h-10 w-10 text-yellow-400"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg>
-                        <span class="text-2xl font-bold bg-gradient-to-r from-yellow-400 to-purple-400 bg-clip-text text-transparent">
+                        <svg style="width: 36px; height: 34px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 332.972 316.891" height="338.017" width="355.17"><g transform="translate(-290.5 -325.712)"><ellipse ry="150.063" rx="147.984" cx="458.604" cy="491.613" fill="#607d8b"/><ellipse ry="150.063" rx="147.984" cx="438.82" cy="478.594" fill="#ffe680"/></g><g fill="#607d8b" stroke="#fff"><text transform="matrix(.995 0 0 1.00502 -290.5 -325.712)" y="521.758" x="467.057" style="line-height:0%" font-weight="400" font-size="11.675" font-family="sans-serif" letter-spacing="0" word-spacing="0" stroke-width="3.888"><tspan style="line-height:1.25;-inkscape-font-specification:'Corbel Bold'" y="521.758" x="467.057" font-weight="700" font-size="140.331" font-family="Corbel">S</tspan></text><g style="line-height:125%"><path style="-inkscape-font-specification:'Corbel Bold'" d="M329.343 383.843l-.266 3.305c-61.317 7.315-50.909-67.917-1.023-51.38l-1.27 2.214c-41.039-12.634-50.598 52.623 2.56 45.861z" font-weight="700" font-size="98.432" font-family="Corbel" transform="matrix(3.72786 -.08906 .09887 4.05186 -1102.799 -1299.182)" letter-spacing="0" word-spacing="0"/></g><path d="M65.556 87.124l-2.23 14.044 75.387 103.306L227.577 2.015l-45.284.498-56.73 156.334z" fill-rule="evenodd" stroke-width="3.888"/></g></svg>
+                        <span class="text-2xl font-bold bg-clip-text text-white ">
                   CodeceptJS
                 </span>
                     </div>

src/components/Footer.astro

@@ -29,8 +29,8 @@ const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
 		)
 	}
 	<span class:list={{ 'sr-only': config.logo?.replacesTitle }} translate="no">
-		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code2 h-8 w-8 text-yellow-600"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg>
-		<span class="text-xl font-bold bg-gradient-to-r from-yellow-600 to-purple-600 bg-clip-text text-transparent">CodeceptJS</span>
+		<svg style="width: 36px; height: 34px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 332.972 316.891" height="338.017" width="355.17"><g transform="translate(-290.5 -325.712)"><ellipse ry="150.063" rx="147.984" cx="458.604" cy="491.613" fill="#607d8b"/><ellipse ry="150.063" rx="147.984" cx="438.82" cy="478.594" fill="#ffe680"/></g><g fill="#607d8b" stroke="#fff"><text transform="matrix(.995 0 0 1.00502 -290.5 -325.712)" y="521.758" x="467.057" style="line-height:0%" font-weight="400" font-size="11.675" font-family="sans-serif" letter-spacing="0" word-spacing="0" stroke-width="3.888"><tspan style="line-height:1.25;-inkscape-font-specification:'Corbel Bold'" y="521.758" x="467.057" font-weight="700" font-size="140.331" font-family="Corbel">S</tspan></text><g style="line-height:125%"><path style="-inkscape-font-specification:'Corbel Bold'" d="M329.343 383.843l-.266 3.305c-61.317 7.315-50.909-67.917-1.023-51.38l-1.27 2.214c-41.039-12.634-50.598 52.623 2.56 45.861z" font-weight="700" font-size="98.432" font-family="Corbel" transform="matrix(3.72786 -.08906 .09887 4.05186 -1102.799 -1299.182)" letter-spacing="0" word-spacing="0"/></g><path d="M65.556 87.124l-2.23 14.044 75.387 103.306L227.577 2.015l-45.284.498-56.73 156.334z" fill-rule="evenodd" stroke-width="3.888"/></g></svg>
+		<span class="text-xl font-bold bg-clip-text text-gray-700 dark:text-gray-300">CodeceptJS</span>
 	</span>
 </a>
 

src/components/SiteTitle.astro

@@ -1,7 +1,14 @@
 import { defineCollection } from 'astro:content';
-import { docsLoader } from '@astrojs/starlight/loaders';
 import { docsSchema } from '@astrojs/starlight/schema';
+import { docsLoader } from '@astrojs/starlight/loaders';
+import { topicSchema } from 'starlight-sidebar-topics/schema';
+import { blogSchema } from 'starlight-blog/schema';
 
 export const collections = {
-	docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+    docs: defineCollection({
+        loader: docsLoader(),
+        schema: docsSchema({
+            extend: (context) => blogSchema(context).merge(topicSchema),
+        }),
+    }),
 };

src/content.config.ts

@@ -0,0 +1,8 @@
+---
+title: My first blog post
+date: 2023-07-24
+---
+
+## Hello
+
+Hello world!