Skip to content

Commit

Permalink
[#65] Adds ability to use new version of parts kit
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshuapease
joshuapease committed Aug 17, 2023
1 parent 8469890 commit c5845b6
Show file tree
Hide file tree
Showing 7 changed files with 218 additions and 97 deletions.
2 changes: 1 addition & 1 deletion src/Bundle.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ public function init()
];

// Is this a parts kit request
if (PartsKit::isRequest()) {
if (PartsKit::isRequest() && !PartsKit::isV2()) {
$css[] = 'css/parts-kit.css';

$this->js = [
Expand Down
10 changes: 9 additions & 1 deletion src/Module.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,12 @@ class="edit-entry"

// Define viget base templates directory and index url
if (self::$instance->partsKit->isRequest()) {

if(PartsKit::isRoot() && PartsKit::isV2()) {
// Hacks to hide the Yii Debug bar on the root of the v2 parts kit
Craft::$app->getRequest()->setIsLivePreview(true);
}

Event::on(
View::class,
View::EVENT_REGISTER_SITE_TEMPLATE_ROOTS,
Expand All @@ -161,7 +167,7 @@ function (RegisterTemplateRootsEvent $e) {
function (RegisterUrlRulesEvent $event) {
$partsKitDir = self::$config['partsKit']['directory'];

$event->rules[$partsKitDir] = 'viget-base/parts-kit/redirect-index';
$event->rules[$partsKitDir] = self::$config['partsKit']['controllerPath'] . '/redirect-index';
}
);
}
Expand Down Expand Up @@ -205,6 +211,8 @@ private function _loadConfig()
'layout' => '_layouts/app',
'volume' => 'partsKit',
'theme' => 'light',
'version' => 1, // Can be 1 or 2
'controllerPath' => 'viget-base/parts-kit',
],
'tailwind' => [
'configPath' => Craft::getAlias('@config/tailwind/tailwind.json'),
Expand Down
48 changes: 48 additions & 0 deletions src/controllers/PartsKitController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

namespace viget\base\controllers;

use craft\helpers\UrlHelper;
use viget\base\models\PartsKitNavItem;
use viget\base\services\PartsKit;
use yii\web\Response;

use viget\base\Module;
Expand All @@ -17,6 +20,10 @@ class PartsKitController extends \craft\web\Controller
*/
public function actionRedirectIndex(): Response
{
if (PartsKit::isV2()) {
return $this->renderTemplate('viget-base/_parts-kit/v2-index');
}

$redirectUrl = Module::$instance->partsKit->getFirstNavUrl();

if (!$redirectUrl) {
Expand All @@ -25,4 +32,45 @@ public function actionRedirectIndex(): Response

return $this->redirect($redirectUrl, 301);
}

/**
* Generates the config file for the parts kit
* @return Response
*/
public function actionConfig(): Response
{
/** @var PartsKit $partsKitService */
$partsKitService = Module::getInstance()->partsKit;

$nav = [];

foreach ($partsKitService->getNav() as $key => $item) {

$children = array_map(
function(array $child) {
return new PartsKitNavItem([
'title' => $child['title'],
'url' => UrlHelper::url($child['url'], [
'version' => 2,
]),
// Our current folder parsing doesn't support more than 2 levels.
// Eventually we'd like it to
'children' => [],
]);
},
$item['items'] ?? []
);

$nav[] = new PartsKitNavItem([
'title' => $key,
'url' => '',
'children' => $children,
]);
}

return $this->asJson([
'schemaVersion' => '0.0.1',
'nav' => $nav,
]);
}
}
12 changes: 12 additions & 0 deletions src/models/PartsKitNavItem.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<?php

namespace viget\base\models;

use yii\base\BaseObject;

class PartsKitNavItem extends BaseObject
{
public string $title;
public string $url;
public array $children = [];
}
22 changes: 22 additions & 0 deletions src/services/PartsKit.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,28 @@ public static function isRequest(): bool
return (Craft::$app->request->segments[0] ?? null) === self::getConfig('directory');
}

/**
* Determine if top level of the parts kit folder. i.e. /parts-kit/
* @return bool
*/
public static function isRoot(): bool
{
return self::isRequest() && count(Craft::$app->request->segments) === 1;
}

/**
* Should we show the v2 version of the parts kit
* @return bool
*/
public static function isV2(): bool
{
return self::isRequest()
&& (
(int)Craft::$app->request->getQueryParam('version') === 2
|| self::getConfig('version') === 2
);
}

/**
* Get a config item either the default or from the config file
*
Expand Down
206 changes: 111 additions & 95 deletions src/templates/_layouts/parts-kit.html
View file
Original file line number Diff line number Diff line change
@@ -1,111 +1,127 @@
{% extends craft.viget.partsKit.getConfig('layout') %}

{% block content %}
<style>
.parts-kit {
{{ craft.viget.partsKit.getTheme() }}
}
</style>
{% set partsKitVersion = craft.app.request.getParam(
'version',
craft.viget.partsKit.getConfig('version')
) %}

{# Allows us to use the main block in multiple branches #}
{% set main %}
{% block main %}{% endblock %}
{% endset %}

<div class="parts-kit" data-parts-kit data-turbo="false">
<aside
class="parts-kit__sidebar"
data-sidebar
>
<h2 class="parts-kit__sr-only">Parts Navigation</h2>
{% block content %}
{% switch(partsKitVersion) %}
{% case 1 %}
<style>
.parts-kit {
{{ craft.viget.partsKit.getTheme() }}
}
</style>

<label class="parts-kit__sr-only" for="pk-search">Search parts kit</label>
<div class="parts-kit__search">
<input class="parts-kit__search-input"
id="pk-search"
type="search"
placeholder="Press / to search..."
data-focus-placeholder="Type to search..."
data-sidebar-search
<div class="parts-kit" data-parts-kit data-turbo="false">
<aside
class="parts-kit__sidebar"
data-sidebar
>
{{ svg('@viget/base/resources/icons/search.svg') | attr({
class: 'parts-kit__search-icon',
}) }}
</div>
<h2 class="parts-kit__sr-only">Parts Navigation</h2>

{% set navSections = craft.viget.partsKit.getNav() %}
<label class="parts-kit__sr-only" for="pk-search">Search parts kit</label>
<div class="parts-kit__search">
<input class="parts-kit__search-input"
id="pk-search"
type="search"
placeholder="Press / to search..."
data-focus-placeholder="Type to search..."
data-sidebar-search
>
{{ svg('@viget/base/resources/icons/search.svg') | attr({
class: 'parts-kit__search-icon',
}) }}
</div>

{% if navSections %}
<ol class="parts-kit__nav">
{% for title, section in navSections %}
{% set id = "nav-section-#{loop.index}" %}
{% set navSections = craft.viget.partsKit.getNav() %}

<li data-parts-kit-toggle
{% if section.isActive %}data-active-section{% endif %}
>
{% if navSections %}
<ol class="parts-kit__nav">
{% for title, section in navSections %}
{% set id = "nav-section-#{loop.index}" %}

<li data-parts-kit-toggle
{% if section.isActive %}data-active-section{% endif %}
>
<button
class="parts-kit__button parts-kit__nav-button"
aria-controls="{{ id }}"
aria-expanded="{{ section.isActive ? 'true' : 'false' }}"
>
<div class="flex">
{{ svg('@viget/base/resources/icons/caret.svg') | attr({
class: 'parts-kit__nav-caret',
}) }}
{{ svg('@viget/base/resources/icons/pk-component.svg') | attr({
class: 'parts-kit__nav-component',
}) }}
<h3>{{ title | title }}</h3>
</div>
</button>

<ol
class="parts-kit__nav-sub-items {% if not section.isActive %}collapsed{% endif %}"
id="{{ id }}"
data-togglee
>
{% for item in section.items %}
<li data-section-item
data-search-text="{{ title ~ ' ' ~ item.title }}"
>
<a
href="{{ url(item.url) }}"
{% if item.isActive %}class="active"{% endif %}
>
<div class="flex">
{{ svg('@viget/base/resources/icons/pk-sidebar.svg') | attr({
class: 'parts-kit__nav-story',
}) }}
{{ item.title }}
</div>
</a>
</li>
{% endfor %}
</ol>
</li>
{% endfor %}
</ol>
{% endif %}
</aside>

<div class="parts-kit__main">
<div class="parts-kit__main-wrapper">
<div class="parts-kit__main-header">
<button
class="parts-kit__button parts-kit__nav-button"
aria-controls="{{ id }}"
aria-expanded="{{ section.isActive ? 'true' : 'false' }}"
class="parts-kit__button hidden hover:text-robins-egg"
data-fullscreen-expand
>
<div class="flex">
{{ svg('@viget/base/resources/icons/caret.svg') | attr({
class: 'parts-kit__nav-caret',
}) }}
{{ svg('@viget/base/resources/icons/pk-component.svg') | attr({
class: 'parts-kit__nav-component',
}) }}
<h3>{{ title | title }}</h3>
</div>
<span class="parts-kit__sr-only">Expand</span>
{{ svg('@viget/base/resources/icons/pk-expand.svg') }}
</button>

<ol
class="parts-kit__nav-sub-items {% if not section.isActive %}collapsed{% endif %}"
id="{{ id }}"
data-togglee
<button
class="parts-kit__button hidden hover:text-robins-egg"
data-fullscreen-close
>
{% for item in section.items %}
<li data-section-item
data-search-text="{{ title ~ ' ' ~ item.title }}"
>
<a
href="{{ url(item.url) }}"
{% if item.isActive %}class="active"{% endif %}
>
<div class="flex">
{{ svg('@viget/base/resources/icons/pk-sidebar.svg') | attr({
class: 'parts-kit__nav-story',
}) }}
{{ item.title }}
</div>
</a>
</li>
{% endfor %}
</ol>
</li>
{% endfor %}
</ol>
{% endif %}
</aside>

<div class="parts-kit__main">
<div class="parts-kit__main-wrapper">
<div class="parts-kit__main-header">
<button
class="parts-kit__button hidden hover:text-robins-egg"
data-fullscreen-expand
>
<span class="parts-kit__sr-only">Expand</span>
{{ svg('@viget/base/resources/icons/pk-expand.svg') }}
</button>
<button
class="parts-kit__button hidden hover:text-robins-egg"
data-fullscreen-close
>
<span class="parts-kit__sr-only">Close</span>
{{ svg('@viget/base/resources/icons/close-circle.svg') }}
</button>
</div>
<span class="parts-kit__sr-only">Close</span>
{{ svg('@viget/base/resources/icons/close-circle.svg') }}
</button>
</div>

<div class="parts-kit__main-container">
{% block main %}{% endblock %}
<div class="parts-kit__main-container">
{{ main }}
</div>
</div>
</div>
</div>
</div>
</div>
{% case 2 %}
{# Just render the block, no chrome #}
{{ main }}
{% endswitch %}
{% endblock %}
15 changes: 15 additions & 0 deletions src/templates/_parts-kit/v2-index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parts Kit</title>
<meta name="robots" content="noindex, nofollow">
</head>
<body>

{# We want to load all of this in an isolated page, so no styles conflict from the parent site #}
<script type="module" src="https://unpkg.com/@viget/parts-kit@^0/lib/parts-kit.js"></script>
<parts-kit config-url="{{ actionUrl(craft.viget.partsKit.getConfig('controllerPath') ~ '/config') }}"></parts-kit>

</body>
</html>

0 comments on commit c5845b6

Please sign in to comment.