Add default landing page with link builder (#114) #119

mmarhin · 2026-01-24T18:41:56+01:00

mmarhin commented

2026-01-24 18:41:56 +01:00

First-time contributor

This PR introduces the initial HTML structure for the default landing page (root URL).

Changes included:

Added static/index.html with the basic form and layout (using PicoCSS).
Updated main.go to serve the static file on the / path.

Status:
The HTML is static; the JavaScript logic to dynamically update the "Preview" and "Link" sections based on user input is missing and will be implemented in the next steps.

Relates to #114

This PR introduces the initial HTML structure for the default landing page (root URL). Changes included: - Added `static/index.html` with the basic form and layout (using PicoCSS). - Updated `main.go` to serve the static file on the `/` path. **Status:** The HTML is static; the JavaScript logic to dynamically update the "Preview" and "Link" sections based on user input is missing and will be implemented in the next steps. Relates to #114

mmarhin added 1 commit 2026-01-24 18:41:57 +01:00

Implement default page (a link builder) (#114 )

go-generate-check / go-generate-check (pull_request) Has been cancelled

Details

c44574f06f

mmarhin added 1 commit 2026-01-25 12:42:02 +01:00

feat: Implement interactive logic and styling for link builder

go-generate-check / go-generate-check (pull_request) Has been cancelled

Details

59b1044846

- Implement JavaScript logic to dynamically update link and markdown.
- Update HTML content to align with the README documentation.
- Modified CSS style.

mmarhin added 1 commit 2026-01-25 12:43:37 +01:00

Revert "feat: Implement interactive logic and styling for link builder"

go-generate-check / go-generate-check (pull_request) Has been cancelled

Details

93b23e4340

This reverts commit 59b1044846.

mmarhin added 1 commit 2026-01-25 12:52:28 +01:00

feat: Implement interactive logic and styling for link builder

go-generate-check / go-generate-check (pull_request) Has been cancelled

Details

5393de0a44

- Implement JavaScript logic to dynamically update link and markdown.
- Update HTML content to align with the README documentation.
- Modified CSS style.

mmarhin changed title from ~~WIP: Add default landing page with link builder (#114)~~ to Add default landing page with link builder (#114)

2026-01-25 12:53:11 +01:00

mmarhin commented

2026-01-25 12:58:56 +01:00

First-time contributor

I have pushed the full implementation.

Sorry for the commit noise/reverts in the history; I encountered a small issue where .gitignore was filtering out the SVG assets, so I had to revert and re-apply the changes to include them properly.

Summary of the latest changes:

JS Logic: Implemented script.js to handle real-time preview updates and link generation (Markdown/URL).
Styling: Added style.css to customize PicoCSS with openSUSE branding colors (Green).
Assets: Added logo and favicon.
Backend: Updated main.go to properly serve static files from the /static/ directory.

The feature is now fully functional and ready for review.

I have pushed the full implementation. Sorry for the commit noise/reverts in the history; I encountered a small issue where `.gitignore` was filtering out the SVG assets, so I had to revert and re-apply the changes to include them properly. **Summary of the latest changes:** - **JS Logic:** Implemented `script.js` to handle real-time preview updates and link generation (Markdown/URL). - **Styling:** Added `style.css` to customize PicoCSS with openSUSE branding colors (Green). - **Assets:** Added logo and favicon. - **Backend:** Updated `main.go` to properly serve static files from the `/static/` directory. The feature is now fully functional and ready for review.

Screenshot 2026-01-25 at 12-58-42 OBS Status Service.png

321 KiB

dgarcia requested changes 2026-01-27 11:00:14 +01:00

obs-status-service/static/index.html Outdated

						
				@@ -0,0 +123,4 @@

				        <hr />

				        <section>

dgarcia commented

2026-01-27 10:59:53 +01:00

First-time contributor

I think that there's no need to add all the information, sections from here to the end can be removed.

mmarhin commented

2026-01-28 22:52:32 +01:00

First-time contributor

Done @dgarcia! Cleanup complete.

mmarhin added 1 commit 2026-01-28 22:50:32 +01:00

fix: Remove redundant documentation sections from HTML

go-generate-check / go-generate-check (pull_request) Has been cancelled

Details

339b189c50

dgarcia requested changes 2026-02-11 13:22:38 +01:00

dgarcia left a comment

First-time contributor

Looks pretty good. But there's a lot of custom css. It could be better to use the defaults defined in the picocss. Instead of defining custom colors and css properties, it will be better to use standard components and just customize some variables in the style.css.

Looks pretty good. But there's a lot of custom css. It could be better to use the defaults defined in the picocss. Instead of defining custom colors and css properties, it will be better to use standard components and [just customize some variables](https://picocss.com/docs/css-variables) in the style.css.

obs-status-service/static/index.html Outdated

						
				@@ -0,0 +1,129 @@

				<!DOCTYPE html>

				<html lang="en" data-theme="dark">

dgarcia commented

2026-02-11 13:13:53 +01:00

First-time contributor

Maybe we should remove the dark theme and let the browser show the user preferred theme.

That will require to adapt all the css and replace all custom colors there with some existing color defined in the picocss

Maybe we should remove the `dark` theme and let the browser show the user preferred theme. That will require to adapt all the css and replace all custom colors there with some existing color [defined in the picocss](https://picocss.com/docs/colors)

obs-status-service/static/script.js

						
				@@ -0,0 +21,4 @@

				    }

				    // Build the path correctly with all components

				    let path = '/status/' + encodeURIComponent(project);

dgarcia commented

2026-02-11 12:49:06 +01:00

First-time contributor

I don't think that the encodeURIComponent is needed, we can show the path without encoding so the link looks clean and easier to understand.

I don't think that the `encodeURIComponent` is needed, we can show the path without encoding so the link looks clean and easier to understand.

obs-status-service/static/script.js Outdated

						
				@@ -0,0 +23,4 @@

				    // Build the path correctly with all components

				    let path = '/status/' + encodeURIComponent(project);

				    if (pkg) {

				        path += '/' + encodeURIComponent(pkg);

dgarcia commented

2026-02-11 12:49:14 +01:00

First-time contributor

Same as above.

mmarhin marked this conversation as resolved

obs-status-service/static/script.js Outdated

						
				@@ -0,0 +37,4 @@

				    // Force reload of object to ensure it updates even if path is similar or cached

				    const newPreview = preview.cloneNode(true);

				    newPreview.data = path;

				    preview.parentNode.replaceChild(newPreview, preview);

dgarcia commented

2026-02-11 13:06:06 +01:00

First-time contributor

Updating the preview here directly is creating a request to the server for each character, and producing broken images while writing. To prevent that we can add a timeout to avoid the reload before stop typing, something like:

    if (timeoutID) {
        clearTimeout(timeoutID);
        timeoutID = 0;
    }
    timeoutID = setTimeout(() => {
        const newPreview = preview.cloneNode(true);
        newPreview.data = path;
        preview.parentNode.replaceChild(newPreview, preview);
        timeoutID = 0;
        // Update reference if we were using it elsewhere, though here we just exit
    }, 800);

The timeoutID variable should be a global variable defined as 0 by default.

Or we can even debounce the whole updatePreview function.

Updating the preview here directly is creating a request to the server for each character, and producing broken images while writing. To prevent that we can add a timeout to avoid the reload before stop typing, something like: ``` if (timeoutID) { clearTimeout(timeoutID); timeoutID = 0; } timeoutID = setTimeout(() => { const newPreview = preview.cloneNode(true); newPreview.data = path; preview.parentNode.replaceChild(newPreview, preview); timeoutID = 0; // Update reference if we were using it elsewhere, though here we just exit }, 800); ``` The `timeoutID` variable should be a global variable defined as 0 by default. Or we can even [debounce](https://dev.to/teaganga/understanding-debounce-in-javascript-a-guide-with-examples-3cm4) the whole `updatePreview` function.

mmarhin marked this conversation as resolved

mmarhin added 1 commit 2026-02-18 09:38:04 +01:00

refactor: Apply code review feedback from @dgarcia

go-generate-check / go-generate-check (pull_request) Has been cancelled

Details

8cd8b3efd4

- Remove dark theme to respect browser/user preference
- Simplify CSS to use PicoCSS defaults and color variables
- Remove encodeURIComponent for cleaner, more readable URLs
- Add 800ms debounce to prevent excessive preview requests

mmarhin commented

2026-02-18 09:41:14 +01:00

First-time contributor

@dgarcia Thanks for the detailed feedback! I've applied all the requested changes:

Changes made:

Removed dark theme - Now uses browser/user preference instead of forcing data-theme="dark"
Simplified CSS - Replaced custom color variables with PicoCSS defaults (--pico-lime-600, --pico-lime-700, etc.) and removed unnecessary styling. CSS reduced from ~320 to ~150 lines.
Cleaned up URLs - Removed encodeURIComponent from path building for cleaner, more readable links
Added debouncing - Implemented 800ms timeout on updatePreview() to prevent server requests on every keystroke

The interface now relies much more on PicoCSS defaults while maintaining the openSUSE branding through the color variables.

@dgarcia Thanks for the detailed feedback! I've applied all the requested changes: ### Changes made: 1. **Removed dark theme** - Now uses browser/user preference instead of forcing `data-theme="dark"` 2. **Simplified CSS** - Replaced custom color variables with PicoCSS defaults (`--pico-lime-600`, `--pico-lime-700`, etc.) and removed unnecessary styling. CSS reduced from ~320 to ~150 lines. 3. **Cleaned up URLs** - Removed `encodeURIComponent` from path building for cleaner, more readable links 4. **Added debouncing** - Implemented 800ms timeout on `updatePreview()` to prevent server requests on every keystroke The interface now relies much more on PicoCSS defaults while maintaining the openSUSE branding through the color variables.

go-generate-check / go-generate-check (pull_request) Has been cancelled

Details

This pull request can be merged automatically.

This branch is out-of-date with the base branch

You are not authorized to merge this pull request.

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u default-page:mmarhin-default-page

git checkout mmarhin-default-page

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: git-workflow/autogits#119

Allow edits from maintainers