[PATCH v1 01/13] refactor: migrate: migrate to sveltekit framework

[Muhammad Rizki <kiizuha@gnuweeb.org>]

This commit involves migrating the project to the SvelteKit framework,
replacing the previous use of Vanilla JS.

New files have been added to support the migration:
- src/ (Main app source)
  - routes/ (Page routing)
    - +layout.svelte (Layout UI)
  - app.css (Main app CSS styles)
  - app.d.ts (App types)
  - app.html (Root app web page HTML)
- .eslintignore (ESLint ignore file)
- .eslintrc.cjs (ESLint configuration file)
- .prettierignore (Prettier ignore file for specific files)
- .prettierrc (Prettier configuration file for code formatting)
- svelte.config.js (SvelteKit config file)
- tsconfig.json (TypeScript compiler options configuration file)
- vite.config.ts (Vite configuration file)

Note that these new files were generated based on the recommendation
from the NPM command `npm create svelte@latest`. Although it initially
includes `routes/+page.svelte`, we've chosen not to include it for now,
as we plan to modify `routes/+page.svelte` later in the project.

Additionally, several existing files related to the project structure
have been modified:
- .gitignore
- package.json
- postcss.config.js
- tailwind.config.js

These modifications were necessary, particularly in the
`postcss.config.js` and `tailwind.config.js` files, as they now adhere
to the `"module"` project type and have been updated from
`module.exports` to `export default`. Furthermore,
the `tailwind.config.js` file has been modified to include class name
detection for `"./src/**/*.{html,js,svelte,ts}"` files.

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 .eslintignore             | 13 +++++++++
 .eslintrc.cjs             | 30 ++++++++++++++++++++
 .gitignore                |  6 ++++
 .prettierignore           | 13 +++++++++
 .prettierrc               |  9 ++++++
 package.json              | 41 +++++++++++++++++----------
 postcss.config.js         |  2 +-
 src/app.css               |  3 ++
 src/app.d.ts              | 12 ++++++++
 src/app.html              | 11 ++++++++
 src/routes/+layout.svelte | 58 +++++++++++++++++++++++++++++++++++++++
 svelte.config.js          | 23 ++++++++++++++++
 tailwind.config.js        |  8 +++---
 tsconfig.json             | 13 +++++++++
 vite.config.ts            |  6 ++++
 15 files changed, 228 insertions(+), 20 deletions(-)
 create mode 100644 .eslintignore
 create mode 100644 .eslintrc.cjs
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc
 create mode 100644 src/app.css
 create mode 100644 src/app.d.ts
 create mode 100644 src/app.html
 create mode 100644 src/routes/+layout.svelte
 create mode 100644 svelte.config.js
 create mode 100644 tsconfig.json
 create mode 100644 vite.config.ts

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..3897265
--- /dev/null
+++ b/.eslintignore
@@ -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
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000..fc897e0
--- /dev/null
+++ b/.eslintrc.cjs
@@ -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"
+      }
+    }
+  ]
+};
diff --git a/.gitignore b/.gitignore
index 0c55e77..7ccdc00 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,12 @@
 dist
+.DS_Store
 node_modules
+/build
+/.svelte-kit
+/package
 .env
 .vscode
 pnpm-lock.yaml
 package-lock.json
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..3897265
--- /dev/null
+++ b/.prettierignore
@@ -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
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..c04a571
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-svelte"],
+  "pluginSearchDirs": ["."],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
diff --git a/package.json b/package.json
index 002cdbe..6ea9985 100644
--- a/package.json
+++ b/package.json
@@ -2,23 +2,34 @@
   "name": "gnuweeb-org-web",
   "version": "1.0.0",
   "description": "gnuweeb.org website",
