@phcdevworks/spectre-shell-wordpress 1.1.0

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@phcdevworks/spectre-shell-wordpress",
+  "version": "1.1.0",
+  "description": "Official Vite template for WordPress theme development with TypeScript and Tailwind CSS 4",
+  "type": "module",
+  "keywords": [
+    "vite-template",
+    "vite",
+    "wordpress",
+    "wordpress-theme",
+    "tailwindcss",
+    "typescript",
+    "phcdevworks",
+    "spectre"
+  ],
+  "author": "PHCDevworks",
+  "license": "MIT",
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/phcdevworks"
+    },
+    {
+      "type": "buymeacoffee",
+      "url": "https://buymeacoffee.com/phcdevworks"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phcdevworks/spectre-shell-wordpress.git"
+  },
+  "bugs": {
+    "url": "https://github.com/phcdevworks/spectre-shell-wordpress/issues"
+  },
+  "homepage": "https://phcdevworks.com",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/node": "^25.1.0",
+    "autoprefixer": "^10.4.23",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1"
+  },
+  "dependencies": {
+    "@phcdevworks/spectre-ui": "^0.4.1"
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/spectre-shell-wordpress.code-workspace

@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}

package/spectre-theme/README.md

@@ -0,0 +1,33 @@
+# Vite WordPress Theme Builder Template
+
+This directory is a **TEMPLATE** for creating WordPress themes with Vite.
+
+## Quick Start
+
+1. Customize `style.css` with your theme details
+2. Replace `spectre_shell` prefix in `functions.php` with your theme slug
+3. Modify templates (index.php, header.php, footer.php) as needed
+4. Run `npm run dev` in the project root during development
+5. Run `npm run build` before deploying
+
+## What Gets Deployed
+
+Deploy this entire `spectre-theme/` folder to your WordPress installation:
+
+```
+wp-content/themes/your-theme-name/
+```
+
+The `dist/` folder will be auto-generated by Vite with your compiled assets.
+
+## Customization Checklist
+
+- [ ] Update `style.css` header (Theme Name, Author, Description, Text Domain)
+- [ ] Replace all `spectre_shell` instances with your slug
+- [ ] Update function prefixes in `functions.php`
+- [ ] Customize templates (header.php, footer.php, index.php)
+- [ ] Add additional WordPress templates as needed
+- [ ] Update navigation menu locations
+- [ ] Add custom post types/taxonomies if needed
+
+See the main README.md in project root for full documentation.

package/spectre-theme/footer.php

@@ -0,0 +1,9 @@
+<footer class="site-footer bg-gray-800 text-white p-8 mt-12">
+    <div class="container mx-auto text-center">
+        <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
+    </div>
+</footer>
+
+<?php wp_footer(); ?>
+</body>
+</html>

package/spectre-theme/functions.php

@@ -0,0 +1,89 @@
+<?php
+/**
+ * Theme Functions - Vite WordPress Template
+ *
+ * IMPORTANT: This is a template file. You should:
+ * 1. Replace 'spectre_shell' with your theme slug throughout this file
+ * 2. Replace function prefixes (e.g., spectre_shell_setup -> yourtheme_setup)
+ * 3. Update text domain in translation functions
+ */
+
+if (!defined('ABSPATH')) exit;
+
+// Theme setup
+function spectre_shell_setup() {
+    add_theme_support('title-tag');
+    add_theme_support('post-thumbnails');
+    add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));
+    add_theme_support('custom-logo');
+
+    register_nav_menus(array(
+        'primary' => __('Primary Menu', 'spectre-shell'),
+    ));
+}
+add_action('after_setup_theme', 'spectre_shell_setup');
+
+// Enqueue Vite assets
+function spectre_shell_enqueue_assets() {
+    $is_dev = function_exists('wp_get_environment_type')
+        ? wp_get_environment_type() === 'development'
+        : (defined('WP_ENV') && WP_ENV === 'development');
+    $vite_server = defined('VITE_DEV_SERVER') ? rtrim(VITE_DEV_SERVER, '/') : 'http://localhost:5173';
+
+    if ($is_dev) {
+        // Development mode - load from Vite dev server
+        wp_enqueue_script(
+            'vite-client',
+            $vite_server . '/@vite/client',
+            array(),
+            null,
+            false
+        );
+        wp_script_add_data('vite-client', 'type', 'module');
+
+        wp_enqueue_script(
+            'spectre-shell-main',
+            $vite_server . '/src/js/main.ts',
+            array('vite-client'),
+            null,
+            true
+        );
+        wp_script_add_data('spectre-shell-main', 'type', 'module');
+    } else {
+        // Production mode - load built assets with manifest
+        $manifest_path = get_template_directory() . '/dist/.vite/manifest.json';
+        if (!file_exists($manifest_path)) {
+            if (defined('WP_DEBUG') && WP_DEBUG) {
+                error_log('Vite manifest not found: ' . $manifest_path);
+            }
+            return;
+        }
+
+        $manifest = json_decode(file_get_contents($manifest_path), true);
+
+        // Enqueue CSS
+        if (isset($manifest['src/styles/main.css'])) {
+            $css_file = $manifest['src/styles/main.css']['file'];
+            wp_enqueue_style(
+                'spectre-shell-style',
+                    get_template_directory_uri() . '/dist/' . $css_file,
+                array(),
+                null
+            );
+        }
+
+        // Enqueue JS
+        if (isset($manifest['src/js/main.ts'])) {
+            $js_file = $manifest['src/js/main.ts']['file'];
+            wp_enqueue_script(
+                'spectre-shell-main',
+                    get_template_directory_uri() . '/dist/' . $js_file,
+                array(),
+                null,
+                true
+            );
+            wp_script_add_data('spectre-shell-main', 'type', 'module');
+        }
+    }
+}
+add_action('wp_enqueue_scripts', 'spectre_shell_enqueue_assets');

