From 6b03cd9af02f65e5dfedb9022a30c3d572a5b851 Mon Sep 17 00:00:00 2001 From: krutoo Date: Thu, 2 Apr 2026 19:38:58 +0500 Subject: [PATCH] fix: main content unnecessary scroll --- README.md | 7 ---- docs/docs/runtime/entrypoints.story.mdx | 21 ++++-------- docs/docs/showcase/customization.story.mdx | 34 +++++++++++++------ .../components/layout/layout.m.css | 3 +- 4 files changed, 31 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index d20c115..a9d62df 100644 --- a/README.md +++ b/README.md @@ -139,11 +139,8 @@ Create sandbox entrypoint in your project, for example in `./src/sandbox.jsx`: ```jsx import { createRoot } from 'react-dom/client'; -// util for validate story-modules import { filterValidStories } from '@krutoo/showcase/runtime'; -// component for showing current story import { SandboxApp } from '@krutoo/showcase/runtime-sandbox'; -// "stories entrypoint" (trough alias provided by your bundler) import foundStories from '#found-stories'; // render your current story to the root element @@ -162,13 +159,9 @@ Create showcase entrypoint in your project, for example in `./src/showcase.jsx`: ```jsx import { createRoot } from 'react-dom/client'; -// util for validate found stories import { filterValidStories } from '@krutoo/showcase/runtime'; -// standalone component for showing documentation with all stories import { ShowcaseApp } from '@krutoo/showcase/runtime-showcase'; -// "stories entrypoint" (trough alias, more on that later) import foundStories from '#found-stories'; -// showcase app styles bundle import '@krutoo/showcase/showcase.css'; // render documentation app wherever you want diff --git a/docs/docs/runtime/entrypoints.story.mdx b/docs/docs/runtime/entrypoints.story.mdx index 94f2a9e..44c4793 100644 --- a/docs/docs/runtime/entrypoints.story.mdx +++ b/docs/docs/runtime/entrypoints.story.mdx @@ -17,17 +17,14 @@ Create sandbox entrypoint in your project, for example in `./src/sandbox.jsx`: ```jsx import { createRoot } from 'react-dom/client'; -// util for validate story-modules import { filterValidStories } from '@krutoo/showcase/runtime'; -// component for showing current story import { SandboxApp } from '@krutoo/showcase/runtime-sandbox'; -// "stories entrypoint" (trough alias provided by your bundler) import foundStories from '#found-stories'; +const { validStories } = filterValidStories(foundStories); + // render your current story to the root element -createRoot(document.getElementById('root')).render( - , -); +createRoot(document.getElementById('root')).render(); ``` ### Showcase entrypoint @@ -40,21 +37,15 @@ Create showcase entrypoint in your project, for example in `./src/showcase.jsx`: ```jsx import { createRoot } from 'react-dom/client'; -// util for validate found stories import { filterValidStories } from '@krutoo/showcase/runtime'; -// standalone component for showing documentation with all stories import { ShowcaseApp } from '@krutoo/showcase/runtime-showcase'; -// "stories entrypoint" (trough alias, more on that later) import foundStories from '#found-stories'; -// showcase app styles bundle import '@krutoo/showcase/showcase.css'; +const { validStories } = filterValidStories(foundStories); + // render documentation app wherever you want createRoot(document.getElementById('root')).render( - , + , ); ``` diff --git a/docs/docs/showcase/customization.story.mdx b/docs/docs/showcase/customization.story.mdx index 8efb452..44111fc 100644 --- a/docs/docs/showcase/customization.story.mdx +++ b/docs/docs/showcase/customization.story.mdx @@ -171,16 +171,22 @@ You can configure routing of your stories by **router** and **routing** options. #### Option `router` By this option you can configure how to deal with `window.location` if you want. -Default router is `BrowserRouter` that connects to `window.location`. - -`BrowserRouter` can be exported and configured: +Default router is `BrowserRouter` from `@krutoo/utils` that connects to `window.location`. ```jsx -import { ShowcaseApp, BrowserRouter } from '@krutoo/showcase/showcase-runtime'; +import { ShowcaseApp } from '@krutoo/showcase/showcase-runtime'; +import { BrowserRouter } from '@krutoo/utils/router'; + +const router = new BrowserRouter(); - +; ``` +`BrowserRouter` can also be used in Node.js (or other server runtime) for SSG or SSR, see the [docs](https://krutoo.github.io/utils/?path=/router/browser-router). + +You also can implement your own router to work with url hash or for example +even to not work with current location at all and store all in memory. + #### Option `routing` This option controls how to: @@ -189,14 +195,18 @@ This option controls how to: - define location by story - define story sandbox URL -By default `ShowcaseApp` uses `QueryRouting` that looks for `?path` parameter in location. +By default `ShowcaseApp` uses "query routing" that looks for `?path` parameter in location. -If you want to make pathname-based routing you can use `PathnameRouting`: +Query routing rules is provided by `QueryRouting` class. + +If you want to make pathname-based routing you can use `PathnameRouting` class: ```jsx -import { ShowcaseApp, PathnameRouting } from '@krutoo/showcase/showcase-runtime'; +import { PathnameRouting, ShowcaseApp } from '@krutoo/showcase/showcase-runtime'; + +const routing = new PathnameRouting(); - +; ``` It also of course possible to provide your own implementation. @@ -211,9 +221,11 @@ Notice that for pathname-based routing you also need to either: If you want to publish your showcase to non root path you can provide `publicPath` option to `PathnameRouting`: ```jsx -import { ShowcaseApp, PathnameRouting } from '@krutoo/showcase/showcase-runtime'; +import { PathnameRouting, ShowcaseApp } from '@krutoo/showcase/showcase-runtime'; + +const routing = new PathnameRouting({ publicPath: '/hello/' }) - +; ``` For example, `docs` repo published to GitHub Pages will have url `github.com//docs` diff --git a/src/runtime-showcase/components/layout/layout.m.css b/src/runtime-showcase/components/layout/layout.m.css index 3c4d331..16e6a71 100644 --- a/src/runtime-showcase/components/layout/layout.m.css +++ b/src/runtime-showcase/components/layout/layout.m.css @@ -78,7 +78,8 @@ } .presetFixedNav .main { - margin-top: var(--showcase-ui-header-height, 64px); + /* IMPORTANT: padding-top instead margin-top because of height without scroll */ + padding-top: var(--showcase-ui-header-height, 64px); } .presetFixedNav .aside + .main {