astro-magic-move 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/MagicMove.astro +2 -0
- package/src/types.ts +6 -0
- package/styles/magic-move.css +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "astro-magic-move",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Animated code morphing for Astro, powered by Shiki Magic Move. Build-time tokenization, zero-framework client JS, CSS-variable theming.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
package/src/MagicMove.astro
CHANGED
|
@@ -16,6 +16,7 @@ const {
|
|
|
16
16
|
stagger = 0.3,
|
|
17
17
|
threshold = 0.4,
|
|
18
18
|
lineNumbers = false,
|
|
19
|
+
minLines,
|
|
19
20
|
class: className,
|
|
20
21
|
} = Astro.props;
|
|
21
22
|
|
|
@@ -66,6 +67,7 @@ const stepsJson = JSON.stringify(compiledSteps);
|
|
|
66
67
|
data-threshold={threshold}
|
|
67
68
|
data-lang={lang}
|
|
68
69
|
{...(lineNumbers ? { "data-line-numbers": "" } : {})}
|
|
70
|
+
{...(minLines ? { style: `--min-lines: ${minLines}` } : {})}
|
|
69
71
|
>
|
|
70
72
|
<pre class="shiki-magic-move-container"><code>{steps[0]}</code></pre>
|
|
71
73
|
<script is:inline type="application/json" set:html={stepsJson} />
|
package/src/types.ts
CHANGED
|
@@ -39,6 +39,12 @@ export interface MagicMoveProps {
|
|
|
39
39
|
/** Whether to animate line numbers. Default: `false` */
|
|
40
40
|
lineNumbers?: boolean;
|
|
41
41
|
|
|
42
|
+
/**
|
|
43
|
+
* Minimum height expressed as a number of lines.
|
|
44
|
+
* Prevents layout shift when stepping between code blocks of different lengths.
|
|
45
|
+
*/
|
|
46
|
+
minLines?: number;
|
|
47
|
+
|
|
42
48
|
/**
|
|
43
49
|
* CSS class(es) applied to the outer `<magic-move>` element.
|
|
44
50
|
* Use this for all visual styling (bg, border, rounded, shadow, padding, width, etc).
|