├── .gitignore ├── LICENSE ├── README.md ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-constants.js ├── gatsby-node.js ├── package.json ├── src ├── components │ ├── CityLink.js │ ├── Cta.js │ ├── Footer.js │ ├── Layout.js │ ├── List.js │ ├── Map.js │ └── Top.js ├── data │ ├── cities.json │ ├── countries.json │ └── orgs │ │ ├── austin-women-in-machine-learning-and-data-science.json │ │ ├── bay-area-women-in-machine-learning-and-data-science.json │ │ ├── bengaluru-women-in-machine-learning-and-data-science.json │ │ ├── berlin-women-in-machine-learning-and-data-science.json │ │ ├── bhopal-women-in-machine-learning-and-data-science.json │ │ ├── boston-area-women-in-agile.json │ │ ├── boston-women-in-machine-learning-and-data-science.json │ │ ├── boulder-women-in-machine-learning-and-data-science.json │ │ ├── buenos-aires-women-in-machine-learning-and-data-science.json │ │ ├── cary-women-in-machine-learning-and-data-science.json │ │ ├── chennai-women-in-machine-learning-and-data-science.json │ │ ├── chicago-women-in-machine-learning-and-data-science.json │ │ ├── chicktech-philadelphia.json │ │ ├── cochabamba-women-in-machine-learning-and-data-science.json │ │ ├── code-pub-helsinki.json │ │ ├── code-pub-stockholm.json │ │ ├── codebar-central-london.json │ │ ├── codebar-west-london.json │ │ ├── corpus-christi-women-in-machine-learning-and-data-science.json │ │ ├── dallas-fort-worth-women-in-machine-learning-and-data-science.json │ │ ├── delhi-women-in-machine-learning-and-data-science.json │ │ ├── detroit-women-in-machine-learning-and-data-science.json │ │ ├── django-girls-turkey.json │ │ ├── duchess-france.json │ │ ├── edmonton-women-in-machine-learning-and-data-science.json │ │ ├── girl-develop-it-atlanta.json │ │ ├── girl-develop-it-baltimore.json │ │ ├── girl-develop-it-boston.json │ │ ├── girl-develop-it-chicago.json │ │ ├── girl-develop-it-dc.json │ │ ├── girl-develop-it-denver.json │ │ ├── girl-develop-it-los-angeles.json │ │ ├── girl-develop-it-orlando.json │ │ ├── girl-develop-it-phoenix.json │ │ ├── girl-develop-it-san-francisco.json │ │ ├── girl-develop-it-tampa-bay.json │ │ ├── girl-develop-it-west-palm-beach.json │ │ ├── girl-geek-academy-melbourne.json │ │ ├── girls-in-tech-brazil.json │ │ ├── girls-in-tech-ecuador.json │ │ ├── girls-in-tech-japan.json │ │ ├── girls-in-tech-melbourne.json │ │ ├── girls-in-tech-poland.json │ │ ├── girls-in-tech-romania.json │ │ ├── girls-in-tech-spain.json │ │ ├── girls-in-tech-urugay.json │ │ ├── halifax-women-in-machine-learning-and-data-science.json │ │ ├── kadin-yazilim-tasarim-kolektifi-istanbul.json │ │ ├── kadin-yazilimci-women-developers-of-turkey.json │ │ ├── la-paz-women-in-machine-learning-and-data-science.json │ │ ├── ladies-of-code-paris.json │ │ ├── lagos-women-in-machine-learning-and-data-science.json │ │ ├── le-reset.json │ │ ├── madrid-women-in-machine-learning-and-data-science.json │ │ ├── melbourne-women-in-machine-learning-and-data-science.json │ │ ├── milan-women-in-machine-learning-and-data-science.json │ │ ├── mimmit-koodaa-finland.json │ │ ├── montreal-women-in-machine-learning-and-data-science.json │ │ ├── mumbai-women-in-machine-learning-and-data-science.json │ │ ├── nairobi-women-in-machine-learning-and-data-science.json │ │ ├── network-for-women-with-careers-in-technology.json │ │ ├── new-york-women-in-machine-learning-and-data-science.json │ │ ├── node-girls-london.json │ │ ├── node-girls-madrid.json │ │ ├── node-girls-oxford.json │ │ ├── node-girls-stockholm.json │ │ ├── nyc-geekettes.json │ │ ├── nyc-pyladies.json │ │ ├── paris-data-ladies.json │ │ ├── paris-women-in-machine-learning-and-data-science.json │ │ ├── pehia.json │ │ ├── philadelphia-women-in-data.json │ │ ├── philly-tech-sistas.json │ │ ├── pioneras-developers-medellin.json │ │ ├── pittsburgh-women-in-machine-learning-and-data-science.json │ │ ├── poznan-women-in-machine-learning-and-data-science.json │ │ ├── pune-women-in-machine-learning-and-data-science.json │ │ ├── pyladies-boston.json │ │ ├── pyladies-helsinki.json │ │ ├── pyladies-medellin.json │ │ ├── pyladies-paris.json │ │ ├── pyladies-vancouver.json │ │ ├── r-ladies-boston.json │ │ ├── r-ladies-helsinki.json │ │ ├── r-ladies-istanbul.json │ │ ├── r-ladies-new-york.json │ │ ├── rladies-paris.json │ │ ├── sao-paulo-women-in-machine-learning-data-science.json │ │ ├── seattle-women-in-machine-learning-and-data-science.json │ │ ├── she-codes-angular-medellin.json │ │ ├── sisterslab-istanbul.json │ │ ├── trojmiasto-women-in-machine-learning-and-data-science.json │ │ ├── turku-py.json │ │ ├── vancouver-women-in-machine-learning-and-data-science.json │ │ ├── vue-vixens-medellin.json │ │ ├── women-and-code.json │ │ ├── women-in-devops.json │ │ ├── women-in-tech-cluj.json │ │ ├── women-in-technology-atlanta.json │ │ ├── women-in-technology-international-witi-nj.json │ │ ├── women-techmakers-cairo.json │ │ ├── women-who-code-atlanta.json │ │ ├── women-who-code-boston.json │ │ ├── women-who-code-medellin.json │ │ ├── women-who-code-merida.json │ │ ├── women-who-code-new-york.json │ │ ├── women-who-code-philadelphia.json │ │ ├── women-who-go-berlin.json │ │ ├── women-who-go-boston.json │ │ ├── women-who-go-boulder.json │ │ ├── women-who-go-chicago.json │ │ ├── women-who-go-london.json │ │ ├── women-who-go-los-angeles.json │ │ ├── women-who-go-new-york.json │ │ ├── women-who-go-paris.json │ │ ├── women-who-go-rio.json │ │ ├── women-who-go-san-francisco.json │ │ ├── women-who-go-tokyo.json │ │ ├── women-who-go-utah.json │ │ └── zurich-women-in-machine-learning-and-data-science.json ├── pages │ └── index.js ├── styles │ ├── globalStyles.js │ ├── selectStyles.js │ └── theme.js ├── svgs │ ├── background.svg │ ├── blue-square.svg │ ├── blue-triangle.svg │ ├── flowers.svg │ ├── github.svg │ ├── link.svg │ ├── location.svg │ ├── map.svg │ ├── meetup.svg │ ├── octocat.svg │ ├── plus.svg │ ├── red-square.svg │ ├── telegram.svg │ ├── twitter.svg │ ├── yellow-ball.svg │ └── yellow-triangle.svg └── utils.js ├── static ├── gray-flora.svg ├── icon.png ├── mobile-flora.svg └── social.png └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variables file 55 | .env 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 gatsbyjs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Women World Wide Dev 🗺👩🏾‍💻👩🏿‍💻👩🏻‍💻👩🏽‍💻👩🏼‍💻 2 | 3 | [WomenWorldWide.dev](https://WomenWorldWide.dev) is a map of coding and tech groups around the world for all who identify as women. 4 | 5 | This map represents just a tiny sliver of the great organizations that share this focus. 6 | 7 | If you know of a local group that should be on the map, please submit a pull request, so that we can be sure to add it! 8 | 9 | ## Running the repo locally 10 | If you'd like to submit a pull request, you can run the project locally: 11 | 12 | ``` 13 | git clone git@github.com:prisma/women-world-wide.git 14 | cd women-world-wide 15 | yarn 16 | yarn develop 17 | ``` 18 | 19 | ## Contributions 🤝 20 | We are actively seeking to add additional organizations to the map. 21 | 22 | There are three components to each entry: 23 | 24 | * the country 25 | * the city 26 | * the organization 27 | 28 | When adding a new group, you can add it into an existing city and/or country, or you can add the necessary city and country. You can take any of these steps in the relevant file. 29 | 30 | ### Adding a country 🌍 31 | If the country where your organization is based is not listed on the page, you can add a country to the map. 32 | 33 | To add a country to the map, you should edit the [`src/data/countries.json`](.src/data/countries.json) file. In that file, each country is listed alphabetically with the country name, which is displayed, and the slug, which is used for reference and is always lowercase. 34 | 35 | To add a country, find the place in the alphabetized list and add both slug and the country name. For example if you wanted to add Germany, it would look like the following: 36 | ``` 37 | { 38 | "slug": "germany", 39 | "name": "Germany" 40 | }, 41 | ``` 42 | 43 | For countries that have a name consisting of multiple words, you have two options for the slug. 44 | 45 | You can either use a common acronym, like the "United States" example: 46 | 47 | ``` 48 | { 49 | "slug": "usa", 50 | "name": "United States" 51 | }, 52 | ``` 53 | or combine the names, lower-cased, with a dash between them, like the "Czech Republic" example: 54 | 55 | ``` 56 | 57 | { 58 | "slug": "czech-republic", 59 | "name": "Czech Republic" 60 | }, 61 | ``` 62 | 63 | ### Adding a city 🌆 64 | If the city where your organization is based is not listed on the page, you can add the city to the map. 65 | 66 | To add a city to the map, you should edit the [`src/data/cities.json`](.src/data/cities.json) file. 67 | 68 | Each city entry in the file is composed of multiple parts: 69 | 70 | * the name of the city, which should be capitalized 71 | * the city's slug, which should be lower-case 72 | * the country slug, which should match the slug in the `countries.json` file 73 | * the location on the header map indicated in pixels 74 | 75 | ``` 76 | { 77 | "name": "Berlin", 78 | "slug": "berlin", 79 | "country": "germany", 80 | "top": 212, 81 | "left": 484 82 | }, 83 | ``` 84 | 85 | To add a city, find the place in the alphabetized list and add all of the necessary components to plot the city roughy in the correct area on the map. You may need to try a couple of option in your local version to get the location as close as possible to the correct geographic location. 86 | 87 | 88 | ### Adding an organization 🥳 89 | To add your group, please add each of the organization's locations as a separate JSON file in the [`src/data/orgs`](./src/data/orgs) directory. 90 | 91 | The file should end with a `.json` extension. 92 | 93 | You can see an example below (using the *Women Who Code Atlanta* organization): 94 | 95 | ``` 96 | { 97 | "image": "https://pbs.twimg.com/profile_images/1016008941757718528/tCnG03WW_400x400.jpg", 98 | "name": "Women Who Code Atlanta", 99 | "country": "usa", 100 | "city": "atlanta", 101 | "topics": ["Tech"], 102 | "mainLink": "https://www.meetup.com/Women-Who-Code-Atlanta/", 103 | "secondaryLinks": [ 104 | { 105 | "name": "Twitter", 106 | "url": "https://twitter.com/wwcatl" 107 | }, 108 | { 109 | "name": "Slack", 110 | "url": "https://wwcatl.typeform.com/to/WKy2an" 111 | } 112 | ] 113 | } 114 | ``` 115 | 116 | A submitted organization should have the following: 117 | * Filename: The filename should be the organization name followed by the group's location. For example: `women-who-code-atlanta.json` 118 | * `image`: A link to the organization's image 119 | * `name`: The name of the organization (including the branch location) 120 | * `country`: You should use the country slug here 121 | * `city`: You should use the city slug here. *If your local organization branch just has a country, but not a city, this section can be skipped* 122 | * `topics`: If the group focuses on a specfic technology, you can add more details about the language or focus here 123 | * `mainLink`: This is the main link where your organization lives. Often this is a meetup link, but it could be the group's homepage, or any other place where readers can get additional information 124 | * `secondaryLink`: These are additional links that correspond to an organization — for example if the group has a specific twitter, etc 125 | 126 | ## Maintenance 💪 127 | If you see an inactive (without activity for over six months) organization on this map, please open up an issue, so that the map can remain as current and helpful as possible. 128 | 129 | 130 | 131 | 132 | Made with ❤️ by [Prisma](prisma.io) 133 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | // hacks for skipping scroll on navigation 2 | const { DO_NOT_SCROLL_KEY } = require('./gatsby-constants') 3 | 4 | exports.shouldUpdateScroll = () => !window[DO_NOT_SCROLL_KEY] 5 | exports.onRouteUpdate = () => delete window[DO_NOT_SCROLL_KEY] -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | `gatsby-plugin-react-helmet`, 4 | `gatsby-transformer-sharp`, 5 | `gatsby-plugin-sharp`, 6 | `gatsby-transformer-json`, 7 | 'gatsby-plugin-preload-fonts', 8 | `gatsby-plugin-styled-components`, 9 | { 10 | resolve: `gatsby-source-filesystem`, 11 | options: { 12 | name: `data`, 13 | path: `./src/data/`, 14 | }, 15 | }, 16 | { 17 | resolve: `gatsby-plugin-react-svg`, 18 | options: { 19 | rule: { 20 | include: /svgs/ 21 | } 22 | } 23 | }, 24 | { 25 | resolve: `gatsby-plugin-manifest`, 26 | options: { 27 | name: `women-in-tech`, 28 | short_name: `women-in-tech`, 29 | start_url: `/`, 30 | background_color: `#300886`, 31 | theme_color: `#300886`, 32 | display: `minimal-ui`, 33 | icon: `static/icon.png`, // This path is relative to the root of the site. 34 | }, 35 | }, 36 | // this (optional) plugin enables Progressive Web App + Offline functionality 37 | // To learn more, visit: https://gatsby.dev/offline 38 | // 'gatsby-plugin-offline', 39 | ], 40 | } 41 | -------------------------------------------------------------------------------- /gatsby-constants.js: -------------------------------------------------------------------------------- 1 | exports.DO_NOT_SCROLL_KEY = '__doNotScroll' -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | const { createCityUrl, unwrapNodes } = require('./src/utils') 3 | 4 | exports.createPages = async ({ graphql, actions: { createPage } }) => { 5 | const { data: { allCitiesJson } } = await graphql(`{ 6 | allCitiesJson { edges { node { country slug } } } 7 | }`) 8 | 9 | const cities = unwrapNodes(allCitiesJson) 10 | 11 | cities.forEach(({ country, slug }) => createPage({ 12 | path: createCityUrl(country, slug), 13 | context: { country, slug }, 14 | component: resolve('./src/pages/index.js'), 15 | })) 16 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "women-world-wide", 3 | "private": true, 4 | "description": "Women World Wide Dev", 5 | "version": "0.1.0", 6 | "scripts": { 7 | "build": "gatsby build", 8 | "develop": "gatsby develop", 9 | "start": "npm run develop", 10 | "serve": "gatsby serve" 11 | }, 12 | "dependencies": { 13 | "@tippy.js/react": "^2.1.1", 14 | "babel-plugin-styled-components": "^1.10.0", 15 | "gatsby": "^2.1.19", 16 | "gatsby-image": "^2.0.30", 17 | "gatsby-plugin-manifest": "^2.0.20", 18 | "gatsby-plugin-offline": "^2.0.24", 19 | "gatsby-plugin-preload-fonts": "^2.11.0", 20 | "gatsby-plugin-react-helmet": "^3.0.7", 21 | "gatsby-plugin-react-svg": "^2.0.0", 22 | "gatsby-plugin-sharp": "^2.0.23", 23 | "gatsby-plugin-styled-components": "^3.0.6", 24 | "gatsby-source-filesystem": "^2.0.23", 25 | "gatsby-transformer-json": "^2.1.8", 26 | "gatsby-transformer-sharp": "^2.1.15", 27 | "polished": "^3.0.3", 28 | "prop-types": "^15.7.2", 29 | "react": "^16.8.3", 30 | "react-dom": "^16.8.3", 31 | "react-helmet": "^5.2.0", 32 | "react-select": "^2.4.1", 33 | "rellax": "^1.8.0", 34 | "styled-components": "^4.1.3" 35 | }, 36 | "license": "MIT", 37 | "repository": { 38 | "type": "git", 39 | "url": "https://github.com/prisma/women-world-wide" 40 | }, 41 | "bugs": { 42 | "url": "https://github.com/prisma/women-world-wide/issues" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/components/CityLink.js: -------------------------------------------------------------------------------- 1 | // Libraries 2 | import React, { forwardRef } from 'react' 3 | import { Link } from 'gatsby' 4 | 5 | // Utilities 6 | import { createCityUrl, navigateTo } from '../utils' 7 | 8 | const handleClick = event => { 9 | if (event.ctrlKey || event.metaKey) return 10 | event.preventDefault() 11 | return navigateTo( 12 | event.target.getAttribute('href'), 13 | { top: 850, behavior: 'smooth' }, 14 | ) 15 | } 16 | 17 | const allowedProps = ['to', 'style', 'className', 'children', 'tabIndex'] 18 | const pass = input => allowedProps.reduce((output, key) => { 19 | if (input[key] !== undefined) output[key] = input[key] 20 | return output 21 | },{}) 22 | 23 | const CityLink = forwardRef(({ country, slug, ...props }, ref) => ( 24 | 30 | )) 31 | 32 | export default CityLink -------------------------------------------------------------------------------- /src/components/Cta.js: -------------------------------------------------------------------------------- 1 | // Libraries 2 | import React from 'react' 3 | import styled from 'styled-components' 4 | 5 | // Illustration 6 | import Octocat from '../svgs/octocat.svg' 7 | import PlusIcon from '../svgs/plus.svg' 8 | 9 | // Cta 10 | const Cta = () => ( 11 | 12 | 13 |
14 | 15 | Don't see your organization on the list? 16 | This site is fully open source! Simply submit a PR on Github to add a new organization. 17 | 18 | 21 |
22 | 23 | ) 24 | 25 | // Styles 26 | const Container = styled.div` 27 | display: flex; 28 | flex-direction: column; 29 | align-items: flex-start; 30 | position: relative; 31 | z-index: 10; 32 | background: ${p => p.theme.white}; 33 | max-width: 900px; 34 | margin: -40px auto 0 auto; 35 | box-shadow: ${p => p.theme.cardShadow}; 36 | padding: 32px; 37 | 38 | @media screen and (min-width: 450px) { 39 | padding: 32px 40px; 40 | flex-direction: row; 41 | align-items: center; 42 | } 43 | ` 44 | 45 | const Illustration = styled(Octocat)` 46 | margin: 0 0 16px 0; 47 | 48 | @media screen and (min-width: 450px) { margin: 0 20px 0 0; } 49 | ` 50 | 51 | const Main = styled.div` 52 | display: flex; 53 | align-items: flex-start; 54 | flex-direction: column; 55 | flex: 1; 56 | 57 | @media screen and (min-width: 800px) { 58 | align-items: center; 59 | flex-direction: row; 60 | } 61 | ` 62 | 63 | const Text = styled.div` 64 | flex: 1; 65 | ` 66 | 67 | const Title = styled.div` 68 | color: ${p => p.theme.black}; 69 | font-weight: 600; 70 | font-size: 20px; 71 | line-height: 24px; 72 | margin-bottom: 8px; 73 | ` 74 | 75 | const Subtitle = styled.div` 76 | color: ${p => p.theme.gray}; 77 | font-size: 18px; 78 | line-height: 24px; 79 | ` 80 | 81 | const Button = styled.a` 82 | display: flex; 83 | padding: 0 12px; 84 | margin: 16px 0 0 0; 85 | height: 32px; 86 | background-color: ${p => p.theme.purple}; 87 | color: ${p => p.theme.white}; 88 | align-items: center; 89 | text-decoration: none; 90 | 91 | svg { 92 | display: block; 93 | height: 12px; 94 | width: auto; 95 | margin-right: 8px; 96 | } 97 | 98 | @media screen and (min-width: 800px) { 99 | margin: 0 0 0 24px; 100 | } 101 | ` 102 | 103 | export default Cta -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | // Libraries 2 | import React from 'react' 3 | import styled from 'styled-components' 4 | 5 | // Footer 6 | const Footer = () => ( 7 | 8 | 9 | Women World Wide Dev 10 | Thank you to everyone who makes these groups possible! 11 | 12 | 13 | Made with ️️❤️ by Prisma 14 | 15 | ) 16 | 17 | // Styles 18 | const Container = styled.div` 19 | display: flex; 20 | flex-direction: column; 21 | justify-content: space-between; 22 | align-items: center; 23 | max-width: 900px; 24 | padding: 40px 16px; 25 | margin: 0 auto 64px auto; 26 | color: ${p => p.theme.gray}; 27 | text-align: center; 28 | 29 | @media screen and (min-width: 650px) { 30 | align-items: flex-end; 31 | text-align: left; 32 | flex-direction: row; 33 | } 34 | ` 35 | 36 | const Left = styled.div`` 37 | 38 | const Name = styled.div` 39 | font-weight: 700; 40 | margin-bottom: 4px; 41 | ` 42 | 43 | const Right = styled.div` 44 | white-space: nowrap; 45 | color: ${p => p.theme.midGray}; 46 | text-align: center; 47 | margin: 16px 0 0 0; 48 | 49 | @media screen and (min-width: 650px) { 50 | text-align: right; 51 | margin: 0; 52 | } 53 | ` 54 | 55 | const Emoji = styled.span` 56 | font-size: 14px; 57 | ` 58 | 59 | const Subline = styled.div` 60 | line-height: 1.25; 61 | color: ${p => p.theme.midGray}; 62 | ` 63 | 64 | const Link = styled.a` 65 | color: inherit; 66 | ` 67 | 68 | export default Footer -------------------------------------------------------------------------------- /src/components/Layout.js: -------------------------------------------------------------------------------- 1 | // Libraries 2 | import React from 'react' 3 | import { ThemeProvider } from 'styled-components' 4 | import { Helmet } from 'react-helmet' 5 | 6 | // Styles 7 | import GlobalStyles from '../styles/globalStyles' 8 | import theme from '../styles/theme' 9 | 10 | const siteName = `Women World Wide Dev` 11 | const siteDescription = `An open source map of amazing Women in Tech groups around the world! Find local organizations and add your favorites! Made in celebration of International Women's Day 2019 💜` 12 | const siteUrl = `https://womenworldwide.dev` 13 | 14 | // Layout 15 | export default ({ children }) => ( 16 | 17 | <> 18 | 19 | 20 | {siteName} 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | {children} 38 | 39 | 40 | ) -------------------------------------------------------------------------------- /src/components/List.js: -------------------------------------------------------------------------------- 1 | // Libraries 2 | import React from 'react' 3 | import styled from 'styled-components' 4 | import { transparentize } from 'polished' 5 | import { useStaticQuery, graphql } from 'gatsby' 6 | import Select from 'react-select' 7 | 8 | // Utilities 9 | import { createCityUrl, navigateTo, allCitiesOption, convertToOption, unwrapNodes } from '../utils' 10 | 11 | // Icons 12 | import LocationIcon from '../svgs/location.svg' 13 | import MeetupIcon from '../svgs/meetup.svg' 14 | import TwitterIcon from '../svgs/twitter.svg' 15 | import TelegramIcon from '../svgs/telegram.svg' 16 | import LinkIcon from '../svgs/link.svg' 17 | 18 | // Components 19 | import UnstyledCityLink from './CityLink' 20 | 21 | // Styles 22 | import theme from '../styles/theme' 23 | import selectStyles from '../styles/selectStyles' 24 | 25 | // Handle City Selection 26 | const setCurrentCity = ({ data = {} }) => navigateTo(data.url) 27 | const getOrgCityUrl = (orgCity, orgCountry) => { 28 | if(!orgCity || !orgCountry) return null 29 | return createCityUrl(orgCity.slug, orgCountry.slug) 30 | } 31 | 32 | // List 33 | const List = ({ currentCity }) => { 34 | 35 | const data = useStaticQuery(queries) 36 | const orgs = unwrapNodes(data.allOrgsJson) 37 | const cities = unwrapNodes(data.allCitiesJson) 38 | const countries = unwrapNodes(data.allCountriesJson) 39 | 40 | // Select Options 41 | const groupedCitiesOptions = countries.map(country => ({ 42 | label: country.name, 43 | data: { url: `/${country.slug}` }, 44 | options: cities 45 | .filter(city => city.country === country.slug) 46 | .map(convertToOption) 47 | })) 48 | 49 | const selectOptions = () => [allCitiesOption, ...groupedCitiesOptions] 50 | 51 | return ( 52 | 53 | 54 | 55 | Show me all organizations in 56 | 57 |