histoire-dev / histoire-dev/histoire

New story type or option : vue standalone page

Open
#606 1 comment 2 reactions 0 assignees View on GitHub
enhancement: to triage
Dominant language
TypeScript
Stars
3.6k
Forks
212
PR merge metrics
No merged PRs in 30d

Description

### Clear and concise description of the problem

Hey 🤙 !

First, the objective of my idea : more flexibility & freedom in the redaction of the stories.

People using Histoire in my job are not all devs, far from it. Once deployed, the documentation must not only be technical, but it must also be displayed using the product designer rules, be understable by all, and, most important, stay simple.

In https://histoire.dev/guide/vue3/docs.html#documentation, we can see that Histoire provide a way to create standalone pages, that's great ! But sadly, essentialy in markdown, that's all.

Would that be possible to create standalone pages in Vue ? The result would be the same as markdown stories, but using Vue instead.

Thanks in advance for your help 😉

### Suggested solution

Only a functional solution, I'm afraid :

First, the file format would be :

- Markdown standalone page : `Introduction.story.md` (no change here)
- Vue standalone page : `Introduction.story.vue` (here we usually starts to use the `` component)

And in `Introduction.story.vue` :

`` component **new option** :
- `standalone` , a boolean that totally disable :
- the right side panel
- the "responsive" option
- the "background" option
- the "text direction" option
- the "open in new tab" option

### Alternative

_No response_

### Additional context

I created my ideas in the discussions tab, but since I didn't have any answers, I'm trying here in the issues. If needed :

- https://github.com/histoire-dev/histoire/discussions/558
- https://github.com/histoire-dev/histoire/discussions/605

### Validations

- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) that requests the same feature to avoid creating a duplicate.

Contributor guide

Open the contributing guide

Research direction

Start with the Vue documentation section at histoire.dev/guide/vue3/docs.html#documentation and the existing Introduction.story.md standalone-page behavior. Trace how an Introduction.story.vue file and its component are handled; done means Vue standalone pages work while the listed side-panel, responsive, background, text-direction, and new-tab options are disabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.