Update

Server/app/resources/basic/BasicController.jl

@@ -13,6 +13,7 @@ dict_layouts = Dict(
     :groups => generate_layout_html("main",controller,"groups",libraries=["Leaflet"]),
     :cooperatives => generate_layout_html("main",controller,"cooperatives",libraries=["Leaflet"]),
     :communes => generate_layout_html("main",controller,"communes",libraries=["Leaflet"]),
+    :parties => generate_layout_html("main",controller,"parties",libraries=["Leaflet"]),
     :partners => generate_layout_html("main",controller,"partners",libraries=["Leaflet"]),
     :compass => generate_layout_html("main",controller,"compass"),
 )
@@ -96,6 +97,17 @@ const partners_info = Dict(
     )
 )
 
+const parties_info = Dict(
+    "en" => Dict(
+        :title => "LibSoc - Parties",
+        :description => ""
+    ),
+    "ru" => Dict(
+        :title => "LibSoc - Партии",
+        :description => ""
+    )
+)
+
 const compass_info = Dict(
     "en" => Dict(
         :title => "LibSoc - Political Compass",
@@ -174,6 +186,14 @@ function partners()
     )
 end
 
+function parties()
+    locale = get_locale()
+    html(:basic,:parties, layout = dict_layouts[:parties], context = @__MODULE__,
+        title = parties_info[locale][:title],
+        description = parties_info[locale][:description]
+    )
+end
+
 function political_compass()
     locale = get_locale()
     html(:basic,:compass, layout = dict_layouts[:compass], context = @__MODULE__,

Server/app/resources/basic/views/parties.jl.html

@@ -0,0 +1 @@
+<parties-component></parties-component>

Server/app/svelte/public/js/parties.js

@@ -0,0 +1,52 @@
+export let parties = [
+    {
+        logo: "roots",
+        name: "Roots",
+        location: ["ireland",[52.98479517270413, -7.649233227534782]],
+        members: 6,
+        link: "https://discord.gg/pSTMacJZsK",
+        description: "descriptionRoots"
+    }
+]
+
+export function addMarkersParties(map,content) {
+    for (let g of parties) {
+        let coordinates
+        let text = ""
+        for (let field in g) {
+            let fieldText
+            if (field!="logo") {
+                fieldText = content[field] + ": "
+            }
+            if (field=="logo") {
+                text += "<picture><source srcset=" + "/img/parties/" + g.logo + ".webp><source srcset='/img/parties/" + g.logo + ".png'><img alt='logo' style='position: relative; max-height: 5rem; max-width: 100%; margin: auto;'></picture>" + "<br>"
+            }
+            else if (field=="link") {
+                text += fieldText + "<a href='" + g.link + "' target='_blank' rel=noreferrer>" + g.link + "</a>" + "<br>"
+            }
+            else if (field=="website") {
+                text += fieldText + "<a href='" + g.website + "' target='_blank' rel=noreferrer>" + g.website + "</a>" + "<br>"
+            }
+            else if (field=="location") {
+                text += fieldText + content[g[field][0]] + "<br>"
+                coordinates = g[field][1]
+            }
+            else if (field=="description") {
+                text += fieldText + content[g[field]] + "<br>"
+            }
+            else {
+                text += fieldText + g[field] + "<br>"
+            }
+        }
+        var markerIcon = new L.Icon({
+            iconUrl: 'https://www.libsoc.org/img/common/markers/marker-gold.png',
+            shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            popupAnchor: [1, -34],
+            shadowSize: [41, 41]
+        });
+        let marker = L.marker(coordinates, {icon: markerIcon})
+        marker.addTo(map).bindPopup(text)
+    }
+}

Server/app/svelte/public/locales/en/join-us-component.json

@@ -14,6 +14,7 @@
     "findOur": "Find our",
     "group": "group",
     "commune": "commune",
+    "party": "party",
     "or": "or",
     "cooperative": "cooperative",
     "nearYou": "near you and join to help make a world we both envision a reality.",

Server/app/svelte/public/locales/en/landing-component.json

@@ -5,5 +5,7 @@
     "communesTitle": "COMMUNES",
     "communesText": "We establish communes based on libertarian socialist principles, where commune members have ownership over land, houses, and the means of production as well as make decisions using direct democracy. We are gradually expanding our socialist world, one commune at a time.",
     "cooperativesTitle": "COOPERATIVES",
-    "cooperativesText": "We form worker cooperatives to finance the operations of our groups and communes. Recognizing that economic power influences political power, we consider the establishment of cooperatives to be one of the initial steps towards achieving socialism."
+    "cooperativesText": "We form worker cooperatives to finance the operations of our groups and communes. Recognizing that economic power influences political power, we consider the establishment of cooperatives to be one of the initial steps towards achieving socialism.",
+    "partiesTitle": "PARTIES",
+    "partiesText": "We create political parties in order to push for reforms allowing us to easier further our goals, to move the Overton window as well as to gain popularity. However, we recognize that we cannot achieve libertarian socialism through institutions which act contrary to our goals."
 }

Server/app/svelte/public/locales/en/navbar-component.json

@@ -5,5 +5,6 @@
     "groups": "Groups",
     "communes": "Communes",
     "cooperatives": "Cooperatives",
+    "parties": "Parties",
     "partners": "Partners"
 }

