Convenient frontend template to create clients for markket.place
Markket.place is an ecosystem with artists and creators for eCommerce
This repository provides an easy to launch web client for stores to deploy as a static site for incredible performance
Use environment variables to connect to a custom backend and select your store
export const markketplace = {
STRAPI_URL: (import.meta.env.STRAPI_URL || '').replace(/\/$/, '') || 'https://api.morirsoniando.com',
STORE_SLUG: import.meta.env.STORE_SLUG as string || 'morirsoniando',
url: import.meta.env.BASE_URL as string || 'https://localhost:4321',
POSTHOG_ID: import.meta.env.POSTHOG_ID || '',
COLOR_PRIMARY: import.meta.env.COLOR_PRIMARY || ''.
COLOR_ACCENT: import.meta.env.COLOR_ACCENT || '',
STORE_AUTHOR: import.meta.env.STORE_AUTHOR || '',
STORE_OG_IMAGE: import.meta.env.STORE_OG_IMAGE || '',
style: import.meta.env.MARKKET_STYLE || 'markket',
};This repo contains a few theme variations that you can toggle using the variable MARKKET_STYLE
You can fork and create new themes, and optionally send pull requests to share improvements
Included theme options are nekko and fae - with example color & font varations
Creating styles
The program loads a file with the same name, expected in the public format, as: public/${MARKKET_STYLE}.css
And includes the name in the body as a class to reduce risks of CSS collusion
<body class={`theme-${markketplace.style}`}>Some themes from ddukbg/stylemd (MIT)
A command-line tool to generate static HTML from Markdown
While this repo is compatible with any headless CMS, and astro content layer, we designed it to work for markket sites
-
Account: Run markkët locally, or create an account in de.markkët to access the content dashboard
-
Store: Create a store, and pay attention to the slug
-
ENV&: Set the
STORE_SLUGvariable, andSTRAPI_URLto match your server variables -
TEST: Run this project locally, verify the data, customize it!
-
DEPLOY:: Use github pages or digital ocean to deploy a statically generated website for free
-
Custom Domain: Change your DNS settings to match the hosts instructions
- Markkët Docs
- Strapi Docs Strapi is the REST API open source framework
- MarkketNext API autogenerated by swagger
- API on github
This template was built on top of Astropaper, a free astro template.
AstroPaper is a minimal, responsive, accessible and SEO-friendly Astro blog theme. This theme is designed and crafted based on my personal blog.
This theme follows best practices and provides accessibility out of the box. Light and dark mode are supported by default. Moreover, additional color schemes can also be configured.
This theme is self-documented _ which means articles/posts in this theme can also be considered as documentations. Read the blog posts or check the README Documentation Section for more info.
- type-safe markdown
- super fast performance
- accessible (Keyboard/VoiceOver)
- responsive (mobile ~ desktops)
- SEO-friendly
- light & dark mode
- fuzzy search
- draft posts & pagination
- sitemap & rss feed
- followed best practices
- highly customizable
- dynamic OG image generation for blog posts #15 (Blog Post)
Note: I've tested screen-reader accessibility of AstroPaper using VoiceOver on Mac and TalkBack on Android. I couldn't test all other screen-readers out there. However, accessibility enhancements in AstroPaper should be working fine on others as well.
Inside of AstroPaper, you'll see the following folders and files:
/
├── public/
│ ├── assets/
│ │ └── logo.svg
│ │ └── logo.png
│ └── favicon.png
│ └── astropaper-og.jpg
│ └── robots.txt
│ └── toggle-theme.js
├── src/
│ ├── assets/
│ │ └── socialIcons.ts
│ ├── components/
│ ├── content/
│ │ | blog/
│ │ | └── some-blog-posts.md
│ │ └── config.ts
│ ├── layouts/
│ └── pages/
│ └── styles/
│ └── utils/
│ └── config.ts
│ └── types.ts
└── package.jsonAstro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.
Any static assets, like images, can be placed in the public/ directory.
All blog posts are stored in src/content/blog directory.
Collections read from the markket api
import { getCollection } from "astro:content";Documentation can be read in two formats_ markdown & blog post.
- Configuration - markdown | blog post
- Add Posts - markdown | blog post
- Customize Color Schemes - markdown | blog post
- Predefined Color Schemes - markdown | blog post
For AstroPaper v1, check out this branch and this live URL
Markket - Markket JSON Main Framework - Astro Type Checking - TypeScript Component Framework - ReactJS Styling - TailwindCSS UI/UX - Figma Design File Fuzzy Search - FuseJS Icons - Boxicons | Tablers Code Formatting - Prettier Deployment - Cloudflare Pages Illustration in About Page - https://freesvgillustration.com Linting - ESLint
You can start using this project locally by forking or cloning:
Warning! If you're using
yarn 1, you might need to installsharpas a dependency.
Then start the project by running the following commands:
# install dependencies
npm run install
# start running the project
npm run devAs an alternative approach, if you have Docker installed, you can use Docker to run this project locally. Here's how:
# Build the Docker image
docker build -t markketastro .
# Run the Docker container
docker run -p 4321:80 markketastroYou can easily add your Google Site Verification HTML tag in AstroPaper using environment variable. This step is optional. If you don't add the following env variable, the google-site-verification tag won't appear in the html <head> section.
# in your environment variable file (.env)
PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-valueAll commands are run from the root of the project, from a terminal:
Note! For
Dockercommands we must have it installed in your machine.
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run format:check |
Check code format with Prettier |
npm run format |
Format codes with Prettier |
npm run sync |
Generates TypeScript types for all Astro modules. Learn more. |
npm run lint |
Lint with ESLint |
docker compose up -d |
Run AstroPaper on docker, You can access with the same hostname and port informed on dev command. |
docker compose run app npm install |
You can run any command above into the docker container. |
docker build -t astropaper . |
Build Docker image for AstroPaper. |
docker run -p 4321:80 astropaper |
Run AstroPaper on Docker. The website will be accessible at http://localhost:4321. |
Warning! Windows PowerShell users may need to install the concurrently package if they want to run diagnostics during development (
astro check --watch & astro dev). For more info, see this issue.
If you have any suggestions/feedback, you can contact me via my email. Alternatively, feel free to open an issue if you find bugs or want to request new features.
Licensed under the TSL License, Copyleft © 2023
Made with 🤍 by Sat Naing 👨🏻💻 and contributors.
And taken over by Calimania