diff --git a/package-lock.json b/package-lock.json index 8f2e7f4..bddeffb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "react-svg": "^15.1.21", "web-vitals": "^2.1.4" } }, @@ -3406,6 +3407,16 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@tanem/svg-injector": { + "version": "10.1.45", + "resolved": "https://registry.npmjs.org/@tanem/svg-injector/-/svg-injector-10.1.45.tgz", + "integrity": "sha512-HOmdNqYIP808rxzxc6dCP8MZOQQ1zKscoNo5BkjZKgYGSm/ObNCW6r+IPTP30kVHET7y0HAzrDwnP0WYFyr3Tg==", + "dependencies": { + "@babel/runtime": "^7.20.7", + "content-type": "^1.0.4", + "tslib": "^2.4.1" + } + }, "node_modules/@testing-library/dom": { "version": "8.19.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.1.tgz", @@ -14249,6 +14260,21 @@ } } }, + "node_modules/react-svg": { + "version": "15.1.21", + "resolved": "https://registry.npmjs.org/react-svg/-/react-svg-15.1.21.tgz", + "integrity": "sha512-ISMX8ICoLNivt1+OPY24V0WmBYPSEuVU1EzgVhyXj7mSGs+aQosGFevatrfxx+1zh28iyvWRDma1YbpylGEwbw==", + "dependencies": { + "@babel/runtime": "^7.20.7", + "@tanem/svg-injector": "^10.1.42", + "@types/prop-types": "^15.7.5", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -19279,6 +19305,16 @@ "loader-utils": "^2.0.0" } }, + "@tanem/svg-injector": { + "version": "10.1.45", + "resolved": "https://registry.npmjs.org/@tanem/svg-injector/-/svg-injector-10.1.45.tgz", + "integrity": "sha512-HOmdNqYIP808rxzxc6dCP8MZOQQ1zKscoNo5BkjZKgYGSm/ObNCW6r+IPTP30kVHET7y0HAzrDwnP0WYFyr3Tg==", + "requires": { + "@babel/runtime": "^7.20.7", + "content-type": "^1.0.4", + "tslib": "^2.4.1" + } + }, "@testing-library/dom": { "version": "8.19.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.1.tgz", @@ -27049,6 +27085,17 @@ "workbox-webpack-plugin": "^6.4.1" } }, + "react-svg": { + "version": "15.1.21", + "resolved": "https://registry.npmjs.org/react-svg/-/react-svg-15.1.21.tgz", + "integrity": "sha512-ISMX8ICoLNivt1+OPY24V0WmBYPSEuVU1EzgVhyXj7mSGs+aQosGFevatrfxx+1zh28iyvWRDma1YbpylGEwbw==", + "requires": { + "@babel/runtime": "^7.20.7", + "@tanem/svg-injector": "^10.1.42", + "@types/prop-types": "^15.7.5", + "prop-types": "^15.8.1" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 2e1c08d..bbf72dc 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "react-svg": "^15.1.21", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.js b/src/App.js index a9fb268..a3752b6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,9 @@ import Menu from './main/components/Menu'; import Foot from './main/components/Foot'; +// eslint-disable-next-line import NotFound from './main/components/NotFound'; + import Links from './privat/components/Links'; @@ -12,7 +14,7 @@ function App() {
- +
diff --git a/src/privat/components/LinkBox.css b/src/privat/components/LinkBox.css index 477becd..d9c08a8 100644 --- a/src/privat/components/LinkBox.css +++ b/src/privat/components/LinkBox.css @@ -9,20 +9,22 @@ border-radius: 1em; border-width: 3px; border-style: solid; - background-color: #5555; - width: 300px; + background-color: #aaa5; color: black; text-decoration: none; + padding: 0.25em; + width: 350px; + box-sizing: border-box; } .link-box:hover { - color: blueviolet; + background-color: #fff7; } .link-box-logo { grid-area: logo; - width: 100%; - height: 100%; + height: 2.5em; + margin: auto; } .link-box-title { diff --git a/src/privat/components/LinkBox.js b/src/privat/components/LinkBox.js index 982a02f..cf8c692 100644 --- a/src/privat/components/LinkBox.js +++ b/src/privat/components/LinkBox.js @@ -1,11 +1,18 @@ -import "./LinkBox.css" +import "./LinkBox.css"; + +function importAll(r) { + let images = {}; + r.keys().forEach((item, index) => { images[item.replace('./', '')] = r(item); }); + return images + } +const images = importAll(require.context('../images', false, /\.(png|jpe?g|svg)$/)); function LinkBox (par) { const title = typeof par.title === "string" ? par.title : " "; const subtitle = typeof par.subtitle === "string" ? par.subtitle : " "; - const logo = typeof par.logo === "string" ? : " "; const url = typeof par.url === "string" ? par.url : "#"; - + const logo = typeof par.logo === "string" ? ({par.logo}) : " "; + return ( {logo} diff --git a/src/privat/components/Links.css b/src/privat/components/Links.css new file mode 100644 index 0000000..8480d86 --- /dev/null +++ b/src/privat/components/Links.css @@ -0,0 +1,11 @@ +.links { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px , 1fr)); + gap: 0.5em; + padding: 0.5em; + min-width: calc(350px + 1em); +} + +.links > a { + width: 100%; +} \ No newline at end of file diff --git a/src/privat/components/Links.js b/src/privat/components/Links.js index f0b5d34..44f6521 100644 --- a/src/privat/components/Links.js +++ b/src/privat/components/Links.js @@ -1,9 +1,19 @@ + + +// eslint-disable-next-line import LinkBox from './LinkBox'; +import LinkList from './data.json'; +import './Links.css'; + +let html = []; +for (let i = 0; i < LinkList.links.length; i++ ) { + html.push(()); +} function Links () { return ( -
- +
+ {html}
); } diff --git a/src/privat/components/data.json b/src/privat/components/data.json new file mode 100644 index 0000000..f42d556 --- /dev/null +++ b/src/privat/components/data.json @@ -0,0 +1,29 @@ +{ + "$schema": "./schema.json", + "links": [ + { + "title": "Gitlab", + "subtitle": "Git Verwaltung", + "url": "http://172.22.1.1:7202", + "logo": "gitlab.svg" + }, + { + "title": "Pihole", + "subtitle": "VPN Filter", + "url": "http://10.47.82.1:84/admin/login.php", + "logo": "pihole.svg" + }, + { + "title": "Nginx", + "subtitle": "Zertifakte, SubDomainVerwaltung", + "url": "http://letsstein.de:81", + "logo": "nginx.png" + }, + { + "title": "Portainer", + "subtitle": "Docker Verwaltung", + "url": "https://172.22.5.1:9443", + "logo": "portainer.svg" + } + ] +} \ No newline at end of file diff --git a/src/privat/components/schema.json b/src/privat/components/schema.json new file mode 100644 index 0000000..a84a6d4 --- /dev/null +++ b/src/privat/components/schema.json @@ -0,0 +1,38 @@ +{ + "$schema": "http://json-schema.org/draft-04/schema", + "type": "object", + + "properties": { + "links":{ + "type":"array", + "title": "Links", + "description": "List of Links", + "items": { + "type":"object", + "properties": { + "title": { + "type":"string", + "description": "Title in LinkBox" + }, + "subtitle": { + "type":"string", + "description": "Subtitle in LinkBox" + }, + "url":{ + "type":"string", + "description": "Url of the link" + }, + "logo":{ + "type":"string", + "description": "Logo of the Link" + } + }, + "required":[ + "title", + "url" + ] + } + } + + } +} \ No newline at end of file diff --git a/src/privat/images/gitlab.svg b/src/privat/images/gitlab.svg new file mode 100644 index 0000000..274e620 --- /dev/null +++ b/src/privat/images/gitlab.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/privat/images/nginx.png b/src/privat/images/nginx.png new file mode 100644 index 0000000..76e886d Binary files /dev/null and b/src/privat/images/nginx.png differ diff --git a/src/privat/images/pihole.svg b/src/privat/images/pihole.svg new file mode 100644 index 0000000..cae7d8e --- /dev/null +++ b/src/privat/images/pihole.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/privat/images/portainer.svg b/src/privat/images/portainer.svg new file mode 100644 index 0000000..e8c91b3 --- /dev/null +++ b/src/privat/images/portainer.svg @@ -0,0 +1 @@ + \ No newline at end of file