new web: init proejct

new-web/.gitignore

@@ -0,0 +1,21 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

new-web/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

new-web/.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

new-web/.prettierrc

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

new-web/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# 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.

new-web/components.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "default",
+	"tailwind": {
+		"config": "tailwind.config.js",
+		"css": "src/app.css",
+		"baseColor": "zinc"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils"
+	},
+	"typescript": true
+}

new-web/package.json

@@ -0,0 +1,39 @@
+{
+	"name": "new-web",
+	"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 --check .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"autoprefixer": "^10.4.20",
+		"clsx": "^2.1.1",
+		"lucide-svelte": "^0.452.0",
+		"mode-watcher": "^0.4.1",
+		"postcss": "^8.4.47",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"svelte": "^4.2.7",
+		"svelte-check": "^4.0.0",
+		"svelte-sonner": "^0.3.28",
+		"tailwind-merge": "^2.5.4",
+		"tailwind-variants": "^0.2.1",
+		"tailwindcss": "^3.4.13",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.3"
+	},
+	"type": "module",
+	"dependencies": {
+		"@iconify/svelte": "^4.0.2",
+		"bits-ui": "^0.21.16"
+	}
+}

new-web/postcss.config.js

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

new-web/src/app.css

@@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 240 10% 3.9%;
+
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
+
+		--popover: 0 0% 100%;
+		--popover-foreground: 240 10% 3.9%;
+
+		--card: 0 0% 100%;
+		--card-foreground: 240 10% 3.9%;
+
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
+
+		--primary: 142, 71%, 45%;
+		--primary-foreground: 0 0% 98%;
+
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
+
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: 240 5.9% 10%;
+
+		--destructive: 0 72.2% 50.6%;
+		--destructive-foreground: 0 0% 98%;
+
+		--ring: 240 10% 3.9%;
+
+		--radius: 0.5rem;
+	}
+
+	.dark {
+		--background: 240 10% 3.9%;
+		--foreground: 0 0% 98%;
+
+		--muted: 240 3.7% 15.9%;
+		--muted-foreground: 240 5% 64.9%;
+
+		--popover: 240 10% 3.9%;
+		--popover-foreground: 0 0% 98%;
+
+		--card: 240 10% 3.9%;
+		--card-foreground: 0 0% 98%;
+
+		--border: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
+
+		--primary: 142, 71%, 45%;
+		--primary-foreground: 240 5.9% 10%;
+
+		--secondary: 240 3.7% 15.9%;
+		--secondary-foreground: 0 0% 98%;
+
+		--accent: 240 3.7% 15.9%;
+		--accent-foreground: 0 0% 98%;
+
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+
+		--ring: 240 4.9% 83.9%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

new-web/src/app.d.ts

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

new-web/src/app.html

@@ -0,0 +1,22 @@
+<!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" />
+
+		<!-- Source: https://github.com/WillKre/svelte-theme-switch/blob/main/src/app.html -->
+		<!-- Check & apply theme here to avoid FOUC -->
+		<script>
+			localStorage.theme === 'dark' ||
+			(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+				? document.documentElement.classList.add('dark')
+				: document.documentElement.classList.remove('dark');
+		</script>
+
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

new-web/src/routes/+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import '../app.css';
+	import { Toaster } from '$lib/components/ui/sonner';
+</script>
+
+<Toaster />
+<slot />

new-web/src/routes/+page.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import Header from '$lib/elements/Header.svelte';
+	import UrlBox from '$lib/elements/UrlBox.svelte';
+
+	function generateRandomParagraphs(count: number): string[] {
+		const subjects = [
+			'Svelte',
+			'SvelteKit',
+			'web development',
+			'JavaScript',
+			'TypeScript',
+			'frontend',
+			'backend',
+			'full-stack'
+		];
+		const verbs = [
+			'explore',
+			'learn about',
+			'discover',
+			'master',
+			'understand',
+			'dive into',
+			'experiment with',
+			'practice'
+		];
+		const objects = [
+			'documentation',
+			'tutorials',
+			'examples',
+			'projects',
+			'community',
+			'best practices',
+			'tips and tricks',
+			'advanced concepts'
+		];
+
+		return Array.from({ length: count }, () => {
+			const subject = subjects[Math.floor(Math.random() * subjects.length)];
+			const verb = verbs[Math.floor(Math.random() * verbs.length)];
+			const object = objects[Math.floor(Math.random() * objects.length)];
+			return `Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to ${verb} ${subject} ${object} and enhance your development skills.`;
+		});
+	}
+
+	const randomParagraphs = generateRandomParagraphs(1001);
+</script>
+
+<head>
+	<title>Freedium - Your paywall breakthrough for Medium!</title>
+</head>
+
+<Header />
+<UrlBox />
+{#each randomParagraphs as paragraph}
+	<p>{@html paragraph}</p>
+{/each}

new-web/svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @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;

new-web/tailwind.config.js

@@ -0,0 +1,64 @@
+import { fontFamily } from 'tailwindcss/defaultTheme';
+
+/** @type {import('tailwindcss').Config} */
+const config = {
+	darkMode: ['class'],
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+	safelist: ['dark'],
+	theme: {
+		container: {
+			center: true,
+			padding: '2rem',
+			screens: {
+				'2xl': '1400px'
+			}
+		},
+		extend: {
+			colors: {
+				border: 'hsla(var(--border))',
+				input: 'hsla(var(--input))',
+				ring: 'hsla(var(--ring))',
+				background: 'hsla(var(--background))',
+				foreground: 'hsla(var(--foreground))',
+				primary: {
+					DEFAULT: 'hsla(var(--primary))',
+					foreground: 'hsla(var(--primary-foreground))'
+				},
+				secondary: {
+					DEFAULT: 'hsla(var(--secondary))',
+					foreground: 'hsla(var(--secondary-foreground))'
+				},
+				destructive: {
+					DEFAULT: 'hsla(var(--destructive))',
+					foreground: 'hsla(var(--destructive-foreground))'
+				},
+				muted: {
+					DEFAULT: 'hsla(var(--muted))',
+					foreground: 'hsla(var(--muted-foreground))'
+				},
+				accent: {
+					DEFAULT: 'hsla(var(--accent))',
+					foreground: 'hsla(var(--accent-foreground))'
+				},
+				popover: {
+					DEFAULT: 'hsla(var(--popover))',
+					foreground: 'hsla(var(--popover-foreground))'
+				},
+				card: {
+					DEFAULT: 'hsla(var(--card))',
+					foreground: 'hsla(var(--card-foreground))'
+				}
+			},
+			borderRadius: {
+				lg: 'var(--radius)',
+				md: 'calc(var(--radius) - 2px)',
+				sm: 'calc(var(--radius) - 4px)'
+			},
+			fontFamily: {
+				sans: [...fontFamily.sans]
+			}
+		}
+	}
+};
+
+export default config;

new-web/tsconfig.json

@@ -0,0 +1,28 @@
+{
+	"baseUrl": ".",
+	"extends": "./.svelte-kit/tsconfig.json",
+	"paths": {
+		"$lib": [
+			"./src/lib"
+		],
+		"$lib/*": [
+			"./src/lib/*"
+		]
+	},
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// 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
+}

new-web/vite.config.ts

@@ -0,0 +1,12 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import path from 'path';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	resolve: {
+		alias: {
+			$lib: path.resolve('./src/lib')
+		}
+	}
+});