Server/app/svelte/public/locales/en/parties-component.json

@@ -0,0 +1,12 @@
+{
+    "heading": "Parties",
+    "p1": "We create political parties in order to push for reforms allowing us to easier further our goals, to move the Overton window as well as to gain popularity. However, we recognize that we cannot achieve libertarian socialism through institutions which act contrary to our goals.",
+    "subheading1": "Our Parties",
+    "name": "Name",
+    "location": "Location",
+    "members": "Members",
+    "link": "Link",
+    "description": "Description",
+    "ireland": "Ireland",
+    "descriptionRoots": "We are a left libertarian organization based in Ireland. We have a focus on rebuilding the countries infrastructure, sense of governance, housing, agricultural industries and youth affairs."
+}

Server/app/svelte/public/locales/ru/join-us-component.json

@@ -13,7 +13,8 @@
     "subheading2": "Найди нас",
     "findOur": "Найди нашу",
     "group": "группу",
-    "community": "коммуну",
+    "commune": "коммуну",
+    "party": "партию",
     "or": "или",
     "cooperative": "кооператив",
     "nearYou": "около тебя и присоединяйся для того, чтобы сделать тот мир, о котором мы все мечтаем, реальностью.",

Server/app/svelte/public/locales/ru/landing-component.json

@@ -2,8 +2,10 @@
     "top": "Эта организация представляет собой децентрализованную федерацию, основанную на принципе свободной ассоциации. Она состоит из многих групп людей, объединенные одной целью: свержение авторитарных эксплуататорских систем, представленных различными формами капитализма, и замена их либертарными социалистическими системами с целью создания более справедливого и демократического мира.",
     "groupsTitle": "ГРУППЫ",
     "groupsText": "Мы организуем группы в целях образования, защиты наших интересов и взаимопомощи. Наша цель — продемонстрировать людям, как нынешние политико-экономические системы пагубно влияют на наше благополучие, представить им альтернативные варианты и заниматься взаимопомощью, чтобы сделать жизнь при капитализме легче.",
-    "communitiesTitle": "КОММУНЫ",
-    "communitiesText": "Мы создаем коммуны на основе либертарных социалистических принципов, где члены коммун владеют своей землей, домами и средствами производства, а также принимают решения, используя прямую демократию. Мы постепенно, по одной коммуне, расширяем наш социалистический мир.",
+    "communesTitle": "КОММУНЫ",
+    "communesText": "Мы создаем коммуны на основе либертарных социалистических принципов, где члены коммун владеют своей землей, домами и средствами производства, а также принимают решения, используя прямую демократию. Мы постепенно, по одной коммуне, расширяем наш социалистический мир.",
     "cooperativesTitle": "КООПЕРАТИВЫ",
