Skip to content

Commit d54187e

Browse files
claudemyburghclaudemyburgh
committed
css theme convertor added
1 parent b6a182c commit d54187e

31 files changed

Lines changed: 708 additions & 30 deletions

‎app/Http/Controllers/Api/ThemeCssController.php‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<?php
2+
3+
namespace App\Http\Controllers\Api;
4+
5+
use App\Http\Controllers\Controller;
6+
use App\Models\Registry;
7+
use App\Services\ThemeCssGenerator;
8+
use Illuminate\Http\Response;
9+
10+
class ThemeCssController extends Controller
11+
{
12+
public function __construct(
13+
private readonly ThemeCssGenerator $generator,
14+
) {}
15+
16+
public function show(string $name): Response
17+
{
18+
$theme = Registry::where('name', $name)
19+
->where('type', 'registry:theme')
20+
->firstOrFail();
21+
22+
$css = $this->generator->generate($theme);
23+
24+
return response($css, 200, [
25+
'Content-Type' => 'text/css',
26+
'Cache-Control' => 'public, max-age=3600',
27+
]);
28+
}
29+
}

‎app/Http/Controllers/HomePageController.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ class HomePageController extends Controller
1414
public function __invoke(Request $request)
1515
{
1616
return Inertia::render('home', [
17-
'fonts' => Registry::query()->fonts()->get()
17+
'fonts' => Registry::query()->fonts()->get(),
1818
]);
1919
}
2020
}

‎app/Http/Controllers/ThemePageController.php‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<?php
2+
3+
namespace App\Http\Controllers;
4+
5+
use App\Models\Registry;
6+
use Illuminate\Http\Request;
7+
use Inertia\Inertia;
8+
9+
class ThemePageController extends Controller
10+
{
11+
/**
12+
* Handle the incoming request.
13+
*/
14+
public function __invoke(Request $request)
15+
{
16+
return Inertia::render('theme/index', [
17+
'themes' => Registry::query()->themes()->get(),
18+
]);
19+
}
20+
}

‎app/Models/User.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
class User extends Authenticatable
1818
{
1919
/** @use HasFactory<UserFactory> */
20-
use HasFactory, Notifiable, TwoFactorAuthenticatable, HasApiTokens;
20+
use HasApiTokens, HasFactory, Notifiable, TwoFactorAuthenticatable;
2121

2222
/**
2323
* Get the attributes that should be cast.

‎app/Services/ThemeCssGenerator.php‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<?php
2+
3+
namespace App\Services;
4+
5+
use App\Models\Registry;
6+
7+
class ThemeCssGenerator
8+
{
9+
private const KEY_MAP = [
10+
'shadow-offset-x' => 'shadow-x',
11+
'shadow-offset-y' => 'shadow-y',
12+
];
13+
14+
public function generate(Registry $registry): string
15+
{
16+
if ($registry->type !== 'registry:theme') {
17+
throw new \InvalidArgumentException('Registry must be of type registry:theme');
18+
}
19+
20+
$cssVars = $registry->css_vars ?? [];
21+
$css = $registry->css ?? [];
22+
23+
$light = $cssVars['light'] ?? [];
24+
$dark = $cssVars['dark'] ?? [];
25+
$theme = $cssVars['theme'] ?? [];
26+
27+
$rootVars = array_merge($light, $theme);
28+
$darkVars = array_merge($dark, $theme);
29+
30+
$rootVars = $this->normalizeKeys($rootVars);
31+
$darkVars = $this->normalizeKeys($darkVars);
32+
33+
ksort($rootVars);
34+
ksort($darkVars);
35+
36+
$rootBlock = $this->objectToVars($rootVars);
37+
$darkBlock = $this->objectToVars($darkVars);
38+
$layerBase = $this->convertLayerBase($css);
39+
40+
return <<<CSS
41+
@import "tailwindcss";
42+
43+
@custom-variant dark (&:is(.dark *));
44+
45+
:root {
46+
{$rootBlock}
47+
}
48+
49+
.dark {
50+
{$darkBlock}
51+
}
52+
53+
@theme inline {
54+
--color-background: var(--background);
55+
--color-foreground: var(--foreground);
56+
--color-card: var(--card);
57+
--color-card-foreground: var(--card-foreground);
58+
--color-popover: var(--popover);
59+
--color-popover-foreground: var(--popover-foreground);
60+
--color-primary: var(--primary);
61+
--color-primary-foreground: var(--primary-foreground);
62+
--color-secondary: var(--secondary);
63+
--color-secondary-foreground: var(--secondary-foreground);
64+
--color-muted: var(--muted);
65+
--color-muted-foreground: var(--muted-foreground);
66+
--color-accent: var(--accent);
67+
--color-accent-foreground: var(--accent-foreground);
68+
--color-destructive: var(--destructive);
69+
--color-destructive-foreground: var(--destructive-foreground);
70+
--color-border: var(--border);
71+
--color-input: var(--input);
72+
--color-ring: var(--ring);
73+
--color-chart-1: var(--chart-1);
74+
--color-chart-2: var(--chart-2);
75+
--color-chart-3: var(--chart-3);
76+
--color-chart-4: var(--chart-4);
77+
--color-chart-5: var(--chart-5);
78+
--color-sidebar: var(--sidebar);
79+
--color-sidebar-foreground: var(--sidebar-foreground);
80+
--color-sidebar-primary: var(--sidebar-primary);
81+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
82+
--color-sidebar-accent: var(--sidebar-accent);
83+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
84+
--color-sidebar-border: var(--sidebar-border);
85+
--color-sidebar-ring: var(--sidebar-ring);
86+
87+
--font-sans: var(--font-sans);
88+
--font-mono: var(--font-mono);
89+
--font-serif: var(--font-serif);
90+
91+
--radius-sm: calc(var(--radius) - 4px);
92+
--radius-md: calc(var(--radius) - 2px);
93+
--radius-lg: var(--radius);
94+
--radius-xl: calc(var(--radius) + 4px);
95+
96+
--shadow-2xs: var(--shadow-2xs);
97+
--shadow-xs: var(--shadow-xs);
98+
--shadow-sm: var(--shadow-sm);
99+
--shadow: var(--shadow);
100+
--shadow-md: var(--shadow-md);
101+
--shadow-lg: var(--shadow-lg);
102+
--shadow-xl: var(--shadow-xl);
103+
--shadow-2xl: var(--shadow-2xl);
104+
}
105+
106+
{$layerBase}
107+
CSS;
108+
}
109+
110+
private function normalizeKeys(array $obj): array
111+
{
112+
$normalized = [];
113+
114+
foreach ($obj as $key => $value) {
115+
$newKey = self::KEY_MAP[$key] ?? $key;
116+
$normalized[$newKey] = $value;
117+
}
118+
119+
return $normalized;
120+
}
121+
122+
private function objectToVars(array $obj): string
123+
{
124+
return collect($obj)
125+
->map(fn ($v, $k) => " --{$k}: {$v};")
126+
->join("\n");
127+
}
128+
129+
private function convertLayerBase(?array $css): string
130+
{
131+
if (empty($css['@layer base'])) {
132+
return '';
133+
}
134+
135+
$rules = $css['@layer base'];
136+
137+
$body = collect($rules)
138+
->map(function ($styles, $selector) {
139+
if (is_string($styles)) {
140+
$indentedStyles = collect(explode("\n", $styles))
141+
->map(fn ($line) => ' '.$line)
142+
->join("\n");
143+
144+
return " {$selector} {\n{$indentedStyles}\n }";
145+
}
146+
147+
$props = collect($styles)
148+
->map(fn ($v, $k) => " {$k}: {$v};")
149+
->join("\n");
150+
151+
return " {$selector} {\n{$props}\n }";
152+
})
153+
->join("\n");
154+
155+
return "@layer base {\n{$body}\n}";
156+
}
157+
}

‎config/sanctum.php‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<?php
22

3+
use Illuminate\Cookie\Middleware\EncryptCookies;
4+
use Illuminate\Foundation\Http\Middleware\ValidateCsrfToken;
5+
use Laravel\Sanctum\Http\Middleware\AuthenticateSession;
36
use Laravel\Sanctum\Sanctum;
47

58
return [
@@ -76,9 +79,9 @@
7679
*/
7780

7881
'middleware' => [
79-
'authenticate_session' => Laravel\Sanctum\Http\Middleware\AuthenticateSession::class,
80-
'encrypt_cookies' => Illuminate\Cookie\Middleware\EncryptCookies::class,
81-
'validate_csrf_token' => Illuminate\Foundation\Http\Middleware\ValidateCsrfToken::class,
82+
'authenticate_session' => AuthenticateSession::class,
83+
'encrypt_cookies' => EncryptCookies::class,
84+
'validate_csrf_token' => ValidateCsrfToken::class,
8285
],
8386

8487
];

