The Tale of Zoe: From Doodler to Best-Seller with HydePHP - (part 2)

posted Originally published at hydephp.melasistema.com 9 min read

Step 2: The Magical Layout – Building the Perfect Landing Page

The Hyde Wizard raised his staff high and proclaimed, “Every grand creation must rest upon a solid foundation. To bring your vision to life, we must weave the magic of layouts into your site!”

He gestured toward the glowing code in the air. “These enchanted layouts, provided by the HydePHP Layouts Manager, enable your blog feed to seamlessly integrate with customizable components and themes. By applying the @extends directive, your page will inherit the full power of this magic.”

With a swirl of his staff, glowing runes etched themselves into the air. Zoe copied them into her file, replacing the old content of her index.blade.php.

@php($title = 'Zoe Blog')
@extends(config('hyde-layouts-manager.layouts.' . config('hyde-layouts-manager.default_layout') . '.app', 'hyde::layouts.app'))
@section('content')
 
    <main id="content" class="mx-auto max-w-7xl py-12 px-8">
        <header class="lg:mb-12 xl:mb-16">
            <h1 class="text-3xl text-left leading-10 tracking-tight font-extrabold sm:leading-none mb-8 md:mb-12 md:text-4xl md:text-center lg:text-5xl text-gray-700 dark:text-gray-200">
            Zoe's Journey</h1>
        </header>
     
        <div id="post-feed" class="max-w-3xl mx-auto">
            @include('hyde-layouts-manager::layouts.'.config('hyde-layouts-manager.default_layout').'.posts.blog-post-feed')
        </div>
    </main>
 
@endsection

“These lines,” he explained, “tie your page to the power of the layouts defined in the Layouts Manager. The @extends directive ensures your page inherits the enchanted scaffolding, while the @include spell draws in the blog post feed with all the benefits of your chosen theme.”

Zoe’s eyes widened as she read through the lines. "This means my Blog page is not only beautiful but fully integrated with the magical components and styles we've chosen!”

“Indeed,” the wizard affirmed, his voice warm with encouragement. “Your blog feed, once simple and unadorned, is now imbued with all the grace and flexibility the HydePHP Layouts Manager has to offer.”

As Zoe absorbed this wisdom, the wizard’s eyes twinkled. “But wait, my dear, you’ve come prepared for this journey, haven’t you?”

Zoe nodded, a parchment unfurling in her hands. It was a vibrant display of her doodles—whimsical characters, enchanting landscapes, and magical creatures from her beloved book, Zoe and the Doodling World.

The wizard gasped in delight. “Oh, Zoe! You truly are ready for this path. But our mission is not yet complete.” His voice took on a deeper, more focused tone. “While the blog section with its announcement is crucial, what you need is a true landing page—a magical portal where visitors will feel invited into your world and can be guided to your books with ease.”


With a flourish of his staff, glowing symbols appeared again. “Now,” the wizard said, his voice taking on a lighthearted tone, “we must rename your existing index.blade.php to posts.blade.php, preserving the blog feed layout. Then, we will craft a new index.blade.php file that will serve as your enchanting Home Page.”

The wizard paused, his eyes twinkling with playful mischief. “I hope you know how to rename a file, Zoe! Whether it’s by the mystical powers of the Finder, the sorcery of a code editor, or even a command-line spell, the choice is yours. After all,” he added with a chuckle, “every wizard has their own style.”

Zoe giggled as she took the parchment. “Don’t worry, I’ve got this!” she said confidently, and with a few swift movements (and maybe a little bit of magic), the files were renamed.

The wizard nodded approvingly. “Well done, Zoe. You’re truly mastering the art of creation. Now, let’s bring your new Home Page to life!”

“Now, in this new index.blade.php file, we shall create the foundation for your landing page,” the wizard continued, his tone filled with wonder. The base structure appeared before them, etched in glowing runes. Zoe carefully transcribed it into the new file:

@php($title = 'Home') 
@extends(config('hyde-layouts-manager.layouts.' . config('hyde-layouts-manager.default_layout') . '.app', 'hyde::layouts.app'))
@section('content')
 <!-- Your magical content goes here --> 
@endsection

The wizard smiled as Zoe reviewed the file. “This page will now serve as the welcoming gateway to your site. Simple, elegant, and full of potential, just like your journey. And if you ever wish to enhance it with animations or other charms, the HydePHP Layouts Manage will always be at your side!”

Zoe beamed with pride as she saved the file. Her magical Home Page was complete, a perfect starting point for her adventure.

Zoe watched intently as the wizard prepared the next spell. “Within this new structure,” he said, “we will first place a Carousel to showcase your enchanting doodles. Then, we shall add a Hero Section to invite your visitors to explore and buy your books. Watch closely, Zoe, for this is the magic that will guide them into your world.”


