github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

removed gulp and implement cli and astro

pull/4926/head
Daniel 2023-02-19 21:40:29 +05:30
parent 034bda7138
commit 3113ac5efe
33 changed files with 8416 additions and 11089 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -4,3 +4,4 @@
/dist/
/docs/
/docs_html/
/env.d.ts/

7
.gitignore vendored
View File

@ -1,3 +1,9 @@
# build output
dist/
# generated types
.astro/
# System / Log files
*.DS_Store
*.log
@ -32,4 +38,3 @@ TODO
test.html
ad.js
/.cache/
/.temp/

315
gulpfile.js
View File

@ -1,315 +0,0 @@
/* eslint-env node */
const autoprefix = require('autoprefixer')
const browserSync = require('browser-sync').create()
const del = require('del')
const { src, dest, lastRun, watch, series, parallel } = require('gulp')
const cleanCss = require('gulp-clean-css')
const gulpESLintNew = require('gulp-eslint-new')
const fileinclude = require('gulp-file-include')
const formatHTML = require('gulp-format-html')
const validator = require('gulp-html')
const gulpIf = require('gulp-if')
const postcss = require('gulp-postcss')
const rename = require('gulp-rename')
const sass = require('gulp-sass')(require('sass'))
const gulpStylelint = require('@ronilaukkarinen/gulp-stylelint')
const terser = require('gulp-terser')
const rollup = require('rollup')
const rollupTypescript = require('@rollup/plugin-typescript')
const rtlcss = require('rtlcss')
const pkg = require('./package')
const year = new Date().getFullYear()
const banner = `/*!
* AdminLTE v${pkg.version} (${pkg.homepage})
* Copyright 2014-${year} ${pkg.author}
* Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
*/`
// Define paths
const paths = {
dist: {
base: './dist/',
css: './dist/css',
js: './dist/js',
html: './dist/pages',
assets: './dist/assets'
},
src: {
base: './src/',
html: './src/pages/**/*.html',
assets: './src/assets/**/*.*',
partials: './src/partials/**/*.html',
scss: './src/scss',
ts: './src/ts'
},
temp: {
base: './.temp/',
css: './.temp/css',
js: './.temp/js',
html: './.temp/pages',
assets: './.temp/assets'
}
}
const sassOptions = {
outputStyle: 'expanded',
includePaths: ['./node_modules/']
}
const postcssOptions = [
autoprefix({ cascade: false })
]
const postcssRtlOptions = [
autoprefix({ cascade: false }),
rtlcss({})
]
// From here Dev mode will Start
// Lint SCSS
const lintScss = () => src([paths.src.scss + '/**/*.scss'], { since: lastRun(lintScss) })
.pipe(gulpStylelint({
failAfterError: false,
reporters: [
{ formatter: 'string', console: true }
],
debug: true
}))
// Compile SCSS
const scss = () => src(paths.src.scss + '/adminlte.scss', { sourcemaps: true })
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(postcssOptions))
.pipe(dest(paths.temp.css, { sourcemaps: '.' }))
.pipe(browserSync.stream())
// Compile SCSS RTL
const scssRtl = () => src(paths.temp.css + '/adminlte.css', { sourcemaps: true })
.pipe(postcss(postcssRtlOptions))
.pipe(rename({ suffix: '.rtl' }))
.pipe(dest(paths.temp.css, { sourcemaps: '.' }))
.pipe(browserSync.stream())
// Lint TS
function isFixed(file) {
// Has ESLint fixed the file contents?
return file.eslint !== null && file.eslint.fixed
}
const lintTs = () => src([paths.src.ts + '/**/*.ts'], { since: lastRun(lintTs) })
.pipe(gulpESLintNew({ fix: true }))
.pipe(gulpIf(isFixed, dest(paths.src.ts)))
.pipe(gulpESLintNew.format())
.pipe(gulpESLintNew.failAfterError())
// Compile TS
const tsCompile = () =>
rollup.rollup({
input: paths.src.ts + '/adminlte.ts',
output: {
banner
},
plugins: [
rollupTypescript()
]
}).then(bundle => bundle.write({
file: paths.temp.js + '/adminlte.js',
format: 'umd',
name: 'adminlte',
sourcemap: true
})).then(browserSync.stream())
const assets = () => src([paths.src.assets])
.pipe(dest(paths.temp.assets))
.pipe(browserSync.stream())
const index = () => src([paths.src.base + '*.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: './src/partials/',
context: {
environment: 'development'
}
}))
.pipe(formatHTML())
.pipe(dest(paths.temp.base))
.pipe(browserSync.stream())
const html = () => src([paths.src.html])
.pipe(fileinclude({
prefix: '@@',
basepath: './src/partials/',
context: {
environment: 'development'
}
}))
.pipe(formatHTML())
.pipe(dest(paths.temp.html))
.pipe(browserSync.stream())
const lintHtml = () => src([paths.temp.html + '/**/*.html', paths.temp.base + '*.html'], { since: lastRun(lintHtml) })
.pipe(validator())
const serve = () => {
browserSync.init({
server: paths.temp.base,
notify: true
})
watch([paths.src.scss + '/**/*.scss'], series(lintScss, scss, scssRtl))
watch([paths.src.ts], series(lintTs, tsCompile))
watch([paths.src.html, paths.src.base + '*.html', paths.src.partials], series(html, index, lintHtml))
watch([paths.src.assets], series(assets))
}
// From here Dist will Start
// Clean
const cleanDist = () => del([paths.dist.base])
const lintDistScss = () => src([paths.src.scss + '/**/*.scss'], ['./.temp/**/*.css'])
.pipe(gulpStylelint({
failAfterError: false,
reporters: [
{ formatter: 'string', console: true }
]
}))
// Compile and copy all scss/css
const copyDistCssAll = () => src([paths.src.scss + '/**/*.scss'], {
base: paths.src.scss,
sourcemaps: true
})
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(postcssOptions))
.pipe(dest(paths.dist.css, { sourcemaps: '.' }))
const copyDistCssRtl = () => src(paths.dist.css + '/*.css', { sourcemaps: true })
.pipe(postcss(postcssRtlOptions))
.pipe(rename({ suffix: '.rtl' }))
.pipe(dest(paths.dist.css, { sourcemaps: '.' }))
// Minify CSS
const minifyDistCss = () => src([
paths.dist.css + '/**/*.css'
], {
base: paths.dist.css,
sourcemaps: true
})
.pipe(cleanCss({ format: { breakWith: 'lf' } }))
.pipe(rename({ suffix: '.min' }))
.pipe(dest(paths.dist.css, { sourcemaps: '.' }))
const lintDistTs = () => src([paths.src.ts + '/**/*.ts'])
.pipe(gulpESLintNew())
.pipe(gulpESLintNew.format())
.pipe(gulpESLintNew.failAfterError())
// Compile and copy ts/js
const copyDistJs = () =>
rollup.rollup({
input: paths.src.ts + '/adminlte.ts',
output: {
banner
},
plugins: [
rollupTypescript()
]
}).then(bundle => bundle.write({
file: paths.dist.js + '/adminlte.js',
format: 'umd',
name: 'adminlte',
sourcemap: true
}))
// Minify JS
const minifyDistJs = () => src(paths.dist.js + '/adminlte.js', { sourcemaps: true })
.pipe(terser({ compress: { passes: 2 } }))
.pipe(rename({ suffix: '.min' }))
.pipe(dest(paths.dist.js, { sourcemaps: '.' }))
// Copy assets
const copyDistAssets = () => src(paths.src.assets)
.pipe(dest(paths.dist.assets))
// Copy index
const copyDistHtmlIndex = () => src([paths.src.base + '*.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: './src/partials/',
context: {
environment: 'production'
}
}))
.pipe(formatHTML())
.pipe(dest(paths.dist.base))
// Copy Html
const copyDistHtml = () => src([paths.src.html])
.pipe(fileinclude({
prefix: '@@',
basepath: './src/partials/',
context: {
environment: 'production'
}
}))
.pipe(formatHTML())
.pipe(dest(paths.dist.html))
// HTML Lint
// Copy index for Lint
const copyDistHtmlIndexForLint = () => src([paths.src.base + '*.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: './src/partials/',
context: {
environment: 'production'
}
}))
.pipe(formatHTML())
.pipe(dest(paths.temp.base))
// Copy Html for Lint
const copyDistHtmlForLint = () => src([paths.src.html])
.pipe(fileinclude({
prefix: '@@',
basepath: './src/partials/',
context: {
environment: 'production'
}
}))
.pipe(formatHTML())
.pipe(dest(paths.temp.html))
// Now Lint
const lintDistHtmlCopied = () => src([paths.temp.html + '/**/*.html', paths.temp.base + '*.html'])
.pipe(validator())
const lintDistHtml = series(copyDistHtmlIndexForLint, copyDistHtmlForLint, lintDistHtmlCopied)
const lint = parallel(
lintDistScss,
lintDistTs,
lintDistHtml
)
exports.lint = lint
const compile = series(
cleanDist,
parallel(
series(copyDistCssAll, copyDistCssRtl, minifyDistCss),
series(copyDistJs, minifyDistJs),
copyDistAssets,
copyDistHtmlIndex,
copyDistHtml
)
)
exports.compile = compile
// For Production Release
exports.production = series(lint, compile)
// Default - Only for light mode AdminLTE
exports.default = series(scss, tsCompile, html, index, assets, serve)

