readme-aura 0.4.10 → 0.4.11
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 +36 -0
package/README.md
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
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.
|
|
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. <br/> <br/> <br/>
|
|
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.
|
|
6
10
|
|
|
7
11
|
## How It Works
|
|
8
12
|
|
|
@@ -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
|
|
|
@@ -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,13 +219,13 @@ 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
|
|
package/package.json
CHANGED
package/readme.source.md
CHANGED
|
@@ -103,6 +103,42 @@
|
|
|
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.
|
|
106
142
|
|
|
107
143
|
## How It Works
|
|
108
144
|
|