Skip to content

Commit

Permalink
feat: create ui to copy paste slurs for instagram and thread users. #297
Browse files Browse the repository at this point in the history
  • Loading branch information
dennyabrain committed Jul 14, 2023
1 parent 58dbaeb commit dd18b1f
Show file tree
Hide file tree
Showing 7 changed files with 714 additions and 13 deletions.
5 changes: 3 additions & 2 deletions uli-website/src/components/molecules/Footer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@ export default function Footer() {
margin={{ top: "small", bottom: "small" }}
width={"large"}
direction={"row-responsive"}
align={"center"}
gap="small"
>
<NavLink to="https://twitter.com/tattlemade">Twitter</NavLink>
<NavLink to="/privacy-policy">Privacy Policy</NavLink>
<NavLink to="/blog">Blog</NavLink>
<NavLink to="https://github.com/tattle-made/OGBV/tree/main/uli-website">GitHub</NavLink>
<NavLink to="https://github.com/tattle-made/OGBV/tree/main/uli-website">
GitHub
</NavLink>
</Box>
</Box>
);
Expand Down
23 changes: 12 additions & 11 deletions uli-website/src/components/molecules/NavBar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ const NavBarByLang = {
<NavLink to={"/about"}>About</NavLink>
<NavLink to={"/faq"}>FAQ</NavLink>
<NavLink to={"/research"}>Research</NavLink>

</Box>
),
hi: (
Expand Down Expand Up @@ -53,17 +52,19 @@ export default function NavBar() {
}, []);

