path with proper links

pull/5069/head
Daniel 2023-04-11 16:50:10 +05:30
parent 451642b9ab
commit 2ddba3d72f
18 changed files with 100 additions and 63 deletions

View File

@ -1,6 +1,5 @@
--- ---
const { title, path, isRtl } = Astro.props const { title, path, isRtl } = Astro.props
const distPath = (path != undefined) ? path : '../../../dist'
const cssPath = isRtl ? '.rtl' : '' const cssPath = isRtl ? '.rtl' : ''
--- ---
@ -29,4 +28,4 @@ const cssPath = isRtl ? '.rtl' : ''
<!-- REQUIRED LINKS --> <!-- REQUIRED LINKS -->
<!-- Theme style --> <!-- Theme style -->
<link rel="stylesheet" href={distPath + '/css/adminlte' + cssPath + '.css'} > <link rel="stylesheet" href={path + '/css/adminlte' + cssPath + '.css'} >

View File

@ -1,7 +1,6 @@
--- ---
const { path } = Astro.props const { path } = Astro.props
const distPath = (path != undefined) ? path : '../../../dist' const adminlteJsUrl = path + '/js/adminlte.js'
const adminlteJsUrl = distPath + '/js/adminlte.js'
--- ---
<!-- OPTIONAL SCRIPTS --> <!-- OPTIONAL SCRIPTS -->
<!-- overlayscrollbars --> <!-- overlayscrollbars -->

View File

