✨ Implement Articles Feature

Author: bleriotnoguia

app/controllers/articles_controller.ts

@@ -0,0 +1,48 @@
+import { HttpContext } from '@adonisjs/core/http'
+import { articleValidator } from '#validators/article_validator'
+import Article from '#models/article'
+import { DateTime } from 'luxon'
+
+export default class ArticlesController {
+  async index({ inertia, request }: HttpContext) {
+    const page = request.input('page', 1)
+    const articles = await Article.query()
+      .preload('author')
+      .where('is_published', true)
+      .orderBy('published_at', 'desc')
+      .paginate(page, 10)
+
+    return inertia.render('articles/index', {
+      articles: articles.toJSON(),
+    })
+  }
+
+  async create({ inertia }: HttpContext) {
+    return inertia.render('articles/create')
+  }
+
+  async store({ request, auth, response }: HttpContext) {
+    const data = await articleValidator.validate(request.all())
+    const article = new Article()
+
+    article.title = data.title
+    article.content = data.content
+    article.excerpt = data.excerpt
+    article.isPublished = data.isPublished || false
+    article.authorId = auth.user!.id
+    if (data.isPublished) {
+      article.publishedAt = DateTime.now()
+    }
+
+    await article.generateSlug()
+    await article.save()
+
+    return response.redirect().toRoute('articles.show', { slug: article.slug })
+  }
+
+  async show({ inertia, params }: HttpContext) {
+    const article = await Article.query().where('slug', params.slug).preload('author').firstOrFail()
+
+    return inertia.render('articles/[slug]', { article })
+  }
+}

app/models/article.ts

@@ -0,0 +1,45 @@
+import { DateTime } from 'luxon'
+import { BaseModel, belongsTo, column } from '@adonisjs/lucid/orm'
+import type { BelongsTo } from '@adonisjs/lucid/types/relations'
+import string from '@adonisjs/core/helpers/string'
+import User from '#models/user'
+
+export default class Article extends BaseModel {
+  @column({ isPrimary: true })
+  declare id: number
+
+  @column()
+  declare title: string
+
+  @column()
+  declare slug: string
+
+  @column()
+  declare content: string
+
+  @column()
+  declare excerpt: string
+
+  @column()
+  declare isPublished: boolean
+
+  @column()
+  declare authorId: number
+
+  @belongsTo(() => User, { foreignKey: 'authorId' })
+  declare author: BelongsTo<typeof User>
+
+  @column.dateTime({ autoCreate: true })
+  declare createdAt: DateTime
+
+  @column.dateTime({ autoCreate: true, autoUpdate: true })
+  declare updatedAt: DateTime
+
+  @column.dateTime()
+  declare publishedAt: DateTime | null
+
+  // Generate slug before saving
+  public async generateSlug() {
+    this.slug = string.slug(this.title)
+  }
+}

app/validators/article_validator.ts

@@ -0,0 +1,11 @@
+import vine from '@vinejs/vine'
+
+export const articleValidator = vine.compile(
+  vine.object({
+    title: vine.string().minLength(10).maxLength(255),
+    content: vine.string().minLength(100),
+    excerpt: vine.string().minLength(50).maxLength(160),
+    tags: vine.array(vine.string()),
+    isPublished: vine.boolean().optional(),
+  })
+)

database/migrations/17368394109899_create_articles_table.ts

@@ -0,0 +1,23 @@
+import { BaseSchema } from '@adonisjs/lucid/schema'
+
+export default class extends BaseSchema {
+  protected tableName = 'articles'
+
+  async up() {
+    this.schema.createTable(this.tableName, (table) => {
+      table.increments('id')
+      table.string('title').notNullable()
+      table.string('slug').unique().notNullable()
+      table.text('excerpt').notNullable()
+      table.text('content').notNullable()
+      table.integer('user_id').unsigned().references('id').inTable('users').onDelete('CASCADE')
+      table.boolean('is_published').defaultTo(false)
+      table.timestamp('published_at').nullable()
+      table.timestamps(true, true)
+    })
+  }
+
+  async down() {
+    this.schema.dropTable(this.tableName)
+  }
+}

database/migrations/1736839410999_add_author_id_to_articles.ts

@@ -0,0 +1,17 @@
+import { BaseSchema } from '@adonisjs/lucid/schema'
+
+export default class extends BaseSchema {
+  protected tableName = 'articles'
+
+  async up() {
+    this.schema.alterTable(this.tableName, (table) => {
+      table.integer('author_id').unsigned().references('id').inTable('users').onDelete('CASCADE')
+    })
+  }
+
+  async down() {
+    this.schema.alterTable(this.tableName, (table) => {
+      table.dropColumn('author_id')
+    })
+  }
+}

inertia/components/articles-section.tsx

