Website
Fleek is an edge-optimized cloud platform. Effortlessly build, ship and scale highly performant apps.
Install / Use
/learn @Fleek-PIatform/WebsiteREADME
⚡️Fleek.xyz Website
This repository contains the source code and assets for the Fleek.xyz website, which is built using the Astro.js framework for enhanced performance and speed. The project leverages Tailwind CSS for styling, providing a modern and responsive design, and TypeScript for type safety and scalability, ensuring a robust and maintainable codebase.
📒 Content
Setup
⚙️ Requirements
- Nodejs + Bun
- NPM, Yarn or PNPM
- Some experience with CLI
- Docker (optionally, if you want to run search server locally)
Learn how to install NodeJS in your operating system by following the instructions here and Bun here.
🤖 Install
Install the project dependencies in your local environment.
npm install
👷♀️Develop
Start a local HTTP server for development work. It supports hot-reload, so you'll be able to see your edits each time you save a file:
npm run dev
Environment variables
If you'll be interacting with services, you'll need to set up the environment variables.
Create a local file named .env and declare the following
PUBLIC_MEILISEARCH_HOST=localhost:7700
PUBLIC_MEILISEARCH_INDEX_BLOG="fleekxyz_website_blog"
PUBLIC_MEILISEARCH_INDEX_DOCS="fleekxyz_website_docs"
PUBLIC_MEILISEARCH_INDEX_GUIDES="fleekxyz_website_guides"
PUBLIC_MEILISEARCH_INDEX_REFERENCES="fleekxyz_website_references"
PRIVATE_MEILISEARCH_MASTER_KEY=***
PRIVATE_MEILISEARCH_DOCUMENTS_ADMIN_API_KEY=***
PUBLIC_MEILISEARCH_DOCUMENTS_CLIENT_API_KEY=***
PUBLIC_SUPPORT_API_HOST="localhost:3331"
SUPPORT_ALLOW_ORIGIN_ADDR="http://localhost:4321,https://fleek-xyz-staging.on-fleek.app"
SUPPORT_RATE_LIMIT_WINDOW_MINUTES=60
SUPPORT_RATE_LIMIT_MAX_REQ=15
SUPPORT_RATE_LIMIT_PATHS="/tickets"
NODE_ENV=develop
💡 The SUPPORT_ALLOW_ORIGIN_ADDR and SUPPORT_RATE_LIMIT_PATHS are comma separated values (csv). the MEILISEARCH_DOCUMENTS_CLIENT_API_KEY is required when querying staging, production environments which should be provided in the headers.
🏗️ Build
Run the build command to create the distribution version. The files will be saved in the /dist directory by default.
npm run build
💡 By default, the development server is available in the address http://localhost:4321.
Tweak environment settings (src/settings.json), such as the site URL. Declare the NODE_ENV with value prod or production to switch environment target settings.
🙈 Preview locally
You can preview the distribution build locally by starting the preview HTTP server:
npm run preview
💡 By default, the local site will be available in the address http://localhost:4322.
👀 Preview staging
You can preview the develop branch version by visiting the preview here.
🎀 Code Formatter
Code formatter is available by executing the command:
npm run fmt
Changes will be written in file. Alternatively, you can run a code format check by running a dry-run, which doesn't make changes in-file:
npm run fmt:check
🙏 Contribution guideline
Create branches from the develop branch and name it in accordance with conventional commits here.
Here's an example:
test: 💍 Adding missing tests
feat: 🎸 A new feature
fix: 🐛 A bug fix
chore: 🤖 Build process or auxiliary tool changes
docs: ✏️ Documentation only changes
refactor: 💡 A code change that neither fixes a bug or adds a feature
style: 💄 Markup, white-space, formatting, missing semi-colons...
Find more about contributing TODO:OPEN-SOURCE-CONTRIBUTION-DOC, please!
🎓 Instructions
Instructions for common tasks.
📝 Blog
🚩New post
A blog post is organized as a directory that should include all the necessary image assets.
The directory should be named after the slug, a system-friendly name, e.g. "My short title" would become "my-short-title". Additionally, the markdown filename containing all the text should be named as "index.md".
For example, let's assume the creation of an hypothetical blog post named "My Blog post".
1) Create the directory with corresponding slug "my-blog-post" in the src/content/blog location, as follows:
src/content/blog/my-blog-post
2) Create the file named "index.md" in the directory.
src/content/blog/my-blog-post/index.md
The "index.md" is a markdown file where the text content and story is going to be stored.
3) Set the "index.md" markdown header values, that include title, category, date, etc
---
title: My Blog post
slug: my-blog-post
category: Announcements
date: 2024-01-31
desc: A short description about my blog post
thumbnail: './thumbnail.jpg'
image: './main-image.jpg'
author: 'Fleek'
---
4) Write the content, including any image references
---
title: My Blog post
slug: my-blog-post
category: Announcements
date: 2024-01-31
desc: A short description about my blog post
thumbnail: './thumbnail.jpg'
image: './main-image.jpg'
author: 'Fleek'
---
Dive into a world of concise knowledge and thought-provoking ideas. Whether you're a seasoned reader or a curious newcomer, this blog post promises to captivate your mind and leave you pondering long after you've finished reading. So grab your favorite beverage, find a cozy spot, and let's explore together!
## My subtitle 1
In the world where text is text, I show you an image:
💡 Would like to place static video content? Learn how to work with video content here.
📝 Docs
Creating a document in the Docs section is similar to Blog.Learn how to create a document by using the instructions for blog.
🎰 Sidebar menu item ordering
Editing the menu and sidebar is crucial. These elements serve as the primary navigation for your visitors, guiding them through your content.
To reorder menu items, edit the docs -> menu -> order section in the settings file located in src/settings.json.
Here's an example where we order the categories accounts, projects and storage by naming the category name and order numerical value. If you don't order, the system will fallback to ordering it alphabetically or randomly.
"docs": {
"menu": {
"order": [
{
"category": "accounts",
"order": 1,
}, {
"category": "projects",
"order": 2,
}, {
"category": "Storage",
"order": 3,
}
]
}
}
💡 In the example above, the categories are the "directory", while Content documents (.md files) have a numerical order value that is also computed when ordering the sidebar items. For example, the src/content/docs/index.md is the landing page document, while src/content/Accounts is a directory that has one or more markdown documents.
📠 Override Category Title
You can override the docs sidebar titles, but it's not recommended due to the way the content automation process generates the final URLs, etc. We should prefer convention over configuration!
Suppose that you have the directory names:
├── CLI
│ ├── Applications
│ └── verify-domain.png
├── My-Menu-Item
│ ├── index.mdx
│ └── Sites
└── index.mdx
Let's say that you'd like to override the name "My-Menu-Item" to "Custom name".
You'd have to locate docs -> customTitlesByDirectoryName field in the src/settings.json file and declare a new property name and the value, e.g. "My-Menu-Item" and "Custom Name" as follows:
"docs": {
"menu": {
"customTitlesByDirectoryName": {
"My-Menu-Item": "Custom name"
}
}
}
This is not recommended because the final URL wi
