Some seo improvements (codesandbox#3839)

* add some SEO

* add rel

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx

@@ -78,7 +78,15 @@ export const Comment = React.memo<{
           ? comment.references[0].metadata.path
           : 'General'}
       </Link>
-      <Stack align="flex-start" justify="space-between" marginBottom={4}>
+      <Stack
+        as="article"
+        itemprop="comment"
+        itemscope=""
+        itemtype="http://schema.org/Comment"
+        align="flex-start"
+        justify="space-between"
+        marginBottom={4}
+      >
         <AvatarBlock comment={comment} />
         <Stack align="center">
           {comment.isResolved && (
@@ -129,10 +137,10 @@ export const Comment = React.memo<{
           borderColor: 'sideBar.border',
         })}
       >
-        <Text block css={truncateText} marginBottom={2}>
+        <Text itemprop="text" block css={truncateText} marginBottom={2}>
           {comment.content}
         </Text>
-        <Text variant="muted" size={2}>
+        <Text variant="muted" size={2} itemprop="commentCount">
           {getRepliesString(comment.comments.length)}
         </Text>
       </Element>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Markdown/Link.tsx

@@ -30,7 +30,7 @@ export const LinkElement = ({ href, children, ...props }) => {
 
   if (!href.includes('codesandbox')) {
     return (
-      <Link target="_blank" rel="noopener noreferrer" {...props}>
+      <Link target="_blank" rel="noopener noreferrer ugc" {...props}>
         {children}
       </Link>
     );

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Reply.tsx

@@ -29,7 +29,16 @@ export const Reply = ({ reply }: ReplyProps) => {
         },
       }}
     >
-      <Element key={id} marginLeft={4} marginRight={2} paddingTop={6}>
+      <Element
+        as="article"
+        itemprop="comment"
+        itemscope=""
+        itemtype="http://schema.org/Comment"
+        key={id}
+        marginLeft={4}
+        marginRight={2}
+        paddingTop={6}
+      >
         <Stack align="flex-start" justify="space-between" marginBottom={4}>
           <AvatarBlock comment={reply} />
           {state.user.id === user.id && (
@@ -65,7 +74,9 @@ export const Reply = ({ reply }: ReplyProps) => {
         })}
       >
         {!editing ? (
-          <Markdown source={content} />
+          <Element itemprop="text">
+            <Markdown source={content} />
+          </Element>
         ) : (
           <EditComment
             initialValue={reply.content}

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx

@@ -188,8 +188,14 @@ const DialogAddComment: React.FC<{
           marginRight={2}
         >
           <Stack gap={2} align="center">
-            <Avatar user={comment.user} />
-            <Text size={3} weight="bold" variant="body">
+            <Element
+              itemprop="author"
+              itemscope=""
+              itemtype="http://schema.org/Person"
+            >
+              <Avatar user={comment.user} />
+            </Element>
+            <Text size={3} weight="bold" variant="body" itemprop="name">
               {comment.user.username}
             </Text>
           </Stack>
@@ -347,7 +353,9 @@ const CommentBody = ({ comment, editing, setEditing, hasReplies }) => {
         })}
       >
         {!editing ? (
-          <Markdown source={comment.content} />
+          <Element itemprop="text">
+            <Markdown source={comment.content} />
+          </Element>
         ) : (
           <EditComment
             initialValue={comment.content}

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/AvatarBlock.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Stack, Text } from '@codesandbox/components';
+import { Avatar, Stack, Text, Element } from '@codesandbox/components';
 import { CommentFragment } from 'app/graphql/types';
 import { formatDistance } from 'date-fns';
 import { zonedTimeToUtc } from 'date-fns-tz';
@@ -8,12 +8,19 @@ export const AvatarBlock: React.FC<{ comment: CommentFragment }> = ({
   comment,
 }) => (
   <Stack gap={2} align="center">
-    <Avatar user={comment.user} />
+    <Element itemprop="author" itemscope="" itemtype="http://schema.org/Person">
+      <Avatar user={comment.user} />
+    </Element>
     <Stack direction="vertical" justify="center" gap={1}>
-      <Text size={3} weight="bold" variant="body">
+      <Text itemprop="name" size={3} weight="bold" variant="body">
         {comment.user.username}
       </Text>
-      <Text size={2} variant="muted">
+      <Text
+        size={2}
+        variant="muted"
+        itemprop="dateCreated"
+        datetime={comment.insertedAt.toString()}
+      >
         {formatDistance(
           zonedTimeToUtc(comment.insertedAt, 'Etc/UTC'),
           new Date(),

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx

@@ -133,6 +133,7 @@ export const MultiComment = ({ x, y, ids }: MultiCommentProps) => {
                     size={2}
                     weight="bold"
                     paddingRight={2}
+                    itemprop="name"
                     css={css({
                       color: 'sideBar.foreground',
                     })}

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx

@@ -110,6 +110,9 @@ export const Comments: React.FC = () => {
 
         {currentComments.length ? (
           <List
+            itemprop="mainEntity"
+            itemscope=""
+            itemtype="http://schema.org/Conversation"
             ref={scrollRef}
             marginTop={4}
             css={{

packages/components/src/components/Element/index.tsx

@@ -16,6 +16,9 @@ export interface IElementProps {
   paddingTop?: number;
   paddingLeft?: number;
   paddingRight?: number;
+  itemprop?: string;
+  itemscope?: string;
+  itemtype?: string;
   css?: Object;
 }
 

packages/components/src/components/List/index.tsx

@@ -3,6 +3,13 @@ import css from '@styled-system/css';
 import { Element } from '../Element';
 import { Stack } from '../Stack';
 
+type ListActionProps = {
+  disabled?: boolean;
+  itemprop?: string;
+  itemscope?: string;
+  itemtype?: string;
+};
+
 export const List = styled(Element).attrs({ as: 'ul' })(
   css({
     listStyle: 'none',
@@ -22,17 +29,16 @@ export const ListItem = styled(Stack).attrs({
   })
 );
 
-export const ListAction = styled(ListItem)<{ disabled?: boolean }>(
-  ({ disabled }) =>
-    css({
-      ':hover, &[aria-selected="true"]': {
-        cursor: !disabled ? 'pointer' : 'disabled',
-        color: !disabled ? 'list.hoverForeground' : 'inherit',
-        backgroundColor: !disabled ? 'list.hoverBackground' : 'inherit',
-      },
-      ':focus-within': {
-        color: !disabled ? 'list.hoverForeground' : 'inherit',
-        backgroundColor: !disabled ? 'list.hoverBackground' : 'inherit',
-      },
-    })
+export const ListAction = styled(ListItem)<ListActionProps>(({ disabled }) =>
+  css({
+    ':hover, &[aria-selected="true"]': {
+      cursor: !disabled ? 'pointer' : 'disabled',
+      color: !disabled ? 'list.hoverForeground' : 'inherit',
+      backgroundColor: !disabled ? 'list.hoverBackground' : 'inherit',
+    },
+    ':focus-within': {
+      color: !disabled ? 'list.hoverForeground' : 'inherit',
+      backgroundColor: !disabled ? 'list.hoverBackground' : 'inherit',
+    },
+  })
 );

packages/components/src/components/Text/index.tsx

@@ -21,6 +21,8 @@ export interface ITextProps extends React.HTMLAttributes<HTMLSpanElement> {
   block?: boolean;
   maxWidth?: number | string;
   variant?: 'body' | 'muted' | 'danger';
+  itemprop?: string;
+  datetime?: string;
 }
 
 export const Text = styled(Element).attrs({ as: 'span' })<ITextProps>(