sfja.skp/grill-blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rudimentawy fwontend stuff

Browse Source
This commit is contained in:
SimonFJ20 2024-05-14 01:28:09 +02:00
parent 27bea8182f
commit 5900cdb516
6 changed files with 279 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/index.html
View File

@ -2,8 +2,18 @@
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<title>grill blog</title>
</head>
<body>
<h1>grill blog</h1>
<header>
<h1>grill blog</h1>
</header>
<div id="articles">dasdasdasd</div>
<footer>
Copyright © 2024- The authors or something idk
</footer>
</body>
</html>

24
public/reader/index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<title>grill blog reader</title>
</head>
<body>
<header>
<h1>grill blog</h1>
</header>
<main>
<a href="..">Go back</a>
<div id="article">
<p>Loading...</p>
</div>
</main>
<footer>
Copyright © 2024- The authors or something idk
</footer>
</body>
</html>

86
public/reader/script.js Normal file
View File

@ -0,0 +1,86 @@
"use strict";
const articleDiv = document.getElementById("article");
async function requestArticle(id) {
await new Promise((r) => r());
return {
id,
title:
"It Is Journalism’s Sacred Duty To Endanger The Lives Of As Many Trans People As Possible",
date: new Date().toISOString(),
author: "Onion Trollage",
content: `
<p>
The task of reporting is not a simple one. Each and every day, reporters and editors at publications like The Onion make difficult decisions about which issues should receive attention, knowing that our coverage will influence not only how people think, but also how they act. This responsibility is at the core of an ongoing debate over whether news coverage of transgender, non-binary, and gender-nonconforming people is unduly biased. As the world’s leading news publication with a daily readership of 4.3 trillion, The Onion is compelled to weigh in.
</p>
<p>
We firmly believe that it is journalism’s sacred duty to endanger the lives of as many trans people as possible.
</p>
<p>
“Quentin” is a 14-year-old assigned female at birth who now identifies as male against the wishes of his parents. His transition was supported by one of his unmarried teachers, who is not a virgin. He stole his parents’ car and drove to the hospital, where a doctor immediately began performing top surgery on him. Afterward, driving home drunk from the hospital, Quentin became suicidally depressed, and he wonders now, homeless and ridden with gonorrhea, if transitioning was a mistake.
</p>
<p>
We just made Quentin up, and that’s okay. It doesn’t mean stories like his aren’t potentially happening everywhere, constantly. Good journalism is about finding those stories, even when they don’t exist. It’s about asking the tough questions and ignoring the answers you don’t like, then offering misleading evidence in service of preordained editorial conclusions. In our case, endangering trans people is the lodestar that shapes our coverage. Frankly, if our work isn’t putting trans people further at risk of trauma and violence, we consider it a failure.
</p>
<p>
We stand behind our recent obsessed-seeming torrent of articles and essays on trans people, which we believe faithfully depicts their lived experiences as weird and gross. We remain dedicated to finding the angles that best frame the basic rights of the gender-nonconforming as up for debate, and we will use these same angles over and over again in hopes that this repetition makes them suffer. As journalists, it is our obligation to entertain any and all pseudoscience that gives bigotry an intellectual veneer. We must be diligent in laundering our vitriol through the posture of journalistic inquiry, and we must be allowed to fixate on the genitals.
</p>
<p>
It is against free speech to stop us from fixating on the genitals.
</p>
<p>
Much of the recent debate concerns medical procedures, particularly in children, and whether things like hormone replacement therapy or gender-affirming surgeries are safe and appropriate. Indeed, there are critical questions to be asked about the social complexities of gender, as well as medical ethics in a profit-driven healthcare system. We are simply not interested in any of that. Instead, we will use flawed data and spurious logic to repeatedly write the same hand-wringing arguments asking whether there are suddenly too many trans people around. Journalistic integrity demands nothing less.
</p>
<p>
Naturally, courageous reporting like ours has its detractors. Our critics accuse us of transphobia and are trying to murder us online, with their online mobs. They want to destroy our right to free speech and have us arrested by all the police. What gives? Why would you arrest us, when it’s those deviant trans people you ought to be arresting instead? Do you know what the science says about trans people getting arrested, huh? What if we could find data saying trans people should be more likely to get arrested? What will our detractors say then? They’ll be silent, as well they should be, and free speech will survive one more day.
</p>
<p>
For more evidence of our time-honored journalistic commitment to endangering lives, please see our previous coverage of gay people, immigrants, Black people, and women.
</p>
<p>
Institutions with massive platforms like ours must be open to different ways of endangering the trans community. That might mean using the framework of medical care as a bogeyman to imply that trans people are engaged in something sinister. That might mean turning isolated instances of detransitioning into sweeping generalizations about children being groomed. That might mean identifying the worst prejudices that transgender people face—and encouraging our readers to adopt them.
</p>
<p>
Did you forget yet about how we wrote that there might be data showing that trans people should be more likely to get arrested? What if that were true? Or what if non-binary people are ten times more likely to traffic infants? What if puberty blockers are a kind of sex crime? What if doctors are climbing through windows to suture penises to sleeping cheerleaders? The next time you see a trans person, you ought to ask yourself these questions.
</p>
<p>
All great journalists, and even those lesser journalists who don’t work for The Onion, eventually ponder why we do what we do. Is the point of reporting to illuminate the world around us, so that we may make meaning of it? Or is it to cause people in minority groups to question their humanity and persuade others to demonize them? We know where we stand, proudly dreaming of genitals.
</p>
<p>
Research shows that trans people are over four times more likely than cisgender people to be the victim of a violent crime. We salute our colleagues across the media who are working tirelessly to make that number even higher.
</p>
`,
};
}
async function main() {
const params = new URLSearchParams(location.search);
if (!params.has("id")) {
articleDiv.innerHTML = "<p>Error: No article id in params.</p>";
return;
}
const id = params.get("id");
if (!/\d+/.test(id)) {
articleDiv.innerHTML = "<p>Error: Invalid article id in params.</p>";
return;
}
const article = await requestArticle(id);
document.title = article.title;
const date = new Date(article.date).toLocaleDateString();
articleDiv.innerHTML = `
<h1>${article.title}</h1>
<p><i>${article.author}, ${date}</i></p>
<div id="content">
${article.content}
</div>
`;
}
main();

