besteadfast / carbon

Steadfast's starter project - Craft CMS, Vite, and DDEV

Carbon (by Steadfast)

Steadfast's starter project - Craft CMS, DDEV, and Vite

• See carbon-setup.md for instructions on setting up a new project using Carbon
• See the slab docs for instructions on converting a Stallion project to Carbon
• Find information about Carbon's features here

carbon's Issues

Suggestion: move to Vizy for all rich text needs

We currently use Redactor 🤮 for our Rich Text fields, and Vizy for complex text fields (that need non-text blocks). If we're going to leverage Vizy for most projects, I think it makes sense to build all of our Rich Text fields with it as well.

A couple reasons:

1. The UI is nicer
2. The config is simpler
3. If we need to add blocks in the future, there's no migration needed (this is pretty likely to happen)
4. It means we only have one system for all of our text needs, which makes learning and knowledge retention easier.

Questions:

• Is it harder to extend/build on top of?
• Does the cost matter?

Auto-register Vue components

TLDR

Components in src/js/components should be auto-registered into Vue, so you don't have to manually import each component.

Spec

• Components in src/js/components and all subfolders will be automatically registered
• Component name will match the filename. Button.vue becomes <Button>
  • Note: this will require the developer to make sure they don't name two components exactly the same, which I'm fine with.
• Lazy loading: If some components aren't required on page-load, we should be able to lazy load them. To lazy load a component, you name the file ComponentName.lazy.vue

This also will take care of #25.

Default Cookie Banner

Add linter(s)

Add longer timeout to tokens

Switch to using ESM for Tailwind & Carbon config file

Currently we're using CJS (CommonJS) for our Tailwind config and carbon config file (currently named stallion.cjs, #48). This is because Tailwind didn't support ESM previously. But in a newer version of Tailwind, ESM is now supported. So, let's upgrade Tailwind and then convert over to ESM.

Add prettier

Add a basic mobile nav implementation

Add SEOmatic & Retour, and their base configs

Figure out when to run `composer install` automatically

We currently have this issue a lot.

Where someone adds a Composer or NPM dependency to the project, and then someone else pulls down their work and is missing that dependency.

This goes hand in hand with the issue of when to pull the database, or apply Project Config changes.

Let's discuss!

Store ENVs in 1Password

Add default "Jump to Content" button

Add "edit entry" button to layout

Update initial timezone to Eastern

Found in project.yaml file.

Use DigitalOcean Spaces for assets

Rename things

Rename anything named "stallion" to "carbon".

Example: /config/build/stallion.cjs

Add aria-expanded and aria-haspopup to expanding menus/accordions

For dropdown menus, accordions, or anything else that opens another section in the DOM should have the aria-haspopup and aria-expanded attributes on them.

These attributes tell screen reader users that another section has opened when interacting with typical DOM nodes. The surgery center repos all have this in their main Nav elements that include a dropdown.

Set user usernames to email by default

Include user photo volume by default

Maybe even bake in the steadfast avatar for the default user?

Re-evaluate using #appcss importance for Tailwind utilities

Fix issues with starting and stopping projects from the Docker GUI

Currently, if you use the Docker GUI to start/stop projects, they don't unmount correctly (or something) so if you restart your computer they all try to start and everything falls apart (dramatization, but yeah)

Modal

Name of Component(s)
Modal

Filename(s)
Modal.vue

Purpose
Display information in a focus-locked panel

Functionality

• The modal should have two states, open and closed
• Any number of buttons should be able to open a modal
• Any number of modals should be able to exist on a page
• Only one modal should be allowed to be open at a time
• Modals should appear at the end of the body
• Focus should be trapped inside modal while open
• Modal should be able to be closed by clicking the background, clicking a close button, or pressing esc

State

• Global
  • openModal(id) - Opens modal by id
  • closeModal() - Closes open modal
  • activeModalId - Id of the currently open modal

Props

