├── .gitignore ├── .prettierignore ├── .prettierrc ├── README.md ├── astro.config.mjs ├── package-lock.json ├── package.json ├── public ├── favicon.svg ├── favicon │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ └── site.webmanifest └── images │ ├── bobatan-logo.png │ ├── og-card.png │ └── roster-with-names.png ├── src ├── components │ ├── CharacterCard.astro │ ├── FAQs.astro │ ├── Header.astro │ ├── Nav.astro │ ├── OgTags.astro │ ├── SalesSignup.astro │ ├── Socials.astro │ └── TeamMemberCard.astro ├── content │ ├── characters │ │ ├── aria.md │ │ ├── boba-tan.md │ │ ├── css.md │ │ ├── git.md │ │ ├── github.md │ │ ├── html.md │ │ ├── icons │ │ │ ├── aria.png │ │ │ ├── boba-tan.png │ │ │ ├── css.png │ │ │ ├── git.png │ │ │ ├── github.png │ │ │ ├── html.png │ │ │ └── terminal.png │ │ ├── profiles │ │ │ ├── aria.png │ │ │ ├── boba-tan.png │ │ │ ├── css.png │ │ │ ├── git.png │ │ │ ├── github.png │ │ │ ├── html.png │ │ │ └── terminal.png │ │ └── terminal.md │ ├── config.ts │ └── team │ │ ├── avatars │ │ ├── 8190.png │ │ ├── brokemycrown.jpg │ │ ├── citro.webp │ │ ├── cmdonovann.png │ │ ├── default.png │ │ ├── elendraug.png │ │ ├── elf-herself.png │ │ ├── enigmalea.png │ │ ├── ererifan195.jpg │ │ ├── essential-randomness.png │ │ ├── foxinboots.png │ │ ├── ikam177.jpg │ │ ├── kiwipon.png │ │ ├── leedie.png │ │ ├── merelydovely.png │ │ ├── michelle.png │ │ ├── pamuya.png │ │ ├── riazaia.png │ │ ├── rudy-tuesday.png │ │ ├── secret-final-boss.png │ │ ├── sgt-spank.jpg │ │ ├── slogbait.png │ │ ├── spillingdown.png │ │ ├── the-bi-ballerina.png │ │ ├── thunder-the-wolf.jpg │ │ ├── tovanish.png │ │ ├── vcat.jpg │ │ ├── wiredferret.png │ │ ├── ymkse.jpg │ │ └── yuu.png │ │ ├── brokemycrown.yaml │ │ ├── candle.yaml │ │ ├── citro.yaml │ │ ├── cmdonovann.yaml │ │ ├── codeargent.yaml │ │ ├── elendraug.yaml │ │ ├── elf-herself.yaml │ │ ├── enigmalea.yaml │ │ ├── ererifan195.yaml │ │ ├── essential-randomness.yaml │ │ ├── foxinboots.yaml │ │ ├── ikam177.yaml │ │ ├── kiwipon.yaml │ │ ├── leedie.yaml │ │ ├── marinehaddock.yaml │ │ ├── merelydovely.yaml │ │ ├── michelle.yaml │ │ ├── moon.yaml │ │ ├── mori.yaml │ │ ├── pamuya.yaml │ │ ├── playerprophet.yaml │ │ ├── ria.yaml │ │ ├── rudy-tuesday.yaml │ │ ├── secret-final-boss.yaml │ │ ├── sgt-spank.yaml │ │ ├── slogbait.yaml │ │ ├── spillingdown.yaml │ │ ├── the-bi-ballerina.yaml │ │ ├── thunder-the-wolf.yaml │ │ ├── tovanish.yaml │ │ ├── vcat.yaml │ │ ├── wiredferret.yaml │ │ ├── ymkse.yaml │ │ ├── yuu.yaml │ │ └── zzz8190.yaml ├── env.d.ts ├── images │ ├── bobawip.png │ ├── characterx.png │ ├── charactery.png │ ├── error.png │ └── git-intro.png ├── layouts │ └── PageLayout.astro ├── lib │ └── socials-transformer.ts └── pages │ ├── 404.astro │ ├── characters.astro │ ├── index.astro │ ├── team │ ├── [member].astro │ ├── [project].astro │ └── index.astro │ └── volume-0.astro └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | # generated types 4 | .astro/ 5 | 6 | # dependencies 7 | node_modules/ 8 | 9 | # logs 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | .vscode -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .astro 2 | node_modules -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "bracketSpacing": true, 4 | "endOfLine": "lf", 5 | "htmlWhitespaceSensitivity": "css", 6 | "printWidth": 80, 7 | "proseWrap": "preserve", 8 | "quoteProps": "as-needed", 9 | "semi": true, 10 | "singleQuote": false, 11 | "tabWidth": 2, 12 | "trailingComma": "es5", 13 | "useTabs": false, 14 | 15 | "plugins": ["prettier-plugin-astro"], 16 | "overrides": [ 17 | { 18 | "files": "*.astro", 19 | "options": { 20 | "parser": "astro" 21 | } 22 | } 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Astro Starter Kit: Minimal 2 | 3 | ``` 4 | npm create astro@latest -- --template minimal 5 | ``` 6 | 7 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal) 8 | [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal) 9 | [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json) 10 | 11 | > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! 12 | 13 | ## 🚀 Project Structure 14 | 15 | Inside of your Astro project, you'll see the following folders and files: 16 | 17 | ``` 18 | / 19 | ├── public/ 20 | ├── src/ 21 | │ └── pages/ 22 | │ └── index.astro 23 | └── package.json 24 | ``` 25 | 26 | Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. 27 | 28 | There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. 29 | 30 | Any static assets, like images, can be placed in the `public/` directory. 31 | 32 | ## 🧞 Commands 33 | 34 | All commands are run from the root of the project, from a terminal: 35 | 36 | | Command | Action | 37 | | :------------------------ | :----------------------------------------------- | 38 | | `npm install` | Installs dependencies | 39 | | `npm run dev` | Starts local dev server at `localhost:3000` | 40 | | `npm run build` | Build your production site to `./dist/` | 41 | | `npm run preview` | Preview your build locally, before deploying | 42 | | `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | 43 | | `npm run astro -- --help` | Get help using the Astro CLI | 44 | 45 | ## 👀 Want to learn more? 46 | 47 | Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). 48 | -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "astro/config"; 2 | 3 | import icon from "astro-icon"; 4 | 5 | // https://astro.build/config 6 | export default defineConfig({ 7 | integrations: [icon()], 8 | redirects: { 9 | "/streams": { 10 | destination: "https://www.essentialrandomness.com/streams", 11 | status: 307, 12 | }, 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fujowebdev", 3 | "version": "0.0.1", 4 | "type": "module", 5 | "scripts": { 6 | "astro": "astro", 7 | "build": "astro check && astro build", 8 | "dev": "astro dev", 9 | "preview": "astro preview", 10 | "start": "astro dev" 11 | }, 12 | "dependencies": { 13 | "@astrojs/check": "^0.9.4", 14 | "@iconify-json/fa6-brands": "^1.2.5", 15 | "@iconify-json/fa6-solid": "^1.1.20", 16 | "@iconify-json/logos": "^1.1.42", 17 | "@iconify-json/lucide": "^1.1.177", 18 | "@iconify-json/pixelarticons": "^1.1.10", 19 | "@iconify-json/simple-icons": "^1.1.96", 20 | "astro": "^4.15.12", 21 | "astro-icon": "^1.1.0", 22 | "marked": "^12.0.1", 23 | "typescript": "^5.6.2" 24 | }, 25 | "devDependencies": { 26 | "prettier": "^3.2.5", 27 | "prettier-plugin-astro": "^0.14.1", 28 | "social-links": "^1.14.0" 29 | }, 30 | "engines": { 31 | "node": ">=20.0.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /public/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/public/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/favicon/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/public/favicon/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/public/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /public/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/public/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/public/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/public/favicon/favicon.ico -------------------------------------------------------------------------------- /public/favicon/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/favicon/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/favicon/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /public/images/bobatan-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/public/images/bobatan-logo.png -------------------------------------------------------------------------------- /public/images/og-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/public/images/og-card.png -------------------------------------------------------------------------------- /public/images/roster-with-names.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/public/images/roster-with-names.png -------------------------------------------------------------------------------- /src/components/CharacterCard.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Image } from "astro:assets"; 3 | 4 | import { Icon } from "astro-icon/components"; 5 | 6 | interface Props { 7 | name: string; 8 | imageSrc: ImageMetadata; 9 | likes: string[]; 10 | dislikes: string[]; 11 | tropes: (string | { url: string; name: string })[]; 12 | trivia: string; 13 | } 14 | 15 | const { name, likes, dislikes, tropes, trivia, imageSrc } = Astro.props; 16 | --- 17 | 18 |
19 |