-    "cooperativesText": "Мы формируем рабочие кооперативы для финансирования операций наших групп и коммун. Признавая, что экономическая власть влияет на политическую власть, мы считаем создание кооперативов одним из первых шагов на пути к социализму."
+    "cooperativesText": "Мы формируем рабочие кооперативы для финансирования операций наших групп и коммун, а также формирования основы новой социалистической экономики. Признавая, что экономическая власть влияет на политическую власть, мы считаем создание кооперативов одним из первых шагов на пути к социализму.",
+    "partiesTitle": "ПАРТИИ",
+    "partiesText": "Мы создаем политические партии, чтобы продвигать реформы, которые позволят легче достичь наших целей, сдвигать окно Овертона и увеличивать нашу популярность. Однако мы признаем, что мы не можем достичь либертарианского социализма с помощью институтов, действующих против наших целей."
 }

Server/app/svelte/public/locales/ru/navbar-component.json

@@ -5,5 +5,6 @@
     "groups": "Группы",
     "communes": "Коммуны",
     "cooperatives": "Кооперативы",
+    "parties": "Партии",
     "partners": "Партнеры"
 }

Server/app/svelte/public/locales/ru/parties-component.json

@@ -0,0 +1,12 @@
+{
+    "heading": "Партии",
+    "p1": "Мы создаем политические партии, чтобы продвигать реформы, которые позволят легче достичь наших целей, сдвигать окно Овертона и увеличивать нашу популярность. Однако мы признаем, что мы не можем достичь либертарианского социализма с помощью институтов, действующих против наших целей.",
+    "subheading1": "Наши партии",
+    "name": "Имя",
+    "location": "Локация",
+    "members": "Участники",
+    "link": "Ссылка",
+    "description": "Описание",
+    "ireland": "Ирландия",
+    "descriptionRoots": "Мы — левая либертарная организация, базирующаяся в Ирландии. Мы уделяем особое внимание восстановлению инфраструктуры страны, самоуправлению, жилищному строительству, сельскохозяйственной промышленности и делам молодежи."
+}

Server/app/svelte/rollup.config.js

@@ -10,6 +10,7 @@ import watch from "rollup-plugin-watch";
 
 const production = !process.env.ROLLUP_WATCH;
 
