Gallardo7761/hub
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

[REPO REFACTOR]: changed to a better git repository structure with branches

Browse Source
This commit is contained in:
Jose
2025-11-01 03:55:13 +01:00
parent 0f4494a353
commit 01b5269dde
23 changed files with 5092 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
eslint.config.js Normal file
View File

@@ -0,0 +1,38 @@
import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
export default [
{ ignores: ['dist'] },
{
files: ['**/*.{js,jsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
settings: { react: { version: '18.3' } },
plugins: {
react,
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...js.configs.recommended.rules,
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
...reactHooks.configs.recommended.rules,
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
]

23
index.html Normal file
View File

@@ -0,0 +1,23 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>miarma.net HUB</title>
<meta name="twitter:card" content="summary_large_image">
<meta property="og:url" content="https://miarma.net">
<meta property="og:title" content="miarma.net HUB">
<meta property="og:description" content="HUB de miarma.net">
<meta property="og:image" content="https://miarma.net/logo.png">
<meta property="og:image:secure_url" content="https://miarma.net/logo.png">
<meta property="og:image:type" content="image/png">
<meta name="description" content="HUB de miarma.net">
<meta name="keywords" content="miarma, miarma.net">
<meta name="author" content="Gallardo7761">
<link rel="icon" href="/images/favicon.ico" type="image/x-icon">
</head>
<body class="dark">
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

4498
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

36
package.json Normal file
View File

@@ -0,0 +1,36 @@
{
"name": "hubreact",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.7.2",
"@fortawesome/free-brands-svg-icons": "^6.7.2",
"@fortawesome/free-regular-svg-icons": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@fortawesome/react-fontawesome": "^0.2.2",
"bootstrap": "^5.3.3",
"framer-motion": "^12.11.0",
"html2canvas": "^1.4.1",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@eslint/js": "^9.17.0",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.17.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.14.0",
"vite": "^6.0.5"
}
}

37
public/config/settings.json Normal file
View File

@@ -0,0 +1,37 @@
[
{
"title": "Panel de administración",
"description": "Panel de control para los administradores de miarma.net",
"link": "https://panel.miarma.net/"
},
{
"title": "Jellyfin",
"description": "Servidor multimedia privado para ver videitos",
"link": "https://cine.miarma.net/"
},
{
"title": "Miarmacraft",
"description": "Nuestro server de MC Forge 1.20.1",
"link": "https://miarma.net/miarmacraft"
},
{
"title": "Calvaria",
"description": "Nuestro servidor de tModLoader 1.4.4.9",
"link": "https://miarma.net/calvaria"
},
{
"title": "Portafolio",
"description": "Mi portafolio personal (proyectos e info)",
"link": "http://gallardo.dev"
},
{
"title": "Huertos Bellavista",
"description": "Web de la comunidad de huertos urbanos de Bellavista",
"link": "https://www.huertosbellavista.es/"
},
{
"title": "ContaminUS",
"description": "Proyecto a presentar en el Hack4Change ETSII 2025",
"link": "https://contaminus.miarma.net/groups/1/devices/6a6098"
}
]

BIN
public/fonts/OpenSans.ttf Normal file
View File

Binary file not shown.

BIN
public/fonts/ProductSansBold.ttf Normal file
View File

Binary file not shown.

BIN
public/fonts/ProductSansBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
public/fonts/ProductSansItalic.ttf Normal file
View File

Binary file not shown.

BIN
public/fonts/ProductSansRegular.ttf Normal file
View File

Binary file not shown.

BIN
public/images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

49
src/components/App.jsx Normal file
View File

@@ -0,0 +1,49 @@
import { useConfig } from "../contexts/ConfigContext.jsx";
import Card from "./Card.jsx";
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import Footer from "./Footer.jsx";
import Header from "./Header.jsx";
import ContentWrapper from "./ContentWrapper.jsx";
function App() {
const { config, loading, error } = useConfig();
if (loading) {
return (
<div className={"text-center py-5"}>
<FontAwesomeIcon icon={faSpinner} size={"6x"} spin={true} />
</div>
);
}
if (error) {
return (
<div className={"text-center py-5"}>
<h1>Error</h1>
<p>{error.message}</p>
</div>
);
}
return (
<>
<Header />
<ContentWrapper>
<div className={"row g-4"}>
{config.map((card, index) => (
<Card
key={index}
{...card}
/>
))}
</div>
</ContentWrapper>
<Footer />
</>
);
}
export default App;

46
src/components/Card.jsx Normal file
View File

@@ -0,0 +1,46 @@
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import PropTypes from "prop-types";
import { useState, useEffect } from "react";
export default function Card({ title, description, link }) {
const [image, setImage] = useState("");
useEffect(() => {
const getImage = async () => {
const response = await fetch("https://api.miarma.net/v1/screenshot?url=" + link);
const blob = await response.blob();
const imageURL = URL.createObjectURL(blob);
setImage(imageURL);
}
getImage();
}, [link]);
return (
<div className={"col-md-6 col-lg-3"}>
<div className={"card"}>
<div className={"card-body text-center"}>
<img src={image} className={"card-img-top mb-3"}></img>
<h5 className={"card-title"}>{title}</h5>
<p className={"card-text"}>{description}</p>
<a
href={link}
className={"btn btn-primary text-dark"}
>
<FontAwesomeIcon icon={faArrowUpRightFromSquare} className={"me-2"} />
Ir
</a>
</div>
</div>
</div>
)
}
Card.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
link: PropTypes.string.isRequired,
onHoverStart: PropTypes.func,
onHoverEnd: PropTypes.func,
}

15
src/components/ContentWrapper.jsx Normal file
View File

@@ -0,0 +1,15 @@
import PropTypes from 'prop-types';
const ContentWrapper = ({ children }) => {
return (
<div className={"container"}>
{children}
</div>
);
}
ContentWrapper.propTypes = {
children: PropTypes.node.isRequired,
};
export default ContentWrapper;

11
src/components/Footer.jsx Normal file
View File

@@ -0,0 +1,11 @@
import License from './License';
const Footer = () => {
return (
<footer className="mt-5 text-center">
<License work="miarma.net" workLink="https://miarma.net/" />
</footer>
);
};
export default Footer;

9
src/components/Header.jsx Normal file
View File

@@ -0,0 +1,9 @@
const Header = () => {
return (
<h1 className={"text-center my-5 fw-bold"}>
<a href="https://miarma.net/" className="gradient-text">miarma.net</a> hub
</h1>
);
}
export default Header;

26
src/components/License.jsx Normal file
View File

@@ -0,0 +1,26 @@
import PropTypes from 'prop-types';
const License = ({ work, workLink }) => {
const currentYear = new Date().getFullYear();
return (
<>
<a href={workLink} target="_blank" rel="noopener noreferrer">{work}</a> © {currentYear} by{' '}
<a href="https://gallardo.dev" target="_blank" rel="noopener noreferrer">Gallardo7761 (Jose)</a> is licensed under{' '}
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" rel="noopener noreferrer">
CC BY-NC-ND 4.0
</a>
<img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="cc" style={{ maxWidth: '1em', maxHeight: '1em', marginLeft: '.2em' }} />
<img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="by" style={{ maxWidth: '1em', maxHeight: '1em', marginLeft: '.2em' }} />
<img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="nc" style={{ maxWidth: '1em', maxHeight: '1em', marginLeft: '.2em' }} />
<img src="https://mirrors.creativecommons.org/presskit/icons/nd.svg" alt="nd" style={{ maxWidth: '1em', maxHeight: '1em', marginLeft: '.2em' }} />
</>
);
};
License.propTypes = {
work: PropTypes.string.isRequired,
workLink: PropTypes.string.isRequired,
};
export default License;

23
src/components/ThemeButton.jsx Normal file
View File

@@ -0,0 +1,23 @@
import {useEffect, useState} from 'react';
export default function ThemeButton() {
const [theme, setTheme] = useState(() => {
return localStorage.getItem("theme") || "light";
});
useEffect(() => {
document.body.classList.remove("light", "dark");
document.body.classList.add(theme);
localStorage.setItem("theme", theme);
}, [theme]);
const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
};
return (
<button className={"theme-toggle"} onClick={toggleTheme}>
{theme === "dark" ? "☀️" : "🌙"}
</button>
)
}