18294
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

53
package.json
View File

@ -6,14 +6,33 @@
"author": "Colorlib <https://colorlib.com>",
"main": "dist/js/adminlte.min.js",
"scripts": {
"dev": "npm-run-all --parallel watch docs-serve",
"css": "npm-run-all css-compile css-prefix css-rtl css-minify",
"css-compile": "sass --style expanded --load-path=\"node_modules\" --source-map --embed-sources --no-error-css src/scss/:dist/css/",
"css-rtl": "cross-env NODE_ENV=RTL postcss --config src/config/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
"css-lint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd",
"css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
"css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
"css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
"css-prefix": "postcss --config src/config/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
"js": "npm-run-all js-compile js-minify",
"js-compile": "rollup --config src/config/rollup.config.js --sourcemap",
"js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives .",
"js-minify": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/adminlte.js.map,includeSources,url=adminlte.min.js.map\" --output dist/js/adminlte.min.js dist/js/adminlte.js",
"bundlewatch": "bundlewatch --config .bundlewatch.config.json",
"lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
"docs-compile": "node -v",
"docs-lint": "node -v",
"lint": "npx gulp lint && npm run lockfile-lint",
"compile": "npx gulp compile",
"production": "npx gulp production",
"dev": "npx gulp"
"docs-compile": "astro --config src/config/astro.config.mjs build",
"docs-lint": "astro --config src/config/astro.config.mjs check",
"docs-serve": "cross-env APP_ENV=DEV astro --config src/config/astro.config.mjs dev",
"assets": "node src/config/assets.config.mjs",
"lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint docs-lint lockfile-lint",
"compile": "npm-run-all docs-compile assets css js",
"production": "npm-run-all lint compile",
"watch": "npm-run-all --parallel watch-*",
"watch-css-main": "nodemon --watch src/scss/ --ext scss --exec \"npm-run-all css-lint css-compile\"",
"watch-css-dist": "nodemon --watch dist/css/ --ext css --ignore \"dist/css/*.rtl.*\" --exec \"npm run css-rtl\"",
"watch-js-main": "nodemon --watch src/ts/ --ext ts --exec \"npm-run-all js-lint js-compile\"",
"watch-assets": "nodemon --watch src/assets/ --exec \"npm run assets\""
},
"keywords": [
"css",
@ -38,37 +57,31 @@
},
"devDependencies": {
"@rollup/plugin-typescript": "^11.0.0",
"@ronilaukkarinen/gulp-stylelint": "^14.0.9",
"@typescript-eslint/eslint-plugin": "^5.51.0",
"@typescript-eslint/parser": "^5.51.0",
"astro": "^2.0.13",
"autoprefixer": "^10.4.13",
"bootstrap": "^5.3.0-alpha1",
"browser-sync": "^2.27.11",
"bundlewatch": "^0.3.3",
"del": "^6.1.1",
"clean-css-cli": "^5.6.2",
"cross-env": "^7.0.3",
"eslint": "^8.33.0",
"eslint-config-xo": "^0.43.1",
"eslint-config-xo-typescript": "^0.55.1",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-unicorn": "^45.0.2",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-eslint-new": "^1.7.1",
"gulp-file-include": "^2.3.0",
"gulp-format-html": "^1.5.0",
"gulp-html": "^5.0.0",
"gulp-if": "^3.0.0",
"gulp-postcss": "^9.0.1",
"gulp-rename": "^2.0.0",
"gulp-sass": "^5.1.0",
"gulp-terser": "^2.1.0",
"fs-extra": "^11.1.0",
"lockfile-lint": "^4.10.0",
"nodemon": "^2.0.20",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.6",
"postcss-cli": "^10.1.0",
"rollup": "^3.14.0",
"rtlcss": "^4.0.0",
"sass": "^1.58.0",
"stylelint": "^14.9.1",
"stylelint-config-twbs-bootstrap": "^7.0.0",
"terser": "^5.16.4",
"tslib": "^2.5.0",
"typescript": "^4.9.5"
}

