Initial commit: MoreminiMore redesign with Astro
This commit is contained in:
Kunthawat Greethong
204
CONTENT-GUIDE.md
Normal file
204
CONTENT-GUIDE.md
Normal file
@@ -0,0 +1,204 @@
|
||||
# Content Guide - MoreminiMore Website
|
||||
|
||||
## Adding Blog Posts
|
||||
|
||||
Blog posts are located in `src/pages/category/` directory.
|
||||
|
||||
### Creating a New Blog Post
|
||||
|
||||
1. **Create a new `.astro` file** in `src/pages/category/`:
|
||||
|
||||
```astro
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="Your Post Title | MoreminiMore">
|
||||
<article class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h1 class="text-4xl font-bold mb-8 text-secondary">
|
||||
Your Post Title
|
||||
</h1>
|
||||
|
||||
<div class="prose prose-lg">
|
||||
<p>Your content here...</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
2. **Use a SEO-friendly URL**: `your-post-title.astro`
|
||||
|
||||
3. **Commit and push** - auto-deploys to production
|
||||
|
||||
### Blog Post Template
|
||||
|
||||
```astro
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="Post Title | MoreminiMore">
|
||||
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-secondary">
|
||||
Post Title Here
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 mb-8">
|
||||
Short description or subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto prose prose-lg">
|
||||
<!-- Your content here -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
## Writing Content
|
||||
|
||||
### Formatting
|
||||
|
||||
- Use **Tailwind prose** class for automatic formatting
|
||||
- Headings: `<h2>`, `<h3>`, etc.
|
||||
- Paragraphs: `<p>`
|
||||
- Lists: `<ul>`, `<ol>`, `<li>`
|
||||
- Links: `<a href="..." class="text-primary hover:underline">`
|
||||
|
||||
### Images
|
||||
|
||||
Place images in `public/images/` and reference them:
|
||||
|
||||
```html
|
||||
<img
|
||||
src="/images/your-image.jpg"
|
||||
alt="Description"
|
||||
class="rounded-lg shadow-md my-8"
|
||||
width="800"
|
||||
height="600"
|
||||
/>
|
||||
```
|
||||
|
||||
### Thai Language Support
|
||||
|
||||
All content supports Thai language. Use proper Unicode encoding (UTF-8).
|
||||
|
||||
## Updating Service Pages
|
||||
|
||||
Service pages are in `src/pages/`:
|
||||
|
||||
- `digital-transformation-consult.astro`
|
||||
- `online-marketing-consult.astro`
|
||||
- `website-development.astro`
|
||||
- `app-development.astro`
|
||||
- `chatbot-consult.astro`
|
||||
|
||||
### Editing Services
|
||||
|
||||
1. Open the relevant `.astro` file
|
||||
2. Update content in the `<section>` tags
|
||||
3. Save and commit
|
||||
4. Push to deploy
|
||||
|
||||
## Updating Homepage
|
||||
|
||||
Homepage: `src/pages/index.astro`
|
||||
|
||||
### Sections
|
||||
|
||||
1. **Hero** - Main value proposition
|
||||
2. **Strategy** - Three pillars (analyze, develop, increase)
|
||||
3. **Services** - Grid of service cards
|
||||
4. **Booking** - Contact form/TidyCal
|
||||
5. **CTA** - Call to action
|
||||
|
||||
## Contact Form
|
||||
|
||||
Currently using placeholder. To integrate TidyCal or other booking system:
|
||||
|
||||
1. Get embed code from provider
|
||||
2. Replace placeholder in `index.astro` and `contact-us.astro`
|
||||
3. Test locally
|
||||
4. Deploy
|
||||
|
||||
## Image Guidelines
|
||||
|
||||
### Size Recommendations
|
||||
|
||||
- **Hero images**: 1920x1080px max, compressed (< 500KB)
|
||||
- **Blog images**: 1200x630px (Open Graph size)
|
||||
- **Thumbnails**: 400x300px
|
||||
- **Icons**: SVG preferred
|
||||
|
||||
### Optimization
|
||||
|
||||
Use tools like:
|
||||
- TinyPNG for compression
|
||||
- Squoosh.app for optimization
|
||||
- SVG for icons and logos
|
||||
|
||||
### Alt Text
|
||||
|
||||
Always include descriptive alt text for accessibility and SEO.
|
||||
|
||||
## SEO Best Practices
|
||||
|
||||
### Meta Tags
|
||||
|
||||
Update in the Layout frontmatter:
|
||||
|
||||
```astro
|
||||
---
|
||||
<Layout
|
||||
title="Page Title | MoreminiMore"
|
||||
description="Meta description (150-160 characters)"
|
||||
>
|
||||
```
|
||||
|
||||
### Headings
|
||||
|
||||
- One `<h1>` per page
|
||||
- Use `<h2>`, `<h3>` hierarchy
|
||||
- Include keywords naturally
|
||||
|
||||
### Internal Linking
|
||||
|
||||
Link to related pages using relative URLs:
|
||||
|
||||
```html
|
||||
<a href="/services">ดูบริการของเรา</a>
|
||||
```
|
||||
|
||||
## Analytics
|
||||
|
||||
Google Analytics or other analytics can be added in `src/layouts/Layout.astro`:
|
||||
|
||||
```html
|
||||
<!-- Add before </head> -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
|
||||
```
|
||||
|
||||
## Content Checklist
|
||||
|
||||
Before publishing:
|
||||
|
||||
- [ ] Proofread content (Thai & English)
|
||||
- [ ] Check all links work
|
||||
- [ ] Images optimized and have alt text
|
||||
- [ ] Meta title and description set
|
||||
- [ ] Test on mobile
|
||||
- [ ] Test locally: `npm run dev`
|
||||
- [ ] Commit with clear message
|
||||
- [ ] Push and verify deployment
|
||||
|
||||
## Questions?
|
||||
|
||||
Contact the development team for content support.
|
||||
Reference in New Issue
Block a user