+  "type": "module",
   "scripts": {
-    "watch": "tailwindcss -i ./style.css -o ./dist/style.css --watch && npm run build:static && npm run build:html",
-    "serve": "serve",
-    "dev": "concurrently \"npm run watch\" \"npm run serve\"",
-    "build:css": "tailwindcss -i ./style.css -o ./dist/style.css --minify && postcss ./dist/style.css -o ./dist/style.css --use autoprefixer --no-map",
-    "build:static": "cp -r ./static ./dist",
-    "build:html": "cat ./index.html | sed 's/dist/./' > ./dist/index.html",
-    "build:minify": "node build.js",
-    "build": "npm run build:css && npm run build:static && npm run build:html && npm run build:minify"
+    "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": {
-    "autoprefixer": "^10.4.15",
-    "concurrently": "^8.2.0",
-    "html-minifier-terser": "^7.2.0",
-    "postcss": "^8.4.28",
-    "postcss-cli": "^10.1.0",
-    "serve": "^14.2.0",
-    "tailwindcss": "^3.3.3"
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/adapter-node": "^1.3.1",
+    "@sveltejs/kit": "^1.20.4",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.30.0",
+    "postcss": "^8.4.31",
+    "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"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
index 12a703d..2aa7205 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/app.d.ts b/src/app.d.ts
new file mode 100644
index 0000000..f59b884
--- /dev/null
+++ b/src/app.d.ts
@@ -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 {};
diff --git a/src/app.html b/src/app.html
new file mode 100644
index 0000000..9324995
--- /dev/null
+++ b/src/app.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..21ee482
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,58 @@
+<script>
+  import "../app.css";
+</script>
+
+
+<!-- head element -->
+<svelte:head>
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <meta property="og:title" content="GNU/Weeb" />
+  <meta property="og:description" content="We are working to build community through open source technology." />
+  <meta property="og:image" content="./og-image.png" />
+  <meta property="og:url" content="https://www.gnuweeb.org/" />
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="GNU/Weeb" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="description" content="We are working to build community through open source technology.">
+
+  <title>GNU/Weeb - Home</title>
+
+  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
+  <link rel="canonical" href="https://www.gnuweeb.org/" />
+    <link
+    rel="apple-touch-icon"
+    sizes="180x180"
+    href="./apple-touch-icon.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="32x32"
+    href="./favicon-32x32.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="16x16"
+    href="./favicon-16x16.png"
+  />
+  <link rel="manifest" href="./site.webmanifest" />
+</svelte:head>
+
+
+<div class="w-full px-20 bg-neutral-950 text-neutral-200">
+
+  <!-- main/root element -->
+  <main class="flex justify-center w-full min-h-screen">
+    <!-- slot will contains all contents from all the others +page.svelte inside routes/ dir -->
+    <slot/>
+  </main>
+
+  <!-- footer element -->
+  <footer class="pt-10 p-5">
+    <p class="text-xs opacity-70 mx-auto text-center">
+      &copy; 2023 GNU/Weeb.<br />Licensed under BSD 3-Clause License.
+    </p>
+  </footer>
+
+</div>
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000..18ebc16
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,23 @@
+import adapter from "@sveltejs/adapter-node";
+import { vitePreprocess } from "@sveltejs/kit/vite";
+
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: vitePreprocess(),
+  kit: {
+    adapter: adapter({
+      out: "dist",
+      precompress: true,
+      envPrefix: "",
+      polyfill: true
+    }),
+    alias: {
+      $lib: "src/lib",
+      $types: "src/app.d.ts",
+      $components: "src/lib/components/"
+    }
+  }
+};
+
+export default config;
diff --git a/tailwind.config.js b/tailwind.config.js
index 39fb13d..78f2938 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./*.html"],
+export default {
+  content: ["./src/**/*.{html,js,svelte,ts}"],
   theme: {
-    extend: {},
+    extend: {}
   },
-  plugins: [],
+  plugins: []
 };
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..5c56cee
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..78e127f
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,6 @@
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [sveltekit()]
+});
-- 
Muhammad Rizki