From 1bcd8d530987252fca4d9e3f66393255f1f69775 Mon Sep 17 00:00:00 2001 From: Bastian Meissner Date: Wed, 20 May 2020 21:00:45 +0200 Subject: [PATCH 1/3] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d4f9fd9..7a6e6f1 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 From 94996411626f3e22deb56b506c3e031478a2770c Mon Sep 17 00:00:00 2001 From: Bastian Meissner Date: Wed, 20 May 2020 21:10:00 +0200 Subject: [PATCH 2/3] Switched from Flex to Grids, general cleanup --- src/App.js | 4 +- src/components/appList.js | 91 ++++++++------------- src/components/bookmarkList.js | 68 ++++++---------- src/components/data/apps.json | 36 ++++----- src/components/data/bookmarks.json | 124 ++++++++++------------------- src/components/elements.js | 34 ++++++++ src/components/greeter.js | 7 +- src/components/searchBar.js | 6 +- src/components/settingsModal.js | 72 ++++++++--------- 9 files changed, 192 insertions(+), 250 deletions(-) create mode 100644 src/components/elements.js diff --git a/src/App.js b/src/App.js index 1338a35..5ecd761 100644 --- a/src/App.js +++ b/src/App.js @@ -7,8 +7,8 @@ import AppList from './components/appList' import BookmarkList from './components/bookmarkList' import SettingsModal from './components/settingsModal' -import themeData from './components/data/themes.json'; -const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0]; +import getTheme from './components/themeManager'; +const selectedTheme = getTheme(); const GlobalStyle = createGlobalStyle` body { diff --git a/src/components/appList.js b/src/components/appList.js index 694dce6..7ac5d3d 100644 --- a/src/components/appList.js +++ b/src/components/appList.js @@ -4,90 +4,69 @@ import styled from 'styled-components'; import appData from './data/apps.json'; -import themeData from './data/themes.json' -const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0]; +import getTheme from './themeManager'; -const AppListContainer = styled.div` - padding: 2rem 0 2rem 0; -`; +import { Headline, ListContainer, ItemList, Item } from './elements' -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%; - } -`; +const selectedTheme = getTheme(); const IconContainer = styled.div` - margin-right: 5px; + margin-right: 0.5vh; `; -const AppDetails = styled.div` +const DetailsContainer = 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 Link = styled.a` font-family: Roboto, sans-serif; + flex: 1 0 auto; color: ${selectedTheme.mainColor}; font-weight: 500; text-transform: uppercase; - margin: 0px; + margin: 0; text-decoration: none; - font-size: 15px; + font-size: 1rem; `; const Description = styled.p` font-family: Roboto, sans-serif; text-transform: uppercase; - margin: 0px; - font-size: 10px; + margin: 0; + font-size: 0.65rem; font-weight: 400; color: ${selectedTheme.accentColor}; `; +const App = styled.div` + display: flex; + flex-basis: 25%; + padding: 1rem; +`; + const appList = () => ( - - Applications - + + Applications + { - appData.apps.map((app) => ( - - - - - - {app.name} - {app.displayURL} - - + appData.apps.map((app, index) => ( + + + + + + + {app.name} + {app.displayURL} + + + )) } - - + + ); -export default appList; \ No newline at end of file +export default appList; + diff --git a/src/components/bookmarkList.js b/src/components/bookmarkList.js index 47aaa23..d18a93a 100644 --- a/src/components/bookmarkList.js +++ b/src/components/bookmarkList.js @@ -3,18 +3,12 @@ import styled from 'styled-components'; import bookmarkData from './data/bookmarks.json'; -import themeData from './data/themes.json' -const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0]; +import getTheme 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 selectedTheme = getTheme(); -const GroupText = styled.h4` +const Group = styled.h4` font-family: Roboto, sans-serif; font-weight: 700; margin: 0; @@ -22,27 +16,11 @@ const GroupText = styled.h4` 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` +const BookmarkGroup = styled.div` display: flex; flex-direction: column; - flex: 1 0 21%; - padding-top: 2rem; - font-size: 15px; + flex: 2 1 auto; + padding: 1rem 0 1rem 0; `; const Bookmark = styled.a` @@ -55,25 +33,25 @@ const Bookmark = styled.a` `; const bookmarkList = () => ( - - Bookmarks - - + + Bookmarks + { - bookmarkData.groups.map((group) => ( - - {group.name} - { - group.items.map((link) => ( - {link.name} - )) - } - + bookmarkData.groups.map((group, index) => ( + + + {group.name} + { + group.items.map((link) => ( + {link.name} + )) + } + + )) } - - - + + ); export default bookmarkList; \ No newline at end of file diff --git a/src/components/data/apps.json b/src/components/data/apps.json index 495f0e4..24d20cc 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 b916898..abf8d55 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..4a3d5f2 --- /dev/null +++ b/src/components/elements.js @@ -0,0 +1,34 @@ +import styled from 'styled-components'; +import getTheme from './themeManager'; + +const selectedTheme = getTheme(); + +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 } \ No newline at end of file diff --git a/src/components/greeter.js b/src/components/greeter.js index 054dd41..6e9aefe 100644 --- a/src/components/greeter.js +++ b/src/components/greeter.js @@ -1,8 +1,8 @@ import React from 'react'; import styled from 'styled-components'; -import themeData from './data/themes.json' -const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0]; +import getTheme from './themeManager'; +const selectedTheme = getTheme(); const GreeterContainer = styled.div` padding: 2rem 0 2rem 0; @@ -48,11 +48,8 @@ const getExtension = (day) => { const getDateString = () => { let currentDate = new Date(); - const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; - const weekDayNames = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]; - return weekDayNames[currentDate.getUTCDay()] + ", " + monthNames[currentDate.getUTCMonth()] + " " + currentDate.getDate() + getExtension(currentDate.getDate()) + " " + currentDate.getFullYear(); } diff --git a/src/components/searchBar.js b/src/components/searchBar.js index e2558d8..a2795c1 100644 --- a/src/components/searchBar.js +++ b/src/components/searchBar.js @@ -3,8 +3,8 @@ import styled from 'styled-components'; import searchData from './data/search.json'; -import themeData from './data/themes.json'; -const selectedTheme = localStorage.getItem("theme") ? JSON.parse(localStorage.getItem("theme")) : themeData.themes[0]; +import getTheme from './themeManager'; +const selectedTheme = getTheme(); const SearchInput = styled.input` width: 100%; @@ -47,8 +47,6 @@ const SearchBar = () => { var query = input; - console.log(query) - if (query.split(" ")[0].includes("/")) { handleQueryWithProvider(query) } else { diff --git a/src/components/settingsModal.js b/src/components/settingsModal.js index 8e8c249..574adcd 100644 --- a/src/components/settingsModal.js +++ b/src/components/settingsModal.js @@ -8,12 +8,10 @@ import searchData from './data/search.json' import themeData from './data/themes.json' import getTheme, { setTheme } from './themeManager' - const selectedTheme = getTheme(); const ModalButton = styled.button` float: right; - border: none; background: none; padding: 10px; @@ -21,7 +19,6 @@ const ModalButton = styled.button` const ExitButton = styled.button` float: right; - border: none; background: none; `; @@ -64,6 +61,27 @@ const Headline = styled.h3` margin-top: 0; `; +const Table = styled.table` + font-family: Roboto, sans-serif; + font-weight: 400; + background: none; + color: ${selectedTheme.mainColor}; +`; + +const TableRow = styled.tr` + border-bottom: 1px solid ${selectedTheme.mainColor}; +`; + +const TableCell = styled.td` + background: none; + padding-top: 0.5rem; +`; + +const HeadCell = styled.th` + font-weight: 700; + background: none; +`; + const SelectorStyle = { control: (provided) => ({ ...provided, @@ -109,28 +127,6 @@ const SelectorStyle = { } } - -const Table = styled.table` - font-family: Roboto, sans-serif; - font-weight: 400; - background: none; - color: ${selectedTheme.mainColor}; -`; - -const TableRow = styled.tr` - border-bottom: 1px solid ${selectedTheme.mainColor}; -`; - -const TableCell = styled.td` - background: none; - padding-top: 0.5rem; -`; - -const HeadCell = styled.th` - font-weight: 700; - background: none; -`; - const SettingsModal = () => { const [modalHidden, setModalHidden] = useState(true); @@ -153,18 +149,20 @@ const SettingsModal = () => { - - Search Provider - Prefix - - { - searchData.providers.map((provider) => ( - - {provider.name} - {provider.prefix} - - )) - } + + + Search Provider + Prefix + + { + searchData.providers.map((provider, index) => ( + + {provider.name} + {provider.prefix} + + )) + } +
From c5927a859d2cd1fa23a4ec4ed18c1658126ffc1b Mon Sep 17 00:00:00 2001 From: Bastian Meissner Date: Thu, 21 May 2020 09:41:21 +0200 Subject: [PATCH 3/3] Updated thememanager --- src/App.js | 17 +- src/components/appList.js | 93 ++++++----- src/components/bookmarkList.js | 80 +++++----- src/components/elements.js | 40 +++-- src/components/greeter.js | 125 +++++++++------ src/components/searchBar.js | 97 ++++++------ src/components/settingsModal.js | 264 ++++++++++++++++---------------- src/components/themeManager.js | 34 ++-- 8 files changed, 386 insertions(+), 364 deletions(-) diff --git a/src/App.js b/src/App.js index 5ecd761..a16d350 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +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 getTheme from './components/themeManager'; -const selectedTheme = getTheme(); +import selectedTheme from "./components/themeManager"; const GlobalStyle = createGlobalStyle` body { diff --git a/src/components/appList.js b/src/components/appList.js index 7ac5d3d..f8a96c1 100644 --- a/src/components/appList.js +++ b/src/components/appList.js @@ -1,72 +1,67 @@ -import React 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 appData from './data/apps.json'; +import appData from "./data/apps.json"; -import getTheme from './themeManager'; +import selectedTheme from "./themeManager"; -import { Headline, ListContainer, ItemList, Item } from './elements' - -const selectedTheme = getTheme(); +import { Headline, ListContainer, ItemList, Item } from "./elements"; const IconContainer = styled.div` - margin-right: 0.5vh; + margin-right: 0.5vh; `; const DetailsContainer = styled.div` - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; `; const Link = styled.a` - 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; + 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: 0; - font-size: 0.65rem; - 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; + display: flex; + flex-basis: 25%; + padding: 1rem; `; const appList = () => ( - - Applications - - { - appData.apps.map((app, index) => ( - - - - - - - {app.name} - {app.displayURL} - - - - )) - } - - + + Applications + + {appData.apps.map((app, index) => ( + + + + + + + {app.name} + {app.displayURL} + + + + ))} + + ); export default appList; - diff --git a/src/components/bookmarkList.js b/src/components/bookmarkList.js index d18a93a..e08ce6f 100644 --- a/src/components/bookmarkList.js +++ b/src/components/bookmarkList.js @@ -1,57 +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 getTheme from './themeManager'; -import { Headline, ListContainer, ItemList, Item } from './elements' - -const selectedTheme = getTheme(); +import selectedTheme from "./themeManager"; +import { Headline, ListContainer, ItemList, Item } from "./elements"; const Group = styled.h4` - font-family: Roboto, sans-serif; - font-weight: 700; - margin: 0; - text-transform: uppercase; - color: ${selectedTheme.mainColor}; + font-family: Roboto, sans-serif; + font-weight: 700; + margin: 0; + text-transform: uppercase; + color: ${selectedTheme.mainColor}; `; const BookmarkGroup = styled.div` - display: flex; - flex-direction: column; - flex: 2 1 auto; - padding: 1rem 0 1rem 0; + 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((group, index) => ( - - - {group.name} - { - group.items.map((link) => ( - {link.name} - )) - } - - - )) - } - - + + Bookmarks + + {bookmarkData.groups.map((group, index) => ( + + + {group.name} + {group.items.map(link => ( + + {link.name} + + ))} + + + ))} + + ); -export default bookmarkList; \ No newline at end of file +export default bookmarkList; diff --git a/src/components/elements.js b/src/components/elements.js index 4a3d5f2..f2622a4 100644 --- a/src/components/elements.js +++ b/src/components/elements.js @@ -1,34 +1,32 @@ -import styled from 'styled-components'; -import getTheme from './themeManager'; - -const selectedTheme = getTheme(); +import styled from "styled-components"; +import selectedTheme from "./themeManager"; const ListContainer = styled.div` - padding: 2rem 0 2rem 0; + 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}; + 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; + 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; + max-height: 100px; + overflow: hidden; + position: relative; + list-style: none; `; -export { Headline, ListContainer, ItemList, Item } \ No newline at end of file +export { Headline, ListContainer, ItemList, Item }; diff --git a/src/components/greeter.js b/src/components/greeter.js index 6e9aefe..a791a1f 100644 --- a/src/components/greeter.js +++ b/src/components/greeter.js @@ -1,70 +1,97 @@ -import React from 'react'; -import styled from 'styled-components'; +import React from "react"; +import styled from "styled-components"; -import getTheme from './themeManager'; -const selectedTheme = getTheme(); +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 = () => { - // Maybe add some expandability for different greetings? - return "Hello World!" -} + // Maybe add some expandability for different greetings? + return "Hello World!"; +}; -const getExtension = (day) => { - let extension = "" +const getExtension = day => { + let extension = ""; - if ((day > 4 && day <= 20) || (day > 20 && day % 10 >= 4)) { - extension = "th" - } else if (day % 10 === 1) { - extension = "st" - } else if (day % 10 === 2) { - extension = "nd" - } else if (day % 10 === 3) { - extension = "rd" - } + if ((day > 4 && day <= 20) || (day > 20 && day % 10 >= 4)) { + extension = "th"; + } else if (day % 10 === 1) { + extension = "st"; + } else if (day % 10 === 2) { + extension = "nd"; + } else if (day % 10 === 3) { + extension = "rd"; + } - return extension -} + return extension; +}; const getDateString = () => { - let currentDate = new Date(); - const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; - const weekDayNames = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]; - return weekDayNames[currentDate.getUTCDay()] + ", " + monthNames[currentDate.getUTCMonth()] + " " + currentDate.getDate() + getExtension(currentDate.getDate()) + " " + currentDate.getFullYear(); -} + let currentDate = new Date(); + const monthNames = [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December" + ]; + const weekDayNames = [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday" + ]; + return ( + weekDayNames[currentDate.getUTCDay()] + + ", " + + monthNames[currentDate.getUTCMonth()] + + " " + + currentDate.getDate() + + getExtension(currentDate.getDate()) + + " " + + currentDate.getFullYear() + ); +}; const greeter = () => { + let date = getDateString(); + let greeting = getGreeting(); - let date = getDateString(); - let greeting = getGreeting(); + return ( + + {date} + {greeting} + + ); +}; - return ( - - { date } - { greeting } - - ); -} - - -export default greeter; \ No newline at end of file +export default greeter; diff --git a/src/components/searchBar.js b/src/components/searchBar.js index a2795c1..0a027ef 100644 --- a/src/components/searchBar.js +++ b/src/components/searchBar.js @@ -1,67 +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 getTheme from './themeManager'; -const selectedTheme = getTheme(); +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) => { +const handleQueryWithProvider = query => { + let queryArray = query.split(" "); - 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; - - if (query.split(" ")[0].includes("/")) { - handleQueryWithProvider(query) - } else { - window.location = "https://google.com/search?q=" + query; - } - - e.preventDefault(); + if (query.split(" ")[0].includes("/")) { + handleQueryWithProvider(query); + } else { + window.location = "https://google.com/search?q=" + query; } - return ( -
handleSearchQuery(e)}> - setInput(e.target.value)}> -