create-wordpress-theme-ts 1.0.0 → 1.0.2

package/template/src/pages/Home.tsx

@@ -1,133 +1,135 @@
-import styled from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faRocket, faCode, faGlobe } from '@fortawesome/free-solid-svg-icons';
-
-const Container = styled.div`
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 4rem 2rem;
-`;
-
-const Hero = styled.section`
-  text-align: center;
-  padding: 4rem 0;
-`;
-
-const Title = styled.h1`
-  font-size: 3rem;
-  color: #1a1a2e;
-  margin-bottom: 1rem;
-  
-  @media (max-width: 768px) {
-    font-size: 2rem;
-  }
-`;
-
-const Subtitle = styled.p`
-  font-size: 1.25rem;
-  color: #666;
-  max-width: 600px;
-  margin: 0 auto 2rem;
-`;
-
-const FeatureGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 2rem;
-  margin-top: 4rem;
-`;
-
-const FeatureCard = styled.div`
-  background: white;
-  border-radius: 12px;
-  padding: 2rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  text-align: center;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-  
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  }
-`;
-
-const IconWrapper = styled.div`
-  font-size: 2.5rem;
-  color: #4a9eff;
-  margin-bottom: 1rem;
-`;
-
-const FeatureTitle = styled.h3`
-  font-size: 1.25rem;
-  color: #1a1a2e;
-  margin-bottom: 0.75rem;
-`;
-
-const FeatureDescription = styled.p`
-  color: #666;
-  line-height: 1.6;
-`;
-
-const CTAButton = styled.a`
-  display: inline-block;
-  background: #4a9eff;
-  color: white;
-  padding: 1rem 2rem;
-  border-radius: 8px;
-  text-decoration: none;
-  font-weight: 600;
-  transition: background 0.2s ease;
-  
-  &:hover {
-    background: #3a8eef;
-  }
-`;
-
-function Home() {
-  return (
-    <Container>
-      <Hero>
-        <Title>Welcome to Your New Site</Title>
-        <Subtitle>
-          A modern WordPress theme powered by React, TypeScript, and Vite.
-          Fast, flexible, and ready for customization.
-        </Subtitle>
-        <CTAButton href="#features">Explore Features</CTAButton>
-      </Hero>
-      
-      <FeatureGrid id="features">
-        <FeatureCard>
-          <IconWrapper>
-            <FontAwesomeIcon icon={faRocket} />
-          </IconWrapper>
-          <FeatureTitle>Lightning Fast</FeatureTitle>
-          <FeatureDescription>
-            Built with Vite for instant hot module replacement and optimized production builds.
-          </FeatureDescription>
-        </FeatureCard>
-        
-        <FeatureCard>
-          <IconWrapper>
-            <FontAwesomeIcon icon={faCode} />
-          </IconWrapper>
-          <FeatureTitle>Modern Stack</FeatureTitle>
-          <FeatureDescription>
-            React 18, TypeScript, and styled-components for a great developer experience.
-          </FeatureDescription>
-        </FeatureCard>
-        
-        <FeatureCard>
-          <IconWrapper>
-            <FontAwesomeIcon icon={faGlobe} />
-          </IconWrapper>
-          <FeatureTitle>WordPress Ready</FeatureTitle>
-          <FeatureDescription>
-            Builds directly to a WordPress theme zip file ready for deployment.
-          </FeatureDescription>
-        </FeatureCard>
-      </FeatureGrid>
-    </Container>
-  );
-}
-
-export default Home;
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faRocket, faCode, faGlobe } from '@fortawesome/free-solid-svg-icons';
+
+const Container = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 4rem 2rem;
+`;
+
+const Hero = styled.section`
+  text-align: center;
+  padding: 4rem 0;
+`;
+
+const Title = styled.h1`
+  font-size: 3rem;
+  color: #1a1a2e;
+  margin-bottom: 1rem;
+
+  @media (max-width: 768px) {
+    font-size: 2rem;
+  }
+`;
+
+const Subtitle = styled.p`
+  font-size: 1.25rem;
+  color: #666;
+  max-width: 600px;
+  margin: 0 auto 2rem;
+`;
+
+const FeatureGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 2rem;
+  margin-top: 4rem;
+`;
+
+const FeatureCard = styled.div`
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  }
+`;
+
+const IconWrapper = styled.div`
+  font-size: 2.5rem;
+  color: #4a9eff;
+  margin-bottom: 1rem;
+`;
+
+const FeatureTitle = styled.h3`
+  font-size: 1.25rem;
+  color: #1a1a2e;
+  margin-bottom: 0.75rem;
+`;
+
+const FeatureDescription = styled.p`
+  color: #666;
+  line-height: 1.6;
+`;
+
+const CTAButton = styled.a`
+  display: inline-block;
+  background: #4a9eff;
+  color: white;
+  padding: 1rem 2rem;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: 600;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: #3a8eef;
+  }
+`;
+
+function Home() {
+  return (
+    <Container>
+      <Hero>
+        <Title>Welcome to Your New Site</Title>
+        <Subtitle>
+          A modern WordPress theme powered by React, TypeScript, and Vite. Fast, flexible, and ready
+          for customization.
+        </Subtitle>
+        <CTAButton href="#features">Explore Features</CTAButton>
+      </Hero>
+
+      <FeatureGrid id="features">
+        <FeatureCard>
+          <IconWrapper>
+            <FontAwesomeIcon icon={faRocket} />
+          </IconWrapper>
+          <FeatureTitle>Lightning Fast</FeatureTitle>
+          <FeatureDescription>
+            Built with Vite for instant hot module replacement and optimized production builds.
+          </FeatureDescription>
+        </FeatureCard>
+
+        <FeatureCard>
+          <IconWrapper>
+            <FontAwesomeIcon icon={faCode} />
+          </IconWrapper>
+          <FeatureTitle>Modern Stack</FeatureTitle>
+          <FeatureDescription>
+            React 18, TypeScript, and styled-components for a great developer experience.
+          </FeatureDescription>
+        </FeatureCard>
+
+        <FeatureCard>
+          <IconWrapper>
+            <FontAwesomeIcon icon={faGlobe} />
+          </IconWrapper>
+          <FeatureTitle>WordPress Ready</FeatureTitle>
+          <FeatureDescription>
+            Builds directly to a WordPress theme zip file ready for deployment.
+          </FeatureDescription>
+        </FeatureCard>
+      </FeatureGrid>
+    </Container>
+  );
+}
+
+export default Home;

package/template/src/pages/NotFound.tsx

@@ -1,57 +1,55 @@
-import styled from 'styled-components';
-import { Link } from 'react-router-dom';
-
-const Container = styled.div`
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 8rem 2rem;
-  text-align: center;
-`;
-
-const ErrorCode = styled.h1`
-  font-size: 8rem;
-  color: #1a1a2e;
-  margin-bottom: 0;
-  line-height: 1;
-`;
-
-const Title = styled.h2`
-  font-size: 1.5rem;
-  color: #666;
-  margin-bottom: 1.5rem;
-`;
-
-const Description = styled.p`
-  color: #888;
-  margin-bottom: 2rem;
-`;
-
-const HomeLink = styled(Link)`
-  display: inline-block;
-  background: #4a9eff;
-  color: white;
-  padding: 0.75rem 1.5rem;
-  border-radius: 8px;
-  text-decoration: none;
-  font-weight: 600;
-  transition: background 0.2s ease;
-  
-  &:hover {
-    background: #3a8eef;
-  }
-`;
-
-function NotFound() {
-  return (
-    <Container>
-      <ErrorCode>404</ErrorCode>
-      <Title>Page Not Found</Title>
-      <Description>
-        Sorry, we couldn't find the page you're looking for.
-      </Description>
-      <HomeLink to="/">Go Home</HomeLink>
-    </Container>
-  );
-}
-
-export default NotFound;
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const Container = styled.div`
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 8rem 2rem;
+  text-align: center;
+`;
+
+const ErrorCode = styled.h1`
+  font-size: 8rem;
+  color: #1a1a2e;
+  margin-bottom: 0;
+  line-height: 1;
+`;
+
+const Title = styled.h2`
+  font-size: 1.5rem;
+  color: #666;
+  margin-bottom: 1.5rem;
+`;
+
+const Description = styled.p`
+  color: #888;
+  margin-bottom: 2rem;
+`;
+
+const HomeLink = styled(Link)`
+  display: inline-block;
+  background: #4a9eff;
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: 600;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: #3a8eef;
+  }
+`;
+
+function NotFound() {
+  return (
+    <Container>
+      <ErrorCode>404</ErrorCode>
+      <Title>Page Not Found</Title>
+      <Description>Sorry, we couldn&apos;t find the page you&apos;re looking for.</Description>
+      <HomeLink to="/">Go Home</HomeLink>
+    </Container>
+  );
+}
+
+export default NotFound;

package/template/src/styles/global.css

@@ -1,90 +1,90 @@
-/* Global Styles */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 16px;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
-    'Helvetica Neue', sans-serif;
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: #f5f5f5;
-  color: #333;
-}
-
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-}
-
-a {
-  color: inherit;
-}
-
-#root {
-  isolation: isolate;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Utility Classes */
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-code {
-  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
-  background-color: #e9e9e9;
-  padding: 0.2em 0.4em;
-  border-radius: 4px;
-  font-size: 0.9em;
-}
+/* Global Styles */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #f5f5f5;
+  color: #333;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+a {
+  color: inherit;
+}
+
+#root {
+  isolation: isolate;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Utility Classes */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+code {
+  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
+  background-color: #e9e9e9;
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-size: 0.9em;
+}

package/template/tsconfig.json

@@ -1,20 +1,39 @@
-{
-  "compilerOptions": {
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "target": "ES2020",
-    "module": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["vite/client", "node"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "isolatedModules": true,
-    "noEmit": true
-  },
-  "include": ["src", "vite.config.ts"]
-}
+{
+  "compilerOptions": {
+    // Determines how modules are resolved. "bundler" is optimized for modern bundlers like Vite.
+    "moduleResolution": "bundler",
+    // Allows importing TypeScript files with their .ts extension explicitly.
+    "allowImportingTsExtensions": true,
+    // Do not emit output files (bundler handles this).
+    "noEmit": true,
+    // Specifies the JSX factory function to use when targeting React JSX.
+    "jsx": "react-jsx",
+    // Specifies the target ECMAScript version.
+    "target": "es5",
+    // Specifies the module code generation.
+    "module": "esnext",
+    // Include Vite client types for import.meta.env
+    "types": ["vite/client"],
+    // Specifies the library files to be included in the compilation.
+    "lib": [
+      "dom", // Include DOM library.
+      "dom.iterable", // Include DOM iterable library.
+      "esnext" // Include latest ECMAScript features.
+    ],
+    // Allow JavaScript files to be compiled.
+    "allowJs": true,
+    // Skip type checking of declaration files.
+    "skipLibCheck": true,
+    // Enables interoperability between CommonJS and ES Modules.
+    "esModuleInterop": true,
+    // Allow default imports from modules with no default export.
+    "allowSyntheticDefaultImports": true,
+    // Enable all strict type-checking options.
+    "strict": true,
+    // Ensure consistent casing in file names.
+    "forceConsistentCasingInFileNames": true,
+    // Report errors for fallthrough cases in switch statements.
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "vite.config.ts", "vite-env.d.ts"]
+}

package/template/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />