VuePeople lists and connects Vue.JS developers around the world.

Last update: May 26, 2022

vue-people

VuePeople lists and connects Vue.JS developers around the world.

Status

CircleCi: CircleCI

Fronted Build Setup

$ cd frontend

# install dependencies
$ yarn install

# copy .env.template in .env
$ cp .env.template .env

# add API key to .env as described in the template

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

Specific Dev environment configurations

NEVER RUN THIS ON THE PRODUCTION SERVER

> .env ">
# Copy dummy self signed certs to Nginx folder:
$ cp nginx/dev_certs/cert.pem nginx/certs/cert.pem
$ cp nginx/dev_certs/chain.pem nginx/certs/chain.pem
$ cp nginx/dev_certs/key.pem nginx/certs/key.pem

# Tell node to ignore self signed certificate:
$ echo "NODE_TLS_REJECT_UNAUTHORIZED = '0'" >> .env
# start django in debug mode
change DEBUG=True in django/.env

Backend build setup

# Build docker service with docker-compose
$ cd django
$ cp .env.template .env

$ cd ..
$ docker-compose build
$ docker-compose up -d

# Perform standard django initialization
$ docker-compose exec django python manage.py migrate
$ docker-compose exec django python manage.py createsuperuser

Deploy

Deploy is done by CircleCi, manual deploy can be performed on a docker-compose enabled unix machine as follow:

git clone [email protected]:pulilab/vue-people.git
$ cd vue-people
$ docker-compose build
$ docker-compose up -d

SSL certificates

# Set the Domain variable
 export DOMAIN=NAME_OF_THE_DOMAIN

# Pull the docker image for certbot:
 docker pull certbot/certbot

# Obtain the certificates
 docker run -it --rm -v /home/$(whoami)/vue-people/nginx/certs:/etc/letsencrypt:rw -v /home/$(whoami)/vue-people/nginx/certs-data:/data/letsencrypt:rw  deliverous/certbot  certonly --webroot --webroot-path=/data/letsencrypt -d $DOMAIN

# copy the certbot certs:
 sudo cp /home/$(whoami)/vue-people/nginx/certs/live/$DOMAIN/privkey.pem /home/$(whoami)/vue-people/nginx/certs/key.pem
 sudo cp /home/$(whoami)/vue-people/nginx/certs/live/$DOMAIN/fullchain.pem /home/$(whoami)/vue-people/nginx/certs/chain.pem
 sudo cp /home/$(whoami)/vue-people/nginx/certs/live/$DOMAIN/cert.pem /home/$(whoami)/vue-people/nginx/certs/cert.pem

# own the certificates:
 sudo chown $(whoami):$(whoami) /home/$(whoami)/vue-people/nginx/certs/key.pem
 sudo chown $(whoami):$(whoami) /home/$(whoami)/vue-people/nginx/certs/chain.pem
 sudo chown $(whoami):$(whoami) /home/$(whoami)/vue-people/nginx/certs/cert.pem

# refresh certificates
 docker run -it --rm -v /home/$(whoami)/vue-people/nginx/certs:/etc/letsencrypt:rw -v /home/$(whoami)/vue-people/nginx/certs-data:/data/letsencrypt:rw  certbot/certbot renew --webroot --webroot-path=/data/letsencrypt

License

MIT

How to contribute:

  • fork the repo
  • clone the repo
  • cd vue-people/frontend && yarn
  • yarn dev
  • cp .env.template .env
  • edit .env and: -- add NODE_TLS_REJECT_UNAUTHORIZED = '0' -- add WEBSOCKET_PROTOCOL=ws -- modify host to host=0.0.0.0
  • cd ../django/ && cp .env.template .env
  • add a random long strin under SECRET_KEY in django/.env
  • cd.. && docker-compose build
  • docker-compose up -d
  • docker-compose exec django python manage.py migrate
  • docker-compose exec django python manage.py createsuperuser and follow the prompt to generate an admin user
  • go to locahost/admin and login with the created credentials
  • in the admin:
    • Go to sites -> add site -> fill the two input with localhost
    • Go to social accounts/social applications -> add social application
    • fill with: provider: GitHub | name: Github | ClientId: XXX | Secret Key: XXXX
    • to obtain ClientID and Secret Key follow this guide: https://developer.github.com/apps/building-oauth-apps/creating-an-oauth-app/
    • Homepage url is: http://localhost and callback url is: http://localhost/accounts/github/login/callback/
  • code :D
  • commit and create a PR from your fork to this repo

GitHub

https://github.com/pulilab/vue-people
Comments
  • 1. Speed improvement: One single tooltip shared among all user-markers

    Currently the each MapMaarker instantiate a l-tooltip inside. This is suboptimal since we always show only one tooltip at a time.

    What is needed is to remove the l-tooltip from every marker, add one l-layer-group inside the l-map with inside a 'general tooltip' and display that tooltip on marker over on the correct coordinates.

    This will reduce the amount of drawn element in the dom and speed up the page / responsiveness of the map.

    This needs to be done only for people markers / tooltip and not for meetup ones.

    Reviewed by DonNicoJs at 2018-10-15 09:22
  • 2. Ui Improvement: Collect user discord tag

    Attempt to resolve Issue #120

    • Modifycomponents/UserProfileForm.vue to collect the discordTag, right after the twitter profile
    • Modify components/PersonDetails.vue to display the discord icon (and link to discord profile ) after twitter icon on the top
    • Modify django/people/models.py to include discordTag as a field
    • Verify that everything works is and properly wired.
    Reviewed by JoelLau at 2018-10-15 12:16
  • 3. Feature/build info page

    fixes: #51

    @nullcode this should be prioritised as the next branch to merge to master so we can start showing the build info pages for the following builds. I tried this locally and it works properly for me but please do double check this

    Reviewed by DonNicoJs at 2018-06-13 11:30
  • 4. Display fewer results in smaller zoom levels

    When registered locations gets much more, it can be really crowded and with poor performance if I'm seeing the full map with all results shown. A common solution is to display fewer results in smaller zoom levels, and gradually show more as users zoom-in. Sometimes just a number on even smaller zoom levels.

    Reviewed by SevenOutman at 2018-06-07 02:03
  • 5. Add library author category

    Between the core dev and just a dev groups of Vue users there's also the group of users who write / maintain vue-related libraries. Having a separate group for them would be very nice.

    Reviewed by gustojs at 2018-06-07 14:36
  • 6. What is this and how did I end up on it?

    Hi there!

    I just found my picture and name pinpointed on the map in this project, but I have no idea what it is or how I ended up on it. I wasn't notified of this nor did I even consent to have my information shared in this manner..

    Maybe consider adding a "Hey, someone is trying to add you to vuepeople.org. Click here to accept the invite." flow or something along those lines.

    Happy open-sourcing! ~ Rijk

    Reviewed by rijkvanzanten at 2020-04-15 13:35
  • 7. Your SSL Expired

    The LetsEncrypt Certificate for https://vuepeople.org/ expired on Sunday, February 24, 2019 at 4:09:30 AM Eastern Standard Time. Not really an 'issue' for the code, but just letting you know.

    Reviewed by joeelia at 2019-02-24 20:02
  • 8. Tag list dropdown is broken

    Hi! The v-select dropdown for the taglist on the profile form is broken.

    It looks like the data coming from https://vuepeople.org/api/tags/ is actually giving two props, "name" and "slug" but v-select expects "label" and "value" in order for it to work.

    So instead of the values its outputting [object object] :)

    Reviewed by marina-mosti at 2018-12-14 14:49
  • 9. Synergizing efforts with VueMeetups.org

    Hello!

    I'm one of the co-founders of VueMeetups.org. In an effort to reduce fragmentation within the community, I wanted to reach out because both groups seem to be trying to achieve similar goals as far as making it easy for people to find and meet other Vue.js developers.

    It would be great to get your thoughts on this when you have some time. Thanks!

    Reviewed by bencodezen at 2018-07-08 20:03
  • 10. The counter in the bottom left doesn't count anymore

    Previously, when I zoomed in on the map, the counter in the bottom left updated with the numbers from the visible area of the map. Now, after switching to multiple-user pins, it doesn't update anymore.

    Reviewed by gustojs at 2018-06-12 22:43
  • 11. start up but error , Is packages.json correct ?

    git clone 
    cd frontend
    npm install
    nuxt 
    

     ERROR  Invalid credentials Request failed with status code 404                                                                                                                  22:26:11
    
      at createError (node_modules/axios/lib/core/createError.js:16:15)
      at settle (node_modules/axios/lib/core/settle.js:17:12)
      at Unzip.handleStreamEnd (node_modules/axios/lib/adapters/http.js:244:11)
      at Unzip.emit (events.js:215:7)
      at Unzip.EventEmitter.emit (domain.js:475:20)
      at endReadableNT (_stream_readable.js:1184:12)
      at processTicksAndRejections (internal/process/task_queues.js:80:21) (repeated 13 times)
    

    maybe packages.json must update now ?

    Reviewed by pythonwood at 2020-10-21 14:30
  • 12. Error binding parameter 19 - probably unsupported type.

    ub18 + Django 2.2 + sqlite + SpatiaLite

    when adding people in /admin/people/person/add/ page

    django debug page:

    site-packages/django/db/backends/utils.py in _execute
    
        def _execute(self, sql, params, *ignored_wrapper_args):
            self.db.validate_no_broken_transaction()
            with self.db.wrap_database_errors:
                if params is None:
                    return self.cursor.execute(sql)
                else:
                    return self.cursor.execute(sql, params)  # <= this line
        def _executemany(self, sql, param_list, *ignored_wrapper_args):
            self.db.validate_no_broken_transaction()
            with self.db.wrap_database_errors:
                return self.cursor.executemany(sql, param_list)
    
    

    Local vars

    Variable | Value
    -- | --
    ignored_wrapper_args | (False,  {'connection': <django.contrib.gis.db.backends.spatialite.base.DatabaseWrapper object at 0x7f9e6aae3400>,   'cursor': <django.db.backends.utils.CursorDebugWrapper object at 0x7f9e6a837278>})
    params | [None,  'aaaaa',  None,  None,  '',  None,  None,  'https://github.com/xxxxxxx',  None,  None,  None,  None,  1,  '2020-10-23 02:23:28.637068',  '2020-10-23 02:23:28.637100',  True,  True,  True,  True,  <django.contrib.postgres.fields.jsonb.JsonAdapter object at 0x7f9e6a8377b8>]
    self | <django.db.backends.utils.CursorDebugWrapper object at 0x7f9e6a837278>
    sql | ('INSERT INTO "people_person" ("user_id", "bio", "company", "hireable", '  '"github_login", "github_created", "github_updated", "github_url", '  '"twitter_url", "website_url", "avatar_url", "location", "type_id", '  '"created", "modified", "public_email", "feature_updates", "upcoming_events", '  '"job_opportunities", "settings") VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, '  '%s, %s, GeomFromText(%s,4326), %s, %s, %s, %s, %s, %s, %s, %s)')
    
    Reviewed by pythonwood at 2020-10-23 02:25
  • 13. Meetup API curation

    The Objective is to create A Django admin interface to curate the meetup grups.

    Action points:

    • The meetup groups fetcher from meetup.com should be disabled
    • The events fetcher should remain but work only for meetup.com groups / events
    • Admin interface to manage new meetups groups and events manually
    • API should be consumable from *.vuejs.org so the domain must be added to allowed host and appropriate CORS headers added.

    Steps must be taken to preserve the correct model properties / binding for the frontend of vue-people to keep working.

    In addition we need a new meetup icon for the map that represent the generalised meetup type ( not the default meetup.com icon )

    Reviewed by DonNicoJs at 2019-03-12 15:56
  • 14. Speed Improvement: optimise "people" API endpoint and add "person" endpoint

    Currently /people/ contains all info. The endpoint should be optimised to only include:

    • id
    • first_name
    • email
    • avatar_url
    • type
    • coordinates

    Accordingly a "person" endpoint should be created that exposes the expanded info to be show in the left bar.

    Reviewed by torbent at 2018-11-16 14:14
  • 15. Ui Improvement: Collect user discord tag

    Currently we do not have a field to collect the user DiscordTag. Since the vue community hangs out mostly on Discord (https://vue-land.js.org/ ) It would make sense to add this field to the user profile.

    With this issue we should achieve:

    • Modifycomponents/UserProfileForm.vue to collect the discordTag, right after the twitter profile
    • Modify components/PersonDetails.vue to display the discord icon (and link to discord profile ) after twitter icon on the top
    • Modify django/people/models.py to include discordTag as a field
    • Verify that everything works is and properly wired.
    Reviewed by DonNicoJs at 2018-10-15 09:46
Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes
Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes

Kirby Mapnotator Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes. Overview This plugin is completely free and publish

Jun 5, 2022
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Jun 25, 2022
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

vue-custom-google-autocomplete Installation You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes

Apr 11, 2022
Cografya-3d - 3D models of some geographic shapes and their use with Three.js

??️ Coğrafya 3D Bazı coğrafi şekillerin 3D modelleri ve Three.js ile kullanılmas

Apr 27, 2022
🗺 Vue Mapbox GL - A small components library to use Mapbox GL in Vue

?? Vue Mapbox GL A small components library to use Mapbox GL in Vue. Installation & usage Have a look at the small guide for information on how to set

Jun 23, 2022
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable

office-map Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable загрузка из JSON информации о

May 9, 2022
Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

Jul 3, 2022
Vue 2 components for Leaflet maps
Vue 2 components for Leaflet maps

Vue2Leaflet Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps. How to install npm in

Jun 22, 2022
A Vue.js component for Mapbox GL JS

Mapbox GL JS Vue.js A simple lightweight (9kb/3kb gzipped) Mapbox GL JS Vue component. Demo Installation Setup Props Events Plugins Popups Development

Jul 5, 2022
Baidu Map components for Vue 2.x
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

Jul 1, 2022
Choropleth Map component for Vue.js

vue-choropleth Vue components to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using Vue2Leaflet H

Feb 12, 2022
Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

Jun 21, 2022
Integrate Google Maps in your Vue application
Integrate Google Maps in your Vue application

vue-googlemaps Integrate Google Maps in your Vue application in a "Vue-way". This library is Work In Progress. More components will be available in th

Jun 27, 2022
Vue 2.x components for CesiumJS.
Vue 2.x components for CesiumJS.

VUE CESIUM Vue 2.x components for CesiumJS. Load Cesium built package or other third-party packages which are built on Cesium. Languages 中文 English Li

Jun 26, 2022
A cloned & maintained version of vue-mapbox

V-Mapbox ?? Combine powers of Vue.js and Mapbox GL JS NOTE: This is a maintained version of vue-mapbox V-Mapbox is wrapper around Mapbox GL JS library

Jul 2, 2022
A lightweight Google Maps plugin for Vue
A lightweight Google Maps plugin for Vue

x5-gmaps (Live Demo) This is a lightweight Google Maps plugin for Vue. Samples/examples/tutorials Tutorial creating a COVID Heatmap Address Autocomple

Apr 22, 2022
vue google map custom marker component
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

May 17, 2022
Google maps component for vue with 2-way data binding

vue-google-maps Demo: Demo in production Showcase with a lot of features Presentation If you want to write google map this way : <map :center="{lat:

May 25, 2022
A set of composable components for easy use of Google Maps in your Vue 3 projects.

A set of composable components for easy use of Google Maps in your Vue 3 projects.

Jun 24, 2022