{name}

20 | {`${name}'s 21 | 22 |
23 |

Likes

24 | 34 |
35 |
36 |

Dislikes

37 | 47 |
48 |
49 |

About

50 | 51 |
52 |
53 |

Tropes

54 | 68 |
69 |
70 |

Trivia

71 | 72 |
73 |
74 | 75 | 84 | 85 | 259 | -------------------------------------------------------------------------------- /src/components/FAQs.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Image } from "astro:assets"; 3 | import characterx from "../images/characterx.png"; 4 | import charactery from "../images/charactery.png"; 5 | --- 6 | 7 |
8 |
9 | What is [character]'s [race, sex, gender, etc]? 10 | 11 |

12 | Our character creation process has two main goals: 13 |

22 |

23 |

24 | Since these characters are anthropomorphized versions of software and 25 | development concepts, they are not constrained by our concepts of race, 26 | sex, gender, ethnicity, country of origin, and religion. While we are 27 | developing some characters with specific communities in mind, they can be 28 | anything to anyone. We invite people to play around with them as they see 29 | fit! 30 |

31 |

32 | Our desire to not make fan creators feel constrained by specific pronouns 33 | posed a challenge when assigning our own defaults. Official materials 34 | currently use he/him pronouns for the characters, as a callback to the 35 | genres that inspired us which avoids singling out any character’s 36 | preferred gender expression. We encourage the community to use whatever 37 | pronouns they prefer within their own versions of Localhost HQ. We’ll be 38 | exploring other ways to handle this issue in the future. 39 |

40 |
41 |
42 | 43 |
44 |
45 | 46 | Even though the characters aren't from the real world, you took 47 | inspiration from something. Do you use sensitivity readers? 48 | 49 | 50 |

51 | Although the volunteers and collaborators working on The Fujoshi Guide to 52 | Web Development are diverse, we don't have a broad enough cross-section to 53 | cover all axes of marginalization. To that end, we do extensive research 54 | and work with sensitivity consultants when exploring character traits, 55 | relationships, and design. 56 |

57 | 58 |

59 | You can see a current list of the consultants we've worked with during the 60 | production of the demo in the credits. They include: 61 |

67 |

68 |

69 | We are committed to continuing to increase the FujoGuide cast's diversity, 70 | and have additional characters in various stages of development that could 71 | not fit in this first release. If you're interested in helping as a 72 | sensitivity reader, please contact our lead Essential Randomness through 73 | Kickstarter to let us know what you would like to read for. 74 |

75 |
76 |
77 | 78 |
79 |
80 | Do you have any other characters? 81 | 82 |

83 | When we were first working on character design, we didn't actually know 84 | what our first volume would cover, so we discussed and began developing 85 | many gijinka who did not make it into Volume 0, like the two hotties 86 | below. 87 |

88 |
89 | Sketches of the unreleased FujoGuide character [Redacted]. He has a thicc build, a medium-dark skin tone, and tightly curled black hair shown in different styles. On the left is a nearly full-body drawing of him wearing a patchwork sweater, smiling, with a flat top hair style, and holding a steaming mug. The artist’s notes read “dimples? uwu”. In the middle are two side profiles with hair ideas: the top one has a flat top with fade hair style and the bottom one has box braids on top with a fade. The artist’s notes read “yarn braids :3”. On the right is a drawing of him knitting with his elbows on the table and his tongue sticking out in focus mode. He is wearing a white long-sleeve shirt and a very short hairstyle. The artist’s notes read “focusing too hard”. 93 | Sketches of the unreleased FujoGuide character [Redacted]. He has a thin build, a light skin tone, and long hair swept to one side and gathered in a ponytail. He is neatly dressed in a button down shirt, collared vest, dress pants, driving gloves, and oval bottom rim glasses. On the left, he is holding and reading a large book. In the middle, he is sitting cross-legged and looking thoughtful with a finger on his lips. On the right, he is walking down a grand staircase with one hand on the railing and a pencil behind his ear. 97 |
98 |

99 | We can't go into many details because they will be featured in future 100 | volumes, but know that there are so, so many more hot anime boys waiting 101 | for you. 102 |

103 |
104 |
105 | 106 | 165 | -------------------------------------------------------------------------------- /src/components/Header.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Nav from "./Nav.astro"; 3 | 4 | interface Props { 5 | multiLine?: boolean; 6 | } 7 | 8 | const props = Astro.props; 9 | --- 10 | 11 |
16 |
25 | 26 | 50 | -------------------------------------------------------------------------------- /src/components/Nav.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Icon } from "astro-icon/components"; 3 | 4 | const url = Astro.url.pathname; 5 | --- 6 | 7 | 38 | 39 | 84 | -------------------------------------------------------------------------------- /src/components/OgTags.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const themeColor = "#c29fc9"; 3 | 4 | const url = "https://fujoweb.dev"; 5 | const image = "https://fujoweb.dev/images/og-card.png"; 6 | 7 | interface Props { 8 | description?: string; 9 | title?: string; 10 | } 11 | 12 | const { 13 | title = "The Fujoshi Guide to Web Development — Fully Funded on Kickstarter", 14 | description = "The Fujoshi Guide to Web Development is an upcoming series of instructional zines about coding featuring anthropomorphizations of programming languages and concepts.", 15 | } = Astro.props; 16 | --- 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | {title} 33 | -------------------------------------------------------------------------------- /src/components/SalesSignup.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const props = Astro.props; 3 | --- 4 | 5 |
6 |

Sign up here to be notified when the guide is available for purchase:

7 |
13 | 20 | 21 | 22 |
23 |
24 | Your email has been added to our list. We look forward to sharing The Fujoshi Guide to Web Development 26 | with you! 27 |
28 |
29 | 30 | 79 | -------------------------------------------------------------------------------- /src/components/Socials.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Icon } from "astro-icon/components"; 3 | --- 4 | 5 | 38 | 39 | 59 | -------------------------------------------------------------------------------- /src/components/TeamMemberCard.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import type { ImageMetadata } from "astro"; 3 | 4 | import { Icon } from "astro-icon/components"; 5 | import type { SocialsData } from "../lib/socials-transformer"; 6 | import type { CollectionEntry } from "astro:content"; 7 | import type { Project } from "../content/config"; 8 | 9 | interface Props { 10 | memberId: string; 11 | name: string; 12 | avatar: ImageMetadata; 13 | roles: CollectionEntry<"team">["data"]["roles"]; 14 | project?: Project | undefined; 15 | contacts: SocialsData[]; 16 | } 17 | 18 | const props = Astro.props; 19 | --- 20 | 21 |
22 |

23 | 24 | {props.name} 25 |

26 |

Roles

27 | 63 |

Contacts

64 | 83 |
84 | 209 | -------------------------------------------------------------------------------- /src/content/characters/aria.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: ARIA 3 | order: 60 4 | image: ./profiles/aria.png 5 | icon: ./icons/aria.png 6 | home: browserland 7 | likes: 8 | - Escapades 9 | - Acting 10 | - HTML-senpai 11 | dislikes: 12 | - The bourgeoisie 13 | - Prolonged silence 14 | - Pineapple 15 | tropes: 16 | - name: Ladykiller in love 17 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/LadykillerInLove 18 | - name: Large ham 19 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/LargeHam 20 | - name: Translator buddy 21 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/TranslatorBuddy 22 | trivia: While his full name is WAI-ARIA, most refer to him simply as ARIA. Incidentally, it means "air" in Italian. 23 | --- 24 | 25 | Born to a rich family, ARIA's life was upended when he was sent to work among Browserland's plebs. Smitten by HTML and his work ethic, he's now his most loyal colleague, and a cup ramen connoisseur. 26 | 27 | His constant talking and his intuitive empathy make him the spokesperson of the HTML/CSS/ARIA trio. His generous allowance also bankrolls their adventures. 28 | -------------------------------------------------------------------------------- /src/content/characters/boba-tan.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Boba-tan 3 | order: 0 4 | image: ./profiles/boba-tan.png 5 | icon: ./icons/boba-tan.png 6 | home: the real world 7 | likes: 8 | - Programming 9 | - Yaoi 10 | - Boba 11 | dislikes: 12 | - Bullies 13 | - Bigotry 14 | - Boredom 15 | tropes: 16 | - name: Yaoi Fangirl 17 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/YaoiFangirl 18 | - name: Genki Girl 19 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/GenkiGirl 20 | - name: New Job as the Plot Demands 21 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/NewJobAsThePlotDemands 22 | # - name: Laborious Laziness 23 | # url: https://tvtropes.org/pmwiki/pmwiki.php/Main/LaboriousLaziness 24 | trivia: Boba-tan was created to be BobaBoard's mascot, but has held many jobs throughout her career. Her ethnicity is Chilean. 25 | --- 26 | 27 | After getting isekai'd to a world where programming concepts are 28 | anthropomorphized as hot fictional characters, Boba-tan has now embarked on an 29 | exilarating journey to learn all she can about web development. 30 | 31 | Kind, enthusiastic, intense and a bit weird (but, unless you're fictional, generally 32 | harmless), Boba-tan represents the best a fujoshi can be. 33 | -------------------------------------------------------------------------------- /src/content/characters/css.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: CSS 3 | order: 40 4 | image: ./profiles/css.png 5 | icon: ./icons/css.png 6 | home: browserland 7 | likes: 8 | - Arts & crafts 9 | - Shopkeeping 10 | - Dressing up HTML 11 | dislikes: 12 | - Itchy fabrics 13 | - Tidying up 14 | - Credit card chargebacks 15 | tropes: 16 | - name: The fashionista 17 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/TheFashionista 18 | - name: Eccentric artist 19 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/EccentricArtist 20 | - name: Keet 21 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/Keet 22 | trivia: CSS's math prowess is as keen as his fashion sense. It has to be`:` standard orgs keep adding ways to measure and color page elements. 23 | --- 24 | 25 | The creative force of Browserland, CSS honed his fashion sense by dressing his childhood friend HTML in extravagant clothes (a hobby he still maintains). 26 | 27 | While he made a career out of providing the web with the flourish he needs, he grows his creative skills by running an online shop on the side. Being deaf, he often communicates via sign language. 28 | -------------------------------------------------------------------------------- /src/content/characters/git.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Git 3 | order: 10 4 | image: ./profiles/git.png 5 | icon: ./icons/git.png 6 | home: localhost 7 | likes: 8 | - Gossip 9 | - Junk Food 10 | - People’s attention 11 | dislikes: 12 | - Physical exercise 13 | - Desserts 14 | - GitHub’s attention 15 | tropes: 16 | - name: Fake Cutie 17 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/TheFakeCutie 18 | - name: The Prima Donna 19 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/ThePrimaDonna 20 | - name: Angel/Devil Ship 21 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/AngelDevilShipping 22 | trivia: Git (the technology) will officially be 18 on April 7th, 2023. This equals `10010` years old in programming years. 23 | --- 24 | 25 | `Localhost HQ`’s resident catboy is as cute as he is changeable. Kind and sweet on the surface, his friendly demeanor can easily turn catty when provoked out of strangers’ sight. 26 | 27 | Despite his moodiness, Git's photographic memory makes him a powerful ally to those who learn how to tame him. 28 | -------------------------------------------------------------------------------- /src/content/characters/github.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: GitHub 3 | order: 20 4 | image: ./profiles/github.png 5 | icon: ./icons/github.png 6 | home: localhost 7 | likes: 8 | - Floating around 9 | - Showing up uninvited 10 | - Git 11 | dislikes: 12 | - Boredom 13 | - Spicy food 14 | - Being rejected 15 | tropes: 16 | - name: Combat Tentacles 17 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/CombatTentacles 18 | - name: Harmless Villain 19 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/HarmlessVillain 20 | - name: Angel/Devil Ship 21 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/AngelDevilShipping 22 | trivia: Cloud-based characters can instantly materialize wherever a web connection exists. Kinda like Castiel. 23 | --- 24 | 25 | Corrupted by the evil tendrils of capitalism the Cloud, GitHub is Git’s online counterpart. Materializing near Git every chance he gets, their psychic connection drives his obsessive behavior. 26 | 27 | Despite his villainous demeanor, GitHub is a good team player who loves social gatherings — not that he’d want anyone to know that. 28 | -------------------------------------------------------------------------------- /src/content/characters/html.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: HTML 3 | order: 50 4 | image: ./profiles/html.png 5 | icon: ./icons/html.png 6 | home: browserland 7 | likes: 8 | - Music 9 | - Endlessly scrolling 10 | - Memes 11 | dislikes: 12 | - Talking 13 | - Waking up early 14 | - OSHA violations 15 | tropes: 16 | - name: The quiet one 17 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/TheQuietOne 18 | - name: New job as plot demands 19 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/NewJobAsThePlotDemands 20 | - name: Suppressed rage 21 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/SuppressedRage 22 | trivia: It takes an average of 5 artists to get his face right. And even then, they might accidentally lose his headphones. 23 | --- 24 | 25 | The hardest worker in all of Browserland, HTML shows up wherever there's a (web) job to be done. Quiet, dependable, and overworked, he somehow always manages to appear professional. 26 | 27 | While he'd much rather spend time scrolling the web and listening to music, he can't help being dragged into CSS and ARIA's neverending shenanigans. 28 | -------------------------------------------------------------------------------- /src/content/characters/icons/aria.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/characters/icons/aria.png -------------------------------------------------------------------------------- /src/content/characters/icons/boba-tan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/characters/icons/boba-tan.png -------------------------------------------------------------------------------- /src/content/characters/icons/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/characters/icons/css.png -------------------------------------------------------------------------------- /src/content/characters/icons/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/characters/icons/git.png -------------------------------------------------------------------------------- /src/content/characters/icons/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/characters/icons/github.png -------------------------------------------------------------------------------- /src/content/characters/icons/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/characters/icons/html.png -------------------------------------------------------------------------------- /src/content/characters/icons/terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/characters/icons/terminal.png -------------------------------------------------------------------------------- /src/content/characters/profiles/aria.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/characters/profiles/aria.png -------------------------------------------------------------------------------- /src/content/characters/profiles/boba-tan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/characters/profiles/boba-tan.png -------------------------------------------------------------------------------- /src/content/characters/profiles/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/characters/profiles/css.png -------------------------------------------------------------------------------- /src/content/characters/profiles/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/characters/profiles/git.png -------------------------------------------------------------------------------- /src/content/characters/profiles/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/characters/profiles/github.png -------------------------------------------------------------------------------- /src/content/characters/profiles/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/characters/profiles/html.png -------------------------------------------------------------------------------- /src/content/characters/profiles/terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/characters/profiles/terminal.png -------------------------------------------------------------------------------- /src/content/characters/terminal.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Terminal 3 | order: 30 4 | image: ./profiles/terminal.png 5 | icon: ./icons/terminal.png 6 | home: localhost 7 | likes: 8 | - Taking care of HQ 9 | - Keeping sharp 10 | - Cats 11 | dislikes: 12 | - Noise and chaos 13 | - Bad hosts 14 | - Ill-behaved catboys 15 | tropes: 16 | - name: Secret badass 17 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/HiddenBadass 18 | - name: Eccentric mentor 19 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/EccentricMentor 20 | - name: Harem nanny 21 | url: https://tvtropes.org/pmwiki/pmwiki.php/Main/HaremNanny 22 | trivia: Also known as shell. Any resemblance to Revolver Ocelot is completely accidental. 23 | --- 24 | 25 | The most important member and live-in maid-pa of localhost HQ, Terminal is always ready to gently nudge beginners toward new adventures. 26 | 27 | While some of his syntax might be dated, age gives no sign of slowing him down. Quick, powerful, and performant, his abilities are feared by beginners and revered by experts. 28 | -------------------------------------------------------------------------------- /src/content/config.ts: -------------------------------------------------------------------------------- 1 | import { defineCollection, z } from "astro:content"; 2 | import { 3 | socialsSchema, 4 | transformSocial, 5 | type SocialsData, 6 | } from "../lib/socials-transformer"; 7 | 8 | const Volume0Issue1Role = z.enum([ 9 | "Technical Writer", 10 | "Scenario Writer", 11 | "Beta Reading Coordinator", 12 | "Beta Reader", 13 | "Proofreader", 14 | "Artist", 15 | "Tasks Coordinator", 16 | "Communications", 17 | "Character Designer", 18 | "Additional Coding", 19 | "Data Collection & Entry", 20 | ]); 21 | 22 | const Role = | z.ZodString = z.ZodString>( 23 | roleType: T | z.ZodString = z.string() 24 | ) => 25 | z.union([ 26 | roleType, 27 | z.object({ 28 | role: roleType, 29 | details: z.string(), 30 | }), 31 | ]); 32 | 33 | const roles = z.object({ 34 | "Volume 0 Kickstarter": Role().array().default([]), 35 | "Volume 0": Role().array().default([]), 36 | Website: Role().array().default([]), 37 | "Volume 0 Issue 1": Role(Volume0Issue1Role).array().default([]), 38 | }); 39 | 40 | const teamCollection = defineCollection({ 41 | type: "data", 42 | schema: (tools) => 43 | z.object({ 44 | name: z.string(), 45 | avatar: tools.image(), 46 | roles, 47 | contacts: socialsSchema 48 | .array() 49 | .default([]) 50 | .transform( 51 | (contacts) => contacts.map(transformSocial) as Array 52 | ), 53 | }), 54 | }); 55 | 56 | export type Project = keyof typeof roles.shape; 57 | 58 | const characterCollection = defineCollection({ 59 | type: "content", 60 | schema: ({ image }) => 61 | z.object({ 62 | name: z.string(), 63 | image: image(), 64 | icon: image(), 65 | home: z.enum(["localhost", "browserland", "the real world"]), 66 | likes: z.string().array(), 67 | dislikes: z.string().array(), 68 | tropes: z 69 | .union([ 70 | z.string(), 71 | z.object({ 72 | name: z.string(), 73 | url: z.string().url(), 74 | }), 75 | ]) 76 | .array(), 77 | trivia: z.string(), 78 | order: z.number(), 79 | }), 80 | }); 81 | 82 | export const collections = { 83 | team: teamCollection, 84 | characters: characterCollection, 85 | }; 86 | -------------------------------------------------------------------------------- /src/content/team/avatars/8190.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/8190.png -------------------------------------------------------------------------------- /src/content/team/avatars/brokemycrown.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/brokemycrown.jpg -------------------------------------------------------------------------------- /src/content/team/avatars/citro.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/citro.webp -------------------------------------------------------------------------------- /src/content/team/avatars/cmdonovann.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/cmdonovann.png -------------------------------------------------------------------------------- /src/content/team/avatars/default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/default.png -------------------------------------------------------------------------------- /src/content/team/avatars/elendraug.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/elendraug.png -------------------------------------------------------------------------------- /src/content/team/avatars/elf-herself.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/elf-herself.png -------------------------------------------------------------------------------- /src/content/team/avatars/enigmalea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/enigmalea.png -------------------------------------------------------------------------------- /src/content/team/avatars/ererifan195.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/ererifan195.jpg -------------------------------------------------------------------------------- /src/content/team/avatars/essential-randomness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/essential-randomness.png -------------------------------------------------------------------------------- /src/content/team/avatars/foxinboots.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/foxinboots.png -------------------------------------------------------------------------------- /src/content/team/avatars/ikam177.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/ikam177.jpg -------------------------------------------------------------------------------- /src/content/team/avatars/kiwipon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/kiwipon.png -------------------------------------------------------------------------------- /src/content/team/avatars/leedie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/leedie.png -------------------------------------------------------------------------------- /src/content/team/avatars/merelydovely.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/merelydovely.png -------------------------------------------------------------------------------- /src/content/team/avatars/michelle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/michelle.png -------------------------------------------------------------------------------- /src/content/team/avatars/pamuya.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/pamuya.png -------------------------------------------------------------------------------- /src/content/team/avatars/riazaia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/riazaia.png -------------------------------------------------------------------------------- /src/content/team/avatars/rudy-tuesday.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/rudy-tuesday.png -------------------------------------------------------------------------------- /src/content/team/avatars/secret-final-boss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/secret-final-boss.png -------------------------------------------------------------------------------- /src/content/team/avatars/sgt-spank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/sgt-spank.jpg -------------------------------------------------------------------------------- /src/content/team/avatars/slogbait.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/slogbait.png -------------------------------------------------------------------------------- /src/content/team/avatars/spillingdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/spillingdown.png -------------------------------------------------------------------------------- /src/content/team/avatars/the-bi-ballerina.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/the-bi-ballerina.png -------------------------------------------------------------------------------- /src/content/team/avatars/thunder-the-wolf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/thunder-the-wolf.jpg -------------------------------------------------------------------------------- /src/content/team/avatars/tovanish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/tovanish.png -------------------------------------------------------------------------------- /src/content/team/avatars/vcat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/vcat.jpg -------------------------------------------------------------------------------- /src/content/team/avatars/wiredferret.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/wiredferret.png -------------------------------------------------------------------------------- /src/content/team/avatars/ymkse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/ymkse.jpg -------------------------------------------------------------------------------- /src/content/team/avatars/yuu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/content/team/avatars/yuu.png -------------------------------------------------------------------------------- /src/content/team/brokemycrown.yaml: -------------------------------------------------------------------------------- 1 | name: brokemycrown 2 | avatar: ./avatars/brokemycrown.jpg 3 | roles: 4 | Volume 0 Kickstarter: 5 | - art director 6 | - Artist 7 | - role: character designer 8 | details: Git & GitHub 9 | Volume 0: 10 | - role: character designer 11 | details: Git & GitHub 12 | - role: Artist 13 | details: Full-body Git 14 | - beta reader 15 | contacts: 16 | - https://linktr.ee/reanimatedheart 17 | - https://www.patreon.com/reanimatedheartvn 18 | - https://ko-fi.com/brokemycrown 19 | - https://www.tumblr.com/doubledeadstudio 20 | - https://twitter.com/DoubleDeadSt 21 | - https://www.inprnt.com/gallery/brokemycrown/ 22 | -------------------------------------------------------------------------------- /src/content/team/candle.yaml: -------------------------------------------------------------------------------- 1 | name: Candle 2 | avatar: "./avatars/default.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Additional Research, Feedback, Development, and Assistance 6 | -------------------------------------------------------------------------------- /src/content/team/citro.yaml: -------------------------------------------------------------------------------- 1 | name: Citro 2 | avatar: "./avatars/citro.webp" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - QA Testing 6 | - Additional Research, Feedback, Development, and Assistance 7 | Volume 0 Issue 1: 8 | - Beta Reader 9 | 10 | contacts: 11 | - https://blorbo.social/@citro 12 | -------------------------------------------------------------------------------- /src/content/team/cmdonovann.yaml: -------------------------------------------------------------------------------- 1 | name: CMDonovann 2 | avatar: "./avatars/cmdonovann.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - role: character designer 6 | details: NPM & Yarn 7 | - QA Testing 8 | - Additional Research, Feedback, Development, and Assistance 9 | Volume 0 Issue 1: 10 | - Beta Reader 11 | contacts: 12 | - https://cmdonovann.neocities.org 13 | - https://cmdonovann.tumblr.com 14 | -------------------------------------------------------------------------------- /src/content/team/codeargent.yaml: -------------------------------------------------------------------------------- 1 | name: Argent 2 | avatar: "./avatars/default.png" 3 | roles: 4 | Volume 0 Issue 1: 5 | - Beta Reader 6 | -------------------------------------------------------------------------------- /src/content/team/elendraug.yaml: -------------------------------------------------------------------------------- 1 | name: Elendraug 2 | avatar: "./avatars/elendraug.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - QA Testing 6 | - Additional Research, Feedback, Development, and Assistance 7 | Volume 0: 8 | - Beta Reader 9 | Website: 10 | - Data entry 11 | Volume 0 Issue 1: 12 | - Data Collection & Entry 13 | - Beta Reader 14 | contacts: 15 | - https://elendraug.neocities.org 16 | -------------------------------------------------------------------------------- /src/content/team/elf-herself.yaml: -------------------------------------------------------------------------------- 1 | name: Elf Herself 2 | avatar: "./avatars/elf-herself.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Lead Research 6 | Website: 7 | - Copy Writer 8 | contacts: 9 | - https://elf.dreamwidth.org 10 | - https://elfherself.bsky.social 11 | # - elf_herself at Discord 12 | -------------------------------------------------------------------------------- /src/content/team/enigmalea.yaml: -------------------------------------------------------------------------------- 1 | name: enigmalea 2 | avatar: "./avatars/enigmalea.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Project Organizing 6 | - Technical Writer 7 | - Editor 8 | - QA Testing 9 | Volume 0: 10 | - Project Organizing 11 | - Technical Writer 12 | - Editor 13 | - Beta wrangler 14 | Volume 0 Issue 1: 15 | - Technical Writer 16 | - Beta Reading Coordinator 17 | - Additional Coding 18 | Website: 19 | - Maintainer 20 | - Coder 21 | - Copy Writer 22 | contacts: 23 | - https://enigmalea.quest 24 | - https://enigmalea.tumblr.com 25 | - https://enigmalea.bsky.social 26 | - url: https://easymode.im/@enigmalea 27 | platform: firefish 28 | username: enigmalea 29 | - https://archiveofourown.org/users/enigmalea 30 | - https://github.com/enigmalea 31 | - https://enigmalea.dreamwidth.org 32 | - https://ko-fi.com/enigmalea 33 | -------------------------------------------------------------------------------- /src/content/team/ererifan195.yaml: -------------------------------------------------------------------------------- 1 | name: ererifan195 2 | avatar: "./avatars/ererifan195.jpg" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Artist 6 | contacts: 7 | - https://bsky.app/profile/ererifan915.bsky.social 8 | - https://ereriren.neocities.org 9 | -------------------------------------------------------------------------------- /src/content/team/essential-randomness.yaml: -------------------------------------------------------------------------------- 1 | name: essential-randomness 2 | avatar: "./avatars/essential-randomness.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - project lead 6 | - writer 7 | - merch designer 8 | - graphic design 9 | Volume 0: 10 | - project lead 11 | - technical and scenario writer 12 | - the person who talks with the lawyers 13 | Volume 0 Issue 1: 14 | - Technical Writer 15 | - Scenario Writer 16 | - role: Artist 17 | details: Beta Sketches 18 | Website: 19 | - web mistress 20 | - coder 21 | - copy writer 22 | 23 | contacts: 24 | - https://essentialrandomness.com 25 | - https://essential-randomness.tumblr.com 26 | - https://twitter.com/essentialrandom 27 | - https://essentialrandom.bsky.social 28 | - url: https://indiepocalypse.social/@essentialrandom 29 | platform: mastodon 30 | username: essentialrandom 31 | - https://github.com/essential-randomness 32 | - https://patreon.com/essentialrandomness 33 | - https://ko-fi.com/essentialrandomness 34 | -------------------------------------------------------------------------------- /src/content/team/foxinboots.yaml: -------------------------------------------------------------------------------- 1 | name: foxinboots 2 | avatar: ./avatars/foxinboots.png 3 | roles: 4 | Volume 0: 5 | - Additional coding 6 | contacts: 7 | - https://thefoxinboots.tumblr.com/ 8 | - https://twitter.com/thefoxinboots 9 | - https://www.instagram.com/foxinboots/ 10 | - https://bsky.app/profile/foxinboots.bsky.social 11 | -------------------------------------------------------------------------------- /src/content/team/ikam177.yaml: -------------------------------------------------------------------------------- 1 | name: ikam177 2 | avatar: "./avatars/ikam177.jpg" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Artist 6 | Volume 0 Issue 1: 7 | - role: Artist 8 | details: Boba-tan in Screen 9 | contacts: 10 | - https://amkitakk.com 11 | - https://twitter.com/ikam177 12 | - url: https://blorbo.social/@AmkiTakk 13 | platform: mastodon 14 | username: AmkiTakk 15 | - https://ikam177.tumblr.com 16 | -------------------------------------------------------------------------------- /src/content/team/kiwipon.yaml: -------------------------------------------------------------------------------- 1 | name: kiwipon 2 | avatar: "./avatars/kiwipon.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Artist 6 | Volume 0 Issue 1: 7 | - role: Artist 8 | details: We Can Do It! 9 | contacts: 10 | - https://twitter.com/kiwi_pon 11 | - https://www.instagram.com/kiwipon 12 | - https://www.patriciaviarts.com 13 | -------------------------------------------------------------------------------- /src/content/team/leedie.yaml: -------------------------------------------------------------------------------- 1 | name: Leedie 2 | avatar: ./avatars/leedie.png 3 | roles: 4 | Website: 5 | - Data collector 6 | Volume 0 Issue 1: 7 | - Tasks Coordinator 8 | contacts: 9 | - https://twitter.com/pyhpyjka/ 10 | - https://tarantasina.tumblr.com/ 11 | -------------------------------------------------------------------------------- /src/content/team/marinehaddock.yaml: -------------------------------------------------------------------------------- 1 | name: MarineHaddock 2 | avatar: "./avatars/default.png" 3 | roles: 4 | Volume 0 Issue 1: 5 | - Beta Reader 6 | -------------------------------------------------------------------------------- /src/content/team/merelydovely.yaml: -------------------------------------------------------------------------------- 1 | name: Dove 2 | avatar: ./avatars/merelydovely.png 3 | roles: 4 | Website: 5 | - Copy Writer 6 | Volume 0 Issue 1: 7 | - Communications 8 | - Beta Reader 9 | contacts: 10 | - https://twitter.com/merelydovely/ 11 | - https://archiveofourown.org/users/merelydovely 12 | - https://merelydovely.bsky.social 13 | -------------------------------------------------------------------------------- /src/content/team/michelle.yaml: -------------------------------------------------------------------------------- 1 | name: Michelle 2 | avatar: "./avatars/michelle.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - QA Testing 6 | - Additional Research, Feedback, Development, and Assistance 7 | contacts: 8 | - https://mizunotic.neocities.org 9 | - https://www.tumblr.com/mizunotic 10 | -------------------------------------------------------------------------------- /src/content/team/moon.yaml: -------------------------------------------------------------------------------- 1 | name: Moon (AdmiralExclipse) 2 | avatar: "./avatars/default.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Sensitivity Reading 6 | -------------------------------------------------------------------------------- /src/content/team/mori.yaml: -------------------------------------------------------------------------------- 1 | name: Mori 2 | avatar: "./avatars/default.png" 3 | roles: 4 | Volume 0 Issue 1: 5 | - Beta Reader 6 | -------------------------------------------------------------------------------- /src/content/team/pamuya.yaml: -------------------------------------------------------------------------------- 1 | name: Pamuya 2 | avatar: "./avatars/pamuya.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Additional Research, Feedback, Development, and Assistance 6 | contacts: 7 | - https://twitter.com/PamuyaBlue 8 | - https://PamuyaBlue.bsky.social 9 | - https://www.tumblr.com/pamuyablue 10 | - https://www.furaffinity.net/user/pamuya-the-blue 11 | - https://archiveofourown.org/users/PamuyaBlucat 12 | -------------------------------------------------------------------------------- /src/content/team/playerprophet.yaml: -------------------------------------------------------------------------------- 1 | name: playerprophet 2 | avatar: "./avatars/default.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Additional Research, Feedback, Development, and Assistance 6 | Volume 0: 7 | - Beta Reading Coordinator 8 | contacts: 9 | - https://playerprophet.com 10 | -------------------------------------------------------------------------------- /src/content/team/ria.yaml: -------------------------------------------------------------------------------- 1 | name: ria 2 | avatar: ./avatars/riazaia.png 3 | roles: 4 | Volume 0: 5 | - Additional coding 6 | Volume 0 Issue 1: 7 | - Additional Coding 8 | contacts: 9 | - https://github.com/riazaia 10 | -------------------------------------------------------------------------------- /src/content/team/rudy-tuesday.yaml: -------------------------------------------------------------------------------- 1 | name: rudy tuesday 2 | avatar: "./avatars/rudy-tuesday.png" 3 | roles: 4 | Website: 5 | - Coder 6 | Volume 0 Issue 1: 7 | - Beta Reader 8 | contacts: 9 | - https://rudytues.day 10 | -------------------------------------------------------------------------------- /src/content/team/secret-final-boss.yaml: -------------------------------------------------------------------------------- 1 | name: Secret Final Boss 2 | avatar: "./avatars/secret-final-boss.png" 3 | roles: 4 | Volume 0 Issue 1: 5 | - Proofreader 6 | - Beta Reader 7 | -------------------------------------------------------------------------------- /src/content/team/sgt-spank.yaml: -------------------------------------------------------------------------------- 1 | name: sgt-spank 2 | avatar: "./avatars/sgt-spank.jpg" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - artist 6 | - role: character designer 7 | details: ARIA 8 | Volume 0: 9 | - role: character designer 10 | details: ARIA 11 | Volume 0 Issue 1: 12 | - role: Artist 13 | details: Catboy Bathwater Git 14 | contacts: 15 | - https://bsky.app/profile/sgt-spank.bsky.social 16 | - https://twitter.com/sgtspank 17 | - https://www.tumblr.com/sgt-spank 18 | -------------------------------------------------------------------------------- /src/content/team/slogbait.yaml: -------------------------------------------------------------------------------- 1 | name: slogbait 2 | avatar: "./avatars/slogbait.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Project Organizing 6 | - Additional Art & Layout 7 | -------------------------------------------------------------------------------- /src/content/team/spillingdown.yaml: -------------------------------------------------------------------------------- 1 | name: spillingdown 2 | avatar: "./avatars/spillingdown.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - artist 6 | - role: character designer 7 | details: Terminal 8 | Volume 0: 9 | - role: character designer 10 | details: Terminal 11 | contacts: 12 | - https://mappapapa.neocities.org 13 | - url: https://mappapapa.neocities.org/comm/ 14 | icon: "lucide:store" 15 | username: mappapapa 16 | - url: https://blorbo.social/@spillingdown 17 | platform: mastodon 18 | username: spillingdown 19 | -------------------------------------------------------------------------------- /src/content/team/the-bi-ballerina.yaml: -------------------------------------------------------------------------------- 1 | name: the-bi-ballerina 2 | avatar: "./avatars/the-bi-ballerina.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Social Media & Marketing 6 | contacts: 7 | - https://thebiballerina.tumblr.com 8 | - https://thebiballerina.dreamwidth.org 9 | - url: https://fandom.ink/@thebiballerina 10 | platform: mastodon 11 | username: thebiballerina 12 | -------------------------------------------------------------------------------- /src/content/team/thunder-the-wolf.yaml: -------------------------------------------------------------------------------- 1 | name: Thunder the Wolf 2 | avatar: "./avatars/thunder-the-wolf.jpg" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Additional Research, Feedback, Development, and Assistance 6 | Volume 0 Issue 1: 7 | - Beta Reader 8 | contacts: 9 | - https://thunder-the-ranger-wolf.tumblr.com 10 | -------------------------------------------------------------------------------- /src/content/team/tovanish.yaml: -------------------------------------------------------------------------------- 1 | name: tovanish 2 | avatar: "./avatars/tovanish.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Additional Research, Feedback, Development, and Assistance 6 | contacts: 7 | - https://tovanish.bsky.social 8 | -------------------------------------------------------------------------------- /src/content/team/vcat.yaml: -------------------------------------------------------------------------------- 1 | name: vCat 2 | avatar: "./avatars/vcat.jpg" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Additional Research, Feedback, Development, and Assistance 6 | contacts: 7 | - https://virtuouscat.dev 8 | - https://github.com/virtuous-cat 9 | -------------------------------------------------------------------------------- /src/content/team/wiredferret.yaml: -------------------------------------------------------------------------------- 1 | name: wiredferret 2 | avatar: "./avatars/wiredferret.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Technical Writer 6 | - Editor 7 | contacts: 8 | - https://heidiwaterhouse.com 9 | - https://wiredferret.bsky.social 10 | - url: https://hachyderm.io/@wiredferret 11 | platform: mastodon 12 | username: wiredferret 13 | -------------------------------------------------------------------------------- /src/content/team/ymkse.yaml: -------------------------------------------------------------------------------- 1 | name: ymkse 2 | avatar: "./avatars/ymkse.jpg" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - artist 6 | - role: character designer 7 | details: HTML & CSS 8 | Volume 0: 9 | - role: character designer 10 | details: HTML & CSS 11 | Volume 0 Issue 1: 12 | - role: Artist 13 | details: Cover & HTML Maid 14 | contacts: 15 | - https://bsky.app/profile/ymkse.bsky.social 16 | - https://twitter.com/ymkse_art 17 | - https://ymkse.carrd.co/ 18 | - https://ymkse.tumblr.com/ 19 | - https://ko-fi.com/emi_ymkse 20 | -------------------------------------------------------------------------------- /src/content/team/yuu.yaml: -------------------------------------------------------------------------------- 1 | name: yuu 2 | avatar: "./avatars/yuu.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - QA Testing 6 | - Lead Research 7 | Volume 0 Issue 1: 8 | - Beta Reader 9 | - Proofreader 10 | contacts: 11 | - https://where.yuu.gay/ 12 | -------------------------------------------------------------------------------- /src/content/team/zzz8190.yaml: -------------------------------------------------------------------------------- 1 | name: "8190" 2 | avatar: "./avatars/8190.png" 3 | roles: 4 | Volume 0 Kickstarter: 5 | - Additional Research, Feedback, Development, and Assistance 6 | contacts: 7 | - https://verygood.pictures/8190/entry 8 | -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// -------------------------------------------------------------------------------- /src/images/bobawip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/images/bobawip.png -------------------------------------------------------------------------------- /src/images/characterx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/images/characterx.png -------------------------------------------------------------------------------- /src/images/charactery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/images/charactery.png -------------------------------------------------------------------------------- /src/images/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/images/error.png -------------------------------------------------------------------------------- /src/images/git-intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FujoWebDev/fujowebdev/b4026a1202cda1fe86ad737b048ebdb74d87c585/src/images/git-intro.png -------------------------------------------------------------------------------- /src/layouts/PageLayout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Header from "../components/Header.astro"; 3 | import { ViewTransitions } from "astro:transitions"; 4 | import OgTags from "../components/OgTags.astro"; 5 | import Socials from "../components/Socials.astro"; 6 | 7 | interface Props { 8 | pageTitle?: string; 9 | pageDescription?: string; 10 | multiLineHeader?: boolean; 11 | } 12 | 13 | const { 14 | multiLineHeader, 15 | pageTitle = "The Fujoshi Guide to Web Development – Fully funded on Kickstarter", 16 | pageDescription, 17 | } = Astro.props; 18 | --- 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 142 | 147 | 153 | 159 | 160 | 165 | 166 | 167 |
168 | 175 |
176 |
177 |
178 | 179 | 180 |
181 | 201 | 202 | 203 | -------------------------------------------------------------------------------- /src/lib/socials-transformer.ts: -------------------------------------------------------------------------------- 1 | import { z } from "astro:content"; 2 | import { type ProfileMatch, SocialLinks } from "social-links"; 3 | 4 | export const socialsSchema = z.union([ 5 | z.string().url(), 6 | z.object({ 7 | icon: z.string().optional(), 8 | platform: z.string().optional(), 9 | url: z.string().url(), 10 | username: z.string().optional(), 11 | }), 12 | ]); 13 | export type SocialsSchema = z.infer; 14 | 15 | export type SocialsData = { 16 | icon: string | null; 17 | url: string; 18 | username: string | null; 19 | platform: WEBSITE_TYPES; 20 | }; 21 | 22 | export type WEBSITE_TYPES = 23 | | "github" 24 | | "tumblr" 25 | | "twitter" 26 | | "npm" 27 | | "web" 28 | | "bsky" 29 | | "twitch" 30 | | "mastodon" 31 | | "dreamwidth" 32 | | "ko-fi" 33 | | "patreon" 34 | | "youtube" 35 | | "kickstarter" 36 | | "inprnt" 37 | | "neocities"; 38 | 39 | export const transformSocial = (social: SocialsSchema) => { 40 | if (typeof social == "string") { 41 | return extractSocialData({ url: social }); 42 | } 43 | const { icon, url, platform, username } = social; 44 | const data = extractSocialData({ url }); 45 | 46 | return { 47 | ...data, 48 | icon: 49 | icon ?? 50 | (platform === undefined 51 | ? data.icon 52 | : getSocialIcon(platform as WEBSITE_TYPES)), 53 | url, 54 | platform, 55 | username, 56 | }; 57 | }; 58 | 59 | const socialLinks = new SocialLinks(); 60 | const tumblrMatches: ProfileMatch[] = [ 61 | { 62 | match: "https?://([a-z0-9-]+).tumblr.com/?", 63 | // TODO: more may be necessary for things like extracting usernames 64 | group: 1, 65 | }, 66 | { 67 | match: "https?://www.tumblr.com/([a-z0-9-]+)", 68 | // TODO: more may be necessary for things like extracting usernames 69 | group: 1, 70 | }, 71 | ]; 72 | socialLinks.addProfile("tumblr", tumblrMatches); 73 | const kofiMatches: ProfileMatch[] = [ 74 | { 75 | match: "https?://ko-fi.com/([a-z0-9-_]+)", 76 | group: 1, 77 | }, 78 | ]; 79 | socialLinks.addProfile("ko-fi", kofiMatches); 80 | 81 | const inprntMatches: ProfileMatch[] = [ 82 | { 83 | match: "https?://(?:www.)?inprnt.com/gallery/([a-z0-9-]+)/?", 84 | group: 1, 85 | }, 86 | ]; 87 | socialLinks.addProfile("inprnt", inprntMatches); 88 | 89 | const neocitiesMatches: ProfileMatch[] = [ 90 | { 91 | match: "https?://([a-z0-9-]+).neocities.org", 92 | group: 1, 93 | }, 94 | ]; 95 | socialLinks.addProfile("neocities", neocitiesMatches); 96 | 97 | const blueSkyMatches: ProfileMatch[] = [ 98 | { 99 | match: "https?://([a-z0-9-]+).bsky.social", 100 | group: 1, 101 | }, 102 | ]; 103 | socialLinks.addProfile("bsky", blueSkyMatches); 104 | 105 | const ao3Matches: ProfileMatch[] = [ 106 | { 107 | match: "https?://archiveofourown.org/users/([a-z0-9-]+)", 108 | group: 1, 109 | }, 110 | ]; 111 | socialLinks.addProfile("archiveofourown", ao3Matches); 112 | 113 | const dreamwidthMatches: ProfileMatch[] = [ 114 | { 115 | match: "https?://([a-z0-9-]+).dreamwidth.org", 116 | group: 1, 117 | }, 118 | ]; 119 | socialLinks.addProfile("dreamwidth", dreamwidthMatches); 120 | 121 | const furaffinityMatches: ProfileMatch[] = [ 122 | { 123 | match: "https?://www.furaffinity.net/user/([a-z0-9-]+)", 124 | group: 1, 125 | }, 126 | ]; 127 | socialLinks.addProfile("furaffinity", furaffinityMatches); 128 | 129 | const carrdMatches: ProfileMatch[] = [ 130 | { 131 | match: "https?://([a-z0-9-]+).carrd.co/?", 132 | group: 1, 133 | }, 134 | ]; 135 | socialLinks.addProfile("carrd", carrdMatches); 136 | 137 | const getSocialIcon = (platform: WEBSITE_TYPES) => { 138 | if (platform === "inprnt") { 139 | return "lucide:shopping-bag"; 140 | } 141 | if (platform === "neocities") { 142 | return "lucide:cat"; 143 | } 144 | if (platform === "bsky") { 145 | return "simple-icons:bluesky"; 146 | } 147 | if (platform === "dreamwidth") { 148 | return "simple-icons:livejournal"; 149 | } 150 | return "simple-icons:" + platform.replaceAll("-", ""); 151 | }; 152 | 153 | export const extractSocialData = ({ url }: { url: string }): SocialsData => { 154 | const lowerUrl = url.toLowerCase(); 155 | const socialLinkAttempt = socialLinks.detectProfile(lowerUrl); 156 | if (socialLinkAttempt) { 157 | return { 158 | url, 159 | platform: socialLinkAttempt as WEBSITE_TYPES, 160 | username: socialLinks.getProfileId(socialLinkAttempt, lowerUrl), 161 | icon: getSocialIcon(socialLinkAttempt as WEBSITE_TYPES), 162 | }; 163 | } 164 | // If you cannot find it, return the original url 165 | return { url, platform: "web", username: null, icon: null }; 166 | }; 167 | -------------------------------------------------------------------------------- /src/pages/404.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import PageLayout from "../layouts/PageLayout.astro"; 3 | import { Image } from "astro:assets"; 4 | import Error from "../images/error.png"; 5 | import { Icon } from "astro-icon/components"; 6 | 7 | const description = 8 | "The page you are looking for could not be found. Please check the URL and try again."; 9 | --- 10 | 11 | 15 |
16 |

Oops! This page could not be found.

17 | Boba-tan in her fursuit crawling around looking for her glasses 21 | Take 25 | me home 26 | 27 |

28 | We’ve lost track of this page, but you can still keep track of us through FujoCoded's newsletter. 31 |

32 |
33 | 66 | 67 | -------------------------------------------------------------------------------- /src/pages/characters.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import PageLayout from "../layouts/PageLayout.astro"; 3 | import CharacterCard from "../components/CharacterCard.astro"; 4 | import FAQs from "../components/FAQs.astro"; 5 | 6 | import { getCollection } from "astro:content"; 7 | import { parse } from "marked"; 8 | import { Image } from "astro:assets"; 9 | 10 | const characters = (await getCollection("characters")).toSorted( 11 | (a, b) => a.data.order - b.data.order 12 | ); 13 | --- 14 | 15 | 16 |
17 |

Our characters

18 |
19 |

20 | The Fujoshi Guide to Web Development features gijinka (anthropomorphizations) 22 | of programming languages and concepts. Each of our characters is engineered from the ground up to cater to "transformative" 24 | fandom—that is, people who create fanfiction, fanart, meta, and much more. 25 |

26 |
27 |
    28 | { 29 | characters.map(async (character) => { 30 | return ( 31 |
  • 32 | 33 | {`${character.data.name}'s 37 | 38 |
    • 39 | ); 40 | }) 41 | } 42 |
