finish theme components

Author: jer3m01

eslint.config.ts

@@ -40,6 +40,7 @@ export default tseslint.config(
 		rules: {
 			quotes: ["error", "double"],
 			semi: "warn",
+			"@typescript-eslint/no-empty-object-type": ["off"],
 			"@typescript-eslint/no-unused-vars": [
 				"error",
 				{

osmium/README.md

@@ -21,6 +21,6 @@ export default defineConfig({
   }),
   plugins: [solidBase.plugin({ ... })],
 })
-````
+```
 
 More information in the [SolidBase docs for consuming a theme.](https://solidbase.dev/guide/customization/custom-themes#consuming-a-theme)

osmium/src/index.ts

@@ -5,6 +5,9 @@ import { fileURLToPath } from "node:url";
 export interface OsmiumThemeConfig {
 	sidebar?: SidebarConfig;
 	reportPagePath?: string;
+	missingPagePath?: string;
+	discord?: string;
+	github?: string;
 	fonts?: { [K in keyof typeof allFonts]?: false } | false;
 }
 

osmium/src/ui/callout.tsx

@@ -107,7 +107,7 @@ export function Callout(props: CalloutProps) {
 				>
 					<span class="text-xl font-semibold">{mergedProps.title}</span>
 				</Show>
-				<div class="prose pr-7 dark:prose-invert [&>*:first-child]:mt-1">
+				<div class="prose dark:prose-invert pr-7 [&>*:first-child]:mt-1">
 					{mergedProps.children}
 				</div>
 			</div>

osmium/src/ui/docs-layout.tsx

@@ -50,7 +50,7 @@ export const DocsLayout = (props: DocsLayoutProps) => {
 					</Show>
 				</span>
 			</Show>
-			<span class="-mt-[15px] block text-sm xl:hidden">
+			<span class="-mt-3.75 block text-sm xl:hidden">
 				<EditPageLink />
 			</span>
 			<span class="text-sm xl:hidden">

osmium/src/ui/edit-page-link.tsx

@@ -14,7 +14,7 @@ export const EditPageLink: Component = () => {
 					href={editLink()}
 					target="_blank"
 				>
-					<Icon aria-hidden="true" class="mr-1 w-[16px]" path={pencilSquare} />
+					<Icon aria-hidden="true" class="mr-1 w-3.75" path={pencilSquare} />
 					Edit this page
 				</a>
 			)}

osmium/src/ui/eraser-link/index.tsx

@@ -55,7 +55,7 @@ const EraserLink = (
 			fallback={
 				<a
 					href={linkUrl}
-					class="dark:text-solid-darklink text-solid-lightlink break-normal font-semibold leading-normal transition duration-100 ease-in hover:underline"
+					class="dark:text-solid-darklink text-solid-lightlink leading-normal font-semibold break-normal transition duration-100 ease-in hover:underline"
 					rel="noopener noreferrer"
 				>
 					{props.children}
@@ -101,7 +101,7 @@ export default function EraserOrAnchor(props: ParentProps<{ href: string }>) {
 			fallback={
 				<a
 					{...props}
-					class="dark:text-solid-darklink text-solid-lightlink break-normal font-semibold leading-normal transition duration-100 ease-in hover:underline"
+					class="dark:text-solid-darklink text-solid-lightlink leading-normal font-semibold break-normal transition duration-100 ease-in hover:underline"
 					rel="noopener noreferrer"
 				>
 					{props.children}

osmium/src/ui/layout.tsx

@@ -16,27 +16,27 @@ export const Layout: ParentComponent<{ isError?: boolean }> = (props) => {
 			<Show when={frontmatter()?.hero}>
 				<Hero />
 			</Show>
-			<div class="custom-scrollbar relative mx-auto flex max-w-8xl flex-auto justify-center pt-10">
+			<div class="custom-scrollbar max-w-8xl relative mx-auto flex flex-auto justify-center pt-10">
 				<Show when={!props.isError}>
 					<div class="hidden md:relative lg:block lg:flex-none">
 						<div class="absolute inset-y-0 right-0 w-[50vw] dark:hidden" />
-						<div class="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-linear-to-t from-slate-800 dark:block" />
-						<div class="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" />
-						<div class="sticky top-19 h-[calc(100vh-7rem)] w-64 pl-0.5 pr-2 xl:w-72">
+						<div class="absolute top-16 right-0 bottom-0 hidden h-12 w-px bg-linear-to-t from-slate-800 dark:block" />
+						<div class="absolute top-28 right-0 bottom-0 hidden w-px bg-slate-800 dark:block" />
+						<div class="sticky top-19 h-[calc(100vh-7rem)] w-64 pr-2 pl-0.5 xl:w-72">
 							<MainNavigation />
 						</div>
 					</div>
 				</Show>
 				<main
-					class="prose prose-slate w-full flex-auto px-4 pt-2 dark:prose-invert md:max-w-2xl md:pb-16 lg:max-w-none dark:text-slate-300"
+					class="prose prose-slate dark:prose-invert w-full flex-auto px-4 pt-2 md:max-w-2xl md:pb-16 lg:max-w-none dark:text-slate-300"
 					aria-live="polite"
 				>
 					<Show when={!props.isError} fallback={<>{props.children}</>}>
 						<DocsLayout>{props.children}</DocsLayout>
 					</Show>
 				</main>
 				<Show when={!props.isError}>
-					<div class="prose prose-slate hidden w-56 shrink-0 pr-4 dark:prose-invert xl:block 2xl:w-72 dark:text-slate-300">
+					<div class="prose prose-slate dark:prose-invert hidden w-56 shrink-0 pr-4 xl:block 2xl:w-72 dark:text-slate-300">
 						<div class="custom-scrollbar sticky top-19 h-[calc(100vh-7rem)] overflow-y-auto">
 							<SidePanel />
 						</div>

osmium/src/ui/layout/contribute.tsx

@@ -10,15 +10,15 @@ export const Contribute: Component = () => {
 			</span>
 			<ol
 				role="list"
-				class="mt-1.5 flex list-none flex-col p-0 pl-2.5 text-sm prose-a:text-slate-600 prose-li:my-1"
+				class="prose-a:text-slate-600 prose-li:my-1 mt-1.5 flex list-none flex-col p-0 pl-2.5 text-sm"
 			>
 				<li class="pl-0">
-					<span class="[&>a>svg]:w-[15px] [&>a]:gap-x-1">
+					<span class="[&>a]:gap-x-1 [&>a>svg]:w-3.75">
 						<EditPageLink />
 					</span>
 				</li>
 				<li class="pl-0">
-					<span class="[&>a>svg]:w-[15px] [&>a]:gap-x-1">
+					<span class="[&>a]:gap-x-1 [&>a>svg]:w-3.75">
 						<PageIssueLink />
 					</span>
 				</li>