<!DOCTYPE html>
<html>
  <head>
    <script src="node_modules/autoblogwc/dist/webcomponent.js"></script>
    <link
      rel="stylesheet"
      href="node_modules/autoblogwc/dist/webcomponent.css"
    />
  </head>
  <body>
    <!-- Main blog component -->
    <autoblog-component id="my-blog-123"></autoblog-component>

    <!-- Article preview component -->
    <article-preview
      blogId="my-blog-123"
      title="Article Title"
      imageUrl="https://example.com/image.jpg"
      articleId="article-456"
    ></article-preview>
  </body>
</html>

React with TypeScript

import 'autoblogwc/dist/webcomponent.js'
import type {
  AutoBlogComponentProps,
  ArticlePreviewComponentProps,
} from 'autoblogwc'

function MyApp() {
  return (
    <div>
      {/* TypeScript will provide autocomplete and type checking */}
      <autoblog-component id="my-blog-456" />

      <article-preview
        blogId="my-blog-456"
        title="Getting Started with AutoBlog"
        imageUrl="https://example.com/featured-image.jpg"
        articleId="article-789"
        contentOnly={false}
        html="<p>This is a preview of the article content...</p>"
      />
    </div>
  )
}

React with JavaScript

import 'autoblogwc/dist/webcomponent.js'

function MyApp() {
  return (
    <div>
      <autoblog-component id="my-blog-456"></autoblog-component>

      <article-preview
        blogId="my-blog-456"
        title="My Article"
        imageUrl="https://example.com/image.jpg"
        articleId="article-789"
      />
    </div>
  )
}

Vanilla TypeScript

import 'autoblogwc/dist/webcomponent.js'
import type {
  AutoBlogComponentElement,
  ArticlePreviewComponentElement,
} from 'autoblogwc'

// Create elements programmatically with full type support
const blogComponent = document.createElement(
  'autoblog-component',
) as AutoBlogComponentElement
blogComponent.id = 'my-blog-123'

const articlePreview = document.createElement(
  'article-preview',
) as ArticlePreviewComponentElement
articlePreview.blogId = 'my-blog-123'
articlePreview.setAttribute('title', 'My Article')
articlePreview.setAttribute('imageUrl', 'https://example.com/image.jpg')

document.body.appendChild(blogComponent)
document.body.appendChild(articlePreview)

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

@NgModule({
  // ... other configuration
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

// Add to main.ts or app component
import 'autoblogwc/dist/webcomponent.js'

<!-- component.html -->
<autoblog-component id="my-blog-789"></autoblog-component>
<article-preview
  blogId="my-blog-789"
  title="Article Title"
  [contentOnly]="false"
></article-preview>

Available Components

`<autoblog-component>`

Main blog component that displays a full blog interface with navigation, article listing, and individual article views.

Properties:

Property	Type	Required	Description
id	string	No	Unique identifier for the blog

`<article-preview>`

Component for displaying article previews and standalone article content.

Properties:

Property	Type	Required	Description
blogId	string	No	The blog ID to associate with
html	string	No	HTML content to display
imageUrl	string	No	Image URL for the article
title	string	No	Article title
contentOnly	boolean	No	Whether to show content only (without extra styling)
articleId	string	No	Unique identifier for the article

TypeScript Support

This package includes full TypeScript definitions out of the box! When you install the package, you automatically get:

✅ Autocomplete for all component properties
✅ Type checking to catch errors at compile time
✅ IntelliSense in your IDE for better development experience
✅ JSX support for React applications
✅ No additional @types/ package needed

Available Types

import type {
  // Props interfaces for React usage
  AutoBlogComponentProps,
  ArticlePreviewComponentProps,

  // Element interfaces for vanilla JS/TS usage
  AutoBlogComponentElement,
  ArticlePreviewComponentElement,
} from 'autoblogwc'

Type-Safe Usage Examples

// React component with full type safety
const BlogPage: React.FC = () => {
  const blogId = 'my-blog-123'

  return (
    <div>
      {/* TypeScript will validate these props */}
      <autoblog-component id={blogId} />

      <article-preview
        blogId={blogId}
        title="My Article"
        imageUrl="https://example.com/image.jpg"
        contentOnly={false} // TypeScript knows this should be boolean
      />
    </div>
  )
}

// Vanilla TypeScript with type assertions
const createBlogComponent = (blogId: string): AutoBlogComponentElement => {
  const element = document.createElement(
    'autoblog-component',
  ) as AutoBlogComponentElement
  element.id = blogId // Fully typed
  return element
}

Development

Local Development

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

# Build web component for distribution
npm run build:webcomponent

Azure DevOps Pipeline

This project includes an Azure DevOps pipeline (azure-pipelines.yml) that:

Builds the web component
Publishes the package to npm registry

Setup Instructions

Configure npm access token:
- Go to your Azure DevOps project
- Navigate to Pipelines → Library → Variable groups
- Create a variable named NPM_REGISTRY_TOKEN
- Set its value to your npm access token
- Mark it as secret
Create npm access token:
- Go to npmjs.com
- Sign in to your account
- Go to Access Tokens
- Generate new token with "Automation" type
- Copy the token value
Update package.json:
- Update the repository.url field with your actual repository URL
- Update the author field with your information
Trigger the pipeline:
- The pipeline will automatically run on pushes to main/master branches
- Or when you create version tags (e.g., v1.0.0)

License

MIT

Keywords

webcomponent

react

autoblog

FAQs

What is autoblogwc?

Is autoblogwc popular?

Is autoblogwc well maintained?

Package last updated on 29 Jul 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

autoblogwc

AutoBlog WebComponent

Installation

Usage

Basic HTML Usage