Skip to content

Commit e84082f

Browse files
committed
updated
1 parent 00d6594 commit e84082f

5 files changed

Lines changed: 736 additions & 0 deletions

tutorial-admin-panels.html

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="scroll-smooth">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Forge Kernel - Building Admin Panels & Dashboards</title>
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
10+
<script
11+
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
12+
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
13+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
14+
<link rel="stylesheet" href="assets/css/docs.css">
15+
</head>
16+
17+
<body class="bg-gray-50 text-gray-900">
18+
<!-- Navigation -->
19+
<nav class="bg-white shadow-sm border-b">
20+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
21+
<div class="flex justify-between h-16">
22+
<div class="flex items-center">
23+
<div class="flex-shrink-0">
24+
<h1 class="text-xl font-bold text-gray-900">
25+
Forge Kernel
26+
</h1>
27+
</div>
28+
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
29+
<a href="index.html"
30+
class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600">
31+
Home
32+
</a>
33+
<a href="getting-started.html"
34+
class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600">
35+
Getting Started
36+
</a>
37+
<a href="core-concepts.html"
38+
class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600">
39+
Core Concepts
40+
</a>
41+
<a href="modules.html"
42+
class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600">
43+
Capabilities
44+
</a>
45+
<a href="api-reference.html"
46+
class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600">
47+
API Reference
48+
</a>
49+
<a href="tutorial.html"
50+
class="text-blue-600 inline-flex items-center px-1 pt-1 text-sm font-medium border-b-2 border-blue-600">
51+
Tutorials
52+
</a>
53+
</div>
54+
</div>
55+
<!-- Mobile menu button -->
56+
<div class="flex items-center sm:hidden">
57+
<button id="mobile-menu-button" class="text-gray-700 hover:text-blue-600 p-2">
58+
<i class="fas fa-bars text-xl"></i>
59+
</button>
60+
</div>
61+
</div>
62+
</div>
63+
64+
<!-- Mobile menu -->
65+
<div id="mobile-menu" class="sm:hidden hidden bg-white border-t border-gray-200">
66+
<div class="px-2 pt-2 pb-3 space-y-1">
67+
<a href="index.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Home</a>
68+
<a href="getting-started.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Getting Started</a>
69+
<a href="core-concepts.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Core Concepts</a>
70+
<a href="modules.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Capabilities</a>
71+
<a href="api-reference.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">API Reference</a>
72+
<a href="tutorial.html" class="block px-3 py-2 text-blue-600 font-medium">Tutorials</a>
73+
</div>
74+
</div>
75+
</nav>
76+
77+
<!-- Main Content -->
78+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
79+
<!-- Breadcrumb Navigation -->
80+
<nav class="mb-6" aria-label="Breadcrumb">
81+
<ol class="flex items-center space-x-2 text-sm text-gray-500">
82+
<li><a href="index.html" class="hover:text-blue-600">Home</a></li>
83+
<li><i class="fas fa-chevron-right text-xs"></i></li>
84+
<li><a href="tutorial.html" class="hover:text-blue-600">Tutorials</a></li>
85+
<li><i class="fas fa-chevron-right text-xs"></i></li>
86+
<li class="text-gray-900 font-medium">Building Admin Panels & Dashboards</li>
87+
</ol>
88+
</nav>
89+
90+
<div class="flex flex-col lg:flex-row gap-8">
91+
<!-- Sidebar Navigation -->
92+
<div id="sidebar-nav" class="lg:w-1/4">
93+
<div class="bg-white rounded-lg shadow-sm p-6 sticky top-8 max-h-[calc(100vh-4rem)] overflow-y-auto">
94+
<h3 class="text-lg font-semibold text-gray-900 mb-4">Tutorial</h3>
95+
<nav class="space-y-2">
96+
<a href="#introduction" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Introduction</a>
97+
</nav>
98+
</div>
99+
</div>
100+
101+
<!-- Main Content -->
102+
<div class="lg:w-3/4">
103+
<div class="bg-white rounded-lg shadow-sm p-8">
104+
<div class="flex items-center mb-4">
105+
<span class="bg-yellow-100 text-yellow-800 text-sm font-semibold px-3 py-1 rounded-full mr-3">Intermediate</span>
106+
<span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 2-3 hours</span>
107+
</div>
108+
<h1 class="text-4xl font-bold text-gray-900 mb-4">Building Admin Panels & Dashboards</h1>
109+
<p class="text-xl text-gray-600 mb-8">
110+
Create a comprehensive admin panel with dashboards, data tables, charts, and management interfaces using Forge Kernel modules.
111+
</p>
112+
113+
<!-- Coming Soon -->
114+
<section id="introduction" class="section-anchor mb-12">
115+
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-6 rounded">
116+
<div class="flex items-center mb-4">
117+
<i class="fas fa-info-circle text-yellow-600 text-2xl mr-3"></i>
118+
<h2 class="text-2xl font-bold text-gray-900">Coming Soon</h2>
119+
</div>
120+
<p class="text-gray-700 mb-4">
121+
This tutorial is currently under development. It will cover:
122+
</p>
123+
<ul class="list-disc list-inside space-y-2 text-gray-700 mb-4">
124+
<li>Admin panel architecture</li>
125+
<li>Dashboard design and data visualization</li>
126+
<li>Data tables with filtering and pagination</li>
127+
<li>Role-based access control</li>
128+
<li>Admin-specific routes and middleware</li>
129+
<li>Bulk operations</li>
130+
<li>Admin UI components</li>
131+
</ul>
132+
<p class="text-gray-700">
133+
Check back soon for the complete tutorial!
134+
</p>
135+
</div>
136+
</section>
137+
</div>
138+
</div>
139+
</div>
140+
</div>
141+
142+
<script>
143+
// Mobile menu toggle
144+
document.getElementById('mobile-menu-button')?.addEventListener('click', function () {
145+
const menu = document.getElementById('mobile-menu');
146+
menu?.classList.toggle('hidden');
147+
});
148+
</script>
149+
</body>
150+
151+
</html>
152+