• hasOverscroll - decides how to handle overflow content
• initialFocus - decides what element to focus when modal opens
• id (different name?) - for distinguishing between modals

Content Slots

• Panel Content - Contains all content of the modal's panel

Dependencies

• HeadlessUI
  • Dialog, DialogPanel, DialogTitle, DialogDescription, TransitionRoot

Change initial site group to something more generic like "General" or "Default"

Show which things are "components" in Figma and whether they are built

Convert frontend build setup to Vite

Add mailgun to template or setup

Figure out & document how to pull Nucleo icons

Fix Twigpack port moving around

Add prod & staging variables for swiff.config file

const prod = {
server: {
// TODO: set server options
}
}

const staging = {
server: {
// TODO: set server options
}
}

Component previews + design system

What the heck do we do about Buttons? (and other UI components)

Add icon picker to Craft

Need a better way for users to select SVG icons through Craft. Verbb has a plugin for this: https://plugins.craftcms.com/icon-picker?craft4

We could also look at a custom solution, but the plugin is probably the easiest route.

Pull typography styles into Redactor automatically

Add icons volume by default

One thought on this: we probably need to have the icons volume be automatically re-indexed on deploy, so that new icons that are added via Git appear in the CP automatically without needing to re-index via Utilities

Accordion

Name of Component(s)
Accordion
Accordion Item

Filename(s)
Accordion.vue
AccordionItem.vue

Purpose
Display information in coordinated, toggleable disclosures

Functionality

• An accordion item should have two states, open and closes
• An accordion should be able to have any number of accordion items as children
• A user should be able to use tab to navigate between accordion item buttons
• A user should be able to press enter/space (when focusing) or click to open/close an accordion item
• An accordion should have the ability to limit its children to only one open at once
• An accordion should have the ability to scroll the viewport to a child when it opens
• An accordion item should be able to be open by default

State

• Accordion Item
  • Open/closed

Props

• Accordion
  • exclusiveOpen - whether to only allow 1 item to be open at a time
  • scrollOnOpen - whether to scroll to an item when it opens
  • defaultOpen - set which (if any) disclosures should be open by default
• Accordion Item
  • defaultOpen set whether the disclosure should be open by default

Content Slots

• Accordion Item
  • button - content of the disclosure button
  • content - content of the disclosure panel

Dependencies

• HeadlessUI
  • Disclosure, DisclosureButton, DisclosurePanel, TransitionRoot

Notes
The state of a Disclosure is contained within and managed by itself, so I think the best way to coordinate the items is to watch the data-headlessui-state attribute for each and send necessary instructions to the disclosures when one changes. The alternative, having the Accordion keep track of the state of all its children, would mean keeping (and having to sync) state in multiple locations.

Set Site Name and System Name to $APP_NAME

This will allow us to change this in the .env file and avoid having to change it in multiple places.

Rename "webpack" volume to "node"

Currently the naming of the Docker volume "webpack" seems a bit odd because I'm usually using it for non-webpack tasks like adding dependencies or running our icon builds. I think "node" makes more sense because we're running node commands in that volume.

Lazy (async) load components

Instead of registering them all into the full bundle

Check on using Capsize in our typography system

Add checks for typography to make sure all required options are included

Add interact variant

Make the docker containers accessible to other devices on the same network

Maybe via https://traefik.me/ ?

Remove our custom to-[screen] classes in favor of native Tailwind

Carbon & Nuxt

Issue for tracking Carbon / Nuxt connection.

The repo & branch pertaining to Nuxt can be found here: https://github.com/besteadfast/carbon-nuxt/tree/testlab/craft-nuxt

@btbunze @jakedohm Please add comments to this issue to show thoughts on pros/cons of this setup. I'll update this task with comments pertaining to my findings/general thoughts throughout the discovery process.

Set `@webroot` alias so we can clear caches on the CLI

Upgrade Carbon to Craft 5

We have a working version of Craft 5 in production, for Claris Bio, but we need to bring Carbon up to date.