Dotkernel Light is a good starting point for a project if you want to have full control over the functionality it contains. It easily grows into something more complex with the integration of packages based on your requirements.

Its out-of-box functionality is suitable for a presentation site:

• Routing
• Templating
• Error handling
• Tests and code quality checks

Presentation sites don’t require features that are present in Dotkernel Frontend. The goal of Dotkernel Light is to have no clutter, so these features are removed:

• Everything related to the database
• Sessions/Cookies/Flash messages
• Authentication/Authorization
• Dependency Injection
• Mail related stuff
• Navigation
• CORS
• Forms/Validators/InputFilters
• User module
• Contact module
• Plugin module

The goal of this article

In this article we explore how to use Dotkernel Light for a simple presentation site. We will mention what files to focus on to teach you how to add more pages of content to your site and how to manage their assets.

Adding new pages

The first step is to add the new pages in src/Page/src/Controller/PageController.php. This means adding an Action function for each page, as seen below.

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

The url for the new page in this example is /page/example-page.

Each page has its own template, so the next step is to create the template files in the src/Page/templates/page/ folder. For the example above, the src/Page/templates/page/example-template.html.twig file was created. We won’t include the entire code here, just the basic building blocks. The content block is where your page copy goes.

{% 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.

If you haven’t already done so, make sure the npm is installed and running during your updates with npm run watch or run this command after the edits are completed npm run prod.

The assets should be copied under the src/App/assets/ folder.
These are the default asset folders:

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

Optional items

Twitter and OpenGraph cards

If you want to promote the pages on other platforms, a helpful item is the header section in the src/App/templates/layout/default.html.twig file. This is where the Twitter (X) and OpenGraph cards should be placed.

Make sure to update all items based on your page content.

In the example:

• {{ url('home') }} is the URL for the homepage, but you can also use this code to generate the url for other pages, just like in the canonical URL {% block canonical %}{{ url(routeName ?? null) }}{% endblock %}
  • The block item is present to mitigate for not-found pages, e.g. when the url is typed incorrectly
• The image from {{ url('home') }}images/app/My-image.png is found in public/images/app/My-image.png, but it is 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 of the pages, in the header. To edit it, go to src/App/templates/layout/default.html.twig and update the items under id="navbarHeader". You can use the below as an example.

<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 also 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 of the pages, search for <footer class="app-footer"> in the src/App/templates/layout/default.html.twig template. We won’t include an example here, since the content is usually basic HTML and CSS with twig elements already covered in this article.

The result of your hard work

Whew, well done! That’s all there is to it.

Now you should have a basic idea on how to work on a presentation site. You know how to expand the site with more pages, where to place the assets and how to promote the site.

Useful links

• See a working example dotkernel.org
• Dotkernel Light
• More from Dotkernel

---