Merge pull request NotionX#493 from chuyun/master

Author: transitive-bullshit

packages/react-notion-x/src/components/eoi.tsx

@@ -5,6 +5,7 @@ import { Block } from 'notion-types'
 import { useNotionContext } from '../context'
 import SvgTypeGitHub from '../icons/type-github'
 import { cs, formatNotionDateTime } from '../utils'
+import { MentionPreviewCard } from './mention-preview-card'
 
 // External Object Instance
 export const EOI: React.FC<{
@@ -64,11 +65,13 @@ export const EOI: React.FC<{
         <div className='notion-external-title'>{title}</div>
 
         {(owner || lastUpdated) && (
-          <div className='notion-external-subtitle'>
-            {owner && <span>{owner}</span>}
-            {owner && lastUpdated && <span> • </span>}
-            {lastUpdated && <span>Updated {lastUpdated}</span>}
-          </div>
+          <MentionPreviewCard
+            title={title}
+            owner={owner}
+            lastUpdated={lastUpdated}
+            domain={domain}
+            externalImage={externalImage}
+          />
         )}
       </div>
     </components.Link>

packages/react-notion-x/src/components/mention-preview-card.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+function capitalizeFirstLetter(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+export const MentionPreviewCard: React.FC<{
+  owner?: string
+  lastUpdated?: string
+  title: string
+  domain: string
+  externalImage?: React.ReactNode
+}> = ({ owner, lastUpdated, externalImage, title, domain }) => {
+  return (
+    <div className='notion-external-subtitle'>
+      {externalImage && (
+        <div className='notion-preview-card-domain-warp'>
+          <div className='notion-preview-card-logo'>{externalImage}</div>
+          <div className='notion-preview-card-domain'>
+            {capitalizeFirstLetter(domain.split('.')[0])}
+          </div>
+        </div>
+      )}
+      <div className='notion-preview-card-title'>{title}</div>
+      {owner && (
+        <div className='notion-external-subtitle-item'>
+          <div className='notion-external-subtitle-item-name'>Owner</div>
+          <span className='notion-external-subtitle-item-desc'>{owner}</span>
+        </div>
+      )}
+      {lastUpdated && (
+        <div className='notion-external-subtitle-item'>
+          <div className='notion-external-subtitle-item-name'>Updated</div>
+          <span className='notion-external-subtitle-item-desc'>
+            {lastUpdated}
+          </span>
+        </div>
+      )}
+      {domain === 'github.com' && (
+        <div className='notion-preview-card-github-shields'>
+          <img
+            src={`https://img.shields.io/github/stars/${owner}/${title}?logo=github`}
+            alt=''
+          />
+          <img
+            src={`https://img.shields.io/github/last-commit/${owner}/${title}`}
+            alt=''
+          />
+        </div>
+      )}
+    </div>
+  )
+}

packages/react-notion-x/src/styles.css

@@ -2731,6 +2731,66 @@ svg.notion-page-icon {
 
 .notion-external-mention .notion-external-subtitle {
   display: none;
+  position: absolute;
+  top: 28px;
+  left: 0;
+  width: 260px;
+  background: var(--bg-color);
+  z-index: 999;
+  padding: 8px;
+  box-shadow: rgba(15, 15, 15, 0.1) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 2px 4px;
+}
+
+.notion-external-mention .notion-external-subtitle-item{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  line-height: 1.5;
+  padding: 4px 0;
+}
+
+.notion-external-mention .notion-external-subtitle-item-name{
+  flex: none;
+  width: 70px;
+  font-weight: 500;
+}
+
+.notion-external-mention .notion-external-subtitle-item-desc{
+  flex: 1
+}
+
+.notion-external-description:hover .notion-external-subtitle {
+  display: block;
+}
+
+.notion-preview-card-domain-warp{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.notion-preview-card-domain-warp .notion-preview-card-domain{
+padding-left: 4px;
+
+}
+.notion-preview-card-domain-warp .notion-preview-card-logo{
+  width: 14px;
+  height: 14px;
+}
+
+.notion-preview-card-title{
+  font-size: 16px;
+  line-height: 1.5;
+  padding: 4px 0;
+  font-weight: 500;
+  color: var(--fg-color-4);
+}
+
+.notion-preview-card-github-shields img {
+  margin-right: 4px;
+  padding: 4px 0;
 }
 
 .notion-yt-lite {