├── .babelrc ├── .circleci └── config.yml ├── .editorconfig ├── .eslintrc ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .prettierrc ├── .snyk ├── LICENSE ├── README.md ├── content ├── girls │ ├── aoba.md │ ├── hajime.md │ ├── hifumi.md │ ├── ko.md │ ├── media │ │ ├── aoba-thumbnail.png │ │ ├── aoba.png │ │ ├── bear.png │ │ ├── hajime-thumbnail.png │ │ ├── hajime.png │ │ ├── hifumi-thumbnail.png │ │ ├── hifumi.png │ │ ├── hotaru-thumbnail.png │ │ ├── hotaru.png │ │ ├── ko-thumbnail.png │ │ ├── ko.png │ │ ├── momo-thumbnail.png │ │ ├── momo.png │ │ ├── naru-thumbnail.png │ │ ├── naru.png │ │ ├── nene-thumbnail.png │ │ ├── nene.png │ │ ├── rin-thumbnail.png │ │ ├── rin.png │ │ ├── shizuku-thumbnail.png │ │ ├── shizuku.png │ │ ├── umiko-thumbnail.png │ │ ├── umiko.png │ │ ├── yun-thumbnail.png │ │ └── yun.png │ ├── momo.md │ ├── naru.md │ ├── nene.md │ ├── rin.md │ ├── shizuku.md │ ├── umiko.md │ └── yun.md ├── images │ ├── 404.jpeg │ ├── anilist.png │ ├── crunchyroll.png │ ├── fanart.yaml │ ├── fanart │ │ ├── hifumi1.jpg │ │ ├── hifumi2.jpg │ │ └── hifumi3.png │ ├── favicon.jpg │ ├── landing.jpg │ ├── outro.jpg │ └── verified.png └── tweets │ ├── 2017-01-01-aoba.md │ ├── 2017-02-01-aoba.md │ ├── 2017-04-01-hajime.md │ ├── 2017-05-21-yun.md │ ├── 2017-12-04-hifumi.md │ ├── 2017-12-24-rin.md │ ├── media │ ├── eagle_jump.png │ ├── hajime-1.jpg │ ├── hifumi-1.jpg │ └── hifumi-aoba.jpg │ └── users │ ├── aoba.md │ ├── avatars │ ├── aoba.jpg │ ├── hajime.jpg │ ├── hifumi.jpg │ ├── nene.jpg │ ├── rin.jpg │ └── yun.jpg │ ├── hajime.md │ ├── hifumi.md │ ├── rin.md │ └── yun.md ├── gatsby-config.js ├── gatsby-node.js ├── graphql.config.json ├── package-lock.json ├── package.json ├── src ├── components │ ├── girls │ │ ├── girls.jsx │ │ └── girls.scss │ ├── intro │ │ ├── checklist.jsx │ │ ├── checklist.scss │ │ ├── description.jsx │ │ ├── fan_art.jsx │ │ ├── girls_header.jsx │ │ ├── girls_header.scss │ │ ├── intro.jsx │ │ ├── intro.scss │ │ └── twitter │ │ │ └── tweet.jsx │ ├── landing │ │ ├── landing_panel.jsx │ │ └── landing_panel.scss │ └── outro │ │ ├── outro_panel.jsx │ │ └── outro_panel.scss ├── layouts │ ├── _variables.scss │ ├── animation.scss │ ├── boundary.jsx │ ├── bulma.scss │ ├── girls.scss │ ├── github.scss │ ├── header.jsx │ ├── layout.jsx │ └── style.scss ├── pages │ ├── 404.jsx │ └── index.jsx ├── static │ └── _headers └── utils.js └── static └── _headers /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["emotion"], 3 | "presets": [ 4 | [ 5 | "babel-preset-gatsby", 6 | { 7 | "targets": { 8 | "browsers": [">0.25%", "not dead"] 9 | } 10 | } 11 | ] 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | docker: 5 | - image: circleci/node:10 6 | steps: 7 | - checkout 8 | - restore_cache: 9 | key: hifumiio-{{ checksum "package.json" }} 10 | - run: npm install 11 | - run: npm run build 12 | - save_cache: 13 | paths: 14 | - ~/.m2 15 | key: hifumiio-{{ checksum "package.json" }} 16 | - persist_to_workspace: 17 | root: . 18 | paths: . 19 | lint: 20 | docker: 21 | - image: circleci/node:10 22 | steps: 23 | - checkout 24 | - attach_workspace: 25 | at: . 26 | - run: npm install 27 | - run: npm run lint 28 | 29 | workflows: 30 | version: 2 31 | pipeline: 32 | jobs: 33 | - build 34 | - lint 35 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_size = 2 5 | indent_style = space 6 | end_of_line = lf 7 | insert_final_newline = true 8 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "eslint:recommended" 4 | ], 5 | "parserOptions": { 6 | "ecmaVersion": 6, 7 | "sourceType": "module", 8 | "ecmaFeatures": { 9 | "jsx": true 10 | } 11 | }, 12 | "parser": "babel-eslint", 13 | "env": { 14 | "browser": true, 15 | "node": true 16 | }, 17 | "rules": { 18 | "semi": 2, 19 | "object-curly-spacing": [2, "always"], 20 | "spaced-comment": 1, 21 | "array-callback-return": 2, 22 | "arrow-spacing": 2, 23 | "no-unused-vars": "off", 24 | "no-undef": 2, 25 | "no-console": 1, 26 | "no-var": 2, 27 | "no-eval": 2, 28 | "no-bitwise": 2, 29 | "no-alert": 2, 30 | "no-delete-var": 2, 31 | "no-else-return": 2, 32 | "no-labels": 2, 33 | "no-useless-return": 2, 34 | "no-nested-ternary": 2, 35 | "no-useless-escape": 2, 36 | "no-unneeded-ternary": 2, 37 | "no-magic-numbers": [2, { 38 | "ignoreArrayIndexes": true, 39 | "enforceConst": true, 40 | "ignore": [0, 1] 41 | }], 42 | "no-return-await": 2, 43 | "no-useless-concat": 2, 44 | "no-const-assign": 2, 45 | "no-buffer-constructor": 2, 46 | "eqeqeq": 2, 47 | "prefer-promise-reject-errors": 2, 48 | "prefer-spread": 2, 49 | "prefer-arrow-callback": 2, 50 | "prefer-const": 2, 51 | "prefer-template": 2 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Device (please complete the following information):** 27 | - Browser [e.g. chrome, safari] 28 | - Version [e.g. 70] 29 | 30 | **Additional context** 31 | Add any other context about the problem here. 32 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: feature/update 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe if so.** 11 | A clear and concise description of what the problem is. 12 | 13 | **Describe the solution/feature you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## PR Title 2 | 3 | 4 | 5 | #### Why you made the changes: 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Project dependencies 2 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 3 | node_modules 4 | oldsrc/ 5 | .cache/ 6 | .idea/ 7 | # Build directory 8 | public/ 9 | .DS_Store 10 | yarn-error.log 11 | schema.json 12 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "none", 3 | "tabWidth": 2, 4 | "semi": true, 5 | "singleQuote": false 6 | } 7 | -------------------------------------------------------------------------------- /.snyk: -------------------------------------------------------------------------------- 1 | # Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities. 2 | version: v1.19.0 3 | ignore: {} 4 | # patches apply the minimum changes required to fix a vulnerability 5 | patch: 6 | SNYK-JS-LODASH-567746: 7 | - gatsby > webpack-dev-server > portfinder > async > lodash: 8 | patched: '2020-07-30T11:30:55.271Z' 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 Xetera 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 | 2 | 3 | # New Game! 4 | ## hifumi.io 5 | 6 | ### Helping out 7 | Not a programmer? No problem, We would still love to get your input! 8 | 9 | 10 | 11 | 12 | 13 | Most discussion will be in the `#tech-talk` channel. 14 | 15 | ### Tech 16 | 17 | 18 | 19 | The website is made using [gatsby](https://www.gatsbyjs.org/) which lets us to separate our dynamic 20 | data from our components, allowing us to optimize and add new content much more easily. 21 | 22 | Netlify builds automatically from `master` so your changes are 23 | a single pull request away from going live! 24 | 25 | ### Contributing 26 | 27 | 1. `git clone https://github.com/Xetera/hifumi.io.git` 28 | 2. `npm install` 29 | 3. `npm run dev` 30 | 4. Go to the address it gave you, and work away! 31 | 32 | #### Adding new tweets 33 | 34 | Tweets are declared under `/content/tweets`. 35 | 36 | To add a new user, create a new `.md` file similar to the 37 | existing ones. 38 | 39 | Twitter users are declared under `/content/tweets/users` 40 | 41 | To add a new tweet, add a new `.md` file in the same file. 42 | The tweets are sorted by date in the format`YYYY-MM-DD`. 43 | 44 | To reference a user, give the `name` property in the markdown 45 | frontmatter the same name as the user inside the `/users` folder. 46 | 47 | ##### Made with <3 by the New Game community 48 | -------------------------------------------------------------------------------- /content/girls/aoba.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | image: "./media/aoba.png" 4 | thumbnail: "./media/aoba-thumbnail.png" 5 | name: Suzukaze Aoba 6 | japanese: 涼風 青葉 7 | quote: "Kyou mo ichinichi GABARUZOI!" 8 | color: "#c6b6fb" 9 | role: "Character Designer" 10 | strengths: 11 | - Is adorable 12 | - Surprisingly talented 13 | weaknesses: 14 | - Has a hard time navigating bathrooms 15 | - Still lives with her mom 16 | --- 17 | 18 | Lead character of the show, everyone's favorite. 19 | One of the hardest workers who ends up becoming very successful. 20 | -------------------------------------------------------------------------------- /content/girls/hajime.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | name: Shinoda Hajime 4 | quote: "\"Maybe I can skip on this month's rent for new lightsabers\"" 5 | japanese: 篠田 はじめ 6 | image: "./media/hajime.png" 7 | thumbnail: "./media/hajime-thumbnail.png" 8 | department: "Animation" 9 | color: "#83cccb" 10 | role: Motion Designer 11 | strengths: 12 | - Has cool toys 13 | - Tomboy 14 | weaknesses: 15 | - Doesn't have tickets for the Moon Ranger show 16 | - Terrible financial responsibility 17 | --- 18 | 19 | Yun's girlfriend (maybe not). Has a massive collection of toys on her desk which she has 20 | difficulty paying for at times. 21 | 22 | She's in the motion team but has to sit together with the art department due to 23 | a lack of desks. 24 | -------------------------------------------------------------------------------- /content/girls/hifumi.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | name: Takimoto Hifumi 4 | japanese: 滝本ひふみ 5 | quote: "\"Do you like it when I smile, Sojiro?\"" 6 | image: "./media/hifumi.png" 7 | thumbnail: "./media/hifumi-thumbnail.png" 8 | color: "#eb7192" 9 | role: "Sr. Character Designer" 10 | strengths: 11 | - Sometimes shy 12 | - That s m i l e 13 | - Great cosplayer 14 | - Has a cute hedgehog 15 | - Literally everything 16 | weaknesses: 17 | - Sometimes shy 18 | - Ok more like constantly shy 19 | --- 20 | 21 | Impossibly cute, huge introvert who struggles with talking to people including her coworkers. 22 | 23 | One of the most popular characters in the show. 24 | -------------------------------------------------------------------------------- /content/girls/ko.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | name: Yagami Kō 4 | japanese: 八神 コウ 5 | quote: "\"What? I'm only sleeping at work every other day...\"" 6 | image: "./media/ko.png" 7 | thumbnail: "./media/ko-thumbnail.png" 8 | color: "#ffc658" 9 | role: "Character Team Lead" 10 | strengths: 11 | - Really good at her job 12 | weaknesses: 13 | - Overworks herself constantly 14 | - Dense 15 | - Is afraid of thunder. 16 | --- 17 | 18 | Heavy Sleeper, Rin's Girlfriend. Ambitious character designer who Aoba looks up to. 19 | -------------------------------------------------------------------------------- /content/girls/media/aoba-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/aoba-thumbnail.png -------------------------------------------------------------------------------- /content/girls/media/aoba.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/aoba.png -------------------------------------------------------------------------------- /content/girls/media/bear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/bear.png -------------------------------------------------------------------------------- /content/girls/media/hajime-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/hajime-thumbnail.png -------------------------------------------------------------------------------- /content/girls/media/hajime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/hajime.png -------------------------------------------------------------------------------- /content/girls/media/hifumi-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/hifumi-thumbnail.png -------------------------------------------------------------------------------- /content/girls/media/hifumi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/hifumi.png -------------------------------------------------------------------------------- /content/girls/media/hotaru-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/hotaru-thumbnail.png -------------------------------------------------------------------------------- /content/girls/media/hotaru.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/hotaru.png -------------------------------------------------------------------------------- /content/girls/media/ko-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/ko-thumbnail.png -------------------------------------------------------------------------------- /content/girls/media/ko.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/ko.png -------------------------------------------------------------------------------- /content/girls/media/momo-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/momo-thumbnail.png -------------------------------------------------------------------------------- /content/girls/media/momo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/momo.png -------------------------------------------------------------------------------- /content/girls/media/naru-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/naru-thumbnail.png -------------------------------------------------------------------------------- /content/girls/media/naru.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/naru.png -------------------------------------------------------------------------------- /content/girls/media/nene-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/nene-thumbnail.png -------------------------------------------------------------------------------- /content/girls/media/nene.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/nene.png -------------------------------------------------------------------------------- /content/girls/media/rin-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/rin-thumbnail.png -------------------------------------------------------------------------------- /content/girls/media/rin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/rin.png -------------------------------------------------------------------------------- /content/girls/media/shizuku-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/shizuku-thumbnail.png -------------------------------------------------------------------------------- /content/girls/media/shizuku.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/shizuku.png -------------------------------------------------------------------------------- /content/girls/media/umiko-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/umiko-thumbnail.png -------------------------------------------------------------------------------- /content/girls/media/umiko.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/umiko.png -------------------------------------------------------------------------------- /content/girls/media/yun-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/yun-thumbnail.png -------------------------------------------------------------------------------- /content/girls/media/yun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/girls/media/yun.png -------------------------------------------------------------------------------- /content/girls/momo.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 11 3 | name: Mochizuki Momiji 4 | japanese: 望月 紅葉 5 | quote: "*Incoherent rice eating noises*" 6 | image: "./media/momo.png" 7 | thumbnail: "./media/momo-thumbnail.png" 8 | color: "#ff9c63" 9 | role: Graphic Artist Intern 10 | strengths: 11 | - Very determined 12 | weaknesses: 13 | - Not super helpful to her roommate. 14 | - Too competitive 15 | - Kind of rude 16 | --- 17 | 18 | Naru's Roommate. The most controversial character. Has a serious rivalry with Aoba. 19 | -------------------------------------------------------------------------------- /content/girls/naru.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 12 3 | name: Narumi Tsubame 4 | japanese: 鳴海 ツバメ 5 | quote: "\"I worked hard to get where I am today\"" 6 | image: "./media/naru.png" 7 | thumbnail: "./media/naru-thumbnail.png" 8 | color: "#7fa2ef" 9 | role: Programming Intern 10 | strengths: 11 | - Competitive 12 | - Great programmer 13 | weaknesses: 14 | - Maybe a little too competitive 15 | - Can be hurtful at times 16 | --- 17 | 18 | Momo's roommate, she's very competitive because of her upbringing. Has a rivalry with Nene. 19 | -------------------------------------------------------------------------------- /content/girls/nene.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | name: Sakura Nene 4 | japanese: 桜ねね 5 | quote: "\"You work at a real company? That's so cool!\"" 6 | image: "./media/nene.png" 7 | thumbnail: "./media/nene-thumbnail.png" 8 | color: "#77c1ff" 9 | role: "Bug Tester" 10 | strengths: 11 | - Determined 12 | - Hard worker 13 | weaknesses: 14 | - Annoying in season 1 15 | - Gets jealous easily 16 | --- 17 | 18 | Aoba's best friend, made [NeneQuest](https://github.com/echoffee/nene-quest) 19 | with a game engine she built from scratch. 20 | 21 | Starter working at Eagle Jump after she decided to take on programming. 22 | -------------------------------------------------------------------------------- /content/girls/rin.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 7 3 | name: Toyama Rin 4 | japanese: 遠山 りん 5 | quote: "\"I told you to do it this morning!\"" 6 | image: "./media/rin.png" 7 | thumbnail: "./media/rin-thumbnail.png" 8 | color: "#ffbcec" 9 | role: "Art Director" 10 | strengths: 11 | - Extremely supportive 12 | weaknesses: 13 | - Too kind 14 | --- 15 | 16 | Ko's Girlfriend. Mom of the company, does most of what Shizuku fails to do. 17 | -------------------------------------------------------------------------------- /content/girls/shizuku.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 9 3 | name: Hazuki Shizuku 4 | japanese: 葉月しずく 5 | quote: "\"Are you the new girl? You're so cute!\"" 6 | image: "./media/shizuku.png" 7 | thumbnail: "./media/shizuku-thumbnail.png" 8 | color: "#b5b292" 9 | role: Director 10 | strengths: 11 | - Very relaxed 12 | - Has a cute cat 13 | weaknesses: 14 | - Doesn't have the greatest work ethic 15 | - Doesn't really do much in general 16 | --- 17 | 18 | Everything is cute 19 | -------------------------------------------------------------------------------- /content/girls/umiko.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 10 3 | name: Ahagon Umiko 4 | japanese: 阿波根うみこ 5 | quote: "\"Don't call me by my last name... I tell you every time\"" 6 | image: "./media/umiko.png" 7 | thumbnail: "./media/umiko-thumbnail.png" 8 | color: "#b1c890" 9 | role: Lead Developer 10 | strengths: 11 | - Gives Shizuku a reality check 12 | - Has incredible discipline 13 | - Hard worker 14 | weaknesses: 15 | - A little too caught up in her hobbies 16 | - Intimidating 17 | --- 18 | 19 | Airsoft Player. Obsessed with military stuff. Has a soft spot in her heart and hates 20 | when people call her by her last name. 21 | -------------------------------------------------------------------------------- /content/girls/yun.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | name: Iijima Yun 4 | japanese: 飯島ゆん 5 | quote: "\"Wanna relax with some snacks?\"" 6 | image: "./media/yun.png" 7 | thumbnail: "./media/yun-thumbnail.png" 8 | color: "#eca27f" 9 | role: "Character Designer" 10 | strengths: 11 | - Good at handling children 12 | - Makes great tea 13 | - Generous 14 | weaknesses: 15 | - Self conscious 16 | - Stalker 17 | --- 18 | 19 | Hajime's girlfriend (not really). She's had an image problem 20 | ever since high school. Can't hold her liquor at all. 21 | -------------------------------------------------------------------------------- /content/images/404.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/images/404.jpeg -------------------------------------------------------------------------------- /content/images/anilist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/images/anilist.png -------------------------------------------------------------------------------- /content/images/crunchyroll.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/images/crunchyroll.png -------------------------------------------------------------------------------- /content/images/fanart.yaml: -------------------------------------------------------------------------------- 1 | images: 2 | - image: "./fanart/hifumi1.jpg" 3 | src: "https://danbooru.donmai.us/posts/3409224" 4 | - image: "./fanart/hifumi2.jpg" 5 | src: "https://danbooru.donmai.us/posts/3395498" 6 | - image: "./fanart/hifumi3.png" 7 | src: "https://www.deviantart.com/idiosyzygic/art/Hifumi-Takimoto-I-Mk-2-751111915" 8 | -------------------------------------------------------------------------------- /content/images/fanart/hifumi1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/images/fanart/hifumi1.jpg -------------------------------------------------------------------------------- /content/images/fanart/hifumi2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/images/fanart/hifumi2.jpg -------------------------------------------------------------------------------- /content/images/fanart/hifumi3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/images/fanart/hifumi3.png -------------------------------------------------------------------------------- /content/images/favicon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/images/favicon.jpg -------------------------------------------------------------------------------- /content/images/landing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/images/landing.jpg -------------------------------------------------------------------------------- /content/images/outro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/images/outro.jpg -------------------------------------------------------------------------------- /content/images/verified.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/images/verified.png -------------------------------------------------------------------------------- /content/tweets/2017-01-01-aoba.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Aoba 3 | hashtags: 4 | - excited 5 | - art 6 | date: "2017-01-01" 7 | retweets: "32k" 8 | likes: "24k" 9 | --- 10 | 11 | First day at work, this is the start of something amazing! 12 | ![](media/eagle_jump.png) 13 | -------------------------------------------------------------------------------- /content/tweets/2017-02-01-aoba.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Aoba 3 | hashtags: 4 | - baka 5 | date: "2017-01-01" 6 | retweets: "32k" 7 | likes: "5k" 8 | --- 9 | 10 | I just locked myself in the office bathroom for 11 | the second time today... I hope I don't get fired 12 | -------------------------------------------------------------------------------- /content/tweets/2017-04-01-hajime.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Hajime 3 | hashtags: 4 | - bestcoworker 5 | - yes 6 | date: "2017-04-01" 7 | retweets: "12k" 8 | likes: "972" 9 | --- 10 | 11 | I can't believe I got tickets to go to Moon Rangers! 12 | Thanks @tea_time 13 | 14 | ![](media/hajime-1.jpg) 15 | -------------------------------------------------------------------------------- /content/tweets/2017-05-21-yun.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Yun 3 | likes: "20k" 4 | date: "2017-05-21" 5 | retweets: "904" 6 | --- 7 | 8 | PSA: Don't forget your lunch to work today! 9 | -------------------------------------------------------------------------------- /content/tweets/2017-12-04-hifumi.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Hifumi 3 | hashtags: 4 | - hedgehog 5 | - kawaii 6 | date: "2017-12-04" 7 | likes: "5k" 8 | retweets: "12k" 9 | --- 10 | 11 | Just realized my new coworker looks so much 12 | like Sojiro when she's eating ≧◡≦ 13 | 14 | ![](media/hifumi-aoba.jpg) 15 | -------------------------------------------------------------------------------- /content/tweets/2017-12-24-rin.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Rin 3 | hashtags: 4 | - how_is_this_allowed 5 | date: "2017-12-24" 6 | likes: "15k" 7 | retweets: "2k" 8 | --- 9 | 10 | @koyag put on some pants! 11 | -------------------------------------------------------------------------------- /content/tweets/media/eagle_jump.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/tweets/media/eagle_jump.png -------------------------------------------------------------------------------- /content/tweets/media/hajime-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/tweets/media/hajime-1.jpg -------------------------------------------------------------------------------- /content/tweets/media/hifumi-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/tweets/media/hifumi-1.jpg -------------------------------------------------------------------------------- /content/tweets/media/hifumi-aoba.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/tweets/media/hifumi-aoba.jpg -------------------------------------------------------------------------------- /content/tweets/users/aoba.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "Aoba" 3 | verified: true 4 | tag: "@a0mba" 5 | avatar: "./avatars/aoba.jpg" 6 | role: "Character Design" 7 | --- 8 | -------------------------------------------------------------------------------- /content/tweets/users/avatars/aoba.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/tweets/users/avatars/aoba.jpg -------------------------------------------------------------------------------- /content/tweets/users/avatars/hajime.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/tweets/users/avatars/hajime.jpg -------------------------------------------------------------------------------- /content/tweets/users/avatars/hifumi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/tweets/users/avatars/hifumi.jpg -------------------------------------------------------------------------------- /content/tweets/users/avatars/nene.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/tweets/users/avatars/nene.jpg -------------------------------------------------------------------------------- /content/tweets/users/avatars/rin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/tweets/users/avatars/rin.jpg -------------------------------------------------------------------------------- /content/tweets/users/avatars/yun.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moedevs/new-game-website/c97f8c086dff5ba7ccec9454d881064a00670376/content/tweets/users/avatars/yun.jpg -------------------------------------------------------------------------------- /content/tweets/users/hajime.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Hajime 3 | verified: true 4 | tag: "@ranger_girl3" 5 | avatar: "./avatars/hajime.jpg" 6 | --- 7 | -------------------------------------------------------------------------------- /content/tweets/users/hifumi.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Hifumi 3 | verified: true 4 | tag: "@sojiro" 5 | avatar: "./avatars/hifumi.jpg" 6 | --- 7 | -------------------------------------------------------------------------------- /content/tweets/users/rin.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Rin 3 | verified: true 4 | tag: "@t_yamarin" 5 | avatar: "./avatars/rin.jpg" 6 | role: Art Director 7 | --- 8 | -------------------------------------------------------------------------------- /content/tweets/users/yun.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Yun 3 | verified: true 4 | tag: "@tea_time" 5 | avatar: "./avatars/yun.jpg" 6 | --- 7 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | const imageSources = ["girls", "tweets", "images"]; 2 | 3 | const imageSourceFolders = imageSources.map(name => ({ 4 | resolve: "gatsby-source-filesystem", 5 | options: { 6 | path: `${__dirname}/content/${name}`, 7 | name 8 | } 9 | })); 10 | 11 | module.exports = { 12 | siteMetadata: { 13 | title: `Gatsby Typescript Starter`, 14 | description: "New Game! fan site made by the /r/NewGame community", 15 | url: "https://hifumi.io", 16 | }, 17 | plugins: [ 18 | `gatsby-plugin-extract-schema`, 19 | `gatsby-plugin-react-helmet`, 20 | "gatsby-plugin-sass", 21 | "gatsby-transformer-sharp", 22 | { 23 | resolve: "gatsby-plugin-google-analytics", 24 | options: { 25 | trackingId: "UA-133545986-1", 26 | head: false, 27 | anonymize: true, 28 | respectDNT: true 29 | } 30 | }, 31 | ...imageSourceFolders, 32 | { 33 | resolve:"gatsby-transformer-remark", 34 | options: { 35 | plugins: [ 36 | { 37 | resolve: "gatsby-remark-images", 38 | options: { 39 | withWebp: true, 40 | maxWidth: 500, 41 | quality: 80 42 | } 43 | } 44 | ] 45 | } 46 | }, 47 | { 48 | resolve: "gatsby-plugin-purgecss", 49 | options: { 50 | printRejected: true, 51 | purgeOnly: ['/bulma.scss'] 52 | } 53 | }, 54 | { 55 | resolve: "gatsby-source-filesystem", 56 | options: { 57 | path: "./content/tweets/" 58 | } 59 | }, 60 | { 61 | resolve: "gatsby-plugin-manifest", 62 | options: { 63 | name: "New Game!", 64 | short_name: "New Game!", 65 | start_url: "/", 66 | lang: "en-US", 67 | background_color: "#90adff", 68 | theme_color: "#90adff", 69 | display: "standalone", 70 | icon: "content/images/favicon.jpg", 71 | include_favicon: true 72 | } 73 | } 74 | ], 75 | }; 76 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | exports.onCreateNode = async ({ node }) => { 2 | // console.log(node); 3 | }; 4 | -------------------------------------------------------------------------------- /graphql.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema": { 3 | "file": "schema.json" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hifumi.io", 3 | "description": "New Game website", 4 | "version": "1.0.0", 5 | "scripts": { 6 | "build": "gatsby build", 7 | "develop": "gatsby develop", 8 | "serve": "gatsby serve", 9 | "dev": "npm run develop", 10 | "format": "prettier --write \"src/**/*.jsx*\"", 11 | "lint": "eslint \"src/**/*.jsx\"", 12 | "test": "echo \"Error: no test specified\" && exit 1", 13 | "snyk-protect": "snyk protect", 14 | "prepare": "npm run snyk-protect" 15 | }, 16 | "dependencies": { 17 | "@sentry/browser": "^4.6.6", 18 | "bloomer": "^0.6.5", 19 | "bulma": "^0.7.5", 20 | "date-fns": "^1.30.1", 21 | "eslint-plugin-react": "^7.16.0", 22 | "flickity": "^2.2.1", 23 | "flickity-imagesloaded": "^2.0.0", 24 | "gatsby": "^2.18.10", 25 | "gatsby-image": "^2.2.24", 26 | "gatsby-plugin-extract-schema": "0.0.5", 27 | "gatsby-plugin-favicon": "^3.1.6", 28 | "gatsby-plugin-google-analytics": "^2.1.20", 29 | "gatsby-plugin-manifest": "^2.2.20", 30 | "gatsby-plugin-purgecss": "^3.1.1", 31 | "gatsby-plugin-react-helmet": "^3.1.10", 32 | "gatsby-plugin-sass": "^2.1.17", 33 | "gatsby-plugin-sharp": "^2.2.28", 34 | "gatsby-remark-images": "^3.1.25", 35 | "gatsby-remark-relative-images": "^0.2.3", 36 | "gatsby-source-filesystem": "^2.1.29", 37 | "gatsby-transformer-remark": "^2.6.27", 38 | "gatsby-transformer-sharp": "^2.2.20", 39 | "gatsby-transformer-yaml": "^2.2.12", 40 | "gatsby-transformer-yaml-plus": "^0.2.2", 41 | "node-sass": "^4.13.1", 42 | "react": "16.8.0-alpha.1", 43 | "react-dom": "16.8.0-alpha.1", 44 | "react-github-corner": "^2.3.0", 45 | "react-helmet": "^5.2.1", 46 | "react-spinners": "^0.5.12", 47 | "remark-html": "^9.0.1", 48 | "snyk": "^1.369.2" 49 | }, 50 | "devDependencies": { 51 | "eslint": "^5.16.0", 52 | "eslint-loader": "^2.2.1", 53 | "prettier": "^1.18.2" 54 | }, 55 | "snyk": true 56 | } 57 | -------------------------------------------------------------------------------- /src/components/girls/girls.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Img from "gatsby-image"; 3 | import { 4 | Card, 5 | CardContent, CardHeader, CardHeaderTitle, 6 | Column, 7 | Columns, 8 | Content, Hero, 9 | Level, LevelItem, 10 | LevelLeft, LevelRight, 11 | Section, Tag 12 | } from "bloomer"; 13 | import "./girls.scss"; 14 | 15 | const GirlList = ({ name, items }) => ( 16 |
17 | 18 | {name} 19 | 20 | 21 | 24 | 25 |
26 | ); 27 | 28 | const GirlImage = ({ image }) => ( 29 | 30 |
31 | 32 |
33 | 34 | ); 35 | 36 | const GirlContent = ({ children, color, role }) => ( 37 | 38 |
39 |

{role}

40 |
41 | 42 | {children} 43 | 44 | 45 | ); 46 | 47 | const GirlTitle = ({ thumbnail, name, quote, japanese }) => ( 48 | 49 | 50 | 51 | 52 | {thumbnail && } 53 |
54 |

{name}

55 |
56 | 57 | {japanese && 58 | 59 | 60 |

{japanese}

61 | 62 | } 63 | 64 |

{quote}

65 | 66 | 67 | ); 68 | 69 | export const Girl = (options) => 70 |
71 | 72 | 73 | {/* 74 | * We have to use here instead of because for SOME reason 75 | * the girls images don't seem to work with gatsby-image. They're 76 | * disappearing when we switch to <1024px width. Feel free to try it 77 | * out with gatsby-image but I couldn't make it work lol @Xetera 78 | */} 79 | Best girl 80 | 81 | 82 |
83 | 84 | 85 | 86 | 92 |
93 | 94 | {options.children} 95 | 96 | 97 | 98 | 99 |
100 | 101 | 102 | 103 | 104 |
105 | 106 | 107 |
; 108 | 109 | export const MarkdownGirl = (props) => { 110 | const { html, ...content } = props; 111 | return ( 112 | 113 |
114 | 115 | ); 116 | }; 117 | -------------------------------------------------------------------------------- /src/components/girls/girls.scss: -------------------------------------------------------------------------------- 1 | .girl-title { 2 | color: #0e1e25; 3 | } 4 | 5 | .girl-role { 6 | margin-bottom: 10px; 7 | } 8 | 9 | .girl-card-header-title { 10 | padding: 10px; 11 | } 12 | 13 | .girl-list { 14 | line-height: 1.2; 15 | list-style-type: square !important; 16 | } 17 | 18 | .girl-japanese { 19 | font-weight: 600; 20 | } 21 | 22 | .girl-content-color { 23 | color: rgba(14,30,37,.8); 24 | } 25 | 26 | .character-header { 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | height: 32px; 31 | width: 100%; 32 | filter: drop-shadow(0px 1px 1px gray) brightness(95%); 33 | h1 { 34 | font-size: 15px; 35 | text-transform: uppercase; 36 | font-weight: 600; 37 | color: white; 38 | margin-bottom: 0; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/components/intro/checklist.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Box, Content, Icon, Level, LevelItem, LevelLeft, Subtitle } from "bloomer"; 3 | 4 | import "./checklist.scss"; 5 | 6 | const textClass = "is-size-4-desktop is-size-6-tablet checklist-text"; 7 | 8 | const Item = ({ checked, text }) => 9 | 10 | {checked 11 | ? 12 | : } 13 | {typeof text === "string" 14 | ?

{text}

15 | : text 16 | } 17 | ; 18 | 19 | export const Checklist = () => 20 | 21 | {/* Why New Game! could be the best anime*/} 22 | 23 | 24 | 25 | 26 | 28 | Won the best anime award 3 times 29 | probably... we didn't check 30 |

