feat(admin): admin improvements #524

antfu · 2021-06-29T13:25:02Z

Updates

Basic component playground, close feat: playground and props components #79
Windi CSS Analysis via /admin/windicss
Config editor, close feat: admin settings browser / editor #281
Preview navigation to editor

Upstream PRs:

vercel · 2021-06-29T13:25:06Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/nuxtlabs/docus/8x4Kpg6h2wb6MFj7kXZeQW1KeWrm
✅ Preview: https://docus-git-feat-admin-nuxtlabs.vercel.app

Atinux · 2021-06-29T13:48:49Z

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

antfu · 2021-06-30T23:15:54Z

@Atinux Do we want to have an UI entry for windi analysis in the admin?

src/admin/api/functions/config.ts

Atinux · 2021-07-01T08:25:36Z

@antfu you can add an entry, we will see with the final design where we will show the output

antfu · 2021-07-06T14:51:49Z

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>

Tahul · 2021-07-06T15:19:20Z

Doing that right now; thanks @antfu 😄

Tahul

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

Tahul · 2021-07-07T18:13:04Z

src/admin/api/functions/config.ts

+
+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))


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 ?

Tahul · 2021-07-07T18:18:58Z

src/admin/api/functions/components.ts

+  if (req.method === 'GET') {
+    // List all files in components/
+    if (url === '/') {
+      const tree = dirTree(r('components'))


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.

WDYT @Atinux @pi0 ? 😄

You can use components:extend hook also to read list of discovered components and filter based on level property

Tahul · 2021-07-07T18:21:26Z

src/admin/app/pages/windicss.vue

@@ -0,0 +1,3 @@
+<template>
+  <iframe src="/admin/__windicss/" class="w-full h-full"></iframe>


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?

Indeed, maybe having something like https://tailwindcss.nuxtjs.org/examples/tailwindui could be nice to quickly know what classes we can use in development

But can be done in another issue/pr and be commented in the meantime

Tahul · 2021-07-12T16:47:12Z

Merging this to release 0.9.0 ; changes should be pushed in another PR / branch. 😄

I reported open comments there:
https://github.com/docusgen/admin/issues/1

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: Yaë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: Yaë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: Yaë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: Yaë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>

antfu added 4 commits June 28, 2021 21:54

wip: components playground

d2f1e99

fix: switch to nuxt module for components preview

e66d3b9

refactor(admin): modulize preview

6551c10

refactor(admin): folder structure

63db4af

chore: typo

113bcd6

vercel bot deployed to Preview – nuxtjs-with-docus June 29, 2021 13:34 View deployment

vercel bot deployed to Preview – docus June 29, 2021 13:34 View deployment

antfu added 2 commits July 1, 2021 06:52

feat(admin): embed windicss-analysis

90a3468

chore: update notes

cbfb219

vercel bot deployed to Preview June 30, 2021 23:13 View deployment

antfu changed the title ~~feat(admin): init components playground~~ feat(admin): admin improvements Jun 30, 2021

feat: config tab

3c2ff4a

vercel bot deployed to Preview July 1, 2021 01:02 View deployment

feat: preview navigate to editor

08e806a

vercel bot deployed to Preview July 1, 2021 01:32 View deployment

Atinux reviewed Jul 1, 2021

View reviewed changes

src/admin/api/functions/config.ts Outdated Show resolved Hide resolved

Atinux reviewed Jul 1, 2021

View reviewed changes

src/admin/api/functions/config.ts Outdated Show resolved Hide resolved

antfu added 3 commits July 1, 2021 16:56

fix(admin): reuse utils instance for windi analysis

0917efb

chore: update deps

e3df45b

feat(admin): entry for windi analyzer

49ef13e

vercel bot deployed to Preview July 6, 2021 08:30 View deployment

Merge branch 'dev' into feat/admin

eb509c8

vercel bot deployed to Preview July 6, 2021 08:39 View deployment

chore: clean up

cb7eae8

vercel bot deployed to Preview July 6, 2021 14:44 View deployment

Apply suggestions from code review

5e3c89b

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>

vercel bot deployed to Preview July 6, 2021 14:52 View deployment

🚨 (lint) no-console fix

1822c7a

vercel bot deployed to Preview July 7, 2021 18:15 View deployment

Tahul reviewed Jul 7, 2021

View reviewed changes

antfu added 2 commits July 12, 2021 17:53

Merge branch 'dev' into feat/admin

a74c1a4

chore: cleanup vite fix

0407a30

vercel bot deployed to Preview July 12, 2021 09:57 View deployment

Tahul merged commit dc0caa0 into dev Jul 12, 2021

Tahul deleted the feat/admin branch July 12, 2021 16:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(admin): admin improvements #524

feat(admin): admin improvements #524

antfu commented Jun 29, 2021 •

edited

vercel bot commented Jun 29, 2021 •

edited

Atinux commented Jun 29, 2021

antfu commented Jun 30, 2021

Atinux commented Jul 1, 2021

antfu commented Jul 6, 2021

Tahul commented Jul 6, 2021

Tahul left a comment

Tahul Jul 7, 2021

Tahul Jul 7, 2021

pi0 Jul 7, 2021

Tahul Jul 7, 2021

Atinux Jul 7, 2021

Atinux Jul 7, 2021

Tahul commented Jul 12, 2021 •

edited

		@@ -0,0 +1,3 @@
		<template>
		<iframe src="/admin/__windicss/" class="w-full h-full"></iframe>

feat(admin): admin improvements #524

feat(admin): admin improvements #524

Conversation

antfu commented Jun 29, 2021 • edited

Updates

Upstream PRs:

vercel bot commented Jun 29, 2021 • edited

Atinux commented Jun 29, 2021

antfu commented Jun 30, 2021

Atinux commented Jul 1, 2021

antfu commented Jul 6, 2021

Tahul commented Jul 6, 2021

Tahul left a comment

Choose a reason for hiding this comment

Tahul Jul 7, 2021

Choose a reason for hiding this comment

Tahul Jul 7, 2021

Choose a reason for hiding this comment

pi0 Jul 7, 2021

Choose a reason for hiding this comment

Tahul Jul 7, 2021

Choose a reason for hiding this comment

Atinux Jul 7, 2021

Choose a reason for hiding this comment

Atinux Jul 7, 2021

Choose a reason for hiding this comment

Tahul commented Jul 12, 2021 • edited

antfu commented Jun 29, 2021 •

edited

vercel bot commented Jun 29, 2021 •

edited

Tahul commented Jul 12, 2021 •

edited