├── .env.example
├── .github
    └── workflows
    │   └── studio.yml
├── .gitignore
├── LICENSE
├── README.md
├── app.config.ts
├── app.vue
├── components
    ├── OgImage
    │   ├── CoverImage.vue
    │   ├── Custom.vue
    │   ├── Emoji.vue
    │   └── Simple.vue
    ├── app
    │   ├── Footer.vue
    │   ├── Layout.vue
    │   ├── Logo.vue
    │   ├── Navbar.vue
    │   ├── Renderer.vue
    │   └── header
    │   │   ├── Banner.vue
    │   │   ├── ColorSelector.vue
    │   │   └── Dot.vue
    ├── content
    │   ├── PreRenderTags.vue
    │   ├── advertisements
    │   │   ├── FeatureExample.vue
    │   │   └── SponsorExample.vue
    │   ├── blog
    │   │   └── BlogGrid.vue
    │   ├── directory
    │   │   ├── DirectoryGrid.vue
    │   │   └── Search.vue
    │   ├── general
    │   │   ├── LinkButton.vue
    │   │   ├── NewsletterForm.vue
    │   │   ├── NewsletterWithCTA.vue
    │   │   └── Tweet.vue
    │   ├── hero
    │   │   ├── CenterHero.vue
    │   │   ├── ImageHero.vue
    │   │   ├── SimpleLeftHero.vue
    │   │   └── TwoColumnHero.vue
    │   ├── prose
    │   │   └── ProseA.vue
    │   └── submit
    │   │   └── TallyForm.vue
    ├── directory
    │   ├── EmptyQueryIndicator.vue
    │   ├── Featured
    │   │   ├── Recommendation.vue
    │   │   └── Tag.vue
    │   ├── Item.vue
    │   ├── PureGrid.vue
    │   └── SubmitBox.vue
    ├── document
    │   ├── Empty.vue
    │   ├── NotFound.vue
    │   └── Prose.vue
    └── ui
    │   ├── Button.vue
    │   ├── Card.vue
    │   ├── ShadowCard.vue
    │   ├── Tag.vue
    │   └── tag
    │       ├── Grid.vue
    │       └── Select.vue
├── composables
    ├── useCurrentPage.ts
    ├── useDirectory.ts
    ├── useFeatured.ts
    ├── useKeyFocus.ts
    └── useTags.ts
├── content.config.ts
├── content
    ├── advertise.md
    ├── blog.md
    ├── blog
    │   └── blog-post-1.md
    ├── dir
    │   └── starter.md
    ├── index.md
    ├── legal
    │   ├── privacy-policy.md
    │   └── terms-of-service.md
    └── submit.md
├── eslint.config.mjs
├── layouts
    ├── card.vue
    ├── default.vue
    ├── thin.vue
    └── wide.vue
├── middleware
    └── setLayout.ts
├── nuxt.config.ts
├── nuxt.schema.ts
├── package.json
├── pages
    ├── [...slug].vue
    └── tags
    │   └── [slug].vue
├── pnpm-lock.yaml
├── public
    ├── favicon.ico
    ├── logo.png
    └── test.jpg
├── tailwind.config.ts
├── tsconfig.json
├── types
    └── Tag.ts
└── utils
    ├── formatString.ts
    └── setSeo.ts


/.env.example:
--------------------------------------------------------------------------------
1 | POSTHOG_PUBLIC_KEY=
2 | POSTHOG_HOST=


--------------------------------------------------------------------------------
/.github/workflows/studio.yml:
--------------------------------------------------------------------------------
 1 | 
 2 | name: studio-nuxt-build
 3 | run-name: studio nuxt build
 4 | 
 5 | on:
 6 |   # Runs on pushes targeting the default branch
 7 |   push:
 8 |     branches:
 9 |       - 'main'
10 | 
11 |   # Allows you to run this workflow manually from the Actions tab
12 |   workflow_dispatch:
13 | 
14 | # Add write workflow permissions
15 | permissions:
16 |   contents: write
17 | 
18 | # Allow one concurrent deployment
19 | concurrency:
20 |   group: "pages"
21 |   cancel-in-progress: true
22 | 
23 | jobs:
24 |   # Build job
25 |   build-and-deploy:
26 |     runs-on: ${{ matrix.os }}
27 |     defaults:
28 |       run:
29 |         working-directory: .
30 | 
31 |     strategy:
32 |       matrix:
33 |         os: [ubuntu-latest]
34 |         node: [20]
35 | 
36 |     steps:
37 |       - name: Checkout
38 |         uses: actions/checkout@v4
39 | 
40 |       - name: Identify package manager
41 |         id: pkgman
42 |         run: |
43 |           cache=`[ -f "./pnpm-lock.yaml" ] && echo "pnpm" || ([ -f "./package-lock.json" ] && echo "npm" || ([ -f "./yarn.lock" ] && echo "yarn" || echo ""))`
44 |           package_manager=`[ ! -z "$cache" ] && echo "$cache" || echo "pnpm"`
45 |           echo "cache=$cache" >> $GITHUB_OUTPUT
46 |           echo "package_manager=$package_manager" >> $GITHUB_OUTPUT
47 | 
48 |       - uses: pnpm/action-setup@v4
49 |         if: ${{ steps.pkgman.outputs.package_manager == 'pnpm' }}
50 |         name: Install pnpm
51 |         id: pnpm-install
52 | 
53 |       - uses: actions/setup-node@v4
54 |         with:
55 |           version: ${{ matrix.node }}
56 |           cache: ${{ steps.pkgman.outputs.cache }}
57 | 
58 |       - name: Install dependencies
59 |         run: ${{ steps.pkgman.outputs.package_manager }} install
60 | 
61 |       - name: Generate
62 |         run: npx nuxi build --preset github_pages
63 |         env:
64 |           NUXT_CONTENT_PREVIEW_API: https://api.nuxt.studio
65 |           
66 | 
67 |       # Deployment job
68 |       - name: Deploy 🚀
69 |         uses: JamesIves/github-pages-deploy-action@v4
70 |         with:
71 |           folder: ./.output/public
72 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Mark Bruderer
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   <h1>Minted Directory Template</h1>
 3 |   <p>Markdown driven directory template. Built with Nuxt, Nuxt Content and Tailwindcss. Optimized for SEO. Beautiful Customizable Style</p>
 4 | </div>
 5 | 
 6 | <br/>
 7 | 
 8 | <div align="center">
 9 |   <img src="https://github.com/user-attachments/assets/952a6903-841b-4102-a34b-d6f297079e03" width="85%" alt="Minted Directory Screenshot" />
