Markdown driven directory template. Built with Astro and Tailwindcss. Optimized for SEO. Beautiful Customizable Style
- 🖌️ Add listings from is possible from different formats:
markdown
,csv
,json
,google sheets
,notion
,airtable
. - 🔋 SEO optimized and programmatic SEO out of the box
- 💻 Pre-built components for directories.
- 💅 Customizable styles.
- 🌙 Dark/Light mode
- 💸 Sponsored Content
- 👀 Tags + Search
Duplicate the template then clone the repository.
git clone git@github.com:youraccount/projectname.git my-directory
Or use the github cli to create a repository based on the template and clone in one command:
gh repo create my-directory --template masterkram/minted-directory-astro --private --clone
Go to the cloned folder:
cd my-directory
Install dependencies
pnpm install
Run the website:
pnpm dev
Congrats 🎉
You can start customizing and building your directory.
Adding content to the directory can be done using one of the following formats:
- markdown
- json
- csv
- notion
- google sheets
- airtable
Remember that listings will not be shown on the live website until the site is re-built and deployed. This is done to ensure the fastest possible performance by serving static html, css and js.
- add markdown files to the
src/data/directory
folder. All markdown files will be automatically loaded as listings. - You must specify required properties of a listing such as title and description in the frontmatter of the file
- add a single json file:
src/data/directory/directory.json
- in this json file, the root element is an array. This array can contain objects which are the listings of the directory. These require the properties of
id
,name
anddescription
.
- add a single csv file:
src/data/directory/directory.csv
- add rows to this csv file, these require the properties of
id
,name
anddescription
.
- Create a google sheets document.
- You need to select your table and click
Format > Convert to table
- Make it publicly shareable. When you share the link. copy the id
- Go to
settings.toml
, here you need to set thesource=sheets
andkey =
the copied id of the file
Use this spreadsheet as a starting point: directory google sheet data
To customize the directory style:
- Change the
--color-primary-x00
variables,--color-gray-x00
variables in thesrc/styles/global.css
- Change the font:
- install from fontsource
- import font in
BaseLayout.astro
- change the
--font-sans
variable inglobal.css
- Customize the
src/data/config/settings.toml
to your preferences.
- spearmint
- peppermint
Add listings by adding markdown files to /src/content/directory
Deploy as a static site for best SEO performance:
pnpm run build