huangrunhua / linkpreview

Preview Links Like Twitter Did | Totally SwiftUI | Example

LinkPreview

This small project shows how to embed links to your own SwiftUI project. You can use this package directly and with just a few lines of code you can achieve the same effect just like Twitter.

System Requirements

• Xcode 14.0+
• iOS & iPadOS 15.0+

Understand A LinkPreviewView

A LinkPreviewView will display metadata from a specific URL, the metadata is shown below:

<meta property="og:title" content="Large, creative AI models will transform lives and labour markets">
<meta property="og:image" content="https://www.economist.com/interactive/science-and-technology/2023/04/22/large-creative-ai-models-will-transform-how-we-live-and-work/promo.jpg">
<meta property="og:description" content="They bring enormous promise and peril. In the first of three special articles we explain how they work">

The above content (title, image, description) will be parsed and shown just as the picture shows above.

There is also a property called publisher in a LinkPreviewView. I defined the publisher to be the main link for example the publisher of a link https://www.economist.com/interactive/science-and-technology/2023/04/22/large-creative-ai-models-will-transform-how-we-live-and-work?fsrc=core-app-economist will be economist.com and the publisher of a link https://github.io/xxxxx will be github.io.

Noted that if a web page does not contain the metadata above then the publisher will be the only element to be shown inside a LinkPreviewView.

YouTube Video Support

If your link points to YouTube and to be able to show correctly using this framework, please check the link contains =, for example, the following link is valid:

https://www.youtube.com/watch?v=ANn9ibNo9SQ

Behind the = is your video ID, make sure there is noly one = and your video ID is just behind the =.

How to Use

Since this project is now not a Swift package, you coud just drag the LinkPreviewView.swift , LinkDataFetcher.swift and do not forget the color defined inside the ColorExtension.swift and Assets to your project.

Define A LinkDataFetcher Object

First, you have to define a LinkDataFetcher object just shows in the following way:

ldf = LinkDataFetcher(
  link: "https://www.economist.com/special-report/2023/04/14/all-change"
)

A LinkDataFetcher object receives only a link string.

Embed LinkPreviewView to Your Project

Then you can embed a LinkPreviewView to your project:

LinkPreviewView(linkDataFetcher: ldf, tapAction: tapAction(link:publisher:linkTitle:linkDescription:linkImage:))

tapAction decides what action should be implemented when someone tap the link view. You can also write in the following way:

LinkPreviewView(linkDataFetcher: ldf) { link, publisher, linkTitle, linkDescription, linkImage in
	if let linkDescription {
		print(linkDescription)
	}
}

Websites That Support

Here is the list that shows which website supports in LinkPreview. Noted that not all websites are test.

• Twitter
• YouTube
• The Economist
• New Scientist
• GitHub
• Apple
• The New Yorker
• The New York Times
• TIME(Picture may not show)
• Bloomberg
• WIRED
• Nature
• Science
• BBC
• CNN
• The Guardian
• The Atlantic
• Reuters
• The Los Angeles Times
• Washington Post
• The Wall Street Journal
• The New York Daily News
• New York Post
• Chicago Tribune
• NewsWeek
• Fortune
• 微信读书
• AP News
• Fox News
• NBC News
• 9to5Mac
• Vox
• Yahoo! News
• POLITICO
• NPR News
• Financial Times
• USA Today
• Reader's Digest
• The Times

Last But Not Least

You can make contributions too.