Initial setup and layout by abrulic · Pull Request #1 · code-forge-io/docs

abrulic · 2025-07-24T17:00:23Z

Description

Initial working UI that contains a sidebar, table of contents, and rendered styled .mdx files, theme toggle, etc.
Added reusable components like the sidebar, code block, etc.
Added reusable UI primitives like alert dialog, icon button, etc.

Remaining vitest tests will be included in #4, with additional improvements in that issue's PR.

recording-2025-08-21-13-38-45.webm

…, and some fixes in sidebar, toc and ocumentation page

github-actions · 2025-07-25T07:52:06Z

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	95.26%	302 / 317
🔵	Statements	95.26%	302 / 317
🔵	Functions	96.66%	29 / 30
🔵	Branches	98.73%	78 / 79

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
app/components/code-block/code-block-diff.ts	100%	100%	100%	100%
app/components/code-block/code-block-parser.ts	66.66%	100%	80%	66.66%	29-42
app/components/code-block/code-block-syntax-highlighter.ts	100%	100%	100%	100%
app/components/sidebar/build-breadcrumbs.tsx	100%	100%	100%	100%
app/utils/local-storage.ts	77.77%	66.66%	100%	77.77%	6-7
app/utils/split-slug.ts	100%	100%	100%	100%

Generated in workflow #28 for commit f3a6b68 by the Vitest Coverage Report Action

…routes.ts

thomasfr

Is this the last version you shows in mondays meeting? I think i am missing some files, or?

In the content folder, is it necessary and if yes, why is i necessary to have a subfolder v1.0.1?

AlemTuzlak · 2025-08-12T12:41:45Z

app/components/code-block/copy-button.tsx

+	const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
+		if (copyState !== "copied") {
+			e.currentTarget.style.backgroundColor = "var(--color-code-copy-hover-bg)"
+		}
+	}
+
+	const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
+		if (copyState !== "copied") {
+			e.currentTarget.style.backgroundColor = "transparent"
+		}
+	}


why do this with JS, couldn't you have done this with css? just conditionally render classes needed to do this based on copy state

AlemTuzlak · 2025-08-12T12:50:18Z

app/components/pager.tsx

