update
This commit is contained in:
Juergen Kunz
@ -1,18 +1,176 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
import { html, cssManager } from '@design.estate/dees-element';
|
||||
|
||||
export const demoFunc = () => html` <style>
|
||||
.demoWrapper {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
background: none;
|
||||
export const demoFunc = () => html`
|
||||
<style>
|
||||
.demoWrapper {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 48px;
|
||||
background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.section {
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
}
|
||||
|
||||
.section-description {
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
<div class="demoWrapper">
|
||||
<div class="section">
|
||||
<div class="section-title">TypeScript Code Example</div>
|
||||
<div class="section-description">A comprehensive TypeScript code example with various syntax highlighting.</div>
|
||||
<dees-dataview-codebox proglang="typescript">
|
||||
interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
isActive: boolean;
|
||||
}
|
||||
</style>
|
||||
<div class="demoWrapper">
|
||||
<dees-dataview-codebox proglang="typescript">
|
||||
import * as text from './hello'; const hiThere = 'nice'; const myFunction = async () => {
|
||||
console.log('nice one'); }
|
||||
</dees-dataview-codebox>
|
||||
</div>`
|
||||
|
||||
class UserService {
|
||||
private users: User[] = [];
|
||||
|
||||
constructor(private apiUrl: string) {
|
||||
console.log('UserService initialized');
|
||||
}
|
||||
|
||||
async getUsers(): Promise<User[]> {
|
||||
try {
|
||||
const response = await fetch(this.apiUrl);
|
||||
const data = await response.json();
|
||||
return data.users;
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch users:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
addUser(user: User): void {
|
||||
this.users.push(user);
|
||||
}
|
||||
}
|
||||
|
||||
// Usage example
|
||||
const service = new UserService('https://api.example.com/users');
|
||||
const users = await service.getUsers();
|
||||
console.log('Found users:', users.length);
|
||||
</dees-dataview-codebox>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">JavaScript Example</div>
|
||||
<div class="section-description">Modern JavaScript with ES6+ features.</div>
|
||||
<dees-dataview-codebox proglang="javascript">
|
||||
// Array manipulation examples
|
||||
const numbers = [1, 2, 3, 4, 5];
|
||||
const doubled = numbers.map(n => n * 2);
|
||||
const filtered = numbers.filter(n => n > 3);
|
||||
|
||||
// Object destructuring
|
||||
const user = { name: 'John', age: 30, city: 'New York' };
|
||||
const { name, age } = user;
|
||||
|
||||
// Promise handling
|
||||
const fetchData = async (url) => {
|
||||
const response = await fetch(url);
|
||||
return response.json();
|
||||
};
|
||||
|
||||
// Modern syntax
|
||||
const greet = (name = 'World') => \`Hello, \${name}!\`;
|
||||
console.log(greet('ShadCN'));
|
||||
</dees-dataview-codebox>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">Python Example</div>
|
||||
<div class="section-description">Python code with classes and type hints.</div>
|
||||
<dees-dataview-codebox proglang="python">
|
||||
from typing import List, Optional
|
||||
import asyncio
|
||||
|
||||
class DataProcessor:
|
||||
"""A simple data processor class"""
|
||||
|
||||
def __init__(self, name: str):
|
||||
self.name = name
|
||||
self.data: List[dict] = []
|
||||
|
||||
async def process_data(self, items: List[dict]) -> List[dict]:
|
||||
"""Process data items asynchronously"""
|
||||
results = []
|
||||
for item in items:
|
||||
# Simulate async processing
|
||||
await asyncio.sleep(0.1)
|
||||
results.append({
|
||||
'id': item.get('id'),
|
||||
'processed': True,
|
||||
'processor': self.name
|
||||
})
|
||||
return results
|
||||
|
||||
def get_summary(self) -> dict:
|
||||
return {
|
||||
'processor': self.name,
|
||||
'items_processed': len(self.data)
|
||||
}
|
||||
|
||||
# Usage
|
||||
processor = DataProcessor("Main")
|
||||
data = await processor.process_data([{'id': 1}, {'id': 2}])
|
||||
</dees-dataview-codebox>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">CSS Example</div>
|
||||
<div class="section-description">Modern CSS with custom properties and animations.</div>
|
||||
<dees-dataview-codebox proglang="css">
|
||||
/* Modern CSS with custom properties */
|
||||
:root {
|
||||
--primary-color: #3b82f6;
|
||||
--secondary-color: #10b981;
|
||||
--background: #ffffff;
|
||||
--text-color: #09090b;
|
||||
--border-radius: 6px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--background);
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
</dees-dataview-codebox>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
@ -53,23 +53,23 @@ export class DeesDataviewCodebox extends DeesElement {
|
||||
}
|
||||
.mainbox {
|
||||
position: relative;
|
||||
color: ${this.goBright ? '#333333' : '#ffffff'};
|
||||
border-top: 1px solid ${this.goBright ? '#ffffff' : '#333333'};
|
||||
box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.5)'};
|
||||
background: ${this.goBright ? '#ffffff' : '#191919'};
|
||||
border-radius: 16px;
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.appbar {
|
||||
position: relative;
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
background: ${cssManager.bdTheme('#ffffff', '#161616')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
|
||||
height: 24px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
height: 32px;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
font-size: 13px;
|
||||
line-height: 32px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@ -82,31 +82,32 @@ export class DeesDataviewCodebox extends DeesElement {
|
||||
}
|
||||
|
||||
.bottomBar {
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
background: ${cssManager.bdTheme('#ffffff', '#161616')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
|
||||
height: 24px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
line-height: 28px;
|
||||
text-align: right;
|
||||
padding-right: 100px;
|
||||
}
|
||||
|
||||
.languageLabel {
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
line-height: 28px;
|
||||
z-index: 10;
|
||||
background: #6596ff20;
|
||||
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
padding: 0px 16px 0px 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hljs-keyword {
|
||||
color: #ff65ec;
|
||||
color: ${cssManager.bdTheme('#dc2626', '#f87171')};
|
||||
}
|
||||
|
||||
.codegrid {
|
||||
@ -116,10 +117,10 @@ export class DeesDataviewCodebox extends DeesElement {
|
||||
}
|
||||
|
||||
.lineNumbers {
|
||||
color: ${this.goBright ? '#acacac' : '#666666'};
|
||||
padding: 30px 16px 0px 0px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#52525b')};
|
||||
padding: 24px 16px 0px 0px;
|
||||
text-align: right;
|
||||
border-right: 1px solid ${this.goBright ? '#eaeaea' : '#222222'};
|
||||
border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
}
|
||||
|
||||
.lineCounter:last-child {
|
||||
@ -129,11 +130,11 @@ export class DeesDataviewCodebox extends DeesElement {
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
margin: 0px;
|
||||
padding: 30px 40px;
|
||||
padding: 24px 24px;
|
||||
}
|
||||
|
||||
code {
|
||||
font-weight: ${this.goBright ? '400' : '300'};
|
||||
font-weight: 400;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
@ -147,23 +148,39 @@ export class DeesDataviewCodebox extends DeesElement {
|
||||
}
|
||||
|
||||
.hljs-string {
|
||||
color: #ffa465;
|
||||
color: ${cssManager.bdTheme('#059669', '#10b981')};
|
||||
}
|
||||
|
||||
.hljs-built_in {
|
||||
color: #65ff6a;
|
||||
color: ${cssManager.bdTheme('#8b5cf6', '#a78bfa')};
|
||||
}
|
||||
|
||||
.hljs-function {
|
||||
color: ${this.goBright ? '#2765DF' : '#6596ff'};
|
||||
color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
||||
}
|
||||
|
||||
.hljs-params {
|
||||
color: ${this.goBright ? '#3DB420' : '#65d5ff'};
|
||||
color: ${cssManager.bdTheme('#0891b2', '#06b6d4')};
|
||||
}
|
||||
|
||||
.hljs-comment {
|
||||
color: ${this.goBright ? '#EF9300' : '#ffd765'};
|
||||
color: ${cssManager.bdTheme('#71717a', '#71717a')};
|
||||
}
|
||||
|
||||
.hljs-number {
|
||||
color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
|
||||
}
|
||||
|
||||
.hljs-literal {
|
||||
color: ${cssManager.bdTheme('#dc2626', '#f87171')};
|
||||
}
|
||||
|
||||
.hljs-attr {
|
||||
color: ${cssManager.bdTheme('#8b5cf6', '#a78bfa')};
|
||||
}
|
||||
|
||||
.hljs-variable {
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
}
|
||||
</style>
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user