feat: setup-metagram

.node-version

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

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/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>

platforms/metagram/src/lib/icons/CommentsTwo.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 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...restProps}
+>
+	<path
+		d="M20 9C19.2048 5.01455 15.5128 2 11.0793 2C6.06549 2 2 5.85521 2 10.61C2 12.8946 2.93819 14.9704 4.46855 16.5108C4.80549 16.85 5.03045 17.3134 4.93966 17.7903C4.78982 18.5701 4.45026 19.2975 3.95305 19.9037C5.26123 20.1449 6.62147 19.9277 7.78801 19.3127C8.20039 19.0954 8.40657 18.9867 8.55207 18.9646C8.65392 18.9492 8.78659 18.9636 9 19.0002"
+		stroke={color}
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M11 16.2617C11 19.1674 13.4628 21.5234 16.5 21.5234C16.8571 21.5238 17.2132 21.4908 17.564 21.425C17.8165 21.3775 17.9428 21.3538 18.0309 21.3673C18.119 21.3807 18.244 21.4472 18.4938 21.58C19.2004 21.9558 20.0244 22.0885 20.8169 21.9411C20.5157 21.5707 20.31 21.1262 20.2192 20.6496C20.1642 20.3582 20.3005 20.075 20.5046 19.8677C21.4317 18.9263 22 17.6578 22 16.2617C22 13.356 19.5372 11 16.5 11C13.4628 11 11 13.356 11 16.2617Z"
+		stroke={color}
+		stroke-width="2"
+		stroke-linejoin="round"
+	/>
+</svg>