tutorial-multi-tenant-app.html

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="scroll-smooth">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Forge Kernel - Creating a Multi-Tenant Application</title>
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
10+
<script
11+
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
12+
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
13+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
14+
<link rel="stylesheet" href="assets/css/docs.css">
15+
</head>
16+
17+
<body class="bg-gray-50 text-gray-900">
18+
<!-- Navigation -->
19+
<nav class="bg-white shadow-sm border-b">
20+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
21+
<div class="flex justify-between h-16">
22+
<div class="flex items-center">
23+
<div class="flex-shrink-0">
24+
<h1 class="text-xl font-bold text-gray-900">
25+
Forge Kernel
26+
</h1>
27+
</div>
28+
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
29+
<a href="index.html"
30+
class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600">
31+
Home
32+
</a>
33+
<a href="getting-started.html"
34+
class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600">
35+
Getting Started
36+
</a>
37+
<a href="core-concepts.html"
38+
class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600">
39+
Core Concepts
40+
</a>
41+
<a href="modules.html"
42+
class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600">
43+
Capabilities
44+
</a>
45+
<a href="api-reference.html"
46+
class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600">
47+
API Reference
48+
</a>
49+
<a href="tutorial.html"
50+
class="text-blue-600 inline-flex items-center px-1 pt-1 text-sm font-medium border-b-2 border-blue-600">
51+
Tutorials
52+
</a>
53+
</div>
54+
</div>
55+
<!-- Mobile menu button -->
56+
<div class="flex items-center sm:hidden">
57+
<button id="mobile-menu-button" class="text-gray-700 hover:text-blue-600 p-2">
58+
<i class="fas fa-bars text-xl"></i>
59+
</button>
60+
</div>
61+
</div>
62+
</div>
63+
64+
<!-- Mobile menu -->
65+
<div id="mobile-menu" class="sm:hidden hidden bg-white border-t border-gray-200">
66+
<div class="px-2 pt-2 pb-3 space-y-1">
67+
<a href="index.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Home</a>
68+
<a href="getting-started.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Getting Started</a>
69+
<a href="core-concepts.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Core Concepts</a>
70+
<a href="modules.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Capabilities</a>
71+
<a href="api-reference.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">API Reference</a>
72+
<a href="tutorial.html" class="block px-3 py-2 text-blue-600 font-medium">Tutorials</a>
73+
</div>
74+
</div>
75+
</nav>
76+
77+
<!-- Main Content -->
78+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
79+
<!-- Breadcrumb Navigation -->
80+
<nav class="mb-6" aria-label="Breadcrumb">
81+
<ol class="flex items-center space-x-2 text-sm text-gray-500">
82+
<li><a href="index.html" class="hover:text-blue-600">Home</a></li>
83+
<li><i class="fas fa-chevron-right text-xs"></i></li>
84+
<li><a href="tutorial.html" class="hover:text-blue-600">Tutorials</a></li>
85+
<li><i class="fas fa-chevron-right text-xs"></i></li>
86+
<li class="text-gray-900 font-medium">Creating a Multi-Tenant Application</li>
87+
</ol>
88+
</nav>
89+
90+
<div class="flex flex-col lg:flex-row gap-8">
91+
<!-- Sidebar Navigation -->
92+
<div id="sidebar-nav" class="lg:w-1/4">
93+
<div class="bg-white rounded-lg shadow-sm p-6 sticky top-8 max-h-[calc(100vh-4rem)] overflow-y-auto">
94+
<h3 class="text-lg font-semibold text-gray-900 mb-4">Tutorial</h3>
95+
<nav class="space-y-2">
96+
<a href="#introduction" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Introduction</a>
97+
</nav>
98+
</div>
99+
</div>
100+
101+
<!-- Main Content -->
102+
<div class="lg:w-3/4">
103+
<div class="bg-white rounded-lg shadow-sm p-8">
104+
<div class="flex items-center mb-4">
105+
<span class="bg-red-100 text-red-800 text-sm font-semibold px-3 py-1 rounded-full mr-3">Advanced</span>
106+
<span class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 2-3 hours</span>
107+
</div>
108+
<h1 class="text-4xl font-bold text-gray-900 mb-4">Creating a Multi-Tenant Application</h1>
109+
<p class="text-xl text-gray-600 mb-8">
110+
Build a complete multi-tenant application using ForgeMultiTenant, demonstrating tenant isolation, data scoping, and multi-tenant architecture patterns.
111+
</p>
112+
113+
<!-- Coming Soon -->
114+
<section id="introduction" class="section-anchor mb-12">
115+
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-6 rounded">
116+
<div class="flex items-center mb-4">
117+
<i class="fas fa-info-circle text-yellow-600 text-2xl mr-3"></i>
118+
<h2 class="text-2xl font-bold text-gray-900">Coming Soon</h2>
119+
</div>
120+
<p class="text-gray-700 mb-4">
121+
This tutorial is currently under development. It will cover:
122+
</p>
123+
<ul class="list-disc list-inside space-y-2 text-gray-700 mb-4">
124+
<li>Multi-tenancy concepts and strategies</li>
125+
<li>Tenant identification and scoping</li>
126+
<li>Database isolation strategies</li>
127+
<li>Route and model scoping</li>
128+
<li>Tenant-specific configurations</li>
129+
<li>Multi-tenant migrations and seeding</li>
130+
</ul>
131+
<p class="text-gray-700">
132+
Check back soon for the complete tutorial!
133+
</p>
134+
</div>
135+
</section>
136+
</div>
137+
</div>
138+
</div>
139+
</div>
140+
141+
<script>
142+
// Mobile menu toggle
143+
document.getElementById('mobile-menu-button')?.addEventListener('click', function () {
144+
const menu = document.getElementById('mobile-menu');
145+
menu?.classList.toggle('hidden');
146+
});
147+
</script>
148+
</body>
149+
150+
</html>
151+

0 commit comments

Comments
 (0)