+ {/* ── Mobile tab bar (top, above panels) ── */}
+ {isMobile && (
+
+ )}
+
{/* ── Editor side ── */}
{
- {/* ── Mobile tab bar ── */}
- {isMobile && (
-
- )}
-
{saveModalOpen &&
setSaveModalOpen(false)} />}
{loginPromptOpen && setLoginPromptOpen(false)} />}
{showStarBanner && }
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 2b35d5b..2a7a5d4 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -2,8 +2,15 @@ import { useState } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { login, initiateGoogleLogin } from '../services/authService';
import { useAuthStore } from '../store/useAuthStore';
+import { useSEO } from '../utils/useSEO';
export const LoginPage: React.FC = () => {
+ useSEO({
+ title: 'Sign In — Velxio',
+ description: 'Sign in to your Velxio account to save projects and access your Arduino simulations.',
+ url: 'https://velxio.dev/login',
+ noindex: true,
+ });
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const setUser = useAuthStore((s) => s.setUser);
diff --git a/frontend/src/pages/ProjectByIdPage.tsx b/frontend/src/pages/ProjectByIdPage.tsx
index c5a7f15..5c32cc4 100644
--- a/frontend/src/pages/ProjectByIdPage.tsx
+++ b/frontend/src/pages/ProjectByIdPage.tsx
@@ -4,9 +4,16 @@ import { getProjectById } from '../services/projectService';
import { useEditorStore } from '../store/useEditorStore';
import { useSimulatorStore } from '../store/useSimulatorStore';
import { useProjectStore } from '../store/useProjectStore';
+import { useSEO } from '../utils/useSEO';
import { EditorPage } from './EditorPage';
export const ProjectByIdPage: React.FC = () => {
+ useSEO({
+ title: 'Project — Velxio Arduino Emulator',
+ description: 'View and simulate this Arduino project on Velxio — free, open-source multi-board emulator.',
+ url: 'https://velxio.dev/editor',
+ noindex: true,
+ });
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const loadFiles = useEditorStore((s) => s.loadFiles);
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
index 05d861e..906143f 100644
--- a/frontend/src/pages/RegisterPage.tsx
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -3,8 +3,15 @@ import { Link, useNavigate } from 'react-router-dom';
import { register, initiateGoogleLogin } from '../services/authService';
import { useAuthStore } from '../store/useAuthStore';
import { RESERVED_USERNAMES } from '../utils/reservedUsernames';
+import { useSEO } from '../utils/useSEO';
export const RegisterPage: React.FC = () => {
+ useSEO({
+ title: 'Create Account — Velxio',
+ description: 'Create a free Velxio account to save your Arduino projects and share simulations.',
+ url: 'https://velxio.dev/register',
+ noindex: true,
+ });
const navigate = useNavigate();
const setUser = useAuthStore((s) => s.setUser);
const [username, setUsername] = useState('');
diff --git a/frontend/src/pages/UserProfilePage.tsx b/frontend/src/pages/UserProfilePage.tsx
index 0fc3c16..b77bb0f 100644
--- a/frontend/src/pages/UserProfilePage.tsx
+++ b/frontend/src/pages/UserProfilePage.tsx
@@ -3,10 +3,18 @@ import { Link, useParams } from 'react-router-dom';
import { getUserProjects, type ProjectResponse } from '../services/projectService';
import { useAuthStore } from '../store/useAuthStore';
import { AppHeader } from '../components/layout/AppHeader';
+import { useSEO } from '../utils/useSEO';
import './UserProfilePage.css';
export const UserProfilePage: React.FC = () => {
const { username } = useParams<{ username: string }>();
+
+ useSEO({
+ title: `${username ?? 'User'} — Velxio Profile`,
+ description: `View Arduino and ESP32 projects by ${username ?? 'this user'} on Velxio.`,
+ url: `https://velxio.dev/${username ?? ''}`,
+ noindex: true,
+ });
const user = useAuthStore((s) => s.user);
const [projects, setProjects] = useState([]);
const [loading, setLoading] = useState(true);
diff --git a/frontend/src/utils/useSEO.ts b/frontend/src/utils/useSEO.ts
index 88ffea1..ff30407 100644
--- a/frontend/src/utils/useSEO.ts
+++ b/frontend/src/utils/useSEO.ts
@@ -7,6 +7,8 @@ export interface SEOMeta {
ogImage?: string;
/** Module-level constant: injected once on mount, removed on unmount. */
jsonLd?: object | object[];
+ /** If true, sets robots meta to "noindex, nofollow" to prevent indexing. */
+ noindex?: boolean;
}
function qs(selector: string): HTMLMetaElement | null {
@@ -21,12 +23,13 @@ function qs(selector: string): HTMLMetaElement | null {
* once on mount and removed on unmount. Pass a module-level constant to avoid
* unnecessary re-injection.
*/
-export function useSEO({ title, description, url, ogImage, jsonLd }: SEOMeta) {
+export function useSEO({ title, description, url, ogImage, jsonLd, noindex }: SEOMeta) {
const scriptRef = useRef(null);
useEffect(() => {
const origTitle = document.title;
const descEl = qs('meta[name="description"]');
+ const robotsEl = qs('meta[name="robots"]');
const ogTitleEl = qs('meta[property="og:title"]');
const ogDescEl = qs('meta[property="og:description"]');
const ogUrlEl = qs('meta[property="og:url"]');
@@ -39,6 +42,7 @@ export function useSEO({ title, description, url, ogImage, jsonLd }: SEOMeta) {
const set = (el: HTMLMetaElement | null, v: string) => el?.setAttribute('content', v);
const origDesc = get(descEl);
+ const origRobots = get(robotsEl);
const origOgTitle = get(ogTitleEl);
const origOgDesc = get(ogDescEl);
const origOgUrl = get(ogUrlEl);
@@ -61,6 +65,9 @@ export function useSEO({ title, description, url, ogImage, jsonLd }: SEOMeta) {
// Apply
document.title = title;
set(descEl, description);
+ if (noindex) {
+ set(robotsEl, 'noindex, nofollow');
+ }
set(ogTitleEl, title);
set(ogDescEl, description);
set(ogUrlEl, url);
@@ -82,6 +89,7 @@ export function useSEO({ title, description, url, ogImage, jsonLd }: SEOMeta) {
return () => {
document.title = origTitle;
set(descEl, origDesc);
+ if (noindex) set(robotsEl, origRobots);
set(ogTitleEl, origOgTitle);
set(ogDescEl, origOgDesc);
set(ogUrlEl, origOgUrl);
@@ -99,5 +107,5 @@ export function useSEO({ title, description, url, ogImage, jsonLd }: SEOMeta) {
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [title, description, url, ogImage]);
+ }, [title, description, url, ogImage, noindex]);
}