d0rich · d0rich · Mar 5, 2024 · Nov 22, 2023 · Nov 22, 2023 · Nov 22, 2023
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -22,8 +22,11 @@ jobs:
       - name: Installing packages
         run: npm ci
 
+      - name: Prepare
+        run: npm run prepare:all
+
       - name: Build
-        run: npm run build
+        run: npm run build:all
 
       - name: Lint
         run: npm run lint

diff --git a/apps/d.d0rich.me/.env.example b/apps/d.d0rich.me/.env.example
@@ -0,0 +1 @@
+VITE_TON_NETWORK=TESTNET
diff --git a/apps/d.d0rich.me/env.d.ts b/apps/d.d0rich.me/env.d.ts
@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_TON_NETWORK: 'TESTNET' | 'MAINNET'
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
diff --git a/apps/d.d0rich.me/index.html b/apps/d.d0rich.me/index.html
@@ -2,10 +2,27 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- Fonts -->
+    <!-- TODO: Manually download fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Arsenal:ital,wght@0,400;0,700;1,400;1,700&family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <!-- Metadata -->
     <link rel="manifest" href="/app.webmanifest" />
     <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <meta property="og:title" content="Blogs on TON" />
+    <meta property="og:site_name" content="D" />
+    <meta
+      property="og:description"
+      content="Easily create blogs on TON Blockchain"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="https://d.d0rich.me/og/image.jpg" />
+    <title>D - Blogs on TON Blockchain</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/apps/d.d0rich.me/netlify.toml b/apps/d.d0rich.me/netlify.toml
@@ -1,2 +1,7 @@
 [build]
   ignore = "node apps/d.d0rich.me/ignore-build.mjs"
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
diff --git a/apps/d.d0rich.me/package.json b/apps/d.d0rich.me/package.json
@@ -11,22 +11,43 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
   },
   "dependencies": {
-    "@d0rich/contracts": "*",
+    "@d0rich/esprit-design": "*",
+    "@d0rich/ton-contracts": "*",
+    "@dicebear/collection": "^7.0.1",
+    "@dicebear/core": "^7.0.1",
+    "@orbs-network/ton-access": "^2.3.3",
+    "@ton/core": "^0.53.0",
+    "@ton/ton": "^13.9.0",
+    "@tonconnect/ui": "^2.0.0-beta.6",
+    "@vueuse/core": "^10.6.1",
+    "consola": "^3.2.3",
+    "dateformat": "^5.0.3",
     "pinia": "^2.1.7",
+    "rehype-stringify": "^10.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.0.0",
+    "strip-markdown": "^6.0.0",
+    "unified": "^11.0.4",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
     "@tsconfig/node18": "^18.2.2",
     "@types/jsdom": "^21.1.3",
     "@types/node": "^18.18.5",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vue/test-utils": "^2.4.1",
     "@vue/tsconfig": "^0.4.0",
+    "autoprefixer": "^10.4.16",
     "jsdom": "^22.1.0",
     "npm-run-all2": "^6.1.1",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
     "typescript": "~5.2.0",
     "vite": "^4.4.11",
+    "vite-plugin-node-polyfills": "^0.16.0",
     "vitest": "^0.34.6",
     "vue-tsc": "^1.8.19"
   }

diff --git a/apps/d.d0rich.me/postcss.config.js b/apps/d.d0rich.me/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}
diff --git a/apps/d.d0rich.me/public/tonconnect-manifest.json b/apps/d.d0rich.me/public/tonconnect-manifest.json
@@ -0,0 +1,5 @@
+{
+  "url": "https://d.d0rich.me",
+  "name": "D",
+  "iconUrl": "https://d.d0rich.me/android-chrome-192x192.png"
+}
diff --git a/apps/d.d0rich.me/public/tonconnect-testnet-manifest.json b/apps/d.d0rich.me/public/tonconnect-testnet-manifest.json
@@ -0,0 +1,5 @@
+{
+  "url": "https://testnet.d.d0rich.me",
+  "name": "D",
+  "iconUrl": "https://testnet.d.d0rich.me/android-chrome-192x192.png"
+}
diff --git a/apps/d.d0rich.me/src/App.vue b/apps/d.d0rich.me/src/App.vue
@@ -1,91 +1,18 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
+import { RouterView } from 'vue-router'
+import Layout from './layout/Layout.vue'
 </script>
 
 <template>
-  <header>
-    <img
-      alt="Vue logo"
-      class="logo"
-      src="@/assets/logo.svg"
-      width="125"
-      height="125"
-    />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
-
-  <RouterView />
+  <Layout>
+    <RouterView />
+  </Layout>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-  max-height: 100vh;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-nav {
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
-
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-  border: 0;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
+<style>
+/* TODO: Configure colors more percisely */
+body {
+  @apply text-black dark:text-white
+        bg-neutral-300 dark:bg-neutral-800;
 }
 </style>
diff --git a/apps/d.d0rich.me/src/assets/base.css b/apps/d.d0rich.me/src/assets/base.css
diff --git a/apps/d.d0rich.me/src/assets/logo.svg b/apps/d.d0rich.me/src/assets/logo.svg
diff --git a/apps/d.d0rich.me/src/assets/main.css b/apps/d.d0rich.me/src/assets/main.css
diff --git a/apps/d.d0rich.me/src/assets/tailwind.css b/apps/d.d0rich.me/src/assets/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/apps/d.d0rich.me/src/components/HelloWorld.vue b/apps/d.d0rich.me/src/components/HelloWorld.vue