Ideas for Improving Iles: Enhancing Usability and Expanding Features

**Sharing some ideas (in no particular order) for Iles while they’re fresh in my memory (while working on the PR for Vite-5 update for Iles) for community feedback:**

My need for Iles is based on these facts, I keep validating my understanding, so please share your ideas & opinions: :green_heart:
- Vitepress (one of Iles' inspirations) supports only markdown-based authoring of pages with strong opinionated theming, ideal for the best documentation site and more. Using Vue SFCs for pages is not really on their [roadmap](https://github.com/vuejs/vitepress/discussions/2774), as far as I’ve checked. Even if it is, it might still continue to be SPA-first with MPA (well, technically it's not the traditional mpa defn, rather it's no-js way) via config like now.
- Iles and Astro (one of Iles' inspirations) who love MPAs with islands architecture have many differences regarding features, architecture, and roadmap, but they **primarily** differ in **component authoring style** (`.astro` vs `.vue`).
- Users like me prefer HTML-based templating with Vue SFCs (a personal choice) over HTML-based templating with little-jsx-mixed-syntax like in Astro SFCs. Last I checked, Astro will likely continue using Astro SFCs for authoring, with no plans to support other SFC formats for `layouts` and `pages` in Astro apps.
- Both Vitepress & Astro lets us use Vue SFCs in the `components` folder with Astro supporting all other major JS frameworks too.
- Iles lets us build our app with both Vue SFCs+markdown for `layouts, pages, components`, custom designing our theme (look n feel) with batteries included, especially ideal for Vue beginners looking for a nice SSG MPA setup, workflow, DX.

### Beginner-Friendly Iles Documentation
- SSR MPAs are generally beginner-friendly with HTML + assets (browser cache does a good job) compared to SSR SPAs with similar prerendered HTML + assets and using JSON payloads and a client-side router.
- With Iles’s current SSG capability, it has huge potential to fill the gap for users who have decided to stick with MPAs for their simple/complex apps, and paves a nice pathway for Vue beginners to go Vitepress, Nuxt, Quasar and beyond.
- Our documentation can be redrafted to be beginner-friendly for users looking for SSG capabilities after learning Vue.
- Vue docs have a dedicated section for SSG under [different ways of using Vue](https://vuejs.org/guide/extras/ways-of-using-vue.html#jamstack-ssg), which, in my opinion, should be at the top of the sidebar. The section already mentions VitePress & Astro; it would be very beneficial to have Iles in there too.
- Standard Web APIs - Highlight the usage of anchor tags and other standard web APIs (fetch, notification, history, geolocation, etc.) in the docs.
- `pnpm` as default + `npm` & `yarn` (simple tabs way) in code blocks in docs.
- Add an Iles “How-to” guide on adding Iles on top of a vanilla Vite-powered Vue app. Apart from installing Iles, a few additional setups are required, such as `iles.config.ts`, `site.ts`, and tsconfig tweaks. Can this be achieved via CLI?

- Use non-Vue islands without the mandatory client directive.
- [`index.html` shell](https://github.com/ElMassimo/iles/issues/136) to easily add links/scripts from CDN, with an explanation of Client Scripts and its advantages. This shell is very useful for beginners.
- Is our user community expecting React as a supported JS framework? Astro provides really good support for it, and react/preact uses love JSX based templating, and would probably settle for using Astro.
- [Auto-Import APIs](https://github.com/ElMassimo/iles/issues/243) - Ship [auto import](https://github.com/ElMassimo/iles/issues/190) with Vue preset pre-included with [unplugin-auto-import](https://github.com/unplugin/unplugin-auto-import) instead of the need to `import {ref} from ‘vue’` etc when authoring the app. Auto-Import components already work great. There is an [open PR](https://github.com/ElMassimo/iles/pull/199) on this.
- It would be nice to have `the-vue-point` as a separate repo, very helpful for beginners. Currently, we have to clone the full mono-repo to test it out.
- Examples with both JavaScript and TypeScript flavors (similar to Svelte docs), very helpful for users who haven’t tried TypeScript yet.
- Config to [turn off](https://github.com/ElMassimo/iles/issues/247) auto-installing Iles modules, or keep it turned-off by default, and let user opt-in for auto-installing.
- Interactive CLI for scaffolding with ESLint baked in.
- Expand support for `.astro` component authoring. Helpful for any Astro users who are interested in migrating to Iles’s Vue-based authoring.
- Vite plugin ordering - [GitHub Issue](https://github.com/ElMassimo/iles/issues/180) with the new way (not so new now) and an easy abstraction to make it easier within Iles.
- Examples of blogs, landing pages, especially data pulled from various headless CMSs like WordPress (headless way), Storyblok, Strapi, Sanity, Prismic, etc.
- Dedicated pages for the usual - Recipes, Showcases, Branding, Sponsors; maybe on the https://ilesjs.org domain (I have locked it with a single-digit cost for a year for now).
- Community reach - Netlify, Vercel, Storyblok, etc., and other open-source patrons.

`client:visible` - Iles doesn’t lazy-load dependencies as part of lazy-hydration while Astro does (JS downloading in the network tab when scrolling to the island + hydrating). Is there any advantage to the Astro way? For an interesting discussion, refer to this Discord [thread](https://discord.com/channels/1198693588196925541/1198966822733615156/1199121476650012752).

### Image Optimization
- A special page for image optimization as it’s super crucial for any app.
- unjs/ipx in addition to the current Vite plugin?

### Data Fetching & Client Scripts
- Dedicated `Data Fetching` page with commonly used flavors, including $fetch (unjs/ofetch), which is shipped with Iles.
- Best practice examples of commonly used client scripts in any site and optimizations of them.
- Here is a quick list (I confess I asked ChatGPT for this list :laughing:):
- Analytics/tracking (Google Analytics)
- Error monitoring/reporting (Sentry, LogRocket)
- SEO/marketing (Google Tag Manager)
- Advertisement/monetization (Google AdSense)
- Bookings (calendar-based)
- Social media integrations (sharing, live feeds)
- Live chat (Hotjar)
- A/B testing (Google Optimize)
- Personalization (Optimizely)

### Crawler by Default with getStaticPaths for Custom/Finer Control
- Like Nuxt Generate Crawler, maybe a nice idea for a new unjs/crawler package?
- With Vue’s `script setup` as the recommonded way and the norm, adding a second script tag with a default export inside it seems unintuitive, at least for beginners.
- Also, Vue Language Tools or ESLint (I need to confirm) keeps moving imports within the `script` block into the top `script setup` block (or vice versa), which is a different issue.

### [Abstracting Suspense](https://github.com/ElMassimo/iles/pull/178)
- Using Suspense with components using `script setup` (which is the recommended norm) with a top-level `await` (data fetching on the client side) can get tricky, especially for beginners.

### Site Manager Page (site.ts) & Basic Components
- It would be nice to have a Site Manager page in the default template or added via a module.
- The idea is similar to how some CMSs work where the user defines what pages (Vue/markdown) they want in their site and how they are nested, along with adding metadata to them.
- Iles on the node-end could create/rename/move the Vue or markdown files inside the pages folder, and we add the nav as well in the `site.ts` like in our docs [repo](https://github.com/ElMassimo/iles/blob/main/docs/src/site.ts#L20).
- Should `site.ts` be outside the `src` folder (project root)?
- By default, have this page not included in the build; if we use Nitro, we can exclude this route via Nitro config.
- Opens at `https://localhost:5173/site` (or) `https://localhost:5173/site-manager`, etc.
- In fact, this could be done via Vue DevTools, but managing site info really feels more intuitive as a normal webpage opening within the app, and easily accessible in the navbar as a link during development.
- Multiple pages is a normal thing in the internet and components like Navbar & Button are used in any site. These essential components can be innocent-looking, but the engineering of these components (features + accessibility) can be huge. It would be great to ship a set of basic components via an Iles module for such essential components with vanilla CSS & without any css/component framework lock-in.

### UnoCSS & TailwindCSS
- Apart from installing the dependency, there is generally a second or third step; we could have a module cover this part.
- Quick start templates with different flavors with basic setup.

### Component Libraries
- Using component libraries is a great start if the user is already familiar with them.
- Maybe a new UnoCSS/TailwindCSS-based IlesUI component library (could be a Nuxt UI port) for the whole Vue ecosystem :smile:
- Apart from installing the dependency, there is generally a second or third step; we could have a module cover this part.
- Quick start templates with different flavors with basic setup.
- Especially the usage of `getCurrentInstance` to handle using libraries like [vue-i18n](https://github.com/ElMassimo/iles/issues/207) or [vuetify](https://github.com/ElMassimo/iles/issues/259), maybe via a global (composable?) vue-i8n/vuetify-like instance across all islands. Some libraries like Vuetify rely on global injects, which generally requires special care with Iles.

### Custom Themes
- Unlike VitePress, which has theming built-in, with iles, we must craft our own UI, so maybe a how to create a theme with the basic set of commonly used components?
- This could even expand to a theme library with free, freemium & premium flavors if adoption is good.

### Expand Markdown Authoring Support
- Support for MDC authoring, inspired by the [Nuxt](https://github.com/nuxt-modules/mdc) way.

### Vue Reactivity, Pinia for Client-Side Reactivity
- We are already part of the Vue community, so there’s no excuse for not taking advantage of Vue reactivity & Pinia.
- For client-side reactivity/state, inside islands, not with the outer-app used during HMR-powered development.
- Here is an example of a Svelte [component](https://github.com/Pinegrow/pizzeria-astro-vue/blob/main/src/components/FloatingCart.svelte) using Pinia & a Vue composable. I personally would stick to Vue SFC authoring ;-)
- This is a highly underutilized Vue feature (Vue reactivity without the template compiler for client-side reactivity).

### Vue DevTools - Developer Experience
- Vue DevTools Next shows Pinia stores even when used in a Svelte component.
- Nuxt DevTools displays a timeline for Vue composables; I will add this as a feature request for Vue DevTools Next.
- Site configuration, OG image, and Robots via Vue DevTools, similar to the NuxtSEO module.

### Adoption of UnJS
- We already use Unhead; there are many more nice [packages](https://unjs.io/packages?q=&order=1&orderBy=title) that provide similar benefits as Iles using Vite.
- Go beyond SSG - consider Iles SSR with UnJS/Nitro.
- Image processing - explore UnJS/ipx in addition to the current Vite plugin.

### Guide for contributors
- Could be quite basic.
- I have been having difficulty in testing my external Iles project by pnpm linking the iles-clone when working on an PR.
- I had to copy my projects into the playground folder currently to make it work without any [issue](https://github.com/ElMassimo/iles/issues/263).
- Anyone had any success with this, please share your expertise, its probably a pnpm/mon-repo thingy.

### Other ideas :innocent:
- Nuxt-like Layers and sharing components & composables across Iles Projects :wink:
- Explore the idea of [Nested Islands](https://github.com/ElMassimo/iles/issues/165) :sweat_smile:
- Any ex-gridsome features? Gridsome was awesome but didn't move to Vue 3?
- Consider implementing Qwik-like [Resumability](https://www.builder.io/blog/resumability-vs-hydration) in Iles :fire:
- Please share your ideas, thanks bunch!