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

1 files changed, 34 insertions, 0 deletions

diff --git a/src/components/templates/page/loading-page-comments.tsx b/src/components/templates/page/loading-page-comments.tsx
new file mode 100644
index 0000000..9235dcb
--- /dev/null
+++ b/src/components/templates/page/loading-page-comments.tsx
@@ -0,0 +1,34 @@
+import {
+  forwardRef,
+  type ForwardRefRenderFunction,
+  type HTMLAttributes,
+} from 'react';
+import { useIntl } from 'react-intl';
+import { Spinner } from '../../atoms';
+import styles from './page.module.scss';
+
+export type LoadingPageCommentsProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children'
+>;
+
+const LoadingPageCommentsWithRef: ForwardRefRenderFunction<
+  HTMLDivElement,
+  LoadingPageCommentsProps
+> = ({ className = '', ...props }, ref) => {
+  const wrapperClass = `${styles.comments} ${className}`;
+  const intl = useIntl();
+  const loadingMsg = intl.formatMessage({
+    defaultMessage: 'The comments are loading...',
+    description: 'LoadingPageComments: loading message',
+    id: 'gYbxP4',
+  });
+
+  return (
+    <div {...props} className={wrapperClass} ref={ref}>
+      <Spinner className={styles.spinner}>{loadingMsg}</Spinner>
+    </div>
+  );
+};
+
+export const LoadingPageComments = forwardRef(LoadingPageCommentsWithRef);