jesus/TypeDialog

Fork 0

Jesús Pérez ab6c097819

CI / Lint (bash) (push) Has been cancelled

Details

CI / Lint (markdown) (push) Has been cancelled

Details

CI / Lint (nickel) (push) Has been cancelled

Details

CI / Lint (nushell) (push) Has been cancelled

Details

CI / Lint (rust) (push) Has been cancelled

Details

CI / Code Coverage (push) Has been cancelled

Details

CI / Test (macos-latest) (push) Has been cancelled

Details

CI / Test (ubuntu-latest) (push) Has been cancelled

Details

CI / Test (windows-latest) (push) Has been cancelled

Details

CI / Build (macos-latest) (push) Has been cancelled

Details

CI / Build (ubuntu-latest) (push) Has been cancelled

Details

CI / Build (windows-latest) (push) Has been cancelled

Details

CI / Benchmark (push) Has been cancelled

Details

CI / Security Audit (push) Has been cancelled

Details

CI / License Compliance (push) Has been cancelled

Details

chore: fix md lint

2026-01-11 22:36:45 +00:00

10 KiB

Raw Blame History

How to Use TypeDialog Logos

Quick integration guide with code examples for different frameworks and contexts.

Choosing the Right Variant

Decision Tree

Is it for web/digital?

Yes → Use full-color animated or static versions
No → Jump to "Is it for print?"

Does it need animation?

Yes, dynamic context → Use animated versions (no suffix)
No, static/simple → Use static versions (_s)

Is it for print/physical media?

Yes → Use monochrome (_bn) versions
No → Use full-color versions

What's the layout?

Horizontal (header, banner) → Use _h versions
Vertical (stacked) → Use default versions (no _h)
Icon only → Use icon variants

Quick Reference

Use Case	File	Format
Web header	`typedialog_logo_h.svg`	SVG, animated
App icon	`typedialog_icon.svg`	SVG, animated
Favicon	`typedialog_icon_s.svg`	SVG, static
Social media	`typedialog_logo_h_s.png`	PNG, static
Print	`typedialog_logo_bn.svg`	SVG, monochrome
Email	`typedialog_logo_h_s.png`	PNG, static
Dark background	`typedialog_logo_h.svg`	SVG, full color
Light background	`typedialog_logo_h.svg`	SVG, full color

Framework Examples

HTML/CSS

<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
</head>
<body>
  <!-- Hero section -->
  <header class="hero">
    <img src="assets/typedialog_logo_h.svg" alt="TypeDialog" class="logo">
  </header>

  <style>
    .logo {
      max-width: 240px;
      height: auto;
      margin: 20px 0;
    }
  </style>
</body>
</html>
```text

### React

```jsx
import logo from './typedialog_logo_h.svg';

export default function Header() {
  return (
    <header className="hero">
      <img
        src={logo}
        alt="TypeDialog"
        className="logo"
        width={240}
      />
    </header>
  );
}
```text

### Vue

```vue
<template>
  <header class="hero">
    <img
      src="@/assets/assets/typedialog_logo_h.svg"
      alt="TypeDialog"
      class="logo"
      :width="240"
    >
  </header>
</template>

<script setup>
// If using as component:
import TypeDialogLogo from '@/assets/assets/typedialog_logo_h.svg';
</script>

<style scoped>
.logo {
  max-width: 240px;
  height: auto;
}
</style>
```text

### Svelte

```svelte
<script>
  import logo from '../assets/typedialog_logo_h.svg';
</script>

<header class="hero">
  <img src={logo} alt="TypeDialog" class="logo" width="240" />
</header>

<style>
  .logo {
    max-width: 240px;
    height: auto;
  }
</style>
```text

### Angular

```typescript
// In template
<img
  src="assets/assets/typedialog_logo_h.svg"
  alt="TypeDialog"
  class="logo"
  width="240"
/>

