205 lines
4.2 KiB
Markdown
205 lines
4.2 KiB
Markdown
# 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.
|