readme-aura 0.4.11 → 0.4.13
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 -8
- package/package.json +1 -1
- package/readme.source.md +36 -36
package/README.md
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
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
|
|
|
5
|
-
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.
|
|
6
|
-
|
|
7
|
-
[](https://github.com/collectioneur/readme-aura/blob/main/CONTRIBUTING.md)
|
|
8
|
-
|
|
9
|
-
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.
|
|
5
|
+
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.
|
|
10
6
|
|
|
11
7
|
## How It Works
|
|
12
8
|
|
|
@@ -15,7 +11,7 @@ Made your profile unique with readme-aura? Drop your `readme.source.md` into [`e
|
|
|
15
11
|
3. Preview locally with `npx readme-aura build` – JSX gets rendered to SVG via [Vercel Satori](https://github.com/vercel/satori)
|
|
16
12
|
4. Push to `main` – the GitHub Action auto-generates your `README.md`
|
|
17
13
|
|
|
18
|
-
[](https://www.npmjs.com/package/readme-aura)
|
|
19
15
|
|
|
20
16
|
## Quick Start
|
|
21
17
|
|
|
@@ -70,7 +66,11 @@ npx readme-aura init --template PurpleGlow
|
|
|
70
66
|
npx readme-aura init --template LightOrbs
|
|
71
67
|
```
|
|
72
68
|
|
|
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.
|
|
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.
|
|
74
74
|
|
|
75
75
|
## What `init` Creates
|
|
76
76
|
|
|
@@ -230,6 +230,8 @@ You can add **CSS-based SVG animations** using the `<style>` injection mechanism
|
|
|
230
230
|
## If You Use readme-aura
|
|
231
231
|
|
|
232
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.
|
|
233
235
|
|
|
234
236
|
## License
|
|
235
237
|
|
package/package.json
CHANGED
package/readme.source.md
CHANGED
|
@@ -103,42 +103,6 @@
|
|
|
103
103
|
Write custom **React/JSX components** directly inside your Markdown, and readme-aura will render them into beautiful SVGs that work on GitHub.
|
|
104
104
|
|
|
105
105
|
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.
|
|
106
|
-
<br/>
|
|
107
|
-
<br/>
|
|
108
|
-
<br/>
|
|
109
|
-
|
|
110
|
-
```aura width=260 height=60 link="https://github.com/collectioneur/readme-aura/blob/main/CONTRIBUTING.md"
|
|
111
|
-
<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' }}>
|
|
112
|
-
<svg width="260" height="60" overflow="hidden" style={{ position: 'absolute', top: 0, left: 0 }}>
|
|
113
|
-
<defs>
|
|
114
|
-
<filter id="rbf" x="-100%" y="-100%" width="300%" height="300%">
|
|
115
|
-
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
|
|
116
|
-
</filter>
|
|
117
|
-
</defs>
|
|
118
|
-
<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)" />
|
|
119
|
-
<circle cx="36" cy="30" r="4" fill="none" stroke="rgba(255,60,60,0.7)" strokeWidth="3">
|
|
120
|
-
<animate attributeName="r" values="4;28" dur="2s" repeatCount="indefinite" calcMode="linear" />
|
|
121
|
-
<animate attributeName="opacity" values="0.7;0" dur="2s" repeatCount="indefinite" calcMode="linear" />
|
|
122
|
-
</circle>
|
|
123
|
-
<circle cx="36" cy="30" r="4" fill="none" stroke="rgba(255,60,60,0.7)" strokeWidth="3">
|
|
124
|
-
<animate attributeName="r" values="4;28" dur="2s" repeatCount="indefinite" calcMode="linear" begin="0.67s" />
|
|
125
|
-
<animate attributeName="opacity" values="0.7;0" dur="2s" repeatCount="indefinite" calcMode="linear" begin="0.67s" />
|
|
126
|
-
</circle>
|
|
127
|
-
<circle cx="36" cy="30" r="4" fill="none" stroke="rgba(255,60,60,0.7)" strokeWidth="3">
|
|
128
|
-
<animate attributeName="r" values="4;28" dur="2s" repeatCount="indefinite" calcMode="linear" begin="1.33s" />
|
|
129
|
-
<animate attributeName="opacity" values="0.7;0" dur="2s" repeatCount="indefinite" calcMode="linear" begin="1.33s" />
|
|
130
|
-
</circle>
|
|
131
|
-
<circle cx="36" cy="30" r="4" fill="rgba(255,60,60,1)">
|
|
132
|
-
<animate attributeName="r" values="2.5;4;2.5" dur="1s" repeatCount="indefinite" />
|
|
133
|
-
</circle>
|
|
134
|
-
<circle cx="36" cy="30" r="3" fill="rgba(255,100,100,1)" />
|
|
135
|
-
</svg>
|
|
136
|
-
<div style={{ width: 60, flexShrink: 0 }} />
|
|
137
|
-
<span style={{ fontSize: 14, fontWeight: 700, color: '#fafafa', letterSpacing: '0.3px', zIndex: 10 }}>Built something cool? Contribute your template.</span>
|
|
138
|
-
</div>
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
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.
|
|
142
106
|
|
|
143
107
|
## How It Works
|
|
144
108
|
|
|
@@ -285,6 +249,40 @@ npx readme-aura init --template LightOrbs
|
|
|
285
249
|
```
|
|
286
250
|
|
|
287
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.
|
|
288
286
|
|
|
289
287
|
## What `init` Creates
|
|
290
288
|
|
|
@@ -634,6 +632,8 @@ You can add **CSS-based SVG animations** using the `<style>` injection mechanism
|
|
|
634
632
|
## If You Use readme-aura
|
|
635
633
|
|
|
636
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.
|
|
637
637
|
|
|
638
638
|
## License
|
|
639
639
|
|