/* In component CSS */
.logo {
  max-width: 240px;
  height: auto;
}
```text

---

## Markdown / Documentation

### Simple Image

```markdown
![TypeDialog](./assets/typedialog_logo_h.svg)
```text

### With Link

```markdown
[![TypeDialog](./assets/typedialog_logo_h.svg)](https://yoursite.com)
```text

### mdBook / GitHub Docs

```markdown
# ![TypeDialog](../assets/typedialog_logo_h.svg) Welcome to TypeDialog

Content here...
```text

### Rust Project README

```markdown
# TypeDialog

![TypeDialog](assets/typedialog_logo_h.svg)

Typed dialogs for inputs, forms and schemas you can trust.
```text

---

## Web Integration Patterns

### Favicon Set

```html
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/assets/favicon-32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/assets/favicon-16.png" type="image/png" sizes="16x16">
<link rel="apple-touch-icon" href="/assets/favicon-64.png">
<link rel="icon" href="/assets/favicon.ico" sizes="16x16 32x32 64x64">
```text

### Hero Section

```html
<section class="hero">
  <div class="hero-content">
    <img src="assets/typedialog_logo_h.svg" alt="TypeDialog" class="hero-logo">
    <h1>TypeDialog</h1>
    <p>Typed dialogs for inputs, forms and schemas you can trust.</p>
  </div>
</section>

<style>
  .hero-logo {
    max-width: 300px;
    margin-bottom: 30px;
    animation: fadeIn 0.6s ease-in-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>
```text

### Navigation Bar

```html
<nav class="navbar">
  <a href="/" class="nav-logo">
    <img src="assets/typedialog_icon_s.svg" alt="TypeDialog" width="32">
    <span>TypeDialog</span>
  </a>
  <!-- Nav links -->
</nav>

<style>
  .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }

  .nav-logo img {
    width: 32px;
    height: auto;
  }
</style>
```text

---

## Email & Social Media

### Email HTML

```html
<!-- Use static PNG export to avoid animation issues -->
<table style="width: 100%; max-width: 600px;">
  <tr>
    <td style="text-align: center; padding: 20px;">
      <img
        src="https://yoursite.com/assets/typedialog-logo.png"
        alt="TypeDialog"
        width="240"
        height="64"
        style="border: 0; display: block;"
      />
    </td>
  </tr>
</table>
```text

### Social Media

```html
<!-- Meta tags for social sharing -->
<meta property="og:image" content="https://yoursite.com/assets/typedialog_logo_h_s.png">
<meta property="twitter:image" content="https://yoursite.com/assets/typedialog_logo_h_s.png">
<meta property="og:image:alt" content="TypeDialog Logo">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
```text

---

## Sizing Guidelines

### Web Sizes

| Context | Width | Notes |
|---------|-------|-------|
| **Favicon** | 32px | Use `typedialog_icon_s.svg` |
| **Nav logo** | 32-48px | Use `typedialog_icon.svg` |
| **Header** | 200-300px | Use `typedialog_logo_h.svg` |
| **Hero** | 400-600px | Use `typedialog_logo_h.svg` |
| **Small badge** | 80px | Use `typedialog_icon.svg` |

### Print Sizes

| Context | Width | DPI |
|---------|-------|-----|
| **Business card** | 1 inch | 300 DPI |
| **Letter size** | 3-4 inches | 300 DPI |
| **Poster** | 8-12 inches | 150 DPI |

### Mobile Sizes

| Device | Width | Notes |
|--------|-------|-------|
| **Phone** | 100-150px | Full logo may be too wide |
| **Tablet** | 150-250px | Responsive sizing |
| **Desktop** | 240-300px | Standard size |

---

## Dark Mode Support

### CSS Variables Approach

```css
:root {
  --logo-url: url('./typedialog_logo_h.svg');
}

body.dark-mode {
  --logo-url: url('./typedialog_logo_h.svg');
  /* Logo works on both light and dark */
}

.header-logo {
  background-image: var(--logo-url);
  width: 240px;
  height: 64px;
}
```text

### SVG Direct Approach

```html
<!-- SVG works on both light/dark backgrounds -->
<img src="assets/typedialog_logo_h.svg" alt="TypeDialog">

<!-- If needing different versions: -->
<img
  src="assets/typedialog_logo_h.svg"
  alt="TypeDialog"
  class="logo-light"
  style="display: block;"
/>
<img
  src="assets/typedialog_logo_h_bn.svg"
  alt="TypeDialog"
  class="logo-dark"
  style="display: none;"
/>

<style>
  @media (prefers-color-scheme: dark) {
    .logo-light { display: none; }
    .logo-dark { display: block; }
  }
</style>
```text

---

## Performance Tips

### Optimize SVG

```html
<!-- Use smallest necessary size -->
<img src="assets/typedialog_icon_s.svg" alt="TypeDialog" width="32">

<!-- Avoid huge SVGs if PNG export available -->
<img src="assets/typedialog_logo_h.png" alt="TypeDialog" width="240">
```text

### CSS Loading

```css
/* Avoid multiple requests -->
.logo-light { background-image: url('./typedialog_logo_h.svg'); }
.logo-dark { background-image: url('./typedialog_logo_h_bn.svg'); }

/* Use data URIs for very small files */
.logo { background-image: url('data:image/svg+xml;...'); }
```text

### Caching

```html
<!-- SVGs are cacheable -->
<img
  src="assets/typedialog_logo_h.svg?v=1.0"
  alt="TypeDialog"
/>

<!-- Or use service workers for offline support -->
```text

---

## Accessibility

### Alt Text

```html
<!-- Always include meaningful alt text -->
<img src="assets/typedialog_logo_h.svg" alt="TypeDialog">

<!-- In links, alt is sometimes in parent -->
<a href="/">
  <img src="assets/typedialog_icon.svg" alt="Home">
</a>
```text

### ARIA Labels

```html
<!-- For complex contexts -->
<img
  src="assets/typedialog_logo_h.svg"
  alt="TypeDialog"
  aria-label="TypeDialog - Typed dialogs for inputs, forms and schemas you can trust"
/>
```text

### Animation Preferences

```css
/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  /* Option 1: Use static version */
  img.logo { content: url('./typedialog_logo_h_s.svg'); }

  /* Option 2: Disable animations */
  .logo * { animation: none !important; }
}
```text

---

## Common Issues & Solutions

### Favicon Not Showing

**Problem**: Favicon doesn't appear in browser tab
**Solutions**:
1. Clear browser cache (Ctrl+Shift+Delete)
2. Check file paths are correct
3. Ensure `<link>` tags are in `<head>`
4. Test in incognito mode

### SVG Scaling Issues

**Problem**: SVG doesn't scale smoothly
**Solutions**:
1. Verify `viewBox` attribute is set
2. Don't specify both `width/height` and `viewBox`
3. Use CSS for sizing:
   ```css
   img.logo { max-width: 100%; height: auto; }

