Add initial extension files for halfPage startpage
- Added icon image for the extension. - Created manifest.json for extension configuration with permissions and new tab override. - Implemented sidebar component with user settings for name, search engine, weather location, color scheme, and theme selection.
This commit is contained in:
wont-stream
parent
8de0faf8fa
commit
c894c6f440
10 changed files with 166 additions and 61 deletions
BIN
ext/ext.unsigned.zip
Normal file
BIN
ext/ext.unsigned.zip
Normal file
Binary file not shown.
BIN
ext/icons/icon.png
Normal file
BIN
ext/icons/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3 KiB |
20
ext/manifest.json
Normal file
20
ext/manifest.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"manifest_version": 3,
|
||||
"name": "halfPage",
|
||||
"description": "Use halfPage as your Startpage.",
|
||||
"version": "0.0.1",
|
||||
"browser_specific_settings": {
|
||||
"gecko": {
|
||||
"id": "halfPage@new-tab.ipv4.army"
|
||||
}
|
||||
},
|
||||
"optional_permissions": [
|
||||
"geolocation"
|
||||
],
|
||||
"icons": {
|
||||
"64": "icons/icon.png"
|
||||
},
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "dist/index.html"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="dark" data-bs-core="default">
|
||||
<html lang="en" data-bs-theme="dark" data-bs-core="default" id="html">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" id="favicon" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="color-scheme" content="dark">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<meta name="description" content="A New Tab Page." />
|
||||
<title>New Tab</title>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import Navbar from './navbar';
|
||||
import Container from './container';
|
||||
import Sidebar from './sidebar';
|
||||
|
||||
import './app.css';
|
||||
|
||||
|
|
@ -8,6 +9,7 @@ export default () => {
|
|||
<>
|
||||
<Navbar />
|
||||
<Container />
|
||||
<Sidebar />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ export default () => {
|
|||
return (
|
||||
<>
|
||||
<div class="container bg-body-tertiary shadow text-center position-absolute top-50 start-50 translate-middle mx-auto py-4">
|
||||
<h6 class="display-4">Hello, Seth.</h6>
|
||||
<h6 class="display-4">Hello, {localStorage.getItem("name")}.</h6>
|
||||
<br />
|
||||
<br />
|
||||
<form role="search" action={"https://www.google.com/search"} method="get">
|
||||
<input class="form-control me-2" autoFocus type="search" placeholder="Search with Google" aria-label="Search with Google" name="q" />
|
||||
<form role="search" action={localStorage.getItem("searchEngine") || ""} method="get">
|
||||
<input class="form-control me-2" autoFocus type="search" placeholder={`Search with ${localStorage.getItem("searchEngineName")}`} aria-label="Search with Google" name="q" />
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,60 +1,14 @@
|
|||
import { useState } from 'preact/hooks';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-preact';
|
||||
|
||||
import desc from "./desc.json";
|
||||
|
||||
const favicon = document.getElementById("favicon") as HTMLLinkElement;
|
||||
|
||||
const fetchWeather = async (lat: number, long: number) => {
|
||||
const req = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${long}¤t=temperature_2m,is_day,weather_code&timezone=${Intl.DateTimeFormat().resolvedOptions().timeZone}`)
|
||||
const res = await req.json();
|
||||
|
||||
return res as {
|
||||
current: {
|
||||
temperature_2m: number,
|
||||
is_day: number;
|
||||
weather_code: number;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default () => {
|
||||
const [weather, setWeather] = useState<string>("Loading...");
|
||||
const [imgSrc, setSrc] = useState<string>("favicon.svg");
|
||||
const [wttrDesc, setWttrDesc] = useState<string>("Loading...");
|
||||
|
||||
const getWeather = async (coords: GeolocationCoordinates) => {
|
||||
const weather = await fetchWeather(coords.latitude, coords.longitude);
|
||||
|
||||
const weatherCode = weather.current.weather_code;
|
||||
const isDay = weather.current.is_day === 1;
|
||||
const dayOrNight = isDay ? "Day" : "Night";
|
||||
const weatherDesc = desc[weatherCode.toString() as keyof typeof desc][dayOrNight.toLowerCase() as "day" | "night"];
|
||||
|
||||
setWeather(`${weather.current.temperature_2m}°C`);
|
||||
setSrc(weatherDesc.image);
|
||||
favicon.href = weatherDesc.image;
|
||||
setWttrDesc(`${weatherDesc.description} & ${dayOrNight}`);
|
||||
}
|
||||
|
||||
const getAproximateLocation = async () => {
|
||||
const req = await fetch("https://cf.ipv4-army.workers.dev/")
|
||||
const res = await req.json();
|
||||
return await getWeather(res);
|
||||
}
|
||||
|
||||
if ("geolocation" in navigator) {
|
||||
navigator.geolocation.getCurrentPosition((position) => {
|
||||
const coords = position.coords;
|
||||
getWeather(coords);
|
||||
}, getAproximateLocation, {
|
||||
enableHighAccuracy: true,
|
||||
maximumAge: 30 * 60 * 1000, // 30 minutes
|
||||
timeout: 5000
|
||||
});
|
||||
} else {
|
||||
getAproximateLocation();
|
||||
}
|
||||
fetch(`https://wttr.in/${localStorage.getItem("location") || ""}?format=%t%20with%20%C%c&m`)
|
||||
.then(res => res.text())
|
||||
.then(desc => {
|
||||
setWttrDesc(desc.trim());
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -62,11 +16,7 @@ export default () => {
|
|||
<div class="container-fluid">
|
||||
<div class="navbar-brand">
|
||||
{wttrDesc}
|
||||
<img src={imgSrc} alt="Logo" width="24" height="24" class="d-inline-block align-text-top" />
|
||||
</div>
|
||||
<span class="navbar-text">
|
||||
{weather}
|
||||
</span>
|
||||
<div class="d-flex hstack gap-2" role="search">
|
||||
<button type="button" class="btn btn-outline-light btn-sm" onClick={history.back}><ChevronLeft size={20} /></button>
|
||||
<button type="button" class="btn btn-outline-light btn-sm" onClick={history.forward}><ChevronRight size={20} /></button>
|
||||
|
|
|
|||
109
src/components/sidebar/index.tsx
Normal file
109
src/components/sidebar/index.tsx
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
const dataset = document.getElementById("html")!.dataset;
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
|
||||
<nav class="sidebar offcanvas-start offcanvas-md" style={(localStorage.getItem("sidebar") === "false" ? "display: none;" : "")}>
|
||||
|
||||
<div class="offcanvas-header border-bottom border-secondary border-opacity-25">
|
||||
|
||||
<a class="sidebar-brand" href="#">
|
||||
.
|
||||
</a>
|
||||
|
||||
<button type="button" class="btn-close d-md-none" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#sidebar-example"></button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<label>Name</label>
|
||||
<form class="d-flex" id="name" onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
const form = document.forms.namedItem("name");
|
||||
if (form) {
|
||||
localStorage.setItem("name", form.userName.value);
|
||||
}
|
||||
}}>
|
||||
|
||||
<input name="userName" class="form-control me-2" placeholder="Set Name" aria-label="Set Name" />
|
||||
|
||||
<button class="btn btn-primary" type="submit">Save</button>
|
||||
|
||||
</form>
|
||||
<hr class="sidebar-divider" />
|
||||
<label>Search Engine</label>
|
||||
<form id="searchEngine" onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
const form = document.forms.namedItem("searchEngine");
|
||||
if (form) {
|
||||
localStorage.setItem("searchEngine", form.engine.value);
|
||||
localStorage.setItem("searchEngineName", form.engineName.value);
|
||||
}
|
||||
}}>
|
||||
|
||||
<input name="engine" class="form-control me-2" placeholder="e.g. https://google.com/search" aria-label="Set Search Engine" />
|
||||
<br />
|
||||
<input name="engineName" class="form-control me-2" placeholder="e.g. Google" aria-label="Set Search Engine Name" />
|
||||
<br />
|
||||
<button class="btn btn-primary" type="submit">Save</button>
|
||||
|
||||
</form>
|
||||
<hr class="sidebar-divider" />
|
||||
<label>Weather Location</label>
|
||||
<form class="d-flex" id="weatherLocation" onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
const form = document.forms.namedItem("weatherLocation");
|
||||
if (form) {
|
||||
localStorage.setItem("location", form.location.value);
|
||||
}
|
||||
}}>
|
||||
|
||||
<input name="location" class="form-control me-2" placeholder="Leave blank for current location" aria-label="Set Search Engine" />
|
||||
|
||||
<button class="btn btn-primary" type="submit">Save</button>
|
||||
|
||||
</form>
|
||||
|
||||
<hr class="sidebar-divider" />
|
||||
<label>Color Scheme</label>
|
||||
<ul class="nav nav-pills nav-fill">
|
||||
<li class="nav-item">
|
||||
<button class="btn btn-primary" onClick={() => { localStorage.setItem("colorScheme", "auto"); location.reload() }}>Auto</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="btn btn-primary" onClick={() => { localStorage.setItem("colorScheme", "light"); dataset.bsTheme = "light" }}>Light</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="btn btn-primary" onClick={() => { localStorage.setItem("colorScheme", "dark"); dataset.bsTheme = "dark" }}>Dark</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr class="sidebar-divider" />
|
||||
<label>Theme</label>
|
||||
<ul class="nav nav-pills nav-fill">
|
||||
<li class="nav-item">
|
||||
<button class="btn btn-primary" onClick={() => { localStorage.setItem("theme", "default"); dataset.bsCore = "default" }}>Default</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="btn btn-primary" onClick={() => { localStorage.setItem("theme", "modern"); dataset.bsCore = "modern" }}>Modern</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="btn btn-primary" onClick={() => { localStorage.setItem("theme", "elegant"); dataset.bsCore = "elegant" }}>Elegant</button>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="sidebar-divider" />
|
||||
|
||||
<button class="btn btn-secondary" onClick={() => {localStorage.setItem("sidebar", "false"); location.reload()}}>Save & Close</button>
|
||||
|
||||
<hr class="sidebar-divider" />
|
||||
<label>About</label>
|
||||
<p>halfPage is a minimalistic startpage, built on only open-source software.</p>
|
||||
<a href="https://www.gethalfmoon.com/wttr">halfmoon</a>
|
||||
<a href="https://github.com/chubin/wttr.in">wttr.in</a>
|
||||
<a href="https://git.creations.works/seth/halfPage">Source</a>
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
* {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
21
src/main.tsx
21
src/main.tsx
|
|
@ -1,6 +1,27 @@
|
|||
import { render } from 'preact'
|
||||
import './index.css'
|
||||
import 'halfmoon/css/halfmoon.min.css';
|
||||
import 'halfmoon/css/cores/halfmoon.modern.css';
|
||||
import 'halfmoon/css/cores/halfmoon.elegant.css';
|
||||
import App from './components/app.tsx'
|
||||
|
||||
const dataset = document.getElementById("html")!.dataset;
|
||||
|
||||
const colorScheme = localStorage.getItem("colorScheme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") || "auto";
|
||||
if (colorScheme === "auto") {
|
||||
dataset.bsTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||
} else {
|
||||
dataset.bsTheme = colorScheme;
|
||||
}
|
||||
|
||||
dataset.bsCore = localStorage.getItem("theme") || "default";
|
||||
|
||||
const favicon = document.getElementById("favicon") as HTMLLinkElement;
|
||||
|
||||
fetch(`https://wttr.in/${localStorage.getItem("location") || ""}?format=%c`)
|
||||
.then(res => res.text())
|
||||
.then(emoji => {
|
||||
favicon.href = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${emoji.trim()}</text></svg>`
|
||||
})
|
||||
|
||||
render(<App />, document.getElementById('app')!)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue