Decouple Skeleton from SvelteKit

[endigo9740]

Expand Skeleton's support and instruction for any framework where Svelte and Tailwind can be used. Including, but not limited to:

• Vite - via Document using Skeleton with Vite/Svelte #83 - works with v0.32.19+
• Astro - via Document using Skeleton with Astro #93 - works with v0.32.19+
• Routify - (coming soon)
• Client-side only or Micro-Framewoks:
  • Symphony for PHP - via Support for Webpack Encore #85 (need more testing on this)
  • (Django/Flask for Python, ..., others?)
• (welcoming other suggestions here)

[niktek]

New Svelte project with TS, added Skeleton and commented out the exports from within node_modules/.../index.js, these are the ones that error out:

export { default as CodeBlock } from "./CodeBlock/CodeBlock.svelte"; // fails to resolve highlight.js
export { default as LightSwitch } from "./LightSwitch/LightSwitch.svelte"; // refers to $app/env for browser
export { default as Menu } from "./Menu/Menu.svelte"; //refers to $app/stores

[endigo9740]

Ok, not too bad. Highlight.js is a required dependency for CodeBlocks. Follow the instruction on the doc to resolve that:
https://skeleton.brainandbonesllc.com/utilities/codeblocks

LightSwitch uses the following to determine if the app is loaded in the browser, a lifecycle hook essentially:
import { browser } from "$app/env";

Switching to a Svelte supported lifecycle hook may be enough to resolve that. Something like onMount:
https://svelte.dev/tutorial/onmount

That just leaves the menu issue mentioned in the original post. Perhaps we could use an onDestory here:
https://svelte.dev/tutorial/ondestroy

This seems reasonable. May require a bit of testing but I think we can make it happen!

[endigo9740]

@JensPfeifle has provided a great PR to help with the first half of this ticket.

#82

This prunes the SvelteKit-specific features from either component per the suggestions above. However, I'll delay the merge until we can also document and provide instructions for how to install and setup Skeleton for other tools like Vite, Astro, etc.

The partial (but probably incomplete) list of those is in the original post above. I welcome anyone's instructions for documenting the process for each of these tools. Post them here and I'll find a means to merge it all together and update the homepage when ready.

[endigo9740]

Track progress on Vite/Svelte instruction here:
#83

[endigo9740]

FYI: #86

CodeBlock will be disabled from the next release until further notice. We'll revisit a different way to implement this and reintroduce in a future update.

See also: #82

This will ensure issues with the Menu and LightSwitch no longer affect Svelte apps that do not use SvelteKit.

[endigo9740]

Documentation for Astro is ready, per: #93

[endigo9740]

Per the original post, #83 and #93 have been closed as these changes have been merged from Dev.

We're still needing proper QA testing for the new updates to the docs. This covers:

• Homepage - mainly "Getting Started" install instructions (each tab)
• Guide sections (Tailwind, Themes, Styles, etc)
• Newly introduce "Astro" guide section

Areas of focus will be the text copy messaging (it's it clear and concise), plus spelling/grammar/etc.

[bkcsfi]

Hi,

Sveltekit just changed $app/env to $app/environment, this broke my app because LightSwitch.svelte version 0.0.1 refers to $app/env

please disregard, upgrading to 0.32.19 fixed this. thanks

[endigo9740]

Yeah, the LightSwitch underwent a fairly large change in 0.32.19 that would correct this. Sorry for the confusion @bkcsfi

[endigo9740]

I'm feeling pretty confident about the three primary frameworks we support right now, so I'm going to go ahead and close this issue. If requests come in for Routify or similar we can always generate new tickets in the future.