Dotkernel Light: the best choice for your presentation site

What's included vs. removed

Included out of the box	Removed (not needed for a presentation site)
Routing	Everything related to the database
Templating	Sessions/Cookies/Flash messages
Error handling	Authentication/Authorization
Tests and code quality checks	Dependency Injection
	Mail related stuff
	Navigation
	CORS
	Forms/Validators/InputFilters
	User module
	Contact module
	Plugin module

Adding new pages

1. Add an Action function for the page in src/Page/src/Controller/PageController.php, for example:

public function examplePageAction(): ResponseInterface
{
    return new HtmlResponse(
        $this->template->render('page::example-template')
    );
}

The URL for this example page would be /page/example-page.

2. Create the matching template in src/Page/templates/page/ - for the example above, src/Page/templates/page/example-template.html.twig. Put the page copy inside the content block:

{% extends '@layout/default.html.twig' %}

{% block title %}Page Title{% endblock %}

{% block page_title %}{% endblock %}

{% block content %}
    <div class="page-intro">
        <div class="container">
            <h2>Add title here!</h2>
        </div>
    </div>

    <div>
    Add cool content here!
    </div>
{% endblock %}

Make sure to check the header for any fonts your content requires.

3. Place assets under src/App/assets/, in the default folders:

   • src/App/assets/fonts
   • src/App/assets/images
   • src/App/assets/js
   • src/App/assets/scss

   Make sure npm is installed and running during updates with npm run watch, or run npm run prod after edits are completed.

Optional items

Twitter and OpenGraph cards

To promote pages on other platforms, edit the header section in src/App/templates/layout/default.html.twig, where the Twitter (X) and OpenGraph cards are placed. Update all items based on your page content.

• {{ url('home') }} generates the homepage URL, and the same pattern is used for other pages, as in the canonical URL block: {% block canonical %}{{ url(routeName ?? null) }}{% endblock %} (the block is present to handle not-found pages, e.g. mistyped URLs).
• An image referenced as {{ url('home') }}images/app/My-image.png is found at public/images/app/My-image.png, copied there by the npm script from src/App/assets/images/PHP-REST-API.png.

<!-- Twitter card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@example">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Basic description">
<meta name="twitter:image" content="{{ url('home') }}images/app/My-image.png">
<meta name="twitter:image:alt" content="Image alt">

<!-- OpenGraph card -->
<meta property="og:title" content="Page title"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="{{ url('home') }}"/>
<meta property="og:image" content="{{ url('home') }}images/app/My-image.png"/>
<meta property="og:description" content="Basic description"/>

Top menu

This menu is displayed on all pages, in the header. Edit it in src/App/templates/layout/default.html.twig, under id="navbarHeader":

<div class="menu" id="navbarHeader">
    <ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" target="_blank" href="https://first.example.com/">First Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" target="_blank" href="https://second.example.com/">Second Link</a>
    </li>
    </ul>
</div>

You can replace the nav-item class for the li elements with button-border for a link that looks more like a button.

Footer

To edit the footer on all pages, search for <footer class="app-footer"> in src/App/templates/layout/default.html.twig. Its content is usually basic HTML and CSS with twig elements already covered above.

Frequently Asked Questions