The Hyde Wizard stood proudly before the glowing projection of Zoe’s landing page. “Ah, Zoe, we’ve come so far,” he said, his voice warm with pride. “But to truly complete this masterpiece, we must integrate the final components into your new index.blade.php. This will be the heart of your site—a page that captivates and invites all who visit.”

With a wave of his staff, the wizard conjured the finalized blueprint of the Home Page:

@php($title = 'Home')
@extends(config('hyde-layouts-manager.layouts.' . config('hyde-layouts-manager.default_layout') . '.app', 'hyde::layouts.app'))

@section('content')

    {!! app('layout.manager')->renderComponent('carousel', [
        'layout' => [
            'showIndicators' => false,
            'showControls' => false,
            'rounded' => false,
        ],
        'images' => [
            'media/zoe-doodle-showcase.png',
        ]]) 
    !!}

    <section class="max-w-8xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 items-center">
            <!-- Left Column: Hero -->
            <div class="p-8 flex items-center">
                {!! app('layout.manager')->renderComponent('hero', [
                        'layout' => [
                            'showPrimaryButton' => true,
                            'showSecondaryButton' => false,
                            'showSubHeadingText' => true,
                        ],
                        'settings' => [
                            'headingTextAlign' => 'right',
                            'subHeadingTextAlign' => 'right',
                            'buttonsGroupAlign' => 'right',
                        ],
                    ]) 
                !!}
            </div>
            
            <!-- Right Column: Gallery -->
            <div class="p-8">
                {!! app('layout.manager')->renderComponent('gallery', [
                        'layout' => [
                            'gap' => '',
                            'rounded' => false,
                        ],
                    ]) 
                !!}
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 items-center">
            <!-- Left Column: Carousel -->
            <div class="p-8 flex items-center">
                {!! app('layout.manager')->renderComponent('carousel', [
                        'layout' => [
                            'showIndicators' => false,
                            'showControls' => false,
                            'rounded' => true,
                        ],
                    ]) 
                !!}
            </div>
            
            <!-- Right Column: Accordion -->
            <div class="p-8">
                {!! app('layout.manager')->renderComponent('accordion') !!}
            </div>
        </div>
    </section>

@endsection

The wizard gestured triumphantly. “There, Zoe! Your landing page now harmoniously combines a Carousel to captivate, a Hero Section to inspire, and a Gallery with a whimsical Accordion to charm your visitors. Together, they create an enchanting introduction to your magical world.”

Zoe clapped her hands in delight. “Thank you, Wizard! This is everything I dreamed of and more.”

The Hyde Wizard bowed deeply. “The greatest magic lies in creation, dear Zoe. Go forth and let the world marvel at your art.”

Zoe could hardly contain her excitement as her vision came to life. The wizard placed a hand on her shoulder. “Your journey, Zoe, is a testament to your determination and creativity. Soon, the world will see it too.”


Step 3: The Heartful Gift – Mastering Typography with the Font Manager

The Hyde Wizard’s eyes twinkled as he turned to Zoe. “Ah, dear Zoe, as you embark on your creative journey, there is one thing I cannot let you do alone. Finding the perfect combination of fonts from the vast seas of choices is a daunting task, even for a seasoned wizard like myself.”

With a flick of his staff, a parchment appeared in midair, adorned with elegant calligraphy and enchanting designs. “I have prepared this for you—a Chanting Charm, crafted specifically for your site. It contains fonts that are as unique as you are, selected with great care to bring your vision to life.”

Zoe’s eyes widened as she reached for the parchment. “You… you did this for me?” she asked, her voice filled with awe.

The wizard smiled warmly. “Of course, my dear. A website’s typography is its voice, and every creator deserves a voice that sings true to their heart. This charm is not just a tool—it’s a gift, woven with care and purpose, and designed to save you hours of toil and uncertainty.”

He gestured toward the glowing runes, now shaping themselves into a magical guide:


The Font Manager allows you to tailor your site’s typography with ease. Using the hyde-layouts-manager-fonts.json file, you can customize fonts dynamically for every layout. Here’s how your Chanting Charm has been configured:

{
  "layouts": {
    "melasistema": {
      "use_google_fonts": true,
      "families": {
        "primary": "Indie Flower:wght@400",
        "secondary": "Sour Gummy:wght@600",
        "display": "Sour Gummy:wght@600",
        "heading": "Sour Gummy:wght@600",
        "subheading": "Handlee:wght@400",
        "accent": "Just Another Hand:wght@400",
        "code": "Fira Code:wght@400;500",
        "small": "Amatic SC:wght@400;700"
      },
      "typography_mapping": {
        "h1": "display",
        "h2": "heading",
        "h3": "subheading",
        "h4": "subheading",
        "h5": "secondary",
        "h6": "secondary",
        "p": "primary",
        "small": "small",
        "code": "code",
        "blockquote": "display",
        "label": "secondary",
        "button": "heading"
      },
      "custom_css": {}
    }
  }
}

