view release on metacpan or  search on metacpan

doc/static-file-serving.md  view on Meta::CPAN

   extend those same prefixes, for example
   `~/.developer-dashboard/skills/<repo-name>/skills/<sub-skill>/dashboards/public/js/foo/bar.js`
   maps to `/js/<repo-name>/<sub-skill>/foo/bar.js`

Skill-local Ajax handlers use:

1. `~/.developer-dashboard/skills/<repo-name>/dashboards/ajax/...` through `/ajax/<repo-name>/...`
2. nested child skills under
   `~/.developer-dashboard/skills/<repo-name>/skills/<sub-skill>/dashboards/ajax/...`
   map to `/ajax/<repo-name>/<sub-skill>/...`

The URL paths stay the same regardless of which on-disk root satisfies the
request.

When a request such as `/js/example-skill/foo/bar.js`,
`/js/example-skill/sub-skill/foo/bar.js`, or `/ajax/example-skill/sub-skill/foo`
does not exist in the skill-local tree, Developer Dashboard falls back to the
normal nested saved-bookmark path `dashboards/public/...` or `dashboards/ajax/...`
instead of assuming the leading path segments must always belong to a skill.

Example layout:
```
~/.developer-dashboard/dashboard/public/
├── js/          - JavaScript files
├── css/         - CSS stylesheets
└── others/      - Other static assets (images, JSON, XML, etc)
```

## Usage

Reference static files in bookmark HTML or page instructions using these URL patterns:

### JavaScript Files
```html
<script src="/js/jquery.js"></script>
<script src="/js/my-custom-script.js"></script>
<script src="/js/example-skill/skill.js"></script>
<script src="/js/example-skill/sub-skill/path/file.js"></script>
```

### CSS Stylesheets
```html
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/custom-styles.css">
<link rel="stylesheet" href="/css/example-skill/skill.css">
<link rel="stylesheet" href="/css/example-skill/sub-skill/path/file.css">
```

### Other Assets (Images, Fonts, JSON, etc.)
```html
<img src="/others/logo.png">
<link rel="icon" href="/others/favicon.ico">
<script src="/others/config.json" type="application/json"></script>
<img src="/others/example-skill/icon.svg">
<img src="/others/example-skill/sub-skill/path/file.txt">
```

### Skill-local Ajax Endpoints
```html
<script>
var endpoints = {};
</script>
```

Skill bookmark CODE blocks can publish stable endpoints such as:

```perl
CODE1: Ajax jvar => 'endpoints.status', file => 'status', code => q{
print "ok\n";
};
```

When that page lives inside `~/.developer-dashboard/skills/example-skill/dashboards/...`,
the browser-facing endpoint becomes:

```text
/ajax/example-skill/status?type=text
```

Nested child skills extend that pattern:

```text
/ajax/example-skill/sub-skill/status?type=text
```

## Adding New Files

1. Copy your files to one of the appropriate directories:
   ```bash
   # JavaScript under the runtime public tree
   cp my-library.js ~/.developer-dashboard/dashboard/public/js/
   
   # CSS under the runtime public tree
   cp my-styles.css ~/.developer-dashboard/dashboard/public/css/
   
   # Images or other assets under the runtime public tree
   cp image.png ~/.developer-dashboard/dashboard/public/others/

   # Bookmark-local JavaScript shipped with saved pages
   cp jquery.js ~/.developer-dashboard/dashboards/public/js/
   ```

2. Reference them in your bookmark HTML:
   ```html
   <script src="/js/my-library.js"></script>
   <link rel="stylesheet" href="/css/my-styles.css">
   <img src="/others/image.png" alt="My Image">
   ```

## Supported File Types

The static file server automatically detects MIME types based on file extensions:

### JavaScript
- Extension: `.js`
- MIME Type: `application/javascript; charset=utf-8`

### CSS
- Extension: `.css`
- MIME Type: `text/css; charset=utf-8`

### JSON
- Extension: `.json`
- MIME Type: `application/json; charset=utf-8`

### XML
- Extension: `.xml`
- MIME Type: `application/xml; charset=utf-8`

### HTML
- Extension: `.html`, `.htm`
- MIME Type: `text/html; charset=utf-8`

### Text