Skip to content
Snippets Groups Projects
Commit c715e242 authored by Yorre Rajaonarivelo's avatar Yorre Rajaonarivelo
Browse files

first commit

parents
No related branches found
No related tags found
1 merge request!5Update
Pipeline #58422 failed
Stage: build
Stage: test
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 385 additions and 0 deletions
.gitignore 0 → 100644
+ 24
− 0
View file @ c715e242
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
index.html 0 → 100644
+ 13
− 0
View file @ c715e242
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Preact</title>
</head>
<body>
<div id="news-app"></div>
<script type="module" src="/src/news/index.jsx"></script>
</body>
</html>
package-lock.json 0 → 100644
+ 0
− 0
View file @ c715e242
This diff is collapsed.
package.json 0 → 100644
+ 26
− 0
View file @ c715e242
{
"name": "cocolight",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@preact/signals": "^1.2.1",
"axios": "^1.5.0",
"moment": "^2.29.4",
"preact": "^10.16.0"
},
"devDependencies": {
"@preact/preset-vite": "^2.5.0",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.30",
"postcss-import": "^15.1.0",
"postcss-nesting": "^12.0.1",
"tailwindcss": "^3.3.3",
"vite": "^4.4.5"
}
}
postcss.config.js 0 → 100644
+ 8
− 0
View file @ c715e242
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
"postcss-import": {},
"postcss-nesting": {}
},
}
src/core/application/constant/common.js 0 → 100644
+ 2
− 0
View file @ c715e242
export const BASE_URL = "http://communecter-dev"
\ No newline at end of file
src/core/application/signal/create-signal.js 0 → 100644
+ 25
− 0
View file @ c715e242
import { computed, signal } from "@preact/signals";
export const createSignal = (states) => {
const signals = {};
Object.keys(states).forEach(stateName => {
const state = states[stateName];
const stateSignal = signal(state.initialState);
const computers = {};
if(typeof state.computers == "object") {
Object.keys(state.computers).forEach(computerName => {
computers[computerName] = computed(() => state.computers[computerName](stateSignal.value))
})
}
signals[stateName] = {
signal: stateSignal,
computers
}
})
return signals;
}
\ No newline at end of file
src/core/assets/css/main.css 0 → 100644
+ 18
− 0
View file @ c715e242
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css");
@tailwind base;
@tailwind components;
@tailwind utilities;
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
background-color: #475569;
border-radius: 4px;
}
::-webkit-scrollbar-track {
background-color: #1e293b;
}
\ No newline at end of file
src/core/assets/images/logo-min.png 0 → 100644
+ 0
− 0
View file @ c715e242
src/core/assets/images/logo-min.png

6.6 KiB

src/core/assets/images/maki.jpg 0 → 100644
+ 0
− 0
View file @ c715e242
src/core/assets/images/maki.jpg

19.7 KiB