10 | </div>
11 | 
12 | <br/>
13 | 
14 | Learn more at [minteddirectory.com](https://minteddirectory.com)
15 | 
16 | Read the [docs](https://minteddirectory.com/docs)
17 | 
18 | ### Features:
19 | + 🖌️ Add Listings with markdown.
20 | + 🔋 Batteries included for SEO (nuxt seo module).
21 | + 💻 Pre-built components for directories.
22 | + 💅 Customizable style.
23 | + 🌙 Dark/Light mode
24 | + 💸 Sponsored Content
25 | 
26 | ## Getting Started
27 | 
28 | ### Local Development
29 | 
30 | Duplicate the template then clone the repository.
31 | 
32 | ```sh
33 | git clone git@github.com:youraccount/projectname.git my-directory
34 | ```
35 | 
36 | Or use the github cli to create a repository based on the template and clone in one command:
37 | 
38 | ```sh
39 | gh repo create my-directory --template masterkram/minted-directory --private --clone
40 | ```
41 | 
42 | Go to the cloned folder:
43 | ```sh
44 | cd my-directory
45 | ```
46 | 
47 | Install dependencies
48 | 
49 | ```sh
50 | pnpm install
51 | ```
52 | 
53 | Run the website:
54 | 
55 | ```sh
56 | pnpm dev
57 | ```
58 | 
59 | Congrats :tada:
60 | 
61 | You can start customizing and building your directory.
62 | 
63 | ### Customization
64 | 
65 | To customize the directory style:
66 | + Change the `primary`, `secondary` color and `fontFamily` in `tailwind.config.ts`
67 | + Customize the `app.config.ts`
68 | 
69 | Read about the possible changes to the app config [here](https://minteddirectory/docs/settings).
70 | 
71 | ### Adding Content
72 | 
73 | Add listings by adding markdown files to `/content/dir`
74 | 
75 | Add blog articles by adding markdown files to `/content/blog`
76 | 
77 | ### Deployment
78 | 
79 | Deploy as a pre-rendered, static site for best SEO performance:
80 | 
81 | ```bash
82 | pnpm run generate
83 | ```
84 | 
85 | Check out the [deployment documentation](https://minteddirectory.com/docs/deployment) for more information.
86 | 
87 | ## Community
88 | 
89 | [Join the discord](https://discord.gg/5UbrTNzX7y)
90 | 


--------------------------------------------------------------------------------
/app.config.ts:
--------------------------------------------------------------------------------
  1 | export default defineAppConfig({
  2 |   general: {
  3 |     title: 'Minted Directory',
  4 |     logo: '',
  5 |     iconLogo: 'fluent-emoji-flat:leaf-fluttering-in-wind',
  6 |     language: 'en',
  7 |   },
  8 |   site: {
  9 |     // override the general settings for seo tags.
 10 |     // leave empty for general priority.
 11 |     // url is necessary for correct function of seo module.
 12 |     name: 'Minted Directory',
 13 |     description: 'Example Description',
 14 |     url: 'https://example.com',
 15 |     favicon: {
 16 |       image: '',
 17 |       emoji: '🍃',
 18 |     },
 19 |   },
 20 |   directory: {
 21 |     listingPageLayout: 'card',
 22 |     search: {
 23 |       placeholder: 'Search among {0} tools',
 24 |       icon: 'tabler:bow',
 25 |       tags: {
 26 |         // options: none,select,show-all,
 27 |         display: 'select',
 28 |         intersection: false,
 29 |       },
 30 |     },
 31 |     grid: {
 32 |       list: false,
 33 |       emptyState: {
 34 |         text: 'Seems that this entry is missing from the archives.',
 35 |         // options: button, simple, link
 36 |         type: 'button',
 37 |         icon: 'tabler:exclamation-mark',
 38 |       },
 39 |       card: {
 40 |         image: true,
 41 |         // options: dashed, shadow, outline, bullet
 42 |         type: 'shadow',
 43 |       },
 44 |       submit: {
 45 |         show: true,
 46 |         first: false,
 47 |         title: 'Submit a template',
 48 |         description:
 49 |           'Submit a template to show off a good project to other people.',
 50 |         hideable: true,
 51 |       },
 52 |     },
 53 |     featured: {
 54 |       showOnAllPages: true,
 55 |       showOnSide: true,
 56 |       icon: 'tabler:star',
 57 |       labelForCard: 'Featured ✨',
 58 |     },
 59 |     tags: [
 60 |       { name: 'SAAS', color: 'blue' },
 61 |       { name: 'dashboard', color: 'green' },
 62 |       { name: 'landing-page' },
 63 |       { name: 'toolbox' },
 64 |       { name: 'agency' },
 65 |       { name: 'markdown-based' },
 66 |       { name: 'basics', color: 'indigo' },
 67 |     ],
 68 |     tagPages: {
 69 |       title: 'Available {0} products:',
 70 |       description:
 71 |         'View all available tools and templates in the {0} category...',
 72 |     },
 73 |   },
 74 |   header: {
 75 |     banner: {
 76 |       show: true,
 77 |       text: 'Create your own directory website in minutes.',
 78 |       link: 'https://minteddirectory.com',
 79 |       brandText: 'MintedDirectory',
 80 |     },
 81 |     navbar: {
 82 |       colorModeSelector: true,
 83 |       links: [
 84 |         { name: 'Directory', to: '/' },
 85 |         { name: 'Blog', to: '/blog' },
 86 |         { name: 'Advertise', to: '/advertise' },
 87 |         {
 88 |           name: 'Analytics',
 89 |           to: 'https://us.posthog.com/shared/7dgSk4cvgNYnJwBu6R47kZXHBUBJWQ',
 90 |           target: '_blank',
 91 |         },
 92 |       ],
 93 |     },
 94 |     actionButton: {
 95 |       text: 'Submit a listing',
 96 |       href: '/submit',
 97 |     },
 98 |   },
 99 |   footer: {
100 |     description: "Best directory for my niche.",
101 |     navigation: [
102 |       {
103 |         title: "Directory", links: [{ title: "Submit", link: "/submit" }, { title: "Advertise", link: "/advertise" }],
104 |       },
105 |       {
106 |         title: "Categories", links: [
107 |           { title: "SAAS", link: "/tags/saas" },
108 |           { title: "Dashboard", link: "/tags/dashboard" },
109 |           { title: "Landing Page", link: "/tags/landing-page" },
110 |           { title: "Toolbox", link: "/tags/toolbox" },
111 |         ],
112 |       },
113 |       {
114 |         title: "Blog", links: [{ title: "Articles", link: "/blog" }],
115 |       },
116 |       {
117 |         title: "Legal", links: [{ title: "Privacy Policy", link: "/legal/terms-of-service" }, { title: "Terms of Service", link: "/legal/privacy-policy" }],
118 |       },
119 |     ],
120 |     socials: {
121 |       github: {
122 |         link: '',
123 |         icon: 'tabler:brand-github',
124 |       },
125 |       facebook: {
126 |         link: '',
127 |         icon: 'tabler:brand-facebook',
128 |       },
129 |       instagram: {
130 |         link: '',
131 |         icon: 'tabler:brand-instagram',
132 |       },
133 |       x: {
134 |         link: 'https://x.com/mark_bruderer',
135 |         icon: 'tabler:brand-twitter',
136 |       },
137 |       youtube: {
138 |         link: 'https://www.youtube.com/@mark_hacks',
139 |         icon: 'tabler:brand-youtube',
140 |       },
141 |     },
142 |   },
143 |   ui: {
144 |     icons: {
145 |       dark: 'tabler:moon',
146 |       light: 'tabler:sun',
147 |     },
148 |   },
149 | });
150 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const config = useAppConfig();
 3 | useHead({
 4 |   htmlAttrs: {
 5 |     lang: config.general.language,
 6 |   },
 7 |   link: [
 8 |     {
 9 |       rel: 'icon',
10 |       type: 'image/png',
11 |       href: '/logo.png',
12 |     },
13 |   ],
14 | });
15 | </script>
16 | 
17 | <template>
18 |   <AppLayout>
19 |     <NuxtLayout>
20 |       <DocumentProse>
21 |         <NuxtPage class="page-enter-active" />
22 |       </DocumentProse>
23 |     </NuxtLayout>
24 |   </AppLayout>
25 | </template>
26 | 
27 | <style>
28 | .dark body {
29 |   @apply bg-gray-800;
30 | }
31 | 
32 | @keyframes fadeInUp {
33 |   from {
34 |     opacity: 0;
35 |     transform: translateY(.5rem)
36 |   }
37 | 
38 |   to {
39 |     opacity: 1;
40 |     transform: none
41 |   }
42 | }
43 | 
44 | @keyframes fadeOutDown {
45 |   from {
46 |     opacity: 1;
47 |   }
48 | 
49 |   to {
50 |     opacity: 0;
51 |     transform: translateY(.5rem)
52 |   }
53 | }
54 | 
55 | .page-enter-active {
56 |   animation: fadeInUp .6s forwards
57 | }
58 | 
59 | .page-leave-active {
60 |   animation: fadeOutDown .6s backwards;
61 | }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/components/OgImage/CoverImage.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps({
 3 |   path: String,
 4 |   title: String,
 5 |   description: String,
 6 |   cover: String,
 7 |   author: Object,
 8 | });
 9 | </script>
10 | 
11 | <template>
12 |   <div class="w-full h-full flex flex-col items-center justify-center text-white bg-gray-900"
13 |     :style="{ padding: '30px 45px' }">
14 |     <div class="pb-10 justify-center items-center flex flex-col">
15 |       <img v-if="cover" :src="cover" width="432" height="243" :style="{ borderRadius: '8px', overflow: 'hidden' }" />
16 |       <h1 :style="{
17 |       fontSize: '65px',
18 |       lineHeight: '85px',
19 |       margin: '20px 0 0 0',
20 |       padding: '0',
21 |     }">
22 |         {{ title }}
23 |       </h1>
24 |       <p :style="{ fontSize: '29px', lineHeight: '45px' }" class="mx-10 mt-5 text-gray-400">
25 |         {{ description }}
26 |       </p>
27 |     </div>
28 |   </div>
29 | </template>


--------------------------------------------------------------------------------
/components/OgImage/Custom.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps({
 3 |   path: String,
 4 |   title: String,
 5 |   description: String,
 6 |   cover: String,
 7 |   author: Object,
 8 | });
 9 | </script>
10 | 
11 | <template>
12 |   <div
13 |     class="w-full h-full flex flex-col items-center justify-center text-white bg-gray-900"
14 |     :style="{ padding: '30px 45px' }"
15 |   >
16 |     <div class="pb-10 justify-center items-center flex flex-col">
17 |       <img
18 |         v-if="cover"
19 |         :src="cover"
20 |         width="432"
21 |         height="243"
22 |         :style="{ borderRadius: '8px', overflow: 'hidden' }"
23 |         class="object-cover object-center"
24 |       >
25 |       <h1
26 |         :style="{
27 |           fontSize: '65px',
28 |           lineHeight: '85px',
29 |           margin: '20px 0 0 0',
30 |           padding: '0',
31 |         }"
32 |       >
33 |         {{ title }}
34 |       </h1>
35 |       <p
36 |         :style="{ fontSize: '29px', lineHeight: '45px' }"
37 |         class="mx-10 mt-5 text-gray-400"
38 |       >
39 |         {{ description }}
40 |       </p>
41 |     </div>
42 |   </div>
43 | </template>
44 | 


--------------------------------------------------------------------------------
/components/OgImage/Emoji.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps(['emoji']);
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="w-full h-full flex flex-col items-center justify-center bg-gray-900" :style="{ padding: '30px 45px' }">
 7 |     <div class="pb-10 justify-center items-center flex flex-col text-9xl">
 8 |       {{ emoji ?? '😎' }}
 9 |     </div>
10 |   </div>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/components/OgImage/Simple.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div></div>
3 | </template>


--------------------------------------------------------------------------------
/components/app/Footer.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | 
 3 | const config = useAppConfig();
 4 | const socials = computed(() => config.footer.socials ? Object.values(config.footer.socials).filter(i => i?.icon && i?.link) : []);
 5 | 
 6 | const navigation = computed(() => config.footer.navigation ? Object.values(config.footer.navigation) : []);
 7 | </script>
 8 | 
 9 | <template>
10 |   <footer
11 |     class="border-t dark:border-gray-600 font-display"
12 |     aria-labelledby="footer-heading"
13 |   >
14 |     <h2
15 |       id="footer-heading"
16 |       class="sr-only"
17 |     >
18 |       Footer
19 |     </h2>
20 |     <div class="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-32">
21 |       <div class="xl:grid xl:grid-cols-3 xl:gap-8">
22 |         <div class="space-y-8">
23 |           <AppLogo />
24 |           <div class="flex space-x-6">
25 |             <a
26 |               v-for="(item, key) in socials"
27 |               :key="item?.link"
28 |               :href="item?.link"
29 |               class="text-gray-400 hover:text-gray-500"
30 |             >
31 |               <span class="sr-only">{{ key }}</span>
32 |               <Icon
33 |                 :name="item.icon!"
34 |                 class="h-6 w-6"
35 |                 aria-hidden="true"
36 |               />
37 |             </a>
38 |           </div>
39 |         </div>
40 |         <div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
41 |           <div v-for="count in 2" class="md:grid md:grid-cols-2 md:gap-8">
42 |             <div v-if="navigation[count - 1]" >
43 |               <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">{{ navigation[count - 1].title }}
44 |               </h3>
45 |               <ul
46 |                 role="list"
47 |                 class="mt-6 space-y-4"
48 |               >
49 |                 <li
50 |                   v-for="item in navigation[count - 1].links"
51 |                   :key="item.title"
52 |                 >
53 |                   <NuxtLink
54 |                     :to="item.link"
55 |                     class="text-sm leading-6 text-gray-600 dark:text-gray-300 hover:dark:text-gray-400 hover:text-gray-900"
56 |                   >
57 |                     {{ item.title }}
58 |                   </NuxtLink>
59 |                 </li>
60 |               </ul>
61 |             </div>
62 |             <div class="mt-10 md:mt-0" v-if="navigation[count + 1]">
63 |               <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">{{ navigation[count + 1].title }}
64 |               </h3>
65 |               <ul
66 |                 role="list"
67 |                 class="mt-6 space-y-4"
68 |               >
69 |                 <li
70 |                   v-for="item in navigation[count + 1].links"
71 |                   :key="item.title"
72 |                 >
73 |                   <a
74 |                     :href="item.link"
75 |                     class="text-sm leading-6 text-gray-600 dark:text-gray-300 hover:dark:text-gray-400 hover:text-gray-900"
76 |                   >{{
77 |                     item.title }}</a>
78 |                 </li>
79 |               </ul>
80 |             </div>
81 |           </div>
82 |         </div>
83 |       </div>
84 |       <div class="mt-16 border-t border-gray-900/10 dark:border-gray-600 pt-8 sm:mt-20 lg:mt-24">
85 |         <p class="text-xs leading-5 text-gray-500">
86 |           &copy; {{ new Date().getFullYear() }} {{ config.general.title }} All
87 |           rights
88 |           reserved.
89 |         </p>
90 |       </div>
91 |     </div>
92 |   </footer>
93 | </template>
94 | 


--------------------------------------------------------------------------------
/components/app/Layout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="font-display grid min-h-screen grid-rows-[auto,auto,1fr,auto] bg-white dark:bg-gray-800 transition-colors"
 4 |   >
 5 |     <AppHeaderBanner />
 6 |     <AppNavbar />
 7 |     <div class="w-full h-full">
 8 |       <slot />
 9 |     </div>
10 |     <AppFooter />
11 |   </div>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/components/app/Logo.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const config = useAppConfig();
 3 | </script>
 4 | 
 5 | <template>
 6 |   <NuxtLink
 7 |     to="/"
 8 |     class="flex items-center space-x-3 rtl:space-x-reverse"
 9 |   >
10 |     <NuxtImg
11 |       v-if="config?.general?.logo"
12 |       sizes="32px"
13 |       :src="config.general.logo"
14 |       class="h-8"
15 |       :alt="`${config?.general.title} Logo`"
16 |     />
17 |     <Icon
18 |       v-else-if="config?.general?.iconLogo"
19 |       class="w-7 h-7 text-gray-600 dark:text-white"
20 |       :name="config?.general?.iconLogo"
21 |     />
22 |     <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">{{ config.general.title
23 |     }}</span>
24 |   </NuxtLink>
25 | </template>
26 | 


--------------------------------------------------------------------------------
/components/app/Navbar.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
  3 | 
  4 | const config = useAppConfig().header;
  5 | 
  6 | const route = useRoute();
  7 | 
  8 | const routesRef = computed(() => {
  9 |   if (!config.navbar?.links) {
 10 |     return [];
 11 |   }
 12 |   return config.navbar?.links.map(
 13 |     (e) => {
 14 |       e['active'] = route.path.split('/')[0].includes(e.to) || route.path === e.to;
 15 |       return e;
 16 |     },
 17 |   );
 18 | });
 19 | </script>
 20 | 
 21 | <template>
 22 |   <Disclosure
 23 |     v-slot="{ open }"
 24 |     as="nav"
 25 |     class="bg-white dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600"
 26 |   >
 27 |     <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
 28 |       <div class="relative flex h-16 justify-between">
 29 |         <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
 30 |           <!-- Mobile menu button -->
 31 |           <DisclosureButton
 32 |             class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500"
 33 |           >
 34 |             <span class="absolute -inset-0.5" />
 35 |             <span class="sr-only">Open main menu</span>
 36 |             <Icon
 37 |               v-if="!open"
 38 |               name="tabler:baseline-density-medium"
 39 |               class="block h-6 w-6"
 40 |               aria-hidden="true"
 41 |             />
 42 |             <Icon
 43 |               v-else
 44 |               name="tabler:x"
 45 |               class="block h-6 w-6"
 46 |               aria-hidden="true"
 47 |             />
 48 |           </DisclosureButton>
 49 |         </div>
 50 |         <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
 51 |           <div class="flex flex-shrink-0 items-center">
 52 |             <AppLogo />
 53 |           </div>
 54 |           <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
 55 |             <template v-for="navItem in routesRef">
 56 |               <NuxtLink
 57 |                 v-if="navItem.target !== '_blank'"
 58 |                 :to="navItem.to"
 59 |                 class="inline-flex gap-2 items-center border-b-2  px-1 pt-1 text-sm font-medium"
 60 |                 :class="navItem.active ? 'border-primary-500 text-gray-900 dark:text-gray-50' : 'border-transparent hover:border-gray-300 dark:hover:border-gray-500 hover:text-gray-700 text-gray-500 dark:text-gray-200'"
 61 |               >
 62 |                 {{ navItem.name }}
 63 |               </NuxtLink>
 64 |               <a
 65 |                 v-else
 66 |                 :href="navItem.to"
 67 |                 target="_blank"
 68 |                 class="inline-flex gap-2 items-center border-b-2  px-1 pt-1 text-sm font-medium border-transparent hover:border-gray-300 hover:text-gray-700 dark:hover:border-gray-500 text-gray-500 dark:text-gray-200"
 69 |               >
 70 |                 {{ navItem.name }}
 71 |                 <Icon
 72 |                   v-if="navItem.target === '_blank'"
 73 |                   name="tabler:external-link"
 74 |                 />
 75 |               </a>
 76 |             </template>
 77 |           </div>
 78 |         </div>
 79 |         <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
 80 |           <div class="flex gap-2 items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
 81 |             <AppHeaderColorSelector
 82 |               v-if="config?.navbar?.colorModeSelector"
 83 |               class="hidden md:flex"
 84 |             />
 85 |             <NuxtLink
 86 |               :to="config?.actionButton?.href"
 87 |               class="hidden md:block text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
 88 |             >
 89 |               {{ config?.actionButton?.text }}
 90 |             </NuxtLink>
 91 |           </div>
 92 |         </div>
 93 |       </div>
 94 |     </div>
 95 | 
 96 |     <DisclosurePanel class="sm:hidden">
 97 |       <div class="space-y-1 pb-4 pt-2">
 98 |         <DisclosureButton
 99 |           v-for="item in routesRef"
100 |           as="a"
101 |           :href="item.to"
102 |           class="block border-l-4 py-2 pl-3 pr-4 text-base font-medium"
103 |           :class="item.active ? 'bg-primary-50 border-primary-500 text-primary-700' : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700'"
104 |         >
105 |           {{ item.name }}
106 |           <Icon
107 |             v-if="item.target === '_blank'"
108 |             name="tabler:external-link"
109 |           />
110 |         </DisclosureButton>
111 |       </div>
112 | 
113 |       <div class="border-t border-gray-200 pb-3 pt-4">
114 |         <div class="flex items-center px-4">
115 |           <NuxtLink
116 |             :to="config?.actionButton?.href"
117 |             class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
118 |           >
119 |             {{ config?.actionButton?.text }}
120 |           </NuxtLink>
121 |           <AppHeaderColorSelector
122 |             v-if="config?.navbar?.colorModeSelector"
123 |             class="relative ml-auto"
124 |           />
125 |         </div>
126 |       </div>
127 |     </DisclosurePanel>
128 |   </Disclosure>
129 | </template>
130 | 


--------------------------------------------------------------------------------
/components/app/Renderer.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps(['page']);
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div>
 7 |     <ContentRenderer
 8 |       v-if="page"
 9 |       :key="(page as any)._id"
10 |       :value="page"
11 |     >
12 |       <template #empty="{ data: value }">
13 |         <DocumentEmpty :value="value" />
14 |       </template>
15 |     </ContentRenderer>
16 |     <DocumentNotFound v-else />
17 |   </div>
18 | </template>
19 | 


--------------------------------------------------------------------------------
/components/app/header/Banner.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const bannerConfig = useAppConfig().header.banner;
 3 | 
 4 | const href = computed(() => {
 5 |   const link = bannerConfig?.link;
 6 |   if (link) {
 7 |     return link;
 8 |   }
 9 | 
10 |   return '#';
11 | });
12 | 
13 | const showBanner = useState('showBanner', () => true);
14 | 
15 | function removeBanner() {
16 |   showBanner.value = false;
17 | }
18 | </script>
19 | 
20 | <template>
21 |   <div
22 |     v-show="showBanner && bannerConfig?.show"
23 |     class="flex items-center justify-center gap-x-6 bg-primary-600 px-6 py-2.5 sm:px-3.5 sm:before:flex-1"
24 |   >
25 |     <p class="text-sm leading-6 text-white">
26 |       <a
27 |         :href="href"
28 |         target="_blank"
29 |         class="inline-flex items-center gap-1"
30 |       >
31 |         <strong
32 |           v-if="bannerConfig?.brandText"
33 |           class="font-semibold hidden sm:block"
34 |         >{{ bannerConfig.brandText
35 |         }}</strong>
36 |         <AppHeaderDot
37 |           v-if="bannerConfig?.brandText"
38 |           class="hidden sm:block"
39 |         />
40 |         {{ bannerConfig?.text }}
41 |         <Icon
42 |           class="hidden sm:block w-5 h-5"
43 |           name="tabler:arrow-right"
44 |         />
45 |       </a>
46 |     </p>
47 |     <div class="hidden sm:flex flex-1 justify-end items-center">
48 |       <button
49 |         type="button"
50 |         class="w-5 h-5"
51 |         @click="removeBanner"
52 |       >
53 |         <span class="sr-only">Dismiss</span>
54 |         <Icon
55 |           name="tabler:x"
56 |           class="h-5 w-5 text-white"
57 |           aria-hidden="true"
58 |         />
59 |       </button>
60 |     </div>
61 |   </div>
62 | </template>
63 | 


--------------------------------------------------------------------------------
/components/app/header/ColorSelector.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const colorMode = useColorMode();
 3 | 
 4 | const config = useAppConfig().ui.icons;
 5 | 
 6 | function toggleColorMode() {
 7 |   if (colorMode.value === 'dark') {
 8 |     colorMode.preference = 'light';
 9 |   }
10 |   else {
11 |     colorMode.preference = 'dark';
12 |   }
13 | }
14 | </script>
15 | 
16 | <template>
17 |   <button
18 |     class="flex justify-center items-center border rounded-full w-8 h-8 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:border-gray-500 transition-all"
19 |     @click="toggleColorMode"
20 |   >
21 |     <Icon
22 |       v-if="colorMode.value === 'light'"
23 |       aria-label="toggle dark mode"
24 |       :name="config?.dark ?? 'tabler:moon'"
25 |     />
26 |     <Icon
27 |       v-else
28 |       aria-label="toggle light mode"
29 |       :name="config?.light ?? 'tabler:sun'"
30 |     />
31 |   </button>
32 | </template>
33 | 


--------------------------------------------------------------------------------
/components/app/header/Dot.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     viewBox="0 0 2 2"
 4 |     class="mx-2 inline h-0.5 w-0.5 fill-current"
 5 |     aria-hidden="true"
 6 |   >
 7 |     <circle
 8 |       cx="1"
 9 |       cy="1"
10 |       r="1"
11 |     />
12 |   </svg>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/components/content/PreRenderTags.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const appConfig = useAppConfig();
 3 | 
 4 | const tags = appConfig?.directory?.tags || [];
 5 | 
 6 | const routesToPrerender = tags.map(tag => `/tags/${tag?.name}`);
 7 | 
 8 | prerenderRoutes(routesToPrerender);
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/components/content/advertisements/FeatureExample.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const item = computed(() => ({
 3 |   title: "My Awesome Product",
 4 |   description: "This product is a great way to do things.",
 5 |   featured: true,
 6 | }));
 7 | </script>
 8 | 
 9 | 
10 | <template>
11 |   <DirectoryItem class="block w-96 h-42 my-8" :item="item" />
12 | </template>


--------------------------------------------------------------------------------
/components/content/advertisements/SponsorExample.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | defineProps(['title', 'description']);
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="bg-gradient-to-r from-indigo-400 to-indigo-500 rounded-md shadow-sm w-full p-8 flex flex-col">
 7 |     <span class="text-indigo-100 text-sm font-medium">Sponsor</span>
 8 |     <span class="text-white text-2xl font-semibold">
 9 |       {{ title }}
10 |     </span>
11 |     <span class="text-white">{{ description }}</span>
12 |   </div>
13 | </template>


--------------------------------------------------------------------------------
/components/content/blog/BlogGrid.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { data } = await useAsyncData('blog', () => queryCollection('blog').all());
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="not-prose grid grid-cols-1 lg:grid-cols-4 gap-4">
 7 |     <UiCard
 8 |       v-for="i in data"
 9 |       :key="i.id"
10 |       :full-path="true"
11 |       :item="i"
12 |     />
13 |   </div>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/components/content/directory/DirectoryGrid.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const config = useAppConfig().directory.grid;
 3 | 
 4 | const search: Ref<string> = useState('search');
 5 | const tags: Ref<string[]> = useState('tags');
 6 | 
 7 | const { data } = await useDirectory();
 8 | 
 9 | const directoryListings = computed(() => {
10 |   let filteredData = data.value;
11 |   if (!filteredData) {
12 |     return [];
13 |   }
14 | 
15 |   if (search.value) {
16 |     filteredData = filteredData?.filter(e =>
17 |       (e.title?.toLowerCase() + e.description?.toLowerCase()).includes(search.value.toLowerCase()),
18 |     );
19 |   }
20 | 
21 |   if (tags.value.length > 0) {
22 |     filteredData = filteredData?.filter(e =>
23 |       tags.value.every(tag => e.tags?.includes(tag)),
24 |     );
25 |   }
26 | 
27 |   return filteredData;
28 | });
29 | </script>
30 | 
31 | <template>
32 |   <DirectoryPureGrid
33 |     :listings="directoryListings ?? []"
34 |     :show-submit="config?.submit?.show"
35 |     :submit-first="config?.submit?.first"
36 |   />
37 | </template>
38 | 


--------------------------------------------------------------------------------
/components/content/directory/Search.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const search: Ref<string> = useState('search');
 3 | const selectedTags: Ref<string[]> = useState('tags', () => []);
 4 | 
 5 | const searchConfig = useAppConfig().directory.search;
 6 | const searchPlaceholder = await getSearchPlaceholder();
 7 | 
 8 | async function getSearchPlaceholder() {
 9 |   if (searchConfig?.placeholder && searchConfig.placeholder.includes('{0}')) {
10 |     const { data: count } = await useAsyncData('content-count', () => queryCollection('directory').count());
11 |     return formatString(searchConfig?.placeholder ?? 'Search among {0} listings', count.value);
12 |   }
13 | 
14 |   return searchConfig?.placeholder ?? 'Search';
15 | }
16 | 
17 | const searchInput = useKeyFocus();
18 | </script>
19 | 
20 | <template>
21 |   <div class="mb-10 not-prose">
22 |     <div class="mt-2 flex rounded-md shadow-sm">
23 |       <div class="relative flex flex-grow items-stretch focus-within:z-10">
24 |         <div
25 |           v-if="searchConfig?.icon"
26 |           class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
27 |         >
28 |           <Icon
29 |             :name="searchConfig.icon"
30 |             class="h-5 w-5 text-gray-400"
31 |             aria-hidden="true"
32 |           />
33 |         </div>
34 |         <input
35 |           ref="searchInput"
36 |           v-model="search"
37 |           class="block w-full rounded-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 dark:active:ring-primary-400 dark:bg-gray-700 dark:ring-gray-600 dark:text-gray-200 dark:placeholder:text-gray-400"
38 |           :class="searchConfig?.icon ? 'pl-10' : ''"
39 |           :placeholder="searchPlaceholder"
40 |         >
41 |         <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
42 |           <kbd
43 |             class="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400 dark:border-gray-500 dark:text-gray-500"
44 |           >⌘K</kbd>
45 |         </div>
46 |       </div>
47 |     </div>
48 |     <UiTagSelect v-if="searchConfig?.tags?.display === 'select'" />
49 |     <UiTagGrid v-else-if="searchConfig?.tags?.display === 'show-all'" />
50 |   </div>
51 | </template>
52 | 


--------------------------------------------------------------------------------
/components/content/general/LinkButton.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps(['href', 'icon', 'color']);
 3 | const usedColor: string = props.color ? props.color : 'primary';
 4 | </script>
 5 | 
 6 | <template>
 7 |   <a :href="href" target="_blank"
 8 |     class="not-prose inline-flex items-center gap-x-2 rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
 9 |     :class="usedColor">
10 |     <Icon v-if="icon" :name="icon" class="-ml-0.5 h-5 w-5" aria-hidden="true" />
11 |     <slot />
12 |   </a>
13 | </template>
14 | 
15 | <style scoped lang="postcss">
16 | .blue {
17 |   @apply bg-blue-600 hover:bg-blue-500 focus-visible:outline-blue-600;
18 | }
19 | 
20 | .primary {
21 |   @apply bg-primary-600 hover:bg-primary-600 focus-visible:outline-primary-600;
22 | }
23 | 
24 | .indigo {
25 |   @apply bg-indigo-600 hover:bg-indigo-600 focus-visible:outline-indigo-600;
26 | }
27 | </style>


--------------------------------------------------------------------------------
/components/content/general/NewsletterForm.vue:
--------------------------------------------------------------------------------
1 | <template></template>


--------------------------------------------------------------------------------
/components/content/general/NewsletterWithCTA.vue:
--------------------------------------------------------------------------------
1 | <template></template>


--------------------------------------------------------------------------------
/components/content/general/Tweet.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const colorMode = useColorMode();
 3 | const id = useId();
 4 | 
 5 | const props = defineProps({
 6 |   id: {
 7 |     type: String,
 8 |     required: true
 9 |   }
10 | });
11 | 
12 | 
13 | const { onLoaded } = useScript('https://platform.twitter.com/widgets.js');
14 | 
15 | function createTweet() {
16 |   const tweetContainer = document.getElementById(id);
17 | 
18 |   twttr.widgets.createTweet(
19 |     props.id,
20 |     tweetContainer,
21 |     {
22 |       theme: colorMode.value === 'dark' ? 'dark' : ''
23 |     }
24 |   );
25 | }
26 | 
27 | function switchTweetTheme(currentTheme, targetTheme) {
28 |   var tweets = document.querySelectorAll('[data-tweet-id]');
29 | 
30 |   tweets.forEach(function (tweet) {
31 |     var src = tweet.getAttribute("src");
32 |     tweet.setAttribute("src", src.replace("theme=" + currentTheme, "theme=" + targetTheme));
33 |   });
34 | }
35 | 
36 | onLoaded(() => {
37 |   createTweet();
38 | });
39 | 
40 | watch(() => colorMode.value, (newTheme, oldTheme) => {
41 |   switchTweetTheme(oldTheme, newTheme);
42 | }, { deep: true });
43 | </script>
44 | 
45 | <template>
46 |   <div :id="id"></div>
47 | </template>
48 | 
49 | <style>
50 | .twitter-tweet iframe {
51 |   color-scheme: light;
52 | }
53 | </style>


--------------------------------------------------------------------------------
/components/content/hero/CenterHero.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps<{
 3 |   icon?: string;
 4 | }>();
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div class="text-center pt-20 pb-10 gap-8">
 9 |     <h1 class="dashedcue text-5xl text-balance font-extrabold tracking-tight inline-flex gap-2">
10 |       <Icon
11 |         v-if="icon"
12 |         :name="icon"
13 |       />
14 |       <slot
15 |         mdc-unwrap="h1"
16 |       />
17 |     </h1>
18 |     <p
19 |       v-if="$slots.description"
20 |       class="leading-8"
21 |     >
22 |       <slot name="description" />
23 |     </p>
24 |   </div>
25 | </template>
26 | 


--------------------------------------------------------------------------------
/components/content/hero/ImageHero.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps<{
 3 |   src?: string;
 4 |   icon?: string;
 5 | }>();
 6 | </script>
 7 | 
 8 | <template>
 9 |   <div class="relative p-14 mb-14 not-prose">
10 |     <img
11 |       :src="src"
12 |       alt=""
13 |       class="absolute inset-0 -z-10 h-full w-full object-cover rounded-xl"
14 |     >
15 |     <div class="absolute inset-0 h-full w-full rounded-xl bg-black/50 -z-10" />
16 |     <div class="mx-auto max-w-2xl py-16 sm:py-32 lg:py-32">
17 |       <div
18 |         v-if="icon"
19 |         class="hidden sm:mb-8 sm:flex sm:justify-center"
20 |       >
21 |         <div
22 |           class="relative flex rounded-full p-1 text-sm leading-6 text-white ring-1 ring-white/10 hover:ring-white/20"
23 |         >
24 |           <Icon
25 |             class="h-8 w-8 text-white"
26 |             :name="icon"
27 |           />
28 |         </div>
29 |       </div>
30 |       <div class="text-center">
31 |         <h1 class="text-balance text-4xl font-bold tracking-tight text-white sm:text-6xl">
32 |           <slot mdc-unwrap="h1" />
33 |         </h1>
34 |         <p
35 |           v-if="$slots.description"
36 |           class="mt-6 text-lg leading-8 text-gray-300"
37 |         >
38 |           <slot name="description" />
39 |         </p>
40 |       </div>
41 |     </div>
42 |     </img>
43 |   </div>
44 | </template>
45 | 


--------------------------------------------------------------------------------
/components/content/hero/SimpleLeftHero.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1 class="text-balance">
 4 |       <slot
 5 |         mdc-unwrap="h1"
 6 |       />
 7 |     </h1>
 8 |     <p
 9 |       v-if="$slots.description"
10 |       class="max-w-lg text-md leading-8"
11 |     >
12 |       <slot name="description" />
13 |     </p>
14 |   </div>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/components/content/hero/TwoColumnHero.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | defineProps(['src']);
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="py-24 sm:py-32 relative">
 7 |     <div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl sm:gap-y-24 grid lg:grid-cols-2 lg:items-center">
 8 |       <div>
 9 |         <h1 class="text-5xl dashedcue text-balance font-extrabold tracking-tight">
10 |           <slot
11 |             mdc-unwrap="h1"
12 |           />
13 |         </h1>
14 |         <p
15 |           v-if="$slots.description"
16 |           class="leading-8"
17 |         >
18 |           <slot name="description" />
19 |         </p>
20 |       </div>
21 |       <div class="w-full">
22 |         <NuxtImg
23 |           sizes="800px lg:1000px"
24 |           :placeholder="[400, 300]"
25 |           class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
26 |           :src="src"
27 |         />
28 |       </div>
29 |     </div>
30 |   </div>
31 | </template>
32 | 
33 | <style lang="postcss">
34 | .highlight span {
35 |   @apply bg-gray-800 text-white px-1 -rotate-6;
36 | }
37 | 
38 | .dashedcue span {
39 |   @apply underline underline-offset-4 decoration-primary-600 decoration-dashed;
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/components/content/prose/ProseA.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NuxtLink :href="props.href" :target="props.target">
 3 |     <slot />
 4 |   </NuxtLink>
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 | import type { PropType } from 'vue'
 9 | 
10 | const props = defineProps({
11 |   href: {
12 |     type: String,
13 |     default: ''
14 |   },
15 |   target: {
16 |     type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined>,
17 |     default: '_blank',
18 |     required: false
19 |   }
20 | })
21 | </script>


--------------------------------------------------------------------------------
/components/content/submit/TallyForm.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps(['embed']);
 3 | 
 4 | const loading = ref(true);
 5 | const { onLoaded } = useScript({ src: "https://tally.so/widgets/embed.js", async: true });
 6 | 
 7 | function loadTally() {
 8 |   loading.value = false;
 9 |   Tally.loadEmbeds();
10 | }
11 | 
12 | onLoaded((Tally: any) => {
13 |   loadTally();
14 | });
15 | 
16 | onMounted(() => {
17 |   if (typeof Tally !== 'undefined') {
18 |     loadTally();
19 |   }
20 | }
21 | );
22 | </script>
23 | 
24 | <template>
25 |   <div>
26 |     <div v-if="loading" class="flex gap-3 justify-center items-center">
27 |       <span>Please wait we are loading the form</span>
28 |       <Icon name="svg-spinners:90-ring-with-bg" />
29 |     </div>
30 |     <iframe :data-tally-src="embed" loading="lazy" width="100%" height="589" frameborder="0" marginheight="0"
31 |       marginwidth="0" />
32 |   </div>
33 | </template>


--------------------------------------------------------------------------------
/components/directory/EmptyQueryIndicator.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const config = useAppConfig().directory.grid;
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="col-span-4">
 7 |     <p v-if="config?.emptyState?.type === 'simple'">
 8 |       {{ config.emptyState.text }}
 9 |     </p>
10 |     <NuxtLink
11 |       v-if="config?.emptyState?.type === 'link'"
12 |       to="/submit"
13 |     >{{ config.emptyState.text }}</NuxtLink>
14 |     <div
15 |       v-if="config?.emptyState?.type === 'button'"
16 |       class="border border-dashed border-gray-200 dark:border-gray-500 flex flex-col items-center justify-center gap-3 rounded px-2 py-12"
17 |     >
18 |       <Icon
19 |         size="50"
20 |         :name="config.emptyState.icon ?? 'tabler:mood-empty'"
21 |       />
22 |       <p>
23 |         {{ config.emptyState.text }}
24 |       </p>
25 |       <NuxtLink
26 |         class="rounded"
27 |         to="/submit"
28 |       >
29 |         <UiButton>
30 |           Be the first to add it
31 |         </UiButton>
32 |       </NuxtLink>
33 |     </div>
34 |   </div>
35 | </template>
36 | 


--------------------------------------------------------------------------------
/components/directory/Featured/Recommendation.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { AsyncData } from '#app';
 3 | import type ListingContent from '~/types/Listing';
 4 | 
 5 | const { data: featured } = await useAsyncData('featured', () => queryContent('/dir').where({ featured: { $exists: true } }).only(['title', 'description', '_path', 'card_image']).findOne()) as AsyncData<ListingContent, Error | null>;
 6 | const config = useAppConfig();
 7 | const featuredExists = computed(() => featured.value);
 8 | </script>
 9 | 
10 | <template>
11 |   <div v-if="featuredExists"
12 |     class="flex flex-row flex-wrap border bg-gray-50 dark:bg-gray-700 dark:border-gray-600 border-gray-200 rounded-lg p-6 gap-3">
13 |     <div class="flex flex-col justify-between">
14 |       <div class="space-y-2 max-w-40">
15 |         <p class="font-bold text-2xl dark:text-white tracking-tight">{{ featured?.title }}</p>
16 |         <p class="text-gray-700 italic dark:text-gray-300">{{ featured?.description }}</p>
17 |       </div>
18 |       <NuxtLink class="mt-3" :to="featured._path">
19 |         <UiButton icon="tabler:click">Learn More</UiButton>
20 |       </NuxtLink>
21 |     </div>
22 |     <NuxtImg v-if="featured?.card_image" class="rounded-lg h-40" :src="featured?.card_image" />
23 |   </div>
24 | </template>


--------------------------------------------------------------------------------
/components/directory/Featured/Tag.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const config = useAppConfig();
 3 | </script>
 4 | 
 5 | <template>
 6 |   <span
 7 |     class="absolute text-sm font-medium py-0.5 group-hover:border-primary-500 -top-3 border border-300 rounded-full bg-white px-3.5 text-gray-600 dark:bg-gray-800 dark:border-gray-500 dark:text-white">
 8 |     {{ config?.directory?.featured?.labelForCard }}
 9 |   </span>
10 | </template>


--------------------------------------------------------------------------------
/components/directory/Item.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps(['item']);
 3 | </script>
 4 | 
 5 | <template>
 6 |   <NuxtLink :to="item._path"
 7 |     class="border border-dashed border-gray-200 dark:border-gray-500 hover:border-primary-400 hover:border-solid dark:hover:border-primary-300 rounded p-6 relative group transition-all">
 8 |     <DirectoryFeaturedTag v-if="item.featured" />
 9 |     <h2 class="m-0 text-lg font-semibold dark:text-gray-50">
10 |       {{ item.title }}
11 |     </h2>
12 |     <p>
13 |       {{ item.description }}
14 |     </p>
15 |     <div class="p-0 mt-2 flex flex-wrap gap-2">
16 |       <UiTag v-for="tag in item.tags" :tag="tag" />
17 |     </div>
18 |   </NuxtLink>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/components/directory/PureGrid.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { DirectoryCollectionItem } from '@nuxt/content';
 3 | 
 4 | defineProps({
 5 |   listView: { type: Boolean, default: false },
 6 |   showSubmit: { type: Boolean, default: false },
 7 |   submitFirst: {
 8 |     type: Boolean,
 9 |     default: false,
10 |   },
11 |   listings: {
12 |     type: Array<DirectoryCollectionItem>,
13 |     required: true,
14 |   },
15 | });
16 | </script>
17 | 
18 | <template>
19 |   <div
20 |     class="not-prose grid grid-cols-1 gap-4"
21 |     :class="listView ? '' : 'lg:grid-cols-4 '"
22 |   >
23 |     <DirectoryEmptyQueryIndicator v-if="listings?.length === 0" />
24 |     <DirectorySubmitBox v-if="showSubmit && submitFirst" />
25 |     <UiCard
26 |       v-for="item in listings"
27 |       :key="item.id"
28 |       :item="item"
29 |     />
30 |     <DirectorySubmitBox v-if="showSubmit && !submitFirst" />
31 |   </div>
32 | </template>
33 | 


--------------------------------------------------------------------------------
/components/directory/SubmitBox.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useCookie } from 'nuxt/app';
 3 | 
 4 | const config = useAppConfig().directory.grid;
 5 | const hidden: Ref<boolean> = useCookie('hide-submit-box');
 6 | </script>
 7 | 
 8 | <template>
 9 |   <div v-if="!hidden">
10 |     <div
11 |       v-if="config?.card?.type !== 'bullet'"
12 |       class="relative h-full block w-full space-y-2 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 p-12 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
13 |     >
14 |       <Icon
15 |         size="49"
16 |         name="tabler:package"
17 |       />
18 |       <p>
19 |         <NuxtLink
20 |           to="/submit"
21 |           class="font-bold dark:text-white underline"
22 |         >{{ config?.submit?.title }}</NuxtLink>
23 |       </p>
24 |       <p>
25 |         {{ config?.submit?.description }}
26 |       </p>
27 |     </div>
28 |     <NuxtLink
29 |       v-else
30 |       to="/submit"
31 |       class="inline-flex items-center gap-2 underline decoration-gray-300 dark:decoration-gray-600"
32 |     >
33 |       <Icon
34 |         size="22"
35 |         name="tabler:package"
36 |       />
37 |       {{ config?.submit?.description }}
38 |     </NuxtLink>
39 |   </div>
40 | </template>
41 | 


--------------------------------------------------------------------------------
/components/document/Empty.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>This page has no content yet.</h1>
 4 |     <p>We are working on the content on this page.</p>
 5 |     <NuxtLink to="/">
 6 |       <Button class="flex gap-1 items-center font-medium">
 7 |         Go Home
 8 |         <Icon name="tabler:home" />
 9 |       </Button>
10 |     </NuxtLink>
11 |   </div>
12 | </template>


--------------------------------------------------------------------------------
/components/document/NotFound.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="not-prose mx-auto flex w-full max-w-7xl flex-auto flex-col justify-center px-6 py-24 lg:px-8">
 3 |     <p class="text-base font-semibold leading-8 text-primary-600 dark:text-primary-300">404</p>
 4 |     <h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl">Page not found</h1>
 5 |     <p class="mt-6 text-base leading-7 text-gray-600 dark:text-gray-200">Sorry, we couldn’t find the page you’re looking
 6 |       for.</p>
 7 |     <div class="mt-10">
 8 |       <NuxtLink to="/">
 9 |         <UiButton>Back to home</UiButton>
10 |       </NuxtLink>
11 |     </div>
12 |   </div>
13 | </template>


--------------------------------------------------------------------------------
/components/document/Prose.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <main
3 |     class="max-w-none margin-0 font-display prose dark:prose-invert prose-pre:bg-gray-100 dark:prose-pre:bg-gray-900 hover:prose-a:text-primary-400 prose-a:font-normal prose-a:no-underline prose-a:border-dashed prose-a:border-b hover:prose-a:border-solid hover:prose-a:border-primary-400 prose-headings:text-gray-800 dark:prose-headings:text-gray-100 prose-a:border-gray-400 dark:prose-a:border-gray-400 dark:hover:prose-a:border-primary-400"
4 |   >
5 |     <slot />
6 |   </main>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/components/ui/Button.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps(['icon', 'color']);
 3 | </script>
 4 | 
 5 | <template>
 6 |   <button type="button"
 7 |     class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center">
 8 |     <Icon v-if="icon" :name="icon" class="h-4 w-4" aria-hidden="true" />
 9 |     <slot />
10 |   </button>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/components/ui/Card.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { DirectoryCollectionItem } from '@nuxt/content';
 3 | 
 4 | const cardConfig = useAppConfig().directory?.grid?.card;
 5 | 
 6 | const props = withDefaults(defineProps<{
 7 |   item: DirectoryCollectionItem;
 8 |   fullPath?: boolean;
 9 | }>(), { fullPath: false });
10 | 
11 | const link = props.fullPath ? props.item.path : `/${props.item.path.split('/')[2]}`;
12 | </script>
13 | 
14 | <template>
15 |   <NuxtLink
16 |     v-if="cardConfig?.type !== 'bullet'"
17 |     :to="link"
18 |     class="border col-span-1 border-gray-200 dark:border-gray-500 hover:border-primary-400 hover:border-solid dark:hover:border-primary-300 rounded relative group transition-all"
19 |     :class="cardConfig?.type === 'shadow' ? 'shadow-sm' : cardConfig?.type === 'dashed' ? 'border-dashed' : ''"
20 |   >
21 |     <DirectoryFeaturedTag
22 |       v-if="item.featured"
23 |       class="ml-6"
24 |     />
25 |     <NuxtImg
26 |       v-if="item.card_image"
27 |       sizes="400px"
28 |       :alt="`${item.title} banner`"
29 |       class="w-full h-48 rounded-t object-cover"
30 |       :src="item.card_image ?? '/logo.png'"
31 |     />
32 |     <div
33 |       v-else
34 |       class="w-full h-48 flex justify-center items-center rounded-t font-bold text-2xl bg-gray-200 dark:bg-gray-600"
35 |     >
36 |       {{ item.title }}
37 |     </div>
38 |     <div class="p-6">
39 |       <h3 class="m-0 text-lg font-semibold dark:text-gray-50">
40 |         {{ item.title }}
41 |       </h3>
42 |       <p class="line-clamp-4 mt-2">
43 |         {{ item.description }}
44 |       </p>
45 |       <div class="p-0 mt-2 flex gap-2 flex-wrap">
46 |         <UiTag
47 |           v-for="tag in item.tags"
48 |           :key="tag"
49 |           :tag="tag"
50 |         />
51 |       </div>
52 |     </div>
53 |   </NuxtLink>
54 |   <NuxtLink
55 |     v-else
56 |     :to="item.path"
57 |   >
58 |     <div class="inline-flex gap-2 items-center">
59 |       <img
60 |         class="h-5 w-5"
61 |         :src="item.cover ?? '/logo.png'"
62 |       >
63 |       <span class="font-semibold dark:text-gray-50">{{ item.title }}</span> -
64 |       <span class="text-gray-600 dark:text-gray-300">{{ item.description }}</span>
65 |     </div>
66 |   </NuxtLink>
67 | </template>
68 | 


--------------------------------------------------------------------------------
/components/ui/ShadowCard.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div></div>
3 | </template>


--------------------------------------------------------------------------------
/components/ui/Tag.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type Tag from '~/types/Tag';
 3 | const config = useAppConfig().directory.tags as Tag[] | undefined;
 4 | 
 5 | const props = defineProps(['tag']);
 6 | 
 7 | const configTag = config?.find(element => element.name === props.tag);
 8 | 
 9 | const tagClass = computed(() => {
10 |   return configTag?.color ? `${configTag.color}-tag` : 'gray-tag';
11 | });
12 | </script>
13 | 
14 | <template>
15 |   <span :class="tagClass">
16 |     {{ tag }}
17 |   </span>
18 | </template>
19 | 
20 | 
21 | <style scoped lang="postcss">
22 | .tag {
23 |   @apply inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset;
24 | }
25 | 
26 | .gray-tag {
27 |   @apply tag bg-gray-50 text-gray-600 ring-gray-500/10 bg-gray-400/10 dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/20;
28 | }
29 | 
30 | .green-tag {
31 |   @apply tag bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20;
32 | }
33 | 
34 | .blue-tag {
35 |   @apply tag bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30;
36 | }
37 | 
38 | .indigo-tag {
39 |   @apply tag bg-blue-50 text-indigo-700 ring-indigo-600/20 dark:bg-indigo-400/10 dark:text-indigo-400 dark:ring-indigo-400/30
40 | }
41 | </style>


--------------------------------------------------------------------------------
/components/ui/tag/Grid.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type Tag from '~/types/Tag';
 3 | 
 4 | const tags = useAppConfig().directory.tags as Tag[] | undefined;
 5 | const { selectedTags, toggleTagByName } = useTags();
 6 | </script>
 7 | 
 8 | <template>
 9 |   <div class="flex flex-wrap gap-2 mt-4">
10 |     <span
11 |       v-for="tag in tags"
12 |       class="border rounded-md px-2 py-1 hover:bg-gray-50 dark:hover:bg-gray-900 dark:border-gray-600 cursor-pointer select-none"
13 |       :class="selectedTags.includes(tag.name) ? 'border-primary-500 dark:border-primary-300' : ''"
14 |       @click="toggleTagByName(tag.name)"
15 |     >
16 |       {{ tag.name }}
17 |     </span>
18 |   </div>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/components/ui/tag/Select.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { selectedTags, availableTags, addTagWithEvent, removeTag } = useTags();
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="flex m-0 gap-4 mt-4 py-2">
 7 |     <div v-for="myTag in selectedTags"
 8 |       class="relative group border-2 shadow-sm font-semibold text-blue-500 bg-blue-600/10 rounded-lg px-1.5 py-1 inline-flex items-center justify-center"
 9 |       :class="`border-blue-500`">
10 |       <span @click="() => removeTag(myTag)"
11 |         class="absolute text-gray-500 opacity-0 transition-all group-hover:opacity-100 hover:bg-gray-100 flex items-center justify-center -top-4 left-0 bg-white rounded-full h-6 w-6 border dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-800">
12 |         <Icon name="tabler:x" />
13 |       </span>
14 |       {{ myTag }}
15 |     </div>
16 |     <select :modelValue="null" @change="addTagWithEvent"
17 |       class="border border-dashed border-gray-300 rounded-lg font-medium text-gray-500 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-400 focus:ring-primary-500 focus:ring-2 focus:border-none ring-offset-4">
18 |       <option value="" disabled selected>
19 |         Select a tag
20 |       </option>
21 |       <option v-for="tag in availableTags" :key="tag.name" :value="tag.name">{{ tag.name }}</option>
22 |     </select>
23 |   </div>
24 | </template>


--------------------------------------------------------------------------------
/composables/useCurrentPage.ts:
--------------------------------------------------------------------------------
 1 | import type { DirectoryCollectionItem, PagesCollectionItem } from '@nuxt/content';
 2 | import { useAsyncData, type AsyncData } from 'nuxt/app';
 3 | import type { RouteLocationNormalizedLoaded } from 'vue-router';
 4 | 
 5 | export function useCurrentPage(route: RouteLocationNormalizedLoaded<string | symbol>): AsyncData<DirectoryCollectionItem | PagesCollectionItem, Error | null> {
 6 |   const splitUrl = route.path.split('/');
 7 |   const lastSlug = splitUrl[splitUrl.length - 1];
 8 |   const key = `current-page-${lastSlug || 'root'}`;
 9 | 
10 |   return useAsyncData(key, async () => {
11 |     if (route.path.startsWith('/blog/')) {
12 |       const blogPage = await queryCollection('blog').path(`/blog/${lastSlug}`).first();
13 | 
14 |       if (blogPage) {
15 |         return blogPage;
16 |       }
17 |     }
18 | 
19 |     const extraPage = await queryCollection('pages').path(`/${lastSlug}`).first();
20 | 
21 |     if (extraPage) {
22 |       return extraPage;
23 |     }
24 | 
25 |     return await queryCollection('directory').path(`/dir/${lastSlug}`).first();
26 |   });
27 | }
28 | 


--------------------------------------------------------------------------------
/composables/useDirectory.ts:
--------------------------------------------------------------------------------
 1 | import type { DirectoryCollectionItem } from '@nuxt/content';
 2 | import { useAsyncData } from 'nuxt/app';
 3 | 
 4 | export function useDirectory() {
 5 |   const directoryData = useAsyncData('board', () => {
 6 |     const query = queryCollection('directory');
 7 | 
 8 |     query.select('featured', 'card_image', 'description', 'title', 'path', 'tags');
 9 | 
10 |     return query.order('featured', 'DESC').all() as Promise<DirectoryCollectionItem[]>;
11 |   });
12 | 
13 |   return directoryData;
14 | }
15 | 


--------------------------------------------------------------------------------
/composables/useFeatured.ts:
--------------------------------------------------------------------------------
1 | import type { DirectoryCollectionItem } from '@nuxt/content';
2 | import { useAsyncData, type AsyncData } from 'nuxt/app';
3 | 
4 | export function useFeatured(): AsyncData<DirectoryCollectionItem, Error | null> {
5 |   return useAsyncData('featured-listing', () =>
6 |     queryCollection('directory').where('featured', '=', 'true').first(),
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/composables/useKeyFocus.ts:
--------------------------------------------------------------------------------
 1 | export default function () {
 2 |   const searchInput = ref();
 3 | 
 4 |   const keyListener = function (e: KeyboardEvent) {
 5 |     if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
 6 |       e.preventDefault();
 7 |       searchInput.value.focus();
 8 |     }
 9 |   };
10 | 
11 |   onMounted(() => {
12 |     document.body.addEventListener('keydown', keyListener);
13 |   });
14 | 
15 |   onBeforeUnmount(() => {
16 |     document.body.removeEventListener('keydown', keyListener);
17 |   });
18 | 
19 |   return searchInput;
20 | }
21 | 


--------------------------------------------------------------------------------
/composables/useTags.ts:
--------------------------------------------------------------------------------
 1 | import { computed } from 'vue';
 2 | import type Tag from '~~/types/Tag';
 3 | import { useState } from '#app';
 4 | import { useAppConfig } from '#imports';
 5 | 
 6 | export function useTags() {
 7 |   const selectedTags = useState<string[]>('tags', () => []);
 8 |   const tags = useAppConfig().directory.tags as Tag[] | undefined;
 9 | 
10 |   const availableTags = computed((): Tag[] => {
11 |     if (!tags) {
12 |       return [];
13 |     }
14 |     return tags.filter(
15 |       (e: Tag) => e && !selectedTags.value.includes((e as Tag).name),
16 |     );
17 |   });
18 | 
19 |   function removeTag(myTag: string) {
20 |     const index = selectedTags.value.indexOf(myTag);
21 |     if (index > -1) {
22 |       selectedTags.value.splice(index, 1);
23 |     }
24 |   }
25 | 
26 |   function addTagWithEvent(event: Event) {
27 |     const select = event.target as HTMLSelectElement;
28 |     const selectedValue = select.value;
29 | 
30 |     addTagByName(selectedValue);
31 |     select.value = '';
32 |   }
33 | 
34 |   function addTagByName(name: string) {
35 |     if (selectedTags.value && !selectedTags.value.includes(name)) {
36 |       selectedTags.value.push(name);
37 |     }
38 |   }
39 | 
40 |   function toggleTagByName(name: string) {
41 |     const index = selectedTags.value.indexOf(name);
42 |     if (index != -1) {
43 |       return selectedTags.value.splice(index, 1);
44 |     }
45 | 
46 |     selectedTags.value.push(name);
47 |   }
48 | 
49 |   return {
50 |     selectedTags,
51 |     availableTags,
52 |     addTagWithEvent,
53 |     toggleTagByName,
54 |     removeTag,
55 |   };
56 | }
57 | 


--------------------------------------------------------------------------------
/content.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineContentConfig, defineCollection, z } from '@nuxt/content';
 2 | 
 3 | export default defineContentConfig({
 4 |   collections: {
 5 |     pages: defineCollection({
 6 |       type: 'page',
 7 |       source: '*.md',
 8 |       schema: z.object({
 9 |         layout: z.string().optional(),
10 |         og_image: z.object({
11 |           style: z.enum(['Custom', 'Emoji', 'Simple', 'CoverImage']),
12 |           title: z.string().optional(),
13 |           description: z.string().optional(),
14 |           emoji: z.string().emoji().optional(),
15 |         }).optional(),
16 |       }),
17 |     }),
18 |     blog: defineCollection({
19 |       type: 'page',
20 |       source: 'blog/**/*.md',
21 |       schema: z.object({
22 |         og_image: z.object({
23 |           style: z.enum(['Custom', 'Emoji', 'Simple', 'CoverImage']),
24 |           title: z.string().optional(),
25 |           description: z.string().optional(),
26 |           emoji: z.string().emoji().optional(),
27 |         }).optional(),
28 |       }),
29 |     }),
30 |     directory: defineCollection({
31 |       type: 'page',
32 |       source: 'dir/**/*.md',
33 |       schema: z.object({
34 |         card_image: z.string().optional(),
35 |         cover: z.string().optional(),
36 |         featured: z.boolean().optional(),
37 |         tags: z.array(z.string()).optional(),
38 |         layout: z.enum(['wide', 'default', 'card', 'thin']).optional(),
39 |         og_image: z.object({
40 |           style: z.enum(['Custom', 'Emoji', 'Simple', 'CoverImage']),
41 |           title: z.string().optional(),
42 |           description: z.string().optional(),
43 |           emoji: z.string().emoji().optional(),
44 |         }).optional(),
45 |       }),
46 |     }),
47 |   },
48 | });
49 | 


--------------------------------------------------------------------------------
/content/advertise.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | ogImageStyle: Emoji
 4 | ogImage:
 5 |   emoji: 💶
 6 | ---
 7 | 
 8 | ::center-hero{icon="tabler:ad-2"}
 9 | # Advertise your new app!
10 | 
11 | #description
12 | Reach out to thousands of boilerplate fans, indiehackers, developers, and creators who visit and explore MintedDirectory every month. By advertising your service or product here, you’ll be able to connect directly with this engaged audience. :rocket:
13 | ::
14 | ---
15 | 
16 | ## Paid Listings
17 | Paid listings  to secure a spot in our directory by paying a fee. These listings gain more exposure than free listings, ensuring that businesses are prominently displayed to potential customers. By upgrading to a paid listing, you increase the chances of being noticed in a competitive space.
18 | 
19 | ## Featured Listings
20 | Even in free directories, we offer featured or boosted listings. Businesses can pay for a premium position at the top of the directory, ensuring maximum visibility. Featured listings are highlighted to stand out, making it easier for potential customers to find and engage with businesses.
21 | 
22 | Here’s an example of how featured listings will look to Minted Directory visitors:
23 | 
24 | :FeatureExample
25 | 
26 | ## Sponsoring
27 | Sponsors can place their brand on the homepage gaining exposure to our growing audience. This is an excellent option for businesses looking to build brand awareness and connect with our community.
28 | 
29 | :SponsorExample{title="Mike's Roofing" description="Get a free price estimation for your roof. 🏠"}
30 | 
31 | ## Contact
32 | 
33 | If you are interested in advertising on :SiteName contact us at [contact@minteddirectory.com](mailto:contact@minteddirectory.com)
34 | 


--------------------------------------------------------------------------------
/content/blog.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: wide
 3 | description: Read the best articles related to the directory.
 4 | ---
 5 | 
 6 | ::center-hero{icon="tabler:zeppelin"}
 7 | # Welcome to the Blog
 8 | 
 9 | #description
10 | Read the best articles related to the directory.
11 | And earn SEO points by writing more articles.
12 | ::
13 | 
14 | :blogGrid


--------------------------------------------------------------------------------
/content/blog/blog-post-1.md:
--------------------------------------------------------------------------------
1 | # Example Blog Post
2 | 
3 | content of the first blog post. 🌺


--------------------------------------------------------------------------------
/content/dir/starter.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | cover: /logo.png
 3 | featured: true
 4 | tags:
 5 |   - SAAS
 6 | ---
 7 | 
 8 | # First Listing
 9 | 
10 | This is an example listing to get started.


--------------------------------------------------------------------------------
/content/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: wide
 3 | og_image:
 4 |   title: My Directory
 5 |   description: A brand new directory 🎉
 6 | ---
 7 | 
 8 | ::pre-render-tags
 9 | ::
10 | 
11 | # This is your brand new directory ! 👋
12 | 
13 | You can customize this page in markdown.
14 | 
15 | See the [📚 **documentation**](https://minteddirectory.com/docs) to see how to customize your landing page.
16 | 
17 | Get inspired by other directories:
18 | + 📗 [Nuxtjs Starters](https://nuxtstarters.com)
19 | + 🏠 [FortyTwoTools](https://fortytwotools.com)
20 | 
21 | ---
22 | 
23 | Here is your starting listings grid 👇
24 | 
25 | ::search
26 | ::
27 | 
28 | ::directory-grid
29 | ::


--------------------------------------------------------------------------------
/content/legal/privacy-policy.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masterkram/minted-directory/2a52894f0cba4d483fea6939bbe1e318aeecb704/content/legal/privacy-policy.md


--------------------------------------------------------------------------------
/content/legal/terms-of-service.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masterkram/minted-directory/2a52894f0cba4d483fea6939bbe1e318aeecb704/content/legal/terms-of-service.md


--------------------------------------------------------------------------------
/content/submit.md:
--------------------------------------------------------------------------------
 1 | # Grow your business by submitting it to directory x.
 2 | 
 3 | Submit your startup to the Minted directory to showcase your business to a growing community of founders, developers, and entrepreneurs.
 4 | - directory x gets **+100** visitors each month.
 5 | - directory x gets **10** unique visitors each month.
 6 | 
 7 | ---
 8 | 
 9 | ::tally-form
10 | ---
11 | embed: https://tally.so/embed/mOYErk?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1
12 | ---
13 | ::


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import withNuxt from './.nuxt/eslint.config.mjs'
3 | 
4 | export default withNuxt(
5 |   // Your custom configs here
6 | )
7 | 


--------------------------------------------------------------------------------
/layouts/card.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const config = useAppConfig();
 3 | const { data: featured } = await useFeatured();
 4 | </script>
 5 | 
 6 | <template>
 7 |   <div class="bg-gray-100 dark:bg-gray-900 grid grid-cols-10 gap-8 py-10 h-full">
 8 |     <div
 9 |       class="max-w-prose w-full col-span-4 col-start-4 2-xl:max-w-6xl px-5 py-10 sm:px-8 sm:shadow bg-white dark:bg-gray-800 ring-1 ring-gray-300 dark:ring-gray-700 sm:rounded-lg"
10 |     >
11 |       <slot />
12 |     </div>
13 |     <div
14 |       v-if="config.directory.featured?.showOnAllPages"
15 |       class="col-span-1 lg:col-span-4 2xl:col-span-3 order-last lg:mr-20 mx-5 lg:mx-0"
16 |     >
17 |       <DirectoryFeaturedRecommendation
18 |         v-if="config?.directory?.featured?.showOnAllPages && page && !page.featured"
19 |         :to="featured?._path"
20 |       />
21 |     </div>
22 |   </div>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="max-w-prose w-full 2-xl:max-w-6xl px-5 py-10 mx-auto">
3 |     <slot />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/layouts/thin.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="max-w-xl w-full px-5 py-10 mx-auto">
3 |     <slot />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/layouts/wide.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="max-w-3xl lg:max-w-5xl w-full xl:max-w-6xl px-5 py-10 mx-auto">
3 |     <slot />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/middleware/setLayout.ts:
--------------------------------------------------------------------------------
1 | import type { LayoutKey } from '../.nuxt/types/layouts';
2 | 
3 | export default defineNuxtRouteMiddleware(async (to, _) => {
4 |   const { data: page } = await useCurrentPage(to);
5 |   setPageLayout(page?.value?.layout as LayoutKey || 'default');
6 | });
7 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 | 
 4 |   modules: [
 5 |     '@nuxtjs/seo',
 6 |     '@nuxtjs/tailwindcss',
 7 |     '@nuxt/fonts',
 8 |     '@nuxt/icon',
 9 |     '@nuxt/content',
10 |     '@nuxtjs/color-mode',
11 |     '@nuxt/eslint',
12 |     '@nuxt/image',
13 |   ],
14 |   devtools: { enabled: true },
15 |   site: {
16 |     url: 'https://example.com',
17 |   },
18 |   colorMode: {
19 |     classSuffix: '',
20 |   },
21 |   content: {
22 |     preview: {
23 |       api: 'https://api.nuxt.studio',
24 |     },
25 |   },
26 |   runtimeConfig: {
27 |     public: {
28 |       posthogPublicKey: process.env.POSTHOG_PUBLIC_KEY,
29 |       posthogHost: process.env.POSTHOG_HOST,
30 |       mdc: {
31 |         headings: {
32 |           anchorLinks: {
33 |             h1: false,
34 |             h2: false,
35 |             h3: false,
36 |             h4: false,
37 |             h5: false,
38 |             h6: false,
39 |           },
40 |         },
41 |       },
42 |     },
43 |   },
44 |   compatibilityDate: '2025-01-15',
45 |   nitro: {
46 |     prerender: {
47 |       failOnError: false,
48 |       crawlLinks: true,
49 |       routes: ['/', '/sitemap.xml'],
50 |     },
51 |   },
52 |   eslint: {
53 |     config: {
54 |       stylistic: {
55 |         semi: true,
56 |         quotes: 'single',
57 |       },
58 |     },
59 |   },
60 | });
61 | 


--------------------------------------------------------------------------------
/nuxt.schema.ts:
--------------------------------------------------------------------------------
  1 | import { field, group } from '@nuxt/content/preview';
  2 | 
  3 | export default defineNuxtSchema({
  4 |   appConfig: {
  5 |     general: group({
  6 |       title: 'General',
  7 |       description: 'General configuration for the app.',
  8 |       fields: {
  9 |         title: field({
 10 |           type: 'string',
 11 |           title: 'Title',
 12 |           description: 'Title of the application.',
 13 |           default: 'New Directory',
 14 |         }),
 15 |         language: field({
 16 |           type: 'string',
 17 |           title: 'Language',
 18 |           description: 'Language Code For The directory.',
 19 |           default: 'en',
 20 |         }),
 21 |         logo: field({
 22 |           type: 'media',
 23 |           title: 'Logo',
 24 |           description: 'Logo of the application.',
 25 |           default: '/logo.png',
 26 |         }),
 27 |       },
 28 |     }),
 29 |     site: group({
 30 |       title: 'Site Settings',
 31 |       description: 'SEO and Site Metadata Settings',
 32 |       fields: {
 33 |         name: field({
 34 |           type: 'string',
 35 |           title: 'Title',
 36 |           description:
 37 |             'Title of the application. If empty general title will be used.',
 38 |         }),
 39 |         description: field({
 40 |           type: 'string',
 41 |           title: 'SEO Site Description',
 42 |           description:
 43 |             'Used for the description meta tag. If empty general description will be used.',
 44 |         }),
 45 |         url: field({
 46 |           type: 'string',
 47 |           title: 'URL',
 48 |           description:
 49 |             'Base url of your website, important for the correct function of the seo module.',
 50 |           default: 'https://example.com',
 51 |         }),
 52 |         favicon: group({
 53 |           title: '',
 54 |           fields: {
 55 |             emoji: field({
 56 |               type: 'string',
 57 |               title: 'emoji favicon',
 58 |               default: '🍃',
 59 |             }),
 60 |             image: field({
 61 |               type: 'file',
 62 |               tile: 'image favicon',
 63 |             }),
 64 |           },
 65 |         }),
 66 |       },
 67 |     }),
 68 |     directory: group({
 69 |       title: 'Directory',
 70 |       description: 'Directory configuration.',
 71 |       fields: {
 72 |         featured: group({
 73 |           fields: {
 74 |             showOnAllPages: field({
 75 |               type: 'boolean',
 76 |               title: 'Show Featured On All Pages',
 77 |               description: 'Show featured items on all pages.',
 78 |               default: true,
 79 |             }),
 80 |             showOnSide: field({
 81 |               type: 'boolean',
 82 |               title: 'Featured listing location',
 83 |               description:
 84 |                 'Show recommended listing on side of the screen or bottom of the.',
 85 |               default: true,
 86 |             }),
 87 |             labelForCard: field({
 88 |               type: 'string',
 89 |               title: 'Featured Text',
 90 |               description: 'Text to display for featured items.',
 91 |               default: 'Featured ✨',
 92 |             }),
 93 |             icon: field({
 94 |               type: 'icon',
 95 |               title: 'Featured Icon',
 96 |               description: 'Icon for the banner of featured listings',
 97 |             }),
 98 |           },
 99 |         }),
100 |         search: group({
101 |           title: 'Search',
102 |           description: 'Search settings for the directory.',
103 |           fields: {
104 |             placeholder: field({
105 |               type: 'string',
106 |               title: 'Placeholder',
107 |               description:
108 |                 'Placeholder text for the search input. Use {0} to mark where to fill in the number of listings.',
109 |               default: 'Search among {0} tools',
110 |             }),
111 |             icon: field({
112 |               type: 'icon',
113 |               title: 'Icon',
114 |               description: 'Icon for the search input.',
115 |               default: 'tabler:bow',
116 |             }),
117 |             tags: group({
118 |               title: 'Tags',
119 |               description: 'Tag settings for the search.',
120 |               fields: {
121 |                 display: field({
122 |                   type: 'string',
123 |                   title: 'Display',
124 |                   description: 'Display option for tags.',
125 |                   default: 'show-all',
126 |                   required: ['none', 'select', 'show-all'],
127 |                 }),
128 |                 intersection: field({
129 |                   type: 'boolean',
130 |                   title: 'Intersection',
131 |                   description: 'Use intersection for tags.',
132 |                   default: false,
133 |                 }),
134 |               },
135 |             }),
136 |           },
137 |         }),
138 |         grid: group({
139 |           title: 'Grid',
140 |           description: 'Grid settings for the directory.',
141 |           fields: {
142 |             list: field({
143 |               type: 'boolean',
144 |               title: 'List',
145 |               description: 'Display as list.',
146 |               default: false,
147 |             }),
148 |             emptyState: group({
149 |               title: 'Empty State',
150 |               description: 'Settings for the empty state.',
151 |               fields: {
152 |                 text: field({
153 |                   type: 'string',
154 |                   title: 'Text',
155 |                   description: 'Text to display when no matches are found.',
156 |                   default: 'No matches for this query.',
157 |                 }),
158 |                 type: field({
159 |                   type: 'string',
160 |                   title: 'Type',
161 |                   description: 'Type of empty state.',
162 |                   default: 'button',
163 |                   required: ['button', 'simple', 'link'],
164 |                 }),
165 |                 icon: field({
166 |                   type: 'icon',
167 |                   title: 'Icon',
168 |                   description: 'Icon for the empty state.',
169 |                   default: 'tabler:ship',
170 |                 }),
171 |               },
172 |             }),
173 |             card: group({
174 |               title: 'Listing Card',
175 |               description: 'Settings on how to display individual cards.',
176 |               fields: {
177 |                 image: field({
178 |                   type: 'boolean',
179 |                   title: 'Image',
180 |                   description: 'Images on cards',
181 |                   default: false,
182 |                 }),
183 |                 type: field({
184 |                   type: 'string',
185 |                   title: 'Type',
186 |                   description: 'Type of empty state.',
187 |                   default: 'dashed',
188 |                   required: ['dashed', 'shadow', 'outline', 'bullet'],
189 |                 }),
190 |               },
191 |             }),
192 |             submit: group({
193 |               title: 'Submit',
194 |               description: 'Settings for the submit button.',
195 |               fields: {
196 |                 show: field({
197 |                   type: 'boolean',
198 |                   title: 'Show',
199 |                   description: 'Show the submit button.',
200 |                   default: true,
201 |                 }),
202 |                 first: field({
203 |                   type: 'boolean',
204 |                   title: 'First',
205 |                   description: 'Show first submit button.',
206 |                   default: false,
207 |                 }),
208 |                 title: field({
209 |                   type: 'string',
210 |                   title: 'Title',
211 |                   description: 'Title for the submit button.',
212 |                   default: 'Submit a template',
213 |                 }),
214 |                 description: field({
215 |                   type: 'string',
216 |                   title: 'Description',
217 |                   description: 'Description for the submit button.',
218 |                   default:
219 |                     'Submit a template to show off a good project to other people.',
220 |                 }),
221 |                 hideable: field({
222 |                   type: 'boolean',
223 |                   title: 'Hideable',
224 |                   description: 'Allow hiding the submit button.',
225 |                   default: true,
226 |                 }),
227 |                 icon: field({
228 |                   type: 'icon',
229 |                   title: 'Icon',
230 |                   description:
231 |                     'Icon shown in the submit suggestion in the grid.',
232 |                   default: 'tabler:send',
233 |                 }),
234 |               },
235 |             }),
236 |           },
237 |         }),
238 |         tags: field({
239 |           type: 'array',
240 |           title: 'Tags',
241 |           description: 'Tags for the directory.',
242 |           default: [
243 |             { name: 'SAAS', color: 'blue' },
244 |             { name: 'dashboard', color: 'green' },
245 |             { name: 'landing-page' },
246 |             { name: 'toolbox' },
247 |             { name: 'agency' },
248 |             { name: 'markdown-based' },
249 |             { name: 'basics', color: 'indigo' },
250 |           ],
251 |         }),
252 |         tagPages: group({
253 |           fields: {
254 |             title: field({
255 |               type: 'string',
256 |               default: 'All {0} products',
257 |             }),
258 |             description: field({
259 |               type: 'string',
260 |               default: 'All {0} products',
261 |             }),
262 |           },
263 |         }),
264 |       },
265 |     }),
266 |     header: group({
267 |       title: 'Header',
268 |       description: 'Header configuration.',
269 |       fields: {
270 |         banner: group({
271 |           title: 'Banner',
272 |           description: 'Banner settings for the header.',
273 |           fields: {
274 |             show: field({
275 |               type: 'boolean',
276 |               title: 'Show',
277 |               description: 'Show the banner.',
278 |               default: true,
279 |             }),
280 |             text: field({
281 |               type: 'string',
282 |               title: 'Text',
283 |               description: 'Text to display in the banner.',
284 |               default: 'Create your own directory website in minutes.',
285 |             }),
286 |             link: field({
287 |               type: 'string',
288 |               title: 'Link',
289 |               description: 'Link for the banner.',
290 |               default: 'https://github.com/masterkram/nuxt-directory',
291 |             }),
292 |             brandText: field({
293 |               type: 'string',
294 |               title: 'Brand Text',
295 |               description: 'Brand text for the banner.',
296 |               default: 'MintedDirectory',
297 |             }),
298 |           },
299 |         }),
300 |         navbar: group({
301 |           title: 'Navbar',
302 |           description: 'Navbar settings for the header.',
303 |           fields: {
304 |             colorModeSelector: field({
305 |               type: 'boolean',
306 |               title: 'Color Mode Selector',
307 |               description: 'Show the color mode selector in the navbar.',
308 |               default: true,
309 |             }),
310 |             links: field({
311 |               type: 'array',
312 |               title: 'Link Array',
313 |               description: 'Links to show on the navbar.',
314 |               default: [],
315 |             }),
316 |           },
317 |         }),
318 |         actionButton: group({
319 |           title: 'Action Button',
320 |           description: 'Action button settings for the header.',
321 |           fields: {
322 |             text: field({
323 |               type: 'string',
324 |               title: 'Text',
325 |               description: 'Text for the action button.',
326 |               default: 'Submit a listing',
327 |             }),
328 |             href: field({
329 |               type: 'string',
330 |               title: 'Href',
331 |               description: 'Link for the action button.',
332 |               default: '/submit',
333 |             }),
334 |           },
335 |         }),
336 |       },
337 |     }),
338 |     footer: group({
339 |       title: 'Footer',
340 |       description: 'Footer configuration.',
341 |       fields: {
342 |         description: field({
343 |           type: 'string',
344 |           title: 'Description',
345 |           description: 'Description to display in the footer.',
346 |           default: 'Find the the best Nuxt templates.',
347 |         }),
348 |         navigation: field({
349 |           type: 'array',
350 |           title: 'Links',
351 |           description: 'Array of navigation object displayed in footer.',
352 |           default: []
353 |         }),
354 |         socials: group({
355 |           title: 'Socials',
356 |           description: 'Social links for the footer.',
357 |           fields: {
358 |             github: group({
359 |               fields: {
360 |                 link: field({
361 |                   type: 'string',
362 |                   title: 'Github Link',
363 |                   description: 'Link to github profile',
364 |                 }),
365 |                 icon: field({
366 |                   type: 'icon',
367 |                   title: 'Github Icon',
368 |                 }),
369 |               },
370 |             }),
371 |             x: group({
372 |               fields: {
373 |                 link: field({
374 |                   type: 'string',
375 |                   title: 'X Link',
376 |                   description: 'Link to X profile',
377 |                 }),
378 |                 icon: field({
379 |                   type: 'icon',
380 |                   title: 'X icon',
381 |                 }),
382 |               },
383 |             }),
384 |             instagram: group({
385 |               fields: {
386 |                 link: field({
387 |                   type: 'string',
388 |                   title: 'Instagram Link',
389 |                   description: 'Link to Instagram Profile',
390 |                 }),
391 |                 icon: field({
392 |                   type: 'icon',
393 |                   title: 'Instagram Icon',
394 |                 }),
395 |               },
396 |             }),
397 |             youtube: group({
398 |               fields: {
399 |                 link: field({
400 |                   type: 'string',
401 |                   title: 'Youtube Link',
402 |                   description: 'Link to Youtube Account',
403 |                 }),
404 |                 icon: field({
405 |                   type: 'icon',
406 |                   title: 'Youtube Icon',
407 |                 }),
408 |               },
409 |             }),
410 |           },
411 |         }),
412 |       },
413 |     }),
414 |     ui: group({
415 |       title: 'UI',
416 |       description: 'UI Customization.',
417 |       fields: {
418 |         icons: group({
419 |           title: 'Icons',
420 |           description: 'Manage icons used in UI.',
421 |           fields: {
422 |             dark: field({
423 |               type: 'icon',
424 |               title: 'Dark mode',
425 |               description: 'Icon of color mode button for dark mode.',
426 |               default: 'tabler:moon',
427 |             }),
428 |             light: field({
429 |               type: 'icon',
430 |               title: 'Light mode',
431 |               description: 'Icon of color mode button for light mode.',
432 |               default: 'tabler:sun',
433 |             }),
434 |           },
435 |         }),
436 |       },
437 |     }),
438 |   },
439 | });
440 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "minted-directory",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare"
11 |   },
12 |   "dependencies": {
13 |     "@headlessui/vue": "^1.7.23",
14 |     "@nuxt/content": "^3.2.2",
15 |     "@nuxt/eslint": "^0.7.6",
16 |     "@nuxt/fonts": "^0.9.2",
17 |     "@nuxt/image": "^1.9.0",
18 |     "@nuxt/scripts": "^0.9.5",
19 |     "@nuxtjs/color-mode": "^3.5.2",
20 |     "@nuxtjs/seo": "^2.2.0",
21 |     "@nuxtjs/tailwindcss": "^6.13.1",
22 |     "@tailwindcss/forms": "^0.5.10",
23 |     "@tailwindcss/typography": "^0.5.16",
24 |     "nuxt": "^3.15.4",
25 |     "posthog-js": "^1.225.1",
26 |     "vue": "^3.5.13",
27 |     "vue-router": "^4.5.0"
28 |   },
29 |   "devDependencies": {
30 |     "@iconify-json/tabler": "^1.2.16",
31 |     "@nuxt/icon": "^1.10.3",
32 |     "typescript": "^5.8.2"
33 |   },
34 |   "packageManager": "pnpm@9.12.2"
35 | }
36 | 


