DevTo Component

A web component to display articles from dev.to. Can show a list of articles from a specific author or display a single article. Supports themes, pagination, internationalization, and local data sources.

Installation

``bash
npm install @browser.style/dev-to
`

Basic Usage

`javascript
import '@browser.style/dev-to';
`

$3


`html

`

$3

`html

`

$3

`html

`

$3

`html

My Blog

Articles about web development.

`

Attributes

| Attribute | Description | Default |
|-----------|-------------|---------|
| article | ID of a single article to display | - |
| author | dev.to username to fetch articles from | - |
| baseurl | Base URL for local JSON data (uses articles.json and articles/{id}.json) | - |
| theme | Visual theme (brutalist, classic, modern) | - |
| itemsperpage | Number of articles per page | 30 |
| lang | Language code for dates and translations | en |
| i18n | JSON string with translations | - |
| links | Set to external to open articles on dev.to | internal |
| noshadow | Remove shadow DOM if present | - |

URL Parameters

The component supports URL parameters for deep linking and state preservation:

- ?article=ID - Load a specific article directly
- ?page=X - Load the list view with pages 1 through X

When navigating between list and article views, the URL updates automatically. Refreshing the page restores the correct view and pagination state.

Themes


The component includes these themes:
- brutalist: A rugged, industrial look
- classic: Traditional article layout with drop caps and serif fonts
- modern: Swiss, modern article layout

`html

`

Internationalization


Customize text strings using the i18n attribute:

`html
author="madsstoumann"
lang="da"
i18n='{"da":{"more":"Flere...","reactions":"reaktioner"}}'
>
`

Slots

The component supports named slots for customizing the list header:

- slot="headline" - Main heading above the article list
- slot="description" - Subheading or description text

Styling

The component uses CSS custom properties for fonts and colors. Style parts are exposed through ::part():

| Part | Description |
|------|-------------|
| avatar | Author profile image (article view) |
| cover | Article cover image (article view) |
| list | Article list container |
| list-header | Header containing slots |
| more | Load more button |

Examples

$3


`html
author="madsstoumann"
theme="classic"
itemsperpage="10"
>
`

$3

`html
article="123456"
theme="classic"
>
`

$3

`html
author="madsstoumann"
baseurl="./data"
theme="classic"
itemsperpage="10">

My Blog

Articles about CSS, JavaScript, and web development.

`

When using baseurl, the component expects:
- {baseurl}/articles.json - Array of article metadata for the list view
- {baseurl}/articles/{id}.json - Full article content for each article

$3


Link directly to an article or paginated list:
`
https://example.com/?article=123456
https://example.com/?page=3
``