AstroVueDirectory site

japan-pro-finder — Astro Directory site Template

By HumanCronAdmin

A Markdown-driven directory website template built with Astro and Tailwind CSS, supporting list imports from multiple data sources, tags and search, dark mode, and sponsored content.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews
Desktop homepage1 / 3
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-13View source

What stands out

A quick read of the recorded project description.

01

Markdown-driven directory template built with Astro and Tailwind CSS

02

Listings can be imported from formats including markdown, csv, json, google sheets, notion, and airtable

03

Provides preset components for directory scenarios, tags, and search functionality

04

Supports dark/light mode and customizable styles, including two preset styles: spearmint and peppermint

05

README states it includes SEO optimization, programmatic SEO, and Sponsored Content capability

06

Newly added listings require a rebuild and deployment before they appear online

Template Details

This is an Astro template for building directory-style websites. The README positions it as a "Markdown-driven directory template" built with Astro and Tailwind CSS. Listings can be imported from formats including markdown, csv, json, google sheets, notion, and airtable. The template provides preset components for directory scenarios, customizable styles, and dark/light mode, and includes tag and search functionality. The README mentions that the template comes with SEO optimization and programmatic SEO, as well as Sponsored Content capability.

For usage, the README states that you first need to copy the template and clone the repository, install dependencies with pnpm, and then start local development with pnpm dev. How content is added depends on the data source: markdown files go into the src/data/directory directory with required attributes such as title and description filled in the frontmatter; json uses src/data/directory/directory.json, with the root element as an array and each item requiring id, name, and description; csv uses src/data/directory/directory.csv, with each row likewise requiring id, name, and description; google sheets requires creating a spreadsheet, converting it to table format and sharing it publicly, then setting source=sheets in settings.toml and key to the file id. The notion and airtable sections in the README have no body text under their headings, so the specific integration steps for these two data sources are not provided in the README.

The README explicitly notes that newly added listings will not appear online until the website is rebuilt and deployed; this is done to serve static HTML, CSS, and JS for the fastest possible access speed. For style customization, you can modify the --color-primary-x00 and --color-gray-x00 variables in src/styles/global.css. To change fonts, you need to install from fontsource, import in BaseLayout.astro, and modify the --font-sans variable, and you can also adjust src/data/config/settings.toml. The template provides two preset styles: spearmint and peppermint. For deployment, the README only gives the static site build command pnpm run build, and does not provide specific hosting platforms or deployment process instructions.

AstroVueDirectory site

Is it right for your project?

Use Cases

  • Building resource, tool, or service directory websites organized by category or tag
  • Maintaining entries in bulk with markdown or spreadsheet data and generating static pages
  • List-style sites that need dark mode, tag filtering, and on-site search
  • Customizing brand colors and site configuration by modifying CSS variables and settings.toml

Suitable For

  • Developers who want to build static directory sites with Astro
  • Data editors accustomed to maintaining content with markdown, csv, or spreadsheets
  • Projects that need common directory features such as tags, search, and dark mode
  • Teams prepared to handle style customization and static deployment themselves

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    After copying the template and cloning the repository, run pnpm install in the project directory to install dependencies

  2. 2

    Use pnpm dev to start the local development environment

  3. 3

    Markdown listings go into src/data/directory, json uses directory.json, csv uses directory.csv, and all require required fields such as id, name, and description

  4. 4

    Google Sheets must be converted to a table and shared publicly, then set source=sheets in settings.toml and key to the file id

  5. 5

    The README does not provide specific integration steps for notion and airtable, nor does it explain the deployment process for specific hosting platforms

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean that external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur separate charges.
  • Newly added listings will not appear online until the website is rebuilt and deployed; a rebuild and deployment are required for changes to take effect.
  • When using Google Sheets as a data source, the spreadsheet must be shared publicly and its file id copied.
  • Using the Google Sheets data source requires setting source=sheets in settings.toml and setting key to that file id.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

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.

Original README

3. Make it publicly shareable. When you share the link. copy the id

Original README

4. Go to `settings.toml`, here you need to set the `source=sheets` and `key = ` the copied id of the file

Original README
https://github.com/HumanCronAdmin/japan-pro-finder/blob/main/LICENSEhttps://github.com/HumanCronAdmin/japan-pro-finder/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-13. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 85 / 100
Technologies
Astro · Vue
Website type
Directory site
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-04-12
Screenshot last checked
2026-10-13

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Astro as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: codex-user-requested-batch-review-20261015 · 2026-10-15

Inspect the recorded source material

