dbd615841c
* Refactor blog posts and enhance UI components - Removed titles from md blog posts and show them as title - Updated the layout of the documentation sidebar to include a blurred background. - Improved the styling of the login and registration forms for better user experience. - Enhanced the pricing page layout and card designs for clarity and visual appeal. - Added a blurred background component to several pages for a modern aesthetic. - Updated the Navbar and footer with new links and improved styling. - Introduced new color themes in Tailwind configuration for better branding. - Added new images for the PocketHost logo and promotional materials. * refactor(Splash): remove redundant sections and improve layout * fix(login): center InstanceGeneratorWidget within the container * Latest update * fix(blog): Improve visibility * fix(NavbarMenu): Adjust dropdown z-index for better visibility * fix(Creator): Update cancel button link to redirect to dashboard instead of Splash * feat(InstanceList): add search, filter and sorting * fix(Main): z index and styling issues * fix(InstanceList): power on should be first when sorting * enh(InstanceList): display cname if defined, and allow search by cname * style(404): update UI to match other pages * style(LoggingInner): update styles to match color palette * style(Paywall): missing top padding * style(versionPage): change width to match other pages * fix(InstancesLayout): fix logs UI overflow * style(docsSideBar): Separate scroll between sidebar and content, also stick sidebar to top * style(docsSidebar): fix weird pad in menu-title * clean(blog): remove some comment code * enh(blog): add article name to title in head * feat(footer): add link to / from footer * style(promoBanner): fix padding on mobile * style(dashboard): make mobile friendly * enh(instances): close sideBar on a link click * fix(InstanceList): fix performance issues on mobile (lag) * feat(InstanceList): add asc and desc sorting * fix(InstanceList): add tabIndex to sortDirection * style(prose): fix margin on terms and privacy policy * style(InstanceList): fix pad * style(InstancePages): fix content overflow on multiple pages * style(docs); make sidebar mobile friendly * fix(sideBar): bug with svelte * fix(InstanceList): make asc sort default * fix(NavBar): remove dashboard link on > md * style(AlertBar): improve styles * style(splash): simple landing page * fix(mobile): fix small bugs in mobile * fix(InstanceList): asc and desc icon mixed * style(Logs): add mono font to logs * fix(Splash): add more decimal points to uptime * style(Logs): add mono font to fullscreen logs * fix(Splash): cta retriggers the animation on hover * fix(InstanceList): cards had toomuch gap when search * style(Instance Sidebar): match px with head * style(footer): move elements closer on md * style(blogFooter): update colors to match design * fix(Splash): swap gh with shields due to rate limit --------- Co-authored-by: Ben Allfree <ben@benallfree.com>
PocketHost UI
Built with SvelteKit and Typescript
Description about PocketHost goes here!
Developing Locally
To run this project, navigate to the /packages/dashboard folder and run pnpm dev.
It will start up the server here: http://127.0.0.1:5173/ and now you're ready to code!
Routing
There is a file called public-routes.json that controls which URLs are accessible to non-authenticated users. Any public facing page needs to have its URL added to this list. Otherwise, the authentication system will kick in and send them to the homepage.
User Management
This app uses Svelte Stores to track the user's information. At the top is the globalUserData store. This contains everything about the user that comes from Pocketbase, including their JWT Token.
Derived User Values
There are additional derived values that are useful for showing and hiding components across the site. The first one is isUserLoggedIn. This one will return a true or false depending on the state of the logged-in user. It is dependent on the email property in the Pocketbase response.
The second derived value is isUserVerified. This will return a true or false boolean depending on if their Pocketbase account has been verified via the email they got when they initially registered.
An example of showing or hiding components can be found with the <VerifyAccountBar> component, that prompts the user to make sure to verify their account before continuing. The code looks roughly like this:
<script>
import { isUserLoggedIn, isUserVerified } from '$util/stores'
</script>
{#if $isUserLoggedIn && !$isUserVerified}
<YourComponentHere />
{/if}
This particular example will only render the component if the user is logged in, and their account has not been verified. Notice the $ symbol as well, this is required for Svelte Stores when using Store values in the UI.
If you need to use these values in a normal javascript/typescript file instead, you can utilize Svelte's get() method instead.