# Site Package: Temel Kurulum

TYPO3 v13'te site package, projenizin temel yapılandırmasını ve görünümünü kontrol eden bir extension'dır.

---

## Site Package Nedir?

Site package, aşağıdakileri içeren bir TYPO3 extension'ıdır:

- **Fluid Templates** — HTML şablon dosyaları
- **TypoScript** — Yapılandırma
- **Site Sets** — v13 yapılandırma sistemi
- **CSS/JS** — Frontend dosyaları
- **Görseller** — Logo, favicon vb.
- **Content Blocks** — Özel içerik elemanları (opsiyonel)

---

## Dizin Yapısı

```
packages/testproject/
├── composer.json                       # Composer tanımı
├── ext_emconf.php                      # Extension meta bilgisi
├── Configuration/
│   ├── Sets/
│   │   └── SitePackage/
│   │       ├── config.yaml             # Site Set tanımı
│   │       ├── settings.yaml           # Site Set ayarları
│   │       └── setup.typoscript        # TypoScript setup
│   ├── TCA/
│   │   └── Overrides/
│   │       └── sys_template.php        # TypoScript şablon kaydı
│   └── TypoScript/
│       ├── constants.typoscript        # Sabitler
│       └── setup.typoscript            # Ana TypoScript setup
├── Resources/
│   ├── Private/
│   │   ├── Layouts/
│   │   │   └── Default.html           # Ana layout
│   │   ├── Partials/
│   │   │   ├── Header/
│   │   │   │   └── Main.html          # Header partial
│   │   │   └── Footer/
│   │   │       └── Main.html          # Footer partial
│   │   └── Templates/
│   │       └── Page/
│   │           └── Default.html        # Sayfa şablonu
│   └── Public/
│       ├── Css/
│       │   └── styles.css
│       ├── JavaScript/
│       │   └── main.js
│       └── Images/
│           ├── logo.svg
│           └── favicon.png
└── ContentBlocks/                       # Opsiyonel
    └── ContentElements/
        └── ...
```

---

## Adım Adım Oluşturma

### 1. composer.json

```json
{
    "name": "gfdhfhgfgg/testproject",
    "type": "typo3-cms-extension",
    "description": "TYPO3 v13 Site Package for this project",
    "license": "GPL-2.0-or-later",
    "require": {
        "typo3/cms-core": "^13.4",
        "typo3/cms-fluid-styled-content": "^13.4"
    },
    "autoload": {
        "psr-4": {
            "Gfdhfhgfgg\\Testproject\\": "Classes/"
        }
    },
    "extra": {
        "typo3/cms": {
            "extension-key": "testproject"
        }
    }
}
```

### 2. ext_emconf.php

```php
<?php

$EM_CONF[$_EXTKEY] = [
    'title' => 'My Site Package',
    'description' => 'TYPO3 v13 Site Package',
    'category' => 'templates',
    'version' => '1.0.0',
    'state' => 'stable',
    'author' => 'Developer Name',
    'author_email' => 'dev@example.com',
    'constraints' => [
        'depends' => [
            'typo3' => '13.4.0-13.99.99',
            'fluid_styled_content' => '13.4.0-13.99.99',
        ],
    ],
];
```

### 3. Site Set — config.yaml

`packages/testproject/Configuration/Sets/SitePackage/config.yaml`:

```yaml
name: gfdhfhgfgg/testproject
label: 'testproject'
dependencies:
  - typo3/fluid-styled-content
  - typo3/fluid-styled-content-css
```

### 4. Site Set — settings.yaml

`packages/testproject/Configuration/Sets/SitePackage/settings.yaml`:

```yaml
# Sitepackage ayarları (testproject'ten alınmış örnek)
styles:
  templates:
    layoutRootPath: "EXT:testproject/Resources/Private/ContentElements/Layouts/"
    partialRootPath: "EXT:testproject/Resources/Private/ContentElements/Partials/"
    templateRootPath: "EXT:testproject/Resources/Private/ContentElements/Templates/"

site:
  logo: "/assets/images/logo/logo.svg"

page:
  pageview:
    paths: "EXT:testproject/Resources/Private/PageView/"

  meta:
    viewport: "width=device-width, initial-scale=1"
    robots: "index,follow"
    apple-mobile-web-app-capable: "no"
    compatible: "IE=edge"

config:
  no_cache: "0"
  removeDefaultJS: "0"
  admPanel: "1"
  prefixLocalAnchors: "all"
  headerComment: "build by get.typo3.org/sitepackage"
  sendCacheHeaders: "1"
```

