Load articles from dev.to
npm install @browser.style/dev-toA 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.
``bash`
npm install @browser.style/dev-to
`javascript`
import '@browser.style/dev-to';
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 XWhen 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 textStyling
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
``