14
src/config/.eslintrc.json Normal file
View File

@ -0,0 +1,14 @@
{
"env": {
"browser": false,
"node": true
},
"parserOptions": {
"sourceType": "module"
},
"extends": "../../.eslintrc.json",
"rules": {
"no-console": "off",
"unicorn/prefer-top-level-await": "off"
}
}

8
src/config/assets.config.mjs Normal file
View File

@ -0,0 +1,8 @@
import fs from 'fs-extra'
try {
fs.copySync('./src/assets', './dist/assets')
console.log('Assets copy success!')
} catch (error) {
console.error(error)
}

12
src/config/astro.config.mjs Normal file
View File

@ -0,0 +1,12 @@
import { defineConfig } from 'astro/config'
// https://astro.build/config
export default defineConfig({
build: {
// Example: Generate `page.html` instead of `page/index.html` during build.
format: 'file'
},
// base: './dist',
srcDir: './src/html',
outDir: './dist/pages'
})

15
src/config/postcss.config.mjs Normal file
View File

@ -0,0 +1,15 @@
export default ctx => {
return {
map: {
inline: false,
annotation: true,
sourcesContent: true
},
plugins: {
autoprefixer: {
cascade: false
},
rtlcss: ctx.env === 'RTL' ? {} : false
}
}
}

21
src/config/rollup.config.js Normal file
View File

@ -0,0 +1,21 @@
const typescript = require('@rollup/plugin-typescript')
// import * as pkg from '../../package.json'
const pkg = require('../../package.json')
const year = new Date().getFullYear()
const banner = `/*!
* AdminLTE v${pkg.version} (${pkg.homepage})
* Copyright 2014-${year} ${pkg.author}
* Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
*/`
module.exports = {
input: 'src/ts/adminlte.ts',
output: {
file: 'dist/js/adminlte.js',
format: 'umd',
banner,
name: 'adminlte'
},
plugins: [typescript()]
}

3
src/html/.tsconfig.json Normal file
View File

@ -0,0 +1,3 @@
{
"extends": "astro/tsconfigs/base"
}

12
src/partials/_head.html → src/html/components/_head.astro
View File