‎database/seeders/DatabaseSeeder.php‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,10 @@ public function run(): void
1616
// User::factory(10)->create();
1717

1818
$this->call([
19-
// PermissionSeeder::class,
19+
// PermissionSeeder::class,
2020
RegistrySeeder::class,
2121
]);
2222

23-
2423
User::factory()->create([
2524
'name' => 'Claude Myburgh',
2625
'email' => 'claude@designbycode.co.za',

‎database/seeders/RegistrySeeder.php‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
namespace Database\Seeders;
44

5-
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
65
use Illuminate\Database\Seeder;
76

87
class RegistrySeeder extends Seeder

‎resources/js/components/app/hero.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
1+
import { Crown } from 'lucide-react';
22
import TextAnimator from '@/registry/new-york/components/ui/animations/text-animator';
33
import { ButtonParticles } from '@/registry/new-york/components/ui/buttons/button-particles';
44
import { GlowRadial } from '@/registry/new-york/components/ui/glow/glow-radial';
55
import WavesThree from '@/registry/new-york/components/ui/threejs/waves-three';
6-
import { Crown } from 'lucide-react';
76

87
const Hero = () => {
98
const colors = `var(--primary)`;
@@ -55,7 +54,7 @@ const Hero = () => {
5554
<h1 className="text-center text-5xl font-bold tracking-tighter text-balance md:text-7xl">
5655
<span>Components</span>
5756
<span
58-
className={`font-playfair-display inline-block translate-y-4 text-9xl font-medium italic opacity-50`}
57+
className={`inline-block translate-y-4 font-playfair-display-serif text-9xl font-medium italic opacity-50`}
5958
>
6059
&
6160
</span>

‎resources/js/components/app/package-manager-select.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function PackageManagerSelect({
3535
const available = managers.filter((m) => codes[m]);
3636

3737
const code = codes[selectedManager] ?? "";
38-
const { normalizedLanguage, highlightedCode } = usePrismHighlight(code, 'bash');
38+
const { highlightedCode } = usePrismHighlight(code, 'bash');
3939
const { copy } = useCopyToClipboard();
4040

4141
const handleCopy = async () => {
@@ -83,8 +83,6 @@ export function PackageManagerSelect({
8383
</code>
8484
</pre>
8585
</div>
86-
87-
8886
</div>
8987
);
9088
}

0 commit comments

Comments
 (0)