Small imporvements for developers

README.md

@@ -15,16 +15,18 @@ Visit the [DevHunt Blog](https://devhunt.org/blog?utm_source=github) to check ou
 
 ## Environment Setup
 
-First, set up your SEObot API Key environment variable. Create a `.env.local` file for local development:
+First, set up your SEObot API Key and base url environment variables. Create a `.env.local` file for local development:
 
 ```bash
 SEOBOT_API_KEY=<your_seobot_key>
+BASE_URL=<your_base_url>
 ```
 
 ⚠️ You can use following **DEMO** SEOBOT_API_KEY for local development:
 
 ```bash
 SEOBOT_API_KEY=a8c58738-7b98-4597-b20a-0bb1c2fe5772
+BASE_URL=http://localhost:3000/
 ```
 
 ## Running the Development Server

app/blog/[slug]/page.tsx

@@ -7,6 +7,8 @@ import NotFound from '@/components/NotFound';
 import HighlightCode from '@/components/HighlightCode';
 import '../blog.css';
 
+const BASE_URL = process.env.BASE_URL
+
 async function getPost(slug: string) {
   const key = process.env.SEOBOT_API_KEY;
   if (!key) throw Error('SEOBOT_API_KEY enviroment variable must be set. You can use the DEMO key a8c58738-7b98-4597-b20a-0bb1c2fe5772 for testing - please set it in the root .env.local file');
@@ -18,6 +20,8 @@ async function getPost(slug: string) {
 export const fetchCache = 'force-no-store';
 
 export async function generateMetadata({ params: { slug } }: { params: { slug: string } }): Promise<Metadata> {
+  if (!BASE_URL) throw Error('BASE_URL enviroment variable must be set.');
+
   const post = await getPost(slug);
   if (!post) return {};
 
@@ -26,7 +30,7 @@ export async function generateMetadata({ params: { slug } }: { params: { slug: s
   return {
     title,
     description,
-    metadataBase: new URL('https://devhunt.org'),
+    metadataBase: new URL(BASE_URL),
     alternates: {
       canonical: `/blog/${slug}`,
     },
@@ -35,7 +39,7 @@ export async function generateMetadata({ params: { slug } }: { params: { slug: s
       title,
       description,
       images: [post.image],
-      url: `https://devhunt.org/blog/${slug}`,
+      url: `${BASE_URL}/blog/${slug}`,
     },
     twitter: {
       title,

app/blog/blog.css

@@ -152,6 +152,8 @@ table {
   font-size: 15px;
   border-collapse: collapse;
   width: 100%;
+  overflow-x: auto;
+  display: block;
 }
 
 th,

app/blog/category/[slug]/page.tsx

@@ -4,6 +4,8 @@ import { type Metadata } from 'next';
 import Link from 'next/link';
 import { BlogClient } from 'seobot';
 
+const BASE_URL = process.env.BASE_URL
+
 async function getPosts(slug: string, page: number) {
   const key = process.env.SEOBOT_API_KEY;
   if (!key) throw Error('SEOBOT_API_KEY enviroment variable must be set. You can use the DEMO key a8c58738-7b98-4597-b20a-0bb1c2fe5772 for testing - please set it in the root .env.local file');
@@ -19,10 +21,12 @@ function deslugify(str: string) {
 export const fetchCache = 'force-no-store';
 
 export async function generateMetadata({ params: { slug } }: { params: { slug: string } }): Promise<Metadata> {
+  if (!BASE_URL) throw Error('BASE_URL enviroment variable must be set');
+
   const title = `${deslugify(slug)} - DevHunt Blog`;
   return {
     title,
-    metadataBase: new URL('https://devhunt.org'),
+    metadataBase: new URL(BASE_URL),
     alternates: {
       canonical: `/blog/category/${slug}`,
     },
@@ -31,7 +35,7 @@ export async function generateMetadata({ params: { slug } }: { params: { slug: s
       title,
       // description: '',
       // images: [],
-      url: `https://devhunt.org/blog/category/${slug}`,
+      url: `${BASE_URL}/blog/category/${slug}`,
     },
     twitter: {
       title,

app/blog/sitemap.xml/route.tsx

@@ -1,4 +1,4 @@
-const BASE_URL = 'https://devhunt.org';
+const BASE_URL = process.env.BASE_URL;
 
 async function getSitemap() {
   const key = process.env.SEOBOT_API_KEY;
@@ -24,7 +24,7 @@ async function generateSiteMap() {
   return `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
-      <loc>https://devhunt.org/blog</loc>
+      <loc>${BASE_URL}/blog</loc>
     </url>
      ${blogSitemap.articles.map((i: SitemapItem) => toSitemapRecord(`/blog/${i.slug}`, i.lastmod))}
      ${blogSitemap.categories.map((i: SitemapItem) => toSitemapRecord(`/blog/category/${i.slug}`, i.lastmod))}

app/blog/tag/[slug]/page.tsx

@@ -4,6 +4,8 @@ import { type Metadata } from 'next';
 import Link from 'next/link';
 import { BlogClient } from 'seobot';
 
+const BASE_URL = process.env.BASE_URL
+
 async function getPosts(slug: string, page: number) {
   const key = process.env.SEOBOT_API_KEY;
   if (!key) throw Error('SEOBOT_API_KEY enviroment variable must be set. You can use the DEMO key a8c58738-7b98-4597-b20a-0bb1c2fe5772 for testing - please set it in the root .env.local file.');
@@ -19,10 +21,12 @@ function deslugify(str: string) {
 export const fetchCache = 'force-no-store';
 
 export async function generateMetadata({ params: { slug } }: { params: { slug: string } }): Promise<Metadata> {
+  if (!BASE_URL) throw Error('BASE_URL enviroment variable must be set.');
+
   const title = `${deslugify(slug)} - DevHunt Blog`;
   return {
     title,
-    metadataBase: new URL('https://devhunt.org'),
+    metadataBase: new URL(BASE_URL),
     alternates: {
       canonical: `/blog/tag/${slug}`,
     },
@@ -31,7 +35,7 @@ export async function generateMetadata({ params: { slug } }: { params: { slug: s
       title,
       // description: '',
       // images: [],
-      url: `https://devhunt.org/blog/tag/${slug}`,
+      url: `${BASE_URL}/blog/tag/${slug}`,
     },
     twitter: {
       title,

next.config.js

@@ -4,7 +4,7 @@ const nextConfig = {
     remotePatterns: [
       {
         protocol: 'https',
-        hostname: 'mars-images.imgix.net',
+        hostname: 'assets.seobotai.com',
         port: '',
         pathname: '/**'
       }