Skip to content

Working viteless with translation state switching #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lmf-git wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Working viteless with translation state switching #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cf92c0f
More content translations broken
lmf-git May 3, 2026
c17099e
Merge branch 'main' into viteless
lmf-git May 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
node_modules/
.yarn/
.claude/
reference/
.DS_Store

dist/

Expand Down
14 changes: 0 additions & 14 deletions app/About/About.js
View file
Open in desktop

This file was deleted.

105 changes: 105 additions & 0 deletions app/Company/Company.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<style>
.section { padding: 120px 0; }

.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: center;
}

.about-title {
font-family: var(--font-serif);
font-size: clamp(32px, 3.5vw, 52px);
color: var(--text-dark);
margin-bottom: 28px;
}

.about-body {
font-size: 16px;
line-height: 1.65;
color: var(--text-mid);
margin-bottom: 24px;
}

.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 80px;
}

.value-card {
padding: 40px;
background: var(--off-white);
border-radius: 4px;
}

.value-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 12px;
}
</style>

<header class="page-header">
<div class="hero-visuals">
<div class="hero-bg"></div>
<div class="hero-grid-lines"></div>
<div class="hero-waves"></div>
</div>
<div class="section-inner">
<h1 class="page-title">
{{#if lang === 'es'}}
Nuestra <em>Compañía</em>
{{else}}
Our <em>Company</em>
{{/if}}
</h1>
</div>
</header>

<section class="section">
<div class="section-inner">
<div class="about-grid">
<div class="fade-up">
<h2 class="about-title">{{lang === 'es' ? 'Pasión por el mar y compromiso con el futuro' : 'Passion for the sea and commitment to the future'}}</h2>
<div class="about-body">
{{#if lang === 'es'}}
<p>Estremar es una empresa pesquera líder en Argentina, dedicada a la captura y procesamiento de productos del mar de alta calidad. Con base en Ushuaia, operamos en las frías y ricas aguas del Atlántico Sur.</p>
{{else}}
<p>Estremar is a leading fishing company in Argentina, dedicated to the capture and processing of high-quality seafood products. Based in Ushuaia, we operate in the cold and rich waters of the South Atlantic.</p>
{{/if}}
</div>
</div>
<div style="background: var(--off-white); aspect-ratio: 4/5; border-radius: 4px;" class="fade-up"></div>
</div>

<div class="values-grid">
<div class="value-card fade-up">
<div class="value-title">{{lang === 'es' ? 'Sustentabilidad' : 'Sustainability'}}</div>
{{#if lang === 'es'}}
<p>Protegemos los recursos marinos para las generaciones futuras.</p>
{{else}}
<p>We protect marine resources for future generations.</p>
{{/if}}
</div>
<div class="value-card fade-up" style="transition-delay: 0.1s">
<div class="value-title">{{lang === 'es' ? 'Calidad' : 'Quality'}}</div>
{{#if lang === 'es'}}
<p>Mantenemos los más altos estándares en cada etapa.</p>
{{else}}
<p>We maintain the highest standards at every stage.</p>
{{/if}}
</div>
<div class="value-card fade-up" style="transition-delay: 0.2s">
<div class="value-title">{{lang === 'es' ? 'Nuestra Gente' : 'Our People'}}</div>
{{#if lang === 'es'}}
<p>Valoramos el esfuerzo de nuestro equipo y su seguridad.</p>
{{else}}
<p>We value our team's effort and their safety.</p>
{{/if}}
</div>
</div>
</div>
</section>
17 changes: 17 additions & 0 deletions app/Company/Company.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { Component, define } from '../../core/component.js';

export default class Company extends Component {
static templateUrl = '/app/Company/Company.html';
static store = ['lang'];

mount() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) entry.target.classList.add('visible');
});
}, { threshold: 0.12 });
this.$$('.fade-up').forEach(el => observer.observe(el));
}
}

define('company-page', Company);
164 changes: 33 additions & 131 deletions app/Contact/Contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,138 +1,40 @@
<style>
:host {
color: var(--text-color);
}
h1 {
color: var(--info-color);
}
h3 {
color: var(--text-color);
}
section {
padding: 20px;
background-color: var(--bg-secondary);
border-radius: 5px;
}
.page-navigation {
margin-top: 20px;
padding: 10px;
background-color: var(--hover-bg);
border-radius: 5px;
}
a {
color: var(--info-color);
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
.contact-form {
margin-top: 20px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: var(--text-color);
}
input, textarea {
width: 100%;
padding: 8px;
border: 1px solid var(--border-color);
border-radius: 4px;
background: var(--bg-color);
color: var(--text-color);
box-sizing: border-box;
}
button {
background-color: var(--info-color);
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
transition: var(--transition);
}
button:hover:not(:disabled) {
opacity: 0.9;
}
button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.field-error {
color: var(--danger-color);
font-size: 13px;
margin-top: 5px;
}
.input-error {
border-color: var(--danger-color) !important;
box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}
.success-message {
background: rgba(0, 255, 0, 0.1);
color: var(--success-color);
padding: 15px;
border-radius: 4px;
margin-bottom: 15px;
}
.timestamp {
color: var(--text-secondary);
font-size: 12px;
margin-top: 15px;
font-style: italic;
}
.stats {
margin-top: 20px;
padding: 10px;
background-color: var(--hover-bg);
border-radius: 5px;
.section { padding: 120px 0; }

.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 120px;
}
</style>
<section>
<h1>{{title}}</h1>
<p>Get in touch with us using the form below.</p>

<div class="contact-form">
<div class="success-message" style="display: none;">
<p>✓ Message sent successfully! We'll get back to you soon.</p>
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" placeholder="Your name">
<div class="field-error error-name" style="display: none;"></div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Your email">
<div class="field-error error-email" style="display: none;"></div>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" rows="5" placeholder="Your message"></textarea>
<div class="field-error error-message" style="display: none;"></div>
</div>
<button type="button" {{#if isLoading}}disabled{{/if}}>
{{#if isLoading}}Sending...{{else}}Send Message{{/if}}
</button>

<header class="page-header">
<div class="hero-visuals">
<div class="hero-bg"></div>
<div class="hero-grid-lines"></div>
<div class="hero-waves"></div>
</div>

<div class="stats">
<h3>App Stats</h3>
<p>Counter value: {{counter}}</p>
<p>You've clicked the counter {{counter === 1 ? 'once' : counter + ' times'}}</p>
<div class="section-inner">
<h1 class="page-title">
{{#if lang === 'es'}}
Hablemos sobre <em>nuestros productos</em>
{{else}}
Let's talk about <em>our products</em>
{{/if}}
</h1>
</div>

<div class="page-navigation">
<p>You are currently on the {{title.split(' ')[0]}} page.</p>
<p>Navigate to:
<a href="/" route>Home Page</a> |
<a href="/about" route>About Page</a>
</p>
</header>

<section class="section">
<div class="section-inner">
<div class="contact-grid">
<div class="fade-up">
<h2>{{lang === 'es' ? 'Contacto' : 'Contact'}}</h2>
<p>info@estremar.com</p>
</div>
<div class="fade-up" style="transition-delay: 0.15s">
<p>{{lang === 'es' ? 'Formulario de contacto aquí.' : 'Contact form here.'}}</p>
</div>
</div>
</div>

<p class="timestamp">Page rendered at: {{timestamp}}</p>
</section>
Loading