Add Svelte #3

Merged
Trivernis merged 5 commits from feature/svelte into main 1 year ago

@ -0,0 +1,5 @@
node_modules
.git
build
Containerfile
.svelte-kit

@ -0,0 +1,13 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

@ -0,0 +1,30 @@
module.exports = {
root: true,
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:svelte/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020,
extraFileExtensions: ['.svelte']
},
env: {
browser: true,
es2017: true,
node: true
},
overrides: [
{
files: ['*.svelte'],
parser: 'svelte-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser'
}
}
]
};

10
.gitignore vendored

@ -0,0 +1,10 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

@ -0,0 +1,2 @@
engine-strict=true
resolution-mode=highest

@ -0,0 +1,13 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

@ -0,0 +1,9 @@
{
"useTabs": true,
"singleQuote": false,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

@ -0,0 +1,27 @@
FROM docker.io/node:19.5.0-alpine AS base
WORKDIR /app
COPY package.json package-lock.json ./
FROM base AS builder
# install dependencies
RUN npm ci
# Copy all local files into the image.
COPY . .
RUN npm run build
###
# Only copy over the Node pieces we need
# ~> Saves 35MB
###
FROM base
COPY --from=builder /app/build .
RUN npm ci --omit dev
ENV HOST=0.0.0.0
EXPOSE 3000
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.

@ -1,62 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>No Chromium</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon" sizes="any" />
</head>
<body>
<header class="banner">
<h1>No Chromium</h1>
<h2>Do not use Chromium</h2>
<h3>Use a different web browser</h3>
</header>
<main class="content">
<h2>What is Chromium?</h2>
<p>
Chromium is a web browser developed by Google. Many modern web browsers
use its codebase and extend upon it, for example:
</p>
<ul>
<li>Google Chrome</li>
<li>Opera</li>
<li>Microsoft Edge</li>
<li>Brave Browser</li>
<li>
<a href="https://en.wikipedia.org/wiki/Chromium_(web_browser)">
And many others
</a>
</li>
</ul>
<h2>Why is this a bad thing?</h2>
<p>
Chromium based browsers dominate the market. This means that any changes
Google makes to the Chromium code base are also present in the browsers
that build on it. As Chromium based browsers are the majority, websites
have to adapt. This also forces non chromium browsers like Firefox to
implement these changes. This gives Google the power to steer the web in
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
<a href="https://www.mozilla.org/en-US/firefox/">Firefox</a> or, even
better, <a href="https://librewolf.net/">LibreWolf</a>
</p>
</main>
</body>
</html>

@ -0,0 +1,37 @@
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
gzip on;
server {
listen 80;
listen [::]:80;
server_name localhost;
index index.html index.htm;
location / {
root /usr/share/nginx/html;
try_files $uri$args $uri$args/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}

3843
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,38 @@
{
"name": "no-chromium",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ."
},
"devDependencies": {
"@sveltejs/kit": "^1.20.4",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"autoprefixer": "^10.4.14",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0",
"postcss": "^8.4.27",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"tailwindcss": "^3.3.3",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^4.4.2"
},
"type": "module",
"dependencies": {
"@sveltejs/adapter-node": "^1.3.1",
"detect-browser": "^5.3.0",
"sass": "^1.64.1"
}
}

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>No Chromium</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon" sizes="any" />
</head>
<body>
<div class="container">
<div class="banner">
<h1>No Chromium</h1>
<h2>This website does not accept chromium based browsers</h2>
<h3>Use a different web browser</h3>
<h4><a href="index.html">Why?</a></h4>
</div>
</div>
</body>
</html>

@ -8,6 +8,8 @@ html {
} }
body { body {
font-family: Noto Sans, sans serif;
min-height: 1vh;
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
} }
@ -17,12 +19,14 @@ p {
} }
.banner { .banner {
margin: 10%;
font-size: 2em; font-size: 2em;
margin: 0 auto 4rem; margin: 0 auto 4rem;
text-align: center; text-align: center;
} }
.content { .content {
margin: 0 10%;
padding: 0 1rem; padding: 0 1rem;
margin: 0 auto; margin: 0 auto;
max-width: 800px; max-width: 800px;
@ -32,10 +36,7 @@ p {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%;
height: 100vh; height: 100vh;
height: 100dvh; height: 100dvh;
} }
.centered {
margin: auto;
}

12
src/app.d.ts vendored

@ -0,0 +1,12 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface Platform {}
}
}
export {};

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>No Chromium</title>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

