moreminimore-website/CONTENT-GUIDE.md

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/:

---
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

---
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:

<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:

---
<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:

<a href="/services">ดูบริการของเรา</a>

Analytics

Google Analytics or other analytics can be added in src/layouts/Layout.astro:

<!-- 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.