Rodrigo Rodriguez (Pragmatismo)
dfe7e4e4b6
- Created a new About page (index.html) detailing the BotServer platform, its features, and technology stack. - Developed a Login page (login.html) with sign-in and sign-up functionality, including form validation and user feedback messages. - Removed the empty style.css file as it is no longer needed.
88 lines
3.4 KiB
HTML
88 lines
3.4 KiB
HTML
<!-- Riot component: theme-provider.html (converted from app/theme-provider.tsx) -->
|
||
<script type="module">
|
||
// This component replicates the ThemeProvider logic without React.
|
||
// It manages theme selection and persists the choice in localStorage.
|
||
export default {
|
||
// Component state
|
||
data() {
|
||
return {
|
||
themes: [
|
||
{ name: '3dbevel', label: '3dbevel', cssFile: '/themes/3dbevel.css' },
|
||
{ name: 'arcadeflash', label: 'Arcadeflash', cssFile: '/themes/arcadeflash.css' },
|
||
{ name: 'jazzage', label: 'Jazzage', cssFile: '/themes/jazzage.css' },
|
||
{ name: 'mellowgold', label: 'Mellowgold', cssFile: '/themes/mellowgold.css' },
|
||
{ name: 'midcenturymod', label: 'Midcenturymod', cssFile: '/themes/midcenturymod.css' },
|
||
{ name: 'polaroidmemories', label: 'Polaroidmemories', cssFile: '/themes/polaroidmemories.css' },
|
||
{ name: 'retrowave', label: 'Retrowave', cssFile: '/themes/retrowave.css' },
|
||
{ name: 'saturdaycartoons', label: 'Saturdaycartoons', cssFile: '/themes/saturdaycartoons.css' },
|
||
{ name: 'typewriter', label: 'Typewriter', cssFile: '/themes/typewriter.css' },
|
||
{ name: 'vapordream', label: 'Vapordream', cssFile: '/themes/vapordream.css' },
|
||
{ name: 'xeroxui', label: 'Xeroxui', cssFile: '/themes/xeroxui.css' },
|
||
{ name: 'y2kglow', label: 'Y2kglow', cssFile: '/themes/y2kglow.css' },
|
||
{ name: 'xtreegold', label: 'XTreeGold', cssFile: '/themes/xtreegold.css' },
|
||
],
|
||
currentTheme: null,
|
||
isLoaded: false,
|
||
};
|
||
},
|
||
|
||
// Lifecycle: component mounted
|
||
mounted() {
|
||
// Load saved theme from localStorage or default to first theme
|
||
const savedThemeName = localStorage.getItem('theme') || this.themes[0].name;
|
||
const savedTheme = this.themes.find(t => t.name === savedThemeName) || this.themes[0];
|
||
this.setTheme(savedTheme.name);
|
||
this.isLoaded = true;
|
||
},
|
||
|
||
// Methods
|
||
setTheme(themeName) {
|
||
const theme = this.themes.find(t => t.name === themeName);
|
||
if (!theme) return;
|
||
|
||
// Remove any existing theme link
|
||
const existingLink = document.getElementById('theme-stylesheet');
|
||
if (existingLink) {
|
||
document.head.removeChild(existingLink);
|
||
}
|
||
|
||
// Create new link element
|
||
const link = document.createElement('link');
|
||
link.id = 'theme-stylesheet';
|
||
link.rel = 'stylesheet';
|
||
link.href = theme.cssFile;
|
||
link.onload = () => {
|
||
this.currentTheme = theme;
|
||
localStorage.setItem('theme', theme.name);
|
||
};
|
||
document.head.appendChild(link);
|
||
},
|
||
|
||
// Expose a simple API for other components
|
||
getTheme() {
|
||
return this.currentTheme;
|
||
},
|
||
|
||
getThemes() {
|
||
return this.themes;
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
/* No visual output needed for the provider */
|
||
</style>
|
||
|
||
<!-- No markup needed; this component is used for its side‑effects -->
|
||
</write_to_file>
|
||
<task_progress>
|
||
- [x] Create comprehensive todo list
|
||
- [x] Analyze React components to convert
|
||
- [x] Convert app/client-nav.tsx to Riot component (client-nav.html)
|
||
- [x] Update imports and usage (removed Nav import and usage from layout)
|
||
- [x] Remove React dependencies from layout.tsx (file cleared)
|
||
- [x] Convert remaining .tsx files (starting with theme-provider.tsx)
|
||
- [ ] Verify application works with Riot
|
||
- [ ] Clean up leftover React files
|
||
</task_progress>
|
||
</write_to_file>
|