readme-aura 1.0.1 → 1.0.2
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 +10 -6
- package/package.json +1 -1
- package/readme.source.md +55 -2
package/README.md
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
[](https://www.npmjs.com/package/readme-aura)
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<a href="https://github.com/sponsors/collectioneur"><img src="./.github/assets/readme-aura-component-1-2e03550d.svg" width="160" height="44" /></a>
|
|
5
|
+
</p>
|
|
2
6
|
|
|
3
7
|
Write custom **React/JSX components** directly inside your Markdown, and readme-aura will render them into beautiful SVGs that work on GitHub.
|
|
4
8
|
|
|
@@ -11,7 +15,7 @@ GitHub strips all JS and CSS from README files. This tool lets you bypass that l
|
|
|
11
15
|
3. Preview locally with `npx readme-aura build` – JSX gets rendered to SVG via [Vercel Satori](https://github.com/vercel/satori)
|
|
12
16
|
4. Push to `main` – the GitHub Action auto-generates your `README.md`
|
|
13
17
|
|
|
14
|
-
[](https://www.npmjs.com/package/readme-aura)
|
|
15
19
|
|
|
16
20
|
## Quick Start
|
|
17
21
|
|
|
@@ -68,7 +72,7 @@ npx readme-aura init --template LightOrbs
|
|
|
68
72
|
|
|
69
73
|
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
74
|
|
|
71
|
-
[](https://github.com/collectioneur/readme-aura/blob/main/CONTRIBUTING.md)
|
|
72
76
|
|
|
73
77
|
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.
|
|
74
78
|
|
|
@@ -109,7 +113,7 @@ jobs:
|
|
|
109
113
|
|
|
110
114
|
## Features
|
|
111
115
|
|
|
112
|
-
[](https://www.npmjs.com/package/readme-aura)
|
|
113
117
|
|
|
114
118
|
* **Write React/JSX** – Use familiar `style={{ }}` syntax with flexbox, gradients, shadows
|
|
115
119
|
* **Powered by Satori** – Vercel's engine converts JSX to SVG without a browser
|
|
@@ -219,13 +223,13 @@ You can add **CSS-based SVG animations** using the `<style>` injection mechanism
|
|
|
219
223
|
|
|
220
224
|
**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`.
|
|
221
225
|
|
|
222
|
-
[](https://www.npmjs.com/package/readme-aura)
|
|
223
227
|
|
|
224
228
|
**Limitations:** No JavaScript. GitHub strips scripts but supports both CSS animations and SMIL. Prefer `transform` and `opacity` for best CSS compatibility.
|
|
225
229
|
|
|
226
230
|
## Tech Stack
|
|
227
231
|
|
|
228
|
-
[](https://www.npmjs.com/package/readme-aura)
|
|
229
233
|
|
|
230
234
|
## If You Use readme-aura
|
|
231
235
|
|
package/package.json
CHANGED
package/readme.source.md
CHANGED
|
@@ -100,6 +100,58 @@
|
|
|
100
100
|
</div>
|
|
101
101
|
```
|
|
102
102
|
|
|
103
|
+
```aura width=160 height=44 link="https://github.com/sponsors/collectioneur" inline align=center
|
|
104
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: 0, width: '100%', height: '100%', background: 'linear-gradient(135deg, #0d0008, #1a0012)', borderRadius: 14, fontFamily: 'Inter, sans-serif', position: 'relative', overflow: 'hidden' }}>
|
|
105
|
+
<svg width="160" height="44" style={{ position: 'absolute', top: 0, left: 0 }}>
|
|
106
|
+
<defs>
|
|
107
|
+
<filter id="spf" x="-100%" y="-100%" width="300%" height="300%">
|
|
108
|
+
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
|
|
109
|
+
</filter>
|
|
110
|
+
</defs>
|
|
111
|
+
<rect x="0.5" y="0.5" width="159" height="43" rx="13.5" ry="13.5" fill="none" stroke="rgba(220,60,120,0.4)" strokeWidth="1" />
|
|
112
|
+
<path d="M 111 22 Q 135 22 111 44 L 151 44 A 9 10 0 0 1 171 34 L 171 10 A 9 10 0 0 1 151 0 Z" fill="rgba(220,60,130,0.6)" filter="url(#spf)" />
|
|
113
|
+
<ellipse cx="30" cy="22" rx="18" ry="15" fill="rgba(255,80,150,0.35)" filter="url(#spf)" />
|
|
114
|
+
<g transform="translate(30, 22)">
|
|
115
|
+
<g>
|
|
116
|
+
<g transform="scale(0.874) translate(-12, -11.93)">
|
|
117
|
+
<path d="M17.625 1.499c-2.32 0-4.354 1.203-5.625 3.03-1.271-1.827-3.305-3.03-5.625-3.03C3.129 1.499 0 4.253 0 8.249c0 4.275 3.068 7.847 5.828 10.227a33.14 33.14 0 0 0 5.616 3.876l.028.017.008.003-.001.003c.163.085.342.126.521.125.179.001.358-.041.521-.125l-.001-.003.008-.003.028-.017a33.14 33.14 0 0 0 5.616-3.876C20.932 16.096 24 12.524 24 8.249c0-3.996-3.129-6.75-6.375-6.75z" fill="none" stroke="rgba(255,80,150,0.7)" strokeWidth="1.5" />
|
|
118
|
+
</g>
|
|
119
|
+
<animateTransform attributeName="transform" type="scale" values="1;2.0" dur="2s" repeatCount="indefinite" calcMode="linear" />
|
|
120
|
+
<animate attributeName="opacity" values="0.7;0" dur="2s" repeatCount="indefinite" calcMode="linear" />
|
|
121
|
+
</g>
|
|
122
|
+
</g>
|
|
123
|
+
<g transform="translate(30, 22)">
|
|
124
|
+
<g>
|
|
125
|
+
<g transform="scale(0.874) translate(-12, -11.93)">
|
|
126
|
+
<path d="M17.625 1.499c-2.32 0-4.354 1.203-5.625 3.03-1.271-1.827-3.305-3.03-5.625-3.03C3.129 1.499 0 4.253 0 8.249c0 4.275 3.068 7.847 5.828 10.227a33.14 33.14 0 0 0 5.616 3.876l.028.017.008.003-.001.003c.163.085.342.126.521.125.179.001.358-.041.521-.125l-.001-.003.008-.003.028-.017a33.14 33.14 0 0 0 5.616-3.876C20.932 16.096 24 12.524 24 8.249c0-3.996-3.129-6.75-6.375-6.75z" fill="none" stroke="rgba(255,80,150,0.7)" strokeWidth="1.5" />
|
|
127
|
+
</g>
|
|
128
|
+
<animateTransform attributeName="transform" type="scale" values="1;2.0" dur="2s" repeatCount="indefinite" calcMode="linear" begin="0.67s" />
|
|
129
|
+
<animate attributeName="opacity" values="0.7;0" dur="2s" repeatCount="indefinite" calcMode="linear" begin="0.67s" />
|
|
130
|
+
</g>
|
|
131
|
+
</g>
|
|
132
|
+
<g transform="translate(30, 22)">
|
|
133
|
+
<g>
|
|
134
|
+
<g transform="scale(0.874) translate(-12, -11.93)">
|
|
135
|
+
<path d="M17.625 1.499c-2.32 0-4.354 1.203-5.625 3.03-1.271-1.827-3.305-3.03-5.625-3.03C3.129 1.499 0 4.253 0 8.249c0 4.275 3.068 7.847 5.828 10.227a33.14 33.14 0 0 0 5.616 3.876l.028.017.008.003-.001.003c.163.085.342.126.521.125.179.001.358-.041.521-.125l-.001-.003.008-.003.028-.017a33.14 33.14 0 0 0 5.616-3.876C20.932 16.096 24 12.524 24 8.249c0-3.996-3.129-6.75-6.375-6.75z" fill="none" stroke="rgba(255,80,150,0.7)" strokeWidth="1.5" />
|
|
136
|
+
</g>
|
|
137
|
+
<animateTransform attributeName="transform" type="scale" values="1;2.0" dur="2s" repeatCount="indefinite" calcMode="linear" begin="1.33s" />
|
|
138
|
+
<animate attributeName="opacity" values="0.7;0" dur="2s" repeatCount="indefinite" calcMode="linear" begin="1.33s" />
|
|
139
|
+
</g>
|
|
140
|
+
</g>
|
|
141
|
+
<g transform="translate(30, 22)">
|
|
142
|
+
<g>
|
|
143
|
+
<g transform="scale(0.874) translate(-12, -11.93)">
|
|
144
|
+
<path d="M17.625 1.499c-2.32 0-4.354 1.203-5.625 3.03-1.271-1.827-3.305-3.03-5.625-3.03C3.129 1.499 0 4.253 0 8.249c0 4.275 3.068 7.847 5.828 10.227a33.14 33.14 0 0 0 5.616 3.876l.028.017.008.003-.001.003c.163.085.342.126.521.125.179.001.358-.041.521-.125l-.001-.003.008-.003.028-.017a33.14 33.14 0 0 0 5.616-3.876C20.932 16.096 24 12.524 24 8.249c0-3.996-3.129-6.75-6.375-6.75z" fill="none" stroke="rgba(255,80,150,1)" strokeWidth="1.5" />
|
|
145
|
+
</g>
|
|
146
|
+
<animateTransform attributeName="transform" type="scale" values="0.85;1.0;0.85" dur="1.2s" repeatCount="indefinite" />
|
|
147
|
+
</g>
|
|
148
|
+
</g>
|
|
149
|
+
</svg>
|
|
150
|
+
<div style={{ width: 52, flexShrink: 0 }} />
|
|
151
|
+
<span style={{ fontSize: 14, fontWeight: 700, color: '#fafafa' }}>Sponsor me</span>
|
|
152
|
+
</div>
|
|
153
|
+
```
|
|
154
|
+
|
|
103
155
|
Write custom **React/JSX components** directly inside your Markdown, and readme-aura will render them into beautiful SVGs that work on GitHub.
|
|
104
156
|
|
|
105
157
|
GitHub strips all JS and CSS from README files. This tool lets you bypass that limitation by compiling your designs into static SVG images at build time.
|
|
@@ -252,13 +304,14 @@ No extra downloads, no local files needed - the template is pulled on the fly an
|
|
|
252
304
|
<br/><br/><br/>
|
|
253
305
|
|
|
254
306
|
```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)',
|
|
256
|
-
<svg width="260" height="60"
|
|
307
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: 0, width: '100%', height: '100%', background: 'linear-gradient(135deg, #120000, #200808)', borderRadius: 14, fontFamily: 'Inter, sans-serif', position: 'relative', overflow: 'hidden' }}>
|
|
308
|
+
<svg width="260" height="60" style={{ position: 'absolute', top: 0, left: 0 }}>
|
|
257
309
|
<defs>
|
|
258
310
|
<filter id="rbf" x="-100%" y="-100%" width="300%" height="300%">
|
|
259
311
|
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
|
|
260
312
|
</filter>
|
|
261
313
|
</defs>
|
|
314
|
+
<rect x="0.5" y="0.5" width="259" height="59" rx="13.5" ry="13.5" fill="none" stroke="rgba(200,40,40,0.4)" strokeWidth="1" />
|
|
262
315
|
<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
316
|
<circle cx="36" cy="30" r="4" fill="none" stroke="rgba(255,60,60,0.7)" strokeWidth="3">
|
|
264
317
|
<animate attributeName="r" values="4;28" dur="2s" repeatCount="indefinite" calcMode="linear" />
|