Compare commits

..

No commits in common. 'main' and 'feature/svelte' have entirely different histories.

@ -18,11 +18,10 @@ RUN npm run build
FROM base FROM base
COPY --from=builder /app/build . COPY --from=builder /app/build .
COPY ./server.js .
RUN npm ci --omit dev RUN npm ci --omit dev
ENV HOST=0.0.0.0 ENV HOST=0.0.0.0
EXPOSE 3000 EXPOSE 3000
CMD ["node", "server.js"] CMD ["node", "."]

@ -1,11 +1,38 @@
# No Chromium # create-svelte
This is the source code for [no-chromium.org](https://no-chromium.org/). Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
## Contributing ## Creating a project
Yes. Read [this](./CODE_OF_CONDUCT.md). If you're seeing this, you've probably already done this step. Congrats!
## License ```bash
# create a new project in the current directory
npm create svelte@latest
CNPLv7+ # create a new project in my-app
npm create svelte@latest my-app
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

769
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -32,11 +32,7 @@
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@sveltejs/adapter-node": "^1.3.1", "@sveltejs/adapter-node": "^1.3.1",
"@tailwindcss/typography": "^0.5.9",
"cors": "^2.8.5",
"detect-browser": "^5.3.0", "detect-browser": "^5.3.0",
"express": "^4.18.2",
"fetch-opengraph": "^1.0.36",
"sass": "^1.64.1" "sass": "^1.64.1"
} }
} }

@ -1,14 +0,0 @@
import { handler } from "./handler.js";
import express from "express";
import cors from 'cors';
const app = express();
app.use("/popup/", cors());
// let SvelteKit handle everything else, including serving prerendered pages and static assets
app.use(handler);
app.listen(3000, () => {
console.log("listening on port 3000");
});