43 |
44 |
45 |

The protagonist

46 | { 47 | characters 48 | .filter((c) => c.data.home == "the real world") 49 | .map(async (character) => { 50 | const renderedBody = await character.render(); 51 | return ( 52 | 60 | 61 | 62 | ); 63 | }) 64 | } 65 |

Localhost

66 |
67 |

68 | Localhost is where the characters that reside on your own computer live. 69 | While GitHub theoretically comes from the Cloud, he's often following 70 | Git around and (much to Terminal's chagrin) is an almost-permanent 71 | fixture of the place. 72 |

73 |
74 | { 75 | characters 76 | .filter((c) => c.data.home == "localhost") 77 | .map(async (character) => { 78 | const renderedBody = await character.render(); 79 | return ( 80 | 88 | 89 | 90 | ); 91 | }) 92 | } 93 |
94 |
95 |

Browserland

96 |
97 |

98 | Browserland characters are responsible for bringing the web as we know 99 | it to life. Always hard at work to display any website in its full 100 | glory, Browserland's most famous trio (HTML, CSS & ARIA) is inseparable. 101 |

102 |
103 | { 104 | characters 105 | .filter((c) => c.data.home == "browserland") 106 | .map(async (character) => { 107 | const renderedBody = await character.render(); 108 | return ( 109 | 117 | 118 | 119 | ); 120 | }) 121 | } 122 |
123 | 124 |
125 |