return (
<Box align="center" pad={"small"}>
<Box align="center" pad={"medium"}>
<Box width={"large"} direction={"row-responsive"} gap={"small"}>
<NavLink to={"/"}>
<Text size={"small"}>English</Text>
</NavLink>
<NavLink to={"/ta/"}>
<Text size={"small"}>Tamil</Text>
</NavLink>
<NavLink to={"/hi/"}>
<Text size={"small"}>Hindi</Text>
</NavLink>
<Text>
<NavLink to={"/"}>
<Text size={"small"}>English</Text>
</NavLink>{" "}
<NavLink to={"/ta/"}>
<Text size={"small"}>Tamil</Text>
</NavLink>{" "}
<NavLink to={"/hi/"}>
<Text size={"small"}>Hindi</Text>
</NavLink>
</Text>
</Box>
<Box
margin={{ top: "small" }}
Expand Down
99 changes: 99 additions & 0 deletions uli-website/src/pages/hidden-words-for-instagram.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import React, { useState } from "react";
import {
Box,
Heading,
Text,
Paragraph,
Anchor,
CheckBoxGroup,
Button,
TextArea,
} from "grommet";
import AppShell from "../components/molecules/AppShell";
import slurHindi from "../slurs/hindi.json";
import slurHinglish from "../slurs/hinglish.json";
import slurTamil from "../slurs/tamil.json";
import { CTALinkPlainPrimary } from "../components/atoms/UliCore";

const options = {
hindi: {
label: "Hindi",
slurs: slurHindi,
},
tamil: {
label: "Tamil",
slurs: slurTamil,
},
hinglish: {
label: "Hinglish",
slurs: slurHinglish,
},
};

const HiddenWordsForInstagram = () => {
const selectOptions = Object.keys(options).map((option) => {
return { label: options[option].label, value: option };
});
const defaultOptions = selectOptions.map((option) => option.value);
const [choices, setChoices] = useState(defaultOptions);

function clickCopyToClipboard() {
navigator.clipboard.writeText(
choices.map((choice) => options[choice].slurs.join(", ")).join(", ")
);
}

return (
<AppShell>
<Box align="center" margin={"large"}>
<Box width={"large"}>
<Heading level={1}>Hidden Words for Instagram</Heading>
<Paragraph fill>
Instagram now allows you to filter out words that you don't want to
see on your feed. Uli's slur list can assist you in adding a list of
slurs in Indian languages. If you are being targetted or abused on
social media in Indian languages, consider adding these words to
your list of "hidden words" on Instagram
</Paragraph>

<Box direction="row-responsive" gap={"medium"} align="center">
<Text> Choose Languages</Text>
<CheckBoxGroup
direction={"row-responsive"}
gap="small"
options={selectOptions}
value={choices}
onChange={({ value, option }) => {
setChoices(value);
}}
></CheckBoxGroup>
<Box flex={"grow"}></Box>
<Button onClick={clickCopyToClipboard}>
<CTALinkPlainPrimary>
<Text>Copy to Clipboard</Text>
</CTALinkPlainPrimary>
</Button>
</Box>
<Box height={"1.2em"} />
<Box height={"50vh"}>
<TextArea
fill
value={choices
.map((choice) => options[choice].slurs.join(", "))
.join(", ")}
/>
</Box>
<Heading level={2}>Contribute</Heading>
<Paragraph fill margin={"none"}>
These slurs were crowdsourced from social media users in India who
are on the receiving end of abuse. If you would like to share your
list of words with us and grow this list, reach out to us at
[email protected]
</Paragraph>
</Box>
</Box>
</AppShell>
);
};

export default HiddenWordsForInstagram;
99 changes: 99 additions & 0 deletions uli-website/src/pages/hidden-words-for-thread.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import React, { useState } from "react";
import {
Box,
Heading,
Text,
Paragraph,
Anchor,
CheckBoxGroup,
Button,
TextArea,
} from "grommet";
import AppShell from "../components/molecules/AppShell";
import slurHindi from "../slurs/hindi.json";
import slurHinglish from "../slurs/hinglish.json";
import slurTamil from "../slurs/tamil.json";
import { CTALinkPlainPrimary } from "../components/atoms/UliCore";

const options = {
hindi: {
label: "Hindi",
slurs: slurHindi,
},
tamil: {
label: "Tamil",
slurs: slurTamil,
},
hinglish: {
label: "Hinglish",
slurs: slurHinglish,
},
};

const HiddenWordsForThread = () => {
const selectOptions = Object.keys(options).map((option) => {
return { label: options[option].label, value: option };
});
const defaultOptions = selectOptions.map((option) => option.value);
const [choices, setChoices] = useState(defaultOptions);

function clickCopyToClipboard() {
navigator.clipboard.writeText(
choices.map((choice) => options[choice].slurs.join(", ")).join(", ")
);
}

return (
<AppShell>
<Box align="center" margin={"large"}>
<Box width={"large"}>
<Heading level={1}>Hidden Words for Thread</Heading>
<Paragraph fill>
Meta's Thread now allows you to filter out words that you don't want
to see on your feed. Uli's slur list can assist you in adding a list
of slurs in Indian languages. If you are being targetted or abused
on social media in Indian languages, consider adding these words to
your list of "hidden words" on Thread
</Paragraph>

<Box direction="row-responsive" gap={"medium"} align="center">
<Text> Choose Languages</Text>
<CheckBoxGroup
direction={"row-responsive"}
gap="small"
options={selectOptions}
value={choices}
onChange={({ value, option }) => {
setChoices(value);
}}
></CheckBoxGroup>
<Box flex={"grow"}></Box>
<Button onClick={clickCopyToClipboard}>
<CTALinkPlainPrimary>
<Text>Copy to Clipboard</Text>
</CTALinkPlainPrimary>
</Button>
</Box>
<Box height={"1.2em"} />
<Box height={"50vh"}>
<TextArea
fill
value={choices
.map((choice) => options[choice].slurs.join(", "))
.join(", ")}
/>
</Box>
<Heading level={2}>Contribute</Heading>
<Paragraph fill>
These slurs were crowdsourced from social media users in India who
are on the receiving end of abuse. If you would like to share your
list of words with us and grow this list, reach out to us at
[email protected]
</Paragraph>
</Box>
</Box>
</AppShell>
);
};

export default HiddenWordsForThread;
117 changes: 117 additions & 0 deletions uli-website/src/slurs/hindi.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
[
"जिहादी",
"छक्का",
"छिनाल",
"रंडी",
"रण्डी",
"रांड",
"रंडीखाना",
"रण्डी रोना",
"लुल्ली",
"गांड",
"गा#",
"कुतिया",
"कुत्ती",
"बत्तमीज़",
"कुल्टा",
"हरामजादी",
"साली",
"चो#",
"चुदाई",
"मा के भोसड़े",
"भोस्डीके",
"भोछडी वाला",
"लोड़ू",
"बहन चोद",
"मादरचोद",
"लानती",
"छुतीये",
"चूतिये",
"चूत",
"लौड़ा",
"लौड़े",
"चरित्रहीन",
"लिब्राण्डू",
"नंगी पुंगी",
"पागल औरत",
"बाज़ारू औरत",
"बलात्कार",
"बदसूरत",
"मुजरा",
"जाहिल औरत",
"औरत-ए-जाहिल",
"भोसड़ीwala",
"भोसड़ीवाला",
"चंडाल चौकड़ी",
"म्लेच्छा",
"सूअर",
"सूअर की औलाद",
"दोगली",
"🏹🏹",
"पनौती",
"हरामी",
"गधी",
"बुरखा धत्त",
"बुल्ली",
"कलमुंही",
"पिछवाड़ा",
"काम वाली बाई",
"पैर की जूती",
"नाल",
"गंदी नाली",
"हगना",
"सुल्ली",
"हिज़रापंती",
"नाचने वाली",
"तवाइफ़",
"सौ टका टंच माल",
"किन्नर",
"गद्दार",
"चमचा",
"चमची",
"आतंकवादी",
"मुलिया",
"कटवा",
"चाटुकार",
"बहन की लोड़ी",
"चुस्लिम",
"चुस्लामि",
"चुसल्मान",
"चूस",
"भीमटा",
"भीमटी",
"बैल बुद्धि",
"हलाला",
"भद्दी औरत",
"भांड औरत",
"भाड़े काटट्टू",
"दो कौड़ी की औरत",
"घटिया औरत",
"बेहूदा औरत",
"चालू औरत",
"झूठी औरत",
"मर क्यों नहीं जाती",
"नल्ली",
"भूतनी के",
"चूत के बाल",
"मादरजात",
"भड़वा",
"चूची",
"टट्टी",
"गटर पैदाइश",
"मुँह में ले",
"मूत",
"नाजायज़",
"कटा लुंड",
"काला टेंट",
"जूता खायेगी",
"बुरखे वाली",
"काली कलूटी",
"काले तवे",
"मोटी भैंस",
"देहातन",
"देहाती औरत",
"गणिका",
"हबशी",
"ओला हु उबर"
]
Loading

0 comments on commit dd18b1f

Please sign in to comment.