Bagaimana Cara Kustomisasi Layout Panel Mecha?

[yuliakbard]

Bagaimana cara mengcustom Layout Panel Mecha? misal dari 1 side dijadikan 2 side

[taufik-nurrohman]

Kalau mas pasang ekstensi test.panel itu sudah ada sampelnya di rute /.test/grids. Pada intinya kita buat dulu baris/kolomnya terus baru kita isi dengan kontennya. Konten bisa dibuat manual atau ngambil dari data panel yang sudah ada.

Kurang lebih formatnya seperti ini:

[
    'type' => 'rows',
    'lot' => [
        'row-1' => [
            'type' => 'row',
            'lot' => [
                'columns' => [
                    'type' => 'columns',
                    'lot' => [
                        'column-1' => [
                            'type' => 'column',
                            'size' => 4 / 12,
                            'content' => '<p>Kolom 1.</p>',
                            'stack' => 10
                        ],
                        'column-2' => [
                            'type' => 'column',
                            'size' => 8 / 12,
                            'content' => '<p>Kolom 2.</p>',
                            'stack' => 20
                        ]
                    ]
                ]
            ],
            'stack' => 10
        ],
        'row-2' => [
            'type' => 'row',
            'lot' => [ /* … */ ],
            'stack' => 20
        ],
        'row-3' => [
            'type' => 'row',
            'lot' => [ /* … */ ],
            'stack' => 30
        ]
    ]
]

Komponen dimulai dari rows. Setiap rows berisi beberapa row, dan setiap row berisi beberapa columns. Kemudian, setiap columns akan berisi beberapa column. Lebar kolom standar bisa ditentukan melalui properti size dengan logika kelipatan 12 (1/12, 2/12, 3/12, 4/12, 5/12, 6/12, 7/12, 8/12, 9/12, 10/12, 11/12, 12/12).

┌─ rows ──────────────────────┐
│ ┌─ row ───────────────────┐ │
│ │ ┌─ columns ───────────┐ │ │
│ │ │ ┌─ column 4/12 ───┐ │ │ │
│ │ │ │ <p>Kolom 1.</p> │ │ │ │
│ │ │ └─────────────────┘ │ │ │
│ │ │ ┌─ column 8/12 ───┐ │ │ │
│ │ │ │ <p>Kolom 2.</p> │ │ │ │
│ │ │ └─────────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────┘ │
│ ┌─ row ───────────────────┐ │
│ │ …                       │ │
│ └─────────────────────────┘ │
│ ┌─ row ───────────────────┐ │
│ │ …                       │ │
│ └─────────────────────────┘ │
│ ┌─ row ───────────────────┐ │
│ │ …                       │ │
│ └─────────────────────────┘ │
└─────────────────────────────┘

Bisa dilakukan pengetesan di bawah desk kalau mau:

$_['lot']['rows'] = [
    'type' => 'rows',
    'lot' => [ /* … */ ],
    'stack' => 20
];

Kalau hasilnya sudah terlihat dan sudah mantap, bagian desk bisa dibuang atau dipindahkan ke salah satu kolom:

$desk = $_['lot']['desk']['lot'];

$_['lot']['rows']['stack'] = 10;
$_['lot']['rows']['lot']['row-1']['lot']['columns']['lot']['column-1']['lot'] = [ /* … */ ];
$_['lot']['rows']['lot']['row-1']['lot']['columns']['lot']['column-2']['lot'] = $desk;

unset($_['lot']['rows']['lot']['row-1']['lot']['columns']['lot']['column-1']['content']);
unset($_['lot']['rows']['lot']['row-1']['lot']['columns']['lot']['column-2']['content']);
unset($_['lot']['desk']);

[bungomedia]

Selamat siang mas, saya baru mau rencana menggunakan mecha agar cms ini bisa lebih familiar di masyarakat umum, yang ingin saya tanyakan, dimanakah saya harus memulainya atau cara memasangnya, dan apakah keunggulan utama menggunakan cms ini, apakah ada fokus ke toko online, berita atau hanya untuk menulis/blog.

demikian yang ingin saya tanyakan, mohon maaf jika ada kesalahan

[taufik-nurrohman]

Siang. Untuk pemula lebih baik ambil yang versi stabil dulu bisa diunduh dari website https://mecha-cms.com, cuma dari segi fitur agak outdated karena sudah beku dari tahun lalu. Cara instalasi bisa dibaca di https://mecha-cms.com/about.

Tapi kalau mas mau coba lihat-lihat fitur terbaru bisa sih dengan cara menginstal menggunakan Git. Cara instalasinya bisa dilihat di berkas README.md pada repositori inti. Fitur-fitur kustomisasi panel kontrol seperti di diskusi ini, untuk sekarang hanya bisa dicoba di versi pengembangan.

Semoga sekitar 3 bulanan nanti bisa rilis versi 3.0.0 stabil, sabar ya!

[taufik-nurrohman]

Keunggulan Mecha itu sifatnya netral, walaupun di settingan default cenderung sebagai mesin blog, tapi sebenarnya itu bisa diubah niche-nya dengan ekstensi.

[yuliakbard]

oke kang, ane coba dulu

[yuliakbard]

harus pake ini juga ya kang biar jalan

Hook::set('_', function ($_) {
.....
    return $_;
});

[taufik-nurrohman]

Nggak juga si. Selama masnya nulis di dalam panel.php.

[taufik-nurrohman]

Eh, mas ini nanti tak ganti jadi pembagian per-12 aja ya, bukan per-6.

[yuliakbard]

oke kang

[taufik-nurrohman]

Begini bisa, cuma memang masih ada bug di bagian flash message yang perlu Saya perbaiki dari sisi core:

<?php

Hook::set('_', function ($_) {
    $desk = $_['lot']['desk']; // Capture the desk area to insert later
    $desk['size'] = 9 / 12;
    $desk['type'] = 'column';
    $_['lot']['rows'] = [
        'gap' => false,
        'lot' => [
            'row-1' => [
                'lot' => [
                    'columns' => [
                        'gap' => false,
                        'lot' => [
                            'column-1' => [
                                'decors' => [
                                    'background' => 'var(--fill-bar)',
                                    'color' => 'var(--color-bar)',
                                    'min-height' => '100vh'
                                ],
                                'lot' => [
                                    'body' => [
                                        'lot' => [
                                            0 => [
                                                'content' => '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>',
                                                'level' => 3,
                                                'title' => 'Lorem Ipsum',
                                                'type' => 'content'
                                            ]
                                        ],
                                        'type' => 'section'
                                    ]
                                ],
                                'size' => 3 / 12,
                                'stack' => 10,
                                'type' => 'column'
                            ],
                            'column-2' => $desk
                        ],
                        'type' => 'columns'
                    ]
                ],
                'stack' => 10,
                'type' => 'row'
            ]
        ],
        'stack' => $_['lot']['desk']['stack'] ?? 10,
        'type' => 'rows'
    ];
    unset($_['lot']['desk']); // Remove the original desk area
    return $_;
}, 1000); // Set the hook stack value as large as possible so that this hook will be executed last

[yuliakbard]

kalau bisa nanti ada dokumentasi penggunaan panel api layout kang

[yuliakbard]

Kalau mau buat halaman seperti .state itu gimana kang?

[taufik-nurrohman]

// `/panel/{fire/*,get,let,set}/foo-bar/baz`
if ('foo-bar/baz' === $_['path']) {
    $_['status'] = 200;
    $_['title'] = 'Foo Bar';
    $_['type'] = 'files';
    Hook::set('_', function ($_) {
        // …
    });
    return $_;
}