FAQs

126 | 127 |
128 | 129 | 130 | 172 | -------------------------------------------------------------------------------- /src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import PageLayout from "../layouts/PageLayout.astro"; 3 | import SalesSignup from "../components/SalesSignup.astro"; 4 | import { Icon } from "astro-icon/components"; 5 | --- 6 | 7 | 8 |
9 |
10 | The character roster for The Fujoshi Guide to Web Development. The title is located near the bottom of the graphic in aqua, orange, and pink text surrounded by a lavender bubble. Pink hearts bubble up from the word ‘web’ in the title. The word ‘to’ is framed by a terminal. On the left side of the title is a stylized computer screen showing an image of Boba-tan, the BobaBoard Mascot, wearing a raccoon kigurumi, glasses, and waving in greeting. The background shows six characters that represent from left to right: Git, GitHub, Terminal, CSS, HTML, and ARIA. The background colors form a rainbow. 14 |
15 |

The project

16 |

17 | The Fujoshi Guide to Web Development is an upcoming series of instructional 19 | zines about coding. Our mission is to empower more people (especially from fandom spaces) to 21 | actively create the internet they want to inhabit. Each zine features gijinka–that 22 | is, anthropomorphizations– of programming languages and concepts. 23 |

24 |

25 | The Fujoshi Guide aims to fill the gap between beginner tutorials 26 | and professional web development resources. Beginner tutorials ignore many 27 | of the techniques crucial to modern web development, while professional resources 28 | are so dense they are unapproachable to the average fan. As a result, many 29 | capable potential developers abandon their programming dreams. 30 |

