Добавил продолжение статьи

2024-10-02 23:33:04 +03:00
parent d14efb7aae
commit 50954731fd
6 changed files with 183 additions and 8 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
 				"@sveltejs/vite-plugin-svelte": "^3.0.0",
 				"@types/eslint": "^9.6.0",
 				"autoprefixer": "^10.4.20",
-				"eslint": "^9.0.0",
+				"eslint": "^9.11.1",
 				"eslint-plugin-svelte": "^2.36.0",
 				"globals": "^15.0.0",
 				"mdsvex": "^0.12.3",
@@ -82,6 +82,61 @@
 				"url": "https://github.com/sponsors/antfu"
 			}
 		},
+		"node_modules/@babel/helper-string-parser": {
+			"version": "7.24.8",
+			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+			"integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+			"dev": true,
+			"optional": true,
+			"peer": true,
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-validator-identifier": {
+			"version": "7.24.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+			"integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+			"dev": true,
+			"optional": true,
+			"peer": true,
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/parser": {
+			"version": "7.25.6",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz",
+			"integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
+			"dev": true,
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"@babel/types": "^7.25.6"
+			},
+			"bin": {
+				"parser": "bin/babel-parser.js"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@babel/types": {
+			"version": "7.25.6",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
+			"integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
+			"dev": true,
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"@babel/helper-string-parser": "^7.24.8",
+				"@babel/helper-validator-identifier": "^7.24.7",
+				"to-fast-properties": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
 		"node_modules/@emnapi/runtime": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.2.0.tgz",
@@ -1820,6 +1875,88 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
+		"node_modules/@vue/compiler-core": {
+			"version": "3.5.10",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.10.tgz",
+			"integrity": "sha512-iXWlk+Cg/ag7gLvY0SfVucU8Kh2CjysYZjhhP70w9qI4MvSox4frrP+vDGvtQuzIcgD8+sxM6lZvCtdxGunTAA==",
+			"dev": true,
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"@babel/parser": "^7.25.3",
+				"@vue/shared": "3.5.10",
+				"entities": "^4.5.0",
+				"estree-walker": "^2.0.2",
+				"source-map-js": "^1.2.0"
+			}
+		},
+		"node_modules/@vue/compiler-core/node_modules/estree-walker": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+			"dev": true,
+			"optional": true,
+			"peer": true
+		},
+		"node_modules/@vue/compiler-dom": {
+			"version": "3.5.10",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.10.tgz",
+			"integrity": "sha512-DyxHC6qPcktwYGKOIy3XqnHRrrXyWR2u91AjP+nLkADko380srsC2DC3s7Y1Rk6YfOlxOlvEQKa9XXmLI+W4ZA==",
+			"dev": true,
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"@vue/compiler-core": "3.5.10",
+				"@vue/shared": "3.5.10"
+			}
+		},
+		"node_modules/@vue/compiler-sfc": {
+			"version": "3.5.10",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.10.tgz",
+			"integrity": "sha512-to8E1BgpakV7224ZCm8gz1ZRSyjNCAWEplwFMWKlzCdP9DkMKhRRwt0WkCjY7jkzi/Vz3xgbpeig5Pnbly4Tow==",
+			"dev": true,
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"@babel/parser": "^7.25.3",
+				"@vue/compiler-core": "3.5.10",
+				"@vue/compiler-dom": "3.5.10",
+				"@vue/compiler-ssr": "3.5.10",
+				"@vue/shared": "3.5.10",
+				"estree-walker": "^2.0.2",
+				"magic-string": "^0.30.11",
+				"postcss": "^8.4.47",
+				"source-map-js": "^1.2.0"
+			}
+		},
+		"node_modules/@vue/compiler-sfc/node_modules/estree-walker": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+			"dev": true,
+			"optional": true,
+			"peer": true
+		},
+		"node_modules/@vue/compiler-ssr": {
+			"version": "3.5.10",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.10.tgz",
+			"integrity": "sha512-hxP4Y3KImqdtyUKXDRSxKSRkSm1H9fCvhojEYrnaoWhE4w/y8vwWhnosJoPPe2AXm5sU7CSbYYAgkt2ZPhDz+A==",
+			"dev": true,
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"@vue/compiler-dom": "3.5.10",
+				"@vue/shared": "3.5.10"
+			}
+		},
+		"node_modules/@vue/shared": {
+			"version": "3.5.10",
+			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.10.tgz",
+			"integrity": "sha512-VkkBhU97Ki+XJ0xvl4C9YJsIZ2uIlQ7HqPpZOS3m9VCvmROPaChZU6DexdMJqvz9tbgG+4EtFVrSuailUq5KGQ==",
+			"dev": true,
+			"optional": true,
+			"peer": true
+		},
 		"node_modules/acorn": {
 			"version": "8.12.1",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -2337,6 +2474,20 @@
 			"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
 			"dev": true
 		},
+		"node_modules/entities": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"dev": true,
+			"optional": true,
+			"peer": true,
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
 		"node_modules/esbuild": {
 			"version": "0.21.5",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -4503,6 +4654,17 @@
 			"integrity": "sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==",
 			"dev": true
 		},
+		"node_modules/to-fast-properties": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+			"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+			"dev": true,
+			"optional": true,
+			"peer": true,
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/eslint": "^9.6.0",
 		"autoprefixer": "^10.4.20",
-		"eslint": "^9.0.0",
+		"eslint": "^9.11.1",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
 		"mdsvex": "^0.12.3",
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -35,9 +35,10 @@
 </script>

 <nav
-  class="nav p-4 md:px-8 fixed top-0 w-full bg-slate-950 z-50 flex justify-between items-center"
+  class="nav p-4 md:px-8 fixed top-0 w-full bg-slate-950 z-50 flex items-center gap-16"
  class:sticky={!homepage}
  class:!border-b-slate-800={!homepage}
+  class:justify-between={homepage}
  bind:this={nav}
 >
  <div
--- a/src/routes/blog/+layout.svelte
+++ b/src/routes/blog/+layout.svelte
@@ -15,15 +15,15 @@ import Navbar from "$lib/components/Navbar.svelte";
 }

 :global(h2) {
-  @apply text-3xl my-4;
+  @apply text-3xl my-5;
 }

 :global(h3) {
-  @apply text-2xl my-2;
+  @apply text-2xl my-4;
 }

 :global(h4) {
-  @apply text-xl my-2;
+  @apply text-xl my-3;
 }

 :global(pre, code) {
--- a/src/routes/blog/html-in-css/+page.svx
+++ b/src/routes/blog/html-in-css/+page.svx
@@ -262,7 +262,7 @@ script#my-script[src="/main.js"] {}

 Возможно, некоторые уже захотели переписать свой продакшн-сайт на HTML in CSS, но мне жаль вас огорчать -- на самом деле это фреймворк-шутка.

-Одним вечером мне стало интересно, как парсится CSS и как выглядит его структура. В процессе изучения пришла в голову идея создать свой фреймворк. Как говорится, закрепил теорию практикой. Кстати, фреймворк занимает около 120 строк неубористого кода.
+Одним вечером мне стало интересно, как парсится CSS и как выглядит его структура. В процессе изучения пришла в голову идея создать свой фреймворк. Занимает он, кстати, около 120 строк неубористого кода.

 <div class="py-4 flex gap-4">
  <a
@@ -278,3 +278,12 @@ script#my-script[src="/main.js"] {}
    Обсудить на Хабре
  </a>
 </div>
+
+## UPD: 2024-10-02
+
+У проекта появился преемник в лице <a href="https://github.com/Ulyanov-programmer/css2html" target="_blank">css2html</a>.
+
+Автор отнесся к идее несколько серьезнее и превратил проект во что-то, что можно и тайком юзнуть в SSR, вы, например, не можете быть уверенны,
+что эта страница не написана на css2html.
+
+Подробности в <a href="https://habr.com/ru/articles/847542/" target="_blank">статье автора проекта</a>.
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,10 @@
 		"sourceMap": true,
 		"strict": true,
 		"moduleResolution": "bundler"
-	}
+	},
+	"include": [
+		"src/**/*.svx"
+	]
 	// 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
 	//