Skip to content

Commit

Permalink
Update Tailwind CSS version, enhance Markdown styling, and improve Bl…
Browse files Browse the repository at this point in the history 
…ogSection component structure
  • Loading branch information
@abdessamadbettal
abdessamadbettal committed Dec 13, 2024
1 parent b6d23a1 commit 3960b39
Show file tree
Hide file tree
Showing 6 changed files with 32 additions and 31 deletions.
2 changes: 1 addition & 1 deletion app/Helpers/MarkdownHelper.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ public static function convertToHtml(string $markdown): string
'target' => '_blank',
],
BlockQuote::class => [
'class' => 'border-l-4 text-slate-400 mt-3 p-3 italic border-x-4 border-red-500 rounded-ss-xl rounded-ee-xl',
'class' => 'border-l-4 text-slate-400 mt-3 p-4 italic border-x-4 border-red-500 rounded-ss-xl rounded-ee-xl',
],
Strong::class => [
'class' => 'text-primary-600',
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"concurrently": "^9.0.1",
"laravel-vite-plugin": "^1.0",
"postcss": "^8.4.31",
"tailwindcss": "^3.2.1",
"tailwindcss": "^3.4.16",
"vite": "^5.0",
"vue": "^3.4.0"
},
Expand Down
3 changes: 2 additions & 1 deletion resources/js/Components/Blog/BlogSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ import { Link } from '@inertiajs/vue3';
export default {
name: 'BlogSection',
components: {
BlogCard
BlogCard,
Link
},
props: {
posts: {
Expand Down
49 changes: 23 additions & 26 deletions resources/js/Pages/Post/Post.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ const post = computed(() => props.post.data);
<Head title="Post detail" />

<section
class="relative table w-full items-center py-36 bg-[url('../../assets/images/bg/cta.jpg')] bg-top bg-no-repeat bg-cover">
<div class="absolute inset-0 bg-gradient-to-b from-slate-900/60 via-slate-900/80 to-slate-900"></div>
<div class="container relative">
class="relative table w-full items-center py-36 bg-[url('../../assets/images/bg/cta.jpg')] bg-top bg-no-repeat bg-cover">
<div class="absolute inset-0 bg-gradient-to-b from-slate-900/60 via-slate-900/80 to-slate-900"></div>
<div class="container relative">
<div class="grid grid-cols-1 pb-8 text-center mt-10">
<h3 class="text-4xl leading-normal tracking-wider font-semibold text-white">
<span>{{ post?.name }}</span>
Expand All @@ -39,13 +39,13 @@ const post = computed(() => props.post.data);
<li class="inline-block text-white/50 mx-5">
<span class="text-white block">{{ $t('author') }} :</span>
<span class="block">
<span >{{ post?.author?.name }}</span>
<span>{{ post?.author?.name }}</span>
</span>
</li>
<li class="inline-block text-white/50 mx-5">
<span class="text-white block">{{ $t('date') }} :</span>
<span class="block">
<span >{{ new Date(post?.created_at).toLocaleDateString() }}</span>
<span>{{ new Date(post?.created_at).toLocaleDateString() }}</span>
</span>
</li>
<li class="inline-block text-white/50 mx-5">
Expand All @@ -68,32 +68,30 @@ const post = computed(() => props.post.data);
<i class="mdi mdi-chevron-right"></i>
</li>
<li class="inline-block uppercase text-[13px] font-bold duration-500 ease-in-out text-white"
aria-current="page">
{{ $t('blog_detail') }}
</li>
</ul>
</div>
</section>

<section class="relative md:py-24 py-16">
<div class="container">
<div class="grid md:grid-cols-12 grid-cols-1 gap-6">
<div class="lg:col-span-8 md:col-span-6">
<div class="relative overflow-hidden rounded-md shadow dark:shadow-gray-800">
<img :src="post.image" alt="">

<div class="p-6">
<div class="">
<div v-html="post.content" class="" id="content"></div>
aria-current="page">
{{ $t('blog_detail') }}
</li>
</ul>
</div>
</section>

<section class="relative md:py-24 py-16">
<div class="container">
<div class="grid md:grid-cols-12 grid-cols-1 gap-6">
<div class="lg:col-span-8 md:col-span-6">
<div class="relative overflow-hidden rounded-md shadow dark:shadow-gray-800">
<img :src="post.image" alt="">

<div class="p-6">
<div v-html="post.content" id="content"></div>
<div class="flex flex-wrap gap-2 mt-2">
<Tag v-for="tag in post?.tags" :key="tag.id" :name="tag.name" :type="tag.type" />
</div>
</div>
</div>
</div>


<ContactForm />
<!-- <ContactForm /> -->
</div>

<div class="lg:col-span-4 md:col-span-6">
Expand All @@ -103,8 +101,7 @@ const post = computed(() => props.post.data);
{{ $t('author') }}
</h5>
<div class="text-center mt-8">
<img :src="post?.author?.avatar" class="h-20 w-20 mx-auto rounded-full shadow mb-4"
alt="">
<img :src="post?.author?.avatar" class="h-20 w-20 mx-auto rounded-full shadow mb-4" alt="">

<a href=""
class="text-lg font-medium hover:text-primary-500 transition-all duration-500 ease-in-out h5">
Expand Down
5 changes: 4 additions & 1 deletion tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,11 @@ export default {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
tajawal: ['Tajawal', 'serif'],
},
borderRadius: {
'ss-xl': '1.5rem',
'ee-xl': '1.5rem',
},
colors: {

primary: {
'100': '#ffefc6',
'200': '#ffdf88',
Expand Down

0 comments on commit 3960b39

Please sign in to comment.