31 | 32 |

33 | Our cunning plan to fix this? Tantalize our readers with irresistible characters who just happen to be willing to teach them to code, 36 | easing them past any aversion with entertaining stories and exercises. 37 |

38 |
39 |
40 |

Volume 0: Git & GitHub

41 |

42 | The Fujoshi Guide starts off by teaching two skills that most guides 43 | don’t cover until far too late, if ever: how to maintain your code and how 44 | to collaborate on coding projects. Armed with this knowledge, you can gain 45 | access to the wider world of web development tools and start creating the web 46 | you want to see. 47 |

48 |

49 | Volume Zero covers the basics of: 50 |

    51 |
  • Git
    • 52 |
  • GitHub
    • 53 |
  • Open source development
    • 54 |
  • Command line interface (“Terminal”)
    • 55 |
56 |

57 |
58 |
59 |

Want your own copy?

60 | 61 |
62 | See our original pitch on 66 | 71 | 72 | 73 | 123 | 124 | -------------------------------------------------------------------------------- /src/pages/team/[member].astro: -------------------------------------------------------------------------------- 1 | --- 2 | import type { GetStaticPaths } from "astro"; 3 | import { type CollectionEntry, getCollection, getEntry } from "astro:content"; 4 | import PageLayout from "../../layouts/PageLayout.astro"; 5 | import TeamMemberCard from "../../components/TeamMemberCard.astro"; 6 | 7 | export const getStaticPaths: GetStaticPaths = async () => { 8 | const team = await getCollection("team"); 9 | return team.map((member, index) => { 10 | return { 11 | params: { 12 | member: member.id, 13 | }, 14 | props: { 15 | next: index < team.length - 1 ? team[index + 1].id : null, 16 | previous: index > 0 ? team[index - 1].id : null, 17 | }, 18 | }; 19 | }); 20 | }; 21 | 22 | const { member } = Astro.params; 23 | const { previous, next } = Astro.props; 24 | 25 | const memberEntry = await getEntry( 26 | "team", 27 | member as CollectionEntry<"team">["id"] 28 | ); 29 | --- 30 | 31 | 32 |