The wizard leaned closer, his voice soft with reassurance. “Every font, every mapping, has been chosen to complement your unique style. From the playful grace of Indie Flower for your paragraphs to the bold elegance of Sour Gummy for your headings, these choices will bring harmony and joy to your site.”

Zoe studied the parchment, marveling at the thoughtfulness of the selections. “But how will I make this charm work?”

“Ah, that’s simple,” the wizard replied, waving his staff to reveal another set of glowing instructions. “Place this configuration into the config/hyde-layouts-manager-fonts.json file. Once done, simply compile your assets with this spell:”

npm run dev

“And with that,” he added, “your typography will come alive with the magic of Google Fonts. Should you wish to tweak the charm or disable the Google Fonts altogether, you can modify use_google_fonts or adjust the families and mappings as you see fit. The world of typography is yours to shape.”

Zoe’s heart swelled with gratitude. “Thank you, Wizard. This is more than I ever expected.”

The Hyde Wizard beamed, placing a hand on her shoulder. “Every creator deserves to feel empowered and inspired, dear Zoe. Now go forth and let your fonts sing your story.”

![Zoe's Magical Website](https://hydephp.melasistema.com/media/posts/zoe-tutorial/zoe-website-screenshots-group.png 'Zoe’s Magical Website')


Step 4: The Final Spell – Publishing to the World

The Hyde Wizard waved his wand once more, and Zoe’s magical website was now ready for the world. “With the power of HydePHP, you can now make your site live for all to see,” the wizard said.

Zoe followed the last set of instructions the Hyde Wizard gave her, deploying her site with ease. No more complex technical challenges! The website was now online, ready to captivate audiences and display her beautiful, hand-crafted doodles.

Soon, visitors were drawn to Zoe’s site from all over the kingdom. They were enchanted by the magical landing page, captivated by the delightful font choices, and inspired by her artwork. One by one, people began to share her site, and Zoe's books became a best-seller on Amazon!

The wizard smiled knowingly, adding a final note of encouragement. “HydePHP’s magic doesn’t end with creation, Zoe. Your site’s static nature means it can be hosted almost anywhere, even on free platforms like Netlify or GitHub Pages. With no database to worry about, your site will always be fast, reliable, and cost-effective, allowing your creativity to shine without limits.”


The End – Zoe's Happy Ever After

Thanks to the Hyde Wizard and the tools of HydePHP & Layouts Manager, Zoe’s dream had come true. No longer just a doodler, she had become a published author, a beloved artist, and a recognized force in the digital kingdom.

And so, Zoe lived happily ever after, knowing that with a little magic and the power of HydePHP, even the most whimsical dreams can come to life.


A Magical Scroll of Links

As Zoe's story concluded, the Hyde Wizard unfurled a glowing scroll filled with links and special thanks, a final touch to the enchanting journey.

✨ Link to Zoe’s Magical Website
“Behold the fruits of our labor!” the wizard declared. Visit Zoe’s whimsical world and experience her magical doodles firsthand.
Zoe’s Website

Link to the Hyde Wizard’s Treasure Trove
“For those who wish to explore the arcane arts behind this creation,” the wizard said, tapping his staff, “you’ll find all the spells and scripts here.”
Hyde Wizard’s GitHub Repo

Link to the HydePHP Layouts Manager
“The secret to crafting such a visually stunning site lies within this powerful tool,” the wizard explained. Customize your fonts, layouts, and styles to make your own magic.
HydePHP Layouts Manager Repository

“If you find this tool helpful,” the wizard added with a wink, “consider giving it a ⭐ on GitHub. And for those feeling adventurous, contributions are always welcome to expand the magic for others!”


“Now, dear reader,” the wizard said, rolling up the scroll, “the magic is in your hands. Go forth and create your own enchanting tales!”

If you read this far, tweet to the author to show them you care. Tweet a Thanks

More Posts

The Tale of Zoe: From Doodler to Best-Seller with HydePHP - (part 1)

melasistema - Jan 21

Beginner’s Guide to Laravel Socialite for Seamless OAuth Authentication

Snehal Kadwe - Dec 23, 2024

How to Add a Clickable Visitor Counter to Your Website

Bridget Amana - Dec 30, 2024

What Happens When You Type a URL Into Your Browser? (Interview Question Guide)

Khiilara - Jan 2
chevron_left