search

zuramai / mazer

Free and Open-source Bootstrap 5 Admin Dashboard Template and Landing Page
http://zuramai.github.io/mazer
MIT License
2.76k stars 776 forks source link

jsdelivr cdn? #256

Closed SmileYzn closed 1 year ago

SmileYzn commented 1 year ago

First of all, thanks for hard work!

And this n1ce template can be hosted on jsdelivr too?

Thanks 🙏

billalxcode commented 1 year ago

jsdelivr.net has provided a github based cdn service. But this repository does not meet the qualifications. The qualification is that this repository must have build results files. Like the dist folder or something else, why? because later jsdelivr.net will direct the CDN to the build file.

billalxcode commented 1 year ago

An example is as follows

http://cdn.jsdelivr.net/gh/user/repo@version/file

Example url in this repo

http://cdn.jsdelivr.net/gh/zuramai/mazer/src/xxx

Websites must load CSS files, but in this repository there are no CSS files unless we have to change the SCSS file to CSS first so that it can be loaded by the web browser. How to build it? This repository already has an application for building assets, namely using Vite.

Read full docs

SmileYzn commented 1 year ago

jsdelivr.net has provided a github based cdn service. But this repository does not meet the qualifications. The qualification is that this repository must have build results files. Like the dist folder or something else, why? because later jsdelivr.net will direct the CDN to the build file.

That is why i'm asking for a full package on jsdelivr.net 👍

billalxcode commented 1 year ago

Hello, to use Mazer CDN please use the url with the prefix

https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist

simple example, if you want to load the app.css file in assets/compiled/css/app.css, then the complete URL is

https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/compiled/css/app.css

An example of the full code is like this

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - Mazer Admin Dashboard</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/scss/themes/dark/app-dark.scss">

    <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/compiled/svg/favicon.svg" type="image/x-icon">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/compiled/css/app.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/compiled/css/app2.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/compiled/css/iconly.css">
</head>

<body>

    <!-- Start content here -->

    <!-- End content --->

    <script src="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/static/js/initTheme.js"></script>

    <script src="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/static/js/components/dark.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script>

    <script src="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/compiled/js/app.js"></script>
</body>

</html>
billalxcode commented 1 year ago

Hello, to use Mazer CDN please use the url with the prefix

https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist

simple example, if you want to load the app.css file in assets/compiled/css/app.css, then the complete URL is

https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/compiled/css/app.css

An example of the full code is like this

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - Mazer Admin Dashboard</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/scss/themes/dark/app-dark.scss">

    <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/compiled/svg/favicon.svg" type="image/x-icon">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/compiled/css/app.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/compiled/css/app2.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/compiled/css/iconly.css">
</head>

<body>

    <!-- Start content here -->

    <!-- End content --->

    <script src="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/static/js/initTheme.js"></script>

    <script src="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/static/js/components/dark.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script>

    <script src="https://cdn.jsdelivr.net/gh/billalxcode/mazer@dist/dist/assets/compiled/js/app.js"></script>
</body>

</html>

The CDN above is an unofficial CDN. Because the official Mazer does not yet provide a CDN feature.

billalxcode commented 1 year ago

Or you can use the demo page as the official CDN from Mazer.

How to use it?

Here's a simple example of using Mazer CDN

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - Mazer Admin Dashboard</title>

    <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/svg/favicon.svg" type="image/x-icon">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/app.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/app-dark.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/iconly.css">
</head>

<body>
    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/initTheme.js"></script>
    <!-- Start content here -->

    <!-- End content -->
    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/components/dark.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script>

    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/js/app.js"></script>

    <!-- Need: Apexcharts -->
    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/extensions/apexcharts/apexcharts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/pages/dashboard.js"></script>

</body>

</html>

You can use a url with a prefix

https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo

A simple example is like this

https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/app.css
SmileYzn commented 1 year ago

From demos pages? If there have breaking changes on production usage? The mazer project need a real jsdelivr version, so users can control better that version usage too

billalxcode commented 1 year ago

Actually, Mazer hasn't released an official CDN yet. It just makes the demo page as a CDN only. contact @zuramai for details

SmileYzn commented 1 year ago

@billalxcode Really hanks for help 🙏

But author should really to do a jsdelivr package.

n1ce Template @zuramai

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it has been open for 14 days without activity. It will be closed if no further activity occurs within the next 14 days. If this is still an issue, just leave a comment or remove the "stale" label.

SmileYzn commented 1 year ago

This issue has been automatically marked as stale because it has been open for 14 days without activity. It will be closed if no further activity occurs within the next 14 days. If this is still an issue, just leave a comment or remove the "stale" label.

Hehehehe, how to close issues without solve it? use git bot!