Skip to content

Commit 602beca

Browse files
glennmichael123glennmichael123
committed
chore: wip
1 parent 7e1f611 commit 602beca

File tree

3 files changed

+146
-0
lines changed

3 files changed

+146
-0
lines changed

‎resources/functions/sample.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -430,3 +430,60 @@ export const recentActivity = [
430430
icon: 'CalendarIcon',
431431
},
432432
]
433+
434+
export const blogPosts = ref([
435+
{
436+
id: 1,
437+
author: {
438+
id: 1,
439+
name: 'Michael Chen',
440+
imageUrl: 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
441+
},
442+
title: 'Understanding Judicial Ethics in Modern Courts',
443+
content: `The landscape of judicial ethics has evolved significantly in recent years, presenting new challenges and considerations for both judges and legal professionals. This article explores the fundamental principles of judicial ethics and their application in today's complex legal environment.
444+
445+
Key areas of focus include:
446+
- The role of technology in judicial decision-making
447+
- Balancing transparency with privacy concerns
448+
- Managing conflicts of interest in an interconnected world
449+
- The impact of social media on judicial conduct`,
450+
date: '2h ago',
451+
dateTime: '2024-02-20T10:00',
452+
},
453+
{
454+
id: 2,
455+
author: {
456+
id: 2,
457+
name: 'Sarah Williams',
458+
imageUrl: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
459+
},
460+
title: 'The Future of Court Technology',
461+
content: `As courts continue to modernize, technology plays an increasingly vital role in the administration of justice. This article examines emerging trends in court technology and their implications for the legal system.
462+
463+
Topics covered:
464+
- Virtual courtrooms and remote proceedings
465+
- AI-assisted legal research and analysis
466+
- Digital evidence management systems
467+
- Cybersecurity in court operations`,
468+
date: '4h ago',
469+
dateTime: '2024-02-20T08:00',
470+
},
471+
{
472+
id: 3,
473+
author: {
474+
id: 3,
475+
name: 'David Rodriguez',
476+
imageUrl: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
477+
},
478+
title: 'Access to Justice: Breaking Down Barriers',
479+
content: `Ensuring equal access to justice remains one of the most pressing challenges in our legal system. This article explores innovative approaches to making legal services more accessible to all citizens.
480+
481+
Key initiatives discussed:
482+
- Pro bono programs and legal aid services
483+
- Simplified court procedures
484+
- Community legal education
485+
- Technology-driven solutions for access`,
486+
date: '1d ago',
487+
dateTime: '2024-02-19T14:30',
488+
},
489+
])

‎resources/views/blog/index.vue‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<script setup lang="ts">
2+
import { blogPosts } from '../../functions/sample'
3+
4+
defineOptions({
5+
name: 'BlogPage',
6+
})
7+
8+
useHead({
9+
title: 'Blog - The Chamber of Secrets',
10+
meta: [
11+
{ name: 'description', content: 'Latest articles and insights about the judicial system.' },
12+
],
13+
})
14+
</script>
15+
16+
<template>
17+
<div class="min-h-screen">
18+
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8 pb-32">
19+
<!-- Header Section -->
20+
<div class="text-center mb-16">
21+
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">Blog</h1>
22+
<p class="mt-4 text-lg text-gray-600">Latest articles and insights about the judicial system</p>
23+
</div>
24+
25+
<!-- Blog Posts List -->
26+
<div class="space-y-12">
27+
<router-link
28+
v-for="post in blogPosts"
29+
:key="post.id"
30+
:to="`/blog/${post.id}`"
31+
class="block group"
32+
>
33+
<article class="relative isolate flex flex-col gap-8 lg:flex-row rounded-2xl p-6 hover:bg-gray-50 transition-all duration-200">
34+
<div class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0">
35+
<img :src="post.author.imageUrl" :alt="post.author.name" class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover">
36+
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
37+
</div>
38+
<div class="flex-1">
39+
<div class="flex items-center gap-x-4 text-xs">
40+
<time :datetime="post.dateTime" class="text-gray-500">{{ post.date }}</time>
41+
</div>
42+
<div class="group relative max-w-xl">
43+
<h3 class="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-softBrown transition-colors duration-200">
44+
{{ post.title }}
45+
</h3>
46+
<div class="mt-5 flex items-center gap-x-4">
47+
<div class="text-sm leading-6">
48+
<p class="font-semibold text-gray-900">
49+
{{ post.author.name }}
50+
</p>
51+
</div>
52+
</div>
53+
<p class="mt-5 text-sm leading-6 text-gray-600 line-clamp-3">{{ post.content }}</p>
54+
</div>
55+
</div>
56+
</article>
57+
</router-link>
58+
</div>
59+
60+
<!-- Pagination -->
61+
<div class="mt-16">
62+
<nav class="flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">
63+
<div class="-mt-px flex w-0 flex-1">
64+
<a href="#" class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
65+
<svg class="mr-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
66+
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.06l-4.5-4.25a.75.75 0 010-1.06l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
67+
</svg>
68+
Previous
69+
</a>
70+
</div>
71+
<div class="hidden md:-mt-px md:flex">
72+
<a href="#" class="inline-flex items-center border-t-2 border-soft-brown px-4 pt-4 text-sm font-medium text-soft-brown">1</a>
73+
<a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">2</a>
74+
<a href="#" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">3</a>
75+
</div>
76+
<div class="-mt-px flex w-0 flex-1 justify-end">
77+
<a href="#" class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
78+
Next
79+
<svg class="ml-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
80+
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
81+
</svg>
82+
</a>
83+
</div>
84+
</nav>
85+
</div>
86+
</div>
87+
</div>
88+
</template>

‎storage/framework/types/router.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ declare module 'vue-router/auto-routes' {
2222
'/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue<true> }, { all: ParamValue<false> }>,
2323
'/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
2424
'/article/[id]': RouteRecordInfo<'/article/[id]', '/article/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
25+
'/blog/': RouteRecordInfo<'/blog/', '/blog', Record<never, never>, Record<never, never>>,
2526
'/coming-soon': RouteRecordInfo<'/coming-soon', '/coming-soon', Record<never, never>, Record<never, never>>,
2627
'/court-houses/': RouteRecordInfo<'/court-houses/', '/court-houses', Record<never, never>, Record<never, never>>,
2728
'/judges/': RouteRecordInfo<'/judges/', '/judges', Record<never, never>, Record<never, never>>,

0 commit comments

Comments
 (0)