Initial setup

README.md

@@ -1,110 +1,48 @@
 # Wagtail Shop Kit
 
-This is a starter kit for a Wagtail e-commerce project. It includes a Docker setup for local development, a basic project structure, and some useful tools and libraries.
-
-You can use this project as a starting point for your own Wagtail shop projects and build upon it as needed.
+An e-commerce starter kit built with Wagtail CMS and Django. This project provides a foundation for building online shops with a powerful content management system.
 
 ## Features
 
-- Docker Development Environment
-- Postgresql, Mysql or Sqlite3 Database
-- Frontend Node SASS and Javascript compilation
-- Pico CSS for almost classless styling
-- esbuild javascript bundler
-- Wagtail CMS v7.2
-- Django v5.2
+- **Wagtail CMS v7.2** - Powerful, flexible content management
+- **Django v5.2** - Robust Python web framework
+- **Docker Development Environment** - Containerized setup for consistency
+- **Multiple Database Options** - PostgreSQL, MySQL, or SQLite3
+- **Modern Frontend Stack** - SASS, esbuild, and Pico CSS
+- **E-commerce Ready** - Built with shop functionality in mind
 
 ![Wagtail Shop Kit](./docs/welcome-screen.jpg)
 
-## Requirements
-
-Required:
-
-- [Python >= 3.10](https://www.python.org/downloads/) (developemnt and deployment)
-- [Docker](https://www.docker.com/) (for local development)
-- [Docker Compose](https://docs.docker.com/compose/) (for local development)
-- [Node.js](https://nodejs.org/en/) (for frontend build tools) (for frontend build tools in development)
-
-Optional:
-- [Git](https://git-scm.com/) (optional, for version control)
-- [Make](https://www.gnu.org/software/make/) (optional, for running commands)
-- [NVM](https://github.com/nvm-sh/nvm) (optional, for managing Node versions)
-- [pre-commit](https://pre-commit.com/) (optional, for running code checks)
-- [UV](https://github.com/astral-sh/uv) (optional, for managing Python dependencies)
-
-## Getting started
-
-1. Clone this repository to a location on your computer
-2. Change into the project directory
-3. Copy `.env.example` to `.env` and choose your database (default is SQLite). Set `DATABASE=sqlite|postgres|mysql`.
-4. Run `make build` to build the Docker containers
-5. Run `make up` to start the Docker containers
-6. Run `make migrate` to apply database migrations
-7. Run `make superuser` to create a superuser
-8. Run `make run` to start the Django development server
-
-Note: `.env` is required. `make build` and `make up` validate environment variables via `make check-env` and will fail if required values are missing. See `.env.example` for all keys.
-
-### Quick start
-
-There is a make command to run most of the steps above in one go:
+## Quick Start
 
 ```bash
-make quickstart
-```
-
-You'll need to run `make superuser` separately.
-
-If you haven't changed `.env` the app will default to:
-
-- Use SQLite as the database
-- A mail utility will be available at [http://localhost:8025](http://localhost:8025)
-- A database management utility will be available at [http://localhost:8080](http://localhost:8080)
-
-## Working with the fronend
+# Copy environment file and configure
+cp .env.example .env
 
-The project uses [Pico CSS](https://picocss.com/) for styling. It's a minmal setup that you can build on.
-
-When you first run the project you may notice that no styling is applied. This is because the first time you run the project with `make up` the compiled frontend files might not be available. Just run the frontend build script and refresh the page. [Read on](./docs/frontend-development.md)
-
-## Working with the backend
-
-The project uses Docker for local development. The Wagtail project is in the `app` directory. The project is set up to use a SQLite database by default. You can change this to use Mysql or Postgres. [Read on](./docs/backend-development.md)
-
-## Management Commands
-
-The project includes custom Django management commands to help with development and testing. These commands can be used to generate sample content, manage data, and perform administrative tasks.
-
-For detailed documentation on all available commands, see [Management Commands Documentation](./docs/management-commands.md).
-
-### Quick Examples
-
-```bash
-# Create sample images and documents for testing
-docker exec -it wagtail-shop-kit-app-1 python manage.py create_sample_media
+# Build and start the project
+make quickstart
 
-# Reset all sample content
-docker exec -it wagtail-shop-kit-app-1 python manage.py create_sample_media --reset
+# Create admin user
+make superuser
 ```
 
-## View the site
-
-The site will be available at [http://localhost:8000](http://localhost:8000).
-
-The Wagtail admin interface will be available at [http://localhost:8000/admin](http://localhost:8000/admin).
-
-## Deployment
-
-Currently there is no deployment setup included in this project. You could try this [Wagtail deployment guide](https://docs.wagtail.org/en/stable/deployment/index.html) for some ideas.
+The site will be available at [http://localhost:8000](http://localhost:8000)
 
-## Deployment Examples
+## Documentation
 
-1.  How to deploy a Wagtail site to [PythonAnywhere](https://www.nickmoreton.co.uk/articles/deploy-wagtail-cms-to-pythonanywhere/), this does need you to have a paid account with PythonAnywhere.
-2. This [example](https://github.com/wagtail-examples/wsk-deploy-python-anywhere) is a fork of this starter kit which has documentation on how to deploy to PythonAnywhere, using a free account.
+- **[Installation Guide](./docs/installation.md)** - Detailed setup instructions
+- **[Backend Development](./docs/backend-development.md)** - Database configuration and backend development
+- **[Frontend Development](./docs/frontend-development.md)** - CSS/JS build process and styling
+- **[Management Commands](./docs/management-commands.md)** - Helpful commands for development
 
-## Contributing
+## Technology Stack
 
-If you have any suggestions or improvements, please open an issue or a pull request.
+- Python 3.10+
+- Django 5.2
+- Wagtail 7.2
+- Docker & Docker Compose
+- Node.js (SASS & esbuild)
+- Pico CSS
 
 ## License
 

app/home/models.py

@@ -1,9 +1,16 @@
 from wagtail import __version__ as WAGTAIL_VERSION
 from wagtail.models import Page
 
+from app.shop.models import ShopCategoryPage
+
 
 class HomePage(Page):
+    def get_featured_categories(self):
+        """Return featured shop categories"""
+        return ShopCategoryPage.objects.live().filter(featured=True).order_by("title")
+
     def get_context(self, request):
         context = super().get_context(request)
         context["wagtail_version"] = WAGTAIL_VERSION
+        context["featured_categories"] = self.get_featured_categories()
         return context

app/home/templates/home/home_page.html

@@ -3,136 +3,6 @@
 
 {% block body_class %}template-homepage{% endblock %}
 
-{% block extra_css %}
-
-{% comment %}
-Delete the line below if you're just getting started and want to remove the welcome screen!
-{% endcomment %}
-<style>
-    /*
-    * Only here to match the official home_page template
-    */
-    body {
-        background-color: var(--pico-color-sand-50);
-        min-height: 100vh;
-    }
-
-    header .welcome-grid {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 2rem;
-    }
-
-    a[role="logo"] svg {
-        width: 130px;
-    }
-
-    @keyframes pos {
-
-        0%,
-        100% {
-            transform: rotate(-6deg);
-        }
-
-        50% {
-            transform: rotate(6deg);
-        }
-    }
-
-    svg[role="egg"] {
-        color: var(--pico-primary);
-        animation: pos 3s ease infinite;
-        transform: translateY(50px);
-        transform-origin: 50% 80%;
-    }
-
-    .egg-banner {
-        text-align: center;
-    }
-
-    .egg-banner--features {
-        margin: 0;
-        padding: 0;
-
-        li {
-            display: flex;
-            gap: 10px;
-            align-items: center;
-
-            svg {
-                fill: var(--pico-primary);
-                stroke: var(--pico-primary);
-            }
-        }
-    }
-
-
-    footer.welcome-grid article {
-        text-align: center;
-    }
-
-    footer.welcome-grid article h2 {
-        font-size: 1rem;
-        text-decoration: underline;
-    }
-
-    footer.welcome-grid article a:hover h2,
-    footer.welcome-grid article a:hover p {
-        color: var(--pico-primary);
-    }
-
-    a[role="card"] svg {
-        width: 4rem;
-    }
-
-    @media screen and (min-width: 768px) {
-        a[role="logo"] svg {
-            width: 150px;
-        }
-
-        .egg-banner {
-            display: grid;
-            grid-template-columns: 4fr 8fr;
-            gap: 20px;
-            align-items: center;
-            text-align: inherit;
-        }
-    }
-
-    @media screen and (min-width: 1024px) {
-        footer.welcome-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 20px;
-        }
-
-        footer.welcome-grid svg {
-            width: 2rem;
-            color: --var(pico-primary);
-        }
-    }
-
-    @media screen and (min-width: 1280px) {
-        footer.welcome-grid article a {
-            display: grid;
-            grid-template-columns: 1fr 3fr;
-            align-items: center;
-        }
-
-        footer a[role="card"] svg {
-            width: 3rem;
-        }
-
-        footer hgroup {
-            text-align: left;
-            margin: 0;
-        }
-    }
-</style>
-{% endblock extra_css %}
-
 {% block content %}
 
 {% comment %}