@ -1,8 +1,14 @@
---
const { title, path, isRtl } = Astro.props
const distPath = (path != undefined) ? path : '../../../dist'
const cssPath = isRtl ? '.rtl' : ''
---
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Primary Meta Tags -->
<title>@@title</title>
<title>{title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="@@title">
<meta name="title" content={title}>
<meta name="author" content="ColorlibHQ">
<meta name="description" content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS.">
<meta name="keywords" content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard" />
@ -21,4 +27,4 @@
<!-- REQUIRED LINKS -->
<!-- Theme style -->
<link rel="stylesheet" href="@@path/css/adminlte@@if(this.isRtl == true){.rtl}.css">
<link rel="stylesheet" href={distPath + '/css/adminlte' + cssPath + '.css'} >

10
src/partials/_scripts.html → src/html/components/_scripts.astro
View File

@ -1,3 +1,7 @@
---
const { path } = Astro.props
const distPath = (path != undefined) ? path : '../../../dist'
---
<!-- OPTIONAL SCRIPTS -->
<!-- overlayScrollbars -->
<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.0.3/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-/dwBbLeVyyWBtWfH3jHdL2oVVmLKoGnEFzoOSL3nJC0=" crossorigin="anonymous"></script>
@ -10,10 +14,10 @@
<!-- REQUIRED SCRIPTS -->
<!-- AdminLTE App -->
<script src="@@path/js/adminlte.js"></script>
<script src={distPath + '/js/adminlte.js'}></script>
<!-- OPTIONAL SCRIPTS -->
<script>
<script is:inline>
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
const Default = {
scrollbarTheme: 'os-theme-light',
@ -34,7 +38,7 @@
</script>
<!-- DON'T USE THIS IN PRODUCTION -->
<script>
<script is:inline>
// Color Mode Toggler
(() => {
'use strict'

5
src/partials/dashboard/_footer.html → src/html/components/dashboard/_footer.astro
View File

@ -1,3 +1,6 @@
---
const year = new Date().getFullYear()
---
<!-- Main Footer -->
<footer class="app-footer">
<!-- To the end -->
@ -5,5 +8,5 @@
Anything you want
</div>
<!-- Default to the start -->
<strong>Copyright &copy; 2014-2023 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
<strong>Copyright &copy; 2014-{year} <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
</footer>

63
src/partials/dashboard/_sidenav.html → src/html/components/dashboard/_sidenav.astro
View File

@ -1,8 +1,13 @@
---
const { path, mainPage, page } = Astro.props
const distPath = (path != undefined) ? path : '../../../dist'
const htmlPath = (path != undefined) ? '.' : '..'
---
<!-- Sidebar Container -->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<div class="sidebar-brand">
<a href="@@path/index.html" class="brand-link">
<img src="@@path/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
<a href={htmlPath + '/index.html'} class="brand-link">
<img src={distPath + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
<span class="brand-text fw-light">AdminLTE 4</span>
</a>
<a class="pushmenu d-none d-lg-block" data-lte-toggle="sidebar-mini" href="javascript:;" role="button"><i class="fa-solid fa-angle-double-left"></i></a>
@ -12,8 +17,8 @@
<nav class="mt-2">
<!-- Sidebar Menu -->
<ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
<li class="nav-item @@if (context.mainPage === 'dashboard') {menu-open}">
<a href="javascript:;" class="nav-link @@if (context.mainPage === 'dashboard') {active}">
<li class:list={['nav-item', mainPage === 'dashboard' && 'menu-open']}>
<a href="javascript:;" class:list={['nav-link', mainPage === 'dashboard' && 'active']}>
<i class="nav-icon fa-solid fa-gauge-high"></i>
<p>
Dashboard
@ -22,27 +27,27 @@
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="@@path/index.html" class="nav-link @@if (context.page === 'index') {active}">
<a href={htmlPath + '/index.html'} class:list={['nav-link', page === 'index' && 'active']}>
<i class="nav-icon fa-regular fa-circle"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="@@path/index2.html" class="nav-link @@if (context.page === 'index2') {active}">
<a href={htmlPath + '/index2.html'} class:list={['nav-link', page === 'index2' && 'active']}>
<i class="nav-icon fa-regular fa-circle"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="@@path/index3.html" class="nav-link @@if (context.page === 'index3') {active}">
<a href={htmlPath + '/index3.html'} class:list={['nav-link', page === 'index3' && 'active']}>
<i class="nav-icon fa-regular fa-circle"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item @@if (context.mainPage === 'widgets') {menu-open}">
<a href="javascript:;" class="nav-link @@if (context.mainPage === 'widgets') {active}">
<li class:list={['nav-item', mainPage === 'widgets' && 'menu-open']}>
<a href="javascript:;" class:list={['nav-link', mainPage === 'widgets' && 'active']}>
<i class="nav-icon fa-solid fa-box-open"></i>
<p>
Widgets
@ -51,19 +56,19 @@
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="@@path/pages/widgets/small-box.html" class="nav-link @@if (context.page === 'small-box') {active}">
<a href={htmlPath + '/widgets/small-box.html'} class:list={['nav-link', page === 'small-box' && 'active']}>
<i class="nav-icon fa-regular fa-circle"></i>
<p>Small Box</p>
</a>
</li>
<li class="nav-item">
<a href="@@path/pages/widgets/info-box.html" class="nav-link @@if (context.page === 'info-box') {active}">
<a href={htmlPath + '/widgets/info-box.html'} class:list={['nav-link', page === 'info-box' && 'active']}>
<i class="nav-icon fa-regular fa-circle"></i>
<p>info Box</p>
</a>
</li>
<li class="nav-item">
<a href="@@path/pages/widgets/cards.html" class="nav-link @@if (context.page === 'cards') {active}">
<a href={htmlPath + '/widgets/cards.html'} class:list={['nav-link', page === 'cards' && 'active']}>
<i class="nav-icon fa-regular fa-circle"></i>
<p>Cards</p>
</a>
@ -71,8 +76,8 @@
</ul>
</li>
<li class="nav-item @@if (context.mainPage === 'layout') {menu-open}">
<a href="javascript:;" class="nav-link @@if (context.mainPage === 'layout') {active}">
<li class:list={['nav-item', mainPage === 'layout' && 'menu-open']}>
<a href="javascript:;" class:list={['nav-link', mainPage === 'layout' && 'active']}>
<i class="nav-icon fa-solid fa-copy"></i>
<p>
Layout Options
@ -82,33 +87,33 @@
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="@@path/pages/layout/unfixed-sidebar.html" class="nav-link @@if (context.page === 'unfixed-sidebar') {active}">
<a href={htmlPath + '/layout/unfixed-sidebar.html'} class:list={['nav-link', page === 'unfixed-sidebar' && 'active']}>
<i class="nav-icon fa-regular fa-circle"></i>
<p>Unfixed Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="@@path/pages/layout/fixed-sidebar.html" class="nav-link @@if (context.page === 'fixed-sidebar') {active}">
<a href={htmlPath + '/layout/fixed-sidebar.html'} class:list={['nav-link', page === 'fixed-sidebar' && 'active']}>
<i class="nav-icon fa-regular fa-circle"></i>
<p>Fixed Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="@@path/pages/layout/sidebar-mini.html" class="nav-link @@if (context.page === 'sidebar-mini') {active}">
<a href={htmlPath + '/layout/sidebar-mini.html'} class:list={['nav-link', page === 'sidebar-mini' && 'active']}>
<i class="nav-icon fa-regular fa-circle"></i>
<p>Sidebar Mini</p>
</a>
</li>
<li class="nav-item">
<a href="@@path/pages/layout/layout-rtl.html" class="nav-link @@if (context.page === 'layout-rtl') {active}">
<a href={htmlPath + '/layout/layout-rtl.html'} class:list={['nav-link', page === 'layout-rtl' && 'active']}>
<i class="nav-icon fa-regular fa-circle"></i>
<p>Layout RTL</p>
</a>
</li>
</ul>
</li>
<li class="nav-item @@if (context.mainPage === 'ui-elements') {menu-open}">
<a href="javascript:;" class="nav-link @@if (context.mainPage === 'ui-elements') {active}">
<li class:list={['nav-item', mainPage === 'ui-elements' && 'menu-open']}>
<a href="javascript:;" class:list={['nav-link', mainPage === 'ui-elements' && 'active']}>
<i class="nav-icon fa-solid fa-tree"></i>
<p>
UI Elements
@ -117,15 +122,15 @@
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="@@path/pages/UI/timeline.html" class="nav-link @@if (context.page === 'timeline') {active}">
<a href={htmlPath + '/UI/timeline.html'} class:list={['nav-link', page === 'timeline' && 'active']}>
<i class="nav-icon fa-regular fa-circle"></i>
<p>Timeline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item @@if (context.mainPage === 'forms') {menu-open}">
<a href="javascript:;" class="nav-link @@if (context.mainPage === 'forms') {active}">
<li class:list={['nav-item', mainPage === 'forms' && 'menu-open']}>
<a href="javascript:;" class:list={['nav-link', mainPage === 'forms' && 'active']}>
<i class="nav-icon fa-solid fa-pen-to-square"></i>
<p>
Forms
@ -134,15 +139,15 @@
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="@@path/pages/forms/general.html" class="nav-link @@if (context.page === 'general') {active}">
<a href={htmlPath + '/forms/general.html'} class:list={['nav-link', page === 'general' && 'active']}>
<i class="nav-icon fa-regular fa-circle"></i>
<p>General Elements</p>
</a>
</li>
</ul>
</li>
<li class="nav-item @@if (context.mainPage === 'tables') {menu-open}">
<a href="javascript:;" class="nav-link @@if (context.mainPage === 'tables') {active}">
<li class:list={['nav-item', mainPage === 'tables' && 'menu-open']}>
<a href="javascript:;" class:list={['nav-link', mainPage === 'tables' && 'active']}>
<i class="nav-icon fa-solid fa-table"></i>
<p>
Tables
@ -151,7 +156,7 @@
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="@@path/pages/tables/simple.html" class="nav-link @@if (context.page === 'simple') {active}">
<a href={htmlPath + '/tables/simple.html'} class:list={['nav-link', page === 'simple' && 'active']}>
<i class="nav-icon fa-regular fa-circle"></i>
<p>Simple Tables</p>
</a>
@ -169,13 +174,13 @@
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="@@path/pages/examples/login.html" class="nav-link ">
<a href={htmlPath + '/examples/login.html'} class="nav-link ">
<i class="nav-icon fa-regular fa-circle"></i>
<p>Login v1</p>
</a>
</li>
<li class="nav-item">
<a href="@@path/pages/examples/register.html" class="nav-link ">
<a href={htmlPath + '/examples/register.html'} class="nav-link ">
<i class="nav-icon fa-regular fa-circle"></i>
<p>Register v1</p>
</a>

14
src/partials/dashboard/_topbar.html → src/html/components/dashboard/_topbar.astro
View File

@ -1,3 +1,7 @@
---
const { path } = Astro.props
const distPath = (path != undefined) ? path : '../../../dist'
---
<!-- Navbar -->
<nav class="app-header navbar navbar-expand bg-body">
<div class="container-fluid">
@ -34,7 +38,7 @@
<!-- Message Start -->
<div class="d-flex">
<div class="flex-shrink-0">
<img src="@@path/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
<img src={distPath + '/assets/img/user1-128x128.jpg'} alt="User Avatar" class="img-size-50 rounded-circle me-3">
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
@ -52,7 +56,7 @@
<!-- Message Start -->
<div class="d-flex">
<div class="flex-shrink-0">
<img src="@@path/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
<img src={distPath + '/assets/img/user8-128x128.jpg'} alt="User Avatar" class="img-size-50 rounded-circle me-3">
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
@ -70,7 +74,7 @@
<!-- Message Start -->
<div class="d-flex">
<div class="flex-shrink-0">
<img src="@@path/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
<img src={distPath + '/assets/img/user3-128x128.jpg'}alt="User Avatar" class="img-size-50 rounded-circle me-3">
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
@ -116,13 +120,13 @@
</li>
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img src="@@path/assets/img/user2-160x160.jpg" class="user-image rounded-circle shadow" alt="User Image">
<img src={distPath + '/assets/img/user2-160x160.jpg'} class="user-image rounded-circle shadow" alt="User Image">
<span class="d-none d-md-inline">Alexander Pierce</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!-- User image -->
<li class="user-header text-bg-primary">
<img src="@@path/assets/img/user2-160x160.jpg" class="rounded-circle shadow" alt="User Image">
<img src={distPath + '/assets/img/user2-160x160.jpg'} class="rounded-circle shadow" alt="User Image">
<p>
Alexander Pierce - Web Developer

1
src/html/env.d.ts vendored Normal file
View File

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

35
src/pages/UI/timeline.html → src/html/pages/UI/timeline.astro
View File

@ -1,22 +1,23 @@
---
import Head from '@components/_head.astro';
import Footer from '@components/dashboard/_footer.astro';
import Topbar from '@components/dashboard/_topbar.astro';
import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Timeline Elements'
const mainPage = 'ui-elements'
const page = 'timeline'
---
<!DOCTYPE html>
<html lang="en">
<head>
@@include('./_head.html', {
"path": "../..",
"title": "AdminLTE 4 | Timeline Elements"
})
<Head title={title} />
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "ui-elements",
"page": "timeline",
"path": "../.."
})
<Topbar />
<Sidenav mainPage={mainPage} page={page} />
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
@ -147,14 +148,10 @@
</main>
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
<Footer />
</div>
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."
})
<Scripts />
</body>
</html>

22
src/pages/examples/login.html → src/html/pages/examples/login.astro
View File

@ -1,23 +1,27 @@
---
import Head from '@components/_head.astro';
import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Login Page'
const { path } = Astro.props
const htmlPath = (path != undefined) ? '.' : '..'
---
<!DOCTYPE html>
<html lang="en">
<head>
<!-- icheck bootstrap -->
@@include('./_head.html', {
"path": "../..",
"title": "AdminLTE 4 | Login Page"
})
<Head title={title} />
</head>
<body class="login-page bg-body-secondary">
<div class="login-box">
<div class="login-logo">
<a href="../../index2.html"><b>Admin</b>LTE</a>
<a href={htmlPath + '/index2.html'}><b>Admin</b>LTE</a>
</div>
<!-- /.login-logo -->
<div class="card">
<div class="card-body login-card-body">
<p class="login-box-msg">Sign in to start your session</p>
<form action="../../index3.html" method="post">
<form action={htmlPath + '/index3.html'} method="post">
<div class="input-group mb-3">
<input type="email" class="form-control" placeholder="Email">
<div class="input-group-text">
@ -72,8 +76,6 @@
</div>
<!-- /.login-box -->
@@include('./_scripts.html', {
"path": "../.."
})
<Scripts />
</body>
</html>

22
src/pages/examples/register.html → src/html/pages/examples/register.astro
View File

@ -1,23 +1,27 @@
---
import Head from '@components/_head.astro';
import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Register Page'
const { path } = Astro.props
const htmlPath = (path != undefined) ? '.' : '..'
---
<!DOCTYPE html>
<html lang="en">
<head>
<!-- icheck bootstrap -->
@@include('./_head.html', {
"path": "../..",
"title": "AdminLTE 4 | Register Page"
})
<Head title={title} />
</head>
<body class="register-page bg-body-secondary">
<div class="register-box">
<div class="register-logo">
<a href="../../index2.html"><b>Admin</b>LTE</a>
<a href={htmlPath + '/index2.html'}><b>Admin</b>LTE</a>
</div>
<!-- /.register-logo -->
<div class="card">
<div class="card-body register-card-body">
<p class="register-box-msg">Register a new membership</p>
<form action="../../index3.html" method="post">
<form action={htmlPath + '/index3.html'} method="post">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Full Name">
<div class="input-group-text">
@ -75,8 +79,6 @@
</div>
<!-- /.register-box -->
@@include('./_scripts.html', {
"path": "../.."
})
<Scripts />
</body>
</html>

35
src/pages/forms/general.html → src/html/pages/forms/general.astro
View File

@ -1,22 +1,23 @@
---
import Head from '@components/_head.astro';
import Footer from '@components/dashboard/_footer.astro';
import Topbar from '@components/dashboard/_topbar.astro';
import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | General Form Elements'
const mainPage = 'forms'
const page = 'general'
---
<!DOCTYPE html>
<html lang="en">
<head>
@@include('./_head.html', {
"path": "../..",
"title": "AdminLTE 4 | General Form Elements"
})
<Head title={title} />
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "forms",
"page": "general",
"path": "../.."
})
<Topbar />
<Sidenav mainPage={mainPage} page={page} />
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
@ -82,14 +83,10 @@
</main>
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
<Footer />
</div>
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."
})
<Scripts />
</body>
</html>

