diff --git a/assets/js/main.js b/assets/js/main.js
index 45e69b9..a3f0575 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -6,7 +6,7 @@ import focus from '@alpinejs/focus'
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
-
+window.TOCoffset = 150;
gsap.registerPlugin(ScrollTrigger);
@@ -252,6 +252,20 @@ function domReadyLoop(){
}
}
+document.addEventListener('DOMContentLoaded', function() {
+ const proseLinks = document.querySelectorAll('.prose ul li a');
+ proseLinks.forEach(link => {
+ link.addEventListener('click', function(event) {
+ if(link.getAttribute('href').startsWith('#')) {
+ event.preventDefault();
+ renderLinkAsTOC(link);
+ }
+ //console.log(`Link clicked: ${this.href}`);
+ // Add any additional functionality as needed
+ });
+ });
+});
+
document.addEventListener("DOMContentLoaded", function() {
hljs.highlightAll();
@@ -291,17 +305,7 @@ window.renderTocFunctionality = function(){
tocALinks.forEach(link => {
link.addEventListener('click', (event) => {
event.preventDefault();
- const targetId = link.getAttribute('href').substring(1);
- const offset = 99; // Adjust the offset value as per your requirement
- const targetElement = document.getElementById(targetId);
-
- if (targetElement) {
- const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
- window.scrollTo({
- top: targetPosition - offset,
- behavior: 'smooth'
- });
- }
+ renderLinkAsTOC(link);
});
});
@@ -335,14 +339,28 @@ window.renderTocFunctionality = function(){
});
}
+window.renderLinkAsTOC = function(link){
+ const targetId = link.getAttribute('href').substring(1);
+ const offset = TOCoffset; // Adjust the offset value as per your requirement
+ const targetElement = document.getElementById(targetId);
+
+ if (targetElement) {
+ const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
+ window.scrollTo({
+ top: targetPosition - offset,
+ behavior: 'smooth'
+ });
+ }
+}
+
// Helper function to check if an element is in the viewport
function isElementAtTopAndNotReachedNextSection(element) {
const rect = element.getBoundingClientRect();
const nextSection = document.querySelector('section + section');
return (
- rect.top <= 100 &&
- (!nextSection || rect.bottom < (nextSection.offsetTop +100))
+ rect.top <= TOCoffset &&
+ (!nextSection || rect.bottom < (nextSection.offsetTop +TOCoffset))
);
}
diff --git a/content/docs/features/auth.md b/content/docs/features/auth.md
new file mode 100644
index 0000000..6e500dc
--- /dev/null
+++ b/content/docs/features/auth.md
@@ -0,0 +1,21 @@
+---
+title: Authentication
+description: Learn how the authentication works with-in Wave
+nextTitle: 'Roles'
+nextURL: '/docs/features/roles'
+prevTitle: 'Local Development'
+prevURL: '/docs/local-dev'
+---
+
+# Authentication
+
+Wave provides you with all the authentication features you need for most use-cases. Here are the login pages that you get out of the box:
+
+- Login
+- Register
+- Verify Email
+- Password Confirmation
+- Password Reset Request
+- Password Reset
+- Two-Factor Challenge
+
diff --git a/content/docs/features/collections.md b/content/docs/features/collections.md
deleted file mode 100644
index 8ec341b..0000000
--- a/content/docs/features/collections.md
+++ /dev/null
@@ -1,185 +0,0 @@
----
-title: Static Collections
-description: Learn how to add collections of data to your Static website
-nextTitle: 'Content'
-nextURL: '/docs/features/content'
-prevTitle: 'Includes'
-prevURL: '/docs/features/includes'
----
-
-
-
-
-
Collections
-
Collections allow you to add and manage sets of data in your application. They provide a convenient way to organize and loop through data.
-
-
-
-## About Collections
-
-Collections can be used to loop through a collection of data, such as navigation items, product features, or any other type of repeatable data.
-
-
-
- Collections are stored in the collections folder. Don't see the collections folder? Simply create a new folder called collections in the root of your project.
-
-
-
-## Creating Collections
-
-Creating a new collection is as simple as creating a new `.json` file to your `collections` folder. The content should be structured as an array of JSON data. Here's an example.
-
-
π collections/menu.json
-
-```
-[
- {
- "title" : "Home",
- "link" : "/"
- },
- {
- "title" : "About",
- "link" : "/about"
- }
-]
-```
-
-You can add as many collections to your website and reference that data on your website. You can reference any collection inside of a **collection loop**. Let's cover that next.
-
-## Collection Loops
-
-To loop through a collection we can use the `` tags. To reference a collection, you pass the filename inside the `collection` attribute, like so:
-
-```html
-...
-```
-
-To loop through the **collections/menu.json** file, our code might look like this:
-
-```html
-
-```
-
-This loop will generate the following HTML:
-
-```
-
-```
-
-## Collection Loop Attributes
-
-In addition to the `collection` attribute there are also a few other attributes you can use in the `` tags, which include the following:
-
-- **as** - specify how you want to reference the data
-- **orderBy** - specify how you want to order the content
-- **count** - specify how many items you want to retrieve
-
-To show you an example of these attributes, let's use another collection example.
-
-
π collections/movies.json
-
-```
-```
-[
- {
- "title": "Teenage Mutant Ninja Turtles",
- "year" : "1990",
- "active": true
- },
- {
- "title": "The Goonies",
- "year" : "1985",
- "active": false,
- },
- {
- "title": "Batman Forever",
- "year" : "1995",
- "active": true
- },
- {
- "title": "Jurrasic Park",
- "year": "1993",
- "active": false
- }
-]
-```
-
-If we wanted to loop through our **movies** collection, we can do so with the following code:
-
-```html
-
-
{movie.title}
-
-```
-
-Here we referenced the **movies** collection, and referenced the data as **movie**. We've also specified that we want to retrieve three results and order by the year, resulting in the following output:
-
-```html
-
The Goonies
-
Teenage Mutant Ninja Turtles
-
Jurrasic Park
-```
-
-Next, if we want to hide or show data from any collection. We can do that with conditionals.
-
-## Conditionals
-
-Inside a loop we can use the `` tags to show/hide items based on a specific condition. Using our **movies** collection from above, we can output only `active` movies with the following HTML:
-
-```html
-
-
-
-
{movie.title}
-
-
-
-
-```
-
-This will render the following HTML:
-
-```html
-
-
Teenage Mutant Ninja Turtles
-
Batman Forever
-
-```
-
-When rendering a loop there are times when you want to keep track of the current iteration, we can do that by using the **loop variable**.
-
-## Loop Variable
-
-Inside of any `` loop you can utilize the **loop** variable inside of conditional, like so:
-
-```html
-
-
-
-
{movie.title}
-
-
-
-```
-
-This will render the following HTML:
-
-```html
-
-
The Goonies
-
Jurassic Park
-
-```
-
-The **loop** variable will start at **1** and it will increment each time the loop iterates.
-
-## Conclusion
-
-Collections are a powerful feature that allow you to organize and loop through sets of data in your static website. If you want to create long copy **text** such as posts or articles, you'll probably want to use Statics **content** feature for that. Let's discuss that next.
\ No newline at end of file
diff --git a/content/docs/features/configurations.md b/content/docs/features/configurations.md
deleted file mode 100644
index a430d7e..0000000
--- a/content/docs/features/configurations.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: Configurations
-description: Check out the configuration options for your site
-nextTitle: 'Github Action'
-nextURL: '/docs/features/github-action'
-prevTitle: 'TailwindCSS'
-prevURL: '/docs/features/tailwindcss'
----
-
-
-
-
-
Configurations
-
There are a few configurations that you can use to develop your site. More options coming soon.
-
-
-
-Inside the root of your directory is where you can create a `static.json` configuration file. When you are running `static dev` this configuration will be loaded with each request.
-
-## Custom Headers
-
-If you wish to add custom headers in your requests, you can include the "headers" key inside of your `static.json` file, like so
-
-```json
-{
- "headers" : {
- "Cache-Control" : "public, max-age=31536000",
- "Access-Control-Allow-Origin" : "*",
- "Authorization" : "Bearer 1234567890"
- }
-}
-```
-
-Feel free to open a PR and request any additional options that can be passed in via the static.json file.
diff --git a/content/docs/features/content.md b/content/docs/features/content.md
deleted file mode 100644
index 36972e7..0000000
--- a/content/docs/features/content.md
+++ /dev/null
@@ -1,165 +0,0 @@
----
-title: Static Content
-description: Learn how to add content to your website
-nextTitle: 'Live-Reloading'
-nextURL: '/docs/features/live-reloading'
-prevTitle: 'Collections'
-prevURL: '/docs/features/collections'
----
-
-
-
-
-
Content
-
Learn how to create and manage content for your Static website using Markdown files and content pages.
-
-
-
-## About Content
-
-The content for your website will live inside a `content` folder, located in the root of your project.
-
-
-
- Don't see this folder? You can simply create a new folder and name it content.
-
-
-> Content is written in Markdown, a simple syntax that can be used to add headings, lists, links, and other formatting elements represented with only text. Learn more about Markdown here.
-
-## Creating Content
-
-To create a new piece of content you add a new file with a `.md` extension to the `content` folder.
-
-Any file in this directory will be mapped to a route, similar to page-based routing. Here's an example:
-
-
π content/docs/index.md
-
-```makefile
----
-title: Welcome to the Docs
-description: Add a description here
----
-
-Welcome to the docs. This is an example markdown file.
-
-## About
-
-Learn more about...
-```
-
-If this file above were located at `content/docs/index.md`, it would create a new route at `https://localhost:3000/docs`.
-
-## Content Pages
-
-Content pages will attempt to use the HTML from the **pages** directory that has the same path. For instance, if we had a content file located at `content/docs/index.md`, static will use the HTML from a located at `pages/docs/index.html`.
-
-
π pages/docs/index.html
-
-```html
-
-
-
- {content}
-
-
-
-```
-
-A content page works exactly like any other page; however, it is expected to have a `{content}` shortcode, which is where the **content** will be rendered.
-
-The same HTML can be used for multiple pieces of content. If we had a page at `pages/docs/index.html`, it would be used for all content inside of `content/docs/*.md`. Or, you can choose to create a separate page for individual pieces of content. As an example, a page located at `pages/blog/coding.html` would be used for a content file located at `content/blog/coding.md`. Static will look for a corresponding file, and if it does not exist, it will traverse down the directory until it finds a page, like so:
-
-
-
FINDpages/blog/coding.html(use page if exists, if not π)
-
FINDpages/blog/index.html(use page if exists, if not π)
-
FINDpages/blog.html(use page if exists, if not π)
-
FINDpages/index.html(use page or throw error)
-
-
-
-
- If you have a page template located at /pages/blog/index.html and you want to use a separate template for the content page, you can add a file called [content].html inside that folder, and it will be used instead of the index.html
-
-
-## Content Frontmatter
-
-At the beginning of every Markdown file you will add **frontmatter** to the top of the file, which displays information about that specific content. Here's an example:
-
-```makefile
----
-title: My Awesome Content
-date: 2022-01-01
-active: true
----
-```
-
-Frontmatter is written in YAML and is enclosed between --- delimiters. Frontmatter allows users to define variables and values that can be accessed and used within the page.
-
-### Using Frontmatter in HTML
-
-
-In the example above, the frontmatter defines three variables: title, date, and active. These variables can be accessed and used within a pages HTML code by enclosing them in curly braces `{}`. For example, to display the title from the frontmatter, they can use `{frontmatter.title}`.
-
-Here's an example of using frontmatter variables in HTML:
-
-```html
-
{frontmatter.title}
-
Date: {frontmatter.date}
-```
-
-### Using Conditionals with Frontmatter
-
-Users can also use conditionals to control the display of content based on frontmatter values. They can use the `` tag with a condition attribute to conditionally render HTML elements.
-
-Here's an example of using conditionals with frontmatter:
-
-```
-
-
This content is active.
-
-```
-
-In the example above, the
element will only be displayed if the `active` variable in the frontmatter is `true`.
-
-### Accessing Frontmatter with JavaScript
-
-A global JavaScript variable called `frontmatter` is also made available to access the values using javascript. You can use this variable to extract and use frontmatter data dynamically.
-
-Here's an example of accessing frontmatter with JavaScript:
-
-```javascript
-console.log(frontmatter.title); // Output: My Awesome Content
-console.log(frontmatter.date); // Output: 2022-01-01
-console.log(frontmatter.active); // Output: true
-```
-## Content Loops
-
-Content loops use the `` tags to loop through content. They function the same way as collection loops; however, you will use the `content` attribute as opposed to the `collection` attribute.
-
-```html
-
-
-
-```
-
-You can also make use of the **as**, **orderBy**, and **count** attributes.
-
-```html
-
-
{post.title}
-
-```
-
-This loop will fetch three posts, ordered by the **date** and referenced as **post**, from the **content/posts** folder.
-
-
-
-
- Fun Fact:
- Under the hood content loops will generate collections at run time. This is why collection loops and content loops function the same.
-
-
-
-
-You may also utilize `` tags to conditionally render data in your content. The **conditionals** functionality will be the same as it is in collections.
\ No newline at end of file
diff --git a/content/docs/features/github-action.md b/content/docs/features/github-action.md
deleted file mode 100644
index 77280de..0000000
--- a/content/docs/features/github-action.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Github Action
-description: Auto-deploy your website using the Static Github action
-nextTitle: 'Deploying Your Site'
-nextURL: '/docs/guides/deploy'
-prevTitle: 'Configurations'
-prevURL: '/docs/features/configurations'
----
-
-
-
-
-
-
Github Action
-
Use our github action to deploy your website easily to Github pages. Git push and your changes will automatically be deployed
-
-
-
-If you are using one of the templates for your site, you will see a file located at `.github/workflows/static.yml`. This is the Github action you can use to auto-deploy your site. If you are creating a custom template you can copy the Github Action file here.
-
-## Setting up the Github Action to AutoDeploy
-
-After you push your website to a Github repo you will need to navigate to [Settings]->[Pages] and you'll see a dropdown under the **Build and deployment** section.
-
-
-
-You'll want to select Github actions in that dropdown. After you have made those changes your site will be deployed the next time you make a change and push to your `main` branch.
-
-> You may also wish to add a custom domain instead of using a Github subdomain.
-
-## Configuration
-
-If you are not using a custom domain and your website is inside of a subfolder (https://my-org.github.com/my-website/), you will need to make a modification to the **build** step inside of your `static.yml` file.
-
-Locate the section with the following name: `Run the static build step` and you'll see on the next line the run command `run: npx @devdojo/static build`. At the end of this run command you'll need to add the URL of your website, like so:
-
-```
-- name: Run the static build step
- run: npx @devdojo/static build https://my-org.github.com/my-website/
-```
-
-When your site is built, it will use that URL as an absolute URL for all your assets and images.
-
-## Other ways to host your website
-
-You may want to host your website on another static hosting platform, or on your own server. That's what we'll cover in the next section.
\ No newline at end of file
diff --git a/content/docs/features/includes.md b/content/docs/features/includes.md
deleted file mode 100644
index 19bcd1d..0000000
--- a/content/docs/features/includes.md
+++ /dev/null
@@ -1,141 +0,0 @@
----
-title: Static Includes
-description: Learn how to use includes to create and re-use HTML code in your website
-nextTitle: 'Collections'
-nextURL: '/docs/features/collections'
-prevTitle: 'Layouts'
-prevURL: '/docs/features/layouts'
----
-
-
-
-
-
Includes
-
Includes allow you to create reusable HTML code snippets and include them in multiple pages of your website.
-
-
-
-To use includes, create HTML snippets inside of the **includes** directory. These snippets can then be included in your pages using the `` tags.
-
-## Creating Includes
-
-Creating an include is as simple as adding a new file to the **includes** directory. let's say for instance that you created a new file located at `includes/message.html` with the following contents:
-
-```html
-
This is a simple HTML paragraph
-```
-
-It's as simple as that.
-
-## Using Includes
-
-Next, to use our new include we can utilize the `` tags and reference that file, like so:
-
-```html
-
-
-...
-
-
-
-
-```
-
-Even better we can utilize **layouts** and **includes** together to clean up our code and make it really easy to read:
-
-```html
-
-
-
-```
-
-When this page is rendered, it will have an output like the following:
-
-```html
-
-
-...
-
-
This is a simple HTML paragraph
-
-
-```
-
-## Include Attributes
-
-You can pass attributes with values to any include.
-
-```html
-
-```
-
-And inside of the include content you can reference the attributes with the curly braces `{}`.
-
-Here's an example. Let's take a look at an example **include** file that can be used as a page heading.
-
-
π includes/page-heading.html
-
-```html
-
-
Page Title
-
Description here
-
-```
-
-Instead of hardcoding the `Page Title` and `Description here`, we could reference `title` and `description` attributes with curly braces, like so:
-
-```html
-
-
{title}
-
{description}
-
-```
-
-And when we use the include, we can pass the title and the description as attributes:
-
-```html
-
-
-```
-
-This would render out the following HTML:
-
-```html
-
-
Contact
-
some description...
-
-```
-
-
- Did you know you can also use includes with dynamic attributes inside of Loops. We'll cover loops and ForEach tags in the next section.
-
-
-## Organizing Includes
-
-It may be beneficial to group includes into separate folders. For instance, if there are includes that are only going to be used on the homepage, you can group that into a separate folder, like so:
-
-```
-π includes
-ββ π home
-βββββ π hero.html
-βββββ π testimonials.html
-```
-
-You can then use these includes by referencing `home/hero.html` inside of the `src` attribute, like so:
-
-```
-
-
-
-
-```
-
-> Organizing your includes will make it easier to find them when you want to make updates.
-
-## Conclusion
-
-Includes give us the ability to create HTML snippets in one place and use it in multiple places throughout our site. It will also allow us to make an edit in one place and have those changes replicated everywhere else throughout our website.
\ No newline at end of file
diff --git a/content/docs/features/layouts.md b/content/docs/features/layouts.md
deleted file mode 100644
index fddc844..0000000
--- a/content/docs/features/layouts.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: Static Layouts
-description: Learn how to use layouts to give pages a re-usable HTML structure
-nextTitle: 'Includes'
-nextURL: '/docs/features/includes'
-prevTitle: 'Page-based Routing'
-prevURL: '/docs/features/page-based-routing'
----
-
-
-
-
-
-
Layouts
-
Layouts are used to provide a reusable HTML structure for pages. They allow you to define a common layout that can be inherited by multiple pages.
-
-
-
-## Creating Layouts
-
-Creating a layout for your application is as simple as creating a `.html` file inside of the `layouts` directory. Here is an example layout:
-
-```html
-
-
-
-
-
- {title}
-
- {tailwindcss}
-
-
- {slot}
-
-
-
-```
-
-A layout is an HTML structure that can be used within any page by using the `` tag. Anything inside the **layout** tags will be rendered in place of the `{slot}` shortcode.
-
-## Using Layouts
-
-Any page inside the `pages` directory can utilize any layout. For instance, let's say that we had a page located at `pages/about.html` with the following contents:
-
-```
-
-
About Us
-
Here is some info about us
-
-```
-
-Inside of the layout tags we add a `src` of `main.html`, which will load a layout located at `layouts/main.html`. When this `about` page gets rendered it will have the following HTML output:
-
-```
-
-
-
-
-
- About Us
-
-
-
-
-
About Us
-
Here is some info about us
-
-
-
-```
-
-> You've probably also noticed the `title` attribute in the layout tags. Let's cover that next.
-
-## Layout Variables
-
-When you utilize a `` from inside a page, you can pass it any set of attributes like `title`, `description`, and any other value you want to reference as a variable inside the layout. If we used a layout inside of a page that looked like this:
-
-```
-
- ...
-
-```
-
-Then, inside of that `post.html` layout file you can retrieve those values by referencing the attributes inside of `{}` curly braces. So, if you want to output the value from the *title** attribute you would use `{title}` or to get the description you would use `{description}`.
-
-You can make use of any number of attributes you would like and reference them inside of your layout.
-
-## Conclusion
-
-Layouts make it really simple for multiple pages to inherit a similar layout. It also gives you the ability to have different layouts for different parts of your website.
\ No newline at end of file
diff --git a/content/docs/features/live-reloading.md b/content/docs/features/live-reloading.md
deleted file mode 100644
index e256b57..0000000
--- a/content/docs/features/live-reloading.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: Live Reloading
-description: Save time with Statics Live-reloading feature
-nextTitle: 'TailwindCSS Integration'
-nextURL: '/docs/features/tailwindcss'
-prevTitle: 'Content'
-prevURL: '/docs/features/content'
----
-
-
-
-
-
-
Live Reloading
-
See your site changes in real-time without having to refresh the page. Live-reloading reloads the page when you make any changes to your code.
-
-
-
-Static uses the [live-reload npm package](https://www.npmjs.com/package/livereload-js) to detect changes to the code and files in your website and live reload the page. This creates an excellent developer experience and allows you to build your site much faster.
-
-## Setup
-
-Live reload is automatically injected into the page when your run `static dev`, you'll see a script at the bottom of the page called livereload.js and this is the script that's responsible for reloading the page. Your site will live-reload when any file is updated on your site.
-
-## Configuration
-
-Right now there are no configuration options with live-reload, it just works out of the box. But, if necessary we may add some additional configs in the future. Right now it works with all the files in your site; however, there may be some edge-cases where you want to create custom rules. Be sure to check back for updated options or if you would like to contribute code, make sure to open a PR in the Github Repo.
-
-Save time and see changes instantly with Live-reload! πͺ
-
-
diff --git a/content/docs/features/notifications.md b/content/docs/features/notifications.md
index 23931e8..6f7d43c 100644
--- a/content/docs/features/notifications.md
+++ b/content/docs/features/notifications.md
@@ -7,6 +7,7 @@ prevTitle: 'Collections'
prevURL: '/docs/features/collections'
---
+
# User Notifications
Wave leverages the default Laravel Notification system and gives you an elegant UI to display those notifications in your app.
diff --git a/content/docs/features/page-based-routing.md b/content/docs/features/page-based-routing.md
deleted file mode 100644
index fff0915..0000000
--- a/content/docs/features/page-based-routing.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: Static Page-based Routing
-description: Learn about the page-based routing system in Static and how to use it.
-nextTitle: 'Layouts'
-nextURL: '/docs/features/layouts'
-prevTitle: 'Folder Structure'
-prevURL: '/docs/guides/folder-structure'
----
-
-
-
-
-
Page-based Routing
-
Static uses a simple page-based routing system where each route is mapped to a file inside of a pages directory. This allows you to easily create routes for your website by adding files to this directory.
-
-
-
-
-
-
- If you used the static new command, a pages directory will automatically be created. If you are inside an empty folder, you can just create a new folder with the name of pages.
-
-
-## Creating Pages
-
-There are two ways to create a route for your website using page-based routing in Static:
-
-1. **Adding an index.html file to a folder:** If you add an index.html file to a folder inside the pages directory, it will serve as the homepage of your application. For example, adding a file located at `/pages/about/index.html` would serve up an `/about` page.
-
-2. **Adding a file directly to the pages directory:** You can also add files directly to the pages directory to create routes. For example, adding a file located at `/pages/about.html` would resolve to the `/about` page.
-
-Creating pages for your website is as simple as adding a new file to your `pages` directory. When you add a new page it will automatically create a corresponding route for that page.
-
-## Route Structure
-
-The structure of the pages directory determines the routes available on your website. Each file within the pages directory corresponds to a route. For example, with a structure like this:
-
-
-
-## Re-using Pages
-
-There may be times when you want to create a page that resolves to multiple routes. You can do this without having to duplicate a page. Use the `` tag to load the contents of another page.
-
-```html
-
-```
-
-Wherever you place this file, it will generate a route for that page and load the same contents as the HTML file referenced in the **src** attribute.
-
----
-
-That's the basics of Page-based routing. Next, let's move on to layouts.
\ No newline at end of file
diff --git a/content/docs/features/roles-permissions.md b/content/docs/features/roles-permissions.md
index b913e0f..fc93597 100644
--- a/content/docs/features/roles-permissions.md
+++ b/content/docs/features/roles-permissions.md
@@ -9,11 +9,12 @@ prevURL: '/docs/features/collections'
# Roles and Permissions
-Wave utilizes the popular Spatie Permissions Package to handle the **Roles** and **Permissions** functionality. You may refer to this documentation to learn how roles/permissions work in more depth.
+Roles and Permissions allow you to manage who can access different parts of your web application.
+
## Roles
-By default Wave ships with five default roles. These roles include:
+Roles are labels or titles that you give to users in your web application to define what they can or cannot do. By default, Wave ships with five roles:
1. **Admin** - This is the role you will have as the developer and administrator.
2. **Registerd** - This is the default role for a newly registered user
@@ -30,3 +31,8 @@ Next, you may also modify/delete any of the **Basic**, **Premium**, and **Pro**
> For organizational purposes, if you change the **Basic** role to **Starter**, you may also want to update the name of the **Basic** plan to **Starter** as well.
Itβs not mandatory for the user **Role** to have the same name as the **Plan**; however, doing so will make things easier to understand. Additionally, a user doesnβt have to have only one Role; but, keeping it this way will make things easier to comprehend and manage.
+
+
+## Digging Deeper
+
+Wave utilizes the popular Spatie Permissions Package to handle the inner-workings of the **Roles** and **Permissions** functionality. You may refer to this documentation to learn how roles/permissions work in more depth.
\ No newline at end of file
diff --git a/content/docs/features/tailwindcss.md b/content/docs/features/tailwindcss.md
deleted file mode 100644
index 1cd3584..0000000
--- a/content/docs/features/tailwindcss.md
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: TailwindCSS Integration
-description: We've built a rock solid integration with TailwindCSS
-nextTitle: 'Configurations'
-nextURL: '/docs/features/configurations'
-prevTitle: 'Live Reloading'
-prevURL: '/docs/features/live-reloading'
----
-
-
-
-
-
TailwindCSS
-
Easily use TailwindCSS in your sites by including a simple short code. Learn more about how everything works below.
-
-
-
-Including Tailwind CSS in your project is easier than ever before.
-
-> It's not required that you use Tailwind, but why wouldn't you? It's the ultimate design library that makes creating your website a breeze. Embrace its power and unleash your creativity!"
-
-## How To Use
-
-To include Tailwind, simply add the `{tailwindcss}` shortcode to the head of your document:
-
-```html
-
-
-
-
-
- {title}
-
- {tailwindcss}
-
-
- {slot}
-
-
-
-```
-
-When you use the `static dev` command, the Tailwind CSS CDN will be injected into the page along with all the available plug-ins. Running `static build` will run the **Tailwind CLI** and add all the necessary classes to your `main.css` file.
-
-
-
- This shortcode is already added to the main layout in the starter template, so after running static new folder-name, you're ready to start using Tailwind without a build step!
-
-
-
-## How Does It Work
-
-It might be beneficial to understand how it works, and it's pretty simple to explain.
-
-### When Running `static dev`
-
-When you run the `static dev` command, the Tailwind CSS CDN will be injected into the head of your documentation. This also includes all the TailwindCSS Plug-ins.
-
-This will make it easy to test out new colors and styles. You can open up developer tools, add a class and voila! The class will be available because we are using the TailwindCSS CDN. This will also pull in custom styles from your Tailwind config (more info on this below).
-
-Of course, using the Tailwind CDN in production is not recommended, so that's why we handle it differently when you build your site.
-
-### When Running `static build`
-
-When you run the `static build` command we use the Tailwind CLI to search your site for all Tailwind CSS classes that are used. It will then add a minified version of all these classes to your `assets/css/main.css` file. Now, your website should be smokin π₯ fast!
-
-
-## Tailwind Configurations
-
-If you are creating a custom template you'll want to create a `tailwind.config.js` to the root of your project, otherwise, if you use a template this should already exist.
-
-
π tailwind.config.js
-
-```json
-/** @type {import('tailwindcss').Config} */
-module.exports = {
- content: ["./**/*.{html,js}"],
- theme: {
- extend: {},
- },
- plugins: [
- require('@tailwindcss/typography'),
- ],
-}
-```
-
-When building for production you'll need to include any plugins you want to use inside of the `plugins` array.
-
-
-
-
- Does it work in Dev Mode?
- Yes! All the configurations that you add to your config will also be pulled in during dev mode, so you can test custom colors, sizes, and more by adding them to your Tailwind config.
-
-
diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md
index 62f80a0..599637c 100644
--- a/content/docs/getting-started.md
+++ b/content/docs/getting-started.md
@@ -2,124 +2,87 @@
title: Getting Started with Static
description: This is the introduction and getting started seciton of the Static documentation.
slug: 'getting-started'
-nextTitle: 'Installation'
-nextURL: '/docs/install'
prevTitle: null
prevURL: null
+nextTitle: 'Installation'
+nextURL: '/docs/install'
home: true
---
-This documentation is meant to be your guide to understanding and utilizing Wave to build your SaaS application. If you need additional assistance beyond these docs, be sure to post a question here.
+# Introduction
+
+Welcome to Wave, the **SaaS Starter Kit** to help you ship your next idea fast. This documentation will be your guide to navigating the Seas of SaaS development.
+- [Introduction](#introduction)
+ - [Getting Started](#getting-started)
+ - [Key Features](#key-features)
+ - [Authentication](#authentication)
+ - [User Management](#user-management)
+ - [Billing](#billing)
+ - [Changelog](#changelog)
+ - [Blog](#blog)
+ - [API](#api)
+ - [Admin](#admin)
+ - [Themes](#themes)
+ - [Demo](#demo)
+ - [Installation](#installation)
+
+
## Getting Started
-**Wave** is a SaaS starter kit that will help you build your next idea in record time. It is built using the popular Laravel Framework. It's not necessary that you know how to use Laravel; however, a basic understanding of the framework will definitely help.
+**Wave** is built on top of the popular Laravel Framework. It's not necessary that you know Laravel; however, a basic understanding of the framework will definitely help.
-Building apps with Wave is not just efficientβitβs also very fun and exciting! Wave has a ton of features that will save you hundreds of hours. Let's go over a few of those key features below.
+Building apps with Wave should be fun and exciting! It has a ton of features to save you hundreds of hours, so let's breifly cover the features that will be covering in the docs.
+
## Key Features
-### Page-Based Routing
+Here's an overview of Wave's key features, which we'll explore in more detail later.
-Static uses a simple page-based routing system where each route is mapped to a file inside of the pages directory. With a structure like this:
+
+### Authentication
-
+Wave ships with authentication allowing users to Login, Register, Verify Email, Password Reset/Confirmation, and enable Two-Factor authentication.
-Your new site will have the following routes available:
+### User Management
-
+Users can have roles and permissions to access certain parts of your app. Wave also includes features for impersonation, user management, and user profiles.
-
+You can easily integrate Stripe or Paddle into your application. Create subscription plans and associate them with user roles to control access to specific features.
-### Includes
+### Changelog
-Create re-usable HTML partials with the `` tag. Specify the HTML file with the `src` attribute.
+Creating a changelog is a great way to notify users about new features and fixes while keeping yourself accountable. Document your progress in the changelog.
-```
-
+### Blog
-
-
+Write blog posts and attract free traffic from search engines. Share your knowledge about technology and tools as you build your SaaS.
-
-```
+### API
-
+API tokens can be created for API access. These tokens are used to generate Bearer tokens for authenticating future API requests.
-## Start your first site
+### Admin
-Getting started with Static is super easy. The first thing that you'll want to do is install the **Static CLI** command globally. Make sure you have the pre-requisites installed, and then inside of your command line you can run:
+Wave leverages FilamentPHP for admin CRUD functionality. You may also use the Table Builder, Form Builder, Notifications, and more within theme files.
-
npm install-g@devdojo/static
-
+### Themes
-Now that you have the **Static CLI** command installed you can create a new static website by running:
+Customize your app's look and feel with Wave's theming system. Each theme in `resources/views/theme` includes its own assets and views.
-
staticnewfolder-name
-
-You can run this command from any directory and it will create a new website inside of the `folder-name` that you specified.
+## Demo
+
+View the demo here. The demo utilizes the sandbox billing features, allowing you to test the process. Install a local copy to get a full picture of building an app using Wave.
+
+## Installation
-Boom π₯ That's it you're now ready to start building your next masterpeice.
\ No newline at end of file
+Next, let's dive into installing a local copy of Wave.
\ No newline at end of file
diff --git a/content/docs/install.md b/content/docs/install.md
index 73f92ab..79edbd7 100644
--- a/content/docs/install.md
+++ b/content/docs/install.md
@@ -1,91 +1,67 @@
---
-title: Installing Static
-description: Learn how to install Static and start using it to build your next website.
-nextTitle: 'Page Based Routing'
-nextURL: '/docs/features/page-based-routing'
+title: Installing Wave
+description: Learn how to install Wave
prevTitle: 'Getting Started'
prevURL: '/docs/getting-started'
+nextTitle: 'Local Development'
+nextURL: '/docs/local-dev'
---
-
-
-
-
Installation
-
Installing Static is very easy. There are a few things you'll need in order to make this journey as seemless as possible. Here are a few pre-requisites.
-
-
+# Installing Wave
-## Installing Static
+Before installation you need a local PHP development environment. The easiest way to do this is to download and install Laravel Herd. Once your local environment is set up, we can move on to the next step and download Wave.
-Installing Static is very easy. There are a few things you'll need in order to make this journey as seemless as possible. Here are a few pre-requisites.
+## Download Wave
-## Pre-requisites
+To download a fresh copy of Wave, click the button below. You can also find download links to all versions here.
-- **Node.js** - A fresh copy of NodeJS installed on your machine.
-- **Text Editor** - A code editor like VS Code or Sublime Text.
-- **Terminal** - A basic understanding of Terminal or Command Prompt.
+Download Wave V3
+After downloading, follow these steps to finish the installation:
-## Installation
+1. Unzip the downloaded file.
+2. Rename the unzipped folder to any name you prefer.
+3. Move the renamed folder to one of your site directories. For example, you can move it to `~/Herd`.
+4. Open your browser and visit `foldername.test` to start the installation process. Remember to replace `foldername` with the actual name of the folder.
-Simply open your terminal or command prompt and paste the following command:
+> π Thatβs it! Wave is now installed. If you encounter any errors during the automated installer, continue reading; otherwise, skip to the **Database** section
-```
-npm install -g @devdojo/static
-```
-
-Press Enter and in a few seconds **Static** will be installed on your machine. You can verify that Static is installed by running the following command:
-
-```
-static --version
-```
-
-This command will display the current version installed on your machine.
-
-## Static Commands
-
-After you've installed Static you'll have a few new commands available in your arsenal:
-
-- **static new** - Create a new Static website
-- **static dev** - Start a Static Development Server in the current directory
-- **static build** - Build your site and make it ready for production
-
-
-### Static New
+---
-This command will create a new Static website in a new folder:
+If receive an error when trying to run through the automated installer, you may need to run the following commands from your project folder:
+```bash
+cp .env.example .env
+composer install
```
-static new folder-name
-```
-
-You will pass one argument to the `static new` command which will be the **folder-name** you wish to create and install a static website. You can place this folder anywhere on your computer.
-> Some people like to create an easy to find Sites folder on their machine. This is where they will store all their local websites. It's totally up to as to where you want to store your websites.
+Then, visit the project URL in the browser to finish the installation.
-### Static Dev
+## Database
-This command will start a dev server inside of the current folder. As an example, say that we had a website created at `~/Sites/radical`, we will want to be inside that folder `cd ~/Sites/radical`, and run:
+By default Wave uses an `SQLite` connection stored at `database/database.sqlite`. If you wish, you can change this connection from inside your `.env` file. As an example, this is how a MySQL connection will look:
+```bash
+CONNECTION=mysql
+DB_HOST=127.0.0.1
+DB_PORT=3306
+DB_DATABASE=database-name
+DB_USERNAME=root
+DB_PASSWORD=
```
-static dev
-```
-
-You'll see a new message that says `Server running at http://localhost:3000`. This means that you can now navigate to **http://localhost:3000** in your browser to see a live working version of your website.
-### Static Build
+In most cases `SQLite` will work totally fine.
-This command will build your website into a new `_site` folder. All the assets and HTML files for your newly built website will be added to this folder. Using the example project from the previous section we could build our site by running the following commands:
+
+## Logging into your Application
-```
-cd ~/Sites/radical
-static build
-```
+After installing Wave, you should automatically be logged in as the admin user. If you need to log in again, you can use the following credentials:
-You should see a message that says your new website has been successfully built. You can now move the contents of the `_site` folder to the hosting solution of your choice. This could be an Amazon S3 bucket or Github pages.
+- **email**: admin@admin.com
+- **password**: password
-> If you want to build your site and host it on Github Pages, we actually have an action for that, which can make this process as simple as possible.
+Once you've logged in, you can modify the admin email, username, and password by accessing the settings section within the user menu.
---
-Those are the basic commands that you'll be using to develop and build your awesome new websites. Next, we'll dive into all the goodies that you get with Static.
\ No newline at end of file
+Next, we'll cover a few more local development commands.
\ No newline at end of file
diff --git a/content/docs/local-dev.md b/content/docs/local-dev.md
new file mode 100644
index 0000000..2fae8e9
--- /dev/null
+++ b/content/docs/local-dev.md
@@ -0,0 +1,47 @@
+---
+title: Local Development
+description: Learn about the steps you need to perform local development on your app
+prevTitle: 'Installation'
+prevURL: '/docs/install'
+nextTitle: 'Authentication'
+nextURL: '/docs/auth'
+---
+
+# Local Development
+
+Wave leverages all the latest technologies of a Laravel 11 application. This includes running Vite for compiling your local assets. Let's learn more about the commands you need to run to compile your assets and get hot reloading working.
+
+## Install Node Dependencies
+
+From your project folder, run the following command:
+
+```shell
+npm install
+```
+
+This will install all the dependencies that are definied inside of the package.json file which include Tailwind, Alpine, and Vite.
+
+## Start your Asset Watcher
+
+After you've installed the node dependencies, you'll then need to run:
+
+```
+npm run dev
+```
+
+This will start your assets watcher which checks for changes made to your codebase and hot-reloads the current page you are viewing. It will also check all the tailwind CSS classes that need to be used in your project and inject them into your page.
+
+## Building Assets for Production
+
+When you are ready to build your assets and push your code to production you will want to run:
+
+```
+npm run build
+```
+
+This will compile all your assets and save them to a minified file, making your application run quicker and better optimized for SEO.
+
+## Themes
+
+Wave has the concept of **Themes** which means you can change the way your application looks by changing your theme. When you start your asset watcher or build your assets it will watch and build the assets for the current active theme. We'll cover this in more detail in the themes section π
+
diff --git a/includes/docs-sidebar.html b/includes/docs-sidebar.html
index d7e0012..2c3e915 100644
--- a/includes/docs-sidebar.html
+++ b/includes/docs-sidebar.html
@@ -1,28 +1,41 @@
- 
- Collections are stored in the collections folder. Don't see the collections folder? Simply create a new folder called collections in the root of your project.
-
- 
- 
- If you have a page template located at /pages/blog/index.html and you want to use a separate template for the content page, you can add a file called [content].html inside that folder, and it will be used instead of the index.html
-
-
- Fun Fact:
- Under the hood content loops will generate collections at run time. This is why collection loops and content loops function the same.
-
-
- 
- 
- 
- 
- 
- 
-If you haven't yet, be sure to give us a star on Github. The more stars we get π€© the more time we can spend on making Wave the best SaaS Starter Kit available.
+Be sure to give us a star on Github. The more stars we get π€© the more time we can spend on making Wave even better.
-