Improvements

- refactored canonical URL handling - use site base URL from Astro config - devcontainer improved with MDX support
Novage · Feb 16, 2025 · 9db4cd0 · 9db4cd0
1 parent 8969a0e
commit 9db4cd0
Show file tree

Hide file tree

Showing 15 changed files with 21 additions and 14 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -18,7 +18,11 @@
   // Configure tool-specific properties.
   "customizations": {
     "vscode": {
-      "extensions": ["esbenp.prettier-vscode", "astro-build.astro-vscode"],
+      "extensions": [
+        "esbenp.prettier-vscode",
+        "astro-build.astro-vscode",
+        "unifiedjs.vscode-mdx"
+      ],
       "settings": {
         "editor.formatOnSave": true,
         "[javascript]": {
@@ -35,6 +39,9 @@
         },
         "[jsonc]": {
           "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[mdx]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
         }
       }
     }

diff --git a/src/components/blog-page/Post.astro b/src/components/blog-page/Post.astro
@@ -8,7 +8,7 @@ import "../../styles/blog.css";
 const post = Astro.props.frontmatter ?? Astro.props;
 ---
 
-<Layout title={post.title} canonical={post.canonicalURL}>
+<Layout title={post.title} canonical={post.canonical}>
   <Header />
   <div id="content">
     <article>

diff --git a/src/components/shared/Header.astro b/src/components/shared/Header.astro
@@ -36,7 +36,7 @@
           </li>
           <li class="sub-menu-item">
             <a href="https://github.com/Novage/wt-tracker" target="blank"
-              ><span>High-performance WebTorrent tracker</span></a
+              ><span>High-Performance WebTorrent Tracker</span></a
             >
           </li>
         </ul>

diff --git a/...eo-on-a-web-page-in-5-minutes-for-free.md → ...eo-on-a-web-page-in-5-minutes-for-free.md b/...eo-on-a-web-page-in-5-minutes-for-free.md → ...eo-on-a-web-page-in-5-minutes-for-free.md
@@ -1,8 +1,8 @@
 ---
-canonicalURL: https://novage.com.ua/blog/setting-up-p2p-video-on-a-web-page-in-5-minutes-for-free
 author: Andriy Lysnevych
 date: "2019-03-22"
 title: "Setting up P2P Video on a Web Page in 5 Minutes for Free"
+slug: setting-up-p2p-video-on-a-web-page-in-5-minutes-for-free
 description: 'This article will give you instructions on how to easily, quickly and 100% for free enable P2P video delivery on your HTML5 web pages that stream HLS or MPEG-DASH videos with open-source <a href="https://github.com/novage/p2p-media-loader">P2P Media Loader</a> JavaScript library by <a href="https://novage.com.ua/">Novage</a> (see <a href="http://novage.com.ua/p2p-media-loader/demo">the demo</a>).'
 ---
 

diff --git a/...deo-streaming-into-Mobile-Application.mdx → ...deo-streaming-into-Mobile-Application.mdx b/...deo-streaming-into-Mobile-Application.mdx → ...deo-streaming-into-Mobile-Application.mdx
@@ -1,8 +1,8 @@
 ---
-canonicalURL: https://novage.com.ua/blog/integrate-p2p-video-streaming-into-mobile-applications
 author: Dmytro Demchenko, Andriy Lysnevych
 date: "2025-02-07"
 title: "Integrate P2P Video Streaming into Mobile Applications"
+slug: integrate-p2p-video-streaming-into-mobile-application
 description: "Discover how to integrate P2P Media Loader into Android and iOS applications to achieve scalable, cost-efficient video streaming. This article explores two practical approaches — Native on Android and Flutter on iOS/Android — to leverage peer-to-peer (P2P) streaming technology powered by WebRTC. Learn step-by-step integration techniques, and review the pros and cons of each method."
 ---
 

diff --git a/src/content/config.ts b/src/content/config.ts
@@ -3,7 +3,6 @@ import { z, defineCollection } from "astro:content";
 const blogCollection = defineCollection({
   type: "content", // v2.5.0 and later
   schema: z.object({
-    canonicalURL: z.string().url(),
     title: z.string(),
     date: z.string(),
     description: z.string(),

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -48,7 +48,7 @@ const { title, canonical } = Astro.props;
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
 
-    {canonical && <link rel="canonical" href={canonical} />}
+    {canonical !== undefined && <link rel="canonical" href={`${Astro.site}${canonical}`} />}
 
     <script is:inline>
       window.dataLayer = window.dataLayer || [];

diff --git a/src/pages/2019/03/22/Setting-up-P2P-video-on-a-web-page-in-5-minutes-for-free.md b/src/pages/2019/03/22/Setting-up-P2P-video-on-a-web-page-in-5-minutes-for-free.md
@@ -3,6 +3,7 @@ author: Andriy Lysnevych
 date: "2019-03-22"
 title: "Setting up p2p video on a web page in 5 minutes for free"
 layout: "../../../../components/blog-page/Post.astro"
+canonical: blog/setting-up-p2p-video-on-a-web-page-in-5-minutes-for-free
 ---
 
 This article will give you instructions on how to easily, quickly and 100% for free enable P2P video delivery on your HTML5 web pages that stream HLS or MPEG-DASH videos with open-source [P2P Media Loader](https://github.com/novage/p2p-media-loader) JavaScript library by [Novage](https://novage.com.ua/) (see [the demo](http://novage.com.ua/p2p-media-loader/demo)).

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -15,6 +15,6 @@ const post = Astro.props;
 const { Content } = await post.render();
 ---
 
-<Post {...post.data}>
+<Post {...post.data} canonical={`blog/${post.slug}`}>
   <Content />
 </Post>
diff --git a/src/pages/blog/blog.astro b/src/pages/blog/blog.astro
@@ -11,7 +11,7 @@ const posts = (await getCollection("blog")).sort(
 );
 ---
 
-<Layout title="Novage Blog" canonical="https://novage.com.ua/blog">
+<Layout title="Novage Blog" canonical="blog">
   <Header />
   <div id="content">
     <article>

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -11,7 +11,7 @@ const posts = (await getCollection("blog")).sort(
 );
 ---
 
-<Layout title="Novage Blog" canonical="https://novage.com.ua/blog">
+<Layout title="Novage Blog" canonical="blog">
   <Header />
   <div id="content">
     <article>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -7,7 +7,7 @@ import Footer from "../components/shared/Footer.astro";
 import PageHeader from "../components/shared/PageHeader.astro";
 ---
 
-<Layout title="Novage" canonical="https://novage.com.ua/">
+<Layout title="Novage" canonical="">
   <Header />
   <div id="content">
     <article>

diff --git a/src/pages/p2p-media-loader/demo.astro b/src/pages/p2p-media-loader/demo.astro
@@ -13,7 +13,7 @@ import { P2PVideoDemo } from "p2p-media-loader-demo";
 
 <Layout
   title="P2P Media Loader"
-  canonical="https://novage.com.ua/p2p-media-loader/demo"
+  canonical="p2p-media-loader/demo"
 >
   <Header />
 

diff --git a/src/pages/p2p-media-loader/overview.astro b/src/pages/p2p-media-loader/overview.astro
@@ -9,7 +9,7 @@ import img from "../../../public/images/p2p-assisted-media-delivery.png";
 
 <Layout
   title="P2P Media Loader"
-  canonical="https://novage.com.ua/p2p-media-loader/overview"
+  canonical="p2p-media-loader/overview"
 >
   <Header />
   <div id="content">

diff --git a/src/pages/p2p-media-loader/technical-overview.astro b/src/pages/p2p-media-loader/technical-overview.astro
@@ -9,7 +9,7 @@ import img from "../../../public/images/p2p-media-loader-network.png";
 
 <Layout
   title="P2P Media Loader"
-  canonical="https://novage.com.ua/p2p-media-loader/technical-overview"
+  canonical="p2p-media-loader/technical-overview"
 >
   <Header />
   <div id="content">