diff options
| -rwxr-xr-x | .vscode/build.sh | 2 | ||||
| -rw-r--r-- | justfile | 24 | ||||
| -rw-r--r-- | package.json | 4 | ||||
| -rwxr-xr-x | src/index.tsx | 232 |
4 files changed, 150 insertions, 112 deletions
diff --git a/.vscode/build.sh b/.vscode/build.sh index a2f94da..e12d90e 100755 --- a/.vscode/build.sh +++ b/.vscode/build.sh @@ -7,4 +7,4 @@ printf "Please input sudo password to proceed.\n" # printf "\n" -echo $sudopass | sudo -E $CLI_LOCATION/decky plugin build $(pwd) --engine podman +echo $sudopass | sudo -E $CLI_LOCATION/decky plugin build $(pwd) --engine docker diff --git a/justfile b/justfile new file mode 100644 index 0000000..56e90cc --- /dev/null +++ b/justfile @@ -0,0 +1,24 @@ +# Justfile for managing build tasks + +# Install dependencies +install: + pnpm install + +# Clean build artifacts and temporary files +clean: + sudo rm -rf dist/ + sudo rm -rf out/ + sudo rm -rf node_modules/.cache/ + sudo rm -rf .rollup.cache/ + echo "Cleaned build artifacts" + +# Build the plugin +build: + .vscode/build.sh + +# Build in development mode with watch +dev: + pnpm run watch + +# Clean and rebuild everything +rebuild: clean install build diff --git a/package.json b/package.json index 91742f9..9823011 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "bazzite-buddy", - "version": "1.2.0", - "description": "A plugin to easily view Bazzite changelogs within game mode, primarily for handhelds.", + "version": "1.3.0", + "description": "A plugin to easily view Bazzite changelogs within game mode/gamescope.", "type": "module", "scripts": { "build": "rollup -c", diff --git a/src/index.tsx b/src/index.tsx index ed3327f..fe9a7ad 100755 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,13 +1,20 @@ -import {useEffect, useState} from "react"; -import {FaClipboardList} from "react-icons/fa"; -import remarkHtml from "remark-html" -import remarkParse from "remark-parse" -import remarkGfm from "remark-gfm" -import {unified} from "unified" -import {patchPartnerEventStore} from "./PartnerEventStorePatch"; -import {staticClasses} from "@decky/ui"; -import {definePlugin} from "@decky/api" -import {fetchReleases} from "./FetchReleases"; +import { useEffect, useState } from "react"; +import { FaClipboardList } from "react-icons/fa"; +import remarkHtml from "remark-html"; +import remarkParse from "remark-parse"; +import remarkGfm from "remark-gfm"; +import { unified } from "unified"; +import { patchPartnerEventStore } from "./PartnerEventStorePatch"; +import { + staticClasses, + PanelSection, + PanelSectionRow, + ButtonItem, + Field, + SteamSpinner, +} from "@decky/ui"; +import { definePlugin } from "@decky/api"; +import { fetchReleases } from "./FetchReleases"; function Content() { const [changelogHtml, setChangelogHtml] = useState<string | null>(null); @@ -64,33 +71,10 @@ function Content() { }; return ( - <div - style={{ - padding: "10px", - width: "100%", - maxWidth: "800px", // Limit the width - margin: "0 auto", // Center the container - height: "100%", - overflowY: "auto", - backgroundColor: "#121212", - color: "#ffffff", - fontFamily: "Arial, sans-serif", - wordWrap: "break-word", // Break long words - overflowX: "hidden", // Prevent horizontal scrolling - }} - > - <h2>Bazzite Release Notes</h2> - <div style={{display: "flex", gap: "10px", marginBottom: "15px"}}> - <button - style={{ - padding: "10px 20px", - backgroundColor: "#0078D7", - color: "#ffffff", - border: "none", - borderRadius: "5px", - cursor: "pointer", - fontSize: "16px", - }} + <PanelSection title="Bazzite Release Notes"> + <PanelSectionRow> + <ButtonItem + layout="below" onClick={() => window.open( "https://github.com/ublue-os/bazzite/releases", @@ -99,81 +83,111 @@ function Content() { } > View All Release Notes - </button> - <button - style={{ - padding: "10px 20px", - backgroundColor: isRefreshing ? "#CCCCCC" : "#28A745", - color: "#ffffff", - border: "none", - borderRadius: "5px", - cursor: isRefreshing ? "not-allowed" : "pointer", - fontSize: "16px", - }} - onClick={refreshChangelog} + </ButtonItem> + </PanelSectionRow> + <PanelSectionRow> + <ButtonItem + layout="below" disabled={isRefreshing} + onClick={refreshChangelog} > {isRefreshing ? "Refreshing..." : "Refresh"} - </button> - </div> - {error ? ( - <p style={{color: "red"}} aria-live="polite"> - {error} - </p> - ) : changelogHtml ? ( - <div - style={{ - backgroundColor: "#1e1e1e", - padding: "10px", - borderRadius: "5px", - color: "#ffffff", - fontFamily: "Arial, sans-serif", - fontSize: "14px", - lineHeight: "1.6", - wordWrap: "break-word", // Prevent long text from overflowing - }} - > - <style> - {` - h1, h2, h3 { - color: #61dafb; - margin: 0 0 10px; - } - p { - margin: 0 0 10px; - } - ul, ol { - margin: 10px 0 10px 20px; - } - li { - margin: 5px 0; - } - pre { - background-color: #282c34; - padding: 10px; - border-radius: 5px; - overflow-x: auto; - color: #dcdcdc; - } - a { - color: #61dafb; - text-decoration: none; - } - a:hover { - text-decoration: underline; - } - `} - </style> - <div - dangerouslySetInnerHTML={{ - __html: changelogHtml, - }} - ></div> - </div> - ) : ( - <p aria-live="polite">Loading...</p> - )} - </div> + </ButtonItem> + </PanelSectionRow> + <PanelSectionRow> + {error ? ( + <Field label="Error">{error}</Field> + ) : changelogHtml ? ( + <Field> + <div + style={{ + width: "100%", + maxWidth: "100%", + overflow: "hidden", + wordWrap: "break-word", + overflowWrap: "break-word", + hyphens: "auto", + fontSize: "13px", + lineHeight: "1.4", + color: "#dcdedf" + }} + dangerouslySetInnerHTML={{ + __html: `<style> + * { + max-width: 100% !important; + word-wrap: break-word !important; + overflow-wrap: break-word !important; + box-sizing: border-box !important; + } + h1, h2, h3, h4, h5, h6 { + font-size: 14px !important; + color: #67a3ff !important; + margin: 8px 0 4px 0 !important; + font-weight: bold !important; + } + p { + margin: 4px 0 !important; + font-size: 13px !important; + line-height: 1.4 !important; + } + ul, ol { + margin: 4px 0 !important; + padding-left: 16px !important; + } + li { + margin: 2px 0 !important; + font-size: 13px !important; + } + code { + background: rgba(255, 255, 255, 0.1) !important; + padding: 2px 4px !important; + border-radius: 3px !important; + font-size: 12px !important; + word-break: break-all !important; + } + pre { + background: rgba(255, 255, 255, 0.1) !important; + padding: 8px !important; + border-radius: 4px !important; + overflow-x: auto !important; + font-size: 12px !important; + white-space: pre-wrap !important; + word-break: break-all !important; + } + a { + color: #67a3ff !important; + text-decoration: underline !important; + } + blockquote { + border-left: 3px solid #67a3ff !important; + padding-left: 8px !important; + margin: 4px 0 !important; + opacity: 0.8 !important; + } + table { + width: 100% !important; + max-width: 100% !important; + border-collapse: collapse !important; + font-size: 12px !important; + } + td, th { + padding: 4px !important; + border: 1px solid rgba(255, 255, 255, 0.2) !important; + word-break: break-word !important; + } + img { + max-width: 100% !important; + height: auto !important; + } + </style>${changelogHtml}`, + }} + /> + </Field> + ) : ( + <SteamSpinner /> + )} + </PanelSectionRow> + </PanelSection> ); } |