feat: added user avatar and story

.node-version

@@ -1 +1 @@
-22.x
+20.x

.vscode/settings.json

@@ -22,7 +22,7 @@
         }
     },
     "[svelte]": {
-        "editor.defaultFormatter": "biomejs.biome",
+        "editor.defaultFormatter": "svelte.svelte-vscode",
         "editor.codeActionsOnSave": {
             "source.organizeImports.biome": "explicit",
             "source.fixAll.biome": "explicit"

platforms/metagram/.gitignore

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

platforms/metagram/.npmrc

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

platforms/metagram/.prettierignore

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

platforms/metagram/.prettierrc

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

platforms/metagram/.storybook/main.ts

@@ -0,0 +1,24 @@
+import type { StorybookConfig } from '@storybook/sveltekit';
+
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): string {
+	return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
+	addons: [
+		getAbsolutePath('@storybook/addon-essentials'),
+		getAbsolutePath('@storybook/addon-svelte-csf'),
+		getAbsolutePath('@chromatic-com/storybook')
+	],
+	framework: {
+		name: getAbsolutePath('@storybook/sveltekit'),
+		options: {}
+	}
+};
+export default config;

platforms/metagram/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/svelte';
+import '../src/app.css';
+
+const preview: Preview = {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i
+			}
+		}
+	}
+};
+
+export default preview;

platforms/metagram/README.md

@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## 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
+npx sv create
+
+# create a new project in my-app
+npx sv create 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://svelte.dev/docs/kit/adapters) for your target environment.

platforms/metagram/eslint.config.js

@@ -0,0 +1,42 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default ts.config(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: {
+			globals: { ...globals.browser }
+		},
+		rules: {},
+		overrides: [
+			{
+				files: ['*.svelte'],
+				rules: { 'no-undef': 'off' }
+			}
+		]
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		}
+	}
+);

platforms/metagram/messages/en.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"hello_world": "Hello, {name} from en!"
+}

platforms/metagram/messages/es.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"hello_world": "Hello, {name} from es!"
+}

platforms/metagram/package.json

@@ -0,0 +1,55 @@
+{
+	"name": "metagram",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^3",
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@hugeicons/core-free-icons": "^1.0.13",
+		"@hugeicons/svelte": "^1.0.2",
+		"@storybook/addon-essentials": "^8.6.12",
+		"@storybook/addon-svelte-csf": "^5.0.0-next.0",
+		"@storybook/blocks": "^8.6.12",
+		"@storybook/svelte": "^8.6.12",
+		"@storybook/sveltekit": "^8.6.12",
+		"@storybook/test": "^8.6.12",
+		"@sveltejs/adapter-static": "^3.0.8",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tailwindcss/vite": "^4.0.0",
+		"clsx": "^2.1.1",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"storybook": "^8.6.12",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.2.6"
+	},
+	"dependencies": {
+		"-": "^0.0.1",
+		"D": "^1.0.0",
+		"tailwind-merge": "^3.0.2"
+	}
+}

platforms/metagram/project.inlang/.gitignore

@@ -0,0 +1 @@
+cache

platforms/metagram/project.inlang/project_id

@@ -0,0 +1 @@
+1lExt3FnvpxOpPeeZE

platforms/metagram/project.inlang/settings.json

@@ -0,0 +1,12 @@
+{
+	"$schema": "https://inlang.com/schema/project-settings",
+	"modules": [
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js"
+	],
+	"plugin.inlang.messageFormat": {
+		"pathPattern": "../messages/{locale}.json"
+	},
+	"baseLocale": "en",
+	"locales": ["en", "es"]
+}

platforms/metagram/src/app.css

@@ -0,0 +1,52 @@
+@import 'tailwindcss';
+
+@font-face {
+	font-family: 'Geist', sans-serif;
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url('/fonts/Geist-VariableFont_wght.ttf') format('truetype');
+}
+
+@layer base {
+	h1 {
+		@apply font-geist text-xl/[1] font-semibold;
+	}
+	h2 {
+		@apply font-geist text-lg/[1] font-medium;
+	}
+	h3 {
+		@apply font-geist text-base/[1] font-normal;
+	}
+	p {
+		@apply font-geist text-[15px]/[1] font-normal;
+	}
+	.small {
+		@apply font-geist text-sm/[1] font-normal;
+	}
+	.subtext {
+		@apply font-geist text-xs/[1] font-normal;
+	}
+}
+
+@theme {
+	/* fonts */
+	--font-geist: 'Geist', sans-serif;
+
+	/* colors */
+	--color-black: #1f1f1f;
+	--color-black-800: #4c4c4c;
+	--color-black-600: #797979;
+	--color-black-400: #a9a9a9;
+	--color-black-200: #d2d2d2;
+
+	--color-grey: #f5f5f5;
+
+	--color-brand-burnt-orange: #da4a11;
+	--color-brand-gradient: linear-gradient(
+		91.82deg,
+		#4d44ef -36.17%,
+		#f35b5b 57.95%,
+		#f7a428 152.07%
+	);
+}

platforms/metagram/src/app.d.ts

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

platforms/metagram/src/app.html

@@ -0,0 +1,12 @@
+<!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" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

platforms/metagram/src/lib/icons/Comment.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { ISvgProps } from './../types';
+
+	let { size = '20px', color = '#A5A5A5', ...restProps }: ISvgProps = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 20 20"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...restProps}
+>
+	<path
+		d="M11.8088 16.6834C15.2946 16.4614 18.0713 13.7626 18.2998 10.3747C18.3445 9.71168 18.3445 9.02503 18.2998 8.36203C18.0713 4.97406 15.2946 2.27536 11.8088 2.05329C10.6195 1.97754 9.37796 1.9777 8.19112 2.05329C4.70528 2.27536 1.92863 4.97406 1.70016 8.36203C1.65545 9.02503 1.65545 9.71168 1.70016 10.3747C1.78337 11.6086 2.35282 12.7511 3.02322 13.7158C3.41247 14.3912 3.15557 15.2342 2.75013 15.9705C2.4578 16.5014 2.31163 16.7668 2.42899 16.9586C2.54636 17.1503 2.80851 17.1565 3.33282 17.1687C4.36968 17.1929 5.06886 16.9112 5.62386 16.519C5.93862 16.2965 6.09602 16.1853 6.20449 16.1725C6.31296 16.1597 6.52643 16.244 6.9533 16.4125C7.33696 16.5639 7.78242 16.6574 8.19112 16.6834C9.37796 16.759 10.6195 16.7592 11.8088 16.6834Z"
+		stroke={color}
+		stroke-width="1.25"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M9.99607 9.58331H10.0036M13.3257 9.58331H13.3332M6.6665 9.58331H6.67398"
+		stroke={color}
+		stroke-width="1.66667"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>