Hydeflip? HydePHP 🤝 Kickflip (Experimenting with using Kickflip together with HydePHP)

[caendesilva]

Creating this thread to discuss compatibility between HydePHP and Kickflip created by @mallardduck (https://github.com/KickflipCli/kickflip-src / https://kickflip.lucidinternets.com/)

[caendesilva]

Experimenting with porting a Kickflip project to Hyde. I'm using the dev-master branch that will become the 0.25.x release as it allows the changing of source directories.

Setup

Rough process of what I did as follows:

Create new project,

composer create-project hyde/hyde hydeflip -s dev

Then create a Kickflip project,

composer create-project mallardduck/kickflip example-site

Then I copied the example-site source directory to the hydeflip root.

Now we need to configure Hyde to auto-discover the files. I did this in a service provider.

// app\Providers\HydeflipServiceProvider.php

<?php

namespace App\Providers;

use Hyde\Framework\HydeServiceProvider;
use Hyde\Framework\Models\BladePage;
use Hyde\Framework\Models\MarkdownPage;
use Hyde\Framework\Models\MarkdownPost;
use Hyde\Framework\Models\DocumentationPage;

class HydeflipServiceProvider extends HydeServiceProvider
{
    public function register()
    {
        $this->registerDefaultDirectories([
            BladePage::class => 'source',
            MarkdownPage::class => 'source',
            MarkdownPost::class => 'source/_posts',
            DocumentationPage::class => 'source/docs',
        ]);

	$this->discoverBladeViewsIn('source'); // Adds the source directory to the view config
    }
}

Register the service provider after the Hyde one

// config/app.php

'providers' => [
	App\Providers\AppServiceProvider::class,
	Hyde\Framework\HydeServiceProvider::class,
	App\Providers\HydeflipServiceProvider::class, // Add the service provider
],

Next, I only needed to make a few changes to the Hydeflip 404 page since we use the Hyde layout, and the Hyde::relativeLink helper since Hyde does not have access to the $site variable.

// source\404.blade.php

@extends('hyde::layouts.app')

@section('content')
<div class="flex flex-col items-center mt-32 text-gray-700">
    <h1 class="text-6xl font-light leading-none mb-2">404</h1>

    <h2 class="text-3xl">Page not found</h2>

    <hr class="block w-full max-w-lg mx-auto my-8 border">

    <p class="text-xl">
        Let's get you back on track, head to the <a href="{{ Hyde::relativeLink('index.html', $currentPage) }}">Home Page</a>
    </p>
</div>
@endsection

Result

So, how does it work? Pretty great!

Hyde automatically registers the Kickflip index.md and even uses the page front matter for the title.

Notes

A few notes

To get the Tailwind to register you need to add the source directories to your Tailwind config.

Once done, the 404 page is nicely styled

I have not yet implemented the changing of media files, so assets/build is not yet discovered. There is also a ticket open to support changing the output directory, and is tracked in hydephp/framework#362

Blog posts work too, but they do not show up in the navigation menu automatically. This is a bug.

[hydephp]

Resolving issue. Feel free to reopen!