v0.11.0 polishing updates (#1)

* chore: complement todo list

* feat: update favicon

* feat: update roadmap

* feat: add docs subpage via vitepress

* chore: doc style update

* feat: add blog page

* feat: update nav for access to blog

* enrich metadata

* feat: tweak blog styles

* fix: navigation tweaks

* chore: add docs to build script

* fix: correct docs build command

* fix: blog building

* chore: add changelog draft

* chore: add info bout alpha release

* chore: update and extend the documentation

* chore: update readme

* chore: update first blogpost

* chore: update changelog

* chore: minor corrections

.gitignore

@@ -41,3 +41,8 @@ src/contracts/*
 
 # build-time generated artefacts
 static/widget
+static/docs
+
+# vitepress docs artefacts
+docs/.vitepress/cache
+docs/.vitepress/dist

CHANGELOG.md

@@ -0,0 +1,45 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) project guidelines, and thoughtful ideas from [this awesome article](https://xavd.id/blog/post/effective-changelogs).
+
+This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## 0.11.0
+
+_released `2024-08-28`_
+
+Slightly polished functionality from the `0.11.0-alpha` release
+
+### Added
+
+- This changelog for tracking updates between versions
+- New blog page built with MDsveX
+
+### Changed
+
+- New docs page built with Vitepress, old docs are restructured
+- Branded favicon
+
+### Fixed
+
+- Automated navigation flow on Freighter wallet detection
+
+### Removed
+
+- Render self-ping API route
+
+## 0.11.0-alpha
+
+_released `2024-08-19`_
+
+Basic skeleton and functionality for **4m00se** project, built for Build with Stellar challenge and described [here](https://dev.to/fyodorio/create-embeddable-forms-widgets-for-decentralized-internet-1dni), including:
+
+- Land on main dapp page with 4m00se overview
+- Get basic documentation from README
+- "Log in" with Freighter wallet
+- Create a basic form (text fields and checkboxes) in WYSIWYG builder UI, store the resulting form config on IPFS and sign it with Freighter wallet on Stellar testnet to further gather submissions for it
+- Get form embedding HTML code snippet for the created, stored and signed form config
+- Working example of 4m00se form widget integration into a web page allowing to submit a form and sign the submission with Freighter wallet on Stellar testnet
+- Get and analyse the list of Freigher-signed submissions made for the form snippet for the user-created form config

docs/CONTRIBUTING.md → CONTRIBUTING.md

@@ -6,7 +6,7 @@ Thank you for your interest in contributing to 4m00se! We welcome contributions
 
 ### Ideation
 
-Take a look at the [roadmap](ROADMAP.md) to see what thoughts/ideas/suggestions for development you may have, and don't hesitate to jump into [discussions](https://github.com/stellar-dapps/4m00se-dapp/discussions) with them.
+Take a look at the [roadmap](https://4m.lol/docs/dev/roadmap) to see what thoughts/ideas/suggestions for development you may have, and don't hesitate to jump into [discussions](https://github.com/stellar-dapps/4m00se-dapp/discussions) with them.
 
 ### Starting a discussion
 
@@ -33,6 +33,6 @@ Please follow the existing code style and guidelines in the repository. If you h
 
 ### License
 
-By contributing to 4m00se, you agree that your contributions will be licensed under the same [license](../LICENSE) as the project.
+By contributing to 4m00se, you agree that your contributions will be licensed under the same [license](LICENSE) as the project.
 
 Thank you for your contributions!

README.md

@@ -1,6 +1,6 @@
-# 4m00se — form management platform
+# 4m00se — web3-enabled form widgets builder
 
-4m00se is a decentralized application (dApp) built on the Stellar network. It consists of a form builder and form submission reader functionality, tied together via embeddable form widgets. The application is server-rendered and decentralized, utilizing the Stellar network and Soroban for blockchain transaction management and IPFS for form configuration storage and submission collecting.
+See [the official website](https://4m.lol) for the details on the application, its architecture, philosophy, and also the user guides and the developer guides.
 
 ## Table of Contents
 
@@ -15,15 +15,14 @@
 
 ## Introduction
 
-4m00se is designed to provide a seamless experience for creating and managing forms on the Stellar network. It leverages the power of decentralized storage and blockchain technology to ensure data integrity and security.
+4m00se is a decentralized application designed to provide a seamless experience for creating and managing forms, both on the blockchain, and outside of it (pure habitual web2 flow). It leverages the power of decentralized storage (IPFS via Pinata) and blockchain technology (Stellar/Soroban) to ensure data integrity and security, but also allows to work with JSON directly and use HTML widgets with custom user-provided callbacks.
 
-## Features
+## Major features
 
-- **Form builder**: Create custom forms with ease.
-- **Form submission reader**: Read and manage form submissions.
-- **Decentralized storage**: All data is stored as transactions on the Stellar network or written to IPFS.
-- **Embeddable widgets**: Easily embed forms into other applications.
-- **Documentation**: Comprehensive documentation for users and developers.
+- **Form builder**: Create custom forms with ease via WYSIWYG interface.
+- **Form submission reader**: Read and manage form responses for each of the forms.
+- **Decentralized storage**: All form data (both config and user responses) can be stored as transactions on the Stellar network and linked to IPFS for JSON storage itself.
+- **Embeddable widgets**: Easily embed forms into other web pages and applications via simple unique HTML code snippets.
 
 ## Technology Stack
 
@@ -32,24 +31,29 @@
   - SvelteKit
   - TypeScript
   - Vite
-  - PicoCSS (UI library)
+  - VitePress (documentation)
+  - MDsveX (blog)
+  - PicoCSS
 
 - **Embeddable Widget**:
 
   - Svelte
   - TypeScript
+  - markdown-it
+  - PicoCSS
   - Rollup
 
 - **Smart Contracts**:
 
+  - Rust
   - Soroban
 
 - **Authentication**:
 
   - Freighter Wallet API
 
 - **Data Storage**:
-  - Stellar Network
+  - Stellar Network API/SDK
   - IPFS (via Pinata API/SDK)
 
 ## Installation
@@ -66,8 +70,8 @@
 1. Clone the repository:
 
 ```bash
-git clone https://github.com/your-username/4m00se.git
-cd 4m00se
+git clone git@github.com:stellar-dapps/4m00se-dapp.git
+cd 4m00se-dapp
 ```
 
 2. Install dependencies:
@@ -94,7 +98,13 @@ cp .env.example .env
 npm run init
 ```
 
-6. Start the development server:
+6. Build the documentation pages
+
+```bash
+npm run docs:build
+```
+
+7. Start the development server
 
 ```bash
 npm run dev
@@ -104,15 +114,15 @@ npm run dev
 
 ### Form Builder
 
-- Navigate to the form builder page.
+- Navigate to the form builder page and log in via browser's Freighter wallet extension (use testnet).
 - Create a new form by adding fields and configuring options.
-- Save the form to the Stellar network.
+- Preview and save the form.
 - Get embeddable widget code and instructions.
 
-### Form Submission Reader
+### Form Responses
 
-- Navigate to the form submission reader page.
-- View and manage form submissions stored on the Stellar network.
+- Navigate to the form responses subpage.
+- View and manage form submissions.
 
 ### Embeddable Widget
 
@@ -140,11 +150,11 @@ You can configure the following parameters of a form widget:
 
 - `configUrl` — required, generated when a form is built
 - `container` — optional, gives the possibility to use custom container id instead of the default `4m00se-widget-container`
-- `onSubmit` — optional, gives the possibility to use custom callback on form submission (by default, dedicate Freighter transaction signing flow is triggered)
+- `onSubmit` — optional, gives the possibility to use custom callback on form submission (by default, dedicated Freighter transaction signing flow is triggered)
 
 ### Examples
 
-See `/static/demo/...` for real-life usage examples.
+See `/static/demo/...` for real-life usage example(s).
 
 ## Project Structure
 
@@ -156,9 +166,13 @@ See `/static/demo/...` for real-life usage examples.
 │       │   ├── lib.rs
 │       │   └── test.rs
 │       └── Cargo.toml
+├── docs/
+│   └── ...
 ├── packages/
 │   └── ...
 ├── src/
+│   └── blogposts/
+│   │   └── ...
 │   └── contracts/
 │   │   ├── ...
 │   │   └── util.ts
@@ -180,23 +194,25 @@ See `/static/demo/...` for real-life usage examples.
 │   │   └── ...
 │   ├── app.css
 │   ├── app.d.ts
-│   └── app.html
+│   ├── app.html
+│   └── env.d.ts
 ├── static/
 │   ├── demo/
 │   └── ...
 ├── Cargo.toml
 ├── initialize.js
 ├── package.json
 ├── rollup.config.js
+├── setup_env.sh
 ├── svelte.config.js
 ├── vite.config.ts
 └── ...
 ```
 
 ## Contributing
 
-Contributions are welcome! Please refer to [CONTRIBUTING.md](docs/CONTRIBUTING.md).
+Contributions are welcome! Please refer to [CONTRIBUTING.md](CONTRIBUTING.md).
 
 ## License
 
-This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+This project is licensed under the Apache-2.0 license. See the [LICENSE](LICENSE) file for details.

copy-docs.js

@@ -0,0 +1,28 @@
+import { copyFileSync, mkdirSync, readdirSync, statSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const sourceDir = join(__dirname, 'docs', '.vitepress', 'dist');
+const destDir = join(__dirname, 'static', 'docs');
+
+function copyDir(src, dest) {
+  mkdirSync(dest, { recursive: true });
+  const entries = readdirSync(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = join(src, entry.name);
+    const destPath = join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+copyDir(sourceDir, destDir);
+
+console.log('Documentation files copied successfully!');

docs/.vitepress/config.js

@@ -0,0 +1,44 @@
+import { defineConfig } from 'vitepress';
+
+export default defineConfig({
+  title: '4m00se Documentation',
+  description: 'Documentation for 4m00se project',
+  base: '/docs/',
+  head: [['link', { rel: 'icon', href: '/docs/favicon.png' }]],
+  themeConfig: {
+    siteTitle: '4m00se',
+    logo: '/img/logo.png',
+    socialLinks: [{ icon: 'github', link: 'https://github.com/stellar-dapps/4m00se-dapp' }],
+    nav: [{ text: '4m00se app', link: 'https://4m.lol' }],
+    sidebar: [
+      {
+        text: 'What is 4m00se?',
+        link: '/'
+      },
+      {
+        text: 'User guide',
+        items: [{ text: 'Form builder quick start', link: '/guide/' }]
+      },
+      {
+        text: 'Widget reference',
+        items: [{ text: 'Getting started with form widgets', link: '/reference/' }]
+      },
+      {
+        text: 'Architecture',
+        items: [
+          { text: 'Project philosophy', link: '/architecture/' },
+          { text: 'Form data flow 101', link: '/architecture/data-flow' }
+        ]
+      },
+      {
+        text: 'Developer guide',
+        items: [
+          { text: 'Getting started guide for developers', link: '/dev/' },
+          { text: 'Project development roadmap', link: '/dev/roadmap' },
+          { text: 'Developer resources', link: '/dev/resources' },
+          { text: 'Using as a project starter', link: '/dev/starter' }
+        ]
+      }
+    ]
+  }
+});