feat: reduce with of custom pages to 1024px for easier readability

research-software-directory · Nov 11, 2024 · c9c7def · c9c7def
1 parent 2da89e3
commit c9c7def
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 56 deletions.
diff --git a/frontend/components/layout/MarkdownPage.tsx b/frontend/components/layout/MarkdownPage.tsx
diff --git a/frontend/pages/cookies.tsx b/frontend/pages/cookies.tsx
@@ -1,58 +1,78 @@
 // SPDX-FileCopyrightText: 2022 Dusan Mijatovic (dv4all)
 // SPDX-FileCopyrightText: 2022 Matthias Rüster (GFZ) <[email protected]>
 // SPDX-FileCopyrightText: 2022 dv4all
+// SPDX-FileCopyrightText: 2024 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2024 Netherlands eScience Center
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import Head from 'next/head'
 import {GetServerSidePropsContext} from 'next/types'
 
 import {app} from '~/config/app'
-import DefaultLayout from '~/components/layout/DefaultLayout'
+import AppHeader from '~/components/AppHeader'
+import AppFooter from '~/components/AppFooter'
 import PageTitle from '~/components/layout/PageTitle'
 import MatomoTracking, {MatomoTrackingProps} from '~/components/cookies/MatomoTracking'
 import {getMatomoConsent} from '~/components/cookies/nodeCookies'
+import PageMeta from '~/components/seo/PageMeta'
+import OgMetaTags from '~/components/seo/OgMetaTags'
+import PageBackground from '~/components/layout/PageBackground'
+import MainContent from '~/components/layout/MainContent'
 
 const pageTitle = `Cookies | ${app.title}`
+const description = `
+  Cookies are small blocks of data created by our website and stored by your web browser on your computer.
+  Using cookies allows our website to store information between your visits. You have full control over
+  these cookies and can deactivate or restrict them by changing your web browser&apos;s cookie settings.
+  Any cookies already stored can be deleted at any time. This may limit the functionality of our website,
+  however.
+`
 
 export default function Cookies({matomoId,matomoConsent}: MatomoTrackingProps) {
+
   // console.group('Cookies')
   // console.log('matomoId...', matomoId)
   // console.log('matomoConsent...', matomoConsent)
   // console.groupEnd()
-  return (
-    <DefaultLayout>
-      <Head>
-        <title>{pageTitle}</title>
-      </Head>
 
-      <PageTitle title="Cookies" />
-
-      <p className="mb-4">
-        Cookies are small blocks of data created by our website and stored by your web browser on your computer.
-        Using cookies allows our website to store information between your visits. You have full control over
-        these cookies and can deactivate or restrict them by changing your web browser&apos;s cookie settings.
-        Any cookies already stored can be deleted at any time. This may limit the functionality of our website,
-        however.
-      </p>
+  return (
+    <>
+      {/* Page Head meta tags */}
+      <PageMeta
+        title={pageTitle}
+        description={description}
+      />
+      <OgMetaTags
+        title={pageTitle}
+        description={description}
+      />
+      <PageBackground>
+        <AppHeader/>
+        <MainContent className="lg:w-[64rem] lg:mx-auto lg:px-12 pb-12 bg-base-100">
+          <PageTitle title="Cookies" />
 
-      <h2 className="mb-4">Functional cookies</h2>
+          <p className="mb-4">
+            {description}
+          </p>
 
-      <p className="mb-8">
-        We use several functional cookies that are necessary for our website to function.
-        These are used to remember your privacy preferences and if you are logged in to the website. You can set your browser to block these cookies,
-        but some parts of the site will not work properly if you do so.
-      </p>
+          <h2 className="mb-4">Functional cookies</h2>
 
-      { /* Matomo specific section */ }
-      <MatomoTracking
-        matomoId={matomoId}
-        matomoConsent={matomoConsent}
-      />
+          <p className="mb-8">
+            We use several functional cookies that are necessary for our website to function.
+            These are used to remember your privacy preferences and if you are logged in to the website. You can set your browser to block these cookies,
+            but some parts of the site will not work properly if you do so.
+          </p>
 
-      <div className="py-8"></div>
+          { /* Matomo specific section */ }
+          <MatomoTracking
+            matomoId={matomoId}
+            matomoConsent={matomoConsent}
+          />
 
-    </DefaultLayout>
+        </MainContent>
+        <AppFooter/>
+      </PageBackground>
+    </>
   )
 }
 

diff --git a/frontend/pages/news/[date]/[slug]/index.tsx b/frontend/pages/news/[date]/[slug]/index.tsx
@@ -38,7 +38,7 @@ export default function NewsItemPage({newsItem}:{newsItem:NewsItem}) {
       <CanonicalUrl/>
       <PageBackground>
         <AppHeader />
-        <MainContent className="lg:w-[53rem] lg:mx-auto pb-12">
+        <MainContent className="lg:w-[64rem] lg:mx-auto pb-12">
           {/* BREADCRUMBS and button */}
           <NewsItemNav
             slug={newsItem.slug}

diff --git a/frontend/pages/page/[slug].tsx b/frontend/pages/page/[slug].tsx
@@ -1,27 +1,46 @@
 // SPDX-FileCopyrightText: 2022 - 2023 Dusan Mijatovic (dv4all)
 // SPDX-FileCopyrightText: 2022 - 2023 dv4all
+// SPDX-FileCopyrightText: 2024 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2024 Netherlands eScience Center
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import Head from 'next/head'
 import {GetServerSidePropsContext} from 'next'
 
 import {app} from '~/config/app'
 import {ssrMarkdownPage} from '~/components/admin/pages/useMarkdownPages'
 import AppHeader from '~/components/AppHeader'
 import AppFooter from '~/components/AppFooter'
-import MarkdownPage from '~/components/layout/MarkdownPage'
+import PageMeta from '~/components/seo/PageMeta'
+import OgMetaTags from '~/components/seo/OgMetaTags'
+import PageBackground from '~/components/layout/PageBackground'
+import MainContent from '~/components/layout/MainContent'
+import ReactMarkdownWithSettings from '~/components/layout/ReactMarkdownWithSettings'
 
 export default function PublicPage({title,markdown}: {title:string, markdown: string }) {
   const pageTitle=`${title} | ${app.title}`
+  const description = markdown.split('\n')[0] ?? ''
   return (
     <>
-      <Head>
-        <title>{pageTitle}</title>
-      </Head>
-      <AppHeader/>
-      <MarkdownPage markdown={markdown} />
-      <AppFooter/>
+      {/* Page Head meta tags */}
+      <PageMeta
+        title={pageTitle}
+        description={description}
+      />
+      <OgMetaTags
+        title={pageTitle}
+        description={description}
+      />
+      <PageBackground>
+        <AppHeader/>
+        <MainContent className="lg:w-[64rem] lg:mx-auto pb-12 bg-base-100">
+          <ReactMarkdownWithSettings
+            className='p-8'
+            markdown={markdown}
+          />
+        </MainContent>
+        <AppFooter/>
+      </PageBackground>
     </>
   )
 }