vigetlabs / craft-viget-base

Craft Viget Base Module

Docs

craft-viget-base's Issues

[Parts Kit] Add auto-generated icons grid

This seems like a nice touch to do from here bc we can grab all of the icons from a specified dir more easily in PHP.

My motivation is being able to glance through these visually, sometimes the names just don't quite do it

Expose named routes

https://github.com/craft-snippets/craft-named-routes

Maybe expose them all as global variables prefixed with route or a routeUrl twig function?

{{ routePressReleases }}

{{ routeUrl('name', { userId: 1 }) }}

Add a `merge_deep` Twig filter

See: https://github.com/vigetlabs/mwi/pull/878

Uses ArrayHelper::merge()

Add option to enable new version of parts kit - Craft 3 Version

It should be possible to use the new version of the parts kit by passing version=2 in the URL param, or setting a config value in viget.php.

include h5 and h6 in the rich text samples

getRichTextFull does not include h1, h5, or h6. We typically do not support h1 in rich text, but the others we often support.

Add parts kit tests

• Generating the correct nav
• Can grab a craft asset
• Is a parts kit request
• Correctly selects dark theme config if 'theme' => 'dark' is passed
• Correctly outputs custom theme CSS

[CLI Generator] Initial functionality

Overview

Helps cut down on busywork and stick to team standards.

We're calling this a generator to line up with Yii/Gii naming conventions.

Core Features

• Can create partials / w corresponding parts-kit files
• Can create a basic template with example "best practices"
• Can reference a section handle and create corresponding templates for each entryType

Stretch Goals

• Can create an section and entryTypes via the CLI (optionally create templates too) #38

[Parts Kit] Use localStorage to preserve accordion state

As a SPA, Storybook has a nice behavior where accordion state is preserved as you navigate components. I think this presents a far better experience because things aren't jumping around. Syncing state to localStorage should do it...but perhaps this is a can of worms with the slide animation on load -- would need to bypass it

Blitz caching the Edit Entry button

The red "Edit Entry" sometimes ends up in Blitz or CDN cached versions of the site.

We should explore a few different options to prevent this from happening when content editors view the front-end of the site.

There are a few caching layers

• Blitz's caching (stored as files on the server or in Yii's Cache).
• CDN caching (Cloudflare or Cloudfront sitting in front of the site). These are separate and unaware of Blitz or Craft internals. All that the Blitz integration does is invalidate these caches when content changes.
  • It's often possible to prevent these services from caching by passing the appropraite no-cache/store headers

Change to Viget.com module code (no-cache headers for admins)

• https://github.com/vigetlabs/viget.com/pull/2735/files

Details:
Across a few sites that use this module with the Blitz plugin (e.g. ADC-AMH, Viget) sometimes the Edit Entry button gets cached in the Blitz static cache for all users.

It was a misunderstanding that Blitz automatically does not cache or serve cached assets to signed-in users, but in looking at the source code the logic is as follows:

Blitz is only checking:

• is the site turned off but the user can see it anyway? ($user !== null) && (!Craft::$app->getIsLive() && !$user->can('accessSiteWhenSystemIsOff'))
• does the user have the debug toolbar open ($user !== null) && ($user->getPreference('enableDebugToolbarForSite'))
• does the page say not to cache it (admin area etc) using (!empty($request->getParam('no-cache')))
• page has a token ($request->getToken() !== null && !$this->getIsGeneratorRequest())

During development, Viget developers (cough me) have the debug toolbar visible so the caching issue was not immediately evident or consistent. Seeing that this Blitz logic checks for the no-cache header, add a no-cache header to all pages that show the Edit Entry button

Looking at the Craft 4 code for Response there may be a public function setNoCacheHeaders() or else the module might need to do something like

$request = Craft::$app->getRequest();
$request->setHeader('Pragma', 'no-cache', true);

Ref:

• https://github.com/craftcms/cms/blob/6502b05e99fa588127edf55ec457ba516e896d4a/src/web/Response.php#L142
• https://docs.craftcms.com/api/v4/craft-web-response.html

[Craft 4] Issues encountered while upgrading Viget.com

Related issue: #54.

Placeholder for more details related to PR https://github.com/vigetlabs/viget.com/pull/2557

Get Tests Working Again

• Switch from Circle CI to GitHub Actions
• Switch from docker-composer to DDEV (for local test runs and composer installs)

[Craft 4] Investigate why auto-bootstrapping is initializing twice.

[Parts Kit] Fix js issues with Turbo sites

Allow for Parts Kit theming

Craft 4 Support

Check if Craft is installed before adding Phone Home job

I'm seeing an issue where the Phone Home job is attempting to push its job into the queue when Craft is not installed. This causes an exception because the queue table doesn't exist, and makes it impossible to access the installer via the web UI.

