create-wordpress-theme-ts 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,48 +1,45 @@
1
- {
2
- "name": "my-wp-react-site",
3
- "version": "1.0.0",
4
- "type": "module",
5
- "scripts": {
6
- "dev": "vite",
7
- "build": "vite build",
8
- "build:dev": "vite build --mode development",
9
- "build:prod": "vite build --mode production",
10
- "preview": "vite preview",
11
- "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css}\" \"*.{json,ts}\""
12
- },
13
- "keywords": [],
14
- "author": "",
15
- "license": "ISC",
16
- "description": "A custom WordPress theme built with React and Vite",
17
- "dependencies": {
18
- "@fortawesome/fontawesome-svg-core": "^6.6.0",
19
- "@fortawesome/free-brands-svg-icons": "^6.6.0",
20
- "@fortawesome/free-regular-svg-icons": "^6.6.0",
21
- "@fortawesome/free-solid-svg-icons": "^6.6.0",
22
- "@fortawesome/react-fontawesome": "^0.2.2",
23
- "react": "^18.3.1",
24
- "react-dom": "^18.3.1",
25
- "react-router-dom": "^6.26.2",
26
- "styled-components": "^6.1.13"
27
- },
28
- "devDependencies": {
29
- "@types/node": "^25.0.3",
30
- "@types/react": "^18.3.8",
31
- "@types/react-dom": "^18.3.0",
32
- "@types/styled-components": "^5.1.34",
33
- "@typescript-eslint/eslint-plugin": "^8.6.0",
34
- "@typescript-eslint/parser": "^8.6.0",
35
- "@vitejs/plugin-react": "^4.3.4",
36
- "eslint": "^8.57.1",
37
- "eslint-config-prettier": "^9.1.0",
38
- "eslint-plugin-prettier": "^5.2.1",
39
- "eslint-plugin-react": "^7.36.1",
40
- "eslint-plugin-react-hooks": "^4.6.2",
41
- "prettier": "^3.3.3",
42
- "typescript": "^5.6.2",
43
- "vite": "^6.0.7",
44
- "vite-plugin-eslint": "^1.8.1",
45
- "vite-plugin-static-copy": "^2.2.0",
46
- "vite-plugin-zip-pack": "^1.2.4"
47
- }
48
- }
1
+ {
2
+ "name": "my-wp-react-site",
3
+ "version": "1.0.0",
4
+ "type": "module",
5
+ "scripts": {
6
+ "dev": "vite",
7
+ "build": "vite build --mode development",
8
+ "build:prod": "vite build --mode production",
9
+ "preview": "vite preview",
10
+ "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css}\" \"*.{json,ts}\""
11
+ },
12
+ "keywords": [],
13
+ "author": "",
14
+ "license": "ISC",
15
+ "description": "A custom WordPress theme built with React and Vite",
16
+ "dependencies": {
17
+ "@fortawesome/free-solid-svg-icons": "^7.1.0",
18
+ "@fortawesome/react-fontawesome": "^3.1.1",
19
+ "react": "^19.2.3",
20
+ "react-dom": "^19.2.3",
21
+ "react-router-dom": "^7.11.0",
22
+ "styled-components": "^6.1.19"
23
+ },
24
+ "devDependencies": {
25
+ "@eslint/js": "^9.39.2",
26
+ "@types/node": "^25.0.3",
27
+ "@types/react": "^19.2.7",
28
+ "@types/react-dom": "^19.2.3",
29
+ "@typescript-eslint/eslint-plugin": "^8.52.0",
30
+ "@typescript-eslint/parser": "^8.52.0",
31
+ "@vitejs/plugin-react": "^5.1.2",
32
+ "eslint": "^9.39.2",
33
+ "eslint-config-prettier": "^10.1.8",
34
+ "eslint-plugin-prettier": "^5.4.0",
35
+ "eslint-plugin-react": "^7.37.5",
36
+ "eslint-plugin-react-hooks": "^5.2.0",
37
+ "prettier": "^3.5.3",
38
+ "terser": "^5.44.1",
39
+ "typescript": "^5.8.3",
40
+ "vite": "^7.3.0",
41
+ "vite-plugin-eslint2": "^5.0.4",
42
+ "vite-plugin-static-copy": "^3.1.4",
43
+ "vite-plugin-zip-pack": "^1.2.4"
44
+ }
45
+ }
@@ -0,0 +1,26 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Capture Quote - Mobile App</title>
8
+ <meta name="description" content="" />
9
+ <meta name="keywords" content="" />
10
+ <meta name="author" content="Codefront Technologies" />
11
+ <link rel="canonical" href="https://www.evanellison.codefronttechnologies.com/" />
12
+ <meta property="og:title" content="Capture Quote - Mobile App" />
13
+ <meta property="og:description" content="Capture Quote - Mobile App" />
14
+ <meta property="og:url" content="https://www.evanellison.codefronttechnologies.com/" />
15
+ <meta property="og:type" content="website" />
16
+ <meta property="og:image" content="https://www.evanellison.codefronttechnologies.com/images/og-image.jpg" />
17
+ <link rel="icon" href="https://strsharedeus.blob.core.windows.net/apps/capturequote/images/favicon/favicon.ico?v=3" />
18
+ </head>
19
+
20
+ <body>
21
+ <main >
22
+ <div id="root"></div>
23
+ </main>
24
+ </body>
25
+
26
+ </html>
@@ -1,48 +1,11 @@
1
1
  /*
2
2
  Theme Name: My WordPress Theme
3
- Theme URI:
4
- Author:
5
- Author URI:
6
- Description: A custom WordPress theme built with React and Vite
3
+ Theme URI: https://example.com/
4
+ Author: Your Name
5
+ Author URI: https://example.com/
6
+ Description: A custom WordPress theme built with React, TypeScript, and Vite
7
7
  Version: 1.0.0
8
- License: MIT
8
+ License: GNU General Public License v2 or later
9
+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
10
  Text Domain: my-wp-theme
10
11
  */