Our team

33 |
34 | 44 | 59 |
60 | 61 | 101 | -------------------------------------------------------------------------------- /src/pages/team/[project].astro: -------------------------------------------------------------------------------- 1 | --- 2 | import type { GetStaticPaths } from "astro"; 3 | import { getCollection, type CollectionEntry } from "astro:content"; 4 | import type { Project } from "../../content/config"; 5 | import PageLayout from "../../layouts/PageLayout.astro"; 6 | import TeamMemberCard from "../../components/TeamMemberCard.astro"; 7 | 8 | export const getStaticPaths: GetStaticPaths = async () => { 9 | const PROJECTS: Project[] = []; 10 | 11 | const team = await getCollection("team"); 12 | 13 | team.map((member) => { 14 | const memberProjects = member.data.roles; 15 | for (const project of Object.keys(memberProjects) as Project[]) { 16 | if (!PROJECTS.includes(project)) { 17 | PROJECTS.push(project); 18 | } 19 | } 20 | }); 21 | 22 | return PROJECTS.map((project) => { 23 | return { 24 | params: { 25 | project: project, 26 | }, 27 | }; 28 | }); 29 | }; 30 | 31 | const { project } = Astro.params as { project: Project }; 32 | 33 | if (!project || typeof project === "number") return; 34 | 35 | const memberEntries = await getCollection("team", ({ data }) => { 36 | return data.roles[project] && data.roles[project].length; 37 | }); 38 | --- 39 | 40 | 41 |

