Add title to campaign page (#989)

.github/workflows/check-pr.yml

@@ -80,6 +80,3 @@ jobs:
           service_account_credentials: ${{ secrets.MONDOO_SECRET }}
           scan_type: k8s
           path: prod-manifests.yaml
-
-
-

.github/workflows/release.yml

@@ -40,7 +40,6 @@ jobs:
           scan_type: docker_image
           docker_image_name: ghcr.io/podkrepi-bg/frontend/maintenance:master
 
-
   build-frontend-image:
     name: Build frontent container image
     runs-on: ubuntu-latest
@@ -115,7 +114,7 @@ jobs:
   release-dev:
     name: Release to dev
     runs-on: ubuntu-latest
-    needs: [build-frontend-image,build-maintenance-image,scan-manifests]
+    needs: [build-frontend-image, build-maintenance-image, scan-manifests]
     environment:
       name: dev
       url: https://dev.podkrepi.bg
@@ -197,11 +196,11 @@ jobs:
         if: always()
         with:
           webhook: ${{ secrets.DISCORD_WEBHOOK }}
-          title: "deploy"
+          title: 'deploy'
           url: https://podkrepi.bg/
           description: Version ${{ env.VERSION }} of the website is deployed. The list of changes can be found at https://github.com/podkrepi-bg/frontend/releases/tag/${{ env.VERSION }}
           color: 0x26A641
 
       - name: Delete kubeconfig
         if: always()
-        run: rm config.yaml
+        run: rm config.yaml

README.md

@@ -62,7 +62,9 @@ Follow the instructions at <https://github.com/podkrepi-bg/api/blob/master/TESTI
 ## Contributors ✨
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-52-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Please check [contributors guide](https://github.com/podkrepi-bg/frontend/blob/master/CONTRIBUTING.md) for:

src/components/auth/profile/ProfilePage.tsx

@@ -70,7 +70,7 @@ export default function ProfilePage() {
   const { Component: SelectedTab } = tab
 
   return (
-    <Layout profilePage={true}>
+    <Layout profilePage>
       <Box sx={{ width: '100%' }}>
         <Box
           sx={{

src/components/campaigns/ViewCampaignPage.tsx

@@ -49,7 +49,11 @@ export default function ViewCampaignPage({ slug }: Props) {
   const ogImageUrl = campaignListPictureUrl(campaign)
 
   return (
-    <Layout maxWidth={false} ogImage={ogImageUrl} metaDescription={campaign.title}>
+    <Layout
+      maxWidth={false}
+      ogImage={ogImageUrl}
+      metaTitle={campaign.title}
+      metaDescription={campaign.title}>
       <Grid container component="section" maxWidth="lg" justifyContent="center" m="0 auto">
         <CampaignDetails campaign={campaign} />
         {mobile || small ? (

src/components/faq/contents/common.tsx

@@ -17,8 +17,8 @@ export const COMMON_QUESTIONS: ContentType[] = [
           изисквани от трети лица - финансови и други външни организации или институции.
         </p>
         <p>
-          Сдружение Подкрепи.бг работи почти изцяло с доброволци, като разчита и на временни
-          платени дейности за придвижване на определени цели.
+          Сдружение Подкрепи.бг работи почти изцяло с доброволци, като разчита и на временни платени
+          дейности за придвижване на определени цели.
         </p>
         <p>
           Разходите на Организацията се покриват изцяло от индивидуални и корпоративни дарения,
@@ -100,8 +100,8 @@ export const COMMON_QUESTIONS: ContentType[] = [
         <p>
           За допълнителна прозрачност, Подкрепи.бг прилага и практиката на Отворени данни, като
           предоставя отчети за основните неконфиденциални данни от работата на системата. Това са
-          например постъпилите дарения по кампаниите и трансакциите с тях, без да се разкриват
-          лични данни.
+          например постъпилите дарения по кампаниите и трансакциите с тях, без да се разкриват лични
+          данни.
         </p>
       </ContentTypography>
     ),
@@ -134,8 +134,8 @@ export const COMMON_QUESTIONS: ContentType[] = [
         <p>
           В началото, като всеки стартиращ проект, имахме доста “чуденки” относно позициониране,
           избор на технологии за платформата и партньорски организации. Също така, въпреки засиления
-          интерес от доброволци в началото, реалният брой на активно помагащи е малък и
-          желанието, не съответстваше напълно на отделеното време.
+          интерес от доброволци в началото, реалният брой на активно помагащи е малък и желанието,
+          не съответстваше напълно на отделеното време.
         </p>
         <p>
           Постарахме се да започнем дейността си максимално подготвени за нуждите на бенефициентите

src/components/faq/contents/potential-scams.tsx

@@ -156,8 +156,8 @@ export const POTENTION_SCAM_QUESTIONS: ContentType[] = [
     header: 'Кой ще носи отговорност, ако стане някаква злоупотреба с даренията?',
     content: (
       <ContentTypography>
-        При наличие на сигнал за злоупотреба, Подкрепи.бг ще съдейства по всички начини, позволени от Закона за защита на правата и начините за
-        обезщетение на съответните засегнати лица.
+        При наличие на сигнал за злоупотреба, Подкрепи.бг ще съдейства по всички начини, позволени
+        от Закона за защита на правата и начините за обезщетение на съответните засегнати лица.
       </ContentTypography>
     ),
   },

src/components/layout/Layout.tsx

@@ -12,6 +12,13 @@ import AppNavBar from './AppNavBar'
 import MobileNav from './nav/MobileNav'
 import ImproveThisPageTag from './ImproveThisPageTag'
 
+const createPageTitle = (suffix: string, title?: string) => {
+  if (title) {
+    return `${title} | ${suffix}`
+  }
+  return suffix
+}
+
 type LayoutProps = React.PropsWithChildren<
   ContainerProps & {
     title?: string
@@ -21,6 +28,7 @@ type LayoutProps = React.PropsWithChildren<
     hideFooter?: boolean
     disableOffset?: boolean
     boxProps?: BoxProps
+    metaTitle?: string
     metaDescription?: string
     profilePage?: boolean
   }
@@ -36,15 +44,18 @@ export default function Layout({
   figmaUrl,
   hideFooter = false,
   boxProps,
+  metaTitle,
   metaDescription,
   profilePage = false,
   ...containerProps
 }: LayoutProps) {
   const { t } = useTranslation()
   const [mobileOpen, setMobileOpen] = useState(false)
   const navMenuToggle = () => setMobileOpen(!mobileOpen)
-  const suffix = t('meta.title')
-  const metaTitle = useMemo(() => (title ? `${title} | ${suffix}` : suffix), [title, suffix])
+  const pageTitle = useMemo(
+    () => createPageTitle(t('meta.title'), metaTitle ?? title),
+    [metaTitle, title],
+  )
 
   return (
     <Container
@@ -56,11 +67,11 @@ export default function Layout({
         maxWidth={maxWidth}
         {...containerProps}>
         <Head>
-          <title>{metaTitle}</title>
-          <meta name="description" content={metaDescription ?? metaTitle} />
-          <meta name="og:description" content={metaDescription ?? metaTitle} />
+          <title>{pageTitle}</title>
+          <meta name="description" content={metaDescription ?? pageTitle} />
+          <meta name="og:description" content={metaDescription ?? pageTitle} />
           <meta property="og:type" content="article" />
-          <meta property="og:locale" content="bg_BG" />{' '}
+          <meta property="og:locale" content="bg_BG" />
           {/* TODO: think of how to make campaign level localization */}
           <meta key="og:title" property="og:title" content={title} />
           <meta key="og:image" property="og:image" content={ogImage ?? defaultOgImage} />
@@ -71,15 +82,7 @@ export default function Layout({
           <AppNavBar navMenuToggle={navMenuToggle} />
           <MobileNav mobileOpen={mobileOpen} setMobileOpen={setMobileOpen} />
           {!disableOffset && (
-            <Box
-              sx={(theme) => ({
-                ...theme.mixins.toolbar,
-                marginBottom: theme.spacing(6),
-                [theme.breakpoints.down('lg')]: {
-                  marginBottom: theme.spacing(0),
-                },
-              })}
-            />
+            <Box sx={(theme) => ({ ...theme.mixins.toolbar, mb: { xs: 0, md: 3, lg: 6 } })} />
           )}
           {title && !disableOffset && (
             <Typography paragraph variant="h2" component="h1" align="center" sx={{ p: 4 }}>