Merge pull request #7582 from schrodingersket/feature/7503

7503: Added social media share links to share server.

Author: williamstein

src/packages/next/components/landing/social-media-share-links.tsx

@@ -0,0 +1,65 @@
+/*
+ *  This file is part of CoCalc: Copyright © 2024 Sagemath, Inc.
+ *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
+ */
+
+import { Space } from "antd";
+
+import { Icon } from "@cocalc/frontend/components/icon";
+import { COLORS } from "@cocalc/util/theme";
+import { CSS } from "components/misc";
+import A from "components/misc/A";
+
+interface SocialMediaShareLinksProps {
+  title: string;
+  url: string,
+  showText?: boolean;
+  standalone?: boolean; // default false
+}
+
+export function SocialMediaShareLinks(props: SocialMediaShareLinksProps) {
+  const {
+    title,
+    url,
+    standalone = false,
+    showText = false,
+  } = props;
+
+  const bottomLinkStyle: CSS = {
+    color: COLORS.ANTD_LINK_BLUE,
+    ...(standalone ? { fontSize: "125%", fontWeight: "bold" } : {}),
+  };
+
+  const srcLink = encodeURIComponent(url);
+
+  return (
+    <Space size="middle" direction="horizontal">
+      <A
+        key="tweet"
+        href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
+          title,
+        )}&url=${srcLink}&via=cocalc_com`}
+        style={{ color: COLORS.ANTD_LINK_BLUE, ...bottomLinkStyle }}
+      >
+        <Icon name="twitter" />
+        {showText ? " Tweet" : ""}
+      </A>
+      <A
+        key="facebook"
+        href={`https://www.facebook.com/sharer/sharer.php?u=${srcLink}`}
+        style={{ ...bottomLinkStyle }}
+      >
+        <Icon name="facebook-filled" />
+        {showText ? " Share" : ""}
+      </A>
+      <A
+        key="linkedin"
+        href={`https://www.linkedin.com/sharing/share-offsite/?url=${srcLink}`}
+        style={{ ...bottomLinkStyle }}
+      >
+        <Icon name="linkedin-filled" />
+        {showText ? " Share" : ""}
+      </A>
+    </Space>
+  );
+}

src/packages/next/components/news/news.tsx

@@ -28,6 +28,7 @@ import TimeAgo from "timeago-react";
 import { useDateStr } from "./useDateStr";
 import { useCustomize } from "lib/customize";
 import { KUCALC_COCALC_COM } from "@cocalc/util/db-schema/site-defaults";
+import { SocialMediaShareLinks } from "../landing/social-media-share-links";
 
 const STYLE: CSS = {
   borderColor: COLORS.GRAY_M,
@@ -129,36 +130,13 @@ export function News(props: Props) {
   }
 
   function shareLinks(text = false) {
-    const newsLink = encodeURIComponent(`${siteURL}${permalink}`);
     return (
-      <Space size="middle" direction="horizontal">
-        <A
-          key="tweet"
-          href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
-            title,
-          )}&url=${newsLink}&via=cocalc_com`}
-          style={{ color: COLORS.ANTD_LINK_BLUE, ...bottomLinkStyle }}
-        >
-          <Icon name="twitter" />
-          {text ? " Tweet" : ""}
-        </A>
-        <A
-          key="facebook"
-          href={`https://www.facebook.com/sharer/sharer.php?u=${newsLink}`}
-          style={{ ...bottomLinkStyle }}
-        >
-          <Icon name="facebook-filled" />
-          {text ? " Share" : ""}
-        </A>
-        <A
-          key="linkedin"
-          href={`https://www.linkedin.com/sharing/share-offsite/?url=${newsLink}`}
-          style={{ ...bottomLinkStyle }}
-        >
-          <Icon name="linkedin-filled" />
-          {text ? " Share" : ""}
-        </A>
-      </Space>
+      <SocialMediaShareLinks
+        title={title}
+        url={encodeURIComponent(`${siteURL}${permalink}`)}
+        showText={text}
+        standalone={standalone}
+      />
     );
   }
 

src/packages/next/components/path/path.tsx

@@ -39,7 +39,11 @@ import Avatar from "components/share/proxy/avatar";
 import A from "components/misc/A";
 import { join } from "path";
 
