Skip to content

Commit 9785704

Browse files
committed
chore: update docs
1 parent a0acb04 commit 9785704

11 files changed

Lines changed: 2805 additions & 10 deletions

File tree

static/content/docs/api/cache-storage.md

Lines changed: 669 additions & 0 deletions
Large diffs are not rendered by default.

static/content/docs/api/console.md

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,153 @@ console.debug("Debug info:", { x: 10, y: 20 });
9393
console.debug("Function called with args:", arguments);
9494
```
9595

96+
## CSS Styling Support
97+
98+
Andromeda's console supports CSS-like styling for enhanced visual output. You can use special formatting directives to style your console messages.
99+
100+
### `console.log(message, ...styles)`
101+
102+
When the first argument contains `%c` placeholders, subsequent arguments are treated as CSS-like style strings.
103+
104+
**Supported CSS Properties:**
105+
106+
- `color` - Text color (named colors, hex, rgb)
107+
- `background-color` - Background color
108+
- `font-weight` - Font weight (normal, bold)
109+
- `font-style` - Font style (normal, italic)
110+
- `text-decoration` - Text decoration (none, underline)
111+
112+
**Example:**
113+
114+
```typescript
115+
// Basic colored text
116+
console.log("%cHello World!", "color: red");
117+
118+
// Multiple styles
119+
console.log("%cSuccess!", "color: green; font-weight: bold");
120+
121+
// Background colors
122+
console.log("%cWarning", "background-color: yellow; color: black");
123+
124+
// Multiple styled sections
125+
console.log(
126+
"%cError: %cOperation failed",
127+
"color: red; font-weight: bold",
128+
"color: gray"
129+
);
130+
```
131+
132+
### Advanced Styling Examples
133+
134+
```typescript
135+
// Header styling
136+
console.log(
137+
"%c🚀 Application Started",
138+
"color: blue; font-weight: bold; background-color: lightblue"
139+
);
140+
141+
// Success message
142+
console.log(
143+
"%c✅ Success: %cData saved successfully",
144+
"color: green; font-weight: bold",
145+
"color: gray"
146+
);
147+
148+
// Error styling
149+
console.log(
150+
"%c❌ Error: %cConnection failed",
151+
"color: red; font-weight: bold",
152+
"color: darkred"
153+
);
154+
155+
// Debug with styling
156+
console.log(
157+
"%c[DEBUG] %cUser action: %c%s",
158+
"color: purple; font-weight: bold",
159+
"color: blue",
160+
"color: black; font-style: italic",
161+
"button_clicked"
162+
);
163+
```
164+
165+
### Color Examples
166+
167+
```typescript
168+
// Named colors
169+
console.log("%cRed text", "color: red");
170+
console.log("%cBlue text", "color: blue");
171+
console.log("%cGreen text", "color: green");
172+
173+
// Hex colors
174+
console.log("%cCustom color", "color: #ff6b6b");
175+
console.log("%cAnother color", "color: #4ecdc4");
176+
177+
// RGB colors
178+
console.log("%cRGB color", "color: rgb(255, 107, 107)");
179+
console.log("%cRGBA color", "color: rgba(78, 205, 196, 0.8)");
180+
```
181+
182+
### Practical Styling Patterns
183+
184+
```typescript
185+
// Log levels with styling
186+
function styledLog(level: string, message: string, ...args: any[]) {
187+
const styles = {
188+
info: "color: blue; font-weight: bold",
189+
warn: "color: orange; font-weight: bold",
190+
error: "color: red; font-weight: bold",
191+
success: "color: green; font-weight: bold"
192+
};
193+
194+
console.log(`%c[${level.toUpperCase()}] %c${message}`,
195+
styles[level] || "color: gray",
196+
"color: black",
197+
...args
198+
);
199+
}
200+
201+
// Usage
202+
styledLog("info", "Server starting on port 3000");
203+
styledLog("warn", "Deprecated API usage detected");
204+
styledLog("error", "Database connection failed");
205+
styledLog("success", "User authenticated successfully");
206+
```
207+
208+
### Component-based Styling
209+
210+
```typescript
211+
class Logger {
212+
private static readonly STYLES = {
213+
timestamp: "color: gray; font-size: 0.8em",
214+
level: {
215+
info: "color: blue; font-weight: bold",
216+
warn: "color: orange; font-weight: bold",
217+
error: "color: red; font-weight: bold",
218+
debug: "color: purple; font-weight: bold"
219+
},
220+
message: "color: black"
221+
};
222+
223+
static log(level: keyof typeof Logger.STYLES.level, message: string) {
224+
const timestamp = new Date().toISOString();
225+
console.log(
226+
"%c[%s] %c%s %c%s",
227+
Logger.STYLES.timestamp,
228+
timestamp,
229+
Logger.STYLES.level[level],
230+
level.toUpperCase(),
231+
Logger.STYLES.message,
232+
message
233+
);
234+
}
235+
}
236+
237+
// Usage
238+
Logger.log("info", "Application initialized");
239+
Logger.log("warn", "Configuration file not found, using defaults");
240+
Logger.log("error", "Failed to connect to database");
241+
```
242+
96243
## Output Formatting
97244

98245
The console automatically converts objects to string representations for

0 commit comments

Comments
 (0)