feat: implement and use the LegacyJsCourseAdmonition component

honzajavorek · honzajavorek · commit 30689dcf0e4b · 2025-10-16T10:07:55.000+02:00
diff --git a/nginx.conf b/nginx.conf
@@ -353,32 +353,32 @@ server {
     rewrite ^/academy/php$ /academy/php/use-apify-from-php redirect;  # not permanent in case we want to reuse /php in the future
 
     # Academy: replacing the 'Web Scraping for Beginners' course
-    rewrite ^/academy/web-scraping-for-beginners/best-practices$ /academy/scraping-basics-javascript?legacy-js-course=/legacy/best-practices permanent;
-    rewrite ^/academy/web-scraping-for-beginners/introduction$ /academy/scraping-basics-javascript?legacy-js-course=/legacy/introduction permanent;
-    rewrite ^/academy/web-scraping-for-beginners/challenge/initializing-and-setting-up$ /academy/scraping-basics-javascript?legacy-js-course=/legacy/challenge/initializing-and-setting-up permanent;
-    rewrite ^/academy/web-scraping-for-beginners/challenge/modularity$ /academy/scraping-basics-javascript?legacy-js-course=/legacy/challenge/modularity permanent;
-    rewrite ^/academy/web-scraping-for-beginners/challenge/scraping-amazon$ /academy/scraping-basics-javascript?legacy-js-course=/legacy/challenge/scraping-amazon permanent;
-    rewrite ^/academy/web-scraping-for-beginners/challenge$ /academy/scraping-basics-javascript?legacy-js-course=/legacy/challenge permanent;
-    rewrite ^/academy/web-scraping-for-beginners/crawling/exporting-data$ /academy/scraping-basics-javascript/framework?legacy-js-course=/legacy/crawling/exporting-data permanent;
-    rewrite ^/academy/web-scraping-for-beginners/crawling/filtering-links$ /academy/scraping-basics-javascript/getting-links?legacy-js-course=/legacy/crawling/filtering-links permanent;
-    rewrite ^/academy/web-scraping-for-beginners/crawling/finding-links$ /academy/scraping-basics-javascript/getting-links?legacy-js-course=/legacy/crawling/finding-links permanent;
-    rewrite ^/academy/web-scraping-for-beginners/crawling/first-crawl$ /academy/scraping-basics-javascript/crawling?legacy-js-course=/legacy/crawling/first-crawl permanent;
-    rewrite ^/academy/web-scraping-for-beginners/crawling/headless-browser$ /academy/scraping-basics-javascript?legacy-js-course=/legacy/crawling/headless-browser permanent;
-    rewrite ^/academy/web-scraping-for-beginners/crawling/pro-scraping$ /academy/scraping-basics-javascript/framework?legacy-js-course=/legacy/crawling/pro-scraping permanent;
-    rewrite ^/academy/web-scraping-for-beginners/crawling/recap-extraction-basics$ /academy/scraping-basics-javascript/extracting-data?legacy-js-course=/legacy/crawling/recap-extraction-basics permanent;
-    rewrite ^/academy/web-scraping-for-beginners/crawling/relative-urls$ /academy/scraping-basics-javascript/getting-links?legacy-js-course=/legacy/crawling/relative-urls permanent;
-    rewrite ^/academy/web-scraping-for-beginners/crawling/scraping-the-data$ /academy/scraping-basics-javascript/scraping-variants?legacy-js-course=/legacy/crawling/scraping-the-data permanent;
-    rewrite ^/academy/web-scraping-for-beginners/crawling$ /academy/scraping-basics-javascript/crawling?legacy-js-course=/legacy/crawling permanent;
-    rewrite ^/academy/web-scraping-for-beginners/data-extraction/browser-devtools$ /academy/scraping-basics-javascript/devtools-inspecting?legacy-js-course=/legacy/data-extraction/browser-devtools permanent;
-    rewrite ^/academy/web-scraping-for-beginners/data-extraction/computer-preparation$ /academy/scraping-basics-javascript/downloading-html?legacy-js-course=/legacy/data-extraction/computer-preparation permanent;
-    rewrite ^/academy/web-scraping-for-beginners/data-extraction/devtools-continued$ /academy/scraping-basics-javascript/devtools-extracting-data?legacy-js-course=/legacy/data-extraction/devtools-continued permanent;
-    rewrite ^/academy/web-scraping-for-beginners/data-extraction/node-continued$ /academy/scraping-basics-javascript/extracting-data?legacy-js-course=/legacy/data-extraction/node-continued permanent;
-    rewrite ^/academy/web-scraping-for-beginners/data-extraction/node-js-scraper$ /academy/scraping-basics-javascript/downloading-html?legacy-js-course=/legacy/data-extraction/node-js-scraper permanent;
-    rewrite ^/academy/web-scraping-for-beginners/data-extraction/project-setup$ /academy/scraping-basics-javascript/downloading-html?legacy-js-course=/legacy/data-extraction/project-setup permanent;
-    rewrite ^/academy/web-scraping-for-beginners/data-extraction/save-to-csv$ /academy/scraping-basics-javascript/saving-data?legacy-js-course=/legacy/data-extraction/save-to-csv permanent;
-    rewrite ^/academy/web-scraping-for-beginners/data-extraction/using-devtools$ /academy/scraping-basics-javascript/devtools-locating-elements?legacy-js-course=/legacy/data-extraction/using-devtools permanent;
-    rewrite ^/academy/web-scraping-for-beginners/data-extraction$ /academy/scraping-basics-javascript/devtools-inspecting?legacy-js-course=/legacy/data-extraction permanent;
-    rewrite ^/academy/web-scraping-for-beginners$ /academy/scraping-basics-javascript?legacy-js-course=/legacy permanent;
+    rewrite ^/academy/web-scraping-for-beginners/best-practices$ /academy/scraping-basics-javascript?legacy-js-course=/best-practices permanent;
+    rewrite ^/academy/web-scraping-for-beginners/introduction$ /academy/scraping-basics-javascript?legacy-js-course=/introduction permanent;
+    rewrite ^/academy/web-scraping-for-beginners/challenge/initializing-and-setting-up$ /academy/scraping-basics-javascript?legacy-js-course=/challenge/initializing-and-setting-up permanent;
+    rewrite ^/academy/web-scraping-for-beginners/challenge/modularity$ /academy/scraping-basics-javascript?legacy-js-course=/challenge/modularity permanent;
+    rewrite ^/academy/web-scraping-for-beginners/challenge/scraping-amazon$ /academy/scraping-basics-javascript?legacy-js-course=/challenge/scraping-amazon permanent;
+    rewrite ^/academy/web-scraping-for-beginners/challenge$ /academy/scraping-basics-javascript?legacy-js-course=/challenge permanent;
+    rewrite ^/academy/web-scraping-for-beginners/crawling/exporting-data$ /academy/scraping-basics-javascript/framework?legacy-js-course=/crawling/exporting-data permanent;
+    rewrite ^/academy/web-scraping-for-beginners/crawling/filtering-links$ /academy/scraping-basics-javascript/getting-links?legacy-js-course=/crawling/filtering-links permanent;
+    rewrite ^/academy/web-scraping-for-beginners/crawling/finding-links$ /academy/scraping-basics-javascript/getting-links?legacy-js-course=/crawling/finding-links permanent;
+    rewrite ^/academy/web-scraping-for-beginners/crawling/first-crawl$ /academy/scraping-basics-javascript/crawling?legacy-js-course=/crawling/first-crawl permanent;
+    rewrite ^/academy/web-scraping-for-beginners/crawling/headless-browser$ /academy/scraping-basics-javascript?legacy-js-course=/crawling/headless-browser permanent;
+    rewrite ^/academy/web-scraping-for-beginners/crawling/pro-scraping$ /academy/scraping-basics-javascript/framework?legacy-js-course=/crawling/pro-scraping permanent;
+    rewrite ^/academy/web-scraping-for-beginners/crawling/recap-extraction-basics$ /academy/scraping-basics-javascript/extracting-data?legacy-js-course=/crawling/recap-extraction-basics permanent;
+    rewrite ^/academy/web-scraping-for-beginners/crawling/relative-urls$ /academy/scraping-basics-javascript/getting-links?legacy-js-course=/crawling/relative-urls permanent;
+    rewrite ^/academy/web-scraping-for-beginners/crawling/scraping-the-data$ /academy/scraping-basics-javascript/scraping-variants?legacy-js-course=/crawling/scraping-the-data permanent;
+    rewrite ^/academy/web-scraping-for-beginners/crawling$ /academy/scraping-basics-javascript/crawling?legacy-js-course=/crawling permanent;
+    rewrite ^/academy/web-scraping-for-beginners/data-extraction/browser-devtools$ /academy/scraping-basics-javascript/devtools-inspecting?legacy-js-course=/data-extraction/browser-devtools permanent;
+    rewrite ^/academy/web-scraping-for-beginners/data-extraction/computer-preparation$ /academy/scraping-basics-javascript/downloading-html?legacy-js-course=/data-extraction/computer-preparation permanent;
+    rewrite ^/academy/web-scraping-for-beginners/data-extraction/devtools-continued$ /academy/scraping-basics-javascript/devtools-extracting-data?legacy-js-course=/data-extraction/devtools-continued permanent;
+    rewrite ^/academy/web-scraping-for-beginners/data-extraction/node-continued$ /academy/scraping-basics-javascript/extracting-data?legacy-js-course=/data-extraction/node-continued permanent;
+    rewrite ^/academy/web-scraping-for-beginners/data-extraction/node-js-scraper$ /academy/scraping-basics-javascript/downloading-html?legacy-js-course=/data-extraction/node-js-scraper permanent;
+    rewrite ^/academy/web-scraping-for-beginners/data-extraction/project-setup$ /academy/scraping-basics-javascript/downloading-html?legacy-js-course=/data-extraction/project-setup permanent;
+    rewrite ^/academy/web-scraping-for-beginners/data-extraction/save-to-csv$ /academy/scraping-basics-javascript/saving-data?legacy-js-course=/data-extraction/save-to-csv permanent;
+    rewrite ^/academy/web-scraping-for-beginners/data-extraction/using-devtools$ /academy/scraping-basics-javascript/devtools-locating-elements?legacy-js-course=/data-extraction/using-devtools permanent;
+    rewrite ^/academy/web-scraping-for-beginners/data-extraction$ /academy/scraping-basics-javascript/devtools-inspecting?legacy-js-course=/data-extraction permanent;
+    rewrite ^/academy/web-scraping-for-beginners$ /academy/scraping-basics-javascript?legacy-js-course=/ permanent;
 
     # Removed pages
     # GPT plugins were discontinued April 9th, 2024 - https://help.openai.com/en/articles/8988022-winding-down-the-chatgpt-plugins-beta
diff --git a/sources/academy/webscraping/scraping_basics_javascript/01_devtools_inspecting.md b/sources/academy/webscraping/scraping_basics_javascript/01_devtools_inspecting.md
@@ -6,8 +6,11 @@ slug: /scraping-basics-javascript/devtools-inspecting
 unlisted: true
 ---
 
+import LegacyJsCourseAdmonition from '@site/src/components/LegacyJsCourseAdmonition';
 import Exercises from '../scraping_basics/_exercises.mdx';
 
+<LegacyJsCourseAdmonition />
+
 **In this lesson we'll use the browser tools for developers to inspect and manipulate the structure of a website.**
 
 ---
diff --git a/sources/academy/webscraping/scraping_basics_javascript/02_devtools_locating_elements.md b/sources/academy/webscraping/scraping_basics_javascript/02_devtools_locating_elements.md
@@ -6,8 +6,11 @@ slug: /scraping-basics-javascript/devtools-locating-elements
 unlisted: true
 ---
 
+import LegacyJsCourseAdmonition from '@site/src/components/LegacyJsCourseAdmonition';
 import Exercises from '../scraping_basics/_exercises.mdx';
 
+<LegacyJsCourseAdmonition />
+
 **In this lesson we'll use the browser tools for developers to manually find products on an e-commerce website.**
 
 ---
diff --git a/sources/academy/webscraping/scraping_basics_javascript/03_devtools_extracting_data.md b/sources/academy/webscraping/scraping_basics_javascript/03_devtools_extracting_data.md
@@ -6,8 +6,11 @@ slug: /scraping-basics-javascript/devtools-extracting-data
 unlisted: true
 ---
 
+import LegacyJsCourseAdmonition from '@site/src/components/LegacyJsCourseAdmonition';
 import Exercises from '../scraping_basics/_exercises.mdx';
 
+<LegacyJsCourseAdmonition />
+
 **In this lesson we'll use the browser tools for developers to manually extract product data from an e-commerce website.**
 
 ---
diff --git a/sources/academy/webscraping/scraping_basics_javascript/04_downloading_html.md b/sources/academy/webscraping/scraping_basics_javascript/04_downloading_html.md
@@ -6,8 +6,11 @@ slug: /scraping-basics-javascript/downloading-html
 unlisted: true
 ---
 
+import LegacyJsCourseAdmonition from '@site/src/components/LegacyJsCourseAdmonition';
 import Exercises from '../scraping_basics/_exercises.mdx';
 
+<LegacyJsCourseAdmonition />
+
 **In this lesson we'll start building a Node.js application for watching prices. As a first step, we'll use the Fetch API to download HTML code of a product listing page.**
 
 ---
diff --git a/sources/academy/webscraping/scraping_basics_javascript/05_parsing_html.md b/sources/academy/webscraping/scraping_basics_javascript/05_parsing_html.md
@@ -6,8 +6,11 @@ slug: /scraping-basics-javascript/parsing-html
 unlisted: true
 ---
 
+import LegacyJsCourseAdmonition from '@site/src/components/LegacyJsCourseAdmonition';
 import Exercises from '../scraping_basics/_exercises.mdx';
 
+<LegacyJsCourseAdmonition />
+
 **In this lesson we'll look for products in the downloaded HTML. We'll use Cheerio to turn the HTML into objects which we can work with in our Node.js program.**
 
 ---
diff --git a/sources/academy/webscraping/scraping_basics_javascript/06_locating_elements.md b/sources/academy/webscraping/scraping_basics_javascript/06_locating_elements.md
@@ -6,8 +6,11 @@ slug: /scraping-basics-javascript/locating-elements
 unlisted: true
 ---
 
+import LegacyJsCourseAdmonition from '@site/src/components/LegacyJsCourseAdmonition';
 import Exercises from '../scraping_basics/_exercises.mdx';
 
+<LegacyJsCourseAdmonition />
+
 **In this lesson we'll locate product data in the downloaded HTML. We'll use Cheerio to find those HTML elements which contain details about each product, such as title or price.**
 
 ---
diff --git a/sources/academy/webscraping/scraping_basics_javascript/07_extracting_data.md b/sources/academy/webscraping/scraping_basics_javascript/07_extracting_data.md
@@ -6,8 +6,11 @@ slug: /scraping-basics-javascript/extracting-data
 unlisted: true
 ---
 
+import LegacyJsCourseAdmonition from '@site/src/components/LegacyJsCourseAdmonition';
 import Exercises from '../scraping_basics/_exercises.mdx';
 
+<LegacyJsCourseAdmonition />
+
 **In this lesson we'll finish extracting product data from the downloaded HTML. With help of basic string manipulation we'll focus on cleaning and correctly representing the product price.**
 
 ---
diff --git a/sources/academy/webscraping/scraping_basics_javascript/08_saving_data.md b/sources/academy/webscraping/scraping_basics_javascript/08_saving_data.md
@@ -6,6 +6,10 @@ slug: /scraping-basics-javascript/saving-data
 unlisted: true
 ---
 
+import LegacyJsCourseAdmonition from '@site/src/components/LegacyJsCourseAdmonition';
+
+<LegacyJsCourseAdmonition />
+
 **In this lesson, we'll save the data we scraped in the popular formats, such as CSV or JSON. We'll use the json2csv library to export the files.**
 
 ---
diff --git a/sources/academy/webscraping/scraping_basics_javascript/09_getting_links.md b/sources/academy/webscraping/scraping_basics_javascript/09_getting_links.md
@@ -6,8 +6,11 @@ slug: /scraping-basics-javascript/getting-links
 unlisted: true
 ---
 
+import LegacyJsCourseAdmonition from '@site/src/components/LegacyJsCourseAdmonition';
 import Exercises from '../scraping_basics/_exercises.mdx';
 
+<LegacyJsCourseAdmonition />
+
 **In this lesson, we'll locate and extract links to individual product pages. We'll use Cheerio to find the relevant bits of HTML.**
 
 ---
diff --git a/sources/academy/webscraping/scraping_basics_javascript/10_crawling.md b/sources/academy/webscraping/scraping_basics_javascript/10_crawling.md
@@ -6,8 +6,11 @@ slug: /scraping-basics-javascript/crawling
 unlisted: true
 ---
 
+import LegacyJsCourseAdmonition from '@site/src/components/LegacyJsCourseAdmonition';
 import Exercises from '../scraping_basics/_exercises.mdx';
 
+<LegacyJsCourseAdmonition />
+
 **In this lesson, we'll follow links to individual product pages. We'll use the Fetch API to download them and Cheerio to process them.**
 
 ---
diff --git a/sources/academy/webscraping/scraping_basics_javascript/11_scraping_variants.md b/sources/academy/webscraping/scraping_basics_javascript/11_scraping_variants.md
@@ -6,8 +6,11 @@ slug: /scraping-basics-javascript/scraping-variants
 unlisted: true
 ---
 
+import LegacyJsCourseAdmonition from '@site/src/components/LegacyJsCourseAdmonition';
 import Exercises from '../scraping_basics/_exercises.mdx';
 
+<LegacyJsCourseAdmonition />
+
 **In this lesson, we'll scrape the product detail pages to represent each product variant as a separate item in our dataset.**
 
 ---
diff --git a/sources/academy/webscraping/scraping_basics_javascript/12_framework.md b/sources/academy/webscraping/scraping_basics_javascript/12_framework.md
@@ -6,8 +6,11 @@ slug: /scraping-basics-javascript/framework
 unlisted: true
 ---
 
+import LegacyJsCourseAdmonition from '@site/src/components/LegacyJsCourseAdmonition';
 import Exercises from '../scraping_basics/_exercises.mdx';
 
+<LegacyJsCourseAdmonition />
+
 **In this lesson, we'll rework our application for watching prices so that it builds on top of a scraping framework. We'll use Crawlee to make the program simpler, faster, and more robust.**
 
 ---
diff --git a/sources/academy/webscraping/scraping_basics_javascript/13_platform.md b/sources/academy/webscraping/scraping_basics_javascript/13_platform.md
@@ -6,6 +6,10 @@ slug: /scraping-basics-javascript/platform
 unlisted: true
 ---
 
+import LegacyJsCourseAdmonition from '@site/src/components/LegacyJsCourseAdmonition';
+
+<LegacyJsCourseAdmonition />
+
 **In this lesson, we'll deploy our application to a scraping platform that automatically runs it daily. We'll also use the platform's API to retrieve and work with the results.**
 
 ---
diff --git a/sources/academy/webscraping/scraping_basics_javascript/index.md b/sources/academy/webscraping/scraping_basics_javascript/index.md
@@ -9,6 +9,9 @@ unlisted: true
 ---
 
 import DocCardList from '@theme/DocCardList';
+import LegacyJsCourseAdmonition from '@site/src/components/LegacyJsCourseAdmonition';
+
+<LegacyJsCourseAdmonition />
 
 **Learn how to use JavaScript to extract information from websites in this practical course, starting from the absolute basics.**
 
diff --git a/src/components/LegacyJsCourseAdmonition.jsx b/src/components/LegacyJsCourseAdmonition.jsx
@@ -0,0 +1,25 @@
+import { useLocation } from '@docusaurus/router';
+import Admonition from '@theme/Admonition';
+
+export default function LegacyJsCourseAdmonition({ param = 'legacy-js-course' }) {
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  const value = params.get(param);
+  if (!value) return null;
+  return (
+    <div className="legacy-js-course-admonition">
+      <Admonition type="caution" title="New course for JavaScript devs">
+        <p>
+          You're trying to access page <code>{value}</code> from our
+          old <strong>Web scraping basics for JavaScript devs</strong> course,
+          which is now archived.
+        </p>
+        <p>
+          You can still <a href={'/academy/scraping-basics-javascript/legacy' + value}>go through that page</a>,
+          but we recommend you to check out this new course instead. We plan to close the old course
+          entirely in a few months.
+        </p>
+      </Admonition>
+    </div>
+  );
+}