@ -1,13 +1,14 @@
--- ---
import { convertPathToHtml } from '../../../utils/index.js';
const { path, mainPage, page } = Astro.props const { path, mainPage, page } = Astro.props
const distPath = (path != undefined) ? path : '../../../dist' const htmlPath = convertPathToHtml(path)
const htmlPath = (path != undefined) ? '.' : '..'
--- ---
<!-- Sidebar Container --> <!-- Sidebar Container -->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark"> <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<div class="sidebar-brand"> <div class="sidebar-brand">
<a href={htmlPath + '/index.html'} class="brand-link"> <a href={htmlPath + '/index.html'} class="brand-link">
<img src={distPath + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo" class="brand-image opacity-75 shadow"> <img src={path + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
<span class="brand-text fw-light">AdminLTE 4</span> <span class="brand-text fw-light">AdminLTE 4</span>
</a> </a>
</div> </div>

View File

@ -1,6 +1,6 @@
--- ---
const { path } = Astro.props const { path } = Astro.props
const distPath = (path != undefined) ? path : '../../../dist' const distPath = path
--- ---
<!-- Navbar --> <!-- Navbar -->
<nav class="app-header navbar navbar-expand bg-body"> <nav class="app-header navbar navbar-expand bg-body">

View File

@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro'; import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Timeline Elements' const title = 'AdminLTE 4 | Timeline Elements'
const path = '../../../dist'
const mainPage = 'ui-elements' const mainPage = 'ui-elements'
const page = 'timeline' const page = 'timeline'
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<Head title={title} /> <Head title={title} path={path} />
</head> </head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar path={path} />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content --> <!-- Main content -->
<main class="app-main"> <main class="app-main">
<div class="app-content-header"> <div class="app-content-header">
@ -106,10 +107,10 @@ const page = 'timeline'
<span class="time"><i class="fa-solid fa-clock"></i> 2 days ago</span> <span class="time"><i class="fa-solid fa-clock"></i> 2 days ago</span>
<h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3> <h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
<div class="timeline-body"> <div class="timeline-body">
<img src="../../assets/img/user1-128x128.jpg" alt="..."> <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
<img src="../../assets/img/user3-128x128.jpg" alt="..."> <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
<img src="../../assets/img/user4-128x128.jpg" alt="..."> <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
<img src="../../assets/img/user5-128x128.jpg" alt="..."> <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
</div> </div>
</div> </div>
</div> </div>
@ -152,6 +153,6 @@ const page = 'timeline'
</div> </div>
<!-- ./app-wrapper --> <!-- ./app-wrapper -->
<Scripts /> <Scripts path={path} />
</body> </body>
</html> </html>

View File

@ -7,6 +7,7 @@ import Scripts from "@components/_scripts.astro";
import NavbarHtml from "@components/docs/color-mode/navbar-html.md"; import NavbarHtml from "@components/docs/color-mode/navbar-html.md";
import ToggleScript from "@components/docs/color-mode/toggle-script.md"; import ToggleScript from "@components/docs/color-mode/toggle-script.md";
const title = "AdminLTE 4 | General Form Elements"; const title = "AdminLTE 4 | General Form Elements";
const path = '../../../dist'
const mainPage = "forms"; const mainPage = "forms";
const page = "general"; const page = "general";
--- ---
@ -14,12 +15,12 @@ const page = "general";
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<Head title={title} /> <Head title={title} path={path} />
</head> </head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar path={path} />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content --> <!-- Main content -->
<main class="app-main"> <main class="app-main">
<div class="app-content-header"> <div class="app-content-header">
@ -146,7 +147,7 @@ const page = "general";
</div> </div>
<!-- ./app-wrapper --> <!-- ./app-wrapper -->
<Scripts /> <Scripts path={path} />
<script is:inline> <script is:inline>
// Color Mode Toggler // Color Mode Toggler

View File

@ -3,13 +3,13 @@ import Head from '@components/_head.astro';
import Scripts from '@components/_scripts.astro'; import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Login Page' const title = 'AdminLTE 4 | Login Page'
const { path } = Astro.props const path = '../../../dist'
const htmlPath = (path != undefined) ? '.' : '..' const htmlPath = '..'
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<Head title={title} /> <Head title={title} path={path} />
</head> </head>
<body class="login-page bg-body-secondary"> <body class="login-page bg-body-secondary">
<div class="login-box"> <div class="login-box">
@ -76,6 +76,6 @@ const htmlPath = (path != undefined) ? '.' : '..'
</div> </div>
<!-- /.login-box --> <!-- /.login-box -->
<Scripts /> <Scripts path={path} />
</body> </body>
</html> </html>

View File

@ -3,13 +3,13 @@ import Head from '@components/_head.astro';
import Scripts from '@components/_scripts.astro'; import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Register Page' const title = 'AdminLTE 4 | Register Page'
const { path } = Astro.props const path = '../../../dist'
const htmlPath = (path != undefined) ? '.' : '..' const htmlPath = '..'
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<Head title={title} /> <Head title={title} path={path} />
</head> </head>
<body class="register-page bg-body-secondary"> <body class="register-page bg-body-secondary">
<div class="register-box"> <div class="register-box">
@ -79,6 +79,6 @@ const htmlPath = (path != undefined) ? '.' : '..'
</div> </div>
<!-- /.register-box --> <!-- /.register-box -->
<Scripts /> <Scripts path={path} />
</body> </body>
</html> </html>

View File

@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro'; import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | General Form Elements' const title = 'AdminLTE 4 | General Form Elements'
const path = '../../../dist'
const mainPage = 'forms' const mainPage = 'forms'
const page = 'general' const page = 'general'
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<Head title={title} /> <Head title={title} path={path} />
</head> </head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar path={path} />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content --> <!-- Main content -->
<main class="app-main"> <main class="app-main">
<div class="app-content-header"> <div class="app-content-header">
@ -87,6 +88,6 @@ const page = 'general'
</div> </div>
<!-- ./app-wrapper --> <!-- ./app-wrapper -->
<Scripts /> <Scripts path={path} />
</body> </body>
</html> </html>

View File

@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro'; import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Fixed Sidebar' const title = 'AdminLTE 4 | Fixed Sidebar'
const path = '../../../dist'
const mainPage = 'layout' const mainPage = 'layout'
const page = 'fixed-sidebar' const page = 'fixed-sidebar'
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<Head title={title} /> <Head title={title} path={path} />
</head> </head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar path={path} />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content --> <!-- Main content -->
<main class="app-main"> <main class="app-main">
@ -78,6 +79,6 @@ const page = 'fixed-sidebar'
</div> </div>
<!-- ./app-wrapper --> <!-- ./app-wrapper -->
<Scripts /> <Scripts path={path} />
</body> </body>
</html> </html>

View File

@ -6,6 +6,7 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro'; import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Layout RTL' const title = 'AdminLTE 4 | Layout RTL'
const path = '../../../dist'
const mainPage = 'layout' const mainPage = 'layout'
const page = 'layout-rtl' const page = 'layout-rtl'
const isRtl = true const isRtl = true
@ -17,8 +18,8 @@ const isRtl = true
</head> </head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar path={path} />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content --> <!-- Main content -->
<main class="app-main"> <main class="app-main">
<div class="app-content-header"> <div class="app-content-header">
@ -78,6 +79,6 @@ const isRtl = true
</div> </div>
<!-- ./app-wrapper --> <!-- ./app-wrapper -->
<Scripts /> <Scripts path={path} />
</body> </body>
</html> </html>

View File

@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro'; import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Sidebar Mini' const title = 'AdminLTE 4 | Sidebar Mini'
const path = '../../../dist'
const mainPage = 'layout' const mainPage = 'layout'
const page = 'sidebar-mini' const page = 'sidebar-mini'
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<Head title={title} /> <Head title={title} path={path} />
</head> </head>
<body class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar path={path} />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content --> <!-- Main content -->
<main class="app-main"> <main class="app-main">
<div class="app-content-header"> <div class="app-content-header">
@ -77,6 +78,6 @@ const page = 'sidebar-mini'
</div> </div>
<!-- ./app-wrapper --> <!-- ./app-wrapper -->
<Scripts /> <Scripts path={path} />
</body> </body>
</html> </html>

View File

@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro'; import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Unfixed Sidebar' const title = 'AdminLTE 4 | Unfixed Sidebar'
const path = '../../../dist'
const mainPage = 'layout' const mainPage = 'layout'
const page = 'unfixed-sidebar' const page = 'unfixed-sidebar'
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<Head title={title} /> <Head title={title} path={path} />
</head> </head>
<body class="sidebar-expand-lg bg-body-tertiary"> <body class="sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar path={path} />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content --> <!-- Main content -->
<main class="app-main"> <main class="app-main">
<div class="app-content-header"> <div class="app-content-header">
@ -77,6 +78,6 @@ const page = 'unfixed-sidebar'
</div> </div>
<!-- ./app-wrapper --> <!-- ./app-wrapper -->
<Scripts /> <Scripts path={path} />
</body> </body>
</html> </html>

View File

@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro'; import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Simple Tables' const title = 'AdminLTE 4 | Simple Tables'
const path = '../../../dist'
const mainPage = 'tables' const mainPage = 'tables'
const page = 'simple' const page = 'simple'
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<Head title={title} /> <Head title={title} path={path} />
</head> </head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar path={path} />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content --> <!-- Main content -->
<main class="app-main"> <main class="app-main">
<div class="app-content-header"> <div class="app-content-header">
@ -326,6 +327,6 @@ const page = 'simple'
</div> </div>
<!-- ./app-wrapper --> <!-- ./app-wrapper -->
<Scripts /> <Scripts path={path} />
</body> </body>
</html> </html>

View File

@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro'; import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Widgets - Cards' const title = 'AdminLTE 4 | Widgets - Cards'
const path = '../../../dist'
const mainPage = 'widgets' const mainPage = 'widgets'
const page = 'cards' const page = 'cards'
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<Head title={title} /> <Head title={title} path={path} />
</head> </head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar path={path} />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content --> <!-- Main content -->
<main class="app-main"> <main class="app-main">
<div class="app-content-header"> <div class="app-content-header">
@ -302,6 +303,6 @@ const page = 'cards'
</div> </div>
<!-- ./app-wrapper --> <!-- ./app-wrapper -->
<Scripts /> <Scripts path={path} />
</body> </body>
</html> </html>

View File

@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro'; import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Widgets - Info Box' const title = 'AdminLTE 4 | Widgets - Info Box'
const path = '../../../dist'
const mainPage = 'widgets' const mainPage = 'widgets'
const page = 'info-box' const page = 'info-box'
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<Head title={title} /> <Head title={title} path={path} />
</head> </head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar path={path} />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content --> <!-- Main content -->
<main class="app-main"> <main class="app-main">
<div class="app-content-header"> <div class="app-content-header">
@ -352,6 +353,6 @@ const page = 'info-box'
</div> </div>
<!-- ./app-wrapper --> <!-- ./app-wrapper -->
<Scripts /> <Scripts path={path} />
</body> </body>
</html> </html>

View File

@ -6,18 +6,19 @@ import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro'; import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Widgets - Small Box' const title = 'AdminLTE 4 | Widgets - Small Box'
const path = '../../../dist'
const mainPage = 'widgets' const mainPage = 'widgets'
const page = 'small-box' const page = 'small-box'
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<Head title={title} /> <Head title={title} path={path} />
</head> </head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar path={path} />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content --> <!-- Main content -->
<main class="app-main"> <main class="app-main">
<div class="app-content-header"> <div class="app-content-header">
@ -115,6 +116,6 @@ const page = 'small-box'
</div> </div>
<!-- ./app-wrapper --> <!-- ./app-wrapper -->
<Scripts /> <Scripts path={path} />
</body> </body>
</html> </html>

27
src/utils/index.js Normal file
View File

@ -0,0 +1,27 @@
function convertPathToHtml(path) {
let count = 0
while (path.startsWith('../')) {
count++
path = path.slice(3)
}
if (count === 2) {
return '.'
}
if (count === 3) {
return '..'
}
if (count === 4) {
return '../..'
}
if (count === 5) {
return '../../..'
}
return ''
}
export { convertPathToHtml }