fix: use the new <Details /> component

I'd prefer using plain HTML, but I do this to prevent the error
"Expected component `Details` to be defined: you likely forgot to import, pass, or provide it".
As of now the component provides worse user experience than plain HTML,
but that's another issue: #1199

Author: honzajavorek

sources/academy/webscraping/scraping_basics_python/04_downloading_html.md

@@ -7,6 +7,7 @@ slug: /scraping-basics-python/downloading-html
 ---
 
 import Exercises from './_exercises.mdx';
+import Details from '@theme/Details';
 
 **In this lesson we'll start building a Python application for watching prices. As a first step, we'll use the HTTPX library to download HTML code of a product listing page.**
 
@@ -148,7 +149,7 @@ Download HTML of a product listing page, but this time from a real world e-comme
 https://www.amazon.com/s?k=darth+vader
 ```
 
-<details>
+<Details>
   <summary>Solution</summary>
 
   ```py
@@ -161,7 +162,7 @@ https://www.amazon.com/s?k=darth+vader
   ```
 
   If you get `Server error '503 Service Unavailable'`, that's just Amazon's anti-scraping protections. You can learn about how to overcome those in our [Anti-scraping protections](../anti_scraping/index.md) course.
-</details>
+</Details>
 
 ### Save downloaded HTML as a file
 
@@ -171,7 +172,7 @@ Download HTML, then save it on your disk as a `products.html` file. You can use
 https://warehouse-theme-metal.myshopify.com/collections/sales
 ```
 
-<details>
+<Details>
   <summary>Solution</summary>
 
   Right in your Terminal or Command Prompt, you can create files by _redirecting output_ of command line programs:
@@ -192,7 +193,7 @@ https://warehouse-theme-metal.myshopify.com/collections/sales
   Path("products.html").write_text(response.text)
   ```
 
-</details>
+</Details>
 
 ### Download an image as a file
 
@@ -202,7 +203,7 @@ Download a product image, then save it on your disk as a file. While HTML is _te
 https://warehouse-theme-metal.myshopify.com/cdn/shop/products/sonyxbr55front_f72cc8ff-fcd6-4141-b9cc-e1320f867785.jpg
 ```
 
-<details>
+<Details>
   <summary>Solution</summary>
 
   Python offers several ways how to create files. The solution below uses [pathlib](https://docs.python.org/3/library/pathlib.html):
@@ -217,4 +218,4 @@ https://warehouse-theme-metal.myshopify.com/cdn/shop/products/sonyxbr55front_f72
   Path("tv.jpg").write_bytes(response.content)
   ```
 
-</details>
+</Details>

sources/academy/webscraping/scraping_basics_python/05_parsing_html.md

@@ -7,6 +7,7 @@ slug: /scraping-basics-python/parsing-html
 ---
 
 import Exercises from './_exercises.mdx';
+import Details from '@theme/Details';
 
 **In this lesson we'll look for products in the downloaded HTML. We'll use BeautifulSoup to turn the HTML into objects which we can work with in our Python program.**
 
@@ -120,7 +121,7 @@ Print a total count of F1 teams listed on this page:
 https://www.formula1.com/en/teams
 ```
 
-<details>
+<Details>
   <summary>Solution</summary>
 
   ```py
@@ -136,13 +137,13 @@ https://www.formula1.com/en/teams
   print(len(soup.select(".outline")))
   ```
 
-</details>
+</Details>
 
 ### Scrape F1 drivers
 
 Use the same URL as in the previous exercise, but this time print a total count of F1 drivers.
 
-<details>
+<Details>
   <summary>Solution</summary>
 
   ```py
@@ -158,4 +159,4 @@ Use the same URL as in the previous exercise, but this time print a total count
   print(len(soup.select(".f1-grid")))
   ```
 
-</details>
+</Details>

sources/academy/webscraping/scraping_basics_python/06_locating_elements.md

@@ -7,6 +7,7 @@ slug: /scraping-basics-python/locating-elements
 ---
 
 import Exercises from './_exercises.mdx';
+import Details from '@theme/Details';
 
 **In this lesson we'll locate product data in the downloaded HTML. We'll use BeautifulSoup to find those HTML elements which contain details about each product, such as title or price.**
 
@@ -214,7 +215,7 @@ Botswana
 ...
 ```
 
-<details>
+<Details>
   <summary>Solution</summary>
 
   ```py
@@ -239,7 +240,7 @@ Botswana
 
   Because some rows contain [table headers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th), we skip processing a row if `table_row.select("td")` doesn't find any [table data](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) cells.
 
-</details>
+</Details>
 
 ### Use CSS selectors to their max
 
@@ -248,7 +249,7 @@ Simplify the code from previous exercise. Use a single for loop and a single CSS
 - [Descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator)
 - [`:nth-child()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)
 
-<details>
+<Details>
   <summary>Solution</summary>
 
   ```py
@@ -266,7 +267,7 @@ Simplify the code from previous exercise. Use a single for loop and a single CSS
       print(name_cell.select_one("a").text)
   ```
 
-</details>
+</Details>
 
 ### Scrape F1 news
 
@@ -285,7 +286,7 @@ Max Verstappen wins Canadian Grand Prix: F1 – as it happened
 ...
 ```
 
-<details>
+<Details>
   <summary>Solution</summary>
 
   ```py
@@ -303,4 +304,4 @@ Max Verstappen wins Canadian Grand Prix: F1 – as it happened
       print(title.text)
   ```
 
-</details>
+</Details>

sources/academy/webscraping/scraping_basics_python/07_extracting_data.md

@@ -7,6 +7,7 @@ slug: /scraping-basics-python/extracting-data
 ---
 
 import Exercises from './_exercises.mdx';
+import Details from '@theme/Details';
 
 **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.**
 
@@ -224,7 +225,7 @@ Denon AH-C720 In-Ear Headphones 236
 ...
 ```
 
-<details>
+<Details>
   <summary>Solution</summary>
 
   ```py
@@ -259,13 +260,13 @@ Denon AH-C720 In-Ear Headphones 236
       print(title, units)
   ```
 
-</details>
+</Details>
 
 ### Use regular expressions
 
 Simplify the code from previous exercise. Use [regular expressions](https://docs.python.org/3/library/re.html) to parse the number of units. You can match digits using a range like `[0-9]` or by a special sequence `\d`. To match more characters of the same type you can use `+`.
 
-<details>
+<Details>
   <summary>Solution</summary>
 
   ```py
@@ -292,7 +293,7 @@ Simplify the code from previous exercise. Use [regular expressions](https://docs
       print(title, units)
   ```
 
-</details>
+</Details>
 
 ### Scrape publish dates of F1 news
 
@@ -318,7 +319,7 @@ Hints:
 - In Python you can create `datetime` objects using `datetime.fromisoformat()`, a [built-in method for parsing ISO 8601 strings](https://docs.python.org/3/library/datetime.html#datetime.datetime.fromisoformat).
 - To get just the date part, you can call `.date()` on any `datetime` object.
 
-<details>
+<Details>
   <summary>Solution</summary>
 
   ```py
@@ -343,4 +344,4 @@ Hints:
       print(title, published_on)
   ```
 
-</details>
+</Details>