privat link site

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",

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": {

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() {
     <div className="App">
       <Menu/>
       <div className='App-body'>
-        <NotFound/>
+        
         <Links/>
       </div>
       <Foot/>

src/privat/components/LinkBox.css

@@ -9,20 +9,22 @@
     border-radius: 1em;
     border-width: 3px;
     border-style: solid;
-    background-color: #5555;
+    background-color: #aaa5;
-    width: 300px;
     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: 2.5em;
-    height: 100%;
+    margin: auto;
 }
 
 .link-box-title {

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" ? <img className="link-box-logo" src={par.logo} alt=""/> : " ";
     const url = typeof par.url === "string" ? par.url : "#";
-
+    const logo = typeof par.logo === "string" ? (<img src={images[par.logo]} alt={par.logo} className="link-box-logo"></img>) : " ";
+    
     return (
         <a className="link-box" href={url}>
             {logo}

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%;
+}

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((<LinkBox title={LinkList.links[i].title} subtitle={LinkList.links[i].subtitle} url={LinkList.links[i].url} logo={LinkList.links[i].logo} key={i}/>));
+}
 
 function Links () {
     return (
-        <div>
+        <div className='links'>
-            <LinkBox title="Gitlab" subtitle="Git Verwaltung" url="172.22.1.1:7202"/>
+            {html}
         </div>
     );
 }

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"
+        }
+    ]
+}

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"
+                ]
+            }
+        }
+        
+    }
+}

src/privat/images/gitlab.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 40 40" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+    <g transform="matrix(.20831 0 0 .20831 -19.578 -19.564)">
+        <g fill-rule="nonzero">
+            <path d="m282.83 170.73-0.27-0.69-26.14-68.22c-0.532-1.337-1.474-2.471-2.69-3.24-2.487-1.544-5.692-1.372-8 0.43-1.117 0.907-1.927 2.136-2.32 3.52l-17.65 54h-71.47l-17.65-54c-0.383-1.391-1.195-2.627-2.32-3.53-2.308-1.802-5.513-1.974-8-0.43-1.214 0.772-2.155 1.905-2.69 3.24l-26.19 68.19-0.26 0.69c-7.708 20.139-1.115 43.113 16.1 56.1l0.09 0.07 0.24 0.17 39.82 29.82 19.7 14.91 12 9.06c2.876 2.184 6.884 2.184 9.76 0l12-9.06 19.7-14.91 40.06-30 0.1-0.08c17.175-12.988 23.755-35.921 16.08-56.04z" fill="#e24329"/>
+            <path d="m282.83 170.73-0.27-0.69c-12.737 2.614-24.74 8.01-35.15 15.8l-57.41 43.41c19.55 14.79 36.57 27.64 36.57 27.64l40.06-30 0.1-0.08c17.2-12.988 23.791-35.946 16.1-56.08z" fill="#fc6d26"/>
+            <path d="m153.43 256.89 19.7 14.91 12 9.06c2.876 2.184 6.884 2.184 9.76 0l12-9.06 19.7-14.91s-17.04-12.89-36.59-27.64c-19.55 14.75-36.57 27.64-36.57 27.64z" fill="#fca326"/>
+            <path d="m132.58 185.84c-10.402-7.806-22.402-13.216-35.14-15.84l-0.26 0.69c-7.708 20.139-1.115 43.113 16.1 56.1l0.09 0.07 0.24 0.17 39.82 29.82s17-12.85 36.57-27.64l-57.42-43.37z" fill="#fc6d26"/>
+        </g>
+    </g>
+</svg>

src/privat/images/pihole.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 90 130" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+<linearGradient y2="0" y1="0" x2=".8" x1="0" id="a"><stop stop-color="#22B225" offset="0"/><stop stop-color="#29FC2E" offset="1"/></linearGradient>
+<path d="M1 85.459c0-1.717 1.707-16.993 16.907-16.993 9.998-.717 17.766 7.169 27.464 7.169 24.208-1.814 20.952-34.293-.252-34.293-5.3-.014-10.179 2.22-13.929 5.954L6.738 71.747C2.68 75.792 1 80.972 1 85.459z" id="b"/>
+</defs>
+<path fill="url(#a)" d="M37.4 40.145C21.18 38.415 4.84 26.155 3.55.215c25.17 0 38.63 14.9 39.93 38.51 4.76-28.32 27.07-25 27.07-25 1.06 16.05-12.12 25.78-27.07 26.59-4.2-8.85-29.36-30.56-29.36-30.56a.07.07 0 0 0-.11.08s24.28 21.15 23.39 30.31"/>
+<use xlink:href="#b" fill="#F60D1A" transform="rotate(180 45 85.3)"/>
+<use xlink:href="#b" fill="#96060C" transform="rotate(90 45 85.3)"/>
+<use xlink:href="#b" fill="#96060C" transform="rotate(-90 45 85.3)"/>
+<use xlink:href="#b" fill="#F60D1A"/>
+</svg>

src/privat/images/portainer.svg

@@ -0,0 +1 @@
+<svg height="2500" viewBox=".16 0 571.71 800" width="1788" xmlns="http://www.w3.org/2000/svg"><g fill="#13bef9"><path d="m190.83 175.88h-12.2v63.2h12.2zm52.47 0h-12.2v63.2h12.2zm71.69-120.61-12.5-21.68-208.67 120.61 12.5 21.68z"/><path d="m313.77 55.27 12.51-21.68 208.67 120.61-12.51 21.68z"/><path d="m571.87 176.18v-25.03h-571.71v25.03z"/><path d="m345.5 529.77v-370.99h25.02v389.01c-6.71-7.64-15.26-13.13-25.02-18.02zm-42.71-6.41v-523.36h25.02v526.41c-7.02-3.36-24.1-3.05-25.02-3.05zm-237.04 52.21c-30.51-22.59-50.64-58.62-50.64-99.54 0-21.68 5.79-43.05 16.47-61.68h213.55c10.98 18.63 16.48 40 16.48 61.68 0 18.93-2.44 36.64-10.07 52.52-16.17-15.57-39.97-22.29-64.07-22.29-42.71 0-79.32 26.56-88.77 66.26-3.36-.31-5.49-.61-8.85-.61-8.24.3-16.17 1.53-24.1 3.66z" fill-rule="evenodd"/><path d="m170.69 267.18h-64.67v65.03h64.67zm-72.91 0h-64.67v65.03h64.67zm0 72.36h-64.67v65.04h64.67zm72.91 0h-64.67v65.04h64.67zm72.61 0h-64.67v65.04h64.67zm0-107.17h-64.67v65.03h64.67z"/><path d="m109.37 585.34c8.85-37.55 42.71-65.65 82.98-65.65 25.94 0 49.12 11.61 64.99 29.93 13.72-9.47 30.2-14.96 48.2-14.96 46.98 0 85.11 38.16 85.11 85.19 0 9.77-1.52 18.93-4.57 27.78 10.37 14.05 16.78 31.76 16.78 50.69 0 47.02-38.14 85.19-85.12 85.19-20.75 0-39.66-7.33-54.3-19.54-15.56 21.68-40.88 36.03-69.56 36.03-32.95 0-61.63-18.93-75.96-46.41-5.8 1.22-11.6 1.83-17.7 1.83-46.98 0-85.42-38.17-85.42-85.19s38.14-85.19 85.42-85.19c3.05-.31 6.1-.31 9.15.3z" fill-rule="evenodd"/></g></svg>