DaisyUI Component Integration
This page demonstrates how to use DaisyUI components to style links processed by rehype-smart-links.
Using DaisyUI Badges
You can use DaisyUI badges to create visually distinct links:
DaisyUI Badge Links
// astro.config.mjs
import { defineConfig } from 'astro/config';
import rehypeSmartLinks from 'rehype-smart-links';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
integrations: [tailwind()],
markdown: {
rehypePlugins: [[
rehypeSmartLinks,
{
internalLinkClass: 'badge badge-primary',
externalLinkClass: 'badge badge-secondary',
brokenLinkClass: 'badge badge-error'
}
]]
}
});DaisyUI Buttons
Transform your markdown links into DaisyUI buttons:
DaisyUI Button Links
// astro.config.mjs
import { defineConfig } from 'astro/config';
import rehypeSmartLinks from 'rehype-smart-links';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
integrations: [tailwind()],
markdown: {
rehypePlugins: [[
rehypeSmartLinks,
{
internalLinkClass: 'btn btn-primary btn-sm',
externalLinkClass: 'btn btn-secondary btn-sm',
brokenLinkClass: 'btn btn-error btn-sm'
}
]]
}
});DaisyUI Link Styles
Create links with DaisyUI link styling:
DaisyUI Link Styles
// astro.config.mjs
import { defineConfig } from 'astro/config';
import rehypeSmartLinks from 'rehype-smart-links';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
integrations: [tailwind()],
markdown: {
rehypePlugins: [[
rehypeSmartLinks,
{
internalLinkClass: 'link link-primary',
externalLinkClass: 'link link-secondary',
brokenLinkClass: 'link link-error'
}
]]
}
});DaisyUI Cards
Wrapping links in DaisyUI cards for rich content links:
DaisyUI Card Links
Internal Link
External Link
Broken Link
// astro.config.mjs
import { defineConfig } from 'astro/config';
import rehypeSmartLinks from 'rehype-smart-links';
import { h } from 'hastscript';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
integrations: [tailwind()],
markdown: {
rehypePlugins: [[
rehypeSmartLinks,
{
wrapperTemplate: (node, linkType) => {
// Store the original link text
const linkText = node.children[0]?.value || 'Link';
// Define description based on link type
let title, description;
if (linkType === 'internal') {
title = h('h3', { class: 'card-title text-primary' }, [linkText]);
description = h('p', { class: 'text-sm opacity-70' }, ['Learn more about the project']);
}
else if (linkType === 'external') {
title = h('h3', { class: 'card-title text-secondary' }, [linkText]);
description = h('p', { class: 'text-sm opacity-70' }, ['View source code on GitHub']);
}
else if (linkType === 'broken') {
title = h('h3', { class: 'card-title text-error' }, [linkText]);
description = h('p', { class: 'text-sm opacity-70' }, ['This link is not working']);
}
// Create card body
const cardBody = h('div', { class: 'card-body p-2' }, [title, description]);
// Update link node
node.children = [cardBody];
node.properties.className = [
'card',
'bg-base-100',
'shadow-xl',
'p-4',
'w-full',
'max-w-sm',
'hover:shadow-2xl',
'transition-shadow',
'duration-300'
];
return node;
}
}
]]
}
});DaisyUI Tooltips
Enhancing links with DaisyUI tooltips:
DaisyUI Tooltip Links
// astro.config.mjs
import { defineConfig } from 'astro/config';
import rehypeSmartLinks from 'rehype-smart-links';
import { h } from 'hastscript';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
integrations: [tailwind()],
markdown: {
rehypePlugins: [[
rehypeSmartLinks,
{
wrapperTemplate: (node, linkType) => {
// Apply appropriate link classes first
node.properties.className = [
'link',
'link-hover',
linkType === 'internal' ? 'link-primary' :
linkType === 'external' ? 'link-secondary' :
'link-error'
];
// Create tooltip text based on link type
let tooltipText;
if (linkType === 'internal') {
tooltipText = 'Navigate to About page';
} else if (linkType === 'external') {
tooltipText = 'Opens in a new tab';
} else if (linkType === 'broken') {
tooltipText = 'This link is broken';
}
// Create tooltip wrapper
return h('div', {
class: `tooltip tooltip-${
linkType === 'internal' ? 'primary' :
linkType === 'external' ? 'secondary' :
'error'
}`,
'data-tip': tooltipText
}, [node]);
}
}
]]
}
});Integration with DaisyUI Themes
DaisyUI’s theme system works seamlessly with rehype-smart-links, allowing your links to adapt to the currently active theme:
Theme-Aware Links
// tailwind.config.js
module.exports = {
plugins: [require("daisyui")],
daisyui: {
themes: ["light", "dark", "cupcake", "cyberpunk"],
}
}
// astro.config.mjs
import { defineConfig } from 'astro/config';
import rehypeSmartLinks from 'rehype-smart-links';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
integrations: [tailwind()],
markdown: {
rehypePlugins: [[
rehypeSmartLinks,
{
className: {
internal: 'link link-primary',
external: 'link link-accent',
broken: 'link link-error'
}
}
]]
}
});Combined Components
You can combine multiple DaisyUI components for complex link styling:
Combined DaisyUI Components
// astro.config.mjs
import { defineConfig } from 'astro/config';
import rehypeSmartLinks from 'rehype-smart-links';
import { h } from 'hastscript';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
integrations: [tailwind()],
markdown: {
rehypePlugins: [[
rehypeSmartLinks,
{
wrapperTemplate: (node, linkType) => {
// Store original text
const linkText = node.children[0]?.value || 'Link';
// Define SVG icon and badge based on link type
let icon, badge, tooltipText;
if (linkType === 'internal') {
// Info icon
icon = h('svg', {
xmlns: 'http://www.w3.org/2000/svg',
class: 'h-4 w-4',
fill: 'none',
viewBox: '0 0 24 24',
stroke: 'currentColor'
}, [
h('path', {
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': '2',
d: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
})
]);
badge = h('span', { class: 'badge badge-sm' }, ['Info']);
tooltipText = 'Internal page';
}
else if (linkType === 'external') {
// External link icon
icon = h('svg', {
xmlns: 'http://www.w3.org/2000/svg',
class: 'h-4 w-4',
fill: 'none',
viewBox: '0 0 24 24',
stroke: 'currentColor'
}, [
h('path', {
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': '2',
d: 'M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'
})
]);
badge = h('span', { class: 'badge badge-sm badge-secondary' }, ['External']);
tooltipText = 'External site';
}
else if (linkType === 'broken') {
// Warning icon
icon = h('svg', {
xmlns: 'http://www.w3.org/2000/svg',
class: 'h-4 w-4',
fill: 'none',
viewBox: '0 0 24 24',
stroke: 'currentColor'
}, [
h('path', {
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': '2',
d: 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
})
]);
badge = h('span', { class: 'badge badge-sm badge-error' }, ['Error']);
tooltipText = 'Link is broken';
}
// Update link with icon and badge
node.children = [icon, h('span', {}, [linkText]), badge];
node.properties.className = ['btn', 'gap-2'];
// Wrap in tooltip
return h('div', {
class: 'tooltip',
'data-tip': tooltipText
}, [node]);
}
}
]]
}
});Next Steps
Explore more styles:
- Basic Demo - Simple link styling examples
- Tailwind CSS - Styling links with Tailwind CSS
- Custom CSS - Advanced CSS styling techniques