-interface Props {
+import {
+  SocialMediaShareLinks
+} from "components/landing/social-media-share-links";
+
+export interface PublicPathProps {
   id: string;
   path: string;
   url: string;
@@ -67,6 +71,9 @@ interface Props {
   // doesn't use the names. See https://github.com/sagemathinc/cocalc/issues/6115
   redirect?: string;
   jupyter_api: boolean;
+  created?: string; // ISO 8601 string
+  last_edited?: string; // ISO 8601 string
+  ogUrl?: string; // Open Graph URL for social media sharing
 }
 
 export default function PublicPath({
@@ -94,7 +101,8 @@ export default function PublicPath({
   projectAvatarImage,
   redirect,
   jupyter_api,
-}: Props) {
+  ogUrl,
+}: PublicPathProps) {
   useCounter(id);
   const [numStars, setNumStars] = useState<number>(stars);
 
@@ -335,8 +343,13 @@ export default function PublicPath({
             <AntdAvatar
               shape="square"
               size={160}
-              icon={<img src={projectAvatarImage} />}
-              style={{ float: "left", margin: "10px" }}
+              icon={(
+                <img
+                  src={projectAvatarImage}
+                  alt={`Avatar for ${projectTitle}.`}
+                />
+              )}
+              style={{ float: "left", margin: "20px" }}
             />
           ) : undefined
         }
@@ -439,6 +452,13 @@ export default function PublicPath({
             </>
           )}
         </div>
+        {ogUrl && (
+          <SocialMediaShareLinks
+            title={getTitle({ path, relativePath })}
+            url={ogUrl}
+            showText
+          />
+        )}
         <Divider />
         {error != null && (
           <Alert

src/packages/next/lib/share/get-public-path-info.ts

@@ -35,7 +35,7 @@ export default async function getPublicPathInfo({
   // Get the database entry that describes the public path
   const { rows } = await pool.query(
     `SELECT project_id, path, description, compute_image, license, disabled, unlisted,
-    authenticated, url, jupyter_api, redirect,
+    authenticated, url, jupyter_api, redirect, created, last_edited,
     counter::INT,
     (SELECT COUNT(*)::INT FROM public_path_stars WHERE public_path_id=id) AS stars,
     CASE WHEN site_license_id <> '' THEN TRUE ELSE FALSE END AS has_site_license
@@ -113,6 +113,8 @@ export default async function getPublicPathInfo({
       basePath,
       isStarred,
       ...details,
+      created: rows[0].created.toISOString(),
+      last_edited: rows[0].last_edited.toISOString(),
     };
   } catch (error) {
     return { id, ...rows[0], relativePath, isStarred, error: error.toString() };

src/packages/next/pages/share/public_paths/[...id].tsx

@@ -4,13 +4,36 @@
  */
 
 import { join } from "path";
+import NextHead from "next/head";
+
 import basePath from "lib/base-path";
 import getPublicPathInfo from "lib/share/get-public-path-info";
+import shareURL from "lib/share/share-url";
 import withCustomize from "lib/with-customize";
 import { getPublicPathNames } from "lib/names/public-path";
-import PublicPath from "components/path/path";
+import PublicPath, { PublicPathProps } from "components/path/path";
+
+import ogShareLogo from "public/logo/og-share-logo.png";
+
+export default (props: PublicPathProps) => (
+  <>
+    <PublicPath {...props} />
+    <NextHead>
+      <meta property="og:type" content="article"/>
+
+      <meta property="og:title" content={props.path}/>
+      <meta property="og:description" content={props.description}/>
+      <meta property="og:url" content={props.ogUrl}/>
+      <meta property="og:image" content={
+        props.customize.logoSquareURL ||
+        `${props.customize.siteURL}${ogShareLogo.src}`
+      }/>
 
-export default PublicPath;
+      <meta property="article:published_time" content={props.created}/>
+      <meta property="article:modified_time" content={props.last_edited}/>
+    </NextHead>
+  </>
+)
 
 export async function getServerSideProps(context) {
   const id = context.params.id[0];
@@ -34,12 +57,19 @@ export async function getServerSideProps(context) {
       }
       return { props: { redirect: location } };
     }
-    const props = await getPublicPathInfo({
+    const props: PublicPathProps = await getPublicPathInfo({
       id,
       relativePath,
       req: context.req,
     });
-    return await withCustomize({ context, props });
+
+    const customize = await withCustomize({ context, props });
+
+    // Add full URL for social media sharing
+    //
+    customize.props.ogUrl = `${customize.props.customize.siteURL}${shareURL(id, relativePath)}`;
+
+    return customize;
   } catch (_err) {
     console.log(_err);
     return { notFound: true };