npm install blopilot// main.ts
import 'blopilot/dist/webcomponent.js'
// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}<!-- any.component.html -->
<blo-pilot id="my-blog-123"></blo-pilot>
<article-preview
blogId="my-blog-123"
title="Article Title"
imageUrl="https://example.com/image.jpg"
[contentOnly]="false"
></article-preview>npm install blopilot// main.ts
import { createApp } from 'vue'
import 'blopilot/dist/webcomponent.js'
import App from './App.vue'
const app = createApp(App)
app.config.compilerOptions.isCustomElement = (tag) =>
['blopilot', 'article-preview'].includes(tag)
app.mount('#app')<!-- App.vue -->
<template>
<blo-pilot id="my-blog-123" />
<article-preview
blogId="my-blog-123"
title="My Article"
imageUrl="https://example.com/image.jpg"
/>
</template>npm install blopilot// e.g., src/main.tsx or src/index.tsx
import 'blopilot/dist/webcomponent.js'
export default function App() {
return (
<div>
<blo-pilot id="my-blog-123" />
<article-preview
blogId="my-blog-123"
title="My Article"
imageUrl="https://example.com/image.jpg"
/>
</div>
)
}npm install blopilotimport 'blopilot/dist/webcomponent.js'
const blog = document.createElement('blo-pilot')
blog.id = 'my-blog-123'
const preview = document.createElement('article-preview')
preview.setAttribute('blogId', 'my-blog-123')
preview.setAttribute('title', 'My Article')
preview.setAttribute('imageUrl', 'https://example.com/image.jpg')
document.body.append(blog, preview)<!DOCTYPE html>
<html>
<head>
<!-- Use a CDN or host these files yourself -->
<script src="https://unpkg.com/blopilot/dist/webcomponent.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/blopilot/dist/webcomponent.css"
/>
</head>
<body>
<blo-pilot id="my-blog-123"></blo-pilot>
<article-preview
blogId="my-blog-123"
title="Article Title"
imageUrl="https://example.com/image.jpg"
></article-preview>
</body>
</html>npm install
npm run build:webcomponentThe distributable files will be generated under dist/.