SHA-256: 6c869f2053453b93bdf1d3b87c859091a49e67fec6a9c91f9257285483084596

2026-10-13T23:15:44.056Z

Source file / repository
<div align="center">
  <h1>Minted Directory Astro</h1>
  <p>Markdown driven directory template. Built with Astro and Tailwindcss. Optimized for SEO. Beautiful Customizable Style</p>
</div>

<br/>

<div align="center">
  <img src="https://github.com/user-attachments/assets/febde860-00be-408b-8a13-41953f7178e1" alt="Minted Directory Screenshot" />
</div>

<br/>

## Features:
+ 🖌️ 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

## Getting Started

### Local Development

Duplicate the template then clone the repository.

```sh
git clone [email protected]:youraccount/projectname.git my-directory
```

Or use the github cli to create a repository based on the template and clone in one command:

```sh
gh repo create my-directory --template masterkram/minted-directory-astro --private --clone
```

Go to the cloned folder:
```sh
cd my-directory
```

Install dependencies

```sh
pnpm install
```

Run the website:

```sh
pnpm dev
```

Congrats :tada:

You can start customizing and building your directory.

## Adding Content

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.

### Using markdown listings:
1. add markdown files to the `src/data/directory` folder. All markdown files will be automatically loaded as listings.
2. You must specify required properties of a listing such as title and description in the [frontmatter]() of the file

### Using json listings:
1. add a single json file: `src/data/directory/directory.json`
2. 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` and `description`.

### Using csv listings:
1. add a single csv file: `src/data/directory/directory.csv`
2. add rows to this csv file, these require the properties of `id`, `name` and `description`.

### Using google sheets listings:
1. Create a [google sheets](https://docs.google.com/spreadsheets/u/0/) document.
2. You need to select your table and click `Format > Convert to table`
3. Make it publicly shareable. When you share the link. copy the id
4. Go to `settings.toml`, here you need to set the `source=sheets` and `key = ` the copied id of the file

Use this spreadsheet as a starting point: [directory google sheet data](https://docs.google.com/spreadsheets/d/1BKVVFysQT8ZuPY8hUp--jwTrN-U20TrtML0idECIWmc/edit?usp=sharing)

### Using notion listings:

### Using airtable listings:


## Customization

To customize the directory style:
+ Change the `--color-primary-x00` variables, `--color-gray-x00` variables in the `src/styles/global.css`
+ Change the font:
  + install from [fontsource]()
  + import font in `BaseLayout.astro`
  + change the `--font-sans` variable in `global.css`
+ Customize the `src/data/config/settings.toml` to your preferences.

### Pre-made styles:
- spearmint
- peppermint

### Adding Content

Add listings by adding markdown files to `/src/content/directory`

## Deployment

Deploy as a static site for best SEO performance:

```bash
pnpm run build
```

## Community

[Join the discord](https://discord.gg/5UbrTNzX7y)
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

minted-directory-astro

minted-directory-astro

A Markdown-driven directory site template built with Astro and Tailwind CSS. It imports listing data from markdown, json, csv, Google Sheets, Notion, or Airtable, and includes tag and search functionality, light and dark modes, sponsored content slots, and SEO-oriented page structure.

Astro · Directory site

c00d-astro-directory

c00d-astro-directory

An Astro-based static ranked link directory template that builds from local JSON or a live c00d Directory API. It includes category boxes with ratings, per-category pages, detail pages, sitemaps, Open Graph, and client-side search.

Astro · Directory site

anisonary

anisonary

Anisonary is an Astro-built seasonal anime OP/ED directory with source-traceable song records, reviewed performance credits, local in-browser search, a same-origin static JSON API, and offline Service Worker precaching.

Astro · Directory site

Nuxt_Mkdirs

Nuxt_Mkdirs

An open-source directory site template built with Nuxt and Sanity CMS, with three homepage layouts, Google/GitHub OAuth login, Stripe and Creem payment channels, Resend transactional email and newsletter subscriptions, and optional AI auto-fill for submissions.

Nuxt · Blog

developer-resources

developer-resources

A Nuxt and Vue directory site that lists free or freemium developer resources—icons, UI templates, illustrations, app ideas, and hosting services—across Design, App Ideas, and Hosting categories. It offers category browsing, contribution guidelines, and a contributors page.

Nuxt · Directory site

fastapi-nano

fastapi-nano

A FastAPI backend template that mimics Flask's blueprint directory structure, splitting API logic into independent packages and exposing endpoints centrally in routes.

Flask · Directory site