### 5. Site Set — setup.typoscript

`packages/testproject/Configuration/Sets/SitePackage/setup.typoscript`:

```typoscript
# Sayfa yapılandırması
page = PAGE
page {
    typeNum = 0

    # Fluid Template Engine
    10 = FLUIDTEMPLATE
    10 {
        templateName = Default
        templateRootPaths {
            10 = EXT:testproject/Resources/Private/PageView/Templates/
        }
        layoutRootPaths {
            10 = EXT:testproject/Resources/Private/PageView/Layouts/
        }
        partialRootPaths {
            10 = EXT:testproject/Resources/Private/PageView/Partials/
        }

        # Değişkenler
        variables {
            content < styles.content.get
            content_aside < styles.content.get
            content_aside.select.where = {#colPos}=1
        }

        # Data Processing
        dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
            10 {
                levels = 2
                as = mainMenu
            }
        }
    }

    # Meta bilgiler
    meta {
        viewport = width=device-width, initial-scale=1
        robots = index,follow
        charset = utf-8
    }

    # CSS dosyaları
    includeCSS {
        styles = EXT:testproject/Resources/Public/Css/layout.css
    }

    # JavaScript dosyaları
    includeJSFooter {
        main = EXT:testproject/Resources/Public/JavaScript/main.js
    }
}
```

### 6. Fluid Layout — Default.html

`Resources/Private/Layouts/Default.html`:

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">

<!DOCTYPE html>
<html lang="{f:translate(key:'language.code', default:'tr')}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <f:render section="HeaderAssets" optional="true" />
</head>
<body>
    <f:render partial="Header/Main" arguments="{mainMenu: mainMenu}" />

    <main>
        <f:render section="Main" />
    </main>

    <f:render partial="Footer/Main" />
    <f:render section="FooterAssets" optional="true" />
</body>
</html>

</html>
```

### 7. Fluid Template — Default.html

`Resources/Private/Templates/Page/Default.html`:

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">

<f:layout name="Default" />

<f:section name="Main">
    <div class="container mx-auto px-4">
        <f:format.raw>{content}</f:format.raw>
    </div>
</f:section>

</html>
```

---

## Composer ile Projeye Ekleme

### 1. Root composer.json'a Repository Ekle

```json
{
    "repositories": [
        {
            "type": "path",
            "url": "./packages/*",
            "options": {
                "symlink": true
            }
        }
    ]
}
```

### 2. Paketi Yükle

```bash
ddev composer require gfdhfhgfgg/testproject:@dev
```

### 3. Site Configuration'da Aktif Et

`config/sites/main/config.yaml`:

```yaml
base: 'https://typo3v13.ddev.site/'
rootPageId: 1
dependencies:
  - gfdhfhgfgg/testproject
  - typo3/fluid-styled-content
  - typo3/fluid-styled-content-css
  - typo3/seo-sitemap
languages:
  -
    title: Türkçe
    enabled: true
    languageId: 0
    base: /
    locale: tr_TR.UTF-8
    navigationTitle: TR
    flag: tr
```

### 4. Cache Temizle

```bash
ddev exec vendor/bin/typo3 cache:flush
```

---

## Doğrulama

1. Backend'e giriş yapın
2. **Site Management > Sites** modülünde site set'in aktif olduğunu doğrulayın
3. Root sayfaya içerik ekleyip frontend'de görüntüleyin
4. HTML kaynağında şablon yapınızın yüklendiğini kontrol edin

---

## Kaynaklar

- [TYPO3 Sitepackage Tutorial](https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/)
- [Site Sets Dokümantasyonu](https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/SiteHandling/SiteSets.html)
