Merge pull request 'Remove w-screen from container' (#15) from punishedbernadetta-patch-1 into main

Reviewed-on: Trivernis/no-chromium#15

Containerfile

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

README.md

@@ -1,38 +1,11 @@
-# create-svelte
+# No Chromium
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+This is the source code for [no-chromium.org](https://no-chromium.org/).
 
-## Creating a project
+## Contributing
 
-If you're seeing this, you've probably already done this step. Congrats!
+Yes. Read [this](./CODE_OF_CONDUCT.md).
 
-```bash
+## License
-# create a new project in the current directory
-npm create svelte@latest
 
-# create a new project in my-app
+CNPLv7+
-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.

package.json

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

server.js

@@ -0,0 +1,14 @@
+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");
+});

src/app.css

@@ -1,42 +1,9 @@
-html {
+@tailwind base;
-  font-family: Noto Sans, sans-serif;
+@tailwind components;
-  box-sizing: border-box;
+@tailwind utilities;
-}
-
-*, *:before, *:after {
-  box-sizing: inherit;
-}
 
 body {
-  font-family: Noto Sans, sans serif;
   min-height: 1vh;
   min-height: 100vh;
   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;
-}

src/routes/+page.svelte

@@ -1,13 +1,13 @@
 <script>
-  import Footer from "./footer.svelte";
+  import Article from "./article.svelte";
 </script>
 
-<header class="banner">
+<header class="container mx-auto mb-20 mt-40 text-center font-bold">
-  <h1>No Chromium</h1>
+  <h1 class="leading-normal text-7xl">No Chromium</h1>
-  <h2>Do not use Chromium</h2>
+  <h3 class="leading-normal text-5xl">Use a different web browser</h3>
-  <h3>Use a different web browser</h3>
 </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>
   <p>
@@ -34,13 +34,6 @@
     a direction they benefit from the most. 
   </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>
   <p>
     You should use alternative browsers like
@@ -53,4 +46,67 @@
       LibreWolf
     </a>.
   </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 Google’s 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>

src/routes/+page.ts

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

src/routes/article.svelte

@@ -0,0 +1,13 @@
+<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>

src/routes/credits/+page.svelte

@@ -1,8 +1,8 @@
-<header class="banner">
+<header class="w-10/12 md:w-2/3 xl:w-1/2 mx-auto mb-20 prose">
-  <a href="/">Back</a>
+  <div class="mb-10 mt-10"><a href="/">Back</a></div>
   <h1>Credits</h1>
 </header>
-<main class="content">
+<main class="w-10/12 md:w-2/3 xl:w-1/2 mx-auto prose">
   <h2><a href="https://tech.lgbt/@sara">Sara</a></h2>
   <ul>
     <li>Icons</li>

src/routes/credits/+page.ts

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

src/routes/footer.svelte

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

src/routes/popup/+page.svelte

@@ -0,0 +1,78 @@
+<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>

src/routes/redirect/+page.svelte

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

static/popup.js

@@ -0,0 +1,26 @@
+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();

static/test.html

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

tailwind.config.js

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