-
Notifications
You must be signed in to change notification settings - Fork 161
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(admin): admin improvements #524
Conversation
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/nuxtlabs/docus/8x4Kpg6h2wb6MFj7kXZeQW1KeWrm |
Nice work @antfu I believe we shall have a way in the preview panel to be able to edit the component props visually, like https://5ccbc373887ca40020446347-gazlgmdsbi.chromatic.com/?path=/story/button--basic |
@atinux Do we want to have an UI entry for windi analysis in the admin? |
@antfu you can add an entry, we will see with the final design where we will show the output |
I think we have reach a stage for this PR. Would be great if you could start review it. |
Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
Doing that right now; thanks @antfu 😄 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Excellent work Anthony, thank you a lot for all these efforts on the admin!
I can't wait to get users feedback on this work, this is amazing! 😄
I don't know if you've been in contact with @farnabaz recently, but he has made great progress on the syntax highlighting module, you can see it here: https://github.com/docusgen/syntax-highlight
|
||
export default <Middleware>async function configHandler(req) { | ||
const root = r() | ||
let path = [r('nuxt.config.ts'), r('nuxt.config.js')].find(i => fs.existsSync(i)) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It is nice to see we can edit nuxt.config from there too.
I think the point of that config editor is to edit docus.config
instead.
Should only need to update that reference and/or to add a new route for it. 😄
Maybe we could support both, wdyt @atinux ?
if (req.method === 'GET') { | ||
// List all files in components/ | ||
if (url === '/') { | ||
const tree = dirTree(r('components')) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It will most likely come in a second step, but I think we need these functions to go a little bit deeper concerning components detection.
I like the idea of having a distinction between "user-level" components and "project-level" ones.
But I think we want users to discover all the components they have access to from that UI, and so I think we should try to refer to .nuxt/components/index.js
(this is generated once the Nuxt server starts) to get a list of the current project components.
We could show the editor in read-only mode for these components that are outside the user-level scope, and ask to the user if they want to duplicate it in their own components/
directory once he tries to edit it?
I know that @pi0 told me .nuxt
will be removed in Nuxt 3, so maybe we could postpone that task an open an issue about this instead of searching for a fix in this branch.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can use components:extend hook also to read list of discovered components and filter based on level property
@@ -0,0 +1,3 @@ | |||
<template> | |||
<iframe src="/admin/__windicss/" class="w-full h-full"></iframe> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This seem to be outside of this project scope, but the Windi scanning seem to take a little while and I think it could be great to have a loader for that?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indeed, maybe having something like https://tailwindcss.nuxtjs.org/examples/tailwindui could be nice to quickly know what classes we can use in development
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
But can be done in another issue/pr and be commented in the meantime
Merging this to release 0.9.0 ; changes should be pushed in another PR / branch. 😄 I reported open comments there: Thanks for this amazing work 😄 🙏 |
* 📝 (docs) update docs; add algolia docsearch in configuration * fix(layout): fix parents order in layout inheritance * fix: add fixed width to mobile aside (#515) * fix: multiple regressions (#516) * fix: margins for docs content * fix: multiple issues * feat: enhanced i18n (#517) * fix(Link): support locale path & improve attrs * fix(contentLocalePath): handle locale prefix * 🐛 (link) fix blank reeference (props.blank) * 🔖 (0.8.6) release 0.8.6 * 🐛 (prose-code-inline) allow line break (#519) * fix: scrollspy & scroll to top on click for Releases (#522) * fix: restrict inline syntax (#526) * fix: restrict inline syntax * fix: allow inline syntax inside span & links * feat: auto collapse when click on another section (#527) * init pr * ✨ (aside) restore collapse state on section toggle Co-authored-by: Yaël GUILLOUX <yael.guilloux@gmail.com> * 🐛 (nuxtjs.org) small responsive/sizing fixes * fix: prose nested lists (#529) * fix: prose nested lists * cleanup * fix: multiple style issues (#523) * fix: code block issues * update filename shortcut * feat: support slot to show between children (#525) * feat: support slot to show between children * fix: do not add `between` slot between inline nodes * feat: inline SVG logo on production (#528) * feat: inline svg icon on production * fix: import * chore: cleanup * feat: improve logo management, add default Logo component and shortcuts * chore: remove @nuxtjs/svg * chore: simplify markup Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> * feat: SandBox Component (#518) * feat: SandBox Component * chore: minor fix * feat: init Tabs component; refactor CodeGroup * update Sandbox UI Co-authored-by: Sergey Bedritsky <sergey.bedritsky@gmail.com> * 📦 (deps) upgrade dependencies * 🐛 (aside) fix aside navigation collapsing * 🐛 (aside) fix social icons spacing at the right place * 🔖 (0.8.7) release 0.8.7 * 📦 (deps) upgrade deps (nuxt-image) * 🐛 (sandbox) fix sandbox component * feat: add custom scrollbar (#534) * fix: update mobile toc overflow from scroll to auto (#532) * 🔖 (0.8.8) release 0.8.8 * 📝 (deployment) update deployment to add npm cache * 🔖 (0.8.9) release 0.8.9 * 🐛 (aside) hover color only in large on aside nav item * init AppBanner (#536) * init AppBanner * ✨ (banner) edit defaults * 📝 (config) update configuration with banner arg Co-authored-by: Yaël GUILLOUX <yael.guilloux@gmail.com> * 🔖 (0.8.10) release 0.8.10 * 🔖 (0.8.11) release 0.8.11 * 🐛 (docs) update docs links (avoid errors while building..) * fix: Releases content overflow (#537) * fix: Releases content overflow * 🐛 (releases) only apply overflow-x-hidden Co-authored-by: Yaël GUILLOUX <yael.guilloux@gmail.com> * 🐛 (content) fix content links avoiding a longer build * 🔖 (0.8.12) release 0.8.12 * chore: reduce UX issues (lazy loading and jump) * fix: currentNav updated after page change Also disabled smart prefetch for lazy components in the meantime * chore: add isAsync too * fix: revert back to old collapse logic (#539) * ⏪ (collapse) revert back to old collapse logic * 🐛 (navigation) preserve uncollapsing for first visited category * 📌 (deps) pin vue to 2.6.14 * 🐛 (twitter) fix twitter component import * fix: set variables on SSR from asyncData * 🔖 (0.8.13) release 0.8.13 * 🔖 (0.8.14) release 0.8.14 * fix: resolve flash issue using render fucntion instead of template (#541) * feat: Docus loading screen * 🔖 (0.8.15) release 0.8.15 * fix: tokenise blogpost (#540) * feat: change slot definition (#535) * feat: change slot definition * feat: front matter style data * chore: update docs * docs: fix docs * chore: refactor data tokenizer * fix: typo * fix: invalid line detection * feat: use remark-github (#538) * feat(admin): admin improvements (#524) * wip: components playground * fix: switch to nuxt module for components preview * refactor(admin): modulize preview * refactor(admin): folder structure * chore: typo * feat(admin): embed windicss-analysis * chore: update notes * feat: config tab * feat: preview navigate to editor * fix(admin): reuse utils instance for windi analysis * chore: update deps * feat(admin): entry for windi analyzer * chore: clean up * Apply suggestions from code review Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> * 🚨 (lint) no-console fix * chore: cleanup vite fix Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> Co-authored-by: Yaël GUILLOUX <yael.guilloux@gmail.com> Co-authored-by: Ahad Birang <farnabaz@gmail.com> Co-authored-by: Sergey Bedritsky <sergey.bedritsky@gmail.com> Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
Updates
/admin/windicss
Upstream PRs: