Skip to content

Commit

Permalink
add info to home page, more explicit repo selector on home
Browse files Browse the repository at this point in the history
  • Loading branch information
vgmoose committed Jan 1, 2024
1 parent 390877a commit 176879d
Show file tree
Hide file tree
Showing 12 changed files with 154 additions and 88 deletions.
1 change: 0 additions & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,5 @@
<noscript>This website requires JavaScript to function.</noscript>
<div id="root"></div>
</body>
<!-- <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> -->

</html>
1 change: 0 additions & 1 deletion src/AppDetails.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,6 @@ class AppDetails extends Component {
let ua = navigator.userAgent;
let dlButton;

//add 3ds UA
if (ua.includes("Switch" || "WiiU")) {
dlButton = (<button onClick={() => alert(`We are sorry but Downloads are not available on this device.\n\nYou must install our Homebrew app to download from our Repo.\n\nIf you require more info on this please join us on Discord.`)}>Download</button>);
}
Expand Down
37 changes: 29 additions & 8 deletions src/AppList.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import AppCard from './AppCard';
import LibGet from './LibGet';
import loader from './img/loader.gif';
import Sidebar from './Sidebar';
import { getParams, Spacer, Mobile, stringDateToTimestamp } from './Utils';
import PlatformPicker from './PlatformPicker';
import icon from './img/icon.png';

let sorts = [{
flavor: "by most recent",
Expand Down Expand Up @@ -107,24 +109,43 @@ class AppList extends Component {
let fdbk = () => {
window.location.href = ("mailto:[email protected]?subject=[HBAS] App Store Feedback"); // temp link
}
let help = () => {
window.location.href = (`https://discord.gg/F2PKpEj`); // temp link
}

let { flavor: sortFlavor } = sorts[curSort];

let headerText = (
const isOnHome = window.location.pathname === "" || window.location.pathname === "/";

const platformPicker = isOnHome ? <div id="homeBlurb" style={{
marginBottom: 10,
marginLeft: 50,
marginRight: 50,
marginTop: 10,
maxWidth: 1100}}>
<div style={{padding: 10, textAlign: "center"}}>
<img src={icon} alt="AppStore Logo" style={{ width: 64, verticalAlign: "middle" }} />
<span style={{
fontSize: 40,
verticalAlign: "middle",
padding: 10
}}>Homebrew App Store</span>
</div>
<p>Homebrew App Store is a free and open-source repository of <a href="https://en.wikipedia.org/wiki/Homebrew_(video_games)">homebrew apps</a> for the Wii U and Switch consoles. The apps, tools, and games distributed here are all made by independent software developers within the community.</p>
<p>If you would like to list your own open-source app here, or request an existing one to add to this index, please see the <a href="/submit-or-request">Submit</a> page. For other info about the team and project, see our <a href="/about">About</a> page.</p>
<PlatformPicker />
</div> : null;

let headerText = (<Fragment>
{platformPicker}
<div className="catTitle">
<div className="menuspan">
{name} <br className="mobilebr"></br><span className="sort">{sortFlavor}</span>
</div>
<div className="menu">
<button onClick={() => this.adjustSort(this)}>Adjust Sort</button>
<button id="feedback" onClick={fdbk}>Feedback</button>
<button onClick={help}>Help!</button>
<button id="feedback" onClick={fdbk}>Leave Feedback</button>
{/* <button onClick={help}>Help!</button> */}
</div>
</div>
);
</Fragment>);

const updateURL = async (event) => {
this.query = event.target.value;
Expand Down
55 changes: 30 additions & 25 deletions src/Header.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTwitter, faDiscord } from '@fortawesome/free-brands-svg-icons'
import { faCube, faPlus, faServer, faSignInAlt } from '@fortawesome/free-solid-svg-icons'
Expand All @@ -22,8 +22,8 @@ class Header extends Component {
sub = (event) => {
let repo = event.target.value;
window.localStorage.setItem("platform", repo);
const plat = repo === "all" ? "" : repo;
const platSlash = plat === "" ? `` : `${plat}/`;
const plat = repo === "all" ? "all" : repo;
const platSlash = plat === "" ? `/all` : `${plat}/`;
if (window.location.href.endsWith("/quickstore")) {
window.location.href = `/${platSlash}quickstore`;
}
Expand All @@ -36,35 +36,40 @@ class Header extends Component {
}

render() {
// hide the subtitle if we're on the home page, and we don't have a platform selected
const hidePlatformSubtitle = (window.location.pathname === "" || window.location.pathname === "/");

const platformName = hidePlatformSubtitle ? (<Fragment>
<span className="platform"> by </span>
<a id="title" href="https://fortheusers.org">ForTheUsers</a>
</Fragment>) : (<Fragment>
<span className="platform"> for </span>
<select id="device" defaultValue={this.platform} onChange={this.sub}
style={{backgroundImage: `url(${platformIcons[this.platform]})`}}>
<option value="switch">Switch&nbsp;&nbsp;</option>
<option value="wiiu">Wii U&nbsp;&nbsp;</option>
<option value="all">Both&nbsp;&nbsp;</option>
</select>
</Fragment>);

return (
<div className="nav">
<ul>
<li id="title" className="title">
{/* <FontAwesomeIcon icon={faCube} /> */}
<img id="store_icon" src={icon} alt="AppStore Logo" style={{ width: 16 }} />
<span id="hbastitle">&nbsp;&nbsp;Homebrew App Store</span>
<span id="hbasmtitle">&nbsp;&nbsp;HB App Store</span>
<span className="platform"> for </span>
<select id="device" defaultValue={this.platform} onChange={this.sub}
style={{backgroundImage: `url(${platformIcons[this.platform]})`}}>
<option value="switch">Switch</option>
<option value="wiiu">Wii U</option>
<option value="3ds">3DS</option>
<option value="all">All Consoles&nbsp;&nbsp;</option>
</select>
<a id="title" href="/">
<img id="store_icon" src={icon} alt="AppStore Logo" style={{ width: 16 }} />
<span id="hbastitle">&nbsp;&nbsp;Homebrew App Store</span>
</a>
{platformName}
</li>
<li id="ftu"><a href="https://fortheusers.org">About</a></li>

{/* Desktop Links */}
<li id="discord"><a href="https://discord.gg/F2PKpEj">Discord</a></li>
<li id="twitter"><a href="https://twitter.com/wiiubru">Twitter</a></li>
<li id="account"><a href="https://opencollective.com/fortheusers">Donate</a></li>
<li id="dns"><a href="https://github.com/fortheusers/libget/wiki/Overview-&-Glossary#repos">API</a></li>
<li id="submit"><a href="https://submit.fortheusers.org/">Submit</a></li>
<li id="m_ftu"><a href="https://fortheusers.org"><FontAwesomeIcon icon={faCube} /></a></li>
<li id="m_discord"><a href="https://discord.gg/F2PKpEj"><FontAwesomeIcon icon={faDiscord} /></a></li>
<li id="m_twitter"><a href="https://twitter.com/wiiubru"><FontAwesomeIcon icon={faTwitter} /></a></li>
<li id="m_account"><a href="https://opencollective.com/fortheusers"><FontAwesomeIcon icon={faSignInAlt} /></a></li>
<li id="m_dns"><a href="https://github.com/fortheusers/libget/wiki/Overview-&-Glossary#repos"><FontAwesomeIcon icon={faServer} /></a></li>
<li id="m_submit"><a href="https://submit.fortheusers.org/"><FontAwesomeIcon icon={faPlus} /></a></li>
<li id="account"><a href="https://github.com/fortheusers">Github</a></li>
<li id="dns"><a href="/api-info">API</a></li>
<li id="submit"><a href="/submit-or-request">Submit</a></li>
<li id="ftu"><a href="/about">About</a></li>
</ul>
</div>
);
Expand Down
31 changes: 31 additions & 0 deletions src/InfoPage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React, { Component } from 'react';
import { Spacer, Mobile } from './Utils';

class InfoPage extends Component {
render() {
// temporary, until pages are implemented
const location = window.location.pathname;

if (location === "/about") {
window.location.href = "https://fortheusers.org";
} else if (location === "/api-info") {
window.location.href = "https://github.com/fortheusers/libget/wiki/Overview-&-Glossary#repos";
} else if (location === "/submit-or-request") {
window.location.href = "https://submit.fortheusers.org/";
}

const pageText = <div>
This page intentionally left blank.
</div>;

return (
<div className="AppList">
<Mobile />
{ pageText }
<Spacer />
</div>
);
}
}

export default InfoPage;
37 changes: 11 additions & 26 deletions src/MainDisplay.css
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ li:nth-child(2) {
padding: 0 40px 0 0;
}

li a {
li a:not(#title) {
display: block;
color:var(--footerTextColor);
text-align: center;
Expand All @@ -106,6 +106,11 @@ li a {
border: 2px solid var(--footerBackgroundColor);
}

#title {
text-decoration: none;
color: var(--footerTextColor);
}

li a:hover {
border-bottom-color: var(--footerTextColor);
}
Expand Down Expand Up @@ -559,9 +564,7 @@ button:hover, .infoBox a:hover {
opacity: 0.7;
}

#hbasmtitle {
display: none;
}

.modal_screen {
width: 800px;
cursor:zoom-out;
Expand All @@ -587,10 +590,6 @@ button:hover, .infoBox a:hover {
padding-left: 20px;
}

#dns,#account,#twitter,#discord,#ftu,#submit {
display:none;
}

li:nth-child(2) {
padding: 0 0 0 0;
}
Expand Down Expand Up @@ -641,32 +640,18 @@ button:hover, .infoBox a:hover {
width: 100%;
}

#hbastitle {
display: none;
}

#hbasmtitle {
display: inline-block;
}
}

/*Remove Mobile Icons for Large Displays*/
@media only screen and (min-width: 800px) {
#m_dns,#m_account,#m_twitter,#m_discord,#m_ftu,#m_submit {
display:none;
}
}

/*Filters for Mobile Portrait*/
@media only screen and (max-width: 600px) {
#m_dns,#m_account,#m_twitter,#m_discord,#m_ftu,#m_submit,#feedback,#full {
display:none;
}

.Sidebar {
width:0;
}

#dns,#account,#twitter,#discord,#ftu,#submit {
display:none;
}

.Sidebar ~ div {
margin-left: 0;
margin-top: 41px;
Expand Down
13 changes: 13 additions & 0 deletions src/MainDisplay.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import AppDetails from './AppDetails';
import Sidebar from './Sidebar';
import Header from './Header';
import Footer from './Footer';
import InfoPage from './InfoPage';
import AppStatsChart from './AppStatsChart';
import QuickStore from './QuickStore.tsx';
import './MainDisplay.css';
Expand Down Expand Up @@ -36,9 +37,16 @@ class MainDisplay extends Component {
<Route path='/:platform/quickstore' component={Header} />
<Route path='/:platform/search' component={Header} />
<Route path='/:platform/:package' component={Header}></Route>

<Route path='/search' component={Header} />
<Route path='/stats' component={Header} />
<Route path='/quickstore' component={Header} />

<Route path='/about' component={Header} />
<Route path='/api-info' component={Header} />
<Route path='/submit-or-request' component={Header} />
<Route path='/dmca-request' component={Header} />

<Route path='/:platform' component={Header}></Route>
<Route path='/' component={Header}></Route>
</Switch>
Expand Down Expand Up @@ -77,6 +85,11 @@ class MainDisplay extends Component {
<Route path='/:platform/category/:category' component={AppList} />
<Route path='/category/:category' component={AppList} />

<Route path='/about' component={InfoPage} />
<Route path='/api-info' component={InfoPage} />
<Route path='/submit-or-request' component={InfoPage} />
<Route path='/dmca-request' component={InfoPage} />

<Route path='/:platform/:package' component={AppDetails} />
<Route path='/:platform' component={AppList} />

Expand Down
27 changes: 27 additions & 0 deletions src/PlatformPicker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React, { Fragment } from 'react';
import { platformIcons } from "./Utils";

export const plats = {
"wiiu": "Wii U",
"switch": "Switch",
"all": "Both",
};

const PlatformPicker = ({path = ""}) => {
const platformSelect = (Object.keys(plats)).map(plat => {
return (
<a href={`/${plat}${path}`} className="platChooser">
<div>
<img style={{width: 100}} src={platformIcons[plat]} alt={plats[plat]} />
<h3>{plats[plat]}</h3>
</div>
</a>
);
});
return (<div style={{width: 500, margin: "0 auto", marginTop: 40}}>
<h2 style={{fontSize: 18, padding: 5, backgroundColor: "unset", textAlign: "center"}}>Choose a Platform</h2>
<div style={{display: "flex"}}>{ platformSelect }</div>
</div>);
};

export default PlatformPicker;
20 changes: 3 additions & 17 deletions src/QuickStore.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,17 @@
import React, { Fragment, useEffect, useState } from 'react';
import { platformIcons, Spacer, Mobile, getParams } from './Utils';
import { Spacer, Mobile, getParams } from './Utils';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { faCircleNotch, faDownload } from '@fortawesome/free-solid-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import JSZip from 'jszip';
import { urlToPromise, saveAs } from './LibGet';
import PlatformPicker, { plats } from './PlatformPicker';
import AppList from './AppList';
import loader from './img/loader.gif';
import noicon from './img/noicon.png';
import './Quickstore.css';

const plats = {
"wiiu": "Wii U",
"switch": "Switch",
"3ds": "3DS",
};

type Package = {
name: string,
title: string,
Expand Down Expand Up @@ -88,19 +83,10 @@ const QuickStore = (props: { platform: Platform }) => {
}

if (plat === undefined) {
const platformSelect = (Object.keys(plats) as Array<keyof typeof plats>).map(plat => {
return (
<a href={`/${plat}/quickstore`} className="platChooser">
<img style={{width: 150}} src={platformIcons[plat]} alt={plats[plat]} />
</a>
);
});
return (<div className="quickstore-container">
<Mobile />
{ headerInfo }
<h2>Choose a Platform</h2>
<div style={{display: "flex"}}>{ platformSelect }</div>
{/* <FullWidthAd /> */}
<PlatformPicker path="/quickstore" />
<Spacer />
</div>);
}
Expand Down
6 changes: 3 additions & 3 deletions src/Quickstore.css
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,11 @@ h2 {
}

a.platChooser {
width: 250px;
width: 110px;
text-decoration: none;
color: black;
/* color: black; */
text-align: center;
font-size: 25px;
font-size: 18px;
margin: 5px auto;
display: flex;
}
Expand Down
Loading

0 comments on commit 176879d

Please sign in to comment.