Changelog (#399)
* feat: add changelog feature and update site navigation - Introduced a new Changelog page with pagination and detailed entry views. - Added components for displaying changelog entries, pagination, and entry details. - Updated site navigation to include a link to the new Changelog page. - Enhanced localization for changelog-related texts in marketing.json. * refactor: enhance Changelog page layout and entry display - Increased the number of changelog entries displayed per page from 2 to 20 for better visibility. - Improved the layout of the Changelog page by adjusting the container styles and removing unnecessary divs. - Updated the ChangelogEntry component to enhance the visual presentation of entries, including a new date badge with an icon. - Refined the CSS styles for Markdoc headings to improve typography and spacing. * refactor: enhance Changelog page functionality and layout - Increased the number of changelog entries displayed per page from 20 to 50 for improved user experience. - Updated ChangelogEntry component to make the highlight prop optional and refined the layout for better visual clarity. - Adjusted styles in ChangelogHeader and ChangelogPagination components for a more cohesive design. - Removed unnecessary order fields from changelog markdown files to streamline content management. * feat: enhance Changelog entry navigation and data loading - Refactored ChangelogEntry page to load previous and next entries for improved navigation. - Introduced ChangelogNavigation component to facilitate navigation between changelog entries. - Updated ChangelogDetail component to display navigation links and entry details. - Enhanced data fetching logic to retrieve all changelog entries alongside the current entry. - Added localization keys for navigation text in marketing.json. * Update package dependencies and enhance documentation layout - Upgraded various packages including @turbo/gen and turbo to version 2.6.0, and react-hook-form to version 7.66.0. - Updated lucide-react to version 0.552.0 across multiple packages. - Refactored documentation layout components for improved styling and structure. - Removed deprecated loading components and adjusted navigation elements for better user experience. - Added placeholder notes in changelog entries for clarity.
This commit is contained in:
Giancarlo Buomprisco
committed by
GitHub
GitHub
parent
a920dea2b3
commit
116d41a284
@@ -0,0 +1,350 @@
|
||||
---
|
||||
title: "Configuration"
|
||||
description: "Configure your application settings and feature flags."
|
||||
publishedAt: 2024-04-11
|
||||
order: 4
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
|
||||
Customize your application behavior through configuration files.
|
||||
|
||||
## Configuration Files
|
||||
|
||||
All configuration files are located in `apps/web/config/`:
|
||||
|
||||
```
|
||||
config/
|
||||
├── paths.config.ts # Route paths
|
||||
├── billing.config.ts # Billing & pricing
|
||||
├── feature-flags.config.ts # Feature toggles
|
||||
├── personal-account-navigation.config.tsx
|
||||
├── team-account-navigation.config.tsx
|
||||
└── i18n.settings.ts # Internationalization
|
||||
```
|
||||
|
||||
## Feature Flags
|
||||
|
||||
Control feature availability:
|
||||
|
||||
```typescript
|
||||
// config/feature-flags.config.ts
|
||||
export const featureFlags = {
|
||||
enableTeamAccounts: true,
|
||||
enableBilling: true,
|
||||
enableNotifications: true,
|
||||
enableFileUploads: false,
|
||||
enableAnalytics: true,
|
||||
enableChat: false,
|
||||
};
|
||||
```
|
||||
|
||||
### Using Feature Flags
|
||||
|
||||
```typescript
|
||||
import { featureFlags } from '~/config/feature-flags.config';
|
||||
|
||||
export function ConditionalFeature() {
|
||||
if (!featureFlags.enableChat) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <ChatWidget />;
|
||||
}
|
||||
```
|
||||
|
||||
## Path Configuration
|
||||
|
||||
Define application routes:
|
||||
|
||||
```typescript
|
||||
// config/paths.config.ts
|
||||
export const pathsConfig = {
|
||||
auth: {
|
||||
signIn: '/auth/sign-in',
|
||||
signUp: '/auth/sign-up',
|
||||
passwordReset: '/auth/password-reset',
|
||||
callback: '/auth/callback',
|
||||
},
|
||||
app: {
|
||||
home: '/home',
|
||||
personalAccount: '/home',
|
||||
teamAccount: '/home/[account]',
|
||||
settings: '/home/settings',
|
||||
billing: '/home/settings/billing',
|
||||
},
|
||||
admin: {
|
||||
home: '/admin',
|
||||
users: '/admin/users',
|
||||
analytics: '/admin/analytics',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Using Paths
|
||||
|
||||
```typescript
|
||||
import { pathsConfig } from '~/config/paths.config';
|
||||
import Link from 'next/link';
|
||||
|
||||
<Link href={pathsConfig.app.settings}>
|
||||
Settings
|
||||
</Link>
|
||||
```
|
||||
|
||||
## Navigation Configuration
|
||||
|
||||
### Personal Account Navigation
|
||||
|
||||
```typescript
|
||||
// config/personal-account-navigation.config.tsx
|
||||
import { HomeIcon, SettingsIcon } from 'lucide-react';
|
||||
|
||||
export default [
|
||||
{
|
||||
label: 'common:routes.home',
|
||||
path: pathsConfig.app.personalAccount,
|
||||
Icon: <HomeIcon className="w-4" />,
|
||||
end: true,
|
||||
},
|
||||
{
|
||||
label: 'common:routes.settings',
|
||||
path: pathsConfig.app.settings,
|
||||
Icon: <SettingsIcon className="w-4" />,
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
### Team Account Navigation
|
||||
|
||||
```typescript
|
||||
// config/team-account-navigation.config.tsx
|
||||
export default [
|
||||
{
|
||||
label: 'common:routes.dashboard',
|
||||
path: createPath(pathsConfig.app.teamAccount, account),
|
||||
Icon: <LayoutDashboardIcon className="w-4" />,
|
||||
end: true,
|
||||
},
|
||||
{
|
||||
label: 'common:routes.projects',
|
||||
path: createPath(pathsConfig.app.projects, account),
|
||||
Icon: <FolderIcon className="w-4" />,
|
||||
},
|
||||
{
|
||||
label: 'common:routes.members',
|
||||
path: createPath(pathsConfig.app.members, account),
|
||||
Icon: <UsersIcon className="w-4" />,
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
## Billing Configuration
|
||||
|
||||
```typescript
|
||||
// config/billing.config.ts
|
||||
export const billingConfig = {
|
||||
provider: 'stripe', // 'stripe' | 'paddle'
|
||||
enableTrial: true,
|
||||
trialDays: 14,
|
||||
|
||||
plans: [
|
||||
{
|
||||
id: 'free',
|
||||
name: 'Free',
|
||||
price: 0,
|
||||
features: ['5 projects', 'Basic support'],
|
||||
limits: {
|
||||
projects: 5,
|
||||
members: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'pro',
|
||||
name: 'Professional',
|
||||
price: 29,
|
||||
interval: 'month',
|
||||
features: ['Unlimited projects', 'Priority support'],
|
||||
limits: {
|
||||
projects: -1, // unlimited
|
||||
members: 10,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
## Internationalization
|
||||
|
||||
```typescript
|
||||
// lib/i18n/i18n.settings.ts
|
||||
export const i18nSettings = {
|
||||
defaultLocale: 'en',
|
||||
locales: ['en', 'es', 'fr', 'de'],
|
||||
defaultNamespace: 'common',
|
||||
namespaces: ['common', 'auth', 'billing', 'errors'],
|
||||
};
|
||||
```
|
||||
|
||||
## Email Configuration
|
||||
|
||||
```typescript
|
||||
// config/email.config.ts
|
||||
export const emailConfig = {
|
||||
from: {
|
||||
email: process.env.EMAIL_FROM || 'noreply@example.com',
|
||||
name: process.env.EMAIL_FROM_NAME || 'Your App',
|
||||
},
|
||||
provider: 'resend', // 'resend' | 'sendgrid' | 'postmark'
|
||||
};
|
||||
```
|
||||
|
||||
## SEO Configuration
|
||||
|
||||
```typescript
|
||||
// config/seo.config.ts
|
||||
export const seoConfig = {
|
||||
title: 'Your App Name',
|
||||
description: 'Your app description',
|
||||
ogImage: '/images/og-image.png',
|
||||
twitterHandle: '@yourapp',
|
||||
locale: 'en_US',
|
||||
|
||||
// Per-page overrides
|
||||
pages: {
|
||||
home: {
|
||||
title: 'Home - Your App',
|
||||
description: 'Welcome to your app',
|
||||
},
|
||||
pricing: {
|
||||
title: 'Pricing - Your App',
|
||||
description: 'Simple, transparent pricing',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Theme Configuration
|
||||
|
||||
```typescript
|
||||
// config/theme.config.ts
|
||||
export const themeConfig = {
|
||||
defaultTheme: 'system', // 'light' | 'dark' | 'system'
|
||||
enableColorSchemeToggle: true,
|
||||
|
||||
colors: {
|
||||
primary: 'blue',
|
||||
accent: 'purple',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Analytics Configuration
|
||||
|
||||
```typescript
|
||||
// config/analytics.config.ts
|
||||
export const analyticsConfig = {
|
||||
googleAnalytics: {
|
||||
enabled: true,
|
||||
measurementId: process.env.NEXT_PUBLIC_GA_ID,
|
||||
},
|
||||
|
||||
posthog: {
|
||||
enabled: false,
|
||||
apiKey: process.env.NEXT_PUBLIC_POSTHOG_KEY,
|
||||
},
|
||||
|
||||
plausible: {
|
||||
enabled: false,
|
||||
domain: process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Rate Limiting
|
||||
|
||||
```typescript
|
||||
// config/rate-limit.config.ts
|
||||
export const rateLimitConfig = {
|
||||
api: {
|
||||
windowMs: 15 * 60 * 1000, // 15 minutes
|
||||
max: 100, // requests per window
|
||||
},
|
||||
|
||||
auth: {
|
||||
windowMs: 15 * 60 * 1000,
|
||||
max: 5, // login attempts
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Upload Configuration
|
||||
|
||||
```typescript
|
||||
// config/upload.config.ts
|
||||
export const uploadConfig = {
|
||||
maxFileSize: 5 * 1024 * 1024, // 5MB
|
||||
allowedMimeTypes: [
|
||||
'image/jpeg',
|
||||
'image/png',
|
||||
'image/gif',
|
||||
'image/webp',
|
||||
'application/pdf',
|
||||
],
|
||||
|
||||
storage: {
|
||||
provider: 'supabase', // 'supabase' | 's3' | 'cloudinary'
|
||||
bucket: 'uploads',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Environment-Specific Config
|
||||
|
||||
```typescript
|
||||
// config/app.config.ts
|
||||
const isDev = process.env.NODE_ENV === 'development';
|
||||
const isProd = process.env.NODE_ENV === 'production';
|
||||
|
||||
export const appConfig = {
|
||||
environment: process.env.NODE_ENV,
|
||||
apiUrl: isProd
|
||||
? 'https://api.yourapp.com'
|
||||
: 'http://localhost:3000/api',
|
||||
|
||||
features: {
|
||||
enableDebugTools: isDev,
|
||||
enableErrorReporting: isProd,
|
||||
enableAnalytics: isProd,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use environment variables** for secrets
|
||||
2. **Type your configs** for autocomplete and safety
|
||||
3. **Document options** with comments
|
||||
4. **Validate on startup** to catch errors early
|
||||
5. **Keep configs simple** - avoid complex logic
|
||||
6. **Use feature flags** for gradual rollouts
|
||||
7. **Environment-specific values** for dev/prod differences
|
||||
|
||||
## Loading Configuration
|
||||
|
||||
Configs are automatically loaded but you can validate:
|
||||
|
||||
```typescript
|
||||
// lib/config/validate-config.ts
|
||||
import { z } from 'zod';
|
||||
|
||||
const ConfigSchema = z.object({
|
||||
apiUrl: z.string().url(),
|
||||
enableFeatureX: z.boolean(),
|
||||
});
|
||||
|
||||
export function validateConfig(config: unknown) {
|
||||
return ConfigSchema.parse(config);
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user