31 | }/> 32 | 33 | ; 34 | -------------------------------------------------------------------------------- /src/components/intro/checklist.scss: -------------------------------------------------------------------------------- 1 | .checklist-text { 2 | flex-shrink: 99999; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/intro/description.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Column, Columns, Section, Subtitle, Title } from "bloomer"; 3 | import { Checklist } from "./checklist"; 4 | 5 | export const Description = () => 6 |
7 | 8 | 9 | What is this? 10 | And who are you? 11 |

12 | New Game! is an anime about some of the most determined 13 | girls out there making games they love! 14 | 15 |

16 | 17 | 18 | 19 | 20 | 21 |
; 22 | -------------------------------------------------------------------------------- /src/components/intro/fan_art.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Img from "gatsby-image"; 3 | import { 4 | Column, 5 | Columns, Section, 6 | Subtitle, Tag, Title 7 | } from "bloomer"; 8 | import { anchorize, CtxFanarts, infinite, next } from "../../utils"; 9 | import { Checklist } from "./checklist"; 10 | import "./intro.scss"; 11 | 12 | export const MediaSection = () => { 13 | const IMAGE_WIDTH = 250; 14 | const SWITCH_INTERVAL = 2700; 15 | 16 | const fanart = React.useContext(CtxFanarts); 17 | const [initialArt] = fanart; 18 | const [currentArt, setArt] = React.useState(initialArt); 19 | 20 | const artIter = infinite(fanart); 21 | 22 | React.useEffect(() => { 23 | const id = setInterval( 24 | () => setArt(next(artIter)), 25 | SWITCH_INTERVAL 26 | ); 27 | return () => clearInterval(id); 28 | }, []); 29 | 30 | return ( 31 |
32 | 33 | 34 | Why New Game! is absolutely the best anime 35 | 36 | 37 | 38 | 39 | 40 | The cutest fanart! 41 | 49 | 50 | 51 |
52 | ); 53 | }; 54 | -------------------------------------------------------------------------------- /src/components/intro/girls_header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Box } from "bloomer"; 3 | 4 | import "./girls_header.scss"; 5 | 6 | export const GirlsHeader = ({ name, className }) => 7 | 8 | {name} 9 | ; 10 | -------------------------------------------------------------------------------- /src/components/intro/girls_header.scss: -------------------------------------------------------------------------------- 1 | .girls-header-box { 2 | border-radius: 30px 30px 0 0; 3 | background: linear-gradient(to bottom, #b0a4e8, #c6b6fb); 4 | color: #ffffff; 5 | margin-bottom: 0 !important; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/intro/intro.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { MediaSection } from "./fan_art"; 3 | import { GirlsHeader } from "./girls_header"; 4 | 5 | export class SiteIntro extends React.Component { 6 | state = { 7 | flickity: {}, 8 | currentTweet: 1, 9 | options: { 10 | lazyLoad: 1, 11 | alignCell: "center", 12 | imagesLoaded: true, 13 | pageDots: false, 14 | contain: true, 15 | on: { 16 | change: (index) => this.setState({ currentTweet: index + 1 }) 17 | } 18 | } 19 | }; 20 | 21 | componentDidMount() { 22 | /** 23 | * Flickity has a problem with requiring window which 24 | * isn't available while server side rendering. This 25 | * forces us to use proper React classes to take 26 | * advantage of lifecycle hooks that functional components 27 | * don't really allow 28 | */ 29 | require("flickity-imagesloaded"); 30 | const Flickity = require("flickity"); 31 | this.setState({ 32 | flickity: new Flickity("#carousel", this.state.options) 33 | }); 34 | } 35 | 36 | 37 | render() { 38 | return ( 39 |
40 |
41 | 42 | 48 |

52 | {this.state.currentTweet}/{this.props.children.length} 53 |

54 |
55 |
56 | ); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/components/intro/intro.scss: -------------------------------------------------------------------------------- 1 | .media-column { 2 | align-items: center; 3 | display: flex !important; 4 | flex-direction: column; 5 | justify-content: flex-start; 6 | } 7 | 8 | .media-image-container { 9 | position: relative; 10 | margin: 10px auto; 11 | } 12 | 13 | .tweets-header { 14 | background-color: unset; 15 | } 16 | -------------------------------------------------------------------------------- /src/components/intro/twitter/tweet.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as parse from "date-fns/parse"; 3 | import * as format from "date-fns/format"; 4 | import { 5 | Card, 6 | CardContent, 7 | Container, 8 | Content, 9 | Icon, 10 | Level, 11 | LevelItem, 12 | LevelLeft, 13 | Media, 14 | MediaContent, 15 | MediaLeft 16 | } from "bloomer"; 17 | import { StaticQuery, graphql } from "gatsby"; 18 | import Img from "gatsby-image"; 19 | 20 | export const Tweet = props => { 21 | const verifiedQuery = graphql` 22 | { 23 | file(relativePath: { regex: "/verified.png/" }) { 24 | childImageSharp { 25 | image: fixed(width: 24, height: 24, quality: 100) { 26 | ...GatsbyImageSharpFixed_withWebp 27 | } 28 | } 29 | } 30 | } 31 | `; 32 | 33 | const badge = ( 34 | ( 37 | 38 | )} 39 | /> 40 | ); 41 | 42 | const hashTags = 43 | props.hashtags && 44 | props.hashtags.map(tag => ( 45 | {`#${tag} `} 46 | )); 47 | 48 | // get fake mentions a link color 49 | const content = props.content.replace( 50 | /(@[A-Za-z0-9_]+)/g, 51 | "$1" 52 | ); 53 | 54 | const parsed = parse(props.time).toISOString(); 55 | 56 | const readableDate = format(parsed, "MMMM Do YYYY"); 57 | return ( 58 |
59 | 60 | 61 | 62 | 63 |
64 | 69 |
70 | 71 | 72 | 73 | 74 | {props.name} 75 | {props.verified && badge} 76 | 77 |

78 | {props.tag} 79 |

80 | 81 | 82 | 83 | 84 |
88 | {props.hashtags && ( 89 |
90 | {hashTags} 91 |
92 |
93 | )} 94 | 95 | 96 | 97 | 98 | 99 | 100 | {props.retweets} 101 | 102 | 103 | 104 | 105 | 106 | {props.likes} 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 |
115 | ); 116 | }; 117 | 118 | export const MarkdownTweet = props => { 119 | return ( 120 | 131 | ); 132 | }; 133 | -------------------------------------------------------------------------------- /src/components/landing/landing_panel.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Column, Columns, Icon, Section } from "bloomer"; 3 | import { useEffect } from "react"; 4 | import GithubCorner from "react-github-corner"; 5 | import { StaticQuery, graphql } from "gatsby"; 6 | import Img from "gatsby-image"; 7 | import Loader from "react-spinners/PulseLoader"; 8 | 9 | import "./landing_panel.scss"; 10 | 11 | const Affiliated = ({ users, type }) => { 12 | const isDiscord = type === "discord"; 13 | const color = isDiscord ? "#7289da" : "#ff4500"; 14 | 15 | const placeholder = ; 16 | 17 | const content = ( 18 | 19 | {users} 20 | {isDiscord ? " members" : " redditors"} 21 | 22 | ); 23 | 24 | return ( 25 | 33 | 34 | {users ? content : placeholder} 35 | 36 | ); 37 | }; 38 | 39 | export const LandingPanel = () => { 40 | const DEFAULT_USERS = 0; 41 | const defaultEndpoint = "https://api.hifumi.io/social/stats"; 42 | const [discord, setDiscord] = React.useState(DEFAULT_USERS); 43 | const [reddit, setReddit] = React.useState(DEFAULT_USERS); 44 | 45 | const getUserData = endpoint => { 46 | fetch("https://discordapp.com/api/invites/ZWW5CJw?with_counts=true") 47 | .then(r => r.json()) 48 | .then(data => { 49 | setDiscord(data.approximate_member_count); 50 | }); 51 | }; 52 | 53 | useEffect(() => { 54 | getUserData(defaultEndpoint); 55 | }, []); 56 | 57 | const scrollTo = () => 58 | document.querySelector(".intro").scrollIntoView({ 59 | behavior: "smooth", 60 | inline: "nearest", 61 | block: "start" 62 | }); 63 | 64 | const title = [ 65 | "is-size-1-desktop", 66 | "is-size-1-tablet", 67 | "is-size-2-mobile", 68 | "has-text-white-ter", 69 | "banner-text", 70 | "has-text-centered", 71 | "shadowed" 72 | ]; 73 | 74 | const query = graphql` 75 | { 76 | file(relativePath: { regex: "/landing.jpg/" }) { 77 | childImageSharp { 78 | fluid( 79 | maxWidth: 1920 80 | quality: 50 81 | srcSetBreakpoints: [700, 1280, 1920] 82 | ) { 83 | ...GatsbyImageSharpFluid_withWebp_tracedSVG 84 | } 85 | } 86 | } 87 | } 88 | `; 89 | 90 | return ( 91 |
92 | ( 95 | 99 | )} 100 | /> 101 |
102 |
103 | 104 |
105 | 106 |
107 | 108 | 109 |
110 |

New Game!

111 |

112 | {" "} 113 | ニューゲーム 114 |

115 |
116 |
117 | 118 | 119 | 120 | 121 | {/* 122 | 123 | */} 124 | 125 |
126 | 127 | 128 |
129 |
130 | ); 131 | }; 132 | -------------------------------------------------------------------------------- /src/components/landing/landing_panel.scss: -------------------------------------------------------------------------------- 1 | .banner-container { 2 | position: absolute; 3 | top: 0; 4 | padding: 0; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | width: 100%; 10 | text-justify: distribute; 11 | 12 | 13 | .banner-text-container { 14 | display: flex; 15 | padding: 25px; 16 | flex-direction: column; 17 | text-align: left; 18 | } 19 | } 20 | 21 | .arrow { 22 | position: absolute; 23 | bottom: 50px; 24 | &:hover { 25 | transform: scale(2); 26 | transition: .2s ease-in-out; 27 | cursor: pointer; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/components/outro/outro_panel.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { graphql, StaticQuery } from "gatsby"; 3 | import Img from "gatsby-image"; 4 | import { Column, Columns, Footer, Icon, Section } from "bloomer"; 5 | import { anchorize } from "../../utils"; 6 | 7 | import "./outro_panel.scss"; 8 | 9 | export const OutroPanel = () => { 10 | const love = ( 11 | 12 | ); 13 | const query = graphql`{ 14 | outro: file(relativePath: { regex: "/outro.jpg/" }) { 15 | childImageSharp { 16 | fluid(maxWidth: 1920 quality: 70 srcSetBreakpoints: [ 1280, 1920 ]) { 17 | ...GatsbyImageSharpFluid_withWebp_noBase64 18 | } 19 | } 20 | } 21 | crunchyroll: file(relativePath: { regex: "/crunchyroll.png/" }) { 22 | childImageSharp { 23 | fixed(width: 24 height: 24) { 24 | ...GatsbyImageSharpFixed_withWebp 25 | } 26 | } 27 | } 28 | anilist: file(relativePath: { regex: "/anilist.png/" }) { 29 | childImageSharp { 30 | fixed(width: 24 height: 24) { 31 | ...GatsbyImageSharpFixed_withWebp 32 | } 33 | } 34 | } 35 | }`; 36 | return ( 37 | 38 |
39 | 40 |
41 |
42 |
43 |
44 | 45 | 46 |

48 | Why are you still here?! Go watch New Game! 49 |

50 | 51 | 52 | 53 | 54 | 63 | 64 | 65 | 74 | 75 | 76 |
77 |
78 |
79 |

Made with {love} by the New Game community

80 |
81 |
82 |
83 | }/> 84 | ); 85 | }; 86 | -------------------------------------------------------------------------------- /src/components/outro/outro_panel.scss: -------------------------------------------------------------------------------- 1 | .footer-text-container { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: center; 6 | } 7 | 8 | .outro-bottom { 9 | position: absolute; 10 | bottom: 0; 11 | margin: 10px; 12 | } 13 | 14 | .crunchyroll { 15 | color: #F47521; 16 | opacity: 0.75; 17 | &:hover { 18 | color: #F47521; 19 | opacity: 1; 20 | transition: .12s ease-in-out; 21 | } 22 | } 23 | 24 | .outro-container { 25 | flex-direction: column; 26 | } 27 | 28 | .anilist { 29 | background-color: #1f2631; 30 | color: white; 31 | border: 0; 32 | opacity: 0.75; 33 | &:hover { 34 | color: white; 35 | opacity: 1; 36 | transition: .12s ease-in-out; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/layouts/_variables.scss: -------------------------------------------------------------------------------- 1 | $website-background: #f7f7f7; 2 | $website-secondary-background: #cee1ee; 3 | $header-background: #f4f4f4; 4 | $merge-breakpoint: 1024px; 5 | $shadow: 0 2px 3px rgba(0, 0, 0, .4); 6 | 7 | $girl-section-cutoff: 60vh; 8 | // stupid bulma, why do we have to override with !important... 9 | $link-hover: unset; 10 | $footer-background-color: $website-background !important; 11 | $size-1: 6em; 12 | -------------------------------------------------------------------------------- /src/layouts/animation.scss: -------------------------------------------------------------------------------- 1 | .sk-circle { 2 | margin: 100px auto; 3 | width: 40px; 4 | height: 40px; 5 | position: relative; 6 | } 7 | .sk-circle .sk-child { 8 | width: 100%; 9 | height: 100%; 10 | position: absolute; 11 | left: 0; 12 | top: 0; 13 | } 14 | .sk-circle .sk-child:before { 15 | content: ''; 16 | display: block; 17 | margin: 0 auto; 18 | width: 15%; 19 | height: 15%; 20 | background-color: #333; 21 | border-radius: 100%; 22 | -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; 23 | animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; 24 | } 25 | .sk-circle .sk-circle2 { 26 | -webkit-transform: rotate(30deg); 27 | -ms-transform: rotate(30deg); 28 | transform: rotate(30deg); } 29 | .sk-circle .sk-circle3 { 30 | -webkit-transform: rotate(60deg); 31 | -ms-transform: rotate(60deg); 32 | transform: rotate(60deg); } 33 | .sk-circle .sk-circle4 { 34 | -webkit-transform: rotate(90deg); 35 | -ms-transform: rotate(90deg); 36 | transform: rotate(90deg); } 37 | .sk-circle .sk-circle5 { 38 | -webkit-transform: rotate(120deg); 39 | -ms-transform: rotate(120deg); 40 | transform: rotate(120deg); } 41 | .sk-circle .sk-circle6 { 42 | -webkit-transform: rotate(150deg); 43 | -ms-transform: rotate(150deg); 44 | transform: rotate(150deg); } 45 | .sk-circle .sk-circle7 { 46 | -webkit-transform: rotate(180deg); 47 | -ms-transform: rotate(180deg); 48 | transform: rotate(180deg); } 49 | .sk-circle .sk-circle8 { 50 | -webkit-transform: rotate(210deg); 51 | -ms-transform: rotate(210deg); 52 | transform: rotate(210deg); } 53 | .sk-circle .sk-circle9 { 54 | -webkit-transform: rotate(240deg); 55 | -ms-transform: rotate(240deg); 56 | transform: rotate(240deg); } 57 | .sk-circle .sk-circle10 { 58 | -webkit-transform: rotate(270deg); 59 | -ms-transform: rotate(270deg); 60 | transform: rotate(270deg); } 61 | .sk-circle .sk-circle11 { 62 | -webkit-transform: rotate(300deg); 63 | -ms-transform: rotate(300deg); 64 | transform: rotate(300deg); } 65 | .sk-circle .sk-circle12 { 66 | -webkit-transform: rotate(330deg); 67 | -ms-transform: rotate(330deg); 68 | transform: rotate(330deg); } 69 | .sk-circle .sk-circle2:before { 70 | -webkit-animation-delay: -1.1s; 71 | animation-delay: -1.1s; } 72 | .sk-circle .sk-circle3:before { 73 | -webkit-animation-delay: -1s; 74 | animation-delay: -1s; } 75 | .sk-circle .sk-circle4:before { 76 | -webkit-animation-delay: -0.9s; 77 | animation-delay: -0.9s; } 78 | .sk-circle .sk-circle5:before { 79 | -webkit-animation-delay: -0.8s; 80 | animation-delay: -0.8s; } 81 | .sk-circle .sk-circle6:before { 82 | -webkit-animation-delay: -0.7s; 83 | animation-delay: -0.7s; } 84 | .sk-circle .sk-circle7:before { 85 | -webkit-animation-delay: -0.6s; 86 | animation-delay: -0.6s; } 87 | .sk-circle .sk-circle8:before { 88 | -webkit-animation-delay: -0.5s; 89 | animation-delay: -0.5s; } 90 | .sk-circle .sk-circle9:before { 91 | -webkit-animation-delay: -0.4s; 92 | animation-delay: -0.4s; } 93 | .sk-circle .sk-circle10:before { 94 | -webkit-animation-delay: -0.3s; 95 | animation-delay: -0.3s; } 96 | .sk-circle .sk-circle11:before { 97 | -webkit-animation-delay: -0.2s; 98 | animation-delay: -0.2s; } 99 | .sk-circle .sk-circle12:before { 100 | -webkit-animation-delay: -0.1s; 101 | animation-delay: -0.1s; } 102 | 103 | @-webkit-keyframes sk-circleBounceDelay { 104 | 0%, 80%, 100% { 105 | -webkit-transform: scale(0); 106 | transform: scale(0); 107 | } 40% { 108 | -webkit-transform: scale(1); 109 | transform: scale(1); 110 | } 111 | } 112 | 113 | @keyframes sk-circleBounceDelay { 114 | 0%, 80%, 100% { 115 | -webkit-transform: scale(0); 116 | transform: scale(0); 117 | } 40% { 118 | -webkit-transform: scale(1); 119 | transform: scale(1); 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /src/layouts/boundary.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import * as Sentry from "@sentry/browser"; 4 | 5 | export class ErrorBoundary extends React.Component { 6 | state = { error: null }; 7 | 8 | componentDidCatch(error, errorInfo) { 9 | this.setState({ error }); 10 | Sentry.withScope(scope => { 11 | Object.keys(errorInfo).forEach(key => { 12 | scope.setExtra(key, errorInfo[key]); 13 | }); 14 | Sentry.captureException(error); 15 | }); 16 | } 17 | 18 | render() { 19 | // if (this.state.error) { 20 | // return ( 21 | //
Sentry.showReportDialog()}> 22 | // Report Feedback 23 | //
24 | // ); 25 | // } 26 | return this.props.children; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/layouts/bulma.scss: -------------------------------------------------------------------------------- 1 | @import "~bulma/bulma"; 2 | -------------------------------------------------------------------------------- /src/layouts/girls.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "~bulma/sass/utilities/initial-variables"; 3 | 4 | .girl-section { 5 | position: relative; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | flex-direction: column; 10 | background-size: cover; 11 | overflow: hidden; 12 | width: 100%; 13 | 14 | &:last-child { 15 | border-bottom-left-radius: 6px; 16 | border-bottom-right-radius: 6px; 17 | } 18 | 19 | /* 20 | Alternating the position of 21 | the girls and text 22 | 23 | These styles are only available 24 | when the display is flex which 25 | means everything is consistent 26 | in mobile mode 27 | */ 28 | &:nth-child(even) > .columns { 29 | flex-direction: row-reverse; 30 | 31 | /* 32 | Alternating the position of 33 | the strengths/weaknesses 34 | and character info 35 | */ 36 | .girl-content .columns { 37 | flex-direction: row-reverse; 38 | // Removing alternation on mobile 39 | @media(max-width: $merge-breakpoint) { 40 | flex-direction: row; 41 | } 42 | } 43 | } 44 | 45 | &:nth-child(odd) > .columns { 46 | flex-direction: row; 47 | 48 | .girl-content .columns { 49 | flex-direction: row; 50 | } 51 | } 52 | 53 | 54 | .girl-image-column { 55 | display: flex; 56 | justify-content: flex-end; 57 | flex-direction: column; 58 | padding: 0; 59 | } 60 | 61 | @media(max-width: $merge-breakpoint) { 62 | &:nth-child(even) > .columns { 63 | flex-direction: column-reverse; 64 | } 65 | 66 | &:nth-child(odd) > .columns { 67 | flex-direction: column-reverse; 68 | } 69 | 70 | .column { 71 | width: auto !important; 72 | } 73 | .section { 74 | padding: 0; 75 | } 76 | .columns { 77 | justify-content: center; 78 | } 79 | .girl-image-column { 80 | margin: 0 auto; 81 | padding: 0 10px; 82 | max-width: 600px; 83 | 84 | .girl { 85 | margin: 0 auto; 86 | max-height: 50vh; 87 | } 88 | 89 | .gatsby-image-wrapper > img { 90 | height: 300px !important; 91 | position: relative !important; 92 | width: auto !important; 93 | } 94 | } 95 | } 96 | 97 | .columns { 98 | margin: 0 auto; 99 | } 100 | } 101 | 102 | -------------------------------------------------------------------------------- /src/layouts/github.scss: -------------------------------------------------------------------------------- 1 | .github-corner { 2 | z-index: 3; 3 | &:hover .octo-arm { 4 | animation: octocat-wave 560ms ease-in-out 5 | } 6 | } 7 | 8 | @keyframes octocat-wave { 9 | 0%, 100% { 10 | transform: rotate(0) 11 | } 12 | 20%, 60% { 13 | transform: rotate(-25deg) 14 | } 15 | 40%, 80% { 16 | transform: rotate(10deg) 17 | } 18 | } 19 | 20 | @media (max-width: 500px) { 21 | .github-corner:hover .octo-arm { 22 | animation: none 23 | } 24 | 25 | .github-corner .octo-arm { 26 | animation: octocat-wave 560ms ease-in-out 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/layouts/header.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Helmet from "react-helmet"; 3 | 4 | export const Header = () => 5 | 6 | 7 | New Game! 8 | 9 | 10 | 11 | 12 | 13 | {/* Todo: import font awesome from npm later */} 14 | 18 | 19 | ; 20 | -------------------------------------------------------------------------------- /src/layouts/layout.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Header } from "./header"; 3 | import * as Sentry from "@sentry/browser"; 4 | import { ErrorBoundary } from "./boundary"; 5 | import "./bulma.scss"; 6 | import "./girls.scss"; 7 | import "./style.scss"; 8 | import "./github.scss"; 9 | 10 | export const Layout = ({ children }) => { 11 | if (process.env.NODE_ENV === "production") { 12 | Sentry.init({ dsn: "https://7d23ee1165d84ce2bd7d4b0800f6f3aa@sentry.io/1260791" }); 13 | } 14 | 15 | return ( 16 | <> 17 |
18 | 19 | {children} 20 | 21 | 22 | ); 23 | }; 24 | -------------------------------------------------------------------------------- /src/layouts/style.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import '../../node_modules/bulma/sass/utilities/initial-variables.sass'; 4 | @import '_variables.scss'; 5 | @import '../../node_modules/bulma/bulma.sass'; 6 | 7 | @font-face { 8 | font-family: 'Rubik'; 9 | font-display: auto; 10 | src: local('Rubik'), url(https://fonts.gstatic.com/s/rubik/v8/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2'); 11 | } 12 | 13 | * { 14 | font-family: Rubik, sans-serif; 15 | } 16 | 17 | body { 18 | background-color: $website-background; 19 | } 20 | 21 | .website-background { 22 | background-color: $website-background; 23 | } 24 | 25 | .landing { 26 | position: relative; 27 | overflow: hidden; 28 | padding: 0; 29 | margin: 0; 30 | } 31 | 32 | /* Overriding gatsby's default behavior */ 33 | .landing-image { 34 | padding: 0; 35 | display: block !important; 36 | height: 100vh !important; 37 | width: auto !important; 38 | } 39 | 40 | .has-bottom-border { 41 | border-bottom: solid 2px #eee; 42 | } 43 | 44 | .github { 45 | z-index: 2; 46 | margin: 25px; 47 | position: absolute; 48 | bottom: 0; 49 | right: 0; 50 | } 51 | 52 | .overlay { 53 | /* This entire overlay is copy pasted from satania.moe, bless you pizzacus */ 54 | background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .75) 100%); 55 | min-width: 0; 56 | position: absolute; 57 | left: 0; 58 | top: 0; 59 | right: 0; 60 | bottom: 0; 61 | height: 100%; 62 | width: 100%; 63 | } 64 | 65 | .discord { 66 | color: #7289DA; 67 | &:hover { 68 | color: #7289DA; 69 | box-shadow: #7289DA 1px 1px 20px; 70 | } 71 | } 72 | 73 | .reddit { 74 | color: orangered; 75 | &:hover { 76 | color: orangered; 77 | box-shadow: orangered 1px 1px 20px; 78 | } 79 | } 80 | 81 | .banner-sections { 82 | height: 100%; 83 | } 84 | 85 | .shadowed { 86 | text-shadow: $shadow; 87 | } 88 | 89 | .banner-text { 90 | display: inline-block; 91 | margin: 0 0; 92 | font-weight: 600; 93 | padding-bottom: 0; 94 | } 95 | 96 | .flex-column { 97 | flex-direction: column; 98 | } 99 | 100 | .narrow-width { 101 | @media(max-width: $merge-breakpoint) { 102 | width: 100%; 103 | } 104 | margin: 0 auto; 105 | width: 85%; 106 | } 107 | 108 | .shrink { 109 | flex-shrink: 1; 110 | } 111 | 112 | .no-grow { 113 | flex-grow: 0; 114 | } 115 | 116 | .intro-section { 117 | background-color: $website-secondary-background; 118 | min-height: 70vh; 119 | } 120 | 121 | .footer { 122 | padding: 10px !important; 123 | } 124 | 125 | .no-scroll { 126 | overflow: hidden; 127 | } 128 | 129 | // Bulma fixes 130 | 131 | .content ul { 132 | margin-top: 0; 133 | } 134 | 135 | .spaced-l { 136 | margin-left: 5px; 137 | } 138 | 139 | .twitter-wrapper { 140 | padding: 3rem 0; 141 | overflow-x: scroll; 142 | } 143 | 144 | .twitter-slides { 145 | //background: white; 146 | position: relative; 147 | padding: 1rem 0; 148 | } 149 | 150 | .flickity-slider { 151 | display: flex; 152 | align-items: center; 153 | } 154 | 155 | .flickity-viewport { 156 | transition: height 0.2s; 157 | } 158 | 159 | .tweet { 160 | box-shadow: 5px 12px 15px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1) !important; 161 | margin: 1rem 1.5rem; 162 | width: 550px; 163 | 164 | @media (max-width: $tablet) { 165 | width: 250px; 166 | height: auto; 167 | } 168 | 169 | .twitter-controls-container { 170 | margin-top: 10px; 171 | } 172 | 173 | .twitter-tag { 174 | margin-top: 0 !important; 175 | } 176 | 177 | .tweet-name { 178 | margin-bottom: 0 !important; 179 | } 180 | 181 | .tweet-image { 182 | margin: 10px 0; 183 | } 184 | 185 | .gatsby-resp-image-link { 186 | margin-bottom: 5px; 187 | } 188 | } 189 | 190 | .section-header { 191 | background: #7676ae; 192 | box-shadow: black inset; 193 | } 194 | 195 | .carousel { 196 | * { 197 | text-align: left; 198 | } 199 | 200 | .slide { 201 | background: $website-background !important; 202 | } 203 | } 204 | 205 | .no-padding-top { 206 | padding-top: 0; 207 | } 208 | 209 | .no-padding-bottom { 210 | padding-bottom: 0; 211 | } 212 | 213 | .fanart-tag { 214 | z-index: 2; 215 | position: absolute; 216 | opacity: 0.5; 217 | &:hover { 218 | opacity: 1; 219 | } 220 | top: 0; 221 | right: 0; 222 | margin: 10px; 223 | } 224 | -------------------------------------------------------------------------------- /src/pages/404.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Layout } from "../layouts/layout"; 3 | import { Button, Section } from "bloomer"; 4 | import { graphql } from "gatsby"; 5 | import Img from "gatsby-image"; 6 | 7 | export default ({ data }) => ( 8 | 9 |
10 |
17 |
18 | 19 |

20 | We totally have a page here but you can't see it! 21 |

22 |

23 | Or maybe it's empty... sorry 24 |

25 | 26 |
27 |
28 |
29 | 30 | ); 31 | 32 | export const pageQuery = graphql`{ 33 | file(relativePath: { regex: "/404.jpeg/" }) { 34 | childImageSharp { 35 | image: fluid(maxWidth: 1000 quality: 100) { 36 | ...GatsbyImageSharpFluid_tracedSVG 37 | } 38 | } 39 | } 40 | }`; 41 | -------------------------------------------------------------------------------- /src/pages/index.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Layout } from "../layouts/layout"; 3 | import { LandingPanel } from "../components/landing/landing_panel"; 4 | import { SiteIntro } from "../components/intro/intro"; 5 | import { MarkdownGirl } from "../components/girls/girls"; 6 | import { graphql } from "gatsby"; 7 | import { MarkdownTweet } from "../components/intro/twitter/tweet"; 8 | import { OutroPanel } from "../components/outro/outro_panel"; 9 | import { GirlsHeader } from "../components/intro/girls_header"; 10 | 11 | export default ({ data: { girls, tweets, users } }) => { 12 | const allTweets = tweets.edges.map(tweet => ({ 13 | ...tweet.node.frontmatter, 14 | html: tweet.node.html 15 | })); 16 | 17 | const allGirls = girls.edges.map(({ node }) => { 18 | const { frontmatter, html } = node; 19 | const { thumbnail, image } = frontmatter; 20 | 21 | return ({ 22 | ...frontmatter, 23 | html, 24 | thumbnail: thumbnail && thumbnail.childImageSharp.fixed, 25 | image: image.childImageSharp.fluid 26 | }); 27 | }); 28 | 29 | const allUsers = users.edges.reduce((all, { node: { frontmatter } }) => ({ 30 | ...all, 31 | [frontmatter.name]: { 32 | ...frontmatter, 33 | avatar: frontmatter.avatar.childImageSharp.fixed 34 | } 35 | }), {}); 36 | 37 | const tweetInfo = allTweets.map(tweet => ({ ...tweet, ...allUsers[tweet.name] })); 38 | 39 | return ( 40 | 41 | 42 | 43 | {tweetInfo.map((tweet, i) => )} 44 | 45 | 46 |
47 | {allGirls.map(girl => )} 48 |
49 | 50 | 51 | ); 52 | }; 53 | 54 | export const pageQuery = graphql`{ 55 | girls: allMarkdownRemark( 56 | sort: {order: ASC, fields: [frontmatter___order]} 57 | filter: {fileAbsolutePath: {regex: "/\/girls\//"}} 58 | ) { 59 | edges { 60 | node { 61 | html 62 | frontmatter { 63 | image { 64 | childImageSharp { 65 | fluid { 66 | ...GatsbyImageSharpFluid_withWebp_noBase64 67 | } 68 | } 69 | } 70 | thumbnail { 71 | childImageSharp { 72 | fixed(width: 48 height: 48 quality: 100) { 73 | ...GatsbyImageSharpFixed_withWebp 74 | } 75 | } 76 | } 77 | color 78 | name 79 | quote 80 | role 81 | department 82 | strengths 83 | weaknesses 84 | japanese 85 | } 86 | } 87 | } 88 | } 89 | tweets: allMarkdownRemark( 90 | sort: {order: ASC, fields: [frontmatter___date]} 91 | # filtering only the first level markdown files 92 | filter: {fileAbsolutePath: {regex: "/\/tweets\/[^/]+.md/"}} 93 | ) { 94 | edges { 95 | node { 96 | html 97 | frontmatter { 98 | name 99 | hashtags 100 | date 101 | retweets 102 | likes 103 | } 104 | } 105 | } 106 | } 107 | users: allMarkdownRemark( 108 | filter: {fileAbsolutePath: {regex: "/tweets/users/[^/]+.md/"}} 109 | ) { 110 | edges { 111 | node { 112 | frontmatter { 113 | name 114 | verified 115 | tag 116 | avatar { 117 | childImageSharp { 118 | fixed (width: 64 height:64 quality: 80) { 119 | ...GatsbyImageSharpFixed_withWebp_tracedSVG 120 | } 121 | } 122 | } 123 | } 124 | } 125 | } 126 | } 127 | # fanarts: imagesYaml { 128 | # images { 129 | # src 130 | # image { 131 | # image: childImageSharp { 132 | # fixed(width: 250 height: 350 quality: 90) { 133 | # ...GatsbyImageSharpFixed_withWebp 134 | # } 135 | # } 136 | # } 137 | # } 138 | # } 139 | }`; 140 | -------------------------------------------------------------------------------- /src/static/_headers: -------------------------------------------------------------------------------- 1 | /* 2 | X-Frame-Options: DENY 3 | X-XSS-Protection: 1; mode=block 4 | X-Content-Type-Options: nosniff 5 | Content-Security-Policy: script-src 'self' 6 | Referrer-Policy: same-origin 7 | Strict-Transport-Security: max-age=31536000 8 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | export const CtxFanarts = React.createContext([]); 4 | 5 | export function* infinite(arr) { 6 | let i = 0; 7 | while (true) { 8 | yield arr[i]; 9 | i = (i + 1) % arr.length; 10 | } 11 | } 12 | 13 | export const anchorize = href => ({ href, target: "_blank", rel: "noopener" }); 14 | 15 | export const next = (iter) => iter.next().value; 16 | 17 | export const seconds = (sec) => sec * 1000; 18 | -------------------------------------------------------------------------------- /static/_headers: -------------------------------------------------------------------------------- 1 | /* 2 | X-Frame-Options: DENY 3 | X-XSS-Protection: 1; mode=block 4 | X-Content-Type-Options: nosniff 5 | Referrer-Policy: same-origin 6 | Strict-Transport-Security: max-age=31536000 7 | --------------------------------------------------------------------------------