Aigars Silkalns
4 months ago
5 changed files with 296 additions and 3 deletions
Split View
Diff Options
-
+29 -0README.md
-
+1 -1package.json
-
+121 -0scripts/fix-paths-universal.js
-
+143 -0test-deployment.html
-
+2 -2vite.config.js
+ 29
- 0
README.md
View File
+ 1
- 1
package.json
View File
+ 121
- 0
scripts/fix-paths-universal.js
View File
| @ -0,0 +1,121 @@ | |||
| import fs from 'fs'; | |||
| import path from 'path'; | |||
| import { fileURLToPath } from 'url'; | |||
| const __filename = fileURLToPath(import.meta.url); | |||
| const __dirname = path.dirname(__filename); | |||
| // Mapping of sidebar links to actual file locations | |||
| const linkMappings = { | |||
| 'dashboard-finance.html': 'pages/dashboards/finance.html', | |||
| 'dashboard-sales.html': 'pages/dashboards/sales.html', | |||
| 'dashboard-influencer.html': 'pages/dashboards/influencer.html', | |||
| 'ui-cards.html': 'pages/ui-elements/cards.html', | |||
| 'ui-general.html': 'pages/ui-elements/general.html', | |||
| 'ui-typography.html': 'pages/ui-elements/typography.html', | |||
| 'general-tables.html': 'pages/tables/general-tables.html', | |||
| 'data-tables.html': 'pages/tables/data-tables.html', | |||
| 'products.html': 'pages/ecommerce/products.html', | |||
| 'product-single.html': 'pages/ecommerce/product-single.html', | |||
| 'checkout.html': 'pages/ecommerce/checkout.html', | |||
| 'blank-page.html': 'pages/misc/blank-page.html', | |||
| 'login.html': 'pages/auth/login.html', | |||
| 'signup.html': 'pages/auth/signup.html', | |||
| 'forgot-password.html': 'pages/auth/forgot-password.html', | |||
| '404.html': 'pages/misc/404.html', | |||
| 'calendar.html': 'pages/calendar.html', | |||
| 'chat.html': 'pages/chat.html', | |||
| 'inbox.html': 'pages/email/inbox.html', | |||
| 'influencer-finder.html': 'pages/apps/influencer-finder.html', | |||
| 'influencer-profile.html': 'pages/apps/influencer-profile.html', | |||
| 'users.html': 'pages/users.html', | |||
| 'timeline.html': 'pages/timeline.html', | |||
| 'settings.html': 'pages/settings.html', | |||
| 'form-elements.html': 'pages/form-elements.html', | |||
| 'form-validation.html': 'pages/form-validation.html', | |||
| 'multiselect.html': 'pages/multiselect.html', | |||
| 'charts.html': 'pages/charts/index.html' | |||
| }; | |||
| // Function to update paths in a file | |||
| function updatePathsInFile(filePath, rootDir) { | |||
| const content = fs.readFileSync(filePath, 'utf8'); | |||
| const fileRelativeToRoot = path.relative(rootDir, filePath); | |||
| const fileDepth = fileRelativeToRoot.split(path.sep).length - 1; | |||
| let updatedContent = content; | |||
| // Update all .html links | |||
| updatedContent = updatedContent.replace(/href="([^"]+\.html)"/g, (match, p1) => { | |||
| // Skip if already has ../ or is an absolute URL or anchor | |||
| if (p1.startsWith('../') || p1.startsWith('http') || p1.startsWith('#') || p1.startsWith('/')) { | |||
| return match; | |||
| } | |||
| // Check if this link needs mapping | |||
| const mappedPath = linkMappings[p1] || p1; | |||
| // For nested files, calculate the correct relative path | |||
| if (fileDepth > 0) { | |||
| const fromDir = path.dirname(fileRelativeToRoot); | |||
| const toPath = mappedPath === 'index.html' ? 'index.html' : mappedPath; | |||
| const relativePath = path.relative(fromDir, toPath).replace(/\\/g, '/'); | |||
| return `href="${relativePath}"`; | |||
| } | |||
| // For root files, use the mapped path directly | |||
| return `href="${mappedPath}"`; | |||
| }); | |||
| // Update asset paths | |||
| updatedContent = updatedContent.replace(/(?:href|src)="(assets\/[^"]+)"/g, (match, p1) => { | |||
| if (p1.startsWith('../') || p1.startsWith('http')) { | |||
| return match; | |||
| } | |||
| const prefix = fileDepth > 0 ? '../'.repeat(fileDepth) : ''; | |||
| return match.replace(p1, prefix + p1); | |||
| }); | |||
| // Update special paths like /pages/email/compose.html | |||
| updatedContent = updatedContent.replace(/href="\/pages\/([^"]+)"/g, (match, p1) => { | |||
| const prefix = fileDepth > 0 ? '../'.repeat(fileDepth) : ''; | |||
| return `href="${prefix}pages/${p1}"`; | |||
| }); | |||
| // Only write if content changed | |||
| if (content !== updatedContent) { | |||
| fs.writeFileSync(filePath, updatedContent); | |||
| console.log(`Updated paths in: ${path.relative(rootDir, filePath)}`); | |||
| } | |||
| } | |||
| // Function to recursively find all HTML files | |||
| function findHtmlFiles(dir, files = []) { | |||
| const items = fs.readdirSync(dir); | |||
| for (const item of items) { | |||
| const fullPath = path.join(dir, item); | |||
| const stat = fs.statSync(fullPath); | |||
| if (stat.isDirectory()) { | |||
| findHtmlFiles(fullPath, files); | |||
| } else if (item.endsWith('.html')) { | |||
| files.push(fullPath); | |||
| } | |||
| } | |||
| return files; | |||
| } | |||
| // Main execution | |||
| const distDir = path.resolve(__dirname, '../dist'); | |||
| console.log('Fixing paths for universal deployment...\n'); | |||
| const htmlFiles = findHtmlFiles(distDir); | |||
| console.log(`Found ${htmlFiles.length} HTML files to process\n`); | |||
| htmlFiles.forEach(file => { | |||
| updatePathsInFile(file, distDir); | |||
| }); | |||
| console.log('\nPath fixing complete! The project can now be deployed to any subfolder.'); | |||
+ 143
- 0
test-deployment.html
View File
| @ -0,0 +1,143 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="UTF-8"> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
| <title>Concept Dashboard - Deployment Test</title> | |||
| <style> | |||
| body { | |||
| font-family: Arial, sans-serif; | |||
| max-width: 1200px; | |||
| margin: 0 auto; | |||
| padding: 20px; | |||
| background-color: #f5f5f5; | |||
| } | |||
| .card { | |||
| background: white; | |||
| padding: 20px; | |||
| margin-bottom: 20px; | |||
| border-radius: 8px; | |||
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |||
| } | |||
| h1 { | |||
| color: #333; | |||
| margin-bottom: 30px; | |||
| } | |||
| h2 { | |||
| color: #5969ff; | |||
| margin-bottom: 15px; | |||
| } | |||
| .success { | |||
| color: #28a745; | |||
| } | |||
| .code { | |||
| background: #f4f4f4; | |||
| padding: 10px; | |||
| border-radius: 4px; | |||
| font-family: monospace; | |||
| margin: 10px 0; | |||
| } | |||
| .links { | |||
| display: grid; | |||
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |||
| gap: 15px; | |||
| margin-top: 20px; | |||
| } | |||
| .link-card { | |||
| background: #f8f9fa; | |||
| padding: 15px; | |||
| border-radius: 4px; | |||
| border-left: 4px solid #5969ff; | |||
| } | |||
| .link-card h3 { | |||
| margin: 0 0 10px 0; | |||
| color: #333; | |||
| font-size: 16px; | |||
| } | |||
| .link-card a { | |||
| color: #5969ff; | |||
| text-decoration: none; | |||
| font-size: 14px; | |||
| } | |||
| .link-card a:hover { | |||
| text-decoration: underline; | |||
| } | |||
| </style> | |||
| </head> | |||
| <body> | |||
| <h1>🚀 Concept Dashboard - Universal Deployment</h1> | |||
| <div class="card"> | |||
| <h2 class="success">✅ Build Successful!</h2> | |||
| <p>The project has been built with universal path support. All navigation links will work correctly regardless of where you deploy.</p> | |||
| <h3>Deployment Instructions:</h3> | |||
| <ol> | |||
| <li>Upload the entire contents of the <code>dist</code> folder to your server</li> | |||
| <li>The dashboard will work in any location: | |||
| <ul> | |||
| <li>Root domain: <code>https://example.com/</code></li> | |||
| <li>Subfolder: <code>https://colorlib.com/polygon/concept/</code></li> | |||
| <li>Any other subfolder location</li> | |||
| </ul> | |||
| </li> | |||
| </ol> | |||
| </div> | |||
| <div class="card"> | |||
| <h2>Path Structure</h2> | |||
| <p>The build system automatically handles path resolution:</p> | |||
| <ul> | |||
| <li><strong>Root pages</strong> link to: <code>pages/[category]/[page].html</code></li> | |||
| <li><strong>Nested pages</strong> use relative paths: <code>../[page].html</code> or <code>../../index.html</code></li> | |||
| <li><strong>Assets</strong> are referenced with appropriate <code>../</code> prefixes based on page depth</li> | |||
| </ul> | |||
| </div> | |||
| <div class="card"> | |||
| <h2>Test Links</h2> | |||
| <p>Open these pages in your browser to test navigation:</p> | |||
| <div class="links"> | |||
| <div class="link-card"> | |||
| <h3>📊 Dashboards</h3> | |||
| <a href="dist/index.html">E-commerce Dashboard</a><br> | |||
| <a href="dist/pages/dashboards/finance.html">Finance Dashboard</a><br> | |||
| <a href="dist/pages/dashboards/sales.html">Sales Dashboard</a> | |||
| </div> | |||
| <div class="link-card"> | |||
| <h3>📧 Email Pages</h3> | |||
| <a href="dist/pages/email/inbox.html">Inbox</a><br> | |||
| <a href="dist/pages/email/compose.html">Compose</a><br> | |||
| <a href="dist/pages/email/details.html">Email Details</a> | |||
| </div> | |||
| <div class="link-card"> | |||
| <h3>🎨 UI Elements</h3> | |||
| <a href="dist/pages/ui-elements/cards.html">Cards</a><br> | |||
| <a href="dist/pages/ui-elements/general.html">General Elements</a><br> | |||
| <a href="dist/pages/ui-elements/typography.html">Typography</a> | |||
| </div> | |||
| <div class="link-card"> | |||
| <h3>🛍️ E-commerce</h3> | |||
| <a href="dist/pages/ecommerce/products.html">Products</a><br> | |||
| <a href="dist/pages/ecommerce/product-single.html">Product Details</a><br> | |||
| <a href="dist/pages/ecommerce/checkout.html">Checkout</a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="card"> | |||
| <h2>How It Works</h2> | |||
| <p>The build process includes two steps:</p> | |||
| <div class="code">npm run build</div> | |||
| <ol> | |||
| <li><strong>Vite Build:</strong> Compiles all assets and generates HTML files</li> | |||
| <li><strong>Path Fixing Script:</strong> Automatically adjusts all navigation links based on file depth</li> | |||
| </ol> | |||
| <p>This ensures that navigation works correctly regardless of deployment location.</p> | |||
| </div> | |||
| </body> | |||
| </html> | |||