Back

Advanced Components

Advanced components with advanced docs

Web Content Render#

Quote#

The Quote component is a simple component that displays a random quote.

import { Quote } from '@/components/advanced'

<Quote />
jsx

Renders:

Loading...

Config:

src/site.config.ts
export const integrationConfig: IntegrationConfig = {
  // Add a random quote to the footer (default on homepage footer)
  quote: {
    // https://github.com/lukePeavey/quotable
    server: 'https://api.quotable.io/quotes/random?maxLength=60', 
    target: (data) => (data as { content: string }[])[0].content || 'Error'
  }
}
ts

Quotable ↗ is a open-source API that provides random English quotes.

For Chinese quotes, you can use Hitokoto ↗.

src/site.config.ts
export const integrationConfig: IntegrationConfig = {
  quote: {
    // https://developer.hitokoto.cn/sentence/#%E8%AF%B7%E6%B1%82%E5%9C%B0%E5%9D%80
    server: 'https://v1.hitokoto.cn/?c=i', 
    target: (data) => (data as { hitokoto: string }).hitokoto || 'Error'
  }
}
ts

GitHub Card#

The GithubCard component is a simple component that displays a GitHub user card.

import { GithubCard } from '@/components/advanced'

<GithubCard repo='cworld1/astro-theme-pure' />
jsx

Render:

cworld1 / astro-theme-pure

Waiting for api.github.com...

???
???
???
?????

Preview any link inserted in the content.

import { LinkPreview } from '@/components/advanced'

<LinkPreview href='https://www.cloudflare.com/' />
// Disable mediumzoom to preview image
// <LinkPreview href='https://www.cloudflare.com/' zoomable={false} />
<LinkPreview href='https://www.cloudflare.com/' hideMedia />
jsx

Render:

Data Transformer#

QRCode#

It needs you bind a component with a id get-qrcode to open the QRCode window.

import { Button } from '@/components/user'
import { QRCode } from '@/components/advanced'

<Button id='get-qrcode'>Open QRCode</Button>

// <QRCode /> // default to render current page link
<QRCode content='https://github.com/cworld1/astro-theme-pure' />
jsx

Render:

Open QRCode

Medium Zoom#

See Other Integrations#medium-zoom.

Individual Server Integration#

Comment System#

See Comment#Usage.

See more docs