Our team

42 |

{project}

43 |
44 | { 45 | memberEntries.map((memberEntry) => { 46 | return ( 47 | 58 | ); 59 | }) 60 | } 61 |
62 | 63 | 94 | -------------------------------------------------------------------------------- /src/pages/team/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { getCollection, type CollectionEntry } from "astro:content"; 3 | import type { Project } from "../../content/config"; 4 | import PageLayout from "../../layouts/PageLayout.astro"; 5 | import TeamMemberCard from "../../components/TeamMemberCard.astro"; 6 | 7 | const team = await getCollection("team"); 8 | 9 | const PROJECTS: Record[] }> = {}; 10 | 11 | team.forEach((member) => { 12 | for (const project of Object.keys(member.data.roles) as Project[]) { 13 | if (!PROJECTS[project]) { 14 | PROJECTS[project] = { 15 | members: [] as CollectionEntry<"team">[], 16 | }; 17 | } 18 | if (member.data.roles[project] && member.data.roles[project].length > 0) { 19 | PROJECTS[project].members.push(member); 20 | } 21 | } 22 | }); 23 | 24 | const projectsArray = Object.keys(PROJECTS).map((proj) => ({ 25 | name: proj as Project, 26 | url: proj.replace(/\s/g, "-").toLowerCase(), 27 | members: PROJECTS[proj].members, 28 | })); 29 | --- 30 | 31 | 32 |