60
src/contexts/ConfigContext.jsx Normal file
View File

@@ -0,0 +1,60 @@
import { createContext, useContext, useState, useEffect } from "react";
import PropTypes from "prop-types";
/**
* ConfigContext.jsx
*
* Este archivo define el contexto de configuración para la aplicación, permitiendo cargar y manejar la configuración desde un archivo externo.
*
* Importaciones:
* - createContext, useContext, useState, useEffect: Funciones de React para crear y utilizar contextos, manejar estados y efectos secundarios.
* - PropTypes: Librería para la validación de tipos de propiedades en componentes de React.
*
* Funcionalidad:
* - ConfigContext: Contexto que almacena la configuración cargada, el estado de carga y cualquier error ocurrido durante la carga de la configuración.
* - ConfigProvider: Proveedor de contexto que maneja la carga de la configuración y proporciona el estado de la configuración a los componentes hijos.
* - Utiliza `fetch` para cargar la configuración desde un archivo JSON.
* - Maneja el estado de carga y errores durante la carga de la configuración.
* - useConfig: Hook personalizado para acceder al contexto de configuración.
*
* PropTypes:
* - ConfigProvider espera un único hijo (`children`) que es requerido y debe ser un nodo de React.
*
*/
const ConfigContext = createContext();
export const ConfigProvider = ({ children }) => {
const [config, setConfig] = useState([]);
const [configLoading, setLoading] = useState(true);
const [configError, setError] = useState(null);
useEffect(() => {
const fetchConfig = async () => {
try {
const response = await fetch("/config/settings.json");
if (!response.ok) throw new Error("Error al cargar settings.json");
const json = await response.json();
setConfig(json);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchConfig();
}, []);
return (
<ConfigContext.Provider value={{ config, configLoading, configError }}>
{children}
</ConfigContext.Provider>
);
};
ConfigProvider.propTypes = {
children: PropTypes.node.isRequired,
};
export const useConfig = () => useContext(ConfigContext);

52
src/css/Card.css Normal file
View File

@@ -0,0 +1,52 @@
.card {
border: none;
border-radius: 30px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
color: var(--text);
z-index: 1;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
}
.card img {
border-radius: 15px;
}
.card-title {
font-weight: 1500 !important;
color: var(--text);
}
.card-text {
color: var(--text);
}
.btn-primary {
background: var(--accent);
background-size: 300% 300%; /* Para la animación */
border: none;
border-radius: 50px;
padding: 10px 20px;
color: #000;
font-weight: bold;
transition: background-position 0.3s ease;
animation: holografico 3s ease infinite;
}
.btn-primary:hover {
background: var(--accent-hover);
background-size: 300% 300%;
}
@keyframes holografico {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

144
src/css/index.css Normal file
View File

@@ -0,0 +1,144 @@
/* ================================
FUENTES PERSONALIZADAS
================================== */
@font-face {
font-family: "Open Sans";
src: url('/fonts/OpenSans.ttf');
}
@font-face {
font-family: "Product Sans";
src: url('/fonts/ProductSansRegular.ttf');
}
@font-face {
font-family: "Product Sans Italic";
src: url('/fonts/ProductSansItalic.ttf');
}
@font-face {
font-family: "Product Sans Italic Bold";
src: url('/fonts/ProductSansBoldItalic.ttf');
}
@font-face {
font-family: "Product Sans Bold";
src: url('/fonts/ProductSansBold.ttf');
}
* {
transition: background-color 0.4s, border-color 0.4s, color 0.4s;
}
:root {
--accent: linear-gradient(45deg,
#ff66ff,
#66ffff,
#ffff66,
#66ff66,
#ff6666
);
--accent-hover: linear-gradient(45deg,
#ff99ff,
#99ffff,
#ffff99,
#99ff99,
#ff9999
);
}
.light {
--primary: #bebebe;
--secondary: #ffffff;
--muted: #6c757d;
--text: #212529;
--bg: #ffffff;
}
.dark {
--primary: #343a40;
--secondary: #212529;
--muted: #adb5bd;
--text: #f8f9fa;
--bg: #212529;
}
html,
body {
font-family: "Open Sans", sans-serif;
color: var(--text);
background-color: var(--bg);
}
/* Tipografía global */
div,
label,
input,
p,
span,
a,
button {
font-family: "Open Sans", sans-serif;
color: var(--text);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Product Sans Bold", sans-serif;
color: var(--text);
}
main {
color: var(--text);
background-color: var(--bg);
}
.theme-toggle {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--accent);
color: white;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
a {
color: var(--accent);
}
a:hover {
color: var(--accent-hover);
}
.theme-toggle:hover {
background-color: var(--accent-hover);
}
footer {
margin-top: 30px;
text-align: center;
color: var(--muted);
}
.gradient-text {
background: var(--accent);
background-size: 300% 300%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: holografico 4s ease infinite;
}

14
src/main.jsx Normal file
View File

@@ -0,0 +1,14 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './components/App.jsx'
import { ConfigProvider } from './contexts/ConfigContext.jsx'
import './css/index.css';
import './css/Card.css';
createRoot(document.getElementById('root')).render(
<StrictMode>
<ConfigProvider>
<App />
</ConfigProvider>
</StrictMode>,
)

11
vite.config.js Normal file
View File

@@ -0,0 +1,11 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
build: {
outDir: 'dist',
},
publicDir: 'public',
})