Refactor navbar and footer configuration to utilize new enable flags in .Site.Data

This commit is contained in:
2025-07-29 11:24:51 -08:00
parent 08fc1f2bb6
commit 2eff84ae2f
5 changed files with 382 additions and 0 deletions

124
GITEA_SETUP.md Normal file
View File

@@ -0,0 +1,124 @@
# Gitea Authentication Setup for BeardedTek
This guide will help you set up Sveltia CMS with your Gitea instance at `https://git.beardedtek.com`.
## ✅ Current Configuration
Your Sveltia CMS is now configured to use:
- **Gitea Instance**: `https://git.beardedtek.com`
- **Repository**: `beardedtek/flowbite-beardedtek.com`
- **Backend**: GitLab (compatible with Gitea)
- **API Endpoint**: `https://git.beardedtek.com/api/v1`
- **Auth Endpoint**: `https://git.beardedtek.com/login/oauth/authorize`
## 🔧 Setup Steps
### 1. Create Gitea OAuth Application
1. **Login to your Gitea instance**:
- Go to `https://git.beardedtek.com`
- Login with your account
2. **Create OAuth App**:
- Go to Settings → Applications
- Click "Create new OAuth application"
- Fill in the details:
- **Application Name**: `Sveltia CMS`
- **Redirect URIs**: `https://beardedtek.com/admin/` (or your domain)
- **Scopes**: Select `repo` and `user:email`
3. **Save the credentials**:
- Copy the **Client ID**
- Copy the **Client Secret**
### 2. Environment Variables
Add these environment variables to your deployment:
```bash
OAUTH_CLIENT_ID=your_gitea_client_id
OAUTH_CLIENT_SECRET=your_gitea_client_secret
```
### 3. Repository Access
Ensure your Gitea OAuth app has access to:
- Repository: `beardedtek/flowbite-beardedtek.com`
- Permissions: Read and write access
## 🚀 Testing
### Local Development
1. Run `hugo server`
2. Visit `http://localhost:1313/admin/`
3. You should see the Gitea login option
### Production
1. Deploy your site with the environment variables
2. Visit `https://beardedtek.com/admin/`
3. Click "Login with Gitea"
## 🔍 Troubleshooting
### Common Issues
1. **"Invalid redirect URI"**:
- Make sure the redirect URI in Gitea matches your site URL exactly
- Include the trailing slash: `https://beardedtek.com/admin/`
2. **"Repository not found"**:
- Verify the repo name is correct: `beardedtek/flowbite-beardedtek.com`
- Ensure the OAuth app has repository access
3. **"Authentication failed"**:
- Check that environment variables are set correctly
- Verify Client ID and Secret are correct
### Debug Steps
1. **Check Gitea API**:
- Visit `https://git.beardedtek.com/api/v1/version`
- Should return Gitea version info
2. **Test OAuth Flow**:
- Try logging in manually at `https://git.beardedtek.com/login/oauth/authorize`
- Verify your OAuth app appears in the list
3. **Check Repository Access**:
- Ensure your user has write access to the repository
- Check repository permissions in Gitea
## 📋 Configuration Files
### Main Config (`static/admin/config.yml`)
```yaml
backend:
name: gitlab
repo: beardedtek/flowbite-beardedtek.com
branch: main
base_url: https://git.beardedtek.com/api/v1
auth_endpoint: https://git.beardedtek.com/login/oauth/authorize
```
### Environment Variables Needed
```bash
OAUTH_CLIENT_ID=your_client_id_here
OAUTH_CLIENT_SECRET=your_client_secret_here
```
## 🎯 Next Steps
1. **Create the OAuth app** in your Gitea instance
2. **Set environment variables** in your deployment
3. **Test locally** with `hugo server`
4. **Deploy to production** and test the full flow
## 📞 Support
If you encounter issues:
1. Check the Gitea logs for authentication errors
2. Verify all URLs and credentials are correct
3. Test the OAuth flow manually in your browser
4. Check that your repository exists and is accessible
Your Sveltia CMS is now ready to use with Gitea authentication!

125
SVELTIA_CMS_SETUP.md Normal file
View File

