Auto commit: 2026-01-31T17:26:19.573Z
This commit is contained in:
Flatlogic Bot
parent
5fe0507c15
commit
c396ec9d33
@ -111,7 +111,13 @@ app.use('/api/templates', passport.authenticate('jwt', {session: false}), templa
|
||||
|
||||
app.use('/api/assets', passport.authenticate('jwt', {session: false}), assetsRoutes);
|
||||
|
||||
app.use('/api/news_cards', passport.authenticate('jwt', {session: false}), news_cardsRoutes);
|
||||
// Custom logic for news_cards to allow public /scrape
|
||||
app.use('/api/news_cards', (req, res, next) => {
|
||||
if (req.path === '/scrape' && req.method === 'POST') {
|
||||
return next();
|
||||
}
|
||||
return passport.authenticate('jwt', {session: false})(req, res, next);
|
||||
}, news_cardsRoutes);
|
||||
|
||||
app.use('/api/jobs', passport.authenticate('jwt', {session: false}), jobsRoutes);
|
||||
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
const express = require('express');
|
||||
|
||||
const News_cardsService = require('../services/news_cards');
|
||||
@ -15,6 +14,30 @@ const {
|
||||
checkCrudPermissions,
|
||||
} = require('../middlewares/check-permissions');
|
||||
|
||||
/**
|
||||
* @swagger
|
||||
* /api/news_cards/scrape:
|
||||
* post:
|
||||
* tags: [News_cards]
|
||||
* summary: Scrape news metadata from URL
|
||||
* requestBody:
|
||||
* required: true
|
||||
* content:
|
||||
* application/json:
|
||||
* schema:
|
||||
* properties:
|
||||
* url:
|
||||
* type: string
|
||||
* responses:
|
||||
* 200:
|
||||
* description: Metadata successfully scraped
|
||||
*/
|
||||
router.post('/scrape', wrapAsync(async (req, res) => {
|
||||
const { url } = req.body;
|
||||
const metadata = await News_cardsService.scrapeUrl(url);
|
||||
res.status(200).send(metadata);
|
||||
}));
|
||||
|
||||
router.use(checkCrudPermissions('news_cards'));
|
||||
|
||||
|
||||
@ -433,4 +456,4 @@ router.get('/:id', wrapAsync(async (req, res) => {
|
||||
|
||||
router.use('/', require('../helpers').commonErrorHandler);
|
||||
|
||||
module.exports = router;
|
||||
module.exports = router;
|
||||
@ -7,10 +7,6 @@ const axios = require('axios');
|
||||
const config = require('../config');
|
||||
const stream = require('stream');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
module.exports = class News_cardsService {
|
||||
static async create(data, currentUser) {
|
||||
const transaction = await db.sequelize.transaction();
|
||||
@ -30,6 +26,33 @@ module.exports = class News_cardsService {
|
||||
}
|
||||
};
|
||||
|
||||
static async scrapeUrl(url) {
|
||||
try {
|
||||
const response = await axios.get(url, {
|
||||
headers: {
|
||||
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
|
||||
},
|
||||
timeout: 5000
|
||||
});
|
||||
const html = response.data;
|
||||
|
||||
// Basic extraction using regex for speed and simplicity without new dependencies
|
||||
const titleMatch = html.match(/<meta property="og:title" content="([^"]+)"/) ||
|
||||
html.match(/<title>([^<]+)<\/title>/);
|
||||
const imageMatch = html.match(/<meta property="og:image" content="([^"]+)"/);
|
||||
|
||||
return {
|
||||
title: titleMatch ? titleMatch[1].trim() : 'No title found',
|
||||
imageUrl: imageMatch ? imageMatch[1] : null,
|
||||
date: new Date().toLocaleDateString('en-GB', { day: '2-digit', month: 'long', year: 'numeric' }),
|
||||
url
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Scraping error:', error.message);
|
||||
throw new Error('Failed to fetch news metadata');
|
||||
}
|
||||
}
|
||||
|
||||
static async bulkImport(req, res, sendInvitationEmails = true, host) {
|
||||
const transaction = await db.sequelize.transaction();
|
||||
|
||||
@ -133,6 +156,4 @@ module.exports = class News_cardsService {
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
};
|
||||
56
frontend/src/components/News_cards/NewsCardPreview.tsx
Normal file
56
frontend/src/components/News_cards/NewsCardPreview.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
|
||||
interface NewsCardPreviewProps {
|
||||
title: string;
|
||||
date: string;
|
||||
imageUrl?: string;
|
||||
logoUrl?: string;
|
||||
}
|
||||
|
||||
const NewsCardPreview: React.FC<NewsCardPreviewProps> = ({ title, date, imageUrl, logoUrl }) => {
|
||||
return (
|
||||
<div className="relative w-full aspect-square max-w-[540px] mx-auto overflow-hidden rounded-lg shadow-2xl bg-gray-900 font-sans">
|
||||
{/* Background Image */}
|
||||
{imageUrl ? (
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt="News background"
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center">
|
||||
<span className="text-slate-700 text-6xl font-bold uppercase tracking-widest opacity-20">News Card</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dark Overlay */}
|
||||
<div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black via-black/70 to-transparent" />
|
||||
|
||||
{/* Logo */}
|
||||
<div className="absolute top-6 left-6">
|
||||
{logoUrl ? (
|
||||
<img src={logoUrl} alt="Logo" className="w-16 h-16 object-contain" />
|
||||
) : (
|
||||
<div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-2xl shadow-lg border-2 border-white/20">
|
||||
N
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="absolute bottom-10 left-8 right-8 text-white">
|
||||
<div className="mb-2 text-sm font-medium tracking-wider text-blue-400 uppercase">
|
||||
{date}
|
||||
</div>
|
||||
<h2 className="text-2xl md:text-3xl font-bold leading-tight line-clamp-3 drop-shadow-md">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Bottom Border Accent */}
|
||||
<div className="absolute bottom-0 inset-x-0 h-1.5 bg-blue-600" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsCardPreview;
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { ReactElement } from 'react';
|
||||
import Head from 'next/head';
|
||||
@ -12,155 +11,179 @@ import BaseButtons from '../components/BaseButtons';
|
||||
import { getPageTitle } from '../config';
|
||||
import { useAppSelector } from '../stores/hooks';
|
||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
||||
import NewsCardPreview from '../components/News_cards/NewsCardPreview';
|
||||
import axios from 'axios';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [url, setUrl] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [cardData, setCardData] = useState({
|
||||
title: 'Your News Title Will Appear Here',
|
||||
date: new Date().toLocaleDateString('en-GB', { day: '2-digit', month: 'long', year: 'numeric' }),
|
||||
imageUrl: '',
|
||||
});
|
||||
const [error, setError] = useState('');
|
||||
|
||||
export default function Starter() {
|
||||
const [illustrationImage, setIllustrationImage] = useState({
|
||||
src: undefined,
|
||||
photographer: undefined,
|
||||
photographer_url: undefined,
|
||||
})
|
||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
||||
const [contentType, setContentType] = useState('video');
|
||||
const [contentPosition, setContentPosition] = useState('right');
|
||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
||||
|
||||
const title = 'App Draft'
|
||||
|
||||
// Fetch Pexels image/video
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
const image = await getPexelsImage();
|
||||
const video = await getPexelsVideo();
|
||||
setIllustrationImage(image);
|
||||
setIllustrationVideo(video);
|
||||
}
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const imageBlock = (image) => (
|
||||
<div
|
||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
||||
style={{
|
||||
backgroundImage: `${
|
||||
image
|
||||
? `url(${image?.src?.original})`
|
||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
||||
}`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'left center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}
|
||||
>
|
||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
||||
<a
|
||||
className='text-[8px]'
|
||||
href={image?.photographer_url}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
Photo by {image?.photographer} on Pexels
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const videoBlock = (video) => {
|
||||
if (video?.video_files?.length > 0) {
|
||||
return (
|
||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
||||
<video
|
||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
>
|
||||
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
||||
<a
|
||||
className='text-[8px]'
|
||||
href={video?.user?.url}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
Video by {video.user.name} on Pexels
|
||||
</a>
|
||||
</div>
|
||||
</div>)
|
||||
const handleScrape = async () => {
|
||||
if (!url) return;
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const response = await axios.post('/news_cards/scrape', { url });
|
||||
setCardData(response.data);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError('Failed to fetch news. Please check the URL and try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={
|
||||
contentPosition === 'background'
|
||||
? {
|
||||
backgroundImage: `${
|
||||
illustrationImage
|
||||
? `url(${illustrationImage.src?.original})`
|
||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
||||
}`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'left center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<Head>
|
||||
<title>{getPageTitle('Starter Page')}</title>
|
||||
</Head>
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 font-sans text-slate-900">
|
||||
<Head>
|
||||
<title>{getPageTitle('News Card Generator')}</title>
|
||||
</Head>
|
||||
|
||||
<SectionFullScreen bg='violet'>
|
||||
<div
|
||||
className={`flex ${
|
||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
||||
} min-h-screen w-full`}
|
||||
>
|
||||
{contentType === 'image' && contentPosition !== 'background'
|
||||
? imageBlock(illustrationImage)
|
||||
: null}
|
||||
{contentType === 'video' && contentPosition !== 'background'
|
||||
? videoBlock(illustrationVideo)
|
||||
: null}
|
||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
||||
<CardBoxComponentTitle title="Welcome to your App Draft app!"/>
|
||||
|
||||
<div className="space-y-3">
|
||||
<p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
||||
<p className='text-center text-gray-500'>For guides and documentation please check
|
||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
||||
</div>
|
||||
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
href='/login'
|
||||
label='Login'
|
||||
color='info'
|
||||
className='w-full'
|
||||
/>
|
||||
{/* Navigation */}
|
||||
<nav className="flex items-center justify-between px-6 py-4 bg-white border-b border-slate-200 sticky top-0 z-50">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center text-white font-bold">N</div>
|
||||
<span className="text-xl font-bold tracking-tight">NewsCard AI</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link href="/login" className="text-sm font-medium text-slate-600 hover:text-blue-600 transition-colors">
|
||||
Login
|
||||
</Link>
|
||||
<BaseButton
|
||||
href="/login"
|
||||
label="Get Started"
|
||||
color="info"
|
||||
className="text-sm"
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</BaseButtons>
|
||||
</CardBox>
|
||||
{/* Hero Section */}
|
||||
<section className="px-6 py-16 md:py-24 bg-gradient-to-b from-white to-slate-50 overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-5xl md:text-6xl font-extrabold leading-tight tracking-tight">
|
||||
Transform News URLs into <span className="text-blue-600">Beautiful Cards</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-600 max-w-xl leading-relaxed">
|
||||
Instantly generate professional, branded news cards for social media. Just paste a link and let our AI do the magic.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 max-w-lg">
|
||||
<div className="flex p-1 bg-white border border-slate-200 rounded-xl shadow-sm focus-within:ring-2 focus-within:ring-blue-500 transition-all">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Paste news article URL here..."
|
||||
className="flex-grow px-4 py-3 bg-transparent outline-none text-slate-900"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
onKeyPress={(e) => e.key === 'Enter' && handleScrape()}
|
||||
/>
|
||||
<button
|
||||
onClick={handleScrape}
|
||||
disabled={loading || !url}
|
||||
className="px-6 py-3 bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{loading ? 'Fetching...' : 'Generate'}
|
||||
</button>
|
||||
</div>
|
||||
{error && <p className="text-red-500 text-sm font-medium">{error}</p>}
|
||||
<p className="text-xs text-slate-400">Try pasting a link from BBC, CNN, or any news outlet.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-8 pt-4">
|
||||
<div className="flex -space-x-2">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="w-10 h-10 rounded-full border-2 border-white bg-slate-200 flex items-center justify-center overflow-hidden">
|
||||
<img src={`https://i.pravatar.cc/100?img=${i + 10}`} alt="user" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 font-medium">Joined by <span className="text-slate-900 font-bold">500+</span> editors this week</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview Component */}
|
||||
<div className="relative">
|
||||
<div className="absolute -top-20 -right-20 w-64 h-64 bg-blue-200 rounded-full blur-3xl opacity-30 animate-pulse"></div>
|
||||
<div className="absolute -bottom-20 -left-20 w-64 h-64 bg-indigo-200 rounded-full blur-3xl opacity-30 animate-pulse"></div>
|
||||
|
||||
<div className="relative z-10 transition-transform duration-500 hover:scale-[1.02]">
|
||||
<NewsCardPreview
|
||||
title={cardData.title}
|
||||
date={cardData.date}
|
||||
imageUrl={cardData.imageUrl}
|
||||
/>
|
||||
|
||||
{/* Floating Action Badge */}
|
||||
<div className="absolute -bottom-6 -right-6 bg-white p-4 rounded-2xl shadow-xl border border-slate-100 flex items-center space-x-3 animate-bounce">
|
||||
<div className="w-10 h-10 bg-green-100 text-green-600 rounded-full flex items-center justify-center">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-400 font-medium uppercase tracking-wider">Status</p>
|
||||
<p className="text-sm font-bold text-slate-900">Ready to Share</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="px-6 py-20 bg-white">
|
||||
<div className="max-w-7xl mx-auto text-center space-y-16">
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-3xl md:text-4xl font-bold tracking-tight">Features designed for modern newsrooms</h2>
|
||||
<p className="text-lg text-slate-500 max-w-2xl mx-auto">Everything you need to automate your social media visuals.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ title: 'AI Powered', desc: 'Our AI extracts the most impactful headline and image from any article automatically.', icon: '⚡' },
|
||||
{ title: 'Custom Branding', desc: 'Add your logo and choose colors that match your news organization brand.', icon: '🎨' },
|
||||
{ title: 'High Res Export', desc: 'Export cards in high resolution ready for Instagram, Facebook, and Twitter.', icon: '📸' }
|
||||
].map((f, i) => (
|
||||
<div key={i} className="p-8 rounded-2xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-xl hover:border-blue-100 transition-all text-left space-y-4">
|
||||
<div className="text-4xl">{f.icon}</div>
|
||||
<h3 className="text-xl font-bold">{f.title}</h3>
|
||||
<p className="text-slate-600 leading-relaxed">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-slate-900 text-white py-12 px-6">
|
||||
<div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center text-white font-bold">N</div>
|
||||
<span className="text-xl font-bold tracking-tight italic">NewsCard AI</span>
|
||||
</div>
|
||||
<p className="text-slate-400 text-sm italic">© 2026 NewsCard AI. Powered by Flatlogic.</p>
|
||||
<div className="flex space-x-6 text-sm font-medium text-slate-400">
|
||||
<Link href="/privacy-policy" className="hover:text-white transition-colors">Privacy</Link>
|
||||
<Link href="/terms" className="hover:text-white transition-colors">Terms</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</SectionFullScreen>
|
||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutGuest>{page}</LayoutGuest>;
|
||||
};
|
||||
|
||||
LandingPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <LayoutGuest>{page}</LayoutGuest>;
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user