Skip to content

Commit e96946b

Browse files
castastrophecastastrophe
committed
fix(docs): update readme with more details; fix inaccurate demo
1 parent c4af76b commit e96946b

3 files changed

Lines changed: 38 additions & 33 deletions

File tree

‎.github/workflows/release.yml‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@ jobs:
2121
runs-on: ubuntu-latest
2222
env:
2323
CI: true
24-
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
25-
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
2624
steps:
2725
- name: Check out code
2826
uses: actions/checkout@v6
@@ -44,11 +42,19 @@ jobs:
4442
run: yarn install --immutable
4543

4644
- name: Semantic release
47-
uses: cycjimmy/semantic-release-action@v6.0.0
45+
id: semantic
46+
uses: cycjimmy/semantic-release-action@v6
4847
env:
4948
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
50-
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
5149
GIT_AUTHOR_NAME: Cassondra Roberts
5250
GIT_AUTHOR_EMAIL: castastrophe@users.noreply.github.com
5351
GIT_COMMITTER_NAME: Cassondra Roberts
5452
GIT_COMMITTER_EMAIL: castastrophe@users.noreply.github.com
53+
54+
- name: Do something when a new release published
55+
if: steps.semantic.outputs.new_release_published == 'true'
56+
run: |
57+
echo ${{ steps.semantic.outputs.new_release_version }}
58+
echo ${{ steps.semantic.outputs.new_release_major_version }}
59+
echo ${{ steps.semantic.outputs.new_release_minor_version }}
60+
echo ${{ steps.semantic.outputs.new_release_patch_version }}