11
-
12
- /* Base Reset */
13
- *, *::before, *::after {
14
- box-sizing: border-box;
15
- }
16
-
17
- * {
18
- margin: 0;
19
- padding: 0;
20
- }
21
-
22
- html, body {
23
- height: 100%;
24
- }
25
-
26
- body {
27
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
28
- line-height: 1.5;
29
- -webkit-font-smoothing: antialiased;
30
- }
31
-
32
- img, picture, video, canvas, svg {
33
- display: block;
34
- max-width: 100%;
35
- }
36
-
37
- input, button, textarea, select {
38
- font: inherit;
39
- }
40
-
41
- p, h1, h2, h3, h4, h5, h6 {
42
- overflow-wrap: break-word;
43
- }
44
-
45
- #root {
46
- isolation: isolate;
47
- min-height: 100vh;
48
- }
@@ -1,19 +1,19 @@
1
- import { Routes, Route } from 'react-router-dom';
2
- import Layout from './components/Layout';
3
- import Home from './pages/Home';
4
- import About from './pages/About';
5
- import NotFound from './pages/NotFound';
6
-
7
- function App() {
8
- return (
9
- <Routes>
10
- <Route path="/" element={<Layout />}>
11
- <Route index element={<Home />} />
12
- <Route path="about" element={<About />} />
13
- <Route path="*" element={<NotFound />} />
14
- </Route>
15
- </Routes>
16
- );
17
- }
18
-
19
- export default App;
1
+ import { Routes, Route } from 'react-router-dom';
2
+ import Layout from './components/Layout';
3
+ import Home from './pages/Home';
4
+ import About from './pages/About';
5
+ import NotFound from './pages/NotFound';
6
+
7
+ function App() {
8
+ return (
9
+ <Routes>
10
+ <Route path="/" element={<Layout />}>
11
+ <Route index element={<Home />} />
12
+ <Route path="about" element={<About />} />
13
+ <Route path="*" element={<NotFound />} />
14
+ </Route>
15
+ </Routes>
16
+ );
17
+ }
18
+
19
+ export default App;
@@ -1,88 +1,88 @@
1
- import { Outlet, Link } from 'react-router-dom';
2
- import styled from 'styled-components';
3
-
4
- const LayoutContainer = styled.div`
5
- min-height: 100vh;
6
- display: flex;
7
- flex-direction: column;
8
- `;
9
-
10
- const Header = styled.header`
11
- background: #1a1a2e;
12
- color: white;
13
- padding: 1rem 2rem;
14
- `;
15
-
16
- const Nav = styled.nav`
17
- display: flex;
18
- gap: 2rem;
19
- align-items: center;
20
- max-width: 1200px;
21
- margin: 0 auto;
22
- width: 100%;
23
- `;
24
-
25
- const Logo = styled(Link)`
26
- font-size: 1.5rem;
27
- font-weight: bold;
28
- color: white;
29
- text-decoration: none;
30
-
31
- &:hover {
32
- color: #4a9eff;
33
- }
34
- `;
35
-
36
- const NavLinks = styled.div`
37
- display: flex;
38
- gap: 1.5rem;
39
- margin-left: auto;
40
- `;
41
-
42
- const NavLink = styled(Link)`
43
- color: white;
44
- text-decoration: none;
45
- font-weight: 500;
46
- transition: color 0.2s ease;
47
-
48
- &:hover {
49
- color: #4a9eff;
50
- }
51
- `;
52
-
53
- const Main = styled.main`
54
- flex: 1;
55
- `;
56
-
57
- const Footer = styled.footer`
58
- background: #1a1a2e;
59
- color: white;
60
- padding: 1.5rem 2rem;
61
- text-align: center;
62
- `;
63
-
64
- function Layout() {
65
- return (
66
- <LayoutContainer>
67
- <Header>
68
- <Nav>
69
- <Logo to="/">My Site</Logo>
70
- <NavLinks>
71
- <NavLink to="/">Home</NavLink>
72
- <NavLink to="/about">About</NavLink>
73
- </NavLinks>
74
- </Nav>
75
- </Header>
76
-
77
- <Main>
78
- <Outlet />
79
- </Main>
80
-
81
- <Footer>
82
- <p>&copy; {new Date().getFullYear()} My Site. All rights reserved.</p>
83
- </Footer>
84
- </LayoutContainer>
85
- );
86
- }
87
-
88
- export default Layout;
1
+ import { Outlet, Link } from 'react-router-dom';
2
+ import styled from 'styled-components';
3
+
4
+ const LayoutContainer = styled.div`
5
+ min-height: 100vh;
6
+ display: flex;
7
+ flex-direction: column;
8
+ `;
9
+
10
+ const Header = styled.header`
11
+ background: #1a1a2e;
12
+ color: white;
13
+ padding: 1rem 2rem;
14
+ `;
15
+
16
+ const Nav = styled.nav`
17
+ display: flex;
18
+ gap: 2rem;
19
+ align-items: center;
20
+ max-width: 1200px;
21
+ margin: 0 auto;
22
+ width: 100%;
23
+ `;
24
+
25
+ const Logo = styled(Link)`
26
+ font-size: 1.5rem;
27
+ font-weight: bold;
28
+ color: white;
29
+ text-decoration: none;
30
+
31
+ &:hover {
32
+ color: #4a9eff;
33
+ }
34
+ `;
35
+
36
+ const NavLinks = styled.div`
37
+ display: flex;
38
+ gap: 1.5rem;
39
+ margin-left: auto;
40
+ `;
41
+
42
+ const NavLink = styled(Link)`
43
+ color: white;
44
+ text-decoration: none;
45
+ font-weight: 500;
46
+ transition: color 0.2s ease;
47
+
48
+ &:hover {
49
+ color: #4a9eff;
50
+ }
51
+ `;
52
+
53
+ const Main = styled.main`
54
+ flex: 1;
55
+ `;
56
+
57
+ const Footer = styled.footer`
58
+ background: #1a1a2e;
59
+ color: white;
60
+ padding: 1.5rem 2rem;
61
+ text-align: center;
62
+ `;
63
+
64
+ function Layout() {
65
+ return (
66
+ <LayoutContainer>
67
+ <Header>
68
+ <Nav>
69
+ <Logo to="/">My Site</Logo>
70
+ <NavLinks>
71
+ <NavLink to="/">Home</NavLink>
72
+ <NavLink to="/about">About</NavLink>
73
+ </NavLinks>
74
+ </Nav>
75
+ </Header>
76
+
77
+ <Main>
78
+ <Outlet />
79
+ </Main>
80
+
81
+ <Footer>
82
+ <p>&copy; {new Date().getFullYear()} My Site. All rights reserved.</p>
83
+ </Footer>
84
+ </LayoutContainer>
85
+ );
86
+ }
87
+
88
+ export default Layout;
@@ -1,15 +1,15 @@
1
- import React from 'react';
2
- import ReactDOM from 'react-dom/client';
3
- import { BrowserRouter } from 'react-router-dom';
4
- import App from './App';
5
- import './styles/global.css';
6
-
7
- const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
8
-
9
- root.render(
10
- <React.StrictMode>
11
- <BrowserRouter>
12
- <App />
13
- </BrowserRouter>
14
- </React.StrictMode>
15
- );
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom/client';
3
+ import { BrowserRouter } from 'react-router-dom';
4
+ import App from './App';
5
+ import './styles/global.css';
6
+
7
+ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
8
+
9
+ root.render(
10
+ <React.StrictMode>
11
+ <BrowserRouter>
12
+ <App />
13
+ </BrowserRouter>
14
+ </React.StrictMode>
15
+ );
@@ -1,66 +1,65 @@
1
- import styled from 'styled-components';
2
-
3
- const Container = styled.div`
4
- max-width: 800px;
5
- margin: 0 auto;
6
- padding: 4rem 2rem;
7
- `;
8
-
9
- const Title = styled.h1`
10
- font-size: 2.5rem;
11
- color: #1a1a2e;
12
- margin-bottom: 1.5rem;
13
- `;
14
-
15
- const Content = styled.div`
16
- color: #444;
17
- line-height: 1.8;
18
-
19
- p {
20
- margin-bottom: 1.5rem;
21
- }
22
-
23
- h2 {
24
- font-size: 1.5rem;
25
- color: #1a1a2e;
26
- margin: 2rem 0 1rem;
27
- }
28
- `;
29
-
30
- function About() {
31
- return (
32
- <Container>
33
- <Title>About</Title>
34
- <Content>
35
- <p>
36
- Welcome to our site! This is a custom WordPress theme built with modern
37
- web technologies including React, TypeScript, and Vite.
38
- </p>
39
-
40
- <h2>Our Technology Stack</h2>
41
- <p>
42
- We use React 18 for building interactive user interfaces, TypeScript for
43
- type safety and better developer experience, and Vite for lightning-fast
44
- builds and hot module replacement during development.
45
- </p>
46
-
47
- <h2>WordPress Integration</h2>
48
- <p>
49
- This theme seamlessly integrates with WordPress, allowing you to leverage
50
- the power of the world's most popular CMS while building with modern
51
- frontend tools. The production build creates a standard WordPress theme
52
- zip file that can be uploaded directly to your WordPress installation.
53
- </p>
54
-
55
- <h2>Get Started</h2>
56
- <p>
57
- Edit this page by modifying <code>src/pages/About.tsx</code>. Your changes
58
- will be reflected instantly in development mode thanks to Vite's hot
59
- module replacement.
60
- </p>
61
- </Content>
62
- </Container>
63
- );
64
- }
65
-
66
- export default About;
1
+ import styled from 'styled-components';
2
+
3
+ const Container = styled.div`
4
+ max-width: 800px;
5
+ margin: 0 auto;
6
+ padding: 4rem 2rem;
7
+ `;
8
+
9
+ const Title = styled.h1`
10
+ font-size: 2.5rem;
11
+ color: #1a1a2e;
12
+ margin-bottom: 1.5rem;
13
+ `;
14
+
15
+ const Content = styled.div`
16
+ color: #444;
17
+ line-height: 1.8;
18
+
19
+ p {
20
+ margin-bottom: 1.5rem;
21
+ }
22
+
23
+ h2 {
24
+ font-size: 1.5rem;
25
+ color: #1a1a2e;
26
+ margin: 2rem 0 1rem;
27
+ }
28
+ `;
29
+
30
+ function About() {
31
+ return (
32
+ <Container>
33
+ <Title>About</Title>
34
+ <Content>
35
+ <p>
36
+ Welcome to our site! This is a custom WordPress theme built with modern web technologies
37
+ including React, TypeScript, and Vite.
38
+ </p>
39
+
40
+ <h2>Our Technology Stack</h2>
41
+ <p>
42
+ We use React 18 for building interactive user interfaces, TypeScript for type safety and
43
+ better developer experience, and Vite for lightning-fast builds and hot module replacement
44
+ during development.
45
+ </p>
46
+
47
+ <h2>WordPress Integration</h2>
48
+ <p>
49
+ This theme seamlessly integrates with WordPress, allowing you to leverage the power of the
50
+ world&apos;s most popular CMS while building with modern frontend tools. The production
51
+ build creates a standard WordPress theme zip file that can be uploaded directly to your
52
+ WordPress installation.
53
+ </p>
54
+
55
+ <h2>Get Started</h2>
56
+ <p>
57
+ Edit this page by modifying <code>src/pages/About.tsx</code>. Your changes will be
58
+ reflected instantly in development mode thanks to Vite&apos;s hot module replacement.
59
+ </p>
60
+ </Content>
61
+ </Container>
62
+ );
63
+ }
64
+
65
+ export default About;