refactor(pages): refine Article pages

* use rehype to update code blocks class names
* fix widget heading level (after a level 1 it should always be a level
2 and not 3)
* replace Spinner with LoadingPage and LoadingPageComments components to
keep layout coherent
* refactor useArticle and useComments hooks
* fix URLs in JSON LD schema
* add Cypress tests

4 files changed, 32 insertions, 87 deletions

diff --git a/src/styles/pages/article.module.scss b/src/styles/pages/article.module.scss
deleted file mode 100644
index 7aac5a7..0000000
--- a/src/styles/pages/article.module.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-@use "../abstracts/functions" as fun;
-@use "../abstracts/mixins" as mix;
-@use "../abstracts/placeholders";
-@use "partials/article-headings";
-@use "partials/article-links";
-@use "partials/article-lists";
-@use "partials/article-media";
-@use "partials/article-wp-blocks";
-
-.btn {
-  margin-right: var(--spacing-2xs);
-  padding: var(--spacing-2xs) var(--spacing-xs);
-
-  img {
-    max-width: fun.convert-px(22);
-  }
-}
-
-.body {
-  :global {
-    @include article-headings.styles;
-    @include article-links.styles;
-    @include article-lists.styles;
-    @include article-media.styles;
-    @include article-wp-blocks.styles;
-    @extend %prism;
-  }
-}
-
-:global([data-theme="light"]) {
-  :local {
-    .body {
-      :global {
-        a {
-          &.download {
-            @extend %light-download-link;
-          }
-
-          &.external {
-            @extend %light-external-link;
-          }
-        }
-      }
-    }
-  }
-}
-
-:global([data-theme="dark"]) {
-  :local {
-    .body {
-      :global {
-        a {
-          &.download {
-            @extend %dark-download-link;
-          }
-
-          &.external {
-            @extend %dark-external-link;
-          }
-        }
-      }
-    }
-  }
-}
-
-.widget {
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      ul {
-        width: min-content;
-      }
-    }
-  }
-}
diff --git a/src/styles/pages/blog.module.scss b/src/styles/pages/blog.module.scss
index e099088..aebf263 100644
--- a/src/styles/pages/blog.module.scss
+++ b/src/styles/pages/blog.module.scss
@@ -1,7 +1,11 @@
 @use "../abstracts/functions" as fun;
 @use "../abstracts/mixins" as mix;
 @use "../abstracts/placeholders";
+@use "partials/article-headings";
 @use "partials/article-links";
+@use "partials/article-lists";
+@use "partials/article-media";
+@use "partials/article-wp-blocks";
 
 .list {
   @include mix.media("screen") {
@@ -14,20 +18,29 @@
   }
 }
 
+.sharing-widget {
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      ul {
+        width: min-content;
+      }
+    }
+  }
+}
+
 .logo {
   max-width: fun.convert-px(50);
   margin: 0 var(--spacing-xs) 0 0;
 }
 
-:where(.body) {
+.body {
   :global {
+    @include article-headings.styles;
     @include article-links.styles;
-
-    h2 {
-      @extend %h2;
-
-      margin-block-end: var(--spacing-sm);
-    }
+    @include article-lists.styles;
+    @include article-media.styles;
+    @include article-wp-blocks.styles;
+    @extend %prism;
   }
 }
 
diff --git a/src/styles/pages/partials/_article-headings.scss b/src/styles/pages/partials/_article-headings.scss
index 7a273e4..234c426 100644
--- a/src/styles/pages/partials/_article-headings.scss
+++ b/src/styles/pages/partials/_article-headings.scss
@@ -31,8 +31,10 @@
   h4,
   h5,
   h6 {
-    &:not(:first-child) {
-      margin-block: var(--spacing-sm);
+    margin-block: var(--spacing-sm);
+
+    &:first-of-type {
+      margin-block-start: var(--spacing-md);
     }
   }
 }
diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss
index f23be05..e4e89ec 100644
--- a/src/styles/pages/partials/_article-wp-blocks.scss
+++ b/src/styles/pages/partials/_article-wp-blocks.scss
@@ -75,7 +75,7 @@
     display: flex;
     flex-flow: column;
     width: fit-content;
-    margin: 0 auto;
+    margin: var(--spacing-sm) auto;
     position: relative;
     text-align: center;
 
@@ -172,9 +172,13 @@
       }
     }
 
-    .wp-block-image img {
-      height: 100%;
-      object-fit: cover;
+    .wp-block-image {
+      margin: 0;
+
+      img {
+        height: 100%;
+        object-fit: cover;
+      }
     }
   }
 }