Our team

33 |
34 | Whether for one single adventure or as part of our continued efforts, these 35 | are the people whose hard work makes FujoGuide possible. 36 |
37 |
38 | { 39 | projectsArray.map((project, index) => { 40 | // Exclude from members with card people that have exclusively done beta reading 41 | const membersWithCard = project.members.filter( 42 | (member) => 43 | member.data.roles[project.name]?.length !== 1 || 44 | member.data.roles[project.name]?.[0] !== "Beta Reader" 45 | ); 46 | const betaReaders = project.members.filter((member) => 47 | member.data.roles[project.name]?.includes("Beta Reader") 48 | ); 49 | 50 | return ( 51 | <> 52 | 58 | 59 |
60 | {membersWithCard.map((memberEntry) => { 61 | return ( 62 | 73 | ); 74 | })} 75 | {betaReaders.length > 0 && ( 76 |
77 |

...and our heroic beta readers:

78 | {betaReaders.map((reader) => reader.data.name).join(", ")} 79 |
80 | )} 81 |
82 | 83 | ); 84 | }) 85 | } 86 |
87 | 88 | 152 | -------------------------------------------------------------------------------- /src/pages/volume-0.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import PageLayout from "../layouts/PageLayout.astro"; 3 | import SalesSignup from "../components/SalesSignup.astro"; 4 | import GitIntro from "../images/git-intro.png"; 5 | import { Image } from "astro:assets"; 6 | --- 7 | 8 | 9 |
10 |

11 | The Fujoshi Guide to Web Development is structured in issues with a 13 | single learning focus, which are then collected into volumes–similarly to a manga or comic. Featured in our first Kickstarter, Volume 15 | 0 collects our inaugural issues introducing Git, GitHub and open source 16 | development. 17 |

18 |
19 |
20 |

Want your own copy?

21 | 22 |
23 |
24 |

Issue 1 – Using Git locally

25 | Git's introduction from the guide 26 |
27 |

28 | Boba-tan learns how Git can help make tracking your code changes and 29 | sorting through different versions of a codebase a breeze–no matter the 30 | size of your wardrobe! 31 |

32 | 33 |

Topics

34 |
    35 |
  • What is version control (Git)?
    • 36 |
  • The commit cycle
    • 37 |
  • Navigating and manipulating code history
    • 38 |
39 |

The scenario

40 |

41 | Meet Git and learn about his most fundamental commands through a 42 | dress-up game involving his friends: CSS, HTML, ARIA, and Boba-tan. 43 |

44 |

Current status

45 |

Preview released! Full issue coming soon

46 |
47 |
48 | 49 |
50 |

Issue 2 – Using Git(Hub) in the cloud

51 | 52 |
53 |

54 | When Boba-tan's laptop breaks in the middle of her latest project, Git 55 | and GitHub team up to save the day by combining their powers to back up 56 | code to the cloud, help her continue working, and prevent future 57 | disasters. 58 |

59 | 60 |

Topics

61 |
    62 |
  • Uploading code to remotes
    • 63 |
  • Cloning a repository
    • 64 |
  • Creating branches
    • 65 |
  • Merging changes
    • 66 |
67 |

The scenario

68 |

69 | Explore how to avoid losing your code and work on changes in parallel by 70 | using the combined power of Git and GitHub to recover and improve 71 | Boba-tan's lost Blorbo Shrine. 72 |

73 |

Current status

74 |

Early draft ready, writing in progress

75 |
76 |
77 |

Issue 3 – Open Source Collaboration

78 |
79 | Work in progress, check back later 80 |

Topics

81 |
    82 |
  • Forking repositories
    • 83 |
  • The pull request process
    • 84 |
  • Opening issues
    • 85 |
  • …and more
    • 86 |
87 |

The scenario

88 |

Work in progress, check back later

89 |

Current status

90 |

Brainstorming content and scenario

91 |
92 |
93 |
94 | 157 | 158 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strict" 3 | } 4 | --------------------------------------------------------------------------------