OWA Components

Components for Open World Atlanta

by ecds · github.com/ecds/owa-components

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/ecds/owa-components/archive/refs/heads/main.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/ecds/owa-components ↗

Open World Atlanta Components

Standalone React apps compiled for the Open World Atlanta WordPress site, embedded via shortcodes.

Structure

apps/          # one directory per shortcode component
packages/
  ui/          # shared React components
  utils/       # shared utilities (map styles, helpers)
  vite-config/ # shared Vite config with WordPress-friendly build settings

Requirements

Node 20+
pnpm (installed globally)

Common commands

# Dev server for a single app
pnpm --filter <app-name> dev

# Build all apps
pnpm build:apps

# Build everything (apps + packages)
pnpm build

# Lint all
pnpm lint

WordPress build output

Each app builds to apps/<name>/dist/ with stable filenames (index.js, index.css) so WordPress enqueue paths never change. To set a custom asset base path at build time:

VITE_WP_BASE=/wp-content/plugins/my-plugin/dist/ pnpm --filter <app-name> build

Using a component in WordPress

Components are embedded with the [owa_component] shortcode. The name must match the app directory name under apps/.

[owa_component name="neighborhood-map"]
[owa_component name="buildings-1928"]
[owa_component name="cabbagetown-current"]
[owa_component name="reynoldstown-wpf-map"]
[owa_component name="immigrant-map"]

Use the height attribute to control the component height (default 500px):

[owa_component name="neighborhood-map" height="700px"]

First-time setup

The OWA Components plugin must be activated before shortcodes will work:

Go to WP Admin → Plugins
Find OWA Components and click Activate

The plugin is deployed automatically on every push to main. New components are available as shortcodes immediately after the deploy completes — no plugin changes required.

Previewing components

A live preview of every component is available at: https://ecds.github.io/owa-components/

Add a new component

Scaffold with Vite inside apps/:

cd apps
pnpm create vite
# framework: React, variant: TypeScript

Add @owa-components/vite-config as a devDependency in the new app's package.json:

"devDependencies": {
  "@owa-components/vite-config": "workspace:*"
}

Replace vite.config.ts with:

import { createWordPressConfig } from "@owa-components/vite-config";
export default createWordPressConfig();

Replace eslint.config.js with:

export { default } from "../../eslint.config.base.js";

Slim down tsconfig.app.json to extend the root base:

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
  },
  "include": ["src"]
}

Update src/main.tsx to mount to a div ID matching the app name:

createRoot(document.getElementById("your-app-name")!).render(...)

And update index.html to use the same ID:

<div id="your-app-name" style="width: 100vw; height: 100vh"></div>

Run pnpm install from the repo root to wire up workspace links.

Add/install dependencies for a component

pnpm install -D <package> --filter <app-name>