Skip to content

Commit c5dd4ee

Browse files
serverless-momserverless-mom
committed
updated readme
1 parent d9e98db commit c5dd4ee

File tree

1 file changed

+63
-206
lines changed

1 file changed

+63
-206
lines changed

‎README.md‎

Lines changed: 63 additions & 206 deletions
Original file line numberDiff line numberDiff line change
@@ -1,241 +1,98 @@
1-
# Astro Terminal Theme
1+
# Monitoring Prompts Library
22

3-
I love both Astro and the Terminal theme by panr, so I decided to port this theme to Astro. This is an adaptation of the [Hugo Terminal Theme](https://github.com/panr/hugo-theme-terminal) created by [panr](https://github.com/panr). All design credit goes to the original author.
3+
A curated collection of AI prompts for web monitoring, testing, and observability using Checkly and Playwright. This library provides ready-to-use prompts that help you create comprehensive monitoring solutions for your applications.
44

5-
![Terminal Theme Screenshot](https://panr.github.io/hugo-theme-terminal-demo/img/terminal-css.png)
5+
## 🎯 Purpose
66

7-
- [Demo site](https://dennisklappe.github.io/astro-theme-terminal/)
8-
- [Terminal.css - Create your own colour scheme](https://panr.github.io/terminal-css/)
7+
This site serves as a prompt library specifically designed for developers and DevOps engineers who want to implement monitoring solutions using AI-powered tools. Each prompt is crafted to work with Claude and other AI assistants to generate monitoring code, tests, and observability solutions.
98

10-
## Features
9+
## 🔧 What's Inside
1110

12-
- **Customisable colour schemes** — works with panr's [Terminal.css colour scheme generator](https://panr.github.io/terminal-css/) or choose from the default schemes available there
13-
- **[Fira Code](https://github.com/tonsky/FiraCode)** as default monospaced font — easily changeable
14-
- **nice syntax highlighting** — thanks to Astro's built-in Shiki support
15-
- **fully responsive** — works great on mobile and desktop
16-
- **tag support** — organise posts with tags and browse by tag
17-
- **RSS feed** — automatically generated RSS feed for your blog
11+
### Checkly Monitoring Prompts
12+
- **API Testing** - Generate API monitors with assertions and validation
13+
- **Browser Testing** - Create end-to-end user flow monitors
14+
- **Performance Testing** - Build performance-focused monitoring
15+
- **Multistep API Testing** - Design complex sequential API workflows
16+
- **Uptime Monitoring** - Set up URL, TCP, and heartbeat monitors
17+
- **Network Analysis** - Analyze API dependencies and network behavior
18+
- **Setup & Configuration** - Get started with Checkly projects
1819

19-
## Requirements
20+
### Playwright Testing Prompts
21+
- **Single Page Testing** - Generate tests for specific page interfaces
22+
- **Form Testing** - Create comprehensive form interaction tests
23+
- **Site Crawling** - Build tests by analyzing entire websites
24+
- **Debugging & Analysis** - Interpret and resolve test failures
2025

21-
- Astro v5.0.0 or higher
22-
- Node.js 18 or higher
26+
## 🎨 Features
2327

24-
## Installation
28+
- **Filterable Interface** - Browse prompts by tool (Checkly/Playwright) or view all
29+
- **Icon-coded Cards** - Visual identification with specific icons for each prompt type
30+
- **Copy-Paste Ready** - All prompts are formatted for immediate use with AI assistants
31+
- **Tag System** - Organized with searchable tags (AI, Checkly, Playwright)
32+
- **Responsive Design** - Works seamlessly on desktop and mobile devices
33+
- **Terminal Aesthetic** - Clean, developer-friendly interface
2534

26-
### Clone repository
35+
## 🏗️ Built With
2736

28-
```bash
29-
git clone https://github.com/dennisklappe/astro-theme-terminal.git your-site-name
30-
cd your-site-name
31-
npm install
32-
```
33-
34-
### Use as a template
37+
This site is constructed using modern web technologies:
3538

36-
You can also use this repository as a template on GitHub:
39+
- **[Astro](https://astro.build/)** - Static site generator for blazing-fast performance
40+
- **[astro-theme-terminal](https://github.com/dennisklappe/astro-theme-terminal)** - Terminal-inspired theme
41+
- **TypeScript** - Type-safe development
42+
- **Content Collections** - Structured content management
43+
- **CSS Grid & Flexbox** - Modern responsive layouts
3744

38-
1. Click the "Use this template" button on the GitHub repository
39-
2. Create a new repository from the template
40-
3. Clone your new repository and install dependencies
45+
### Theme Credits
4146

42-
## How to start
43-
44-
```bash
45-
npm run dev
46-
```
47+
The visual design is based on the [Hugo Terminal Theme](https://github.com/panr/hugo-theme-terminal) by [panr](https://github.com/panr), ported to Astro by [Dennis Klappe](https://github.com/dennisklappe). We've customized it specifically for this monitoring prompts library.
4748

48-
## How to build
49+
## 🚀 Quick Start
4950

5051
```bash
51-
npm run build
52-
```
53-
54-
## Configuration
55-
56-
### Site Configuration
57-
58-
Edit `astro.config.mjs`:
59-
60-
```js
61-
import { defineConfig } from 'astro/config';
62-
63-
export default defineConfig({
64-
site: 'https://your-domain.com',
65-
markdown: {
66-
shikiConfig: {
67-
theme: 'css-variables',
68-
langs: [],
69-
wrap: true,
70-
},
71-
},
72-
});
73-
```
52+
# Clone the repository
53+
git clone [repository-url]
54+
cd monitoring-prompts-library
7455

75-
### Theme Configuration
76-
77-
The theme uses CSS custom properties for theming. To change colours, modify the variables in `src/styles/terminal.css`:
78-
79-
```css
80-
:root {
81-
--background: #1e2022;
82-
--foreground: #d6deeb;
83-
--accent: #ffa86a;
84-
--secondary: #8be9fd;
85-
--selection: #4c5f7a;
86-
--code-border: #4c5f7a;
87-
--comment: #637777;
88-
}
89-
```
90-
91-
You can also use panr's [Terminal.css generator](https://panr.github.io/terminal-css/) to create your own colour scheme - this Astro port is fully compatible with the generated colour schemes.
92-
93-
### Navigation Menu
94-
95-
Edit the navigation in `src/layouts/BaseLayout.astro`. The theme includes a dropdown menu for additional pages:
96-
97-
```astro
98-
<!-- Main navigation items -->
99-
<li><a href="/about">About</a></li>
100-
<li><a href="/posts/showcase">Showcase</a></li>
101-
102-
<!-- Dropdown menu -->
103-
<ul class="menu__dropdown">
104-
<li><a href="/posts">Posts</a></li>
105-
<li><a href="/tags">Tags</a></li>
106-
<li><a href="/posts/rich-content">Rich Content</a></li>
107-
</ul>
108-
```
109-
110-
## Content
111-
112-
### Posts
113-
114-
Create posts in `src/content/posts/`:
56+
# Install dependencies
57+
npm install
11558

116-
```md
117-
---
118-
title: 'My First Post'
119-
description: 'This is my first blog post'
120-
pubDate: 2024-01-01
121-
author: 'Your Name'
122-
tags: ['astro', 'terminal']
123-
---
59+
# Start development server
60+
npm run dev
12461

125-
Your content here...
62+
# Build for production
63+
npm run build
12664
```
12765

128-
### Pages
66+
## 📝 Content Structure
12967

130-
Create pages in `src/pages/`:
68+
Each prompt is stored as a Markdown file with frontmatter:
13169

132-
```astro
70+
```markdown
13371
---
134-
import BaseLayout from '../layouts/BaseLayout.astro';
72+
title: "Prompt Title"
73+
description: "Brief description of what this prompt does"
74+
icon: "🔗" # Emoji icon for visual identification
75+
tags: ["AI", "Checkly"] # Categorization tags
13576
---
13677

137-
<BaseLayout title="About">
138-
<div class="page">
139-
<h1>About</h1>
140-
<p>Your content here...</p>
141-
</div>
142-
</BaseLayout>
143-
```
144-
145-
## Syntax Highlighting
146-
147-
The theme uses Astro's built-in Shiki syntax highlighter with a custom monochrome theme that matches the terminal aesthetic. Code blocks automatically get syntax highlighting:
148-
149-
```js
150-
// JavaScript example
151-
function hello() {
152-
console.log("Hello, World!");
153-
}
78+
```markdown
79+
Your AI prompt content here...
15480
```
15581

156-
## Layouts
157-
158-
### BaseLayout
159-
160-
The main layout that includes header, footer, and all necessary CSS imports.
161-
162-
### PostLayout
163-
164-
Layout specifically for posts, includes metadata display and post navigation.
165-
166-
## Components
167-
168-
- **Header** - Site header with terminal decoration
169-
- **Footer** - Site footer with copyright
170-
- **PostCard** - Post preview card
171-
- **Pagination** - Page navigation component
172-
- **FormattedDate** - Date formatting component
173-
174-
## Features
175-
176-
### Tags
177-
178-
Posts can be organised with tags. Each tag gets its own page at `/tags/[tag-name]` showing all posts with that tag. A tag index page at `/tags` displays all available tags.
179-
180-
181-
## Customization
182-
183-
### Fonts
184-
185-
To change the monospace font, update the font import in `src/styles/fonts.css` and the font-family in `src/styles/terminal.css`.
186-
187-
### Colours
188-
189-
Create your own colour scheme or choose from the default schemes using panr's [Terminal.css generator](https://panr.github.io/terminal-css/).
190-
191-
### CSS Structure
192-
193-
The theme uses modular CSS files:
194-
- `terminal.css` - Core theme styles and variables
195-
- `fonts.css` - Font imports and utilities
196-
- `main.css` - Layout and utility classes
197-
- `header.css` - Header styles
198-
- `menu.css` - Navigation menu
199-
- `footer.css` - Footer styles
200-
- `post.css` - Post styles
201-
- `buttons.css` - Button components
202-
- `code.css` - Code block functionality
203-
- `syntax.css` - Syntax highlighting theme
204-
- `pagination.css` - Pagination styles
205-
- `gist.css` - GitHub Gist embed styles
206-
- `terms.css` - Terms and conditions styles
207-
208-
## Deployment
209-
210-
### GitHub Pages
211-
212-
This theme includes a GitHub Actions workflow for automatic deployment to GitHub Pages:
213-
214-
1. Go to your repository Settings → Pages
215-
2. Set Source to "GitHub Actions"
216-
3. Push to the `main` branch or manually trigger the workflow
217-
4. Your site will be available at `https://[username].github.io/astro-theme-terminal`
218-
219-
To deploy to a custom domain or different base path, update the `site` and `base` options in `astro.config.mjs`.
220-
221-
**Note**: The base path is only applied in production builds. During development, the site runs at the root path (`/`) for easier testing.
222-
223-
## Contributing
224-
225-
If you find any bugs or have ideas for improvements, please open an issue or submit a pull request.
226-
227-
## Credits
228-
229-
This theme is a port of the [Hugo Terminal Theme](https://github.com/panr/hugo-theme-terminal) created by [panr](https://github.com/panr). All design decisions, colour schemes, and visual aesthetics are credited to the original author.
82+
## 🤝 Contributing
23083

231-
Astro port created by [Dennis Klappe](https://github.com/dennisklappe).
84+
We welcome contributions! Whether you want to:
85+
- Add new monitoring prompts
86+
- Improve existing prompts
87+
- Fix bugs or enhance the site
88+
- Suggest new features
23289

233-
## License
90+
Please feel free to open issues or submit pull requests.
23491

235-
The original Hugo Terminal Theme is licensed under the MIT License. This Astro port maintains the same licence.
92+
## 📄 License
23693

237-
Copyright for the original design: panr
94+
This project is licensed under the MIT License. The original Hugo Terminal Theme design is credited to panr, and the Astro port to Dennis Klappe.
23895

23996
---
24097

241-
Made with love for the Astro community
98+
**A Checkly Project** - Empowering developers to build better monitoring solutions with AI assistance.

0 commit comments

Comments
 (0)