@@ -0,0 +1,83 @@
+import { Link } from '@inertiajs/react'
+
+interface Article {
+  id: number
+  title: string
+  slug: string
+  excerpt: string
+  author: {
+    name: string
+    username: string
+  }
+  createdAt: string
+}
+
+interface ArticlesSectionProps {
+  articles: Article[]
+}
+
+export default function ArticlesSection({ articles }: ArticlesSectionProps) {
+  return (
+    <div className="bg-white py-12">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="lg:text-center">
+          <h2 className="text-3xl font-semibold text-gray-900">Articles Populaires</h2>
+          <p className="mt-4 text-lg text-gray-600">
+            Découvrez les articles les plus appréciés et partagés par les membres de la communauté
+          </p>
+        </div>
+
+        <div className="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          {articles.map((article) => (
+            <article
+              key={article.id}
+              className="flex flex-col rounded-lg shadow-lg overflow-hidden"
+            >
+              <div className="flex-1 bg-white p-6 flex flex-col justify-between">
+                <div className="flex-1">
+                  <Link href={`/articles/${article.slug}`} className="block mt-2">
+                    <p className="text-xl font-semibold text-gray-900">{article.title}</p>
+                    <p className="mt-3 text-base text-gray-500">{article.excerpt}</p>
+                  </Link>
+                </div>
+                <div className="mt-6 flex items-center">
+                  <div className="flex-shrink-0">
+                    <Link href={`/@${article.author.username}`}>
+                      <span className="sr-only">{article.author.name}</span>
+                      <img
+                        className="h-10 w-10 rounded-full"
+                        src={`https://ui-avatars.com/api/?name=${article.author.name}`}
+                        alt=""
+                      />
+                    </Link>
+                  </div>
+                  <div className="ml-3">
+                    <p className="text-sm font-medium text-gray-900">
+                      <Link href={`/@${article.author.username}`} className="hover:underline">
+                        {article.author.name}
+                      </Link>
+                    </p>
+                    <div className="flex space-x-1 text-sm text-gray-500">
+                      <time dateTime={article.createdAt}>
+                        {new Date(article.createdAt).toLocaleDateString()}
+                      </time>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+
+        <div className="mt-12 text-center">
+          <Link
+            href="/articles"
+            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200"
+          >
+            Voir tous les articles
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

inertia/components/articles/list.tsx

@@ -0,0 +1,112 @@
+import { Link } from '@inertiajs/react'
+
+interface Article {
+  id: number
+  title: string
+  slug: string
+  excerpt: string
+  author: {
+    name: string
+    username: string
+  }
+  publishedAt: string
+}
+
+interface ArticlesListProps {
+  articles: {
+    data: Article[]
+    meta: {
+      total: number
+      per_page: number
+      current_page: number
+      last_page: number
+    }
+  }
+}
+
+export default function ArticlesList({ articles }: ArticlesListProps) {
+  return (
+    <div className="mt-8 space-y-8">
+      {articles.data.map((article) => (
+        <article key={article.id} className="relative bg-white p-8 rounded-lg shadow-sm">
+          <div className="flex items-center gap-x-4 text-xs">
+            <time dateTime={article.publishedAt} className="text-gray-500">
+              {new Date(article.publishedAt).toLocaleDateString('fr-FR', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+              })}
+            </time>
+          </div>
+          <div className="group relative">
+            <h3 className="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
+              <Link href={`/articles/${article.slug}`}>
+                {/* <span className="absolute inset-0" /> */}
+                {article.title}
+              </Link>
+            </h3>
+            <p className="mt-5 line-clamp-3 text-sm leading-6 text-gray-600">{article.excerpt}</p>
+          </div>
+          <div className="mt-6 flex items-center gap-x-4">
+            <div className="flex items-center gap-x-4">
+              <img
+                src={`https://ui-avatars.com/api/?name=${article.author.name}`}
+                alt=""
+                className="h-10 w-10 rounded-full bg-gray-100"
+              />
+              <div className="text-sm leading-6">
+                <p className="font-semibold text-gray-900">
+                  <Link href={`/@${article.author.username}`}>
+                    {/* <span className="absolute inset-0" /> */}
+                    {article.author.name}
+                  </Link>
+                </p>
+              </div>
+            </div>
+          </div>
+        </article>
+      ))}
+
+      {/* Pagination */}
+      {articles.meta.last_page > 1 && (
+        <nav className="flex items-center justify-between border-t border-gray-200 px-4 sm:px-0 mt-8 pt-8">
+          <div className="-mt-px flex w-0 flex-1">
+            {articles.meta.current_page > 1 && (
+              <Link
+                href={`/articles?page=${articles.meta.current_page - 1}`}
+                className="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+              >
+                <span>Previous</span>
+              </Link>
+            )}
+          </div>
+          <div className="hidden md:-mt-px md:flex">
+            {[...Array(articles.meta.last_page)].map((_, i) => (
+              <Link
+                key={i}
+                href={`/articles?page=${i + 1}`}
+                className={`inline-flex items-center border-t-2 px-4 pt-4 text-sm font-medium ${
+                  articles.meta.current_page === i + 1
+                    ? 'border-indigo-500 text-indigo-600'
+                    : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
+                }`}
+              >
+                {i + 1}
+              </Link>
+            ))}
+          </div>
+          <div className="-mt-px flex w-0 flex-1 justify-end">
+            {articles.meta.current_page < articles.meta.last_page && (
+              <Link
+                href={`/articles?page=${articles.meta.current_page + 1}`}
+                className="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
+              >
+                <span>Next</span>
+              </Link>
+            )}
+          </div>
+        </nav>
+      )}
+    </div>
+  )
+}