Examples

Real-world examples showing what you can build with @plushveil/pages

Example 1: Page List

Code

<div class="page-list">
  ${pages.map(page => `
    <article>
      <h3>${page.title}</h3>
      <p>${page.description}</p>
      <a href="${page.url}">
        Visit page
      </a>
    </article>
  `).join('')}
</div>

<script target="div.page-list">
  export const pages = [
    {
      title: 'Home',
      description: 'Main landing page',
      url: '/'
    },
    // ... more pages
  ]
</script>

Result

Example 2: Team Member Grid

Code

<div class="team-grid">
  ${team.map(member => `
    <div class="member-card">
      <img src="${member.image}"
           alt="${member.name}" />
      <h3>${member.name}</h3>
      <p>${member.role}</p>
    </div>
  `).join('')}
</div>

<script target="div.team-grid">
  export const team = [
    {
      name: 'Alice Johnson',
      role: 'Developer',
      image: 'alice.jpg'
    },
    // ... more team members
  ]
</script>

Result

A

Alice Johnson

Developer

B

Bob Smith

Designer

C

Carol Williams

Manager

Example 3: Conditional Rendering

Code

<div class="div.banner">
  ${isProduction ? `
    <!-- Production analytics -->
    <script src="analytics.js"></script>
  ` : `
    <!-- Development mode -->
    <div class="dev-banner">
      Development Mode
    </div>
  `}
</div>

<script target="banner">
  export const isProduction =
    process.env.NODE_ENV === 'production'
</script>

Example 4: Multiple Pages from Arrays

Generate multiple pages from a single file using arrays in canonical URLs:

<html>
  <head>
    <link rel="canonical" href="/articles/${articleId}" />
    <title>${article.title}</title>
  </head>
  <body>
    <article>
      <h1>${article.title}</h1>
      <p>${article.content}</p>
    </article>
  </body>
</html>

<script target="html">
  // Array generates multiple pages
  export const articleId = [
    'getting-started',
    'advanced-guide',
    'deployment'
  ]
</script>

<script target="body">
  // Import current page context
  import page from 'page:page'

  const articles = {
    'getting-started': {
      title: 'Getting Started',
      content: 'Learn the basics...'
    },
    'advanced-guide': {
      title: 'Advanced Guide',
      content: 'Deep dive into...'
    },
    'deployment': {
      title: 'Deployment',
      content: 'Deploy your site...'
    }
  }

  // Extract ID from current page URL
  const currentId = page.url.pathname.split('/').pop()
  export const article = articles[currentId]
</script>

Result:This single file generates three separate pages:

  • /articles/getting-started
  • /articles/advanced-guide
  • /articles/deployment

Each page has access to its specific article data via page.url.

Example 5: Reusable Components

Header Component (snippets/header.html)

<header class="site-header">
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

Using in Pages

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    ${import('./snippets/header.html')}

    <main>
      <h1>Page Content</h1>
    </main>

    ${import('./snippets/footer.html')}
  </body>
</html>

Example 6: External Data

Loading JSON Data

<ul>
  ${products.map(product => `
    <li>
      <h3>${product.name}</h3>
      <p>$${product.price}</p>
    </li>
  `).join('')}
</ul>

<script target="ul">
  import { readFileSync } from 'fs'
  import { fileURLToPath } from 'url'
  import { dirname, join } from 'path'

  const __dirname = dirname(
    fileURLToPath(import.meta.url)
  )

  const data = readFileSync(
    join(__dirname, 'data/products.json'),
    'utf-8'
  )

  export const products = JSON.parse(data)
</script>

Real-World Use Cases

📚 Documentation Site

Perfect for project documentation with multiple pages, code examples, and navigation.

  • ✓ Fast page generation
  • ✓ Easy to maintain
  • ✓ No build complexity

🏢 Company Website

Build marketing sites with landing pages, team pages, and contact forms.

  • ✓ Reusable components
  • ✓ Tailwind integration
  • ✓ SEO friendly

📝 Personal Blog

Create a blog with post listings, individual pages, and RSS feed.

  • ✓ Dynamic page generation
  • ✓ Markdown support via imports
  • ✓ Fast builds

🎨 Portfolio Site

Showcase your work with project galleries and case studies.

  • ✓ Image optimization
  • ✓ Custom layouts
  • ✓ Easy updates

Ready to Build?

Start creating your own pages today

Read the DocsView on GitHub