60
src/index.html → src/html/pages/index.astro
View File

@ -1,23 +1,27 @@
---
import Head from '@components/_head.astro';
import Footer from '@components/dashboard/_footer.astro';
import Topbar from '@components/dashboard/_topbar.astro';
import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE v4 | Dashboard'
const path = '../../dist'
const mainPage = 'dashboard'
const page = 'index'
---
<!DOCTYPE html>
<html lang="en">
<head>
@@include('./_head.html', {
"path": ".",
"title": "AdminLTE 4 | Dashboard"
})
<Head title={title} path={path} />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "dashboard",
"page": "index",
"path": "."
})
<Topbar path={path} />
<Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
@ -167,7 +171,7 @@
<span class="direct-chat-timestamp float-end">23 Jan 2:00 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="./assets/img/user1-128x128.jpg" alt="message user image">
<img class="direct-chat-img" src={path + '/assets/img/user1-128x128.jpg'} alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
@ -183,7 +187,7 @@
<span class="direct-chat-timestamp float-start">23 Jan 2:05 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="./assets/img/user3-128x128.jpg" alt="message user image">
<img class="direct-chat-img" src={path + '/assets/img/user3-128x128.jpg'} alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
@ -199,7 +203,7 @@
<span class="direct-chat-timestamp float-end">23 Jan 5:37 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="./assets/img/user1-128x128.jpg" alt="message user image">
<img class="direct-chat-img" src={path + '/assets/img/user1-128x128.jpg'} alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
@ -215,7 +219,7 @@
<span class="direct-chat-timestamp float-start">23 Jan 6:10 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="./assets/img/user3-128x128.jpg" alt="message user image">
<img class="direct-chat-img" src={path + '/assets/img/user3-128x128.jpg'} alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
I would love to.
@ -232,7 +236,7 @@
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="./assets/img/user1-128x128.jpg" alt="User Avatar">
<img class="contacts-list-img" src={path + '/assets/img/user1-128x128.jpg'} alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
@ -247,7 +251,7 @@
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="./assets/img/user7-128x128.jpg" alt="User Avatar">
<img class="contacts-list-img" src={path + '/assets/img/user7-128x128.jpg'} alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
@ -262,7 +266,7 @@
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="./assets/img/user3-128x128.jpg" alt="User Avatar">
<img class="contacts-list-img" src={path + '/assets/img/user3-128x128.jpg'} alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
@ -277,7 +281,7 @@
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="./assets/img/user5-128x128.jpg" alt="User Avatar">
<img class="contacts-list-img" src={path + '/assets/img/user5-128x128.jpg'} alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
@ -292,7 +296,7 @@
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="./assets/img/user6-128x128.jpg" alt="User Avatar">
<img class="contacts-list-img" src={path + '/assets/img/user6-128x128.jpg'} alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
@ -307,7 +311,7 @@
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="./assets/img/user8-128x128.jpg" alt="User Avatar">
<img class="contacts-list-img" src={path + '/assets/img/user8-128x128.jpg'} alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
@ -348,21 +352,17 @@
</main>
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "."
})
<Footer />
</div>
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "."
})
<Scripts path={path} />
<!-- OPTIONAL SCRIPTS -->
<!-- ChartJS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
<script>
<script is:inline>
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR DEMO
// ++++++++++++++++++++++++++++++++++++++++++