+
 function serve() {
 	let server;
 

Server/app/svelte/src/join-us-component.svelte

@@ -7,6 +7,7 @@
     import { addMarkersGroups } from '/js/groups.js'
     import { addMarkersCoops } from '/js/coops.js'
     import { addMarkersCommunities } from '/js/communities.js'
+    import { addMarkersParties } from '/js/parties.js'
     import { loadLocaleContent } from "/js/libraries/serverTools.js"
 
     // Import components
@@ -19,10 +20,12 @@
     let contentGroups = writable({})
     let contentCommunities = writable({})
     let contentCoops = writable({})
+    let contentParties = writable({})
 
     loadLocaleContent(contentGroups,"groups-component")
     loadLocaleContent(contentCommunities,"communities-component")
     loadLocaleContent(contentCoops,"cooperatives-component")
+    loadLocaleContent(contentParties,"parties-component")
 
     let locale = loadLocaleContent(content,"join-us-component",loaded)
 
@@ -31,6 +34,7 @@
         addMarkersGroups(map,$contentGroups)
         addMarkersCommunities(map,$contentCommunities)
         addMarkersCoops(map,$contentCoops)
+        addMarkersParties(map,$contentParties)
     }
 
     onMount(() => { 
@@ -63,8 +67,9 @@
                     <p>{$content.findOur}</p>
                     <ol id="entities-list">
                         <li><a href={"/" + locale + "/groups"}>{$content.group}</a>,</li> 
-                        <li><a href={"/" + locale + "/communes"}>{$content.commune}</a> {$content.or}</li> 
-                        <li><a href={"/" + locale + "/cooperatives"}>{$content.cooperative}</a></li>
+                        <li><a href={"/" + locale + "/communes"}>{$content.commune}</a></li> 
+                        <li><a href={"/" + locale + "/cooperatives"}>{$content.cooperative}</a> {$content.or}</li>
+                        <li><a href={"/" + locale + "/parties"}>{$content.party}</a></li> 
                     </ol>
                     <p>{$content.nearYou}</p>
                 </div>
@@ -103,6 +108,9 @@
     #entities-list li:nth-of-type(3):before {
         background-image: url(https://www.libsoc.org/img/common/markers/marker-blue.png);
     }
+    #entities-list li:nth-of-type(4):before {
+        background-image: url(https://www.libsoc.org/img/common/markers/marker-gold.png);
+    }
 
     #entities-list li::marker {
         display: inline-block;

Server/app/svelte/src/landing-component.svelte

@@ -17,10 +17,10 @@
 
     function changeWidth(locale) {
         if (locale=="ru") {
-            gridWidth = "1.2fr 1.05fr 1fr"
+            gridWidth = "1fr 1fr"
         }
         else {
-            gridWidth = "1.2fr 1.1fr 1fr"
+            gridWidth = "1fr 1fr"
         }
     }
 
@@ -59,6 +59,11 @@
                         <img id="coops-img" src="/img/common/coops.svg" alt="coops">
                         <p>{$content.cooperativesText}</p>
                     </div>
+                    <div>
+                        <h2>{$content.partiesTitle}</h2>
+                        <img id="parties-img" src="/img/common/parties.svg" alt="coops">
+                        <p>{$content.partiesText}</p>
+                    </div>
                 </div>
             </div>
         </div>
@@ -72,7 +77,7 @@
         text-align: center;
     }
     
-    #groups-img, #communes-img, #coops-img {
+    #groups-img, #communes-img, #coops-img, #parties-img {
         position: absolute;
         left: 50%;
         transform: translate(-50%);
@@ -81,6 +86,11 @@
         height: 8rem;
     }
 
+    #coops-img {
+        margin-top: 0.5rem;
+        height: 7.5rem;
+    }
+
     #text-container {
         max-width: calc(100vw - 4rem);
         margin: auto;
@@ -93,7 +103,7 @@
 
     #container {
         margin: auto;
-        max-width: 1000px;
+        max-width: 800px;
         margin-top: 2rem;
         margin-bottom: 5rem;
     }
@@ -109,6 +119,7 @@
     #container-grid {
         display: grid;
         grid-template-columns: var(--grid-width);
+        grid-template-rows: var(--grid-width);
         grid-gap: 4rem;
         margin-top: 2rem;
     }

Server/app/svelte/src/navbar/navbar-component.svelte

@@ -76,6 +76,7 @@
                     <li><a href={"/"+locale+"/groups"}>{$content.groups}</a></li>
                     <li><a href={"/"+locale+"/communes"}>{$content.communes}</a></li>
                     <li><a href={"/"+locale+"/cooperatives"}>{$content.cooperatives}</a></li>
+                    <li><a href={"/"+locale+"/parties"}>{$content.parties}</a></li>
                     <li><a href={"/"+locale+"/partners"}>{$content.partners}</a></li>
                     <li id="locales">
                         <button on:click={showLocales}>

Server/app/svelte/src/parties-component.svelte

