Ara – Build Modular Apps, share your experience and get help from others.
A collaboration platform with the financial transparency, community building and custom AI agents for your needs.
To export the data:
docker-compose run atomic-server export -p /atomic-storage-export/data.json
To run the development mode:
docker-compose up -d
- 🤖 End user made custom AI agents
- 📝 Ara Web is Open Source
- 🛠️ Blockchain based transparency
- 🔌 Community: contributors, freelancers or monetization
- 🔒 Secure by default
- Responsive design
- Scores A or A+ (depending on hosting and your images) on Accessify and Ecograder
- Clean and minimal
- Fluid typography
- Dark and light mode (chosen by user's system preference)
- About page
- Now page (inspired by nownownow.com)
- Microblog for found links (Today I Found...)
- Blog for personal projects
First, install the packages:
npm installThen, run the development server:
npm run devOpen http://localhost:3000 with your browser to see the result.
Using RPCs within the pages. In order to use RPCs in the web pages, simply import the component. The inputs to the components must be passed as the data
Let's first explain the components that made up the Ara Web.
The background is the same for all pages.
All pages have the same classic web layout: Header, Content, Footer.
Each layout also composed of three sections: Left, Center, Right.
slug– indicates the unique path for the resource. Used for web pages and components within the pagepath– combination of one or more slugs that defines the URL of the component within the pageurl– indicates the Path of the web pagelayout– a web page composed of the rowsrow– a row of web components that is composed of the columnscolumn– a column of the web page where we store the web components
Web Components
component–
Read the below sections whenever you add a new component, page, action or RPC as a checklist
To make the page valid for src/scripts/page.ts the src/pages/**/*.astro must have the JSDoc comment at the beginning.
The comment must have three parameters:
@this Page– indicate that this is the Page@param {string} Title ${text...}– The title of the web page@param {string} Description ${text...}– The description of the web page
To make the components available, make sure that their props are always optional.
As the components list page won't pass any property during a rendering.
Also, update the component types in the src/scripts/component.ts to make sure list of components would detect it.
In order to create the RPC, create a new rpc script that defines RPC Types from src/scripts/rpc/types.ts.
Then, add it to the src/scripts/rpc/index.ts list.
Todo: define what it calls and how it calls. For example, how to describe that redirect function is somewhere in the code. Or maybe to write a script and allow users to edit it, for example calling it as public_scripts.ts
In order to use the RPC, we need to call it by passing inputs and optionally printing the outputs.
The pages can declare that they use extensions by importing the src/components/rpc/call.astro component.
The Call component receives the src/scripts/rpc/types.ts>type RpcCallType parameters as the component properties.
Simply pass them.
There are already predefined rpc calls defined as type RpcCallType. They are available in src/scripts/rpc=>rpcBySlug(slug:string).
The scripts within the Ara Web are located in the src/scripts directory.
Currently only typescript scripts are supported.
The src/scripts/reflect is a module that turns the code into a JSON, and vice versa
the JSON into the code.
It parses the data in the whole data structure of the web site and then turns it into the minimal components available for the user.
Each node.js file is called as a module.
Reflect supports various modules but not all due to safety or complexity reasons.
To navigate through the modules, they are categorized according to the directories.
For example, Page module category indicates the scripts (a.k.a modules) in the src/pages directory.
Ara Web does support pre-built modules that consists the Ara Web itself.
The third-party modules (in node_modules) nor NodeJS built in modules are not supported by default.
But sometimes we need them as well. For example the icon components, or additional UI components.
Ara Web must know at the built time which of the third party modules you are going to use.
Therefore, we have the src/scripts/reflect/enabledNodejsModule.ts where
the supported modules are imported via the Vite plugin's glob pattern.
Contributor Tip To support the third party modules, double check them for security. Then, add them into the
src/scripts/reflect/enabledNodejsModule.tsscript.
If you are adding a new script other than Typescript, update the src/scripts/reflect/script.ts to support new extension.
- Install dependencies:
npm install- Start the development server:
npm run dev- Build for production:
npm run build- Add your own avatar in the
public/directory - Edit
src/config.tsto use your website, name, and description - Edit pages in
src/pages/ - Modify the layout in
src/layouts/Layout.astro - Update styles in the respective component files
- Make your own favicons with https://realfavicongenerator.net/
The colors were chosen using several tools to insure accessibility and contrast. The colors are all set using variables for dark and light in the global.css file. Personally, I created the palletes and gradients using these tools:
- https://colorffy.com/color-scheme-generator
- https://www.learnui.design/tools/accessible-color-generator.html
- https://colorffy.com/mesh-gradient-generator (for the background gradient)
Built by Tim Eaton - timeaton.dev.
Anonymous Avatar by maniskis12 on Freeimages.com
All dummy text and posts generated with Claude AI.
MIT