85
src/index2.html → src/html/pages/index2.astro
View File

@ -1,22 +1,25 @@
---
import Head from '@components/_head.astro';
import Footer from '@components/dashboard/_footer.astro';
import Topbar from '@components/dashboard/_topbar.astro';
import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE | Dashboard v2'
const path = '../../dist'
const mainPage = 'dashboard'
const page = 'index2'
---
<!DOCTYPE html>
<html lang="en">
<head>
@@include('./_head.html', {
"path": ".",
"title": "AdminLTE 4 | Dashboard 2"
})
<Head title={title} path={path} />
</head>
<body class="bg-body-tertiary">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "dashboard",
"page": "index2",
"path": "."
})
<body class="layout-fixed bg-body-tertiary">
<div class="app-wrapper">
<Topbar path={path} />
<Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
@ -272,7 +275,7 @@
<span class="direct-chat-timestamp float-end">23 Jan 2:00 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="./assets/img/user1-128x128.jpg" alt="message user image">
<img class="direct-chat-img" src={path + '/assets/img/user1-128x128.jpg'} alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
@ -288,7 +291,7 @@
<span class="direct-chat-timestamp float-start">23 Jan 2:05 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="./assets/img/user3-128x128.jpg" alt="message user image">
<img class="direct-chat-img" src={path + '/assets/img/user3-128x128.jpg'} alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
@ -304,7 +307,7 @@
<span class="direct-chat-timestamp float-end">23 Jan 5:37 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="./assets/img/user1-128x128.jpg" alt="message user image">
<img class="direct-chat-img" src={path + '/assets/img/user1-128x128.jpg'} alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
@ -320,7 +323,7 @@
<span class="direct-chat-timestamp float-start">23 Jan 6:10 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="./assets/img/user3-128x128.jpg" alt="message user image">
<img class="direct-chat-img" src={path + '/assets/img/user3-128x128.jpg'} alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
I would love to.
@ -337,7 +340,7 @@
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="./assets/img/user1-128x128.jpg" alt="User Avatar">
<img class="contacts-list-img" src={path + '/assets/img/user1-128x128.jpg'} alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
@ -352,7 +355,7 @@
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="./assets/img/user7-128x128.jpg" alt="User Avatar">
<img class="contacts-list-img" src={path + '/assets/img/user7-128x128.jpg'} alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
@ -367,7 +370,7 @@
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="./assets/img/user3-128x128.jpg" alt="User Avatar">
<img class="contacts-list-img" src={path + '/assets/img/user3-128x128.jpg'} alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
@ -382,7 +385,7 @@
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="./assets/img/user5-128x128.jpg" alt="User Avatar">
<img class="contacts-list-img" src={path + '/assets/img/user5-128x128.jpg'} alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
@ -397,7 +400,7 @@
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="./assets/img/user6-128x128.jpg" alt="User Avatar">
<img class="contacts-list-img" src={path + '/assets/img/user6-128x128.jpg'} alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
@ -412,7 +415,7 @@
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="./assets/img/user8-128x128.jpg" alt="User Avatar">
<img class="contacts-list-img" src={path + '/assets/img/user8-128x128.jpg'} alt="User Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
@ -467,42 +470,42 @@
<div class="card-body p-0">
<div class="row text-center m-1">
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user1-128x128.jpg" alt="User Image">
<img class="img-fluid rounded-circle" src={path + '/assets/img/user1-128x128.jpg'} alt="User Image">
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Alexander Pierce</a>
<div class="fs-8">Today</div>
</div>
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user8-128x128.jpg" alt="User Image">
<img class="img-fluid rounded-circle" src={path + '/assets/img/user1-128x128.jpg'} alt="User Image">
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Norman</a>
<div class="fs-8">Yesterday</div>
</div>
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user7-128x128.jpg" alt="User Image">
<img class="img-fluid rounded-circle" src={path + '/assets/img/user7-128x128.jpg'} alt="User Image">
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Jane</a>
<div class="fs-8">12 Jan</div>
</div>
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user6-128x128.jpg" alt="User Image">
<img class="img-fluid rounded-circle" src={path + '/assets/img/user6-128x128.jpg'} alt="User Image">
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">John</a>
<div class="fs-8">12 Jan</div>
</div>
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user2-160x160.jpg" alt="User Image">
<img class="img-fluid rounded-circle" src={path + '/assets/img/user2-160x160.jpg'} alt="User Image">
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Alexander</a>
<div class="fs-8">13 Jan</div>
</div>
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user5-128x128.jpg" alt="User Image">
<img class="img-fluid rounded-circle" src={path + '/assets/img/user5-128x128.jpg'} alt="User Image">
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Sarah</a>
<div class="fs-8">14 Jan</div>
</div>
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user4-128x128.jpg" alt="User Image">
<img class="img-fluid rounded-circle" src={path + '/assets/img/user4-128x128.jpg'} alt="User Image">
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Nora</a>
<div class="fs-8">15 Jan</div>
</div>
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user3-128x128.jpg" alt="User Image">
<img class="img-fluid rounded-circle" src={path + '/assets/img/user3-128x128.jpg'} alt="User Image">
<a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Nadia</a>
<div class="fs-8">15 Jan</div>
</div>
@ -752,7 +755,7 @@
<ul class="products-list product-list-in-card ps-2 pe-2">
<li class="item">
<div class="product-img">
<img src="./assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
</div>
<div class="product-info">
<a href="javascript:void(0)" class="product-title">Samsung TV
@ -765,7 +768,7 @@
<!-- /.item -->
<li class="item">
<div class="product-img">
<img src="./assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
</div>
<div class="product-info">
<a href="javascript:void(0)" class="product-title">Bicycle
@ -778,7 +781,7 @@
<!-- /.item -->
<li class="item">
<div class="product-img">
<img src="./assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
</div>
<div class="product-info">
<a href="javascript:void(0)" class="product-title">
@ -794,7 +797,7 @@
<!-- /.item -->
<li class="item">
<div class="product-img">
<img src="./assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
<img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
</div>
<div class="product-info">
<a href="javascript:void(0)" class="product-title">PlayStation 4
@ -823,22 +826,18 @@
</main>
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "."
})
<Footer />
</div>
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "."
})
<Scripts path={path} />
<!-- OPTIONAL SCRIPTS -->
<!-- ChartJS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
<script>
<script is:inline>
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR DEMO
// ++++++++++++++++++++++++++++++++++++++++++

