# Path Aliases & Real File Paths

## Path Aliases & Real File Paths

Techlo uses import aliases heavily, and that can be confusing because the imports often do not match the real directory names.

For example, you will see imports like:

```ts

```

But there is no `src/components/` directory.

### The Actual Alias Mapping

The aliases are defined in `tsconfig.json`:

```json
"paths": {
  "@/components/*": ["./src/layouts/components/*"],
  "@/shortcodes/*": ["./src/layouts/shortcodes/*"],
  "@/helpers/*": ["./src/layouts/helpers/*"],
  "@/*": ["./src/*"]
}
```

### What That Means

- `@/components/...` really means `src/layouts/components/...`
- `@/shortcodes/...` really means `src/layouts/shortcodes/...`
- `@/helpers/...` really means `src/layouts/helpers/...`
- `@/...` is the `src/` root (so `@/lib/...`, `@/styles/...`, `@/layouts/...`)

### Common Examples

#### This import:

```ts

```

#### Actually points to:

```text
src/layouts/components/global/Logo.astro
```

#### This import:

```ts

```

#### Actually points to:

```text
src/layouts/shortcodes/Accordion.astro
```

### Why This Matters

When a doc or code comment tells you to edit `@/components/...`, you need to know the real file lives under `src/layouts/components/...`.

Without that mapping, users often think files are missing or duplicated.

### Quick Navigation Cheat Sheet

- page shells: `src/layouts/Base.astro`
- reusable sections: `src/layouts/components/sections/`
- widgets: `src/layouts/components/widgets/`
- global UI (header, footer, logo): `src/layouts/components/global/`
- MDX shortcodes: `src/layouts/shortcodes/`
- helpers (icons): `src/layouts/helpers/`
- utilities: `src/lib/utils/`

Once you understand the alias layer, the project becomes much easier to navigate.