--------------------------------------------------------------------------------
/pages/[...slug].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const route = useRoute();
 3 | const { data: page } = await useCurrentPage(route);
 4 | 
 5 | if (!page.value) {
 6 |   throw createError({
 7 |     statusCode: 404,
 8 |     statusMessage: 'Page Not Found',
 9 |   });
10 | }
11 | 
12 | setSeo(page.value);
13 | 
14 | definePageMeta({
15 |   middleware: 'set-layout',
16 | });
17 | </script>
18 | 
19 | <template>
20 |   <AppRenderer :page="page" />
21 | </template>
22 | 


--------------------------------------------------------------------------------
/pages/tags/[slug].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const route = useRoute();
 3 | const config = useAppConfig();
 4 | 
 5 | const title = computed(() => formatString(config.directory.tagPages?.title || 'All {0}', route.params.slug));
 6 | const description = computed(() => formatString(config.directory.tagPages?.description || 'All {0}', route.params.slug));
 7 | 
 8 | const { data } = await useAsyncData(`tag-${route.params.slug}`, () => queryCollection('directory').all());
 9 | 
10 | const listings = computed(() => data.value ? data.value.filter(item => item.tags?.includes(String(route.params.slug))) : []);
11 | 
12 | // SEO setup
13 | const app = useNuxtApp();
14 | 
15 | useSeoMeta({ title: title.value || 'Missing Title', description: description.value || 'Missing Description' });
16 | 
17 | defineOgImage({
18 |   component: 'Custom',
19 |   title: title.value,
20 |   description: description.value,
21 | });
22 | 
23 | definePageMeta({
24 |   layout: 'wide',
25 | });
26 | </script>
27 | 
28 | <template>
29 |   <div class="">
30 |     <h1>{{ title }}</h1>
31 |     <DirectoryPureGrid :listings="listings" />
32 |   </div>
33 | </template>
34 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masterkram/minted-directory/2a52894f0cba4d483fea6939bbe1e318aeecb704/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masterkram/minted-directory/2a52894f0cba4d483fea6939bbe1e318aeecb704/public/logo.png