47
src/index3.html → src/html/pages/index3.astro
View File

@ -1,23 +1,26 @@
---
import Head from '@components/_head.astro';
import Footer from '@components/dashboard/_footer.astro';
import Topbar from '@components/dashboard/_topbar.astro';
import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE | Dashboard v3'
const path = '../../dist'
const mainPage = 'dashboard'
const page = 'index3'
---
<!DOCTYPE html>
<html lang="en">
<head>
@@include('./_head.html', {
"path": ".",
"title": "AdminLTE 4 | Dashboard 3"
})
<Head title={title} path={path} />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "dashboard",
"page": "index3",
"path": "."
})
<Topbar path={path} />
<Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
@ -103,7 +106,7 @@
<tbody>
<tr>
<td>
<img src="./assets/img/default-150x150.png" alt="Product 1" class="rounded-circle img-size-32 me-2">
<img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
Some Product
</td>
<td>$13 USD</td>
@ -122,7 +125,7 @@
</tr>
<tr>
<td>
<img src="./assets/img/default-150x150.png" alt="Product 1" class="rounded-circle img-size-32 me-2">
<img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
Another Product
</td>
<td>$29 USD</td>
@ -141,7 +144,7 @@
</tr>
<tr>
<td>
<img src="./assets/img/default-150x150.png" alt="Product 1" class="rounded-circle img-size-32 me-2">
<img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
Amazing Product
</td>
<td>$1,230 USD</td>
@ -160,7 +163,7 @@
</tr>
<tr>
<td>
<img src="./assets/img/default-150x150.png" alt="Product 1" class="rounded-circle img-size-32 me-2">
<img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
Perfect Item
<span class="badge text-bg-danger">NEW</span>
</td>
@ -285,22 +288,18 @@
</main>
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "."
})
<Footer />
</div>
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "."
})
<Scripts path={path} />
<!-- OPTIONAL SCRIPTS -->
<!-- ChartJS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
<script>
<script is:inline>
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR DEMO
// ++++++++++++++++++++++++++++++++++++++++++

34
src/pages/layout/fixed-sidebar.html → src/html/pages/layout/fixed-sidebar.astro
View File

@ -1,22 +1,24 @@
---
import Head from '@components/_head.astro';
import Footer from '@components/dashboard/_footer.astro';
import Topbar from '@components/dashboard/_topbar.astro';
import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Fixed Sidebar'
const mainPage = 'layout'
const page = 'fixed-sidebar'
---
<!DOCTYPE html>
<html lang="en">
<head>
@@include('./_head.html', {
"path": "../..",
"title": "AdminLTE 4 | Fixed Sidebar"
})
<Head title={title} />
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
<Topbar />
<Sidenav mainPage={mainPage} page={page} />
@@include('./dashboard/_sidenav.html', {
"mainPage": "layout",
"page": "fixed-sidebar",
"path": "../.."
})
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
@ -72,14 +74,10 @@
</main>
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
<Footer />
</div>
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."
})
<Scripts />
</body>
</html>

37
src/pages/layout/layout-rtl.html → src/html/pages/layout/layout-rtl.astro
View File

@ -1,23 +1,24 @@
---
import Head from '@components/_head.astro';
import Footer from '@components/dashboard/_footer.astro';
import Topbar from '@components/dashboard/_topbar.astro';
import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Layout RTL'
const mainPage = 'layout'
const page = 'layout-rtl'
const isRtl = true
---
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
@@include('./_head.html', {
"path": "../..",
"title": "AdminLTE 4 | Layout RTL",
"isRtl": true,
})
<Head title={title} isRtl={isRtl} />
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "layout",
"page": "layout-rtl",
"path": "../.."
})
<Topbar />
<Sidenav mainPage={mainPage} page={page} />
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
@ -73,14 +74,10 @@
</main>
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
<Footer />
</div>
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."
})
<Scripts />
</body>
</html>

