From 961c075bcdd62578a4700a1ddde2013a62f32758 Mon Sep 17 00:00:00 2001 From: Tony Lea Date: Wed, 21 Aug 2024 19:11:51 -0400 Subject: [PATCH] adding update for styles --- content/docs/features/themes.md | 29 ++++- content/docs/guides/about.md | 8 +- content/docs/guides/creating-themes.md | 140 ++++++++++++++++++++----- includes/hero.html | 4 +- includes/save-hours.html | 2 +- includes/technologies.html | 2 +- 6 files changed, 150 insertions(+), 35 deletions(-) diff --git a/content/docs/features/themes.md b/content/docs/features/themes.md index 74e7a6d..4faaad9 100644 --- a/content/docs/features/themes.md +++ b/content/docs/features/themes.md @@ -13,6 +13,7 @@ Wave allows you to customize the look and feel of your application through a fle - [Themes](#themes) - [Theme Views](#theme-views) + - [Theme Pages](#theme-pages) - [Theme Assets](#theme-assets) - [Compiling Assets \& HMR](#compiling-assets--hmr) - [Building Assets](#building-assets) @@ -38,6 +39,32 @@ return view('theme::home'); That will return the view located at `resources/themes/anchor/home.blade.php`. +## Theme Pages + +Each theme will have their own `pages` directory that are mapped to a specific route. We'll cover Volt pages in the next section a little more; however, it's probably important to know all the different pages that are provided with each theme. + +In addition to all the authentication routes, you will also find the following pages included in each theme. + +- **Homepage** - (pages/index.blade.php) +- **Dashboard** - (pages/dashboard/index.blade.php) +- **Pricing** - (pages/pricing/index.blade.php) +- **Profile** - (pages/profile/[username.blade.php]) +- **Settings** + - **Profile Settings** - (pages/settings/profile.blade.php) + - **Security Settings** - (pages/settings/security.blade.php) + - **API keys** - (pages/settings/api.blade.php) + - **Subscription** - (pages/settings/subscription.blade.php) + - **Invoices** - (pages/settings/invoices.blade.php) +- **Subscription Welcome** - (pages/subscription/welcome.blade.php) +- **Notifications** - (pages/notification/index.blade.php) +- **Blog** + - **Blog Home/List** - (pages/blog/index.blade.php) + - **Blog Categories** - (pages/blog/.Wave.Category-slug/index.blad.php) + - **Blog Post** - (pages/blog/.Wave.Category-slug/[.Wave.Post-slug].blade.php) +- **Changelog** + - **Changelog Home** - (pages/changelog/index.blade.php) + - **Changelog Item/Entry** - (pages/changelog/[.Wave.Changelog].blade.php) + ## Theme Assets Every theme will have it's own assets located at the following locations: @@ -112,7 +139,7 @@ Now that you have the theme installed, you'll need to head to the admin to activ To activate a Theme you can simply click the Activate button for the current theme you would like to activate, and that will be the current active theme. -> Important: After activating a theme you will need to make sure that you stop your asset watcher `npm run dev` and re-run it after the new theme has been activated. This is because we need the asset watcher to look in the correct directory. +> After activating a theme you may need to make sure that you stop your asset watcher `npm run dev` and re-run it after the new theme has been activated. ## Digging Deeper diff --git a/content/docs/guides/about.md b/content/docs/guides/about.md index 5703960..37dbd29 100644 --- a/content/docs/guides/about.md +++ b/content/docs/guides/about.md @@ -1,10 +1,10 @@ --- title: About Guides description: Learn how you can host your website and make it live for the world to see. -nextTitle: 'Folder Structure' -nextURL: '/docs/guides/folder-structure' -prevTitle: 'Github Action' -prevURL: '/docs/features/github-action' +nextTitle: 'Creating Themes' +nextURL: '/docs/guides/creating-themes' +prevTitle: 'Prompts' +prevURL: '/docs/prompts/create-a-role' --- diff --git a/content/docs/guides/creating-themes.md b/content/docs/guides/creating-themes.md index 6d5602b..d6e194d 100644 --- a/content/docs/guides/creating-themes.md +++ b/content/docs/guides/creating-themes.md @@ -1,44 +1,132 @@ --- title: Creating Themes description: Learn how you can host your website and make it live for the world to see. -nextTitle: 'Folder Structure' -nextURL: '/docs/guides/folder-structure' -prevTitle: 'Github Action' -prevURL: '/docs/features/github-action' +nextTitle: '' +nextURL: null +prevTitle: 'About Guides' +prevURL: '/docs/guides/about' --- +# Creating Themes -
- -
-

Deploying your website

-

There are many ways that you can host your website and make your masterpiece live for the world to see.

-
-
+It will probably be beneficial to learn how to create a simple theme for Wave, so that's what we'll cover in this quick guide. -If you do not want to host your website on Github pages, you can host with a handful of other alternatives. +- [Creating Themes](#creating-themes) + - [The Simplest Theme](#the-simplest-theme) + - [Add a homepage view](#add-a-homepage-view) + - [Creating Your Assets](#creating-your-assets) + - [Example Theme](#example-theme) -## Website Build -When you run the `static build` command your website will be built into a new folder named `_site`. This folder will contain all the contents for your website. You can simply move the contents to any server and your site will be served up accordingly. +### The Simplest Theme -Remember that if you are hosting your website inside of a subfolder, you will need to pass the full URL to the build command in order for all the assets and images to link up correctly. Here's an example: +Creating your own theme is as easy as creating a new folder inside of `resources/themes`. The name of this folder should be the name of your theme in all lowercase letters (Example: `resources/views/example`). Next, we need to add a `theme.json` inside of the theme folder with the following contents: +```json +{ + "name": "Example", + "version": "1.0" +} ``` -static build https://my-website/subfolder/ + +In this *.json* file you will specify the `name` of the theme and the `version`. + +That's it! You should now see this theme inside of the admin; however, you will see a broken image because you haven't added an image yet. That is why the recommended minimum for any theme is: + +1. theme.json - (containing information about the theme) +2. theme.jpg - (containing a screenshot/cover of the theme) + +That's really all that's needed to create a theme; however, you will get an error when you try and visit the homepage and other areas of the application because you haven't created those views yet. + +### Add a homepage view + +Because each theme utilizes **Folio/Volt pages**, we can simply create a new **pages** folder with an **index.blade.php** file. (Example: `resources/themes/example/pages/index.blade.php). + +```html + + + + + + Example Theme + + + +
+

Example Theme

+

This is a simple example of a blank theme. Click here to view the docs

+
+ + ``` -## Alternatives +Add that HTML to your **index.blade.php** file and you will now be able to visit the homepage of your application and see this view. + +You can do the same for the dashboard by creating a file at `resources/themes/example/pages/dashboard/index.blade.php` and you will now be able to visit your application `/dashboard` route. + +As you can see you can do this with any other pages in your application, it might be good to look at one of the current themes to see all the pages that are created. + +### Creating Your Assets + +You probably do not want to load the Tailwind CSS Cdn link, like we've showed in the example HTML file. Instead, you'll probably want to create your own `app.css` and `app.js` this way you can use the **vite** asset builder to compile your assets. Create the two following files: + +1. resources/themes/example/assets/css/app.css +2. resources/themes/example/assets/js/app.js + +> You will want to swap out `example` with the name of your folder. + +Next, add the following contents to your `app.css` + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; +``` + +You can also add any javascript that you want to your `app.js`. Remember you do not need to include Alpine or Livewire javascript from this file because they will automatically be injected since we are using the latest version of Livewire. + +Next, we want to reference our `app.css` and our `app.js` from our application, so inside the head of your layout or the `pages/index.blade.php`, we can add the following: + +``` +@vite(['resources/themes/anchor/assets/css/app.css', 'resources/themes/anchor/assets/js/app.js']) +``` + +You will also want to add the **filament** and the **livewire** styles. Be sure to include those before the **@vite** helper: + +``` +@filamentStyles +@livewireStyles +@vite(['resources/themes/example/assets/css/app.css', 'resources/themes/example/assets/js/app.js']) +``` + +> Important: Make sure to add the filament and livewire styles before your vite helper. Adding them after may result in some mis-aligned styles. + +The final result should look something like this: + +```html + + + + + + Example Theme + @filamentStyles + @livewireStyles + @vite(['resources/themes/example/assets/css/app.css', 'resources/themes/example/assets/js/app.js']) + + +
+

Example Theme

+

This is a simple example of a blank theme. Click here to view the docs

+
+ + +``` -There are a handful of alternatives that you can use to host your site for free. Here are a link to a few of those alternatives below: +Now, you'll be able to run `npm run dev` and your theme will be hot-reloading 🔥 -- [DigitalOcean](https://m.do.co/c/dc19b9819d06) -- [Cloudflare Pages](https://pages.cloudflare.com/) -- [Firebase](https://firebase.google.com/products/hosting) -- [Static.app](https://static.app/) -- [Netlify](https://www.netlify.com/) -- [Vercel](https://vercel.com/) +When you're ready to compile your assets for production you can run `npm run build` and the correct theme assets will be minified and saved to your public directory. -## DevDojo Static Hosting +### Example Theme -Eventually we'll be providing a free hosted solution where you will get your own `website.devdojo.io` subdomain and have the ability to use your own custom domain. If you want to see this implemented sooner you can can help us out by starring the repo, and telling your friends about static 🤘 \ No newline at end of file +If you want to reference this example theme that we've created in this example to use it as a starting point for your theme, you can find the Example Theme here. \ No newline at end of file diff --git a/includes/hero.html b/includes/hero.html index df37eb3..21a33a9 100644 --- a/includes/hero.html +++ b/includes/hero.html @@ -17,9 +17,9 @@
-

Ship Your SaaS in a Weekend.

+

Ship Your SaaS in a Weekend.

-

Wave is the perfect boilerplate for launching a SaaS without breaking a sweat. Wave will help you make your first dollars online quickly.

+

Wave is the perfect boilerplate for launching a SaaS without breaking a sweat. Start building today and start earning your first dollars online quickly.

-

Save Yourself from the Choppy Waters Ahead

+

Save Yourself from the Choppy Waters Ahead

Think of all the time spent on setting up the essentials for a SaaS product. Wave does the heavy lifting for you, saving you over 100 hours of tedious work.

diff --git a/includes/technologies.html b/includes/technologies.html index 7b6cb69..d6f941f 100644 --- a/includes/technologies.html +++ b/includes/technologies.html @@ -5,7 +5,7 @@
-

Powering the Propellers

+

Powering the Propellers

Wave is built with the most modern tech, propelling your project forward at full speed. Check out what's powering the engine.