# Project Structure

This page covers the repo layout, the naming convention for example folders, and how the landing page ties every example together.

## Layout

| Path | Content |
|------|---------|
| `index.html` | Landing page: initialized with PDRenderKit, renders `README.md` with PDMarkdownKit 1.6.0 |
| `README.md` | Landing page content, including the 38-entry example gallery |
| `target/<YYYYMMDD>/` | One example; the folder name is its creation date |
| `image/<YYYYMMDD>.jpg` | Example preview screenshot, named after the folder |
| `image/website.jpg` | Landing page Open Graph image |
| `css/index.css` | Landing page styles |
| `sitemap.xml` | URLs for the landing page and all 38 examples |
| `.gitattributes` | Excludes `.md` / `.scss` / `.css` from GitHub language statistics |

## Example Folder Contents

| Path | Description |
|------|-------------|
| `index.html` | Example entry; some examples ship several HTML files (e.g. `login.html`, `search.html` in `20240625`) |
| `view/`, `views/` | HTML fragments loaded dynamically by the framework (e.g. `20230616`, `20230719`) |
| `css/` | Compiled SCSS output, the file `index.html` actually loads |
| `sass/` | Style sources: an entry file plus `_*.scss` partials |
| `js/` | Example interaction logic and sample data |
| `image/` | The example's own assets |

## Landing Page and Examples

```mermaid
graph TB
    I[index.html] -->|fetch| R[README.md]
    I --> K[PDRenderKit 1.5.2]
    I --> M[PDMarkdownKit 1.6.0]
    R --> M
    M --> G[Example gallery]
    G --> P["image/&lt;YYYYMMDD&gt;.jpg"]
    G -->|click| T["target/&lt;YYYYMMDD&gt;/index.html"]
    T --> C[css/ compiled output]
    T --> J[js/ interaction logic]
    T --> F["PDRenderKit / QuickUI CDN"]
    S[sass/] -->|Dart Sass| C
```

## Related

- [Styling Workflow](/styling-workflow)
- [Frameworks](/frameworks)