feat: workshop redesign part 2

This commit is contained in:
neoapps-dev 2026-04-19 22:50:58 +03:00
parent 86dc293b26
commit fb52972089
4 changed files with 986 additions and 3 deletions

View file

@ -19,6 +19,8 @@
"pako": "^2.1.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-markdown": "^10.1.0",
"remark-gfm": "^4.0.1",
"three": "^0.183.2"
},
"devDependencies": {

File diff suppressed because it is too large Load diff

View file

@ -1,5 +1,7 @@
import { useState, useEffect, memo, useCallback, useRef, useContext } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { useUI, useAudio, useConfig, GameContext } from '../../context/LauncherContext';
import { TauriService } from '../../services/TauriService';
@ -14,6 +16,7 @@ interface RegistryPackage {
name: string;
author: string;
description: string;
extended_description?: string;
category: string[];
thumbnail: string;
zips: Record<string, string>;
@ -451,9 +454,20 @@ function PackageModal({ pkg, onClose, playPressSound }: {
</div>
<div className="flex flex-col p-6 gap-6 overflow-y-auto flex-1">
<div className="space-y-2">
<span className="text-[10px] text-[#666] mc-text-shadow uppercase tracking-[0.2em] font-bold">Project Description</span>
<p className="text-sm text-[#C0C0C0] mc-text-shadow leading-relaxed italic opacity-90">{pkg.description}</p>
<div className="space-y-4">
<div className="space-y-2">
<span className="text-[10px] text-[#666] mc-text-shadow uppercase tracking-[0.2em] font-bold">Project Description</span>
<p className="text-sm text-[#C0C0C0] mc-text-shadow leading-relaxed italic opacity-90">{pkg.description}</p>
</div>
{pkg.extended_description && pkg.extended_description.trim() !== "" && (
<div className="space-y-2 bg-black/20 p-4 border border-[#333] rounded-sm">
<span className="text-[10px] text-[#555] mc-text-shadow uppercase tracking-[0.2em] font-bold">Additional Resources</span>
<div className="text-sm text-[#A0A0A0] mc-text-shadow leading-relaxed workshop-markdown">
<ReactMarkdown remarkPlugins={[remarkGfm]}>{pkg.extended_description}</ReactMarkdown>
</div>
</div>
)}
</div>
<div className="grid grid-cols-2 gap-8 pt-4 border-t border-[#333]">

View file

@ -132,3 +132,96 @@ body {
transition: none !important;
animation: none !important;
}
.workshop-markdown h1,
.workshop-markdown h2,
.workshop-markdown h3 {
color: #FFFF55;
margin-top: 1rem;
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.workshop-markdown strong {
color: #FFFF55;
}
.workshop-markdown ul,
.workshop-markdown ol {
margin-left: 1.5rem;
margin-bottom: 1rem;
}
.workshop-markdown li {
margin-bottom: 0.25rem;
}
.workshop-markdown a {
color: #55FFFF;
text-decoration: underline;
}
.workshop-markdown code {
background: rgba(0,0,0,0.4);
padding: 2px 4px;
border-radius: 2px;
color: #FF55FF;
}
.workshop-markdown table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
margin-bottom: 1rem;
background: rgba(0,0,0,0.3);
border: 2px solid #555;
image-rendering: pixelated;
}
.workshop-markdown th {
background: rgba(0,0,0,0.5);
color: #FFFF55;
padding: 8px;
border: 1px solid #444;
text-align: left;
text-transform: uppercase;
font-size: 0.8rem;
}
.workshop-markdown td {
padding: 8px;
border: 1px solid #333;
color: #E0E0E0;
font-size: 0.9rem;
}
.workshop-markdown tr:nth-child(even) {
background: rgba(255,255,255,0.05);
}
.workshop-markdown blockquote {
border-left: 4px solid #555555;
padding-left: 1rem;
margin: 1rem 0;
color: #A0A0A0;
font-style: italic;
background: rgba(255,255,255,0.02);
}
.workshop-markdown del {
color: #AA0000;
text-decoration: line-through;
}
.workshop-markdown input[type="checkbox"] {
accent-color: #FFFF55;
margin-right: 0.5rem;
transform: scale(1.2);
vertical-align: middle;
}
.workshop-markdown hr {
border: none;
border-top: 2px solid #373737;
margin: 1.5rem 0;
}