35
src/pages/layout/sidebar-mini.html → src/html/pages/layout/sidebar-mini.astro
View File

@ -1,22 +1,23 @@
---
import Head from '@components/_head.astro';
import Footer from '@components/dashboard/_footer.astro';
import Topbar from '@components/dashboard/_topbar.astro';
import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Sidebar Mini'
const mainPage = 'layout'
const page = 'sidebar-mini'
---
<!DOCTYPE html>
<html lang="en">
<head>
@@include('./_head.html', {
"path": "../..",
"title": "AdminLTE 4 | Sidebar Mini"
})
<Head title={title} />
</head>
<body class="layout-fixed bg-body-tertiary sidebar-mini sidebar-collapse">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "layout",
"page": "sidebar-mini",
"path": "../.."
})
<Topbar />
<Sidenav mainPage={mainPage} page={page} />
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
@ -72,14 +73,10 @@
</main>
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
<Footer />
</div>
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."
})
<Scripts />
</body>
</html>

35
src/pages/layout/unfixed-sidebar.html → src/html/pages/layout/unfixed-sidebar.astro
View File

@ -1,22 +1,23 @@
---
import Head from '@components/_head.astro';
import Footer from '@components/dashboard/_footer.astro';
import Topbar from '@components/dashboard/_topbar.astro';
import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Unfixed Sidebar'
const mainPage = 'layout'
const page = 'unfixed-sidebar'
---
<!DOCTYPE html>
<html lang="en">
<head>
@@include('./_head.html', {
"path": "../..",
"title": "AdminLTE 4 | Unfixed Sidebar"
})
<Head title={title} />
</head>
<body class="bg-body-tertiary">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "layout",
"page": "unfixed-sidebar",
"path": "../.."
})
<Topbar />
<Sidenav mainPage={mainPage} page={page} />
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
@ -72,14 +73,10 @@
</main>
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
<Footer />
</div>
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."
})
<Scripts />
</body>
</html>

35
src/pages/tables/simple.html → src/html/pages/tables/simple.astro
View File

@ -1,22 +1,23 @@
---
import Head from '@components/_head.astro';
import Footer from '@components/dashboard/_footer.astro';
import Topbar from '@components/dashboard/_topbar.astro';
import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Simple Tables'
const mainPage = 'tables'
const page = 'simple'
---
<!DOCTYPE html>
<html lang="en">
<head>
@@include('./_head.html', {
"path": "../..",
"title": "AdminLTE 4 | Simple Tables"
})
<Head title={title} />
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "tables",
"page": "simple",
"path": "../.."
})
<Topbar />
<Sidenav mainPage={mainPage} page={page} />
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
@ -321,14 +322,10 @@
</main>
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
<Footer />
</div>
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."
})
<Scripts />
</body>
</html>

35
src/pages/widgets/cards.html → src/html/pages/widgets/cards.astro
View File

@ -1,22 +1,23 @@
---
import Head from '@components/_head.astro';
import Footer from '@components/dashboard/_footer.astro';
import Topbar from '@components/dashboard/_topbar.astro';
import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Widgets - Cards'
const mainPage = 'widgets'
const page = 'cards'
---
<!DOCTYPE html>
<html lang="en">
<head>
@@include('./_head.html', {
"path": "../..",
"title": "AdminLTE 4 | Widgets - Cards"
})
<Head title={title} />
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "widgets",
"page": "cards",
"path": "../.."
})
<Topbar />
<Sidenav mainPage={mainPage} page={page} />
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
@ -297,14 +298,10 @@
</main>
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
<Footer />
</div>
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."
})
<Scripts />
</body>
</html>

35
src/pages/widgets/info-box.html → src/html/pages/widgets/info-box.astro
View File

@ -1,23 +1,24 @@
---
import Head from '@components/_head.astro';
import Footer from '@components/dashboard/_footer.astro';
import Topbar from '@components/dashboard/_topbar.astro';
import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Widgets - Info Box'
const mainPage = 'widgets'
const page = 'info-box'
---
<!DOCTYPE html>
<html lang="en">
<head>
@@include('./_head.html', {
"path": "../..",
"title": "AdminLTE 4 | Widgets - Info Box"
})
<Head title={title} />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "widgets",
"page": "info-box",
"path": "../.."
})
<Topbar />
<Sidenav mainPage={mainPage} page={page} />
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
@ -348,14 +349,10 @@
</main>
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
<Footer />
</div>
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."
})
<Scripts />
</body>
</html>

35
src/pages/widgets/small-box.html → src/html/pages/widgets/small-box.astro
View File

@ -1,23 +1,24 @@
---
import Head from '@components/_head.astro';
import Footer from '@components/dashboard/_footer.astro';
import Topbar from '@components/dashboard/_topbar.astro';
import Sidenav from '@components/dashboard/_sidenav.astro';
import Scripts from '@components/_scripts.astro';
const title = 'AdminLTE 4 | Widgets - Small Box'
const mainPage = 'widgets'
const page = 'small-box'
---
<!DOCTYPE html>
<html lang="en">
<head>
@@include('./_head.html', {
"path": "../..",
"title": "AdminLTE 4 | Widgets - Small Box"
})
<Head title={title} />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head>
<body class="layout-fixed bg-body-tertiary">
<div class="app-wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "widgets",
"page": "small-box",
"path": "../.."
})
<Topbar />
<Sidenav mainPage={mainPage} page={page} />
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
@ -109,14 +110,10 @@
</main>
<!-- /.app-content -->
@@include('./dashboard/_footer.html', {
"path": "../.."
})
<Footer />
</div>
<!-- ./app-wrapper -->
@@include('./_scripts.html', {
"path": "../.."
})
<Scripts />
</body>
</html>

8
tsconfig.json
View File

@ -1,4 +1,5 @@
{
"root": true,
"compilerOptions": {
"noUnusedParameters": true,
"noImplicitReturns": true,
@ -10,7 +11,11 @@
"strictNullChecks": true,
"strictBindCallApply": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true
"strictPropertyInitialization": true,
"baseUrl": ".",
"paths": {
"@components/*": ["src/html/components/*"],
},
},
"include": [
"src/ts/**/*"
@ -18,6 +23,5 @@
"exclude": [
"dist",
"node_modules",
"plugins"
]
}