54
public/reader/style.css Normal file
View File

@ -0,0 +1,54 @@
* {
box-sizing: border-box;
}
:root {
color-scheme: dark;
}
body {
margin: 0;
height: 100vh;
text-align: center;
}
header {
border-bottom: 2px solid;
margin-left: 16px;
margin-right: 16px;
margin-bottom: 16px;
padding: 16px;
}
header h1 {
margin: 0;
}
footer {
padding: 32px;
}
p {
line-height: 1.6em;
}
main {
text-align: left;
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
#content {
margin: auto;
max-width: 600px;
}
#content p {
word-wrap: normal;
}

44
public/script.js Normal file
View File

@ -0,0 +1,44 @@
"use strict";
const articlesDiv = document.getElementById("articles");
async function requestArticles() {
await new Promise((r) => r());
return [
{
id: 0,
title: "Best Practices For Policing Protests",
date: new Date().toISOString(),
author: "Onion Trollage",
preview:
"<p>While police are well trained to shoot unarmed civilians, plant evidence, and file for overtime, dealing with larger-scale events like arresting several hundred college students can be more daunting. The following are the best practices law enforcement should follow when clearing political protests and demonstrations.",
},
{
id: 1,
title:
"Columbia University Gives Students Option To Finish Classes From Prison",
date: new Date().toISOString(),
author: "Onion Trollage",
preview:
"<p>NEW YORK—Emphasizing that it was their only option amid the rampant protests that had erupted on campus, Columbia University announced Monday that it had given students the option to finish classes from prison.",
},
];
}
async function main() {
const articles = await requestArticles();
articlesDiv.innerHTML = articles.map((article) => `
<a href="/reader/?id=${article.id}">
<div class="article">
<h1>${article.title}</h1>
</p><i>${article.author}, ${
new Date(article.date).toLocaleDateString()
}</i></p>
<p>${article.preview.replace(/<\/?p>/g, "")}</p>
</div>
</a>
`).join("");
}
main();

60
public/style.css Normal file
View File

@ -0,0 +1,60 @@
* {
box-sizing: border-box;
}
:root {
color-scheme: dark;
}
body {
margin: 0;
height: 100vh;
text-align: center;
}
header {
border-bottom: 2px solid;
margin-left: 16px;
margin-right: 16px;
margin-bottom: 16px;
padding: 16px;
}
header h1 {
margin: 0;
}
footer {
padding: 32px;
}
p {
line-height: 1.6em;
}
a {
color: unset;
text-decoration: none;
}
#articles {
text-align: left;
max-width: 1500px;
margin-left: auto;
margin-right: auto;
}
.article {
border-top: 2px solid;
border-bottom: 2px solid;
margin: 16px;
padding-left: 32px;
padding-right: 32px;
}
.article:hover {
cursor: pointer;
}