diff --git a/README.md b/README.md index 8e41dee..314be84 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ![screenshot](screenshot.png 'screenshot') -Dashboard is just that - a dashboard. It's inspired by [SUI](https://github.com/jeroenpardon/sui) and has all the same features as SUI. +Dashboard is just that - a dashboard. It's inspired by [SUI](https://github.com/jeroenpardon/sui) and has all the same features as SUI, such as simple customization through JSON-files and a handy search bar to search the internet more efficiently. ## Features diff --git a/src/App.js b/src/App.js index 27074a3..2cbca25 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,13 @@ -import React from 'react'; -import styled, { createGlobalStyle } from 'styled-components'; +import React from "react"; +import styled, { createGlobalStyle } from "styled-components"; -import SearchBar from './components/searchBar'; -import Greeter from './components/greeter'; -import AppList from './components/appList'; -import BookmarkList from './components/bookmarkList'; -import SettingsModal from './components/settingsModal'; +import SearchBar from "./components/searchBar"; +import Greeter from "./components/greeter"; +import AppList from "./components/appList"; +import BookmarkList from "./components/bookmarkList"; +import SettingsModal from "./components/settingsModal"; -import { selectedTheme } from './selectedTheme'; +import selectedTheme from "./components/themeManager"; const GlobalStyle = createGlobalStyle` body { diff --git a/src/components/appList.js b/src/components/appList.js index 7a6e8d7..1e66f24 100644 --- a/src/components/appList.js +++ b/src/components/appList.js @@ -1,70 +1,46 @@ -import React, { useCallback, useEffect, useState } from 'react'; -import MaterialIcon from 'material-icons-react'; -import styled from 'styled-components'; +import React from "react"; +import MaterialIcon from "material-icons-react"; +import styled from "styled-components"; -import { Button } from './button'; -import { selectedTheme } from '../selectedTheme'; +import appData from "./data/apps.json"; -const AppListContainer = styled.div` - padding: 2rem 0 2rem 0; -`; +import selectedTheme from "./themeManager"; -const AppsContainer = styled.div` - display: flex; - flex-direction: row; - flex-wrap: wrap; - - @media (max-width: 600px) { - flex-direction: column; - } -`; - -const AppContainer = styled.div` - display: flex; - flex-direction: row; - flex: 1 0 21%; - padding: 1rem 0 1rem 0; - - @media (max-width: 750px) { - flex: 1 0 42%; - } -`; +import { Headline, ListContainer, ItemList, Item } from "./elements"; const IconContainer = styled.div` - margin-right: 5px; + margin-right: 0.5vh; `; -const AppDetails = styled.div` - display: flex; - flex-direction: column; -`; - -const ApplicationsText = styled.h3` - font-family: Roboto, sans-serif; - font-weight: 900; - text-transform: uppercase; - margin: 0px; - font-size: 20px; - color: ${selectedTheme.mainColor}; +const DetailsContainer = styled.div` + display: flex; + flex-direction: column; `; const Link = styled.a` - font-family: Roboto, sans-serif; - color: ${selectedTheme.mainColor}; - font-weight: 500; - text-transform: uppercase; - margin: 0px; - text-decoration: none; - font-size: 15px; + font-family: Roboto, sans-serif; + flex: 1 0 auto; + color: ${selectedTheme.mainColor}; + font-weight: 500; + text-transform: uppercase; + margin: 0; + text-decoration: none; + font-size: 1rem; `; const Description = styled.p` - font-family: Roboto, sans-serif; - text-transform: uppercase; - margin: 0px; - font-size: 10px; - font-weight: 400; - color: ${selectedTheme.accentColor}; + font-family: Roboto, sans-serif; + text-transform: uppercase; + margin: 0; + font-size: 0.65rem; + font-weight: 400; + color: ${selectedTheme.accentColor}; +`; + +const App = styled.div` + display: flex; + flex-basis: 25%; + padding: 1rem; `; const ErrorMessage = styled.p` @@ -132,4 +108,4 @@ const AppList = () => { ); }; -export default AppList; +export default AppList; \ No newline at end of file diff --git a/src/components/bookmarkList.js b/src/components/bookmarkList.js index 2c50ada..7a1f9c2 100644 --- a/src/components/bookmarkList.js +++ b/src/components/bookmarkList.js @@ -1,76 +1,53 @@ -import React from 'react'; -import styled from 'styled-components'; +import React from "react"; +import styled from "styled-components"; -import bookmarkData from './data/bookmarks.json'; +import bookmarkData from "./data/bookmarks.json"; -import { selectedTheme } from '../selectedTheme'; +import selectedTheme from "./themeManager"; +import { Headline, ListContainer, ItemList, Item } from "./elements"; -const BookmarksText = styled.h3` - font-family: Roboto, sans-serif; - text-transform: uppercase; - margin: 0; - font-size: 20px; - color: ${selectedTheme.mainColor}; +const Group = styled.h4` + font-family: Roboto, sans-serif; + font-weight: 700; + margin: 0; + text-transform: uppercase; + color: ${selectedTheme.mainColor}; `; -const GroupText = styled.h4` - font-family: Roboto, sans-serif; - font-weight: 700; - margin: 0; - text-transform: uppercase; - color: ${selectedTheme.mainColor}; -`; - -const BookmarkListContainer = styled.div` - padding: 2rem 0 2rem 0; -`; - -const BookmarksContainer = styled.div` - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: 100%; - - @media (max-width: 600px) { - flex-direction: column; - } -`; - -const BookmarkGroupContainer = styled.div` - display: flex; - flex-direction: column; - flex: 1 0 21%; - padding-top: 2rem; - font-size: 15px; +const BookmarkGroup = styled.div` + display: flex; + flex-direction: column; + flex: 2 1 auto; + padding: 1rem 0 1rem 0; `; const Bookmark = styled.a` - font-family: Roboto, sans-serif; - font-weight: 400; - text-decoration: none; - color: ${selectedTheme.accentColor}; - padding: 10px 0 0 0; - font-size: 14px; + font-family: Roboto, sans-serif; + font-weight: 400; + text-decoration: none; + color: ${selectedTheme.accentColor}; + padding: 10px 0 0 0; + font-size: 14px; `; -const BookmarkList = () => ( - - Bookmarks - - {bookmarkData.groups.map(({ name, items }) => { - return ( - - {name} - {items.map(({ url, name: linkName }) => ( - - {linkName} - - ))} - - ); - })} - - +const bookmarkList = () => ( + + Bookmarks + + {bookmarkData.groups.map(({ name, items }) => ( + + + {name} + {group.items.map(({ url, name: linkName }) => ( + + {linkName} + + ))} + + + ))} + + ); -export default BookmarkList; +export default bookmarkList; \ No newline at end of file diff --git a/src/components/data/apps.json b/src/components/data/apps.json index cce34d9..1f0184d 100644 --- a/src/components/data/apps.json +++ b/src/components/data/apps.json @@ -2,56 +2,56 @@ "apps": [ { "name": "PiHole", - "displayURL": "example.com", - "URL": "https://example.com", + "displayURL": "192.168.1.253", + "URL": "/admin/", "icon": "vpn_lock" }, { "name": "Plex", - "displayURL": "example.com", - "URL": "https://example.com", + "displayURL": "app.plex.tv", + "URL": "https://app.plex.tv", "icon": "tv" }, { "name": "NextCloud", - "displayURL": "example.com", - "URL": "https://example.com", + "displayURL": "phntxx.tech", + "URL": "https://phntxx.tech/cloud/", "icon": "filter_drama" }, { "name": "Ghost", - "displayURL": "example.com", - "URL": "https://example.com", + "displayURL": "phntxx.tech", + "URL": "https://phntxx.tech/blog/", "icon": "rss_feed" }, { "name": "Minecraft", - "displayURL": "example.com", - "URL": "https://example.com", + "displayURL": "phntxx.tech", + "URL": "https://phntxx.tech/minecraft/index.html", "icon": "games" }, { "name": "pfSense", - "displayURL": "example.com", - "URL": "https://example.com", + "displayURL": "phntxx.tech", + "URL": "https://phntxx.tech:1111/", "icon": "security" }, { "name": "ESXi", - "displayURL": "example.com", - "URL": "https://example.com", + "displayURL": "rhsttpba1.ur.de", + "URL": "https://rhsttpba1.ur.de", "icon": "dns" }, { "name": "Tautulli", - "displayURL": "example.com", - "URL": "https://example.com", + "displayURL": "phntxx.tech", + "URL": "https://phntxx.tech/tautulli/", "icon": "bar_chart" }, { "name": "Grafana", - "displayURL": "example.com", - "URL": "https://example.com", + "displayURL": "phntxx.tech", + "URL": "https://phntxx.tech/grafana/", "icon": "show_chart" } ] diff --git a/src/components/data/bookmarks.json b/src/components/data/bookmarks.json index 90c90cc..ac8e00c 100644 --- a/src/components/data/bookmarks.json +++ b/src/components/data/bookmarks.json @@ -1,53 +1,15 @@ { "groups": [ { - "name": "Communicate", + "name": "Wikis", "items": [ { - "name": "Discord", - "url": "https://example.com" + "name": "Wikipedia", + "url": "https://en.wikipedia.org/" }, { - "name": "Gmail", - "url": "https://example.com" - }, - { - "name": "Slack", - "url": "https://example.com" - } - ] - }, - { - "name": "Cloud", - "items": [ - { - "name": "Box", - "url": "https://example.com" - }, - { - "name": "Dropbox", - "url": "https://example.com" - }, - { - "name": "Drive", - "url": "https://example.com" - } - ] - }, - { - "name": "Design", - "items": [ - { - "name": "Awwwards", - "url": "https://example.com" - }, - { - "name": "Dribbble", - "url": "https://example.com" - }, - { - "name": "Muz.li", - "url": "https://example.com" + "name": "Arch Linux Wiki", + "url": "https://archlinux.org/" } ] }, @@ -56,32 +18,15 @@ "items": [ { "name": "Codepen", - "url": "https://example.com" + "url": "https://codepen.io/" }, { - "name": "Devdocs", - "url": "https://example.com" + "name": "JSFiddle", + "url": "https://jsfiddle.net/" }, { - "name": "Devhints", - "url": "https://example.com" - } - ] - }, - { - "name": "Lifestyle", - "items": [ - { - "name": "Design Milk", - "url": "https://example.com" - }, - { - "name": "Dwell", - "url": "https://example.com" - }, - { - "name": "Freshome", - "url": "https://example.com" + "name": "Pastebin", + "url": "https://pastebin.com/" } ] }, @@ -89,33 +34,46 @@ "name": "Media", "items": [ { - "name": "Spotify", - "url": "https://example.com" - }, - { - "name": "Trakt", - "url": "https://example.com" + "name": "Soundcloud", + "url": "https://soundcloud.com" }, { "name": "YouTube", - "url": "https://example.com" + "url": "https://youtube.com" + }, + { + "name": "Twitch", + "url": "https://twitch.tv" } ] }, { - "name": "Reading", + "name": "Social Networks", "items": [ { - "name": "Instapaper", - "url": "https://example.com" + "name": "Facebook", + "url": "https://facebook.com" }, { - "name": "Medium", - "url": "https://example.com" + "name": "Twitter", + "url": "https://twitter.com" }, + { + "name": "Instagram", + "url": "https://instagram.com" + } + ] + }, + { + "name": "Imageboards", + "items": [ { "name": "Reddit", - "url": "https://example.com" + "url": "https://reddit.com" + }, + { + "name": "4chan", + "url": "https://4chan.org" } ] }, @@ -123,16 +81,16 @@ "name": "Tech", "items": [ { - "name": "TheNextWeb", - "url": "https://example.com" + "name": "Hackernoon", + "url": "https://hackernoon.com" }, { "name": "The Verge", - "url": "https://example.com" + "url": "https://theverge.com" }, { - "name": "MIT Technology Review", - "url": "https://example.com" + "name": "Hackernews", + "url": "https://news.ycombinator.com" } ] } diff --git a/src/components/elements.js b/src/components/elements.js new file mode 100644 index 0000000..f2622a4 --- /dev/null +++ b/src/components/elements.js @@ -0,0 +1,32 @@ +import styled from "styled-components"; +import selectedTheme from "./themeManager"; + +const ListContainer = styled.div` + padding: 2rem 0 2rem 0; +`; + +const Headline = styled.h3` + font-family: Roboto, sans-serif; + font-weight: 900; + text-transform: uppercase; + margin: 0px; + font-size: 1.5rem; + color: ${selectedTheme.mainColor}; +`; + +const ItemList = styled.ul` + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + grid-gap: 1rem; + padding: 0; + list-style: none; +`; + +const Item = styled.li` + max-height: 100px; + overflow: hidden; + position: relative; + list-style: none; +`; + +export { Headline, ListContainer, ItemList, Item }; diff --git a/src/components/greeter.js b/src/components/greeter.js index 6187cdd..65d9377 100644 --- a/src/components/greeter.js +++ b/src/components/greeter.js @@ -1,27 +1,27 @@ -import React from 'react'; -import styled from 'styled-components'; +import React from "react"; +import styled from "styled-components"; -import { selectedTheme } from '../selectedTheme'; +import selectedTheme from "./themeManager"; const GreeterContainer = styled.div` - padding: 2rem 0 2rem 0; + padding: 2rem 0 2rem 0; `; const GreetText = styled.h1` - font-family: Roboto, sans-serif; - font-weight: 900; - font-size: 45px; - margin: 0.5rem 0 0.5rem 0; - color: ${selectedTheme.mainColor}; + font-family: Roboto, sans-serif; + font-weight: 900; + font-size: 45px; + margin: 0.5rem 0 0.5rem 0; + color: ${selectedTheme.mainColor}; `; const DateText = styled.h3` - font-family: Roboto, sans-serif; - font-weight: 400; - font-size: 15px; - text-transform: uppercase; - margin: 0; - color: ${selectedTheme.accentColor}; + font-family: Roboto, sans-serif; + font-weight: 400; + font-size: 15px; + text-transform: uppercase; + margin: 0; + color: ${selectedTheme.accentColor}; `; const getGreeting = () => { @@ -97,4 +97,4 @@ const Greeter = () => { ); }; -export default Greeter; +export default Greeter; \ No newline at end of file diff --git a/src/components/searchBar.js b/src/components/searchBar.js index a18589e..0a027ef 100644 --- a/src/components/searchBar.js +++ b/src/components/searchBar.js @@ -1,68 +1,66 @@ -import React, { useState } from 'react'; -import styled from 'styled-components'; +import React, { useState } from "react"; +import styled from "styled-components"; -import searchData from './data/search.json'; +import searchData from "./data/search.json"; -import { selectedTheme } from '../selectedTheme'; +import selectedTheme from "./themeManager"; const SearchInput = styled.input` - width: 100%; - font-size: 16px; - border: none; - border-bottom: 1px solid ${selectedTheme.accentColor}; - background: none; - border-radius: 0; - color: ${selectedTheme.mainColor}; + width: 100%; + font-size: 16px; + border: none; + border-bottom: 1px solid ${selectedTheme.accentColor}; + background: none; + border-radius: 0; + color: ${selectedTheme.mainColor}; `; -const handleQueryWithProvider = (query) => { - let queryArray = query.split(' '); +const handleQueryWithProvider = query => { + let queryArray = query.split(" "); - let prefix = queryArray[0]; + let prefix = queryArray[0]; - queryArray.shift(); + queryArray.shift(); - let searchQuery = queryArray.join(' '); + let searchQuery = queryArray.join(" "); - var foundProvider = false; - searchData.providers.forEach((provider) => { - if (provider.prefix === prefix) { - foundProvider = true; - window.location = provider.url + searchQuery; - } - }); - - if (!foundProvider) { - window.location = 'https://google.com/search?q=' + query; + var foundProvider = false; + searchData.providers.forEach(provider => { + if (provider.prefix === prefix) { + foundProvider = true; + window.location = provider.url + searchQuery; } + }); + + if (!foundProvider) { + window.location = "https://google.com/search?q=" + query; + } }; const SearchBar = () => { - let [input, setInput] = useState(); + let [input, setInput] = useState(); - const handleSearchQuery = (e) => { - var query = input; + const handleSearchQuery = e => { + var query = input; - console.log(query); + if (query.split(" ")[0].includes("/")) { + handleQueryWithProvider(query); + } else { + window.location = "https://google.com/search?q=" + query; + } - if (query.split(' ')[0].includes('/')) { - handleQueryWithProvider(query); - } else { - window.location = 'https://google.com/search?q=' + query; - } + e.preventDefault(); + }; - e.preventDefault(); - }; - - return ( -
handleSearchQuery(e)}> - setInput(e.target.value)} - > -
+ + + + + + Search Provider + Prefix + + {searchData.providers.map((provider, index) => ( + + {provider.name} + {provider.prefix} + + ))} + +
+ + + ); }; export default SettingsModal; diff --git a/src/components/themeManager.js b/src/components/themeManager.js index 151d658..f96d0a2 100644 --- a/src/components/themeManager.js +++ b/src/components/themeManager.js @@ -1,27 +1,29 @@ -import themeData from './data/themes.json'; +import themeData from "./data/themes.json"; -const setTheme = (theme) => { - localStorage.setItem('theme', theme); - window.location.reload(); +const setTheme = theme => { + localStorage.setItem("theme", theme); + window.location.reload(); }; const resetTheme = () => { - localStorage.removeItem('theme'); + localStorage.removeItem("theme"); }; const getTheme = () => { - let selectedTheme = themeData.themes[0]; + let selectedTheme = themeData.themes[0]; - if ( - localStorage.getItem('theme') && - localStorage.getItem('theme') !== undefined - ) { - selectedTheme = JSON.parse(localStorage.getItem('theme')); - } + if ( + localStorage.getItem("theme") && + localStorage.getItem("theme") !== undefined + ) { + selectedTheme = JSON.parse(localStorage.getItem("theme")); + } - return selectedTheme; + return selectedTheme; }; +const selectedTheme = getTheme(); + export { setTheme, resetTheme }; -export default getTheme; +export default selectedTheme;