@ -1,9 +1,42 @@
@tailwind base; html {
@tailwind components; font-family: Noto Sans, sans-serif;
@tailwind utilities; box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body { body {
font-family: Noto Sans, sans serif;
min-height: 1vh; min-height: 1vh;
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
}
p {
line-height: 1.5rem;
}
.banner {
margin: 10%;
font-size: 2em;
margin: 0 auto 4rem;
text-align: center;
}
.content {
margin: 0 10%;
padding: 0 1rem;
margin: 0 auto;
max-width: 800px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
height: 100vh;
height: 100dvh;
} }

@ -1,13 +1,13 @@
<script> <script>
import Article from "./article.svelte"; import Footer from "./footer.svelte";
</script> </script>
<header class="container mx-auto mb-20 mt-40 text-center font-bold"> <header class="banner">
<h1 class="leading-normal text-7xl">No Chromium</h1> <h1>No Chromium</h1>
<h3 class="leading-normal text-5xl">Use a different web browser</h3> <h2>Do not use Chromium</h2>
<h3>Use a different web browser</h3>
</header> </header>
<main class="content">
<main class="w-10/12 md:w-2/3 xl:w-1/2 mx-auto prose max-w-none">
<h2>What is Chromium?</h2> <h2>What is Chromium?</h2>
<p> <p>
@ -34,6 +34,13 @@
a direction they benefit from the most. a direction they benefit from the most.
</p> </p>
<h2>Examples</h2>
<ul>
<li>Web Environment Integrity</li>
<li>Widevine</li>
<li style="color: red">TODO...</li>
</ul>
<h2>What can I do</h2> <h2>What can I do</h2>
<p> <p>
You should use alternative browsers like You should use alternative browsers like
@ -46,67 +53,4 @@
LibreWolf LibreWolf
</a>. </a>.
</p> </p>
<hr>
<h2>Examples</h2>
<section>
<h3>Web Environment Integrity</h3>
<p>
The Web Environment Integrity spec is a proposal by Google engineers
to add a mechanism to browsers that verifies them and the platform it's running on
to be trusted by third party (attester). This is often compared as being
<abbr title="Digital Rights Management">DRM</abbr> for Websites.
<br><br>
As an example Google Play is named as an attester for Android.
Of course this would enable Google to mark their own
Browser, Google Chrome, as trusted. Furthermore Google would be able to discourage the
use of Browsers that harm their business model (selling ads) like Firefox, a browser
that has a rich ecosystem of ad blockers and tracker protection.
<br><br>
On Windows Systems, Microsoft will likely play the role of the attester and
encourage the use of Edge. Which third would attest for a Browser to be trusted on
Linux distributions is not clear yet. There might be different attesters
being used in different distributions. More niche distros might have trouble
finding a third party to attest for their platform.
<br><br>
By implementing this spec Google is also forcing other browsers to do the same.
Browsers that don't implement the spec would simply not be trusted by websites
for demand the browser to proof it is trusted.
</p>
<details>
<summary>More Info</summary>
<ul>
<li>
<Article
url="https://vivaldi.com/blog/googles-new-dangerous-web-environment-integrity-spec/"
author="Julien Picalausa"
title = "Unpacking Googles new &quot;dangerous&quot; Web-Environment-Integrity specification"
/>
</li>
<li>
<Article
url="https://www.theregister.com/2023/07/25/google_web_environment_integrity/"
author="Thomas Claburn"
title="Google's next big idea for browser security looks like another freedom grab to some"
/>
</li>
<li>
<Article
url="https://github.com/RupertBenWiser/Web-Environment-Integrity/blob/main/explainer.md"
author= "Ben Wiser (Google), Borbala Benko (Google), Philipp Pfeiffenberger (Google), Sergey Kataev (Google)"
title="Web Environment Integrity Explainer"
/>
</li>
</ul>
</details>
</section>
<section>
<h3>FLOC</h3>
</section>
<section>
<h3>Widevine</h3>
</section>
</main> </main>

@ -1 +0,0 @@
export const prerender = true;

@ -1,13 +0,0 @@
<script lang="ts">
export let url: string;
export let title: string;
export let author: string;
</script>
<a href="{ url }">
<span class="author">{ author }</span>
-
<i class="title">{ title }</i>
</a>

@ -1,20 +1,20 @@
<header class="w-10/12 md:w-2/3 xl:w-1/2 mx-auto mb-20 prose"> <header class="banner">
<div class="mb-10 mt-10"><a href="/">Back</a></div> <a href="/">Back</a>
<h1>Credits</h1> <h1>Credits</h1>
</header> </header>
<main class="w-10/12 md:w-2/3 xl:w-1/2 mx-auto prose"> <main class="content">
<h2><a href="https://tech.lgbt/@sara">Sara</a></h2> <h2><a href="https://tech.lgbt/@sara">Sara</a></h2>
<ul> <ul>
<li>Icons</li> <li>Icons</li>
</ul> </ul>
<h2><a href="https://tech.lgbt/@punishedbernadetta">Punished Bernadetta</a></h2> <h2><a href="https://tech.lgbt/@punishedbernadetta">Punished Bernadetta</a></h2>
<ul> <ul>
<li>Style Improvements</li> <li>Style Improvements</li>
</ul> </ul>
<h2><a href="https://social.funkyfish.cool/@trivernis">Trivernis</a></h2> <h2><a href="https://social.funkyfish.cool/@trivernis">Trivernis</a></h2>
<ul> <ul>
<li>Repository Owner</li> <li>Repository Owner</li>
</ul> </ul>
</main> </main>

@ -1 +0,0 @@
export const prerender = true;

@ -23,14 +23,6 @@
.right { .right {
float: right; float: right;
} }
a {
text-decoration: underline;
color: blue;
}
a:visited {
color: purple;
}
} }
} }
</style> </style>