@@ -0,0 +1,172 @@
+<svelte:options tag="parties-component" />
+
+<script>
+    // Import statements
+    import { onMount } from 'svelte'
+    import { writable } from 'svelte/store';
+    import { parties, addMarkersParties } from '/js/parties.js'
+    import { loadLocaleContent } from "/js/libraries/serverTools.js"
+
+    // Import components
+    import "/js/components/map-component.js" 
+    
+    // Main code
+    let loaded
+    let content = writable({})
+
+    let locale = loadLocaleContent(content,"parties-component",loaded)
+
+    function mapCallbackParties(createMap,content) {
+        let map = createMap([22, 0],2)
+        addMarkersParties(map,content)
+    }
+
+    onMount(() => { 
+
+    })
+</script>
+
+{#key loaded}
+    {#if Object.keys($content).length!=0}
+        <div id="container">
+            <!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
+            <div id="text-container">
+                <h1>{$content.heading}</h1>
+                <img id="party-img" src="/img/common/parties.svg" alt="party">
+                <p>{$content.p1}</p>
+                <h3>{$content.subheading1}</h3>
+                <map-component id="map" callback={(createMap) => mapCallbackParties(createMap,$content)}></map-component>
+                {#each parties as party}
+                    <div class="location-info">
+                        <div class="img-general-info">
+                            <picture>
+                                <source srcset={"/img/parties/"+party.logo+".webp"}>
+                                <source srcset={"/img/parties/"+party.logo+".jpg"}>
+                                <img class="party-logo" alt="logo">
+                            </picture>
+                            <div>
+                                <p><b>{$content.name}: </b>{party.name}</p>
+                                <p><b>{$content.location}: </b>{$content[party.location[0]]}</p>
+                                <p><b>{$content.members}: </b>{party.members}</p>
+                                <p><b>{$content.link}: </b><a href={party.link} target=;_blank; rel=noreferrer>{party.link}</a></p>
+                            </div>
+                        </div>
+                        <p><b>{$content.description}: </b>{$content[party.description]}</p>
+                    </div>
+                {/each}
+            </div>
+        </div>
+    {/if}
+{/key}
+
+<style>
+    @import '/css/common.css';
+
+    #party-img {
+        position: absolute;
+        width: 11.5rem;
+        left: 50%;
+        transform: translate(-50%);
+        z-index: 0;
+        opacity: 0.2;
+    }
+
+    #text-container>:nth-child(3) {
+        margin-top: 8rem;
+    }
+
+    h4 {
+        margin-bottom: 2rem;
+    }
+
+    .location-info {
+        position: relative;
+        margin-bottom: 2rem;
+    }
+
+    .location-info p {
+        margin-bottom: 0;
+    }
+
+    .img-general-info {
+        display: flex;
+        align-content: center;
+        width: 100%;
+        gap: 1.5rem;
+        align-items: center;
+        margin-bottom: 1rem;
+    }
+
+    .img-general-info>:nth-child(2) {
+        flex:none;
+    }
+
+    .party-logo {
+        position: relative;
+        right: 0;
+        max-height: 7rem;
+        max-width: 100%;
+        border-radius: 1rem;
+    }
+
+    a {
+        color: #DD1C1A;
+    }
+
+    #map {
+        --height: 30rem;
+        --width: 100%;
+        --margin-bottom: 3rem;
+    }
+
+    #text-container {
+        max-width: calc(100vw - 4rem);
+        margin: auto;
+    }
+
+    h1 {
+        margin-bottom: 1rem;
+        font-size: 2.2rem;
+        text-align: center;
+    }
+
+    h3 {
+        margin-bottom: 1rem;
+    }
+
+    #container {
+        margin: auto;
+        max-width: 800px;
+        margin-top: 1rem;
+        margin-bottom: 4rem;
+    }
+
+    #container>div>p {
+        margin-bottom: 1rem;
+    }
+
+    #container p {
+        text-align: justify;
+    }
+
+    @media only screen and (max-width: 500px) {
+        .img-general-info {
+            display: flex;
+            flex-direction: column;
+            align-content: left;
+            width: 100%;
+            gap: 1rem;
+            align-items: left;
+            margin-bottom: 0rem;
+        }
+
+        .img-general-info>:nth-child(1) {
+            width: max-content;
+        }
+
+        .img-general-info>:nth-child(2) {
+            width: 100%;
+        }
+    }
+
+</style>