@@ -0,0 +1,125 @@
# Sveltia CMS Setup for Hugo Site
This guide explains how to set up and use Sveltia CMS with your Hugo site.
## What's Been Installed
1. **Admin Panel**: Accessible at `/admin/` or `/admin`
2. **Configuration**: Located at `static/admin/config.yml`
3. **Media Uploads**: Files will be stored in `static/images/uploads/`
4. **Netlify Identity**: Added to your site for authentication
## Accessing the Admin Panel
1. Navigate to `http://localhost:1313/admin/` (when running Hugo locally)
2. Or visit `https://yourdomain.com/admin/` (when deployed)
## Collections Available
### Pages
- **About Page**: Edit content at `content/about/_index.md`
- **Contact Page**: Edit content at `content/contact/_index.md`
- **Rates Page**: Edit content at `content/rates/_index.md`
- **General Pages**: Create new pages in the `content/` folder
### Blog Posts
- Create and manage blog posts in `content/blog/`
- Posts will be automatically dated with the format: `YYYY-MM-DD-slug`
### Site Configuration
- **Navigation**: Edit `data/navbar.yml`
- **Footer**: Edit `data/footer.yml`
- **Contact Data**: Edit `data/contact.yml`
- **Rates Data**: Edit `data/rates.yml`
- **Site Config**: Edit `config.yml`
## Authentication Setup
### Gitea OAuth (Self-hosted Git)
This site is configured to use Gitea authentication with your instance at `https://git.beardedtek.com`:
1. **Create a Gitea OAuth App**:
- Go to `https://git.beardedtek.com` → Settings → Applications
- Create a new OAuth App
- Set Redirect URI to `https://beardedtek.com/admin/`
- Note your Client ID and Client Secret
2. **Environment Variables**:
- Set `OAUTH_CLIENT_ID` to your Gitea OAuth Client ID
- Set `OAUTH_CLIENT_SECRET` to your Gitea OAuth Client Secret
3. **Repository Access**:
- Ensure your OAuth app has access to `beardedtek/flowbite-beardedtek.com`
- Verify write permissions are enabled
### Local Development (No Authentication)
For development or testing:
- The CMS is configured with `local_backend: true`
- No authentication required for local development
- Simply run `hugo server` and visit `/admin/`
## File Structure Created
```
static/
├── admin/
│ ├── config.yml # Gitea CMS configuration
│ └── index.html # Admin panel HTML
└── images/
└── uploads/ # Media uploads directory
content/
└── admin/
└── _index.md # Admin page redirect
```
## Customization
### Adding New Collections
Edit `static/admin/config.yml` to add new content types:
```yaml
- name: "new_collection"
label: "New Collection"
folder: "content/new-section"
create: true
fields:
- {label: "Title", name: "title", widget: "string"}
- {label: "Body", name: "body", widget: "markdown"}
```
### Changing Media Upload Location
Update these lines in `static/admin/config.yml`:
```yaml
media_folder: "static/images/uploads"
public_folder: "/images/uploads"
```
## Troubleshooting
### Local Backend Issues
If you encounter issues with the local backend:
1. Make sure you're running Hugo locally
2. Check that the `static/admin/` directory exists
3. Verify the config.yml syntax is correct
### Authentication Issues
1. **Gitea OAuth**: Verify your Gitea instance URL and OAuth app configuration
2. **Local Development**: Make sure `local_backend: true` is set in config.yml
3. **Repo Access**: Ensure your OAuth app has proper repository access permissions
4. **Environment Variables**: Check that `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` are set correctly
## Next Steps
1. **Test Locally**: Run `hugo server` and visit `/admin/`
2. **Deploy**: Push your changes to your Git repository
3. **Configure Netlify**: Set up Identity and deployment settings
4. **Invite Users**: Add team members to manage content
## Resources
- [Sveltia CMS Documentation](https://github.com/sveltia/sveltia-cms)
- [Netlify Identity Documentation](https://docs.netlify.com/visitor-access/identity/)
- [Hugo Documentation](https://gohugo.io/documentation/)

5
content/admin/_index.md Normal file
View File

@@ -0,0 +1,5 @@
---
title: "Admin"
layout: "redirect"
redirect: "/admin/"
---

112
static/admin/config.yml Normal file
View File

@@ -0,0 +1,112 @@
backend:
name: gitlab
repo: beardedtek/flowbite-beardedtek.com
branch: main
base_url: https://git.beardedtek.com/api/v1
auth_endpoint: https://git.beardedtek.com/login/oauth/authorize
commit_messages:
create: 'content: create {{collection}} "{{slug}}"'
update: 'content: update {{collection}} "{{slug}}"'
delete: 'content: delete {{collection}} "{{slug}}"'
uploadMedia: 'media: upload {{path}}'
deleteMedia: 'media: delete {{path}}'
local_backend: true
media_folder: "static/images/uploads"
public_folder: "/images/uploads"
collections:
- name: "pages"
label: "Pages"
folder: "content"
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
fields:
- {label: "Layout", name: "layout", widget: "hidden", default: "page"}
- {label: "Title", name: "title", widget: "string"}
- {label: "Publish Date", name: "date", widget: "datetime", format: "YYYY-MM-DD", date_format: "YYYY-MM-DD", time_format: false}
- {label: "Draft", name: "draft", widget: "boolean", default: false}
- {label: "Body", name: "body", widget: "markdown"}
- name: "about"
label: "About Page"
file: "content/about/_index.md"
fields:
- {label: "Layout", name: "layout", widget: "hidden", default: "page"}
- {label: "Title", name: "title", widget: "string"}
- {label: "Body", name: "body", widget: "markdown"}
- name: "contact"
label: "Contact Page"
file: "content/contact/_index.md"
fields:
- {label: "Layout", name: "layout", widget: "hidden", default: "page"}
- {label: "Title", name: "title", widget: "string"}
- {label: "Body", name: "body", widget: "markdown"}
- name: "rates"
label: "Rates Page"
file: "content/rates/_index.md"
fields:
- {label: "Layout", name: "layout", widget: "hidden", default: "page"}
- {label: "Title", name: "title", widget: "string"}
- {label: "Body", name: "body", widget: "markdown"}
- name: "blog"
label: "Blog Posts"
folder: "content/blog"
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
fields:
- {label: "Layout", name: "layout", widget: "hidden", default: "single"}
- {label: "Title", name: "title", widget: "string"}
- {label: "Publish Date", name: "date", widget: "datetime", format: "YYYY-MM-DD", date_format: "YYYY-MM-DD", time_format: false}
- {label: "Draft", name: "draft", widget: "boolean", default: false}
- {label: "Description", name: "description", widget: "text", required: false}
- {label: "Tags", name: "tags", widget: "list", required: false}
- {label: "Body", name: "body", widget: "markdown"}
- name: "navbar"
label: "Navigation"
file: "data/navbar.yml"
fields:
- {label: "Enable Navigation", name: "enable", widget: "boolean", default: true}
- name: "footer"
label: "Footer"
file: "data/footer.yml"
fields:
- {label: "Enable Footer", name: "enable", widget: "boolean", default: true}
- name: "contact_data"
label: "Contact Data"
file: "data/contact.yml"
fields:
- {label: "Contact Information", name: "contact", widget: "object", fields: [
{label: "Email", name: "email", widget: "string"},
{label: "Phone", name: "phone", widget: "string"},
{label: "Address", name: "address", widget: "text"}
]}
- name: "rates_data"
label: "Rates Data"
file: "data/rates.yml"
fields:
- {label: "Rates Information", name: "rates", widget: "object", fields: [
{label: "Hourly Rate", name: "hourly", widget: "string"},
{label: "Service Description", name: "description", widget: "text"}
]}
- name: "config"
label: "Site Configuration"
file: "config.yml"
fields:
- {label: "Site Title", name: "title", widget: "string"}
- {label: "Base URL", name: "baseURL", widget: "string"}
- {label: "Language Code", name: "languageCode", widget: "string"}
- {label: "Parameters", name: "params", widget: "object", fields: [
{label: "Authors", name: "authors", widget: "string"},
{label: "Homepage", name: "homepage", widget: "string"},
{label: "Social Image Path", name: "social_image_path", widget: "string"}
]}

16
static/admin/index.html Normal file
View File

@@ -0,0 +1,16 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>
</head>
<body>
<script src="https://unpkg.com/sveltia-cms@0.92.0/dist/sveltia-cms.js"></script>
<script>
SveltiaCMS.init({
config: '/admin/config.yml'
});
</script>
</body>
</html>