‎CHANGELOG.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ All notable changes to this project will be documented in this file. See [Conven
66

77
### ✨ Features
88

9-
*initial commit of markdown-it-anchor-sections ([21ce354]())
9+
\*initial commit of markdown-it-anchor-sections ([21ce354](https://github.com/castastrophe/markdown-it-anchor-sections/commit/21ce354d8a66bba7741de34d8b4331c243bc6487))
1010

11-
A markdown-it plugin for wrapping headers + content in a section tag
12-
with unique identifier. Compatible with IntersectionObservers.
11+
A markdown-it plugin for wrapping markdown content in `<section>` tags automatically, grouped by header level, and hoisting or creating an anchor tag on the section; perfect for Intersection Observers, scroll-spying, or semantic styling without manual markup.

‎README.md‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<h1 align="center">markdown-it-anchor-sections</h1>
22
<p align="center">
3-
<b>Markdown headers wrapped in logical sections.</b>
3+
<b>Markdown headers wrapped in semantic sections with anchor tags.</b>
44
</p>
55

66
<div align="center">
@@ -11,39 +11,41 @@
1111

1212
</div>
1313

14-
Wrap markdown content in `<section>` tags automatically, grouped by header level. Perfect for Intersection Observers, scroll-spying, or semantic styling without manual markup.
14+
Wrap markdown content in `<section>` tags automatically, grouped by header level, and hoisting or creating an anchor tag on the section; perfect for Intersection Observers, scroll-spying, or semantic styling without manual markup.
1515

1616
```md
1717
# Introduction
18+
1819
Hello world.
1920

2021
## Details
22+
2123
More info here.
2224
```
2325

2426
renders to:
2527

2628
```html
27-
<section>
28-
<h1>Introduction</h1>
29-
<p>Hello world.</p>
30-
<section>
31-
<h2>Details</h2>
32-
<p>More info here.</p>
33-
</section>
29+
<section id="introduction">
30+
<h1>Introduction</h1>
31+
<p>Hello world.</p>
32+
<section id="details">
33+
<h2>Details</h2>
34+
<p>More info here.</p>
35+
</section>
3436
</section>
3537
```
3638

3739
## The problem
3840

39-
Modern web layouts often require grouping content into logical blocks—for example, to trigger animations as sections enter the viewport, or to build sticky navigation that knows which part of the page you're reading.
41+
Modern web layouts often require grouping content into logical blocks—for example, to trigger animations as sections enter the viewport or to build sticky navigation that knows which part of the page you're reading.
4042

4143
Markdown is inherently flat. While you can manually wrap blocks in `<div>` or `<section>` tags, it breaks the readability of the raw text and is prone to errors. **markdown-it-anchor-sections bridges the gap** by treating your header hierarchy as the source of truth for your document's structure.
4244

4345
## Features
4446

45-
- **Hierarchical nesting** — lower-level headers (like `h2`) are automatically nested within higher-level sections (like `h1`)
46-
- **Attribute-aware** — works seamlessly with `markdown-it-attrs` or `markdown-it-anchor`; sections inherit the same IDs and classes as their headers
47+
- **Hierarchical nesting** — lower-level headers (like `h3`) are automatically nested within higher-level sections (like `h2`)
48+
- **Attribute-aware** — works seamlessly with `markdown-it-attrs` sections inherit the same IDs as their headers
4749
- **Semantic HTML** — produces clean, valid `<section>` structures that reflect your content's outline
4850
- **Zero configuration** — works out of the box with sensible defaults
4951
- **Lightweight** — tiny footprint with no external dependencies
@@ -62,8 +64,8 @@ bun add markdown-it-anchor-sections
6264
## Usage
6365

6466
```js
65-
import md from 'markdown-it';
66-
import anchorSections from 'markdown-it-anchor-sections';
67+
import md from "markdown-it";
68+
import anchorSections from "markdown-it-anchor-sections";
6769

6870
const parser = md().use(anchorSections);
6971

@@ -80,31 +82,30 @@ console.log(parser.render(src));
8082

8183
### With attributes
8284

83-
If you use [markdown-it-attrs] or [markdown-it-anchor] before this plugin, the generated `<section>` tags will inherit any attributes applied to the headers:
85+
If you use [markdown-it-attrs] before this plugin, the generated `<section>` tags will inherit the id applied to the headers and retain any other attributes on the header.
8486

8587
```js
86-
import md from 'markdown-it';
87-
import attrs from 'markdown-it-attrs';
88-
import anchorSections from 'markdown-it-anchor-sections';
88+
import md from "markdown-it";
89+
import attrs from "markdown-it-attrs";
90+
import anchorSections from "markdown-it-anchor-sections";
8991

90-
const parser = md()
91-
.use(attrs)
92-
.use(anchorSections);
92+
const parser = md().use(attrs).use(anchorSections);
9393
```
9494

9595
**Markdown:**
9696

9797
```md
98-
# Great stuff {.jumbotron}
98+
# Great stuff {.jumbotron #intro}
99+
99100
lorem ipsum
100101
```
101102

102103
**Output:**
103104

104105
```html
105-
<section class="jumbotron">
106-
<h1 class="jumbotron">Great stuff</h1>
107-
<p>lorem ipsum</p>
106+
<section id="intro">
107+
<h1 class="jumbotron">Great stuff</h1>
108+
<p>lorem ipsum</p>
108109
</section>
109110
```
110111

@@ -126,7 +127,6 @@ lorem ipsum
126127
This project was inspired by [markdown-it-header-sections](https://github.com/arve0/markdown-it-header-sections).
127128

128129
[markdown-it-attrs]: https://github.com/arve0/markdown-it-attrs
129-
[markdown-it-anchor]: https://github.com/valeriangalliat/markdown-it-anchor
130130
[github-image]: https://github.com/castastrophe/markdown-it-anchor-sections/actions/workflows/test.yml/badge.svg?branch=main
131131
[github-url]: https://github.com/castastrophe/markdown-it-anchor-sections/actions/workflows/test.yml
132132
[npm-image]: https://img.shields.io/npm/v/markdown-it-anchor-sections.svg

0 commit comments

Comments
 (0)