Modified URLs and added button to share on LinkedIn (#5306)

- Removed the env variable and added the current URL in contributor's
page
- Added button to share on LinkedIn on contributor's profile
- Fixed absolute image URL for release API

---------

Co-authored-by: Ady Beraud <a.beraud96@gmail.com>

packages/twenty-website/.env.example

@@ -1,4 +1,2 @@
 GITHUB_TOKEN=your_github_token
 DATABASE_PG_URL=postgres://website:website@localhost:5432/website # only if using postgres
-NEXT_PUBLIC_HOST_URL=http://localhost:3000
-

packages/twenty-website/src/app/_components/contributors/ProfileSharing.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { IconDownload } from '@tabler/icons-react';
 
 import { CardContainer } from '@/app/_components/contributors/CardContainer';
-import { GithubIcon, XIcon } from '@/app/_components/ui/icons/SvgIcons';
+import { LinkedInIcon, XIcon } from '@/app/_components/ui/icons/SvgIcons';
 import { Theme } from '@/app/_components/ui/theme/theme';
 
 const Container = styled(CardContainer)`
@@ -48,15 +48,15 @@ const StyledButton = styled.a`
 `;
 
 interface ProfileProps {
-  userUrl: string;
   username: string;
 }
 
-export const ProfileSharing = ({ userUrl, username }: ProfileProps) => {
+export const ProfileSharing = ({ username }: ProfileProps) => {
-  const contributorUrl = `${process.env.NEXT_PUBLIC_HOST_URL}/contributors/${username}`;
+  const baseUrl = `${window.location.protocol}//${window.location.host}`;
+  const contributorUrl = `${baseUrl}/contributors/${username}`;
 
   const handleDownload = async () => {
-    const imageSrc = `${process.env.NEXT_PUBLIC_HOST_URL}/api/contributors/og-image/${username}`;
+    const imageSrc = `${baseUrl}/api/contributors/og-image/${username}`;
     try {
       const response = await fetch(imageSrc);
       const blob = await response.blob();
@@ -76,9 +76,12 @@ export const ProfileSharing = ({ userUrl, username }: ProfileProps) => {
 
   return (
     <Container>
-      <StyledButton href={userUrl} target="blank">
+      <StyledButton
-        <GithubIcon color="black" size="24px" />
+        href={`https://www.linkedin.com/sharing/share-offsite/?url=${contributorUrl}`}
-        Visit Profile
+        target="blank"
+      >
+        <LinkedInIcon color="black" size="24px" />
+        Share on LinkedIn
       </StyledButton>
       <StyledButton onClick={handleDownload}>
         <IconDownload /> Download Image

packages/twenty-website/src/app/api/releases/route.tsx

@@ -23,14 +23,24 @@ export async function GET() {
       latestGithubRelease.tagName,
     );
 
-    const formattedReleasesNotes = visibleReleasesNotes.map((releaseNote) => ({
+    const formattedReleasesNotes = visibleReleasesNotes.map((releaseNote) => {
-      ...releaseNote,
+      const updatedContent = releaseNote.content.replace(
-      publishedAt: getGithubReleaseDateFromReleaseNote(
+        /!\[(.*?)\]\((\/images\/.*?)\)/g,
-        githubReleases,
+        (match, altText, imagePath) => {
-        releaseNote.release,
+          return `![${altText}](https://twenty.com${imagePath})`;
-        releaseNote.date,
+        },
-      ),
+      );
-    }));
+
+      return {
+        ...releaseNote,
+        content: updatedContent,
+        publishedAt: getGithubReleaseDateFromReleaseNote(
+          githubReleases,
+          releaseNote.release,
+          releaseNote.date,
+        ),
+      };
+    });
 
     return Response.json(formattedReleasesNotes);
   } catch (error: any) {

packages/twenty-website/src/app/contributors/[slug]/page.tsx

@@ -58,10 +58,7 @@ export default async function ({ params }: { params: { slug: string } }) {
               rank={rank}
               activeDays={activeDays}
             />
-            <ProfileSharing
+            <ProfileSharing username={contributor.id} />
-              userUrl={contributor.url}
-              username={contributor.id}
-            />
             <ActivityLog data={pullRequestActivityArray} />
             <PullRequests
               list={