#136 create custom page and use it

src/components/shared/CustomPage.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+
+import { useScrollUp } from '../../Hooks/useScrollUp';
+import { Layout } from './Layout/Layout';
+
+export const CustomPage = (props: PropsWithChildren<unknown>): JSX.Element => {
+    const { children } = props;
+
+    useScrollUp();
+
+    return <Layout>{children}</Layout>;
+};

src/components/shared/MarkdownPage.tsx

@@ -1,5 +1,6 @@
 import * as config from '../../../environment.json';
 import { useMarkdown } from '../../Hooks/useMarkdown';
+import { useScrollUp } from '../../Hooks/useScrollUp';
 import { Layout } from './Layout/Layout';
 import { LoadingSpinner } from './LoadingSpinner/LoadingSpinner';
 import { MarkdownRenderer } from './MarkdownRenderer';
@@ -12,6 +13,7 @@ interface IMarkdownPage {
 export const MarkdownPage = (props: IMarkdownPage): JSX.Element => {
     const { filePath } = props;
 
+    useScrollUp();
     const { data, isLoading, isError } = useMarkdown({ filePath });
 
     if (isError) {

src/pages/GettingStarted/NeuralNetworksQuickstart/NeuralNetworksQuickstart.tsx

@@ -1,12 +1,12 @@
 import './styles.css';
 
-import { Layout } from '../../../components/shared/Layout/Layout';
+import { CustomPage } from '../../../components/shared/CustomPage';
 import { SyntaxHighlighter } from '../../../components/shared/SyntaxHighlighter';
 import { CustomTab } from '../../../components/shared/Tab/CustomTab';
 
 export const NeuralNetworksQuickstart = () => {
     return (
-        <Layout>
+        <CustomPage>
             <h1 className="nnq__headline">Neural Networks : Quickstart</h1>
             <p className="nnq__description">
                 Let&apos;s build a simple neural network !
@@ -352,6 +352,6 @@ export const NeuralNetworksQuickstart = () => {
                     },
                 ]}
             />
-        </Layout>
+        </CustomPage>
     );
 };

src/pages/Home/Home.tsx

@@ -7,10 +7,9 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import { Layout } from '../../components/shared/Layout/Layout';
+import { CustomPage } from '../../components/shared/CustomPage';
 import { SyntaxHighlighter } from '../../components/shared/SyntaxHighlighter';
 import { CustomTab } from '../../components/shared/Tab/CustomTab';
-import { useScrollUp } from '../../Hooks/useScrollUp';
 
 const groovySnippet = {
     content: (
@@ -43,10 +42,8 @@ const KotlinSnippet = {
 };
 
 export const Home = (): JSX.Element => {
-    useScrollUp();
-
     return (
-        <Layout>
+        <CustomPage>
             <h1 className="home__headline">Neureka</h1>
             <p className="home__description">
                 A lightweight open source platform independent nd-array library
@@ -200,6 +197,6 @@ export const Home = (): JSX.Element => {
                 the performance of Neureka as well as improve Machine Learning
                 on the JVM in general.
             </p>
-        </Layout>
+        </CustomPage>
     );
 };