src/core/context/state-context.js 0 → 100644
+ 6
− 0
View file @ c715e242
import { createContext } from "preact";
const StateContext = createContext();
export default StateContext;
\ No newline at end of file
src/core/presentation/component/AppMenu.jsx 0 → 100644
+ 33
− 0
View file @ c715e242
const AppMenu = () => {
const menus = [
{
label:"Actualités",
icon: "fa-regular fa-newspaper"
},
{
label:"Agenda",
icon:"fa-solid fa-calendar-day"
}
]
return (
<>
<ul className="bg-white px-5 rounded dark:bg-gray-900">
{
menus.map((menu, index) => (
<li>
<a href="#" className={"block py-4 text-xl hover:text-gray-900 " + (index == 0 ? "font-bold text-gray-900 dark:text-gray-50":"font-light text-gray-600 dark:text-gray-400")}>
<i className={menu.icon + " text-2xl"}></i>
<span className="pl-6">{menu.label}</span>
</a>
</li>
))
}
</ul>
</>
)
}
export default AppMenu;
\ No newline at end of file
src/core/presentation/component/Navbar.jsx 0 → 100644
+ 41
− 0
View file @ c715e242
import logo from "../../assets/images/logo-min.png";
import maki from "../../assets/images/maki.jpg";
const Navbar = () => {
return (
<>
<nav class="w-full py-4">
<div class="flex justify-between items-center">
<div class="w-1/4">
<img src={logo} class="h-10" />
</div>
<div class="w-1/2">
<form>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
</svg>
</div>
<input type="search" class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 outline-none" placeholder="Rechercher..." required />
</div>
</form>
</div>
<div className="w-1/4 flex justify-end">
<ul className="flex">
<li>
<a href="#" onClick={(e) => { e.preventDefault() }}>
<img src={maki} className="w-12 h-12 rounded-full"/>
</a>
</li>
</ul>
</div>
</div>
</nav>
</>
)
}
export default Navbar;
\ No newline at end of file
src/core/presentation/container/AppLayout.jsx 0 → 100644
+ 28
− 0
View file @ c715e242
import AppMenu from "../component/AppMenu";
import Navbar from "../component/Navbar";
const AppLayout = ({ children }) => {
return (
<>
<div className="w-full border-b-2 dark:border-slate-700 fixed top-0 left-0 right-0 bg-white dark:bg-gray-900">
<div className="mx-auto max-w-screen-xl">
<Navbar />
</div>
</div>
<div className="mx-auto max-w-screen-xl flex pt-[120px] h-[calc(100vh-70px)] overflow-hidden">
<div className="w-1/4 pr-5">
<AppMenu />
</div>
<div className="w-1/2">
{ children }
</div>
<div className="w-1/4">
</div>
</div>
</>
);
}
export default AppLayout;
\ No newline at end of file
src/news/application/state/articlesState.js 0 → 100644
+ 5
− 0
View file @ c715e242
export const articlesState = {
initialState: []
}
\ No newline at end of file
src/news/application/state/index.js 0 → 100644
+ 9
− 0
View file @ c715e242
import { createSignal } from "../../../core/application/signal/create-signal";
import { articlesState } from "./articlesState";
const states = {
articles: articlesState
}
export const configureStates = () => createSignal(states);
\ No newline at end of file
src/news/index.jsx 0 → 100644
+ 5
− 0
View file @ c715e242
import { render } from "preact"
import { NewsApp } from './presentation/container/NewsApp'
import "../core/assets/css/main.css"
render(<NewsApp />, document.getElementById('news-app'))
src/news/infrastructure/api/news-api.js 0 → 100644
+ 32
− 0
View file @ c715e242
import axios from "axios"
import { BASE_URL } from "../../../core/application/constant/common"
import { GET_NEWS } from "../constant/api-endpoints";
export const getNews = () => {
return axios.get(BASE_URL + GET_NEWS, { params: {isLive:true, type: "citoyens", id: "5e14a490690864ab028b46c8", json:true}})
.then(({data}) => {
const news = [];
Object.keys(data.news).forEach(id => {
const item = data.news[id];
item.author.profilThumbImageUrl = BASE_URL+item.author.profilThumbImageUrl;
if(item?.mediaImg?.images) {
item.mediaImg.images = item.mediaImg.images.map(image => {
image.imagePath = BASE_URL + image.imagePath
return image;
})
}
news.push({
id,
...item
})
})
return Promise.resolve(news)
})
}
\ No newline at end of file
src/news/infrastructure/constant/api-endpoints.js 0 → 100644
+ 3
− 0
View file @ c715e242
export const GET_NEWS = "/news/co/get"
\ No newline at end of file
src/news/presentation/component/article.jsx 0 → 100644
+ 107
− 0
View file @ c715e242
import moment from "moment";
const Article = ({ author, text, date, image }) => {
moment.locale('fr', {
months : 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
monthsShort : 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
monthsParseExact : true,
weekdays : 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
weekdaysShort : 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
weekdaysMin : 'Di_Lu_Ma_Me_Je_Ve_Sa'.split('_'),
weekdaysParseExact : true,
longDateFormat : {
LT : 'HH:mm',
LTS : 'HH:mm:ss',
L : 'DD/MM/YYYY',
LL : 'D MMMM YYYY',
LLL : 'D MMMM YYYY HH:mm',
LLLL : 'dddd D MMMM YYYY HH:mm'
},
calendar : {
sameDay : '[Aujourd’hui à] LT',
nextDay : '[Demain à] LT',
nextWeek : 'dddd [à] LT',
lastDay : '[Hier à] LT',
lastWeek : 'dddd [dernier à] LT',
sameElse : 'L'
},
relativeTime : {
future : 'dans %s',
past : 'il y a %s',
s : 'quelques secondes',
m : 'une minute',
mm : '%d minutes',
h : 'une heure',
hh : '%d heures',
d : 'un jour',
dd : '%d jours',
M : 'un mois',
MM : '%d mois',
y : 'un an',
yy : '%d ans'
},
dayOfMonthOrdinalParse : /\d{1,2}(er|e)/,
ordinal : function (number) {
return number + (number === 1 ? 'er' : 'e');
},
meridiemParse : /PD|MD/,
isPM : function (input) {
return input.charAt(0) === 'M';
},
// In case the meridiem units are not separated around 12, then implement
// this function (look at locale/id.js for an example).
// meridiemHour : function (hour, meridiem) {
// return /* 0-23 hour, given meridiem token and hour 1-12 */ ;
// },
meridiem : function (hours, minutes, isLower) {
return hours < 12 ? 'PD' : 'MD';
},
week : {
dow : 1, // Monday is the first day of the week.
doy : 4 // Used to determine first week of the year.
}
});
return (
<>
<article className="w-full flex bg-white p-5 rounded-lg drop-shadow-md dark:bg-gray-900">
<div className="w-14">
<img src={author.profilThumbImageUrl} alt="" className="block w-12 h-12 object-cover rounded-full"/>
</div>
<div className="pl-4 w-full">
<h1 className="text-lg font-medium text-gray-900 dark:text-gray-50"><a href="#">{author.name}</a></h1>
<ul className="flex items-center text-gray-500">
{/* <li><a href="#">Meteolamer</a></li>
<li className="text-[8px] px-2 pt-1"><i class="fa-solid fa-circle"></i></li> */}
<li>{moment.unix(date).format("ddd DD MMM YYYY - HH:mm")}</li>
</ul>
<p className="pt-4 text-lg text-gray-900 dark:text-gray-50 font-light">
{ text }
</p>
{
image && (
<div className="pt-4">
<img src={image} className="w-full h-auto rounded" />
</div>
)
}
<ul className="pt-6 flex text-lg text-gray-700 justify-between dark:text-gray-400">
<li>
<a href="#" className="dark:hover:text-gray-50"><i class="fa-regular fa-comment"></i> Commentaire</a>
</li>
<li>
<a href="#" className="dark:hover:text-gray-50"><i class="fa-regular fa-thumbs-up"></i> J'aime</a>
</li>
<li>
<a href="#" className="dark:hover:text-gray-50"><i class="fa-regular fa-share-from-square"></i> Partager</a>
</li>
</ul>
</div>
</article>
</>
)
}
export default Article;
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment