generated from dwd/boilarplate-astro-tailwind
ch
This commit is contained in:
dev sp
34
src/pages/[id].astro
Normal file
34
src/pages/[id].astro
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
export async function getStaticPaths() {
|
||||
const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published');
|
||||
const data = await response.json();
|
||||
const finalData = data.data.map((n: { slug: string | undefined; })=>{
|
||||
return {params: {id:n.slug}}
|
||||
})
|
||||
return finalData;
|
||||
}
|
||||
const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published');
|
||||
const data = await response.json();
|
||||
const { id } = Astro.params;
|
||||
const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
|
||||
const items = data.data[idx];
|
||||
console.log(data.data[idx])
|
||||
---
|
||||
<Layout title={items.title}>
|
||||
<main>
|
||||
<section class="container mx-auto px-4 mt-16">
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
|
||||
<h2 class="text-xl py-2">{items.title}</h2>
|
||||
<img class="lg:w-[60%]" src={`https://api7.siliconpin.com/assets/${items.img}`} alt={items.title} />
|
||||
<p class="text-justify text-red-700 mt-4" set:html={items.content}></p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
section > div > p > p {
|
||||
text-align: justify;
|
||||
}
|
||||
</style>
|
||||
34
src/pages/article/[id].astro
Normal file
34
src/pages/article/[id].astro
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
export async function getStaticPaths() {
|
||||
const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=article');
|
||||
const data = await response.json();
|
||||
const finalData = data.data.map((n: { slug: string | undefined; })=>{
|
||||
return {params: {id:n.slug}}
|
||||
})
|
||||
return finalData;
|
||||
}
|
||||
const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=article');
|
||||
const data = await response.json();
|
||||
const { id } = Astro.params;
|
||||
const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
|
||||
const items = data.data[idx];
|
||||
console.log(data.data[idx])
|
||||
---
|
||||
<Layout title={items.title}>
|
||||
<main>
|
||||
<section class="container mx-auto px-4 mt-16">
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
|
||||
<h2 class="text-xl py-2">{items.title}</h2>
|
||||
<img class="lg:w-[60%]" src={`https://api7.siliconpin.com/assets/${items.img}`} alt={items.title} />
|
||||
<p class="text-justify text-red-700 mt-4" set:html={items.content}></p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
section > div > p > p {
|
||||
text-align: justify;
|
||||
}
|
||||
</style>
|
||||
56
src/pages/article/index.astro
Normal file
56
src/pages/article/index.astro
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
const fetchData = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=article');
|
||||
const dataJSON = await fetchData.json();
|
||||
const data = dataJSON.data;
|
||||
// const imageData = data.image;
|
||||
// const data = fetchDataJSON.data;
|
||||
// console.log()
|
||||
---
|
||||
|
||||
<Layout title="Barta News">
|
||||
<main>
|
||||
<section class="container mx-auto px-4">
|
||||
<div class="my-16">
|
||||
<span class="text-[#780a0a] font-bold" id="pageName"></span>
|
||||
<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined;}) =>
|
||||
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
|
||||
<div class="flex flex-col">
|
||||
<a href={`/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a>
|
||||
<h2 class="text-lg line-clamp-1">{items.title}</h2>
|
||||
<img class="aspect-video " src={`https://api7.siliconpin.com/assets/${items.img}`} alt=""/>
|
||||
<div class="h-[100px] overflow-y-hidden">
|
||||
<p id="" set:html={items.content}></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<a href={`/article/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<!-- <div class="flex flex-col">
|
||||
{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined;}) =>
|
||||
<div class="flex flex-col border-2 gap-6 p-6">
|
||||
<h1 class="border-b-4 border-[#780a0a] text-2xl font-bold">{items.heading}</h1>
|
||||
<h2 class="text-lg">{items.title}</h2>
|
||||
<img src={`https://api7.siliconpin.com/assets/${items.img}`} alt=""/>
|
||||
</div>
|
||||
)}
|
||||
</div> -->
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const pageName = window.location.href.split('/')[3];
|
||||
document.getElementById('pageName').innerHTML = '> ' + pageName
|
||||
// console.log(pageName)
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
109
src/pages/contact.astro
Normal file
109
src/pages/contact.astro
Normal file
@@ -0,0 +1,109 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
<Layout title="Get in Touch | Barta">
|
||||
<main>
|
||||
<div>
|
||||
<section class="container-fluid bg-gradient-to-t from-white to-[#05b3a450]">
|
||||
<div class="container mx-auto px-4 flex flex-col lg:flex-row place-content-between space-x-4">
|
||||
<div class="flex flex-col justify-center w-full">
|
||||
<div class="flex flex-col w-full">
|
||||
<h1 class="text-3xl lg:text-4xl font-bold">Get in Touch with Barta News Portal</h1>
|
||||
<!-- <h2 class="text-2xl md:text-3xl text-[#3084b5]">Connect with CICD Hosting: Let's Shape the Future of Your Web Presence Together</h2> -->
|
||||
<h3 class="text-xl text-justify pb-4">Feel free to drop us a line at Barta</h3>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto px-4 mt-16">
|
||||
<div class="flex flex-col p-6 text-xl max-w-xl ">
|
||||
<h3 class="border-b-4 border-[#780a0a] text-3xl mb-10 font-bold">Get In Touch</h3>
|
||||
<form method="post" id="contactForm" class="flex flex-col ">
|
||||
<div id="formSection" class="flex flex-col space-y-4 shadow-lg justify-center place-items-center">
|
||||
<div class="flex flex-col w-full">
|
||||
<label for="name">Name<span class="text-red-500">*</span></label>
|
||||
<input id="name" name="name" class="border-2 rounded-md py-2 border-gray-400 focus:outline-none focus:border-2 focus:border-[#780a0a]" type="text" required/>
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<label for="phone">phone<span class="text-red-500">*</span></label>
|
||||
<input id="phone" name="phone" class="border-2 rounded-md py-2 border-gray-400 focus:outline-none focus:border-2 focus:border-[#780a0a]" type="text" required/>
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<label for="email">email<span class="text-red-500">*</span></label>
|
||||
<input id="email" name="email" class="border-2 rounded-md py-2 border-gray-400 focus:outline-none focus:border-2 focus:border-[#780a0a]" type="email" required/>
|
||||
</div>
|
||||
<div class="flex flex-col w-full ">
|
||||
<label for="message">Write your message...</label>
|
||||
<textarea id="message" name="message" class="border-2 rounded-md py-2 border-gray-400 focus:outline-none focus:border-2 focus:border-[#780a0a]"></textarea>
|
||||
</div>
|
||||
<div class="flex flex-col w-full ">
|
||||
<input class="bg-[#780a0a] text-white py-2 px-6 rounded-lg cursor-pointer" type="submit" value="Submit" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="thankYouSection" style="display: none;">
|
||||
<p>Thank You!</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<script is:inline>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
const formSection = document.getElementById('formSection');
|
||||
const thankYouSection = document.getElementById('thankYouSection');
|
||||
const nameInput = document.getElementById('name');
|
||||
const emailInput = document.getElementById('email');
|
||||
const phoneInput = document.getElementById('phone');
|
||||
const contentInput = document.getElementById('message');
|
||||
|
||||
contactForm.addEventListener('submit', async function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
let username = nameInput.value; let userPhone = phoneInput.value; let userEmail = emailInput.value; let userMsg = contentInput.value;
|
||||
let formData = {
|
||||
'name' : username,
|
||||
'phone': userPhone,
|
||||
'email' : userEmail,
|
||||
'message' : userMsg
|
||||
}
|
||||
// fetch('https://apisp.dev2.cicdhosting.com/api/v2/storeFormData/?action=save',{
|
||||
// method: 'POST',
|
||||
// body: formData,
|
||||
// })
|
||||
// .then(response =>{
|
||||
// if(response.ok){
|
||||
// console.log('Form Submitted')
|
||||
// formSection.style.display = 'none';
|
||||
// thankYouSection.style.display = 'block';
|
||||
// } else{
|
||||
// console.error('an error occoured')
|
||||
// }
|
||||
// })
|
||||
|
||||
console.log("Form Data",formData, username, userPhone, userEmail, userMsg)
|
||||
|
||||
const url = 'https://api7.siliconpin.com/items/barta_contact';
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json'
|
||||
},
|
||||
body:JSON.stringify(formData),
|
||||
});
|
||||
if (response.ok) {
|
||||
console.log('Form Submitted')
|
||||
formSection.style.display = 'none';
|
||||
thankYouSection.style.display = 'block';
|
||||
console.log('Form data submitted successfully', response);
|
||||
} else {
|
||||
console.error('Failed to submit form data');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('An error occurred:', error);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -1,85 +1,52 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Card from '../components/Card.astro';
|
||||
import MainHeader from '../components/MainHeader.vue';
|
||||
import Footer from '../components/Footer.astro';
|
||||
const fetchData = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published');
|
||||
const dataJSON = await fetchData.json();
|
||||
const data = dataJSON.data;
|
||||
// const imageData = data.image;
|
||||
// const data = fetchDataJSON.data;
|
||||
// console.log()
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astro.">
|
||||
<MainHeader />
|
||||
<Layout title="Barta News">
|
||||
<main>
|
||||
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
|
||||
<p class="instructions">
|
||||
To get started, open the directory <code>src/pages</code> in your project.<br />
|
||||
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
|
||||
</p>
|
||||
<ul role="list" class="link-card-grid">
|
||||
<Card
|
||||
href="https://docs.astro.build/"
|
||||
title="Documentation"
|
||||
body="Learn how Astro works and explore the official API docs."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/integrations/"
|
||||
title="Integrations"
|
||||
body="Supercharge your project with new frameworks and libraries."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/themes/"
|
||||
title="Themes"
|
||||
body="Explore a galaxy of community-built starter themes."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/chat/"
|
||||
title="Community"
|
||||
body="Come say hi to our amazing Discord community. ❤️"
|
||||
/>
|
||||
</ul>
|
||||
<section class="container mx-auto px-4">
|
||||
<h1 class="text-4xl font-bold border-b-4 border-[#780A0A] my-16">Latest News</h1>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined;}) =>
|
||||
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
|
||||
<div class="flex flex-col">
|
||||
<a href={`/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a>
|
||||
<h2 class="text-lg line-clamp-1">{items.title}</h2>
|
||||
<img class="aspect-video " src={`https://api7.siliconpin.com/assets/${items.img}`} alt=""/>
|
||||
<div class="h-[100px] overflow-y-hidden">
|
||||
<p id="" set:html={items.content}></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<!-- <div class="flex flex-col">
|
||||
{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined;}) =>
|
||||
<div class="flex flex-col border-2 gap-6 p-6">
|
||||
<h1 class="border-b-4 border-[#780a0a] text-2xl font-bold">{items.heading}</h1>
|
||||
<h2 class="text-lg">{items.title}</h2>
|
||||
<img src={`https://api7.siliconpin.com/assets/${items.img}`} alt=""/>
|
||||
</div>
|
||||
)}
|
||||
</div> -->
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
|
||||
</script>
|
||||
<style>
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1.5rem;
|
||||
max-width: 60ch;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
.text-gradient {
|
||||
background-image: var(--accent-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 400%;
|
||||
background-position: 0%;
|
||||
}
|
||||
.instructions {
|
||||
line-height: 1.6;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid rgba(var(--accent), 25%);
|
||||
background-color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
.instructions code {
|
||||
font-size: 0.875em;
|
||||
font-weight: bold;
|
||||
background: rgba(var(--accent), 12%);
|
||||
color: rgb(var(--accent));
|
||||
border-radius: 4px;
|
||||
padding: 0.3em 0.45em;
|
||||
}
|
||||
.instructions strong {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
.link-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
34
src/pages/local/[id].astro
Normal file
34
src/pages/local/[id].astro
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
export async function getStaticPaths() {
|
||||
const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=local');
|
||||
const data = await response.json();
|
||||
const finalData = data.data.map((n: { slug: string | undefined; })=>{
|
||||
return {params: {id:n.slug}}
|
||||
})
|
||||
return finalData;
|
||||
}
|
||||
const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=local');
|
||||
const data = await response.json();
|
||||
const { id } = Astro.params;
|
||||
const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
|
||||
const items = data.data[idx];
|
||||
console.log(data.data[idx])
|
||||
---
|
||||
<Layout title={items.title}>
|
||||
<main>
|
||||
<section class="container mx-auto px-4 mt-16">
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
|
||||
<h2 class="text-xl py-2">{items.title}</h2>
|
||||
<img class="lg:w-[60%]" src={`https://api7.siliconpin.com/assets/${items.img}`} alt={items.title} />
|
||||
<p class="text-justify text-red-700 mt-4" set:html={items.content}></p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
section > div > p > p {
|
||||
text-align: justify;
|
||||
}
|
||||
</style>
|
||||
56
src/pages/local/index.astro
Normal file
56
src/pages/local/index.astro
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
const fetchData = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=local');
|
||||
const dataJSON = await fetchData.json();
|
||||
const data = dataJSON.data;
|
||||
// const imageData = data.image;
|
||||
// const data = fetchDataJSON.data;
|
||||
// console.log()
|
||||
---
|
||||
|
||||
<Layout title="Barta News">
|
||||
<main>
|
||||
<section class="container mx-auto px-4">
|
||||
<div class="my-16">
|
||||
<span class="text-[#780a0a] font-bold" id="pageName"></span>
|
||||
<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined;}) =>
|
||||
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
|
||||
<div class="flex flex-col">
|
||||
<a href={`/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a>
|
||||
<h2 class="text-lg line-clamp-1">{items.title}</h2>
|
||||
<img class="aspect-video " src={`https://api7.siliconpin.com/assets/${items.img}`} alt=""/>
|
||||
<div class="h-[100px] overflow-y-hidden">
|
||||
<p id="" set:html={items.content}></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<a href={`/local/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<!-- <div class="flex flex-col">
|
||||
{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined;}) =>
|
||||
<div class="flex flex-col border-2 gap-6 p-6">
|
||||
<h1 class="border-b-4 border-[#780a0a] text-2xl font-bold">{items.heading}</h1>
|
||||
<h2 class="text-lg">{items.title}</h2>
|
||||
<img src={`https://api7.siliconpin.com/assets/${items.img}`} alt=""/>
|
||||
</div>
|
||||
)}
|
||||
</div> -->
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const pageName = window.location.href.split('/')[3];
|
||||
document.getElementById('pageName').innerHTML = '> ' + pageName
|
||||
// console.log(pageName)
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
34
src/pages/national/[id].astro
Normal file
34
src/pages/national/[id].astro
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
export async function getStaticPaths() {
|
||||
const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=national');
|
||||
const data = await response.json();
|
||||
const finalData = data.data.map((n: { slug: string | undefined; })=>{
|
||||
return {params: {id:n.slug}}
|
||||
})
|
||||
return finalData;
|
||||
}
|
||||
const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=national');
|
||||
const data = await response.json();
|
||||
const { id } = Astro.params;
|
||||
const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
|
||||
const items = data.data[idx];
|
||||
console.log(data.data[idx])
|
||||
---
|
||||
<Layout title={items.title}>
|
||||
<main>
|
||||
<section class="container mx-auto px-4 mt-16">
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
|
||||
<h2 class="text-xl py-2">{items.title}</h2>
|
||||
<img class="lg:w-[60%]" src={`https://api7.siliconpin.com/assets/${items.img}`} alt={items.title} />
|
||||
<p class="text-justify text-red-700 mt-4" set:html={items.content}></p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
section > div > p > p {
|
||||
text-align: justify;
|
||||
}
|
||||
</style>
|
||||
56
src/pages/national/index.astro
Normal file
56
src/pages/national/index.astro
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
const fetchData = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=national');
|
||||
const dataJSON = await fetchData.json();
|
||||
const data = dataJSON.data;
|
||||
// const imageData = data.image;
|
||||
// const data = fetchDataJSON.data;
|
||||
// console.log()
|
||||
---
|
||||
|
||||
<Layout title="Barta News">
|
||||
<main>
|
||||
<section class="container mx-auto px-4">
|
||||
<div class="my-16">
|
||||
<span class="text-[#780a0a] font-bold" id="pageName"></span>
|
||||
<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined;}) =>
|
||||
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
|
||||
<div class="flex flex-col">
|
||||
<a href={`/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a>
|
||||
<h2 class="text-lg line-clamp-1">{items.title}</h2>
|
||||
<img class="aspect-video " src={`https://api7.siliconpin.com/assets/${items.img}`} alt=""/>
|
||||
<div class="h-[100px] overflow-y-hidden">
|
||||
<p id="" set:html={items.content}></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<a href={`/national/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<!-- <div class="flex flex-col">
|
||||
{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined;}) =>
|
||||
<div class="flex flex-col border-2 gap-6 p-6">
|
||||
<h1 class="border-b-4 border-[#780a0a] text-2xl font-bold">{items.heading}</h1>
|
||||
<h2 class="text-lg">{items.title}</h2>
|
||||
<img src={`https://api7.siliconpin.com/assets/${items.img}`} alt=""/>
|
||||
</div>
|
||||
)}
|
||||
</div> -->
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const pageName = window.location.href.split('/')[3];
|
||||
document.getElementById('pageName').innerHTML = '> ' + pageName
|
||||
// console.log(pageName)
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
34
src/pages/politics/[id].astro
Normal file
34
src/pages/politics/[id].astro
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
export async function getStaticPaths() {
|
||||
const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=politics');
|
||||
const data = await response.json();
|
||||
const finalData = data.data.map((n: { slug: string | undefined; })=>{
|
||||
return {params: {id:n.slug}}
|
||||
})
|
||||
return finalData;
|
||||
}
|
||||
const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=politics');
|
||||
const data = await response.json();
|
||||
const { id } = Astro.params;
|
||||
const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
|
||||
const items = data.data[idx];
|
||||
console.log(data.data[idx])
|
||||
---
|
||||
<Layout title={items.title}>
|
||||
<main>
|
||||
<section class="container mx-auto px-4 mt-16">
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
|
||||
<h2 class="text-xl py-2">{items.title}</h2>
|
||||
<img class="lg:w-[60%]" src={`https://api7.siliconpin.com/assets/${items.img}`} alt={items.title} />
|
||||
<p class="text-justify text-red-700 mt-4" set:html={items.content}></p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
section > div > p > p {
|
||||
text-align: justify;
|
||||
}
|
||||
</style>
|
||||
56
src/pages/politics/index.astro
Normal file
56
src/pages/politics/index.astro
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
const fetchData = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=politics');
|
||||
const dataJSON = await fetchData.json();
|
||||
const data = dataJSON.data;
|
||||
// const imageData = data.image;
|
||||
// const data = fetchDataJSON.data;
|
||||
// console.log()
|
||||
---
|
||||
|
||||
<Layout title="Barta News">
|
||||
<main>
|
||||
<section class="container mx-auto px-4">
|
||||
<div class="my-16">
|
||||
<span class="text-[#780a0a] font-bold" id="pageName"></span>
|
||||
<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined;}) =>
|
||||
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
|
||||
<div class="flex flex-col">
|
||||
<a href={`/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a>
|
||||
<h2 class="text-lg line-clamp-1">{items.title}</h2>
|
||||
<img class="aspect-video " src={`https://api7.siliconpin.com/assets/${items.img}`} alt=""/>
|
||||
<div class="h-[100px] overflow-y-hidden">
|
||||
<p id="" set:html={items.content}></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<a href={`/politics/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<!-- <div class="flex flex-col">
|
||||
{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined;}) =>
|
||||
<div class="flex flex-col border-2 gap-6 p-6">
|
||||
<h1 class="border-b-4 border-[#780a0a] text-2xl font-bold">{items.heading}</h1>
|
||||
<h2 class="text-lg">{items.title}</h2>
|
||||
<img src={`https://api7.siliconpin.com/assets/${items.img}`} alt=""/>
|
||||
</div>
|
||||
)}
|
||||
</div> -->
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
const pageName = window.location.href.split('/')[3];
|
||||
document.getElementById('pageName').innerHTML = '> ' + pageName
|
||||
// console.log(pageName)
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user