From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on gnuweeb.org X-Spam-Level: X-Spam-Status: No, score=-0.2 required=5.0 tests=ALL_TRUSTED, CONTENT_AFTER_HTML,DKIM_SIGNED,DKIM_VALID,DKIM_VALID_AU,DKIM_VALID_EF, URIBL_BLOCKED,URIBL_DBL_BLOCKED_OPENDNS autolearn=no autolearn_force=no version=3.4.6 DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=gnuweeb.org; s=default; t=1696301536; bh=bquDnPO+dRdRBKPhMZh6Vf4hW8l7eyr9tHlY5urSM3M=; h=From:To:Cc:Subject:Date:In-Reply-To:References; b=pTomDeSWShzRz7tC7SoIU2pnxsULuSzUgM7HKUV6YvoAhTtjgiZ1uTA3r721xXb94 7B4mSFM1CxvaAlGGOwJSjcf60238BSW24o3zRJADXfJUfwXVBeGlfRvfAOen1n0NLs 0GGMIZu6dmdfO2sMTevcFy3HJCV9SOHlbECaGIftjbeFQgJKdE/X6lmIVxmp4zAgXO 0G16F8u1RRizmdI6qDR72iwf6watFDWZMT5XxULxtWR12/b3NGtYU6yjeVLUgA/IUR icqa3YsLwnGqXdXSvWSu6OBBoShLuGBwDR8WdEP6ybAxQRsvOZ8P6esG+lrdUMOwSY fdbpG/FVCKMWw== Received: from localhost.localdomain (unknown [175.158.50.50]) by gnuweeb.org (Postfix) with ESMTPSA id B5E3D24B8B4; Tue, 3 Oct 2023 09:52:14 +0700 (WIB) From: Muhammad Rizki To: Ammar Faizi Cc: Muhammad Rizki , Alviro Iskandar Setiawan , Irvan Malik Azantha , Memet Zx , GNU/Weeb Mailing List Subject: [PATCH v1 01/13] refactor: migrate: migrate to sveltekit framework Date: Tue, 3 Oct 2023 09:51:34 +0700 Message-Id: <20231003025146.1557-2-kiizuha@gnuweeb.org> X-Mailer: git-send-email 2.34.1.windows.1 In-Reply-To: <20231003025146.1557-1-kiizuha@gnuweeb.org> References: <20231003025146.1557-1-kiizuha@gnuweeb.org> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit List-Id: 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 --- .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 @@ + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + 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 @@ + + + + + + + + + + + + + + + + GNU/Weeb - Home + + + + + + + + + + +
+ + +
+ + +
+ + + + +
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