Skip to content

uatrend/pagekit

Repository files navigation

Pagekit

Symfony Vue UIkit Build Status Discord

Preview summary
Pagekit Dashboard Pagekit home page
Installer languages Installer buttons option-back-next Installer select demo content
Editor settings Storage Modal starage
Page Edit Page theme settings Site theme settings
Theme-one Blog page Position page

Homepage - Official home page.

This is an updated build Pagekit CMS (for developers).

Build includes the following updated components:

  • Pagekit CMS 1.0.18
  • Blog extension
  • Admin theme
  • Theme One
  • Demo content

Download the latest build or install from source before installation.
The installation procedure is the same as in the official documentation.

Marketplace functionality like install, update and remove works the same like in original version. Note! Before enabling extensions, update them for compatibility. Debug mode and debug panel work the same as in the main version.


Major changes:

Removed jQuery from all scripts. UIkit functions are used instead. Several bugs that are present in the original assembly have been fixed, some styles have been changed for ease of use. The mobile version has remained the same with minor changes.

Install from source

You can install Node dependencies, build the front-end components and run scripts via yarn.

Clone Repository

$ git clone [email protected]:uatrend/pagekit.git project-folder
$ cd project-folder

Install PHP dependencies

$ composer install

Install Node dependencies

$ yarn install

Scripts

Javascript watch or compile:

$ yarn watch-js
$ yarn compile-js

To build in production mode:

$ yarn compile-js --mode=production

LESS watch or compile:

$ yarn watch-less
$ yarn compile-less

JS/LESS watch at the same time:

$ yarn watch-all

ESlint lint or watch *.js/*.vue files:

$ yarn lint
$ yarn lint-watch

CLDR locale data:

$ yarn cldr

Copying required assets:

$ yarn assets

Admin theme

Theme is fully compatible with UIkit 3. Reworked scripts, layout and colors. Added side and top menus with dropdowns. Removed unused styles.

For individual markup of each page, added a class page in the body tag automatically generated through PHP.

For example, body class for dashboard page looks like:

<body class=“dashboard”>

and for system Settings:

<body class=“system-settings”>

Theme icons

uikit-icons.js are now used for Pagekit icons.

Editor Settings

You can choose the default editor in the system settings:

  • HTML Editor
  • Tinymce (with split mode option)
  • Codemirror

Moved all editors dependencies to editor/assets folder.

Theme Plugin

(added to core /app/system/app/lib/theme.js)

Ability to programmatically configure the buttons, dropdown lists, pagination and search form in the top menu for each component used (see code).

Example: dashboard - index.js

name: 'dashboard',

mixins: [Theme.Mixins.Helper],

...

theme: {
    hideEls: '#dashboard > div:first-child > div:last-child',
    elements() {
        var vm = this;
        return {
            addwidget: {
                scope: 'topmenu-left',
                type: 'dropdown',
                caption: 'Add Widget',
                class: 'uk-button uk-button-text',
                icon: { attrs: { 'uk-icon': 'triangle-down' }},
                dropdown: { options: () => 'mode: click' },
                items: () => vm.getTypes().map((type) => {
                    let props = {
                        on: {click: () => vm.add(type)},
                        caption: type.label,
                        class: 'uk-dropdown-close'
                    }
                    return {...type, ...props}
                }),
            }
        }
    }
}

Adding side menu items through PHP - $view->$data()

'view.data' => function ($event, $data) use ($app) {
    if (!$app->isAdmin()) {
        return;
    }
    $data->add('Theme', [
        'SidebarItems' => [
            'additem' => [
                'addpost' => [
                    'caption' => 'Add Post',
                    'attrs' => [
                        'href' => $app['url']->get('admin/blog/post/edit')
                    ],
                    'priority' => 1
                ]
            ]
        ]
    ]);
}

Thanks to Yootheme and developers!
Feel free to ask any questions - I will answer as much as possible.