README

This extension serves as a base to customize a TYPO3-website using the template pizpalue.

Composer

To use the extension in a composer environment different approaches are available. Following two ways are further outlined:

Without version control

Don't add buepro/typor-user-pizpalue as a requirement to the composer configuration
Copy the extension manually to the extension directory (typo3conf/ext/user_pizpalue)

Add the following autoload declaration to the composer configuration from the web site:

"autoload": {
     "psr-4": {
         "Buepro\\UserPizpalue\\": "public/typo3conf/ext/user_pizpalue/Classes/"
     }
 }

Run composer dumpautoload to generate the autoload info

With version control

Add your repository to the composer configuration from the web site:

"repositories": [
    {
         "type": "vcs",
         "url": "https://user@domain.ch/path_to_git/typo3-user-pizpalue.git"
    }
],

Update the require section from the composer configuration from the web site:
```
"require": {
    "buepro/typo3-user-pizpalue": "dev-mybranch",
}
```
Run composer update

Usage

When starting a new project create a new git-branch and just commit to that branch. The master branch should always be used to start new projects.

To increase quality work progress might be committed and documented. Documentation has its home in the folder Documentation. A changelog can be created with the following steps:

In a shell go to the Build directory
Run npm install (only needed, if not already done)
Run grunt doc

Customizations

TypoScript (TS)

Customizations typically start by adapting the ts constants and ts setup. Frequently used configurations are collected in the folder Configuration/TypoScript/Default. You might use them to get started by copying the needed fragments to Configuration/TypoScript/constants.typoscript or Configuration/TypoScript/setup.typoscript. The inclusion from the default TS (see @import...) might be deleted.

CSS/SCSS

Style declarations are maintained in the folder Resources/Public/Scss. For stylesheets to be embedded TS needs to be setup. See page.includeCSS for further details.

Icon font

It might become handy to create a customized icon font. Ideally it contains all used icons from the website. To generate an icon font the icons need to be available in svg-format. Unfortunately not all svg-formats lead to the desired result hence some testing might be needed. An icon font might be created by following these steps:

Copy all svg-icons to the folder Resources/Public/Icons/Font
In a shell go to the Build directory
Run npm install (only needed, if not already done)
Run grunt iconfont

Upon creating the icon font its resources can be found in Resources/Public/Fonts. Next the font needs to be embedded with the following TS setup:

page {
    includeCSSLibs {
        pizpalueicon >
        upicon = EXT:user_pizpalue/Resources/Public/Fonts/upicon.min.css
        upicon {
            fontLoader {
                families {
                    0 = UpIcon
                }
                enabled = 1
            }
        }
    }
}

Now your ready to use the icon font in the markup: <i class="upicon upicon-custom1"></i> would render an icon showing the graphic defined by custom1.svg.

Layouts/Templates/Partials

They are maintained in Resources/Private. As an example to add a new page template follow these steps:

Create the template in the directory Resources/Private/Templates/Page
Enable the template in the TS constant declaration

user_pizpalue {
    page.fluidtemplate {
        templateRootPath = EXT:user_pizpalue/Resources/Private/Templates/Page/
    }
}

Development

For smaller projects the following workflow might be of interest:

Setup development environment

Adjust the header comment in .php_cs.php
Create a ddev container: ddev start
Enter the container: docker exec -it -u root -w /var/www/html ddev-up-web bash
Set environment variable: export COMPOSER=composer-dev.json && printenv | grep COMPOSER=
Install composer packages: composer install

Work in development environment

Optional, check the code: composer check:php
Correct the code: composer fix:php

Remove development environment

Uninstall composer packages: composer uninstall
Unset the environment variable: unset COMPOSER | grep COMPOSER=
Leave the container: exit
Stop the container: ddev stop

Available linters

TyposScript: composer lint:ts
Yml and yaml: composer lint:yaml
Json: composer lint:json

Coding guidelines

Use the coding guidelines defined by TYPO3 .
Use up, Up, up-, upc- as package related prefixes

Frequently used

For coding

For documentation

buepro / typo3-user-pizpalue

Maintainers

Details