readme-aura 0.4.10 → 0.4.12
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/README.md +11 -5
- package/package.json +1 -1
- package/readme.source.md +36 -0
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
[](https://www.npmjs.com/package/readme-aura)
|
|
2
2
|
|
|
3
3
|
Write custom **React/JSX components** directly inside your Markdown, and readme-aura will render them into beautiful SVGs that work on GitHub.
|
|
4
4
|
|
|
@@ -66,7 +66,11 @@ npx readme-aura init --template PurpleGlow
|
|
|
66
66
|
npx readme-aura init --template LightOrbs
|
|
67
67
|
```
|
|
68
68
|
|
|
69
|
-
No extra downloads, no local files needed - the template is pulled on the fly and placed in `readme.source.md`, ready to build. Run `npx readme-aura build` right after and you get a working README.
|
|
69
|
+
No extra downloads, no local files needed - the template is pulled on the fly and placed in `readme.source.md`, ready to build. Run `npx readme-aura build` right after and you get a working README. <br/><br/><br/>
|
|
70
|
+
|
|
71
|
+
[](https://github.com/collectioneur/readme-aura/blob/main/CONTRIBUTING.md)
|
|
72
|
+
|
|
73
|
+
Made your profile unique with readme-aura? Drop your `readme.source.md` into [`examples/custom-templates/`](https://github.com/collectioneur/readme-aura/tree/main/examples/custom-templates) and anyone will be able to install your design with a single command. See the [contributing guide](https://github.com/collectioneur/readme-aura/blob/main/CONTRIBUTING.md) for details.
|
|
70
74
|
|
|
71
75
|
## What `init` Creates
|
|
72
76
|
|
|
@@ -105,7 +109,7 @@ jobs:
|
|
|
105
109
|
|
|
106
110
|
## Features
|
|
107
111
|
|
|
108
|
-
[](https://www.npmjs.com/package/readme-aura)
|
|
109
113
|
|
|
110
114
|
* **Write React/JSX** – Use familiar `style={{ }}` syntax with flexbox, gradients, shadows
|
|
111
115
|
* **Powered by Satori** – Vercel's engine converts JSX to SVG without a browser
|
|
@@ -215,17 +219,19 @@ You can add **CSS-based SVG animations** using the `<style>` injection mechanism
|
|
|
215
219
|
|
|
216
220
|
**Targeting:** Use `id` on SVG elements (`<ellipse id="glow">`, `<g id="group">`) and reference them in CSS: `#glow { animation: pulse 2s infinite; }`. Raw SVG elements preserve `id`; Satori-rendered HTML may not always preserve `className`.
|
|
217
221
|
|
|
218
|
-
[](https://www.npmjs.com/package/readme-aura)
|
|
219
223
|
|
|
220
224
|
**Limitations:** No JavaScript. GitHub strips scripts but supports both CSS animations and SMIL. Prefer `transform` and `opacity` for best CSS compatibility.
|
|
221
225
|
|
|
222
226
|
## Tech Stack
|
|
223
227
|
|
|
224
|
-
[](https://www.npmjs.com/package/readme-aura)
|
|
225
229
|
|
|
226
230
|
## If You Use readme-aura
|
|
227
231
|
|
|
228
232
|
* **Add the topic:** Consider adding the [readme-aura](https://github.com/topics/readme-aura) topic to your repository so others can discover it.
|
|
233
|
+
* **Found a bug?** Open an [issue](https://github.com/collectioneur/readme-aura/issues) — even a one-liner helps.
|
|
234
|
+
* **Built something cool?** Drop your template into [`examples/custom-templates/`](https://github.com/collectioneur/readme-aura/tree/main/examples/custom-templates) so anyone can install it with a single command. See the [contributing guide](https://github.com/collectioneur/readme-aura/blob/main/CONTRIBUTING.md) for details.
|
|
229
235
|
|
|
230
236
|
## License
|
|
231
237
|
|
package/package.json
CHANGED
package/readme.source.md
CHANGED
|
@@ -249,6 +249,40 @@ npx readme-aura init --template LightOrbs
|
|
|
249
249
|
```
|
|
250
250
|
|
|
251
251
|
No extra downloads, no local files needed - the template is pulled on the fly and placed in `readme.source.md`, ready to build. Run `npx readme-aura build` right after and you get a working README.
|
|
252
|
+
<br/><br/><br/>
|
|
253
|
+
|
|
254
|
+
```aura width=260 height=60 link="https://github.com/collectioneur/readme-aura/blob/main/CONTRIBUTING.md"
|
|
255
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: 0, width: '100%', height: '100%', background: 'linear-gradient(135deg, #120000, #200808)', border: '1px solid rgba(200,40,40,0.4)', borderRadius: 14, fontFamily: 'Inter, sans-serif', position: 'relative', overflow: 'hidden' }}>
|
|
256
|
+
<svg width="260" height="60" overflow="hidden" style={{ position: 'absolute', top: 0, left: 0 }}>
|
|
257
|
+
<defs>
|
|
258
|
+
<filter id="rbf" x="-100%" y="-100%" width="300%" height="300%">
|
|
259
|
+
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
|
|
260
|
+
</filter>
|
|
261
|
+
</defs>
|
|
262
|
+
<path d="M 180 30 Q 220 30 180 60 L 246 60 A 14 14 0 0 1 278 46 L 278 34 A 14 34 0 0 1 246 0 Z" fill="rgba(200,40,40,0.6)" filter="url(#rbf)" />
|
|
263
|
+
<circle cx="36" cy="30" r="4" fill="none" stroke="rgba(255,60,60,0.7)" strokeWidth="3">
|
|
264
|
+
<animate attributeName="r" values="4;28" dur="2s" repeatCount="indefinite" calcMode="linear" />
|
|
265
|
+
<animate attributeName="opacity" values="0.7;0" dur="2s" repeatCount="indefinite" calcMode="linear" />
|
|
266
|
+
</circle>
|
|
267
|
+
<circle cx="36" cy="30" r="4" fill="none" stroke="rgba(255,60,60,0.7)" strokeWidth="3">
|
|
268
|
+
<animate attributeName="r" values="4;28" dur="2s" repeatCount="indefinite" calcMode="linear" begin="0.67s" />
|
|
269
|
+
<animate attributeName="opacity" values="0.7;0" dur="2s" repeatCount="indefinite" calcMode="linear" begin="0.67s" />
|
|
270
|
+
</circle>
|
|
271
|
+
<circle cx="36" cy="30" r="4" fill="none" stroke="rgba(255,60,60,0.7)" strokeWidth="3">
|
|
272
|
+
<animate attributeName="r" values="4;28" dur="2s" repeatCount="indefinite" calcMode="linear" begin="1.33s" />
|
|
273
|
+
<animate attributeName="opacity" values="0.7;0" dur="2s" repeatCount="indefinite" calcMode="linear" begin="1.33s" />
|
|
274
|
+
</circle>
|
|
275
|
+
<circle cx="36" cy="30" r="4" fill="rgba(255,60,60,1)">
|
|
276
|
+
<animate attributeName="r" values="2.5;4;2.5" dur="1s" repeatCount="indefinite" />
|
|
277
|
+
</circle>
|
|
278
|
+
<circle cx="36" cy="30" r="3" fill="rgba(255,100,100,1)" />
|
|
279
|
+
</svg>
|
|
280
|
+
<div style={{ width: 60, flexShrink: 0 }} />
|
|
281
|
+
<span style={{ fontSize: 14, fontWeight: 700, color: '#fafafa', letterSpacing: '0.3px', zIndex: 10 }}>Built something cool? Contribute your template.</span>
|
|
282
|
+
</div>
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
Made your profile unique with readme-aura? Drop your `readme.source.md` into [`examples/custom-templates/`](https://github.com/collectioneur/readme-aura/tree/main/examples/custom-templates) and anyone will be able to install your design with a single command. See the [contributing guide](https://github.com/collectioneur/readme-aura/blob/main/CONTRIBUTING.md) for details.
|
|
252
286
|
|
|
253
287
|
## What `init` Creates
|
|
254
288
|
|
|
@@ -598,6 +632,8 @@ You can add **CSS-based SVG animations** using the `<style>` injection mechanism
|
|
|
598
632
|
## If You Use readme-aura
|
|
599
633
|
|
|
600
634
|
- **Add the topic:** Consider adding the [readme-aura](https://github.com/topics/readme-aura) topic to your repository so others can discover it.
|
|
635
|
+
- **Found a bug?** Open an [issue](https://github.com/collectioneur/readme-aura/issues) — even a one-liner helps.
|
|
636
|
+
- **Built something cool?** Drop your template into [`examples/custom-templates/`](https://github.com/collectioneur/readme-aura/tree/main/examples/custom-templates) so anyone can install it with a single command. See the [contributing guide](https://github.com/collectioneur/readme-aura/blob/main/CONTRIBUTING.md) for details.
|
|
601
637
|
|
|
602
638
|
## License
|
|
603
639
|
|