+ * @param previous - Optional previous page link data with title and path.
+ * @param next - Optional next page link data with title and path.
+ */
+export function Pager({ previous, next }: PagerProps) {


why did you call this pager?

AlemTuzlak · 2025-08-12T12:52:27Z

app/components/sidebar/desktop-sidebar.tsx

+
+export const DesktopSidebarPanel = ({ items, className }: { items: SidebarSection[]; className: string }) => (
+	<div
+		className={`sticky top-[var(--header-height)] h-[calc(100vh-var(--header-height))] w-80 flex-col overflow-hidden bg-[var(--color-background)] p-4 ${className}`}


AlemTuzlak · 2025-08-12T12:54:50Z

app/components/table-of-content.tsx

+
+	return (
+		<div>
+			<a


why is this a normal link?

AlemTuzlak · 2025-08-12T12:56:56Z

app/components/theme-toggle.tsx

+			{theme === "light" && <IconButton aria-label="Switch to dark mode" name="Sun" onClick={toggle} />}
+			{theme === "dark" && <IconButton aria-label="Switch to light mode" name="Moon" onClick={toggle} />}


why two, why not one, extract the check into const isDarkTheme = theme === "dark" then render conditionally based on that, if you don't support the system theme obviously

AlemTuzlak · 2025-08-12T12:57:20Z

app/env.server.ts

+	GITHUB_OWNER: z.string(),
+	GITHUB_REPO: z.string(),


both of these are optional, that's correct?

AlemTuzlak · 2025-08-12T13:00:40Z

app/routes.ts

-export default flatRoutes({
-	ignoredRouteFiles: ["**/*.test.{ts,tsx}"],
-})
+export default [


why did you manually define routes?

@abrulic any answer?

I defined them manually so it is easier to follow the routes. I think this way is cleaner for the template

AlemTuzlak · 2025-08-12T13:01:43Z

app/routes/documentation-layout.tsx

+	// TODO sidebarItems are used on 2 places, change this to not call getSidebarTree twice
+	const sidebarItems = createSidebarTree("v1.0.1") //TODO use the version what is selected from the dropdown, after implementing docs generation


create issues, don't just write TODO in the code

AlemTuzlak · 2025-08-12T13:02:49Z

app/ui/breadcrumbs.tsx

+
+	if (href && !isActive) {
+		return (
+			<a href={href} className={classes}>


a tags cause full document reload requests, why are you using them instead of ?

AlemTuzlak · 2025-08-12T13:04:36Z

app/utils/create-sidebar-tree.ts

+		map.get(parent)?.documentationPages.push({ slug: p.slug, title: p.title })
+	}
+
+	return [...map.values()].filter((n) => parentOf(n.slug) === version)


could've been a constant with a descriptive name, i have no idea what this is

AlemTuzlak · 2025-08-12T13:05:07Z

app/utils/extract-heading-tree-from-mdx.ts

+		.replace(/`([^`]+)`/g, "$1")
+		.replace(/\*\*([^*]+)\*\*/g, "$1")
+		.replace(/\*([^*]+)\*/g, "$1")
+		.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+		.replace(/\{[^}]*\}/g, "")
+		.replace(/<\/?[^>]+(>|$)/g, "")


comments on what this does would go a long way

AlemTuzlak · 2025-08-12T13:07:30Z

app/utils/split-slug.ts

@@ -0,0 +1,16 @@
+export function splitSlug(slug: string) {


always test utils

this funciton has tests in tests folder, maybe another utils don't have but I created another issue to add missing tests

AlemTuzlak

small changes, all in all very good

abrulic · 2025-08-13T13:56:41Z

Is this the last version you shows in mondays meeting? I think i am missing some files, or?

In the content folder, is it necessary and if yes, why is i necessary to have a subfolder v1.0.1?

removed "v1.0.1"

abrulic · 2025-08-21T12:25:32Z

@AlemTuzlak @thomasfr This one is ready for review

thomasfr

Looks good, thanks. I havent looked into all the components and hooks though.

AlemTuzlak · 2025-08-21T17:52:04Z

app/components/theme-toggle.tsx

+export function ThemeToggle() {
+	const [theme, setTheme] = useState<"light" | "dark" | null>(null)
+
+	useLayoutEffect(() => {


Great job on using this hook

abrulic added 19 commits July 14, 2025 12:45

cleanup from base-stack

f7c81bf

sidebar initial working version

6e8dfcf

functional table of content component

58084d7

small change in the knip.json

dfbeff7

custom script to validate content folder positions inside frontmatter…

8dede72

…, and some fixes in sidebar, toc and ocumentation page

updated readme.md file

8d06e3e

updated readme.md file

d0ab191

small refactoring and added documnetation for some components

03dcf30

footer component

6d23125

initial theme switcher, changes on UI, additional components

9fb1e8c

fonts, some fixes

b8d8d87

small change

4b4bf90

convention xx-file-name.mdx update - still updates needed

67d4cb7

refactoring

0fd0ec2

small changes and updated package.json

3029d09

ts fix?

d7286cc

ts fix?

c9d553c

ts fix?

2c04dc6

ts fix?

e70c006

abrulic added 3 commits July 25, 2025 09:53

ts fix?

06780d2

sidebar fix

de6cfdd

added content folder and some fixes and improvements in UI

eb3f746

abrulic changed the title ~~Initial setup and layout~~ Initial setup and layout [DRAFT] Jul 28, 2025

abrulic added 6 commits July 29, 2025 16:22

removed _index route, added index.mdx file for hopemage, reorganized …

0e29737

…routes.ts

refactoring

d6b73ed

small update in update-frontmatter logic

892c14c

small refactoring

7d2842e

small ui improvements

5eaed66

small ui improvements

1d3e062

thomasfr reviewed Aug 12, 2025

View reviewed changes

AlemTuzlak reviewed Aug 12, 2025

View reviewed changes

app/components/table-of-content.tsx Outdated

return (

<div>

<a

Copy link
Copy Markdown

Collaborator

AlemTuzlak Aug 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this a normal link?

AlemTuzlak reviewed Aug 12, 2025

View reviewed changes

AlemTuzlak requested changes Aug 12, 2025

View reviewed changes

abrulic added 4 commits August 13, 2025 10:53

fixed so it doesnt contains v1.0.1 now

05f4738

fixes

5045de0

small update

b9f2941

small fixes

ffc1fb7

small change

22ce1df

abrulic requested review from AlemTuzlak and thomasfr August 14, 2025 07:58

abrulic added 3 commits August 19, 2025 11:51

small fix in sidebar

45bab85

refactoring

679a95a

improvements

f3a6b68

thomasfr approved these changes Aug 21, 2025

View reviewed changes

AlemTuzlak approved these changes Aug 21, 2025

View reviewed changes

AlemTuzlak merged commit 3e5c7e6 into main Aug 21, 2025
4 checks passed

abrulic deleted the initial-setup-and-layout branch September 24, 2025 09:45

		{theme === "light" && <IconButton aria-label="Switch to dark mode" name="Sun" onClick={toggle} />}
		{theme === "dark" && <IconButton aria-label="Switch to light mode" name="Moon" onClick={toggle} />}

		// TODO sidebarItems are used on 2 places, change this to not call getSidebarTree twice
		const sidebarItems = createSidebarTree("v1.0.1") //TODO use the version what is selected from the dropdown, after implementing docs generation

Conversation

abrulic commented Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

github-actions bot commented Jul 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report

Uh oh!

thomasfr left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

abrulic Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AlemTuzlak left a comment

Choose a reason for hiding this comment

Uh oh!

abrulic commented Aug 13, 2025

Uh oh!

abrulic commented Aug 21, 2025

Uh oh!

thomasfr left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

abrulic commented Jul 24, 2025 •

edited

Loading

github-actions bot commented Jul 25, 2025 •

edited

Loading

abrulic Aug 13, 2025 •

edited

Loading