--------------------------------------------------------------------------------
/public/test.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masterkram/minted-directory/2a52894f0cba4d483fea6939bbe1e318aeecb704/public/test.jpg


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import colors from "tailwindcss/colors";
 2 | import typography from "@tailwindcss/typography";
 3 | import forms from "@tailwindcss/forms";
 4 | 
 5 | export default {
 6 |   darkMode: "class",
 7 |   plugins: [typography(), forms()],
 8 |   theme: {
 9 |     extend: {
10 |       fontFamily: {
11 |         display: ["DM Sans"],
12 |       },
13 |       colors: {
14 |         primary: colors.sky,
15 |         secondary: colors.indigo,
16 |         gray: colors.zinc,
17 |       },
18 |     },
19 |   },
20 | };
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/types/Tag.ts:
--------------------------------------------------------------------------------
1 | export default interface Tag {
2 |   name: string;
3 |   color?: string;
4 | }
5 | 


--------------------------------------------------------------------------------
/utils/formatString.ts:
--------------------------------------------------------------------------------
 1 | const formatString = (template: string, ...args: any) => {
 2 |   return template.replace(
 3 |     /{([0-9]+)}/g,
 4 |     function (match: string, index: number) {
 5 |       return typeof args[index] === 'undefined' ? match : args[index];
 6 |     },
 7 |   );
 8 | };
 9 | 
10 | export default formatString;
11 | 


--------------------------------------------------------------------------------
/utils/setSeo.ts:
--------------------------------------------------------------------------------
 1 | import type { BlogCollectionItem, DirectoryCollectionItem, PagesCollectionItem } from '@nuxt/content';
 2 | 
 3 | export default function setSeo(page: DirectoryCollectionItem | BlogCollectionItem | PagesCollectionItem) {
 4 |   const config = useAppConfig();
 5 | 
 6 |   useSeoMeta({
 7 |     title: page.title || config.general.title || 'Empty Title',
 8 |     description: page.description || config.general.title || 'Empty Description',
 9 |   });
10 | 
11 |   defineOgImage({
12 |     component: page.og_image?.style || 'Custom',
13 |     title: page.og_image?.title || page.title || config.general.title || 'Empty Title',
14 |     description: page.og_image?.description || page.description || config.general.title || 'Empty Description',
15 |     emoji: page.og_image?.emoji,
16 |   });
17 | }
18 | 


--------------------------------------------------------------------------------