feat: added theme favicon

index.html

@@ -20,7 +20,7 @@
       content="A series of tools for the Precious Plastic community to collaborate around the world. Connect, share and meet each other to tackle plastic waste."
     />
     <meta property="og:image" content="./social-image.jpg" />
-    <meta property="og:url" content="https://community.preciousplastic.com" />
+    <!-- <meta property="og:url" content="https://community.preciousplastic.com" /> -->
     <meta name="twitter:title" content="Community Platform" />
     <meta
       name="twitter:description"

packages/themes/src/fixing-fashion/index.ts

@@ -9,6 +9,7 @@ import type { PlatformTheme } from '../types'
 export const Theme: PlatformTheme = {
   id: 'fixing-fashion',
   siteName: 'Fixing Fashion',
+  description: '',
   logo,
   favicon,
   badge,

packages/themes/src/precious-plastic/index.ts

@@ -8,6 +8,8 @@ import type { PlatformTheme } from '../types'
 export const Theme: PlatformTheme = {
   id: 'precious-plastic',
   siteName: 'Precious Plastic',
+  description:
+    'A series of tools for the Precious Plastic community to collaborate around the world. Connect, share and meet each other to tackle plastic waste.',
   logo,
   favicon,
   badge,

packages/themes/src/project-kamp/index.ts

@@ -9,6 +9,7 @@ import type { PlatformTheme } from '../types'
 export const Theme: PlatformTheme = {
   id: 'project-kamp',
   siteName: 'Project Kamp',
+  description: '',
   logo,
   favicon,
   badge,

packages/themes/src/types/index.ts

@@ -3,6 +3,7 @@ import type { ProfileTypeName } from 'oa-shared'
 export interface PlatformTheme {
   id: string
   siteName: string
+  description: string
   logo: string
   favicon: string
   badge: string

src/config/config.ts

@@ -22,12 +22,7 @@ import type { IFirebaseConfig, ISentryConfig, siteVariants } from './types'
  * @returns string
  */
 const _c = (property: ConfigurationOption, fallbackValue?: string): string => {
-  return (
-    import.meta.env?.[property] ||
-    process.env?.[property] ||
-    fallbackValue ||
-    ''
-  )
+  return import.meta.env?.[property] || fallbackValue || ''
 }
 
 export const getConfigurationOption = _c

src/pages/Howto/Content/HowtoList/HowtoList.tsx

@@ -19,7 +19,7 @@ import type { IHowto } from 'src/models'
 import type { HowtoSortOption } from './HowtoSortOptions'
 
 export const HowtoList = observer(() => {
-  const siteName = import.meta.env.VITE_SITE_NAME || process.env.VITE_SITE_NAME
+  const siteName = import.meta.env.VITE_SITE_NAME
 
   const { userStore } = useCommonStores().stores
   const [isFetching, setIsFetching] = useState<boolean>(true)
@@ -109,7 +109,7 @@ export const HowtoList = observer(() => {
             fontSize: 5,
           }}
         >
-          {process.env.VITE_HOWTOS_HEADING}
+          {import.meta.env.VITE_HOWTOS_HEADING}
         </Heading>
       </Flex>
       <Flex

src/root.tsx

@@ -16,6 +16,8 @@ import {
 
 import { ClientStyleContext, ServerStyleContext } from './styles/context'
 
+import type { LinksFunction, MetaFunction } from '@remix-run/node'
+
 interface DocumentProps {
   children: React.ReactNode
 }
@@ -79,34 +81,6 @@ const Document = withEmotionCache(
 )
 
 const getEnvironmentTheme = () => {
-  console.log({
-    VITE_ACADEMY_RESOURCE: import.meta.env.VITE_ACADEMY_RESOURCE,
-    VITE_PROFILE_GUIDELINES_URL: import.meta.env.VITE_PROFILE_GUIDELINES_URL,
-    VITE_SITE_NAME: import.meta.env.VITE_SITE_NAME,
-    VITE_THEME: import.meta.env.VITE_THEME,
-    VITE_DONATIONS_BODY: import.meta.env.VITE_DONATIONS_BODY,
-    VITE_DONATIONS_IFRAME_SRC: import.meta.env.VITE_DONATIONS_IFRAME_SRC,
-    VITE_DONATIONS_IMAGE_URL: import.meta.env.VITE_DONATIONS_IMAGE_URL,
-    VITE_HOWTOS_HEADING: import.meta.env.VITE_HOWTOS_HEADING,
-    VITE_COMMUNITY_PROGRAM_URL: import.meta.env.VITE_COMMUNITY_PROGRAM_URL,
-    VITE_QUESTIONS_GUIDELINES_URL: import.meta.env
-      .VITE_QUESTIONS_GUIDELINES_URL,
-    VITE_BRANCH: import.meta.env.VITE_BRANCH,
-    VITE_CDN_URL: import.meta.env.VITE_CDN_URL,
-    VITE_FIREBASE_API_KEY: import.meta.env.VITE_FIREBASE_API_KEY,
-    VITE_FIREBASE_AUTH_DOMAIN: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
-    VITE_FIREBASE_DATABASE_URL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
-    VITE_FIREBASE_MESSAGING_SENDER_ID: import.meta.env
-      .VITE_FIREBASE_MESSAGING_SENDER_ID,
-    VITE_FIREBASE_PROJECT_ID: import.meta.env.VITE_FIREBASE_PROJECT_ID,
-    VITE_FIREBASE_STORAGE_BUCKET: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
-    VITE_SENTRY_DSN: import.meta.env.VITE_SENTRY_DSN,
-    VITE_GA_TRACKING_ID: import.meta.env.VITE_GA_TRACKING_ID,
-    VITE_PATREON_CLIENT_ID: import.meta.env.VITE_PATREON_CLIENT_ID,
-    VITE_PLATFORM_THEME: import.meta.env.VITE_PLATFORM_THEME,
-    VITE_PROJECT_VERSION: import.meta.env.VITE_PROJECT_VERSION,
-    VITE_SUPPORTED_MODULES: import.meta.env.VITE_SUPPORTED_MODULES,
-  })
   switch (import.meta.env.VITE_THEME) {
     case 'project-kamp':
       return projectKampTheme
@@ -118,6 +92,47 @@ const getEnvironmentTheme = () => {
   }
 }
 
+export const links: LinksFunction = () => {
+  const theme = getEnvironmentTheme()
+  return [
+    {
+      rel: 'icon',
+      href: theme.favicon,
+      type: 'image/x-icon',
+    },
+  ]
+}
+
+export const meta: MetaFunction = () => {
+  const theme = getEnvironmentTheme()
+
+  return [
+    {
+      title: theme.siteName,
+    },
+    {
+      property: 'og:title',
+      content: theme.siteName,
+    },
+    {
+      name: 'twitter:title',
+      content: theme.siteName,
+    },
+    {
+      name: 'description',
+      content: theme.description,
+    },
+    {
+      name: 'og:description',
+      content: theme.description,
+    },
+    {
+      name: 'twitter:description',
+      content: theme.description,
+    },
+  ]
+}
+
 export default function Root() {
   return (
     <Document>