Skip to content

Commit

Permalink
formatting (#161)
Browse files Browse the repository at this point in the history
  • Loading branch information
@soroushowji-tomtom
soroushowji-tomtom authored Nov 10, 2023
1 parent d9e1a6b commit 93c54e1
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 15 deletions.
57 changes: 50 additions & 7 deletions src/components/ProgramDetail.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
import { Container } from './Container'

export function ProgramDetail({ id, name, title, details, date, time, place }) {
export function ProgramDetail({
id,
name,
title,
details,
date,
time,
place,
secondTitle,
secondName,
}) {
const formattedDate = new Date(date).toLocaleString('en-GB', {
weekday: 'long',
year: 'numeric',
Expand All @@ -22,13 +32,46 @@ export function ProgramDetail({ id, name, title, details, date, time, place }) {
<h3 className="mt-6 font-dunbar text-xl font-bold tracking-tight">
{name}
</h3>
{secondTitle && (
<h2 className="my-6 font-dunbar text-2xl font-bold text-sotm-blue">
{secondTitle}
</h2>
)}
{secondName && (
<h3 className="mt-6 font-dunbar text-xl font-bold tracking-tight">
{secondName}
</h3>
)}

<div className="mt-6 space-y-6 text-xl">
{details.map(({ description, authors }, index) => (
<div key={index}>
<p className="font-poppins text-sotm-blue">{description}</p>
<p>{authors}</p>
</div>
))}
{details.map(({ description, authors }, index) => {
const regexAllListItems = /(\n\*.*)/g
const regexAllLineBreaks = /\n/g
const regexAllHtmlLinkTags = /<a.*?>.*?<\/a>/g

const formattedDescription = description
.replace(regexAllListItems, (match) => {
const text = match.replace('\n*', '')
return `<li class="ml-10 my-2 font-poppins text-gray-800">${text}</li>`
})
.replace(regexAllLineBreaks, '<br />')
.replace(regexAllHtmlLinkTags, (match) => {
return match.replace(
/<a.*?href="(.*?)".*?>(.*?)<\/a>/,
'<a href="$1" class="text-sotm-blue underline hover:bg-sotm-blue hover:text-sotm-yellow px-1 rounded">$2</a>',
)
})

return (
<div key={index}>
<div
className="font-poppins"
dangerouslySetInnerHTML={{ __html: formattedDescription }}
/>
<p className="font-poppins text-sotm-blue">{authors}</p>
</div>
)
})}
</div>
</div>
<div className="w-52 flex-grow">
Expand Down
16 changes: 9 additions & 7 deletions src/constants/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const descriptiveTable = {
details: [
{
description:
'Because Belgium is small and complicated, federation is at the core of what we do. That means most of our projects are built to be scalable. Still, we are a tiny organization and can’t do as much as we would like.\n\nWe propose a two-part session on this subject.\n\nFirst we explore the projects of OSMbe that could be interesting on a European scale: camera grants, State of the Map Europe and our corporate membership program.\n\nSecond, we invite the participants of the session to bring their ideas to the table. Which of their projects could be scaled up to Europe? What would a Europe-wide collaboration look like? Is there any sense in formal organization?\n\nFor the first part, we intend to invite guests who are involved in these projects.\n\nSome context:\n* OSM Belgium has a small camera grant project (https://openstreetmap.be/en/projects/streetlevelimagery.html), financed by Corporate Membership. We are talking with Meta to roll this out towards all of Europe.\n* Our project to run a State of the Map Europe is intended to be a first run of something that might be a new bi-yearly tradition, especially considering the likelihood of more international SotM’s happening outside of Europa\n* After years of unfocused discussion, we started a simple Corporate Membership program (explained here: https://openstreetmap.be/en/support.html), which has been surprisingly successful (see https://github.com/osmbe/working-group-bylaws/tree/master/corporate-members). It hasn’t just given us some financial freedom, but also an opportunity to be present at expensive tech conferences (thank you Anyways.eu), support tile infrastructure (thank you Geo6.be) and increase our available manpower (thank you TomTom).\n* We try to build all our projects in a scalable way, though it is not always easy to help them grow elsewhere. Examples are the very succesful Welcome Tool (https://welcome.osm.be) and EqualStreetnames. But our Road Completion project (https://github.com/osmbe/road-completion) also runs on several areas. And our newer Traffic Sign project (https://openstreetmap.be/en/projects/traffic-sign.html) is also designed to be flexible (and the fully automated workflow Github Actions>MapRoulette is in itself interesting for other projects).\n\nWe hope to count with the presence of people active in Local Chapters and local communitties from around Europe!',
'Because Belgium is small and complicated, federation is at the core of what we do. That means most of our projects are built to be scalable. Still, we are a tiny organization and can’t do as much as we would like.\n\nWe propose a two-part session on this subject.\n\nFirst we explore the projects of OSMbe that could be interesting on a European scale: camera grants, State of the Map Europe and our corporate membership program.\n\nSecond, we invite the participants of the session to bring their ideas to the table. Which of their projects could be scaled up to Europe? What would a Europe-wide collaboration look like? Is there any sense in formal organization?\n\nFor the first part, we intend to invite guests who are involved in these projects.\n\nSome context:\n* <a href="https://openstreetmap.be/en/projects/streetlevelimagery.html">OSM Belgium has a small camera grant project</a>, financed by Corporate Membership. We are talking with Meta to roll this out towards all of Europe.\n* Our project to run a State of the Map Europe is intended to be a first run of something that might be a new bi-yearly tradition, especially considering the likelihood of more international SotM’s happening outside of Europa\n* After years of unfocused discussion, we started a simple Corporate Membership program (<a href="https://openstreetmap.be/en/support.html">explained here</a>), which has been surprisingly successful (see <a href="https://github.com/osmbe/working-group-bylaws/tree/master/corporate-members">here</a>). It hasn’t just given us some financial freedom, but also an opportunity to be present at expensive tech conferences (thank you Anyways.eu), support tile infrastructure (thank you Geo6.be) and increase our available manpower (thank you TomTom).\n* We try to build all our projects in a scalable way, though it is not always easy to help them grow elsewhere. Examples are the very succesful <a href="https://welcome.osm.be">Welcome Tool</a> and EqualStreetnames. But our <a href="https://github.com/osmbe/road-completion">Road Completion project</a> also runs on several areas. And our newer <a href="https://openstreetmap.be/en/projects/traffic-sign.html">Traffic Sign project</a> is also designed to be flexible (and the fully automated workflow Github Actions>MapRoulette is in itself interesting for other projects).\n\nWe hope to count with the presence of people active in Local Chapters and local communitties from around Europe!',
},
],
date: '11/11/2023',
Expand Down Expand Up @@ -165,7 +165,7 @@ export const descriptiveTable = {
details: [
{
description:
'Introduction:\n\nFinding the correct accessibility data about public buildings and public space can be difficult for people with disabilities. Therefor On Wheels has been collecting and sharing data with a user friendly app since 2016. Looking at the future we wanted to make this data open and accessible for everyone by developing a whole new app based on OSM data.\n\nDevelopment process:\n\nNew accessibility tags for entrances, toilets and elevators.\nUser friendly UI in Flutter\nData transfer to OSM\nLogin with personal OSM account\nApp functionalities:\n\n24 categories, like restaurants, hotels, shops, parking spaces, ...\nMultiple languages\nAn interactive map with categories and wheelchair accessible routes\nFilter data with personal wheelchair, bike and car profiles\nChanging locations and adding new locations\nResearch projects:\n\nCreate a city dashboard with accessibility data from OSM\nUsing Ai and Machine Learning to integrate smart functions in the app\nLinking with other apps and platforms',
'Introduction:\n\nFinding the correct accessibility data about public buildings and public space can be difficult for people with disabilities. Therefor On Wheels has been collecting and sharing data with a user friendly app since 2016. Looking at the future we wanted to make this data open and accessible for everyone by developing a whole new app based on OSM data.\n\nDevelopment process:\n*New accessibility tags for entrances, toilets and elevators.\n*User friendly UI in Flutter\n*Data transfer to OSM\n*Login with personal OSM account\n\nApp functionalities:\n*24 categories, like restaurants, hotels, shops, parking spaces, ...\n*Multiple languages\n*An interactive map with categories and wheelchair accessible routes\n*Filter data with personal wheelchair, bike and car profiles\n*Changing locations and adding new locations\n\nResearch projects:\n*Create a city dashboard with accessibility data from OSM\n*Using Ai and Machine Learning to integrate smart functions in the app\n*Linking with other apps and platforms',
},
],
date: '11/11/2023',
Expand Down Expand Up @@ -287,7 +287,7 @@ export const descriptiveTable = {
details: [
{
description:
'Mapy.cz - most popular map portal and mobile phone app in Czech Republic and Slovakia with users over whole Europe visualizes OpenStreetMap data for whole World (except territory of Czech Republic). Main goal is to offer users map in a map key that they have been using for many years in paper form. In a map you can find all infrastructure and suprastructure for outdoor tourism – for hiking, cycling or winter tourism. App and map portal is for free. Map contains interactive points from OpenStreetMap with photos from users and Wikimedia Commons, texts from Wikipedia and additional information from Wikidata, which make map a comprehensive lexicon about our Earth.\n\nWe would like to introduce map portal and app mapy.cz, features used in portal and app, focusing on use of OpenStreetMap data and other open data such as Wikipedia and Wikidata. We will describe process of creating and updating maps and data and mention feedback from milions of mapy.cz users, which can improve OpenStreetMap data as well.\n\nWe will introduce you also our CSR activity – tactile maps as part of mapy.cz, which give blind people opportunity to read and navigate maps by touch. Worldwide and free. Built on OpenStreetMaps data.\n\nhttps://en.mapy.cz/\nhttps://tactilemaps.eu/',
'Mapy.cz - most popular map portal and mobile phone app in Czech Republic and Slovakia with users over whole Europe visualizes OpenStreetMap data for whole World (except territory of Czech Republic). Main goal is to offer users map in a map key that they have been using for many years in paper form. In a map you can find all infrastructure and suprastructure for outdoor tourism – for hiking, cycling or winter tourism. App and map portal is for free. Map contains interactive points from OpenStreetMap with photos from users and Wikimedia Commons, texts from Wikipedia and additional information from Wikidata, which make map a comprehensive lexicon about our Earth.\n\nWe would like to introduce map portal and app mapy.cz, features used in portal and app, focusing on use of OpenStreetMap data and other open data such as Wikipedia and Wikidata. We will describe process of creating and updating maps and data and mention feedback from milions of mapy.cz users, which can improve OpenStreetMap data as well.\n\nWe will introduce you also our CSR activity – tactile maps as part of mapy.cz, which give blind people opportunity to read and navigate maps by touch. Worldwide and free. Built on OpenStreetMaps data.\n\n<a href="https://en.mapy.cz/">mapy</a>\n<a href="https://tactilemaps.eu/">tactilemaps</a>',
},
],
date: '11/12/2023',
Expand Down Expand Up @@ -418,7 +418,7 @@ export const descriptiveTable = {
},
'openstreetmap-and-overture-the-case-for-collaboration': {
name: 'Marc Prioleau',
title: 'OOpenStreetMap and Overture: The case for collaboration',
title: 'OpenStreetMap and Overture: The case for collaboration',
details: [
{
description:
Expand Down Expand Up @@ -644,9 +644,11 @@ export const descriptiveTable = {
place: 'Marco Polo',
},
'welcome-introduction-to-osm-science-2023osm-science-lightning-talks': {
name: 'by OSM Science 2023 Scientific Committee\n\nby Reid Passmore, Edson Augusto Melanda, Francis Andorful & Beatrice Olivari',
title:
'Welcome & Introduction to OSM Science 2023\n\n\nOSM SCIENCE LIGHTNING TALKS',
name: 'by OSM Science 2023 Scientific Committee',
title: 'Welcome & Introduction to OSM Science 2023',
secondTitle: 'OSM Science Lightning Talks',
secondName:
'by Reid Passmore, Edson Augusto Melanda, Francis Andorful & Beatrice Olivari',
details: [
{
description: 'Assessing Bike-Transit Accessibility',
Expand Down
5 changes: 4 additions & 1 deletion src/pages/program/[slug].jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import { descriptiveTable } from '../../constants/data'
import { ProgramDetail } from '@/components/ProgramDetail'

export default function Page({ program }) {
const { name, title, details, date, time, place } = program
const { name, title, details, date, time, place, secondTitle, secondName } =
program

return (
<>
Expand All @@ -25,6 +26,8 @@ export default function Page({ program }) {
details={details}
time={time}
place={place}
secondTitle={secondTitle}
secondName={secondName}
/>
</main>
<Footer />
Expand Down

0 comments on commit 93c54e1

Please sign in to comment.