package/spectre-theme/header.php

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html <?php language_attributes(); ?>>
+<head>
+    <meta charset="<?php bloginfo('charset'); ?>">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <?php wp_head(); ?>
+</head>
+<body <?php body_class(); ?>>
+<?php wp_body_open(); ?>
+
+<header class="site-header bg-gray-800 text-white p-4">
+    <div class="container mx-auto flex justify-between items-center">
+        <div class="site-branding">
+            <?php if (has_custom_logo()) : ?>
+                <?php the_custom_logo(); ?>
+            <?php else : ?>
+                <h1 class="text-2xl font-bold">
+                    <a href="<?php echo esc_url(home_url('/')); ?>" class="text-white hover:text-gray-300">
+                        <?php bloginfo('name'); ?>
+                    </a>
+                </h1>
+            <?php endif; ?>
+        </div>
+
+        <nav class="main-navigation">
+            <?php
+            wp_nav_menu(array(
+                'theme_location' => 'primary',
+                'menu_class' => 'flex space-x-4',
+                'container' => false,
+            ));
+            ?>
+        </nav>
+    </div>
+</header>

package/spectre-theme/index.php

@@ -0,0 +1,60 @@
+<?php get_header(); ?>
+
+<main class="site-main container mx-auto px-4 py-8">
+    <?php if (have_posts()) : ?>
+        <div class="posts-grid grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+            <?php while (have_posts()) : the_post(); ?>
+                <article id="post-<?php the_ID(); ?>" <?php post_class('bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow'); ?>>
+                    <?php if (has_post_thumbnail()) : ?>
+                        <div class="post-thumbnail">
+                            <a href="<?php the_permalink(); ?>">
+                                <?php the_post_thumbnail('medium', array('class' => 'w-full h-48 object-cover')); ?>
+                            </a>
+                        </div>
+                    <?php endif; ?>
+
+                    <div class="p-6">
+                        <h2 class="text-2xl font-bold mb-2">
+                            <a href="<?php the_permalink(); ?>" class="text-gray-800 hover:text-blue-600">
+                                <?php the_title(); ?>
+                            </a>
+                        </h2>
+
+                        <div class="post-meta text-sm text-gray-600 mb-4">
+                            <time datetime="<?php echo get_the_date('c'); ?>">
+                                <?php echo get_the_date(); ?>
+                            </time>
+                            <span class="mx-2">•</span>
+                            <span><?php the_author(); ?></span>
+                        </div>
+
+                        <div class="post-excerpt text-gray-700">
+                            <?php the_excerpt(); ?>
+                        </div>
+
+                        <a href="<?php the_permalink(); ?>" class="inline-block mt-4 text-blue-600 hover:text-blue-800 font-semibold">
+                            Read More →
+                        </a>
+                    </div>
+                </article>
+            <?php endwhile; ?>
+        </div>
+
+        <div class="pagination mt-12">
+            <?php
+            the_posts_pagination(array(
+                'mid_size' => 2,
+                'prev_text' => __('← Previous', 'spectre-shell'),
+                'next_text' => __('Next →', 'spectre-shell'),
+            ));
+            ?>
+        </div>
+    <?php else : ?>
+        <div class="no-posts text-center py-12">
+            <h2 class="text-3xl font-bold mb-4"><?php _e('No posts found', 'spectre-shell'); ?></h2>
+            <p class="text-gray-600"><?php _e('Sorry, no posts were found.', 'spectre-shell'); ?></p>
+        </div>
+    <?php endif; ?>
+</main>
+
+<?php get_footer(); ?>

package/spectre-theme/style.css

@@ -0,0 +1,20 @@
+/*
+Theme Name: Your Theme Name
+Theme URI: https://yoursite.com
+Author: Your Name
+Author URI: https://yoursite.com
+Description: A modern WordPress theme built with Vite, TypeScript, and Tailwind CSS
+Version: 1.0.0
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: your-theme-slug
+
+Tags: vite, tailwind, typescript, modern, starter-theme
+Requires at least: 6.0
+Tested up to: 6.7
+Requires PHP: 7.4
+
+NOTE: This is a TEMPLATE. Customize all the above fields for your theme.
+*/
+
+/* This file is required by WordPress but styles are loaded from Vite build */

package/src/README.md

@@ -0,0 +1,56 @@
+# Source Files - Vite WordPress Template
+
+This directory contains your development source files that Vite will compile.
+
+## Structure
+
+```
+src/
+├── js/
+│   └── main.ts          # JavaScript/TypeScript entry point
+├── styles/
+│   └── main.css         # CSS entry point (includes Tailwind)
+└── tokens/              # Design tokens, variables, etc. (optional)
+```
+
+## Development
+
+- Edit files here during development
+- Changes trigger HMR when running `npm run dev`
+- Compiled output goes to `spectre-theme/dist/`
+
+## Adding Files
+
+### JavaScript/TypeScript
+
+Create new files in `js/` and import them in `main.ts`:
+
+```typescript
+import "./components/slider";
+import "./utils/helpers";
+```
+
+### CSS
+
+Create new stylesheets and import in `main.css`:
+
+```css
+@import "tailwindcss";
+@import "./components/buttons.css";
+@import "./layouts/grid.css";
+```
+
+### Assets
+
+For images, fonts, etc.:
+
+1. Import in JS/TS files
+2. Or place in `public/` folder for static assets
+3. Or reference in CSS with relative paths
+
+## Notes
+
+- This folder is NOT deployed to WordPress
+- Only the compiled output in `spectre-theme/dist/` is deployed
+- Keep this folder in version control
+- Add `spectre-theme/dist/` to `.gitignore`

package/src/js/main.ts

@@ -0,0 +1,11 @@
+import '../styles/main.css'
+
+// Your TypeScript code here
+console.log('Vite WordPress Theme Loaded!')
+
+// HMR
+if (import.meta.hot) {
+  import.meta.hot.accept(() => {
+    console.log('HMR update')
+  })
+}

package/src/styles/main.css

@@ -0,0 +1,12 @@
+/* Main Stylesheet */
+@import 'tailwindcss';
+
+/* Optional: Spectre UI */
+/* @import "@phcdevworks/spectre-ui/base.css"; */
+/* @import "@phcdevworks/spectre-ui/components.css"; */
+/* @import "@phcdevworks/spectre-ui/utilities.css"; */
+
+/* Base Styles */
+:root {
+  --font-sans: system-ui, -apple-system, sans-serif;
+}

package/tailwind.config.ts

@@ -0,0 +1,12 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+  content: [
+    './spectre-theme/**/*.php',
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config

package/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "types": [
+      "vite/client",
+      "node"
+    ],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "src"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,38 @@
+import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vite'
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
+
+export default defineConfig({
+  build: {
+    outDir: 'spectre-theme/dist',
+    emptyOutDir: true,
+    manifest: true,
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'src/js/main.ts'),
+        style: resolve(__dirname, 'src/styles/main.css')
+      },
+      output: {
+        entryFileNames: 'js/[name].[hash].js',
+        chunkFileNames: 'js/[name].[hash].js',
+        assetFileNames: (assetInfo: { name?: string }) => {
+          if (assetInfo.name?.endsWith('.css')) {
+            return 'css/[name].[hash][extname]'
+          }
+          return 'assets/[name].[hash][extname]'
+        }
+      }
+    }
+  },
+  server: {
+    port: 5173,
+    strictPort: true,
+    cors: true,
+    hmr: {
+      host: 'localhost',
+      protocol: 'ws'
+    }
+  }
+})