devhub-az/devhub

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Api\ArticleTopController;

Route::prefix('articles')->group(
    function () {
        //
        Route::get('/{article_json}', [ArticleController::class, 'show'])->middleware('api')->name('articles.show');
        //
    }
);

<template>
    <div class="mb-3">
        <article-loading v-if="loading"/>
        <article v-if="!loading" id="article-content" class="w-full rounded border dark:border-gray-700">
            <div
                class="sticky top-0 flex justify-between rounded-t items-center border-b bg-afooter dark:bg-gray-800 dark:border-gray-700 px-3.5 py-1 z-10">
                <div class="inline-flex">
                    <a :href="'/@' + article.relationships.author.data.attributes.username"
                       class="inline-flex author-popover"
                       :data-id="article.relationships.author.data.id">
                        <img class="w-6 h-6 flex-none image-fit rounded lazyload"
                             :src="article.relationships.author.data.attributes.avatar" alt="user avatar">
                        <p class="text-sm pl-2 m-auto dark:text-gray-300">
                            {{ '@' + article.relationships.author.data.attributes.username }}</p>
                    </a>
    //
</template>

<script>
    //
    async created() {
        await this.getPost().then(() => {
            //
        });
        //
    },
    methods: {
        async getPost() {
            this.loading = true;
            await axios.get('/api/articles/' + this.slug).then(({data}) => {
                this.loading = false;
                if (data.length !== 0) {
                    this.article = data;
                }
            }).catch(error => {
                this.loading = false
                this.error = true
                // DEVELOPING PART
                if (error.response) {
                    console.log(error.response.data);
                    console.log(error.response.status);
                    console.log(error.response.headers);
                } else if (error.request) {
                    console.log(error.request);
                } else {
                    console.log('Error', error.message);
                }
            });
        }
    }
}
</script>

use Illuminate\Http\Resources\Json\JsonResource;

class ArticleResource extends JsonResource
{
    public function toArray($request)
    {
        return [
            'type' => 'articles',
            'id' => (string) $this->id,
            'attributes' => [
                'id' => (string) $this->id,
                'title' => $this->title,
                'slug' => $this->slug,
                'body' => $this->body, //\Str::words($this->body, 87, ''),
                'votes' => $this->voters()->count(),
                'upvotes' => $this->up ?? $this->upVoters()->count(),
                'downvotes' => $this->down ?? $this->downVoters()->count(),
                'views' => $this->views_count,
                'created_at' => $this->created_at,
                'is_up_voted' => auth()->guard('api')->id() ? auth()->guard('api')->user()->hasUpVoted($this->setAppends([])) : false,
                'is_down_voted' => auth()->guard('api')->id() ? auth()->guard('api')->user()->hasDownVoted($this->setAppends([]))
                    : false,
                'real' => $this->num,
            ],
            'relationships' => new ArticleRelationshipResource($this),
            'links' => [
                'self' => route('articles.show', ['article_json' => $this->id]),
            ],
        ];
    }
    //
}