@ -1,78 +0,0 @@
<div id="no-chromium-head">
<style lang="scss">
#no-chromium-popup {
position: fixed;
display: flex;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.125);
font-family: Noto Sans, sans serif;
color: white;
z-index: 10;
.nc-popup-inner {
display: block;
position: relative;
margin: auto;
background-color: #FF6F00;
padding: 1em;
border-radius: 5px;
button {
border-style: none;
font-weight: bold;
background-colour: white;
font-size: 2em;
width: 100%;
cursor: pointer;
margin: 3px;
color: white;
a {
text-decoration: none;
color: white;
}
transition-duration: 0.1s;
&.nc-no {
background-color: #800;
&:hover {
background-color: #B00;
}
}
&.nc-ok {
background-color: #080;
&:hover {
background-color: #0B0;
}
}
&:hover {
}
}
}
}
</style>
</div>
<div id="no-chromium-body">
<div id="no-chromium-popup" style="display: none">
<div class="nc-popup-inner">
<center><h1>Stop using Chromium based Web Browsers</h1></center>
<a href="https://no-chromium.org/redirect"><button class="nc-no">No</button></a>
<button class="nc-ok" id="no-chromium-hide-button">Ok</button>
</div>
</div>
</div>

@ -1,9 +1,9 @@
<script lang="ts"> <script>
import { getBrowserName, isChromium } from "$lib/browser"; import { getBrowserName, isChromium } from "$lib/browser";
// import { browser } from "$app/environment"; // import { browser } from "$app/environment";
import { onMount } from "svelte"; import { onMount } from "svelte";
export let browserName: string; export let browserName;
export let chromium = true; export let chromium = true;
onMount(() => { onMount(() => {
@ -12,23 +12,29 @@
}); });
</script> </script>
<style lang="scss">
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
height: 100vh;
height: 100dvh;
}
</style>
<div class="container flex mx-auto h-screen"> <div class="container">
<div class="m-auto"> <div class="banner">
{#if browserName } {#if browserName }
<center> <center>
{#if chromium} {#if chromium}
<h1 class="leading-normal lg:leading-normal text-4xl lg:text-7xl">{ browserName } is not supported by this Website</h1> <h1>{browserName} is not supported by this Website</h1>
<h2 class="leading-normal lg:leading-normal text-3xl lg:text-6xl">Use a different web browser</h2> <h2>Use a different web browser</h2>
<h4 class="leading-normal lg:leading-normal text-2xl lg:text-4xl"> <h4><a href="/">Why?</a></h4>
<a class="underline text-blue visited:text-purple-600" href="/">Why?</a>
</h4>
{:else } {:else }
<h1 class="leading-normal lg:leading-normal text-4xl lg:text-7xl">Congrats, you're not using Chromium</h1> <h1>Congrats, you're not using Chromium</h1>
<h2 class="leading-normal lg:leading-normal text-3xl lg:text-6xl">So why are you here?</h2> <h2>So why are you here?</h2>
<h4 class="leading-normal lg:leading-normal text-2xl lg:text-4xl"> <h4><a href="/">More Info</a></h4>
<a class="underline text-blue visited:text-purple-600" href="/">More Info</a>
</h4>
{/if } {/if }
</center> </center>
{/if } {/if }

@ -1,26 +0,0 @@
async function showNoChromiumPopup() {
if (navigator.userAgent.includes("Chrome") && localStorage.getItem("no-chromium-popup-shown") != "1") {
const divPage = document.createElement("div");
const response = await fetch("https://no-chromium.org/popup/");
divPage.innerHTML = await response.text();
for (const child of divPage.querySelectorAll("#no-chromium-head > *")) {
document.head.appendChild(child);
}
for (const child of divPage.querySelectorAll("#no-chromium-body > *")) {
document.body.appendChild(child);
}
document.querySelector("#no-chromium-popup").style = "z-index: 9999;";
document.querySelector("#no-chromium-hide-button").addEventListener("click", hideNoChromiumPopup);
}
}
function hideNoChromiumPopup() {
document.querySelector("#no-chromium-popup").remove();
localStorage.setItem("no-chromium-popup-shown", "1");
}
showNoChromiumPopup();

@ -1,6 +0,0 @@
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="/popup.js"></script>
</body>
</html>

@ -1,13 +1,9 @@
const plugin = require("tailwindcss/plugin");
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: ["./src/**/*.{htm,js,svelte,ts}"], content: ["./src/**/*.{htm,js,svelte,ts}"],
theme: { theme: {
extend: {}, extend: {},
}, },
plugins: [ plugins: [],
require('@tailwindcss/typography'),
],
} }

Loading…
Cancel
Save