diff --git a/index.html b/index.html index a0afeff..b9a5522 100644 --- a/index.html +++ b/index.html @@ -373,31 +373,31 @@
Table of Contents
  • - Create Pages + Create Pages
  • - Set Up Twitter and OpenGraph Cards + Set Up Twitter and OpenGraph Cards
  • - Edit the Top Menu + Edit the Top Menu
  • - Edit the Footer + Edit the Footer
  • - Manage Assets + Manage Assets
    • @@ -613,5 +613,5 @@
    Search
    diff --git a/search/search_index.json b/search/search_index.json index 5311db3..bdab971 100644 --- a/search/search_index.json +++ b/search/search_index.json @@ -1 +1 @@ -{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"../../README.md","title":"Home"},{"location":"#readmemd","text":"","title":"../../README.md"},{"location":"v1/introduction/","text":"Dotkernel light Minimal project to generate a simple website.","title":"Introduction"},{"location":"v1/introduction/#dotkernel-light","text":"Minimal project to generate a simple website.","title":"Dotkernel light"},{"location":"v1/core-features/npm-commands/","text":"NPM Commands To install dependencies into the node_modules directory run this command. npm install If npm install fails, this could be caused by user permissions of npm. Recommendation is to install npm through Node Version Manager . The watch command compiles the components then watches the files and recompiles when one of them changes: npm run watch When you are done making changes to your code, this command compiles the assets locally, minifies them and makes them ready for production: npm run prod","title":"NPM Commands"},{"location":"v1/core-features/npm-commands/#npm-commands","text":"To install dependencies into the node_modules directory run this command. npm install If npm install fails, this could be caused by user permissions of npm. Recommendation is to install npm through Node Version Manager . The watch command compiles the components then watches the files and recompiles when one of them changes: npm run watch When you are done making changes to your code, this command compiles the assets locally, minifies them and makes them ready for production: npm run prod","title":"NPM Commands"},{"location":"v1/how-tos/create-pages/","text":"Creating pages The action function 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 page content 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 %} Grouping templates The default grouping is under the page folder. This item is defined in src/Page/src/ConfigProvider.php in getTemplates() , like seen below. public function getTemplates(): array { return [ 'paths' => [ 'page' => [__DIR__ . '/../templates/page'], ], ]; } If you intend to group your templates into more folders, simply add another element under paths . It's not necessary to match the key name with the folder name. public function getTemplates(): array { return [ 'paths' => [ 'page' => [__DIR__ . '/../templates/page'], 'how-tos' => [__DIR__ . '/../templates/how-tos'], 'info' => [__DIR__ . '/../templates/data'], ], ]; } Accessing the page The url for the new page in this example is /page/example-page . Because of the way routing works, dot (.), dash (-), underscore (_) are filtered from the action parameter in the routing /page[/{action}] . As a result, the examplePageAction function in called.","title":"Creating pages"},{"location":"v1/how-tos/create-pages/#creating-pages","text":"","title":"Creating pages"},{"location":"v1/how-tos/create-pages/#the-action-function","text":"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') ); }","title":"The action function"},{"location":"v1/how-tos/create-pages/#the-page-content","text":"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 %}","title":"The page content"},{"location":"v1/how-tos/create-pages/#accessing-the-page","text":"The url for the new page in this example is /page/example-page . Because of the way routing works, dot (.), dash (-), underscore (_) are filtered from the action parameter in the routing /page[/{action}] . As a result, the examplePageAction function in called.","title":"Accessing the page"},{"location":"v1/how-tos/edit-footer/","text":"Footer To edit the footer on all the pages, search for <footer class=\"app-footer\"> in the src/App/templates/layout/default.html.twig template. The content is usually basic HTML and CSS with twig . Below is an example of a footer that groups urls under two categories and columns. It also contains the copyright row. <footer class=\"app-footer\"> <div class=\"container container-border\"> <div class=\"row\"> <div class=\"col-md-9\"> <div class=\"footer_head\"> <h2>Category 1</h2> </div> <div class=\"row\"> <div class=\"col-md-6 dk_widget\"> <p class=\"footer-item-title\"> Column 1 </p> <p class=\"footer-item-link margin-small\"> <a href=\"https://first.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> First Link </a> </p> <p class=\"footer-item-link margin-small\"> <a href=\"https://second.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Second Link </a> </p> </div> <div class=\"col-md-6 dk_widget\"> <p class=\"footer-item-title\"> Column 2 </p> <p class=\"footer-item-link margin-large\"> <a href=\"https://third.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Third Link </a> </p> </div> </div> </div> <div class=\"col-md-3\"> <div class=\"footer_head\"> <h2>Category 2</h2> </div> <p class=\"footer-item-support margin-small\"> <a href=\"https://fourth.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Fourth Link </a> </p> <p class=\"footer-item-support margin-small\"> <a href=\"https://fifth.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Fifth Link </a> </p> </div> </div> <div class=\"row\"> <p class=\"footer-headline\"> © {{ 'now' | date('Y') }} by <a href=\"{{ url('home') }}\">My Project</a> </p> </div> </div> </footer>","title":"Footer"},{"location":"v1/how-tos/edit-footer/#footer","text":"To edit the footer on all the pages, search for <footer class=\"app-footer\"> in the src/App/templates/layout/default.html.twig template. The content is usually basic HTML and CSS with twig . Below is an example of a footer that groups urls under two categories and columns. It also contains the copyright row. <footer class=\"app-footer\"> <div class=\"container container-border\"> <div class=\"row\"> <div class=\"col-md-9\"> <div class=\"footer_head\"> <h2>Category 1</h2> </div> <div class=\"row\"> <div class=\"col-md-6 dk_widget\"> <p class=\"footer-item-title\"> Column 1 </p> <p class=\"footer-item-link margin-small\"> <a href=\"https://first.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> First Link </a> </p> <p class=\"footer-item-link margin-small\"> <a href=\"https://second.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Second Link </a> </p> </div> <div class=\"col-md-6 dk_widget\"> <p class=\"footer-item-title\"> Column 2 </p> <p class=\"footer-item-link margin-large\"> <a href=\"https://third.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Third Link </a> </p> </div> </div> </div> <div class=\"col-md-3\"> <div class=\"footer_head\"> <h2>Category 2</h2> </div> <p class=\"footer-item-support margin-small\"> <a href=\"https://fourth.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Fourth Link </a> </p> <p class=\"footer-item-support margin-small\"> <a href=\"https://fifth.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Fifth Link </a> </p> </div> </div> <div class=\"row\"> <p class=\"footer-headline\"> © {{ 'now' | date('Y') }} by <a href=\"{{ url('home') }}\">My Project</a> </p> </div> </div> </footer>","title":"Footer"},{"location":"v1/how-tos/edit-top-menu/","text":"Edit the top menu The top menu is displayed on all 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 dropdown\"> <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"pageDropdown\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">Grouped Pages</a> <div class=\"dropdown-menu\" aria-labelledby=\"pageDropdown\"> <a class=\"dropdown-item\" href=\"{{ url('page', {action: 'home'}) }}\">Home</a> <a class=\"dropdown-item\" href=\"https://www.example.com/docs\">Docs</a> </div> </li> <li class=\"nav-item\"> <a class=\"nav-link\" target=\"_blank\" href=\"{{ url('page', {action: 'firstLink'}) }}\">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> Each li element is listed as an item in the top menu. There are two different types of elements in the example: The Grouped Pages group several urls. When you click on the item, the elements grouped under it are listed and can be accessed. They can be internal and/or external links. The First Link and Second Link are regular links, one an internal link and the other an external one. You can also replace the nav-item class for the li elements with button-border for a link that looks more like a button.","title":"Edit the top menu"},{"location":"v1/how-tos/edit-top-menu/#edit-the-top-menu","text":"The top menu is displayed on all 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 dropdown\"> <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"pageDropdown\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">Grouped Pages</a> <div class=\"dropdown-menu\" aria-labelledby=\"pageDropdown\"> <a class=\"dropdown-item\" href=\"{{ url('page', {action: 'home'}) }}\">Home</a> <a class=\"dropdown-item\" href=\"https://www.example.com/docs\">Docs</a> </div> </li> <li class=\"nav-item\"> <a class=\"nav-link\" target=\"_blank\" href=\"{{ url('page', {action: 'firstLink'}) }}\">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> Each li element is listed as an item in the top menu. There are two different types of elements in the example: The Grouped Pages group several urls. When you click on the item, the elements grouped under it are listed and can be accessed. They can be internal and/or external links. The First Link and Second Link are regular links, one an internal link and the other an external one. You can also replace the nav-item class for the li elements with button-border for a link that looks more like a button.","title":"Edit the top menu"},{"location":"v1/how-tos/manage-assets/","text":"Manage Assets If you haven't already done so, make sure npm is installed. You can keep it running during your updates with npm run watch or run this command after the edits are completed npm run prod . What are assets? Assets are various files used by your content: Images, Fonts, JavaScript codes, SCSS. Assets source and destination The source of these files is the src/App/assets/ folder: src/App/assets/images src/App/assets/fonts src/App/assets/js src/App/assets/scss The npm script processes these files and copies or builds files under the public folder. You should not manage the items from the above folders manually. The npm script will delete/replace the files when run. While the images and fonts folders are copied as is, the js and scss are minimized: scss files are minimized under public/js/app.css . js files are minimized under public/js/app.js . The above items are by default used in the src/App/templates/layout/default.html.twig file. <link href=\"{{ asset('css/app.css') }}\" rel=\"stylesheet\" /> ... <script src=\"{{ asset('js/app.js') }}\"></script> The source and destination folders are configured in the webpack.config.js file. Browser caching of js and css One thing of note is that browsers cache the js and css files. When you push changes to one or both the files, you may notice that updating the site keeps the old version of the files. A simple solution to force the browsers to download the newer version of the files is to add a version parameter in the url. Whenever you commit changes to those files, make sure to increase the value of the v parameter. <link href=\"{{ asset('css/cls_dk.css?v=3') }}\" rel=\"stylesheet\" /> ... <script src=\"{{ asset('js/cls_dk.js?v=5') }}\"></script> The values 3 and 5 are provided as an example. The important thing is to use values for each file that you haven't used before, so incrementing the value for v is a simple way to track each change.","title":"Manage Assets"},{"location":"v1/how-tos/manage-assets/#manage-assets","text":"If you haven't already done so, make sure npm is installed. You can keep it running during your updates with npm run watch or run this command after the edits are completed npm run prod .","title":"Manage Assets"},{"location":"v1/how-tos/manage-assets/#what-are-assets","text":"Assets are various files used by your content: Images, Fonts, JavaScript codes, SCSS.","title":"What are assets?"},{"location":"v1/how-tos/manage-assets/#assets-source-and-destination","text":"The source of these files is the src/App/assets/ folder: src/App/assets/images src/App/assets/fonts src/App/assets/js src/App/assets/scss The npm script processes these files and copies or builds files under the public folder. You should not manage the items from the above folders manually. The npm script will delete/replace the files when run. While the images and fonts folders are copied as is, the js and scss are minimized: scss files are minimized under public/js/app.css . js files are minimized under public/js/app.js . The above items are by default used in the src/App/templates/layout/default.html.twig file. <link href=\"{{ asset('css/app.css') }}\" rel=\"stylesheet\" /> ... <script src=\"{{ asset('js/app.js') }}\"></script> The source and destination folders are configured in the webpack.config.js file.","title":"Assets source and destination"},{"location":"v1/how-tos/manage-assets/#browser-caching-of-js-and-css","text":"One thing of note is that browsers cache the js and css files. When you push changes to one or both the files, you may notice that updating the site keeps the old version of the files. A simple solution to force the browsers to download the newer version of the files is to add a version parameter in the url. Whenever you commit changes to those files, make sure to increase the value of the v parameter. <link href=\"{{ asset('css/cls_dk.css?v=3') }}\" rel=\"stylesheet\" /> ... <script src=\"{{ asset('js/cls_dk.js?v=5') }}\"></script> The values 3 and 5 are provided as an example. The important thing is to use values for each file that you haven't used before, so incrementing the value for v is a simple way to track each change.","title":"Browser caching of js and css"},{"location":"v1/how-tos/twitter-opengraph-cards/","text":"Twitter and OpenGraph cards If you want to promote your pages on other platforms, you can post Twitter (X) and OpenGraph cards in the header section in the src/App/templates/layout/default.html.twig file. Make sure to update all items based on your page content. <!-- 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\"/> 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/PHP-REST-API.png , but it is copied there by the npm script from src/App/assets/images/PHP-REST-API.png .","title":"Twitter and OpenGraph cards"},{"location":"v1/how-tos/twitter-opengraph-cards/#twitter-and-opengraph-cards","text":"If you want to promote your pages on other platforms, you can post Twitter (X) and OpenGraph cards in the header section in the src/App/templates/layout/default.html.twig file. Make sure to update all items based on your page content. <!-- 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\"/> 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/PHP-REST-API.png , but it is copied there by the npm script from src/App/assets/images/PHP-REST-API.png .","title":"Twitter and OpenGraph cards"},{"location":"v1/installation/composer/","text":"Composer Installation of Packages Composer is required to install DotKernel Light . You can install Composer starting here . Install dependencies composer install The setup script will prompt you for the below configuration setting: Please select which config file you wish to inject 'Laminas\\HttpHandlerRunner\\ConfigProvider' into: [0] Do not inject [1] config/config.php Make your selection (default is 1): Simply select [0] Do not inject , because DotKernel includes its own ConfigProvider which already contains the prompted configurations. The next question is: Remember this option for other packages of the same type? (y/N) Type y here, and hit Enter .","title":"Composer"},{"location":"v1/installation/composer/#composer-installation-of-packages","text":"Composer is required to install DotKernel Light . You can install Composer starting here .","title":"Composer Installation of Packages"},{"location":"v1/installation/composer/#install-dependencies","text":"composer install The setup script will prompt you for the below configuration setting: Please select which config file you wish to inject 'Laminas\\HttpHandlerRunner\\ConfigProvider' into: [0] Do not inject [1] config/config.php Make your selection (default is 1): Simply select [0] Do not inject , because DotKernel includes its own ConfigProvider which already contains the prompted configurations. The next question is: Remember this option for other packages of the same type? (y/N) Type y here, and hit Enter .","title":"Install dependencies"},{"location":"v1/installation/configuration-files/","text":"Configuration Files Duplicate config/autoload/local.php.dist as config/autoload/local.php .","title":"Configuration Files"},{"location":"v1/installation/configuration-files/#configuration-files","text":"Duplicate config/autoload/local.php.dist as config/autoload/local.php .","title":"Configuration Files"},{"location":"v1/installation/development-mode/","text":"Development mode If you're installing the project for development, make sure you have development mode enabled, by running: composer development-enable You can disable development mode by running: composer development-disable You can check if you have development mode enabled by running: composer development-status","title":"Development Mode"},{"location":"v1/installation/development-mode/#development-mode","text":"If you're installing the project for development, make sure you have development mode enabled, by running: composer development-enable You can disable development mode by running: composer development-disable You can check if you have development mode enabled by running: composer development-status","title":"Development mode"},{"location":"v1/installation/faq/","text":"Frequently Asked Questions How do I fix common permission issues? If running your project you encounter some permission issues, follow the below steps. Errors PHP Fatal error: Uncaught InvalidArgumentException: The directory \"/var/www/ example.local /html/data\" is not writable... PHP Fatal error: Uncaught InvalidArgumentException: The directory \"/var/www/ example.local /html/data/cache\" is not writable... Fix: chmod -R 777 data Error PHP Fatal error: Uncaught ErrorException: fopen(/var/www/ example.local /config/autoload/../../log/error-log- yyyy-mm-dd.log ): Failed to open stream: Permission denied... Fix: chmod -R 777 log","title":"FAQ"},{"location":"v1/installation/faq/#frequently-asked-questions","text":"","title":"Frequently Asked Questions"},{"location":"v1/installation/faq/#how-do-i-fix-common-permission-issues","text":"If running your project you encounter some permission issues, follow the below steps.","title":"How do I fix common permission issues?"},{"location":"v1/installation/getting-started/","text":"Clone the project Recommended development environment If you are using Windows as OS on your machine, you can use WSL2 as development environment. Read more on dotkernel.com . Using your terminal, navigate inside the directory you want to download the project files into. Make sure that the directory is empty before proceeding to the download process. Once there, run the following command: git clone https://github.com/dotkernel/light.git .","title":"Getting Started"},{"location":"v1/installation/getting-started/#clone-the-project","text":"","title":"Clone the project"},{"location":"v1/installation/getting-started/#recommended-development-environment","text":"If you are using Windows as OS on your machine, you can use WSL2 as development environment. Read more on dotkernel.com . Using your terminal, navigate inside the directory you want to download the project files into. Make sure that the directory is empty before proceeding to the download process. Once there, run the following command: git clone https://github.com/dotkernel/light.git .","title":"Recommended development environment"},{"location":"v1/installation/running-the-application/","text":"Running the application We recommend running your applications in WSL: make sure you have WSL installed on your system currently we provide a distro implementations for AlmaLinux9 install the application in a virtualhost as recommended by the chosen distro set $baseUrl in config/autoload/local.php to the address of the virtualhost run the application by opening the virtualhost address in your browser You should see the DotKernel Light welcome page. If you are getting exceptions or errors regarding some missing services, try running the following command: sudo php bin/clear-config-cache.php If data/cache/config-cache.php is present, that config will be loaded regardless of the ConfigAggregator::ENABLE_CACHE configuration in config/autoload/mezzio.global.php","title":"Running the Application"},{"location":"v1/installation/running-the-application/#running-the-application","text":"We recommend running your applications in WSL: make sure you have WSL installed on your system currently we provide a distro implementations for AlmaLinux9 install the application in a virtualhost as recommended by the chosen distro set $baseUrl in config/autoload/local.php to the address of the virtualhost run the application by opening the virtualhost address in your browser You should see the DotKernel Light welcome page. If you are getting exceptions or errors regarding some missing services, try running the following command: sudo php bin/clear-config-cache.php If data/cache/config-cache.php is present, that config will be loaded regardless of the ConfigAggregator::ENABLE_CACHE configuration in config/autoload/mezzio.global.php","title":"Running the application"},{"location":"v1/introduction/file-structure/","text":"File structure Dotkernel Light follows the PSR-4 standards. It is a good practice to standardize the file structure of projects. When using DotKernel Light, the following structure is installed by default: Main directories bin - various helper scripts config - various configuration files data - should contain project-related data log - storage of log files generated by dot-error-log library public - publicly visible files. The webserver need to have this folder as www-document root folder. src - should contain the source code files test - should contain the test files bin directory This directory contains one file, clear-config-cache.php which removes the config cache file ( data/cache/config-cache.php - available only when development mode is enabled). config directory This directory contains all application-related config files: config.php : here you will register ConfigProviders after installing packages container.php : main service container, providing access to all registered services development.config.php.dist : gets symlinked as development.config.php when enabling development mode - activates debug mode pipeline.php : contains a list of middlewares, in their order of execution twig-cs-fixer.php : configuration file for Twig code style checker/fixer autoload directory This directory contains all service-related local and global config files: app.global.php : sets the application name dependencies.global.php : config file to set global dependencies that should be accessible by all modules development.local.php.dist : gets symlinked as development.local.php when enabling development mode - activates error handlers error-handling.global.php : configures and activates error logs local.php.dist : local config file where you can overwrite application name and URL mezzio.global.php : Mezzio core config file templates.global.php : dotkernel/dot-twigrenderer config file data directory This directory is a storage for project data files and service caches. Inside you will find: cache : Twig's cache directory AVOID storing sensitive data on VCS. log directory This directory stores daily log files. When you access the application from the browser, (if not already created) a new log file gets created in the format specified in the config/autoload/error-handling.global.php config file under the stream array key. public directory This directory contains all publicly available assets and serves as the entry point of the application: css : contains app.css , a single file containing the entire CSS code collected from all modules, in a minified form fonts : contains app , a directory containing custom font files collected from all modules images : contains app , a directory containing all image files collected from all modules js : contains app.js , a single file containing the entire JavaScript code collected from all modules, in a minified form .htacess : server configuration file used by Apache web server - this file enables the URL rewrite functionality index.php : the application's main entry point robots.txt.dist : a sample robots.txt file, providing settings allow/deny bot access to certain areas of your application - activate it by duplicating the file as robots.txt and comment out the lines that don't match your environment src directory This directory contains two directories, called modules: App Page App directory This is the App module. It contains all generic functionalities your application depends on. The assets directory contains all generic assets, reusable across the application. The src contains ConfigProvider.php , a file that sets template path aliases ( getTemplates ) but can also provide dependencies ( getDependencies ). The templates : contains misc components like the home page, custom error pages, template partials and the default layout template. Page directory This is the Page module. It contains page-related components for your application. The src directory contains the following items: Controller : contains module controllers Factory : contains module factories, which are used to provide ready-to-use instances of certain classes Service : contains module service files, which contain classes that provide custom functionalities ConfigProvider.php - provides module configuration data RoutesDelegator.php - stored main routes found in the module The templates directory contains the page directory, with template files for various web pages. Special purpose directories .github - contains workflow files .laminas-ci - contains Laminas Continuous Integration (CI) workflow files","title":"File Structure"},{"location":"v1/introduction/file-structure/#file-structure","text":"Dotkernel Light follows the PSR-4 standards. It is a good practice to standardize the file structure of projects. When using DotKernel Light, the following structure is installed by default:","title":"File structure"},{"location":"v1/introduction/file-structure/#main-directories","text":"bin - various helper scripts config - various configuration files data - should contain project-related data log - storage of log files generated by dot-error-log library public - publicly visible files. The webserver need to have this folder as www-document root folder. src - should contain the source code files test - should contain the test files","title":"Main directories"},{"location":"v1/introduction/file-structure/#special-purpose-directories","text":".github - contains workflow files .laminas-ci - contains Laminas Continuous Integration (CI) workflow files","title":"Special purpose directories"},{"location":"v1/introduction/packages/","text":"Packages dotkernel/dot-controller - Provides base classes for action based controllers similar to Laminas controller component dotkernel/dot-errorhandler - Logging Error Handler for Middleware Applications dotkernel/dot-twigrenderer - DotKernel component providing twig extensions and customizations friendsofphp/proxy-manager-lts - Fork of ocramius/proxy-manager laminas/laminas-component-installer - Composer plugin for injecting modules and configuration providers into application configuration laminas/laminas-config-aggregator - Lightweight library for collecting and merging configuration from different sources mezzio/mezzio - PSR-15 Middleware Microframework mezzio/mezzio-fastroute - FastRoute integration for Mezzio","title":"Packages"},{"location":"v1/introduction/packages/#packages","text":"dotkernel/dot-controller - Provides base classes for action based controllers similar to Laminas controller component dotkernel/dot-errorhandler - Logging Error Handler for Middleware Applications dotkernel/dot-twigrenderer - DotKernel component providing twig extensions and customizations friendsofphp/proxy-manager-lts - Fork of ocramius/proxy-manager laminas/laminas-component-installer - Composer plugin for injecting modules and configuration providers into application configuration laminas/laminas-config-aggregator - Lightweight library for collecting and merging configuration from different sources mezzio/mezzio - PSR-15 Middleware Microframework mezzio/mezzio-fastroute - FastRoute integration for Mezzio","title":"Packages"},{"location":"v1/introduction/server-requirements/","text":"Server Requirements For production, we highly recommend a *nix based system. Webserver Apache >= 2.2 mod_rewrite .htaccess support (AllowOverride All) The repository includes a default .htaccess file in the public folder. Nginx You need to convert the provided Apache related .htaccess file into Nginx configuration instructions. PHP >= 8.2 Both mod_php and FCGI (FPM) are supported. Required Settings and Modules & Extensions memory_limit >= 128M upload_max_filesize and post_max_size >= 100M (depending on your data) mbstring Composer (added to $PATH) Recommended extensions opcache dom - if working with markup files structure (html, xml etc.) simplexml - working with xml files gd, exif - if working with images zlib, zip, bz2 - if compressing files curl (required if APIs are used)","title":"Server Requirements"},{"location":"v1/introduction/server-requirements/#server-requirements","text":"For production, we highly recommend a *nix based system.","title":"Server Requirements"},{"location":"v1/introduction/server-requirements/#webserver","text":"","title":"Webserver"},{"location":"v1/introduction/server-requirements/#php-82","text":"Both mod_php and FCGI (FPM) are supported.","title":"PHP >= 8.2"},{"location":"v1/introduction/server-requirements/#required-settings-and-modules-extensions","text":"memory_limit >= 128M upload_max_filesize and post_max_size >= 100M (depending on your data) mbstring Composer (added to $PATH)","title":"Required Settings and Modules & Extensions"},{"location":"v1/introduction/server-requirements/#recommended-extensions","text":"opcache dom - if working with markup files structure (html, xml etc.) simplexml - working with xml files gd, exif - if working with images zlib, zip, bz2 - if compressing files curl (required if APIs are used)","title":"Recommended extensions"}]} \ No newline at end of file +{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"../../README.md","title":"Home"},{"location":"#readmemd","text":"","title":"../../README.md"},{"location":"v1/introduction/","text":"Dotkernel light Minimal project to generate a simple website.","title":"Introduction"},{"location":"v1/introduction/#dotkernel-light","text":"Minimal project to generate a simple website.","title":"Dotkernel light"},{"location":"v1/core-features/npm-commands/","text":"NPM Commands To install dependencies into the node_modules directory run this command. npm install If npm install fails, this could be caused by user permissions of npm. Recommendation is to install npm through Node Version Manager . The watch command compiles the components then watches the files and recompiles when one of them changes: npm run watch When you are done making changes to your code, this command compiles the assets locally, minifies them and makes them ready for production: npm run prod","title":"NPM Commands"},{"location":"v1/core-features/npm-commands/#npm-commands","text":"To install dependencies into the node_modules directory run this command. npm install If npm install fails, this could be caused by user permissions of npm. Recommendation is to install npm through Node Version Manager . The watch command compiles the components then watches the files and recompiles when one of them changes: npm run watch When you are done making changes to your code, this command compiles the assets locally, minifies them and makes them ready for production: npm run prod","title":"NPM Commands"},{"location":"v1/how-tos/create-pages/","text":"Creating pages The action function 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 page content 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 %} Grouping templates The default grouping is under the page folder. This item is defined in src/Page/src/ConfigProvider.php in getTemplates() , like seen below. public function getTemplates(): array { return [ 'paths' => [ 'page' => [__DIR__ . '/../templates/page'], ], ]; } If you intend to group your templates into more folders, simply add another element under paths . It's not necessary to match the key name with the folder name. public function getTemplates(): array { return [ 'paths' => [ 'page' => [__DIR__ . '/../templates/page'], 'how-tos' => [__DIR__ . '/../templates/how-tos'], 'info' => [__DIR__ . '/../templates/data'], ], ]; } Accessing the page The url for the new page in this example is /page/example-page . Because of the way routing works, dot (.), dash (-), underscore (_) are filtered from the action parameter in the routing /page[/{action}] . As a result, the examplePageAction function in called.","title":"Create Pages"},{"location":"v1/how-tos/create-pages/#creating-pages","text":"","title":"Creating pages"},{"location":"v1/how-tos/create-pages/#the-action-function","text":"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') ); }","title":"The action function"},{"location":"v1/how-tos/create-pages/#the-page-content","text":"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 %}","title":"The page content"},{"location":"v1/how-tos/create-pages/#accessing-the-page","text":"The url for the new page in this example is /page/example-page . Because of the way routing works, dot (.), dash (-), underscore (_) are filtered from the action parameter in the routing /page[/{action}] . As a result, the examplePageAction function in called.","title":"Accessing the page"},{"location":"v1/how-tos/edit-footer/","text":"Footer To edit the footer on all the pages, search for <footer class=\"app-footer\"> in the src/App/templates/layout/default.html.twig template. The content is usually basic HTML and CSS with twig . Below is an example of a footer that groups urls under two categories and columns. It also contains the copyright row. <footer class=\"app-footer\"> <div class=\"container container-border\"> <div class=\"row\"> <div class=\"col-md-9\"> <div class=\"footer_head\"> <h2>Category 1</h2> </div> <div class=\"row\"> <div class=\"col-md-6 dk_widget\"> <p class=\"footer-item-title\"> Column 1 </p> <p class=\"footer-item-link margin-small\"> <a href=\"https://first.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> First Link </a> </p> <p class=\"footer-item-link margin-small\"> <a href=\"https://second.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Second Link </a> </p> </div> <div class=\"col-md-6 dk_widget\"> <p class=\"footer-item-title\"> Column 2 </p> <p class=\"footer-item-link margin-large\"> <a href=\"https://third.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Third Link </a> </p> </div> </div> </div> <div class=\"col-md-3\"> <div class=\"footer_head\"> <h2>Category 2</h2> </div> <p class=\"footer-item-support margin-small\"> <a href=\"https://fourth.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Fourth Link </a> </p> <p class=\"footer-item-support margin-small\"> <a href=\"https://fifth.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Fifth Link </a> </p> </div> </div> <div class=\"row\"> <p class=\"footer-headline\"> © {{ 'now' | date('Y') }} by <a href=\"{{ url('home') }}\">My Project</a> </p> </div> </div> </footer>","title":"Edit the Footer"},{"location":"v1/how-tos/edit-footer/#footer","text":"To edit the footer on all the pages, search for <footer class=\"app-footer\"> in the src/App/templates/layout/default.html.twig template. The content is usually basic HTML and CSS with twig . Below is an example of a footer that groups urls under two categories and columns. It also contains the copyright row. <footer class=\"app-footer\"> <div class=\"container container-border\"> <div class=\"row\"> <div class=\"col-md-9\"> <div class=\"footer_head\"> <h2>Category 1</h2> </div> <div class=\"row\"> <div class=\"col-md-6 dk_widget\"> <p class=\"footer-item-title\"> Column 1 </p> <p class=\"footer-item-link margin-small\"> <a href=\"https://first.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> First Link </a> </p> <p class=\"footer-item-link margin-small\"> <a href=\"https://second.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Second Link </a> </p> </div> <div class=\"col-md-6 dk_widget\"> <p class=\"footer-item-title\"> Column 2 </p> <p class=\"footer-item-link margin-large\"> <a href=\"https://third.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Third Link </a> </p> </div> </div> </div> <div class=\"col-md-3\"> <div class=\"footer_head\"> <h2>Category 2</h2> </div> <p class=\"footer-item-support margin-small\"> <a href=\"https://fourth.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Fourth Link </a> </p> <p class=\"footer-item-support margin-small\"> <a href=\"https://fifth.example.com/\" target=\"_blank\"> <img src=\"{{ asset('images/app/icon/hand.svg') }}\"> Fifth Link </a> </p> </div> </div> <div class=\"row\"> <p class=\"footer-headline\"> © {{ 'now' | date('Y') }} by <a href=\"{{ url('home') }}\">My Project</a> </p> </div> </div> </footer>","title":"Footer"},{"location":"v1/how-tos/edit-top-menu/","text":"Edit the top menu The top menu is displayed on all 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 dropdown\"> <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"pageDropdown\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">Grouped Pages</a> <div class=\"dropdown-menu\" aria-labelledby=\"pageDropdown\"> <a class=\"dropdown-item\" href=\"{{ url('page', {action: 'home'}) }}\">Home</a> <a class=\"dropdown-item\" href=\"https://www.example.com/docs\">Docs</a> </div> </li> <li class=\"nav-item\"> <a class=\"nav-link\" target=\"_blank\" href=\"{{ url('page', {action: 'firstLink'}) }}\">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> Each li element is listed as an item in the top menu. There are two different types of elements in the example: The Grouped Pages group several urls. When you click on the item, the elements grouped under it are listed and can be accessed. They can be internal and/or external links. The First Link and Second Link are regular links, one an internal link and the other an external one. You can also replace the nav-item class for the li elements with button-border for a link that looks more like a button.","title":"Edit the Top Menu"},{"location":"v1/how-tos/edit-top-menu/#edit-the-top-menu","text":"The top menu is displayed on all 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 dropdown\"> <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"pageDropdown\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">Grouped Pages</a> <div class=\"dropdown-menu\" aria-labelledby=\"pageDropdown\"> <a class=\"dropdown-item\" href=\"{{ url('page', {action: 'home'}) }}\">Home</a> <a class=\"dropdown-item\" href=\"https://www.example.com/docs\">Docs</a> </div> </li> <li class=\"nav-item\"> <a class=\"nav-link\" target=\"_blank\" href=\"{{ url('page', {action: 'firstLink'}) }}\">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> Each li element is listed as an item in the top menu. There are two different types of elements in the example: The Grouped Pages group several urls. When you click on the item, the elements grouped under it are listed and can be accessed. They can be internal and/or external links. The First Link and Second Link are regular links, one an internal link and the other an external one. You can also replace the nav-item class for the li elements with button-border for a link that looks more like a button.","title":"Edit the top menu"},{"location":"v1/how-tos/manage-assets/","text":"Manage Assets If you haven't already done so, make sure npm is installed. You can keep it running during your updates with npm run watch or run this command after the edits are completed npm run prod . What are assets? Assets are various files used by your content: Images, Fonts, JavaScript codes, SCSS. Assets source and destination The source of these files is the src/App/assets/ folder: src/App/assets/images src/App/assets/fonts src/App/assets/js src/App/assets/scss The npm script processes these files and copies or builds files under the public folder. You should not manage the items from the above folders manually. The npm script will delete/replace the files when run. While the images and fonts folders are copied as is, the js and scss are minimized: scss files are minimized under public/js/app.css . js files are minimized under public/js/app.js . The above items are by default used in the src/App/templates/layout/default.html.twig file. <link href=\"{{ asset('css/app.css') }}\" rel=\"stylesheet\" /> ... <script src=\"{{ asset('js/app.js') }}\"></script> The source and destination folders are configured in the webpack.config.js file. Browser caching of js and css One thing of note is that browsers cache the js and css files. When you push changes to one or both the files, you may notice that updating the site keeps the old version of the files. A simple solution to force the browsers to download the newer version of the files is to add a version parameter in the url. Whenever you commit changes to those files, make sure to increase the value of the v parameter. <link href=\"{{ asset('css/cls_dk.css?v=3') }}\" rel=\"stylesheet\" /> ... <script src=\"{{ asset('js/cls_dk.js?v=5') }}\"></script> The values 3 and 5 are provided as an example. The important thing is to use values for each file that you haven't used before, so incrementing the value for v is a simple way to track each change.","title":"Manage Assets"},{"location":"v1/how-tos/manage-assets/#manage-assets","text":"If you haven't already done so, make sure npm is installed. You can keep it running during your updates with npm run watch or run this command after the edits are completed npm run prod .","title":"Manage Assets"},{"location":"v1/how-tos/manage-assets/#what-are-assets","text":"Assets are various files used by your content: Images, Fonts, JavaScript codes, SCSS.","title":"What are assets?"},{"location":"v1/how-tos/manage-assets/#assets-source-and-destination","text":"The source of these files is the src/App/assets/ folder: src/App/assets/images src/App/assets/fonts src/App/assets/js src/App/assets/scss The npm script processes these files and copies or builds files under the public folder. You should not manage the items from the above folders manually. The npm script will delete/replace the files when run. While the images and fonts folders are copied as is, the js and scss are minimized: scss files are minimized under public/js/app.css . js files are minimized under public/js/app.js . The above items are by default used in the src/App/templates/layout/default.html.twig file. <link href=\"{{ asset('css/app.css') }}\" rel=\"stylesheet\" /> ... <script src=\"{{ asset('js/app.js') }}\"></script> The source and destination folders are configured in the webpack.config.js file.","title":"Assets source and destination"},{"location":"v1/how-tos/manage-assets/#browser-caching-of-js-and-css","text":"One thing of note is that browsers cache the js and css files. When you push changes to one or both the files, you may notice that updating the site keeps the old version of the files. A simple solution to force the browsers to download the newer version of the files is to add a version parameter in the url. Whenever you commit changes to those files, make sure to increase the value of the v parameter. <link href=\"{{ asset('css/cls_dk.css?v=3') }}\" rel=\"stylesheet\" /> ... <script src=\"{{ asset('js/cls_dk.js?v=5') }}\"></script> The values 3 and 5 are provided as an example. The important thing is to use values for each file that you haven't used before, so incrementing the value for v is a simple way to track each change.","title":"Browser caching of js and css"},{"location":"v1/how-tos/twitter-opengraph-cards/","text":"Twitter and OpenGraph cards If you want to promote your pages on other platforms, you can post Twitter (X) and OpenGraph cards in the header section in the src/App/templates/layout/default.html.twig file. Make sure to update all items based on your page content. <!-- 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\"/> 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/PHP-REST-API.png , but it is copied there by the npm script from src/App/assets/images/PHP-REST-API.png .","title":"Set Up Twitter and OpenGraph Cards"},{"location":"v1/how-tos/twitter-opengraph-cards/#twitter-and-opengraph-cards","text":"If you want to promote your pages on other platforms, you can post Twitter (X) and OpenGraph cards in the header section in the src/App/templates/layout/default.html.twig file. Make sure to update all items based on your page content. <!-- 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\"/> 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/PHP-REST-API.png , but it is copied there by the npm script from src/App/assets/images/PHP-REST-API.png .","title":"Twitter and OpenGraph cards"},{"location":"v1/installation/composer/","text":"Composer Installation of Packages Composer is required to install DotKernel Light . You can install Composer starting here . Install dependencies composer install The setup script will prompt you for the below configuration setting: Please select which config file you wish to inject 'Laminas\\HttpHandlerRunner\\ConfigProvider' into: [0] Do not inject [1] config/config.php Make your selection (default is 1): Simply select [0] Do not inject , because DotKernel includes its own ConfigProvider which already contains the prompted configurations. The next question is: Remember this option for other packages of the same type? (y/N) Type y here, and hit Enter .","title":"Composer"},{"location":"v1/installation/composer/#composer-installation-of-packages","text":"Composer is required to install DotKernel Light . You can install Composer starting here .","title":"Composer Installation of Packages"},{"location":"v1/installation/composer/#install-dependencies","text":"composer install The setup script will prompt you for the below configuration setting: Please select which config file you wish to inject 'Laminas\\HttpHandlerRunner\\ConfigProvider' into: [0] Do not inject [1] config/config.php Make your selection (default is 1): Simply select [0] Do not inject , because DotKernel includes its own ConfigProvider which already contains the prompted configurations. The next question is: Remember this option for other packages of the same type? (y/N) Type y here, and hit Enter .","title":"Install dependencies"},{"location":"v1/installation/configuration-files/","text":"Configuration Files Duplicate config/autoload/local.php.dist as config/autoload/local.php .","title":"Configuration Files"},{"location":"v1/installation/configuration-files/#configuration-files","text":"Duplicate config/autoload/local.php.dist as config/autoload/local.php .","title":"Configuration Files"},{"location":"v1/installation/development-mode/","text":"Development mode If you're installing the project for development, make sure you have development mode enabled, by running: composer development-enable You can disable development mode by running: composer development-disable You can check if you have development mode enabled by running: composer development-status","title":"Development Mode"},{"location":"v1/installation/development-mode/#development-mode","text":"If you're installing the project for development, make sure you have development mode enabled, by running: composer development-enable You can disable development mode by running: composer development-disable You can check if you have development mode enabled by running: composer development-status","title":"Development mode"},{"location":"v1/installation/faq/","text":"Frequently Asked Questions How do I fix common permission issues? If running your project you encounter some permission issues, follow the below steps. Errors PHP Fatal error: Uncaught InvalidArgumentException: The directory \"/var/www/ example.local /html/data\" is not writable... PHP Fatal error: Uncaught InvalidArgumentException: The directory \"/var/www/ example.local /html/data/cache\" is not writable... Fix: chmod -R 777 data Error PHP Fatal error: Uncaught ErrorException: fopen(/var/www/ example.local /config/autoload/../../log/error-log- yyyy-mm-dd.log ): Failed to open stream: Permission denied... Fix: chmod -R 777 log","title":"FAQ"},{"location":"v1/installation/faq/#frequently-asked-questions","text":"","title":"Frequently Asked Questions"},{"location":"v1/installation/faq/#how-do-i-fix-common-permission-issues","text":"If running your project you encounter some permission issues, follow the below steps.","title":"How do I fix common permission issues?"},{"location":"v1/installation/getting-started/","text":"Clone the project Recommended development environment If you are using Windows as OS on your machine, you can use WSL2 as development environment. Read more on dotkernel.com . Using your terminal, navigate inside the directory you want to download the project files into. Make sure that the directory is empty before proceeding to the download process. Once there, run the following command: git clone https://github.com/dotkernel/light.git .","title":"Getting Started"},{"location":"v1/installation/getting-started/#clone-the-project","text":"","title":"Clone the project"},{"location":"v1/installation/getting-started/#recommended-development-environment","text":"If you are using Windows as OS on your machine, you can use WSL2 as development environment. Read more on dotkernel.com . Using your terminal, navigate inside the directory you want to download the project files into. Make sure that the directory is empty before proceeding to the download process. Once there, run the following command: git clone https://github.com/dotkernel/light.git .","title":"Recommended development environment"},{"location":"v1/installation/running-the-application/","text":"Running the application We recommend running your applications in WSL: make sure you have WSL installed on your system currently we provide a distro implementations for AlmaLinux9 install the application in a virtualhost as recommended by the chosen distro set $baseUrl in config/autoload/local.php to the address of the virtualhost run the application by opening the virtualhost address in your browser You should see the DotKernel Light welcome page. If you are getting exceptions or errors regarding some missing services, try running the following command: sudo php bin/clear-config-cache.php If data/cache/config-cache.php is present, that config will be loaded regardless of the ConfigAggregator::ENABLE_CACHE configuration in config/autoload/mezzio.global.php","title":"Running the Application"},{"location":"v1/installation/running-the-application/#running-the-application","text":"We recommend running your applications in WSL: make sure you have WSL installed on your system currently we provide a distro implementations for AlmaLinux9 install the application in a virtualhost as recommended by the chosen distro set $baseUrl in config/autoload/local.php to the address of the virtualhost run the application by opening the virtualhost address in your browser You should see the DotKernel Light welcome page. If you are getting exceptions or errors regarding some missing services, try running the following command: sudo php bin/clear-config-cache.php If data/cache/config-cache.php is present, that config will be loaded regardless of the ConfigAggregator::ENABLE_CACHE configuration in config/autoload/mezzio.global.php","title":"Running the application"},{"location":"v1/introduction/file-structure/","text":"File structure Dotkernel Light follows the PSR-4 standards. It is a good practice to standardize the file structure of projects. When using DotKernel Light, the following structure is installed by default: Main directories bin - various helper scripts config - various configuration files data - should contain project-related data log - storage of log files generated by dot-error-log library public - publicly visible files. The webserver need to have this folder as www-document root folder. src - should contain the source code files test - should contain the test files bin directory This directory contains one file, clear-config-cache.php which removes the config cache file ( data/cache/config-cache.php - available only when development mode is enabled). config directory This directory contains all application-related config files: config.php : here you will register ConfigProviders after installing packages container.php : main service container, providing access to all registered services development.config.php.dist : gets symlinked as development.config.php when enabling development mode - activates debug mode pipeline.php : contains a list of middlewares, in their order of execution twig-cs-fixer.php : configuration file for Twig code style checker/fixer autoload directory This directory contains all service-related local and global config files: app.global.php : sets the application name dependencies.global.php : config file to set global dependencies that should be accessible by all modules development.local.php.dist : gets symlinked as development.local.php when enabling development mode - activates error handlers error-handling.global.php : configures and activates error logs local.php.dist : local config file where you can overwrite application name and URL mezzio.global.php : Mezzio core config file templates.global.php : dotkernel/dot-twigrenderer config file data directory This directory is a storage for project data files and service caches. Inside you will find: cache : Twig's cache directory AVOID storing sensitive data on VCS. log directory This directory stores daily log files. When you access the application from the browser, (if not already created) a new log file gets created in the format specified in the config/autoload/error-handling.global.php config file under the stream array key. public directory This directory contains all publicly available assets and serves as the entry point of the application: css : contains app.css , a single file containing the entire CSS code collected from all modules, in a minified form fonts : contains app , a directory containing custom font files collected from all modules images : contains app , a directory containing all image files collected from all modules js : contains app.js , a single file containing the entire JavaScript code collected from all modules, in a minified form .htacess : server configuration file used by Apache web server - this file enables the URL rewrite functionality index.php : the application's main entry point robots.txt.dist : a sample robots.txt file, providing settings allow/deny bot access to certain areas of your application - activate it by duplicating the file as robots.txt and comment out the lines that don't match your environment src directory This directory contains two directories, called modules: App Page App directory This is the App module. It contains all generic functionalities your application depends on. The assets directory contains all generic assets, reusable across the application. The src contains ConfigProvider.php , a file that sets template path aliases ( getTemplates ) but can also provide dependencies ( getDependencies ). The templates : contains misc components like the home page, custom error pages, template partials and the default layout template. Page directory This is the Page module. It contains page-related components for your application. The src directory contains the following items: Controller : contains module controllers Factory : contains module factories, which are used to provide ready-to-use instances of certain classes Service : contains module service files, which contain classes that provide custom functionalities ConfigProvider.php - provides module configuration data RoutesDelegator.php - stored main routes found in the module The templates directory contains the page directory, with template files for various web pages. Special purpose directories .github - contains workflow files .laminas-ci - contains Laminas Continuous Integration (CI) workflow files","title":"File Structure"},{"location":"v1/introduction/file-structure/#file-structure","text":"Dotkernel Light follows the PSR-4 standards. It is a good practice to standardize the file structure of projects. When using DotKernel Light, the following structure is installed by default:","title":"File structure"},{"location":"v1/introduction/file-structure/#main-directories","text":"bin - various helper scripts config - various configuration files data - should contain project-related data log - storage of log files generated by dot-error-log library public - publicly visible files. The webserver need to have this folder as www-document root folder. src - should contain the source code files test - should contain the test files","title":"Main directories"},{"location":"v1/introduction/file-structure/#special-purpose-directories","text":".github - contains workflow files .laminas-ci - contains Laminas Continuous Integration (CI) workflow files","title":"Special purpose directories"},{"location":"v1/introduction/packages/","text":"Packages dotkernel/dot-controller - Provides base classes for action based controllers similar to Laminas controller component dotkernel/dot-errorhandler - Logging Error Handler for Middleware Applications dotkernel/dot-twigrenderer - DotKernel component providing twig extensions and customizations friendsofphp/proxy-manager-lts - Fork of ocramius/proxy-manager laminas/laminas-component-installer - Composer plugin for injecting modules and configuration providers into application configuration laminas/laminas-config-aggregator - Lightweight library for collecting and merging configuration from different sources mezzio/mezzio - PSR-15 Middleware Microframework mezzio/mezzio-fastroute - FastRoute integration for Mezzio","title":"Packages"},{"location":"v1/introduction/packages/#packages","text":"dotkernel/dot-controller - Provides base classes for action based controllers similar to Laminas controller component dotkernel/dot-errorhandler - Logging Error Handler for Middleware Applications dotkernel/dot-twigrenderer - DotKernel component providing twig extensions and customizations friendsofphp/proxy-manager-lts - Fork of ocramius/proxy-manager laminas/laminas-component-installer - Composer plugin for injecting modules and configuration providers into application configuration laminas/laminas-config-aggregator - Lightweight library for collecting and merging configuration from different sources mezzio/mezzio - PSR-15 Middleware Microframework mezzio/mezzio-fastroute - FastRoute integration for Mezzio","title":"Packages"},{"location":"v1/introduction/server-requirements/","text":"Server Requirements For production, we highly recommend a *nix based system. Webserver Apache >= 2.2 mod_rewrite .htaccess support (AllowOverride All) The repository includes a default .htaccess file in the public folder. Nginx You need to convert the provided Apache related .htaccess file into Nginx configuration instructions. PHP >= 8.2 Both mod_php and FCGI (FPM) are supported. Required Settings and Modules & Extensions memory_limit >= 128M upload_max_filesize and post_max_size >= 100M (depending on your data) mbstring Composer (added to $PATH) Recommended extensions opcache dom - if working with markup files structure (html, xml etc.) simplexml - working with xml files gd, exif - if working with images zlib, zip, bz2 - if compressing files curl (required if APIs are used)","title":"Server Requirements"},{"location":"v1/introduction/server-requirements/#server-requirements","text":"For production, we highly recommend a *nix based system.","title":"Server Requirements"},{"location":"v1/introduction/server-requirements/#webserver","text":"","title":"Webserver"},{"location":"v1/introduction/server-requirements/#php-82","text":"Both mod_php and FCGI (FPM) are supported.","title":"PHP >= 8.2"},{"location":"v1/introduction/server-requirements/#required-settings-and-modules-extensions","text":"memory_limit >= 128M upload_max_filesize and post_max_size >= 100M (depending on your data) mbstring Composer (added to $PATH)","title":"Required Settings and Modules & Extensions"},{"location":"v1/introduction/server-requirements/#recommended-extensions","text":"opcache dom - if working with markup files structure (html, xml etc.) simplexml - working with xml files gd, exif - if working with images zlib, zip, bz2 - if compressing files curl (required if APIs are used)","title":"Recommended extensions"}]} \ No newline at end of file diff --git a/v1/core-features/npm-commands/index.html b/v1/core-features/npm-commands/index.html index 251ff3e..2b8b016 100644 --- a/v1/core-features/npm-commands/index.html +++ b/v1/core-features/npm-commands/index.html @@ -389,31 +389,31 @@
    Table of Contents
  • - Create Pages + Create Pages
  • - Set Up Twitter and OpenGraph Cards + Set Up Twitter and OpenGraph Cards
  • - Edit the Top Menu + Edit the Top Menu
  • - Edit the Footer + Edit the Footer
  • - Manage Assets + Manage Assets
    • @@ -479,6 +479,12 @@

    NPM Commands

  • + +
    • diff --git a/v1/how-tos/create-pages/index.html b/v1/how-tos/create-pages/index.html index b396be5..e26098e 100644 --- a/v1/how-tos/create-pages/index.html +++ b/v1/how-tos/create-pages/index.html @@ -22,7 +22,7 @@ - Creating pages - light - DotKernel Documentation + Create Pages - light - DotKernel Documentation @@ -150,8 +150,20 @@
  • light
    • + + + + + + + + +
  • How tos
    • + + + -
  • Creating pages
    • +
  • Create Pages
    • @@ -376,32 +388,32 @@
    Table of Contents