Animation Not Working

Problem: Cursor blink not visible Solutions:

Use animated variant (no _s suffix)
Check browser supports CSS animations
Verify @keyframes in <style> block
Test in modern browser (Chrome 90+)

Color Issues in Print

Problem: Colors look different in print Solutions:

Use _bn (black & white) versions for print
Export to PDF instead of PNG
Adjust DPI (300 DPI for professional print)
Test color profile (RGB vs CMYK)

Export & File Conversion

PNG Export

# Using Inkscape
inkscape typedialog_logo_h.svg --export-filename=typedialog_logo_h.png

# Using ImageMagick
convert typedialog_logo_h.svg typedialog_logo_h.png

# Using online tool
# https://convertio.co/svg-png/
```text

### PDF Export

```bash
# Using Inkscape
inkscape typedialog_logo_h.svg --export-filename=typedialog_logo_h.pdf
```text

---

## Summary Checklist

- [ ] Choose variant based on use case
- [ ] Include alt text on all images
- [ ] Test sizing at target resolution
- [ ] Verify color contrast on backgrounds
- [ ] Check animation preference support
- [ ] Optimize file size for web
- [ ] Test on target browsers
- [ ] Cache-bust SVG if needed
- [ ] Document source file location
- [ ] Use consistent sizing across site

---

**Need Help?**
Refer to `BRANDING.md` for philosophy and `typedialog_logo_specs.html` for technical details.

10 KiB Raw Blame History

How to Use TypeDialog Logos

Choosing the Right Variant

Decision Tree

Quick Reference

Framework Examples

HTML/CSS

Animation Not Working

Color Issues in Print

Export & File Conversion

PNG Export

10 KiB

Raw Blame History