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>
|
<!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>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" id="favicon" />
|
<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="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." />
|
<meta name="description" content="A New Tab Page." />
|
||||||
<title>New Tab</title>
|
<title>New Tab</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import Navbar from './navbar';
|
import Navbar from './navbar';
|
||||||
import Container from './container';
|
import Container from './container';
|
||||||
|
import Sidebar from './sidebar';
|
||||||
|
|
||||||
import './app.css';
|
import './app.css';
|
||||||
|
|
||||||
|
|
@ -8,6 +9,7 @@ export default () => {
|
||||||
<>
|
<>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<Container />
|
<Container />
|
||||||
|
<Sidebar />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,11 @@ export default () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div class="container bg-body-tertiary shadow text-center position-absolute top-50 start-50 translate-middle mx-auto py-4">
|
<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 />
|
||||||
<br />
|
<br />
|
||||||
<form role="search" action={"https://www.google.com/search"} method="get">
|
<form role="search" action={localStorage.getItem("searchEngine") || ""} method="get">
|
||||||
<input class="form-control me-2" autoFocus type="search" placeholder="Search with Google" aria-label="Search with Google" name="q" />
|
<input class="form-control me-2" autoFocus type="search" placeholder={`Search with ${localStorage.getItem("searchEngineName")}`} aria-label="Search with Google" name="q" />
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -1,72 +1,22 @@
|
||||||
import { useState } from 'preact/hooks';
|
import { useState } from 'preact/hooks';
|
||||||
import { ChevronLeft, ChevronRight } from 'lucide-preact';
|
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 () => {
|
export default () => {
|
||||||
const [weather, setWeather] = useState<string>("Loading...");
|
|
||||||
const [imgSrc, setSrc] = useState<string>("favicon.svg");
|
|
||||||
const [wttrDesc, setWttrDesc] = useState<string>("Loading...");
|
const [wttrDesc, setWttrDesc] = useState<string>("Loading...");
|
||||||
|
|
||||||
const getWeather = async (coords: GeolocationCoordinates) => {
|
fetch(`https://wttr.in/${localStorage.getItem("location") || ""}?format=%t%20with%20%C%c&m`)
|
||||||
const weather = await fetchWeather(coords.latitude, coords.longitude);
|
.then(res => res.text())
|
||||||
|
.then(desc => {
|
||||||
const weatherCode = weather.current.weather_code;
|
setWttrDesc(desc.trim());
|
||||||
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();
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<nav class="navbar shadow fixed-top" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
|
<nav class="navbar shadow fixed-top" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="navbar-brand">
|
<div class="navbar-brand">
|
||||||
{wttrDesc}
|
{wttrDesc}
|
||||||
<img src={imgSrc} alt="Logo" width="24" height="24" class="d-inline-block align-text-top" />
|
|
||||||
</div>
|
</div>
|
||||||
<span class="navbar-text">
|
|
||||||
{weather}
|
|
||||||
</span>
|
|
||||||
<div class="d-flex hstack gap-2" role="search">
|
<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.back}><ChevronLeft size={20} /></button>
|
||||||
<button type="button" class="btn btn-outline-light btn-sm" onClick={history.forward}><ChevronRight 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 { render } from 'preact'
|
||||||
import './index.css'
|
import './index.css'
|
||||||
import 'halfmoon/css/halfmoon.min.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'
|
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')!)
|
render(<App />, document.getElementById('app')!)
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue