Initial article

package-lock.json

@@ -2361,9 +2361,9 @@
 			}
 		},
 		"node_modules/caniuse-lite": {
-			"version": "1.0.30001663",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001663.tgz",
-			"integrity": "sha512-o9C3X27GLKbLeTYZ6HBOLU1tsAcBZsLis28wrVzddShCS16RujjHp9GDHKZqrB3meE0YjhawvMFsGb/igqiPzA==",
+			"version": "1.0.30001721",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001721.tgz",
+			"integrity": "sha512-cOuvmUVtKrtEaoKiO0rSc29jcjwMwX5tOHDy4MgVFEWiUXj4uBMJkwI8MDySkgXidpMiHUcviogAvFi4pA2hDQ==",
 			"dev": true,
 			"funding": [
 				{

src/lib/en.json

@@ -6,12 +6,8 @@
   "about": {
     "h": "About me",
     "text": "<p>Fullstack developer from St. Petersburg.</p> <p>I&nbsp;like to&nbsp;explore new technologies, find unusual approaches to&nbsp;solving problems and work at&nbsp;the intersection of&nbsp;fields.</p>",
-    "career": "Career:",
     "career_value": "Selectel",
-    "bachelors": "BSIT:",
-    "bachelors_value": "SPBSUT",
-    "masters": "MS:",
-    "masters_value": "ITMO (in progress)"
+    "masters_value": "ITMO"
   },
   "projects": {
     "h": "Projects",

src/lib/getStars.ts

@@ -1,33 +1,5 @@
-export default async function getStarsForUser(username: string) {
-  const userResponse = await request(`/users/${username}`);
-  if (!userResponse || !userResponse.public_repos) {
-    throw new Error(userResponse ? userResponse.message : 'User not found.');
-  }
-
-  const pages = Math.ceil(userResponse.public_repos / 100);
-  let repos = [];
-  const fetchReposPromises = [];
-
-  for (let i = 1; i <= pages; i++) {
-    fetchReposPromises.push(request(`/users/${username}/repos?per_page=100&page=${i}`));
-  }
-
-  const reposResponses = await Promise.all(fetchReposPromises);
-  repos = reposResponses.flat();
-
-  return starSum(repos);
-}
-
-async function request(url) {
-  const headers= {
-    'User-Agent': 'GitHub StarCounter',
-    // Authorization: `Basic ${Buffer.from(auth).toString('base64')}`
-  };
-
-  const response = await fetch(`https://api.github.com${url}`, { headers });
-  return response.json()
-}
-
-async function starSum(repos) {
-  return repos.reduce((acc, curr) => acc + curr.stargazers_count, 0);
+export default async function getStars(username: string) {
+  const resp = await fetch(`https://user-stars.kopyl.dev/${username}`)
+  const body = await resp.json()
+  return body.stars
 }

src/lib/ru.json

@@ -6,12 +6,8 @@
   "about": {
     "h": "Обо мне",
     "text": "<p>Fullstack разработчик из&nbsp;Санкт-Петербурга.</p> <p>Люблю разбираться в&nbsp;новых технологиях, находить необычные подходы к&nbsp;решению проблем и&nbsp;работать на&nbsp;пересечении областей.</p>",
-    "career": "Работа:",
     "career_value": "Selectel",
-    "bachelors": "Бакалавриат:",
-    "bachelors_value": "СПбГУТ",
-    "masters": "Магистратура:",
-    "masters_value": "ИТМО (в процессе)"
+    "masters_value": "ИТМО"
   },
   "projects": {
     "h": "Проекты",

src/routes/+layout.ts

@@ -1,11 +1,10 @@
 import {loadTranslations} from '$lib/translations';
 import type {LayoutLoad} from "./$types";
 
-export const load: LayoutLoad = async ({ url, data }) => {
-  const { pathname } = url;
+export const load: LayoutLoad = async ({ data }) => {
   const { locale } = data.i18n
 
-  await loadTranslations(locale, pathname);
+  await loadTranslations(locale);
 
   return {};
 };

src/routes/About.svelte

@@ -17,19 +17,11 @@
     <div class="grid gap-x-2 grid-cols-[auto_1fr] h-fit items-center text-slate-400">
       <div class="flex gap-2 items-center">
         <MaterialSymbolsWork></MaterialSymbolsWork>
-        {$t('about.career')}
       </div>
       {$t('about.career_value')}
 
       <div class="flex gap-2 items-center">
         <MaterialSymbolsSchool></MaterialSymbolsSchool>
-        {$t('about.bachelors')}
-      </div>
-      {$t('about.bachelors_value')}
-
-      <div class="flex gap-2 items-center">
-        <MaterialSymbolsSchool></MaterialSymbolsSchool>
-        {$t('about.masters')}
       </div>
       {$t('about.masters_value')}
     </div>

src/routes/blog/+layout.svelte

@@ -92,4 +92,8 @@ import { page } from '$app/stores';
     content: '+';
   }
 }
+
+:global(article p) {
+  text-align: justify;
+}
 </style>

src/routes/blog/+page.server.ts

@@ -1,8 +1,13 @@
 import {metadata as htmlInCssMetadata} from "./html-in-css/+page.svx"
 import {metadata as thisBlogMetadata} from "./this-blog/+page.svx"
 import {metadata as shortsMetadata} from "./shorts/+page.svx"
+import {metadata as vuePlusPayloadMetadata} from "./vue-plus-payload/+page.svx"
 
 const posts = [
+  {
+    href: '/blog/vue-plus-payload',
+    ...vuePlusPayloadMetadata
+  },
   {
     href: '/blog/shorts',
     ...shortsMetadata

src/routes/blog/vue-plus-payload/+page.svx

@@ -0,0 +1,15 @@
+---
+title: "Vue + Payload"
+date: "2025-xx-xx"
+---
+
+<script>
+import ArticleTitle from "$lib/components/ArticleTitle.svelte"
+</script>
+
+<ArticleTitle metadata={metadata}/>
+
+Я разработал интеграцию между Vue и Payload CMS, превращающую последнюю в конструктор сайтов использующий готовые компоненты 
+Vue, которые есть в существующем проекте.
+
+Допустим вы уже построили сайт, на котором сверстаны компоненты, они используются 

tsconfig.json

@@ -13,7 +13,9 @@
 	},
 	"include": [
 		"*.config.ts",
-		"src/**/*.svx",
+		"src/routes/blog/**/*.svx",
+		"src/**/*.svelte",
+		"src/**/*.ts",
 		"rehype/**/*.ts"
 	]
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias