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.

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

Last But Not Least

You can make contributions too.