@ -0,0 +1,18 @@
import {detect} from "detect-browser";
const browser = detect();
export function getBrowserName(): string {
return `${ browser.name[0].toUpperCase() }${ browser.name.substring(1) }`;
}
export function isChromium(): boolean {
switch (browser.name) {
case "chrome":
case "opera":
case "edge":
return true;
default:
return false;
}
}

@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

@ -0,0 +1,14 @@
<script>
import "../app.css";
import Footer from "./footer.svelte";
</script>
<style lang="scss">
.main {
margin-bottom: 2.6em;
}
</style>
<div class="main">
<slot/>
</div>
<Footer/>

@ -0,0 +1,56 @@
<script>
import Footer from "./footer.svelte";
</script>
<header class="banner">
<h1>No Chromium</h1>
<h2>Do not use Chromium</h2>
<h3>Use a different web browser</h3>
</header>
<main class="content">
<h2>What is Chromium?</h2>
<p>
Chromium is a web browser developed by Google. Many modern web browsers
use its codebase and extend upon it, for example:
</p>
<ul>
<li>Google Chrome</li>
<li>Opera</li>
<li>Microsoft Edge</li>
<li>Brave Browser</li>
</ul>
<a href="https://en.wikipedia.org/wiki/Chromium_(web_browser)" aria-label="Link to the Chromium Wikipedia page.">
More Information
</a>
<h2>Why is this a bad thing?</h2>
<p>
Chromium based browsers dominate the market. This means that any changes
Google makes to the Chromium code base are also present in the browsers
that build on it. As Chromium based browsers are the majority, websites
have to adapt. This also forces non chromium browsers like Firefox to
implement these changes. This gives Google the power to steer the web in
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
<a href="https://www.mozilla.org/en-US/firefox/" aria-label="Link to the Firefox download page.">
Firefox
</a>
or, even
better,
<a href="https://librewolf.net/" aria-label="Link to the LibreWolf website.">
LibreWolf
</a>.
</p>
</main>

@ -0,0 +1,20 @@
<header class="banner">
<a href="/">Back</a>
<h1>Credits</h1>
</header>
<main class="content">
<h2><a href="https://tech.lgbt/@sara">Sara</a></h2>
<ul>
<li>Icons</li>
</ul>
<h2><a href="https://tech.lgbt/@punishedbernadetta">Punished Bernadetta</a></h2>
<ul>
<li>Style Improvements</li>
</ul>
<h2><a href="https://social.funkyfish.cool/@trivernis">Trivernis</a></h2>
<ul>
<li>Repository Owner</li>
</ul>
</main>

@ -0,0 +1,35 @@
<style lang="scss">
.footer {
height: 2.5em;
width: 100%;
position: fixed;
bottom: 0;
background-color: #FDF;
.footer-content {
display: block;
position: relative;
margin: 0.5em 1em;
width: calc(100% - 2em);
height: calc(100% - 1em);
* {
position: relative;
margin: auto;
}
.left {
float: left;
}
.right {
float: right;
}
}
}
</style>
<footer class="footer">
<div class="footer-content">
<a class="left" href="/credits">Credits</a>
<a class="right" href="https://git.trivernis.net/Trivernis/no-chromium">Source</a>
</div>
</footer>

@ -0,0 +1,42 @@
<script>
import { getBrowserName, isChromium } from "$lib/browser";
// import { browser } from "$app/environment";
import { onMount } from "svelte";
export let browserName;
export let chromium = true;
onMount(() => {
browserName = getBrowserName();
chromium = isChromium();
});
</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="banner">
{#if browserName }
<center>
{#if chromium}
<h1>{browserName} is not supported by this Website</h1>
<h2>Use a different web browser</h2>
<h4><a href="/">Why?</a></h4>
{:else }
<h1>Congrats, you're not using Chromium</h1>
<h2>So why are you here?</h2>
<h4><a href="/">More Info</a></h4>
{/if }
</center>
{/if }
</div>
</div>

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

@ -0,0 +1,18 @@
import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;

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

@ -0,0 +1,17 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
}

@ -0,0 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()]
});
Loading…
Cancel
Save