(Not sure what else this repo does, so might be worth making sure there isn't other code in here that should only run when Craft is installed.)

Custom SEO Field

Should we make a custom SEO field that has:

• Meta Title (plain text)
• Meta Description (plain text)
• Meta Image (asset)

Then some ability in the template to override those values with some defaults per entry template

{% set meta = craft.viget.meta(entry, options) %}

Where options is an object where you can set a field to use for title/description/image if nothing is set in the field

Module interferes with 2FA plugin

2FA plugin repo: https://github.com/born05/craft-twofactorauthentication/

See description of bug.

Disabling this module resolves the issue. We need to investigate what code within this module is interfering with the 2FA plugin functionality.

Automated formatting of code styles

• PHPCS (Craft's conventions)
• PHPStan (Catch Type Errors)
• JavaScript (Prettier)

Filter out some files in parts kit dir

Probs best to ignore files starting with . or _

[Improvement] Add a clearer error message regarding Tailwind JSON

Bug that prompted this ticket

• https://github.com/BezosEarthFund/bezosearthfund.org/pull/465#pullrequestreview-1814085902

Overview:

Craft projects can optionally import a JSON encoded version of a project's TW config.

Most often, we use these TW config values in Twig:

• Use Tailwind's screens key/value pairs in a component so we can use values like sm, md, etc to get a configured media query. MW's image macro uses it so that srcset/sizes code is kept in sync with Tailwind's breakpoints (it also saves writing out full media queries).
• Automatically displaying config values like colors & sizes in our parts kit (see MW again).

Decision points
We need to decide if we want a hard error on every page or some other kind of warning.

I think an exception is still necessary, but a clearer error message that explains what the file is for and why it's not there would be a useful improvement.

If template code depends on a JSON file being there, it probably makes sense to know right away rather than have unexpected behavior, or exceptions on only a handful of pages that might make calls to TW.

One frustrating thing about the current implementation is that it always looks for a JSON file and throws even if you aren't using it in your config.

• Default config value
• How we're loading the file currently (no real exception handling).

We may want to make this an opt-in feature. However, that would probably be a breaking change.

[CLI Generator] Create Sections & Entrytypes via the CLI

Calling a command like this...

craft viget-base/generate section resources --types="caseStudy, webinar, glossary"

Will create a new section in the Craft admin with corresponding entry types.

The appropriate templates will also be created in templates/_elements/

If there are multiple entry types, the pattern will be templates/_elements/sectionName/index.html with corresponding files for each entry type.

Add support for Collections

Util::fillInEntries() expects an array of entries. However, with Craft 4 going all in on Collections, it probably makes sense to support that type as well.

Check queue for existing phone home job

Before adding a job to the queue, check to see if there is an existing phone home job

Remove Airtable API integration. Prefer `phone-home` plugin

Airtable has changed how the API is accessed. The PhoneHome module needs to be updated to work with the new authentication method (if possible).

After Feb 1, 2024, API Keys will no longer be able to access the Airtable API.

https://support.airtable.com/docs/airtable-api-key-deprecation-notice

Automatically create Copy/Paste-able code snippets for partials

Add option to disable Yii Debug bar for local development

BEF is using a 2-Factor-Auth plugin that has an incompatibility with the Yii Debug bar.

The debug bar is creating a request before the 2FA step is completed, which then logs the user out.

I'm planning on submitting a fix to the plugin author, but this will provide a short term fix.

Automate index.html behavior?

easiest: add documentation about adding an index.html
other ideas

• route to first component automatically
• provide sample for manual redirect
• anything else?

Parts kit styling is broken on IE 11 and Safari

Add Support for New Parts Kit UI - Craft 4

We've developed a new UI for our parts kit that is decoupled from this Craft Module.

Instead, it's a script tag and custom element that can be added to any type of CMS.

• https://github.com/vigetlabs/parts-kit

To integrate, we need to include the appropriate script, and also provide a JSON endpoint for the Parts Kit UI to consume.

[Parts Kit] Restrict `f` key shortcut to `f` key only

Pressing cmd+f unexpectedly hides the parts list panel on the left, because the f key is a shortcut for hiding the panel. Can we restrict the shortcut to be f key only w/o any modifier keys pressed?

craft-viget-base/src/resources/js/parts-kit.js

Lines 179 to 181 in 110103a

	if ((key === "f" || key === "Escape") && this.noUserInput()) {
	this.toggleSidebar();
	}

support deeply nested colors in tailwind service

Tailwind supports deeply nested colors; our Tailwind service doesn't. Changing getColors to use a recursive function would add support for deeply nested colors.

Example: the AHIP design system has things like "blue" and "dark blue", which we set up as

      blue: {
        DEFAULT: '#5fb1c3',
        // … several levels of blue
        dark: {
          DEFAULT: '#004b66',
          // … several levels of dark blue
        },
      },

Show field handles in edit forms by default in devmode

Warning in Yii debug bar about Query before Craft is ready

See EVENT_AFTER_LOAD_PLUGINS

I believe it's when/how we're accessing the user

Expose commonly used macros

• Forms
• SVG Loader

Fix sort order of parts kit nav items

Rename "Phoning home" queue item

Description

When the "Phoning home" queue item runs, it's not clear to non-Viget users what that is. It would be great to make that item's name more descriptive. Maybe something like "Phoning home - Viget"? Just so that if people have questions about it, they'll have a thread to grab onto.

Prioirty: Low (is there something lower than low priority? If there were...this would be it.)

[Idea] Add command palette/fuzzy search functionality to parts kit

I'm certainly not trying to make the parts kit pages too heavy so I'm not 100% convinced this is a great idea but i have ~50 components in my Trust parts kit and ~100 overall variations. Would be nice to have a quick way to filter these down, whether via a search functionality identical to Storybook's or a modal similar to a command palette.

Storybook's implementation, which updates live as you type:

Example link: https://code.viget.com/spb-insider/?path=/story/achievement-icon--incomplete