Forem: Mohammed Shaheem P

How to Generate Markdown Files from Astro Content Collections

Mohammed Shaheem P — Tue, 07 Oct 2025 01:59:24 +0000

What You'll Learn

This guide shows you how to automatically generate clean markdown files from your Astro content collections. You'll learn how to:

Install and configure the astro-markdown-export plugin
Customize the output to suit your needs
Access the generated markdown files

Why Generate Markdown Files?

When Astro builds your site, your markdown content gets converted to HTML. This is great for browsers but creates two problems:

AI tools can't easily process your content (ChatGPT, Claude, etc.)
Programmatic access to your content becomes difficult

By generating clean markdown files during build, you solve both problems without changing your workflow.

Quick Installation

# Install with npm
npm install astro-markdown-export

# Install with pnpm
pnpm add astro-markdown-export

# Install with yarn
yarn add astro-markdown-export

Basic Setup

Add to your Astro config file:

// astro.config.mjs or astro.config.ts
import { defineConfig } from 'astro/config';
import markdownExport from 'astro-markdown-export';

export default defineConfig({
  integrations: [
    markdownExport({
      siteUrl: 'https://yourdomain.com'
    })
  ]
});

Configuration Options

Option	Type	Default	Purpose
`siteUrl`	`string`	`process.env.SITE_URL`	URL for source attribution
`contentDir`	`string`	`'src/content/blog'`	Where to find your content
`outputDir`	`string`	`'posts'`	Where to output markdown files
`includeSourceUrls`	`boolean`	`true`	Add source URLs to frontmatter
`additionalFrontmatter`	`object`	`{}`	Add custom frontmatter fields

What Gets Generated

When you run astro build, the plugin:

Reads your markdown files from contentDir
Creates enhanced markdown files in dist/outputDir/
Adds source URLs and any additional frontmatter

Example Output

Original content file:

---
title: My Post
description: A sample post
---
# Content here

Generated markdown file:

---
title: My Post
description: A sample post
source_url:
  html: https://yourdomain.com/posts/my-post
  md: https://yourdomain.com/posts/my-post.md
---
# Content here

Practical Use Cases

1. AI Content Processing

Make your content available to AI tools like ChatGPT or Claude by pointing them to your generated markdown files. This works better than HTML because:

Clean markdown is easier for AI to parse
Frontmatter provides structured metadata
Source URLs ensure proper attribution

2. Content API

Use the generated files as a simple content API:

// Example: Fetch a markdown post programmatically
async function fetchPost(slug) {
  const response = await fetch(`https://yourdomain.com/posts/${slug}.md`);
  return response.text();
}

3. Offline Documentation

Provide downloadable markdown versions of your documentation for users who prefer reading offline.

Advanced Configuration

Custom Frontmatter

markdownExport({
  siteUrl: 'https://yourdomain.com',
  additionalFrontmatter: {
    generator: 'My Site',
    version: '1.0.0',
    license: 'CC-BY-4.0',
    ai_index: true
  }
})

Custom Content Directory

If your content is in a non-standard location:

markdownExport({
  contentDir: 'src/content/docs',
  outputDir: 'documentation'
})

Troubleshooting

Files Not Generated

Check that:

Your content files have valid frontmatter
The contentDir path is correct
You're running a full astro build (not dev mode)

Wrong URLs in Frontmatter

Ensure your siteUrl is set correctly in the plugin options or via the SITE_URL environment variable.

Source Code and Contributions

The plugin is open source and available on:

npm
GitHub

Contributions and feature requests are welcome!

Compatibility

Requires Astro 5.0.0 or higher
Works with all Astro content collections
Compatible with all deployment targets

Buy Me A Coffee

Setting up ClickHouse on macOS and Testing with Node.js

Mohammed Shaheem P — Fri, 19 Sep 2025 10:25:41 +0000

ClickHouse is an open-source columnar database built for high-performance analytical queries. This guide shows how I installed ClickHouse on macOS, ran it in the background using a lightweight nohup setup that stores logs and PID in hidden user folders, and tested it with a minimal Node.js + TypeScript example using @clickhouse/client.

Prerequisites

macOS (Intel or Apple Silicon)
Homebrew (optional but recommended for installing ClickHouse)
pnpm for Node package management (or npm / yarn if you prefer)
Basic knowledge of the terminal

1. Install ClickHouse (macOS)

The ClickHouse official macOS install docs: https://clickhouse.com/docs/install/macOS

The simplest approach via Homebrew:

brew install clickhouse

This installs the clickhouse binary. If you used another install method (downloaded the binary/cask), adjust paths below if necessary.

2. Run ClickHouse in the background (nohup)

This guide uses hidden directories in your home for logs and PID to keep things neat:

Logs: ~/.logs/clickhouse/
PID: ~/.nohup/clickhouse.pid

Create the folders (one-time)

mkdir -p ~/.logs/clickhouse
mkdir -p ~/.nohup
touch ~/.logs/clickhouse/server.log ~/.logs/clickhouse/server.err
chmod 644 ~/.logs/clickhouse/server.*

Start ClickHouse in background

Use the clickhouse binary from your PATH to run it in background with nohup

# start backgrounded; this uses nohup and writes to the hidden logs and pid file
BINARY="$(which clickhouse)"
nohup "$BINARY" server > ~/.logs/clickhouse/server.log 2> ~/.logs/clickhouse/server.err & echo $! > ~/.nohup/clickhouse.pid

Alternative (handles daemonizing binaries better): use setsid which is more robust if the binary forks:

BINARY="$(which clickhouse)"
setsid "$BINARY" server > ~/.logs/clickhouse/server.log 2> ~/.logs/clickhouse/server.err < /dev/null & echo $! > ~/.nohup/clickhouse.pid

Verify it started & is listening

# check pid/process
cat ~/.nohup/clickhouse.pid
ps -p "$(cat ~/.nohup/clickhouse.pid)" -o pid,ppid,user,args

# see listening ports (8123 HTTP, 9000 native TCP)
sudo lsof -iTCP -sTCP:LISTEN | egrep 'clickhouse|8123|9000|9004' || true

# quick HTTP test (ClickHouse HTTP endpoint)
curl -sS 'http://localhost:8123/' -d 'SELECT version()' || echo "no http response"

If curl returns the ClickHouse version string, the server is reachable on :8123.

Tail logs

tail -n 200 ~/.logs/clickhouse/server.log
tail -n 200 ~/.logs/clickhouse/server.err
# follow live
tail -f ~/.logs/clickhouse/server.err

Stop the background server

if [ -f ~/.nohup/clickhouse.pid ]; then
  kill "$(cat ~/.nohup/clickhouse.pid)" && rm -f ~/.nohup/clickhouse.pid
else
  echo "No PID file at ~/.nohup/clickhouse.pid"
fi

If the process does not stop, find the true daemon PID (sometimes the parent exits and the real daemon has a different PID):

ps aux | grep clickhouse | egrep -v 'grep|egrep'

3. Node.js + TypeScript test app (pnpm)

We’ll create a minimal TypeScript script that:

connects to ClickHouse HTTP (http://localhost:8123),
creates a temporary Memory table,
inserts rows using client.insert(...),
queries and prints the rows,
drops the table.

Project setup

mkdir clickhouse-test && cd clickhouse-test
pnpm init
pnpm add @clickhouse/client
pnpm add -D ts-node typescript @types/node

Add the start script in package.json:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "ts-node src/main.ts"
}

Create tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Example: `src/main.ts`

import { createClient } from "@clickhouse/client";

async function main() {
    const client = createClient({
        // use url instead of host (host is deprecated)
        url: "http://localhost:8123",
        username: "default",
        database: "default",
        application: "ts-pnpm-test",
    });

    console.log("pinging ClickHouse...");
    if (!(await client.ping())) {
        console.error(
            "❌ failed to ping ClickHouse. Is it running on http://localhost:8123 ?",
        );
        process.exit(1);
    }
    console.log("✅ ping ok");

    // create table (ephemeral Memory engine for testing)
    await client.exec({
        query: `
      CREATE TABLE IF NOT EXISTS test_ts_pnpm (
        id UInt32,
        name String
      ) ENGINE = Memory
    `,
    });

    // insert rows using the client.insert helper (preferred)
    await client.insert({
        table: "test_ts_pnpm",
        values: [
            { id: 1, name: "alice" },
            { id: 2, name: "bob" },
        ],
        // format optional; JSONEachRow is convenient for array-of-objects
        format: "JSONEachRow",
    });

    // select rows back (explicit JSON output)
    const result = await client.query({
        query: `SELECT id, name FROM test_ts_pnpm ORDER BY id`,
        format: "JSON",
    });

    const json = (await result.json()) as {
        meta: unknown[];
        data: Array<{ id: number; name: string }>;
        rows: number;
    };

    console.log("rows:", json.rows);
    console.table(json.data);

    // cleanup
    await client.exec({ query: `DROP TABLE IF EXISTS test_ts_pnpm` });

    await client.close();
    console.log("done");
}

main().catch((err) => {
    console.error(err);
    process.exit(1);
});

Run the test

pnpm start

Expected output:

pinging ClickHouse...
✅ ping ok
rows: 2
┌─────────┬────┬─────────┐
│ (index) │ id │ name    │
├─────────┼────┼─────────┤
│ 0       │ 1  │ 'alice' │
│ 1       │ 2  │ 'bob'   │
└─────────┴────┴─────────┘
done

Troubleshooting

No response on port 8123
- Confirm the server is running and the PID from ~/.nohup/clickhouse.pid is alive.
- Try running ClickHouse in the foreground to observe startup errors:
```
"$(which clickhouse)" server 2>&1 | tee ~/clickhouse-startup-debug.log
tail -n 200 ~/clickhouse-startup-debug.log
```
- Search ClickHouse config for custom ports (http_port, tcp_port) under /opt/homebrew/etc/clickhouse-server/ or /etc/clickhouse-server/.
Log files empty after nohup
- Some binaries fork/daemonize after start. If nohup logs remain empty, the real daemon may be writing to its own log directory (e.g., /opt/homebrew/var/log/clickhouse/).
- Use setsid or run in tmux/screen to capture logs more reliably.
- Also check macOS unified logs:
```
log show --predicate 'process == "clickhouse" OR process == "clickhouse-server"' --last 1h --info | tail -n 200
```
Insert parsing errors
- Use client.insert(...) or send INSERT as a single SQL string via client.exec(...). The @clickhouse/client helper methods handle the correct transport format.
Permission or config errors
- The foreground run will show file permission or config parsing errors. Fix config paths or file ownership accordingly.

Wrap-up

You now have:

ClickHouse installed on macOS,
a tidy nohup background setup that stores logs in ~/.logs/clickhouse/ and the pid in ~/.nohup/clickhouse.pid,
a minimal Node.js + TypeScript test that confirms read/write connectivity.

Note: The nohup setup will not automatically start ClickHouse after a macOS restart. After reboot, you would need to run the nohup command again to start the server.

If you’d like, I can:

provide a small launchd plist that uses your ~/.logs / ~/.nohup paths for auto-start on boot, or
create a one-file shell helper that manages start/stop/status for you.

Happy benchmarking! 🚀

Buy Me A Coffee

Sitemaps

Mohammed Shaheem P — Sun, 03 Mar 2024 16:01:50 +0000

What is sitemaps

A sitemap is a file listing all the pages on a website. It serves as a root map for search engines to discover and index the contents of a website. It is crucial for a improving a websites’s visibility in search engine.

Who needs sitemaps

If you have a relatively small website and your pages are properly linked, search engine crawler bots can usually discover your content so you don’t have to worry about sitemaps.
But if your site is really large or your pages are isolated and not linked to each other or your site is new or has a lot of changing contents (like a news website) it’ll be a wise idea to add a sitemap

⛔️ Having a sitemap is not a 100% guarantee that your pages will be crawled and indexed by the search engines.
In most cases the site will benefit from it, and there’s no disadvantage in having one.
Sitemaps don’t replace the normal crawling and if you don’t add a URL in the sitemap, the search engine could still index the contents of that URL

How to create a sitemap

Ideally the system running your website should generate a sitemap for you automatically, example: you can find a Wordpress plugin or a Drupal extension if you are using a CMS system. If your website is running on a custom server, you’ll have to manage the sitemap creation yourselves. Most popular frameworks will have convenient packages that helps you generate sitemaps.

You’ll have to keep in mind that there are limits to number of URLs a sitemap file can include and maximum size a sitemap file can have. So you can create multiple sitemap files to get around this and create an index sitemap file to combine them all

Example code for automating sitemap generation using Laravel

Here I’m using the a package called spatie/laravel-sitemap for generating sitemaps
Install the spatie/laravel-sitemap package

composer require spatie/laravel-sitemap

If you’d like to customize the default options of this package, you can publish the configuration file with this command

php artisan vendor:publish --provider="Spatie\Sitemap\SitemapServiceProvider" --tag=sitemap-config

Create a new job to handle sitemap creation, run the following artisan command to create a new Job

php artisan make:job SitemapJob

You can use a Job like the following to handle the sitemap creation

<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldBeUnique;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Spatie\Sitemap\Sitemap;
use Spatie\Sitemap\Tags\Url;

class SitemapJob implements ShouldQueue
{

    private array $paths;
    private  string $sitemapPath;
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    public function __construct($paths, $sitemapPath)
    {
        $this->paths = $paths;
        $this->sitemapPath = $sitemapPath;
        $this->onQueue('sitemap_generation');
    }

    public function handle()
    {
        $sitemap = Sitemap::create();
        foreach ($this->paths as $path){
            $sitemap->add(Url::create('https://yourdomain.com'.'/'.$path));
        }
        $sitemap->writeToFile($this->sitemapPath);
    }
}

Now to automate the sitemap generation task we can create a custom artisan command, run the following command to scaffold a custom command

php artisan make:command GenerateSitemap

You can use a command like the following to automate the sitemap generation

<?php

namespace App\Console\Commands;

use App\Jobs\SitemapJob;
use Illuminate\Console\Command;
use Spatie\Sitemap\SitemapIndex;

class GenerateSitemap extends Command
{
    const PER_PAGE = 500;

    protected $signature = 'sitemap:generate';

    protected $description = 'Generate sitemap for the website';

    public function __construct()
    {
        parent::__construct();
    }

    public function handle(): int
    {
        $sitemap_index = SitemapIndex::create();

        $sitemap_url = config('sitemap.base_url') . config('sitemap.static_storage_path');
        $sitemap_index->add($sitemap_url);
        SitemapJob::dispatch(config('sitemap.static_paths'), public_path(config('sitemap.static_storage_path')));

                $dynamicPages = []; // You can populate this list from your database (take all the dynamic page paths that you want to add in the sitemaps)
        $i = 0;
        $dynamicPages->chunk(self::PER_PAGE, function ($pages) use ($sitemap_index, &$i) {
                        $filepath = "sitemaps/page_sitemap_{$i++}.xml";
            $sitemap_url = config('sitemap.base_url') . $filepath;

            $sitemap_index->add($sitemap_url);
            SitemapJob::dispatch($pages->pluck('page_name')->toArray(), public_path($filepath));  // this line assumes that your `dynamicPages` have a property called 'page_name'
        });

        $sitemap_index->writeToFile(public_path('sitemap.xml'));
        return 0;
    }
}

Here all the configs mentioned can be added in config/sitemap.php which will be added when publishing the package configuration file with the given command above.
Now if you want to further automate running this command, Laravel has got your back. You can make use of laravel’s task scheduling system to run this command on a given intervals. For example you can add the following line of code in your schedule function inside the app/Console/Kernel.php to run the sitemap generation command at midnight on every Sundays

$schedule->command('sitemap:generate')->sundays()->at('00:00');

If you found this article helpful consider supporting me by Buying me a Coffee

Buy Me A Coffee

Quick Guide for Flutter

Mohammed Shaheem P — Sun, 26 Feb 2023 07:58:13 +0000

Change App Display Name

Instead of changing the name in android, ios, etc.. separately, Use the package flutter_launcher_name

Add this to pubspect.yaml

dev_dependencies: 
  flutter_launcher_name: "^<latest_version>"

flutter_launcher_name:
  name: "yourNewAppLauncherName"

Run the package with

flutter pub get
flutter pub run flutter_launcher_name:main

Change App Icon

Instead of changing the icon in android, ios, etc.. separately, Use the package flutter_launcher_icons

Add this to pubspec.yaml

dev_dependencies:
  flutter_launcher_icons: "^<latest_version>"

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/images/icon.png"

Run the package with

flutter pub get
flutter pub run flutter_launcher_icons:main

Build and release an Android app

Step By Step Procedures

Create a upload keystore

keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload

Reference the keystore from the app

cd android
touch key.properties

Add the following to key.properties

storePassword=<upload-keystore-password>
keyPassword=<upload-keystore-password>
keyAlias=upload
storeFile=<location of the key store file, such as /Users/<user name>/upload-keystore.jks>

Configure signing in gradle

Configure gradle to use your upload key when building your app in release mode by editing the [project]/android/app/build.gradle file.

Add the keystore information from your properties file before the android block:

def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}

android {
      ...
}

Load the key.properties file into the keystoreProperties object.

Replace the buildTypes block:

buildTypes {
    release {
        // TODO: Add your own signing config for the release build.
        // Signing with the debug keys for now,
        // so `flutter run --release` works.
        signingConfig signingConfigs.debug
    }
}

With the signing configuration info:

   signingConfigs {
       release {
           keyAlias keystoreProperties['keyAlias']
           keyPassword keystoreProperties['keyPassword']
           storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
           storePassword keystoreProperties['storePassword']
       }
   }

   buildTypes {
       release {
           signingConfig signingConfigs.release
       }
   }

Reviewing the app manifest

Review the default App Manifest file, AndroidManifest.xml, located in [project]/android/app/src/main and verify that the values are correct, especially the following:

application Edit the android:label in the application tag to reflect the final name of the app. uses-permission Add the android.permission.INTERNET permission if your application code needs Internet access. The standard template does not include this tag but allows Internet access during development to enable communication between Flutter tools and a running app.

Build APK or AAB

build APK with

flutter build apk

build aab with

flutter build appbundle

Checkout the official documentation

Buy Me A Coffee

Quick Guide for AWS

Mohammed Shaheem P — Sun, 26 Feb 2023 07:40:59 +0000

Deploy to EC2

Security Group

Setup the following security group configuration

Connect with SSH

Update the permission of downloaded certificate file

chmod 400 <file_name>.pem

Connect to the distant server with the command

ssh -i <certificate>.pem ec2-user@<Public_IPv4_DNS>

Install node with nvm

Download nvm using curl

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

Activate nvm with

. ~/.nvm/nvm.sh

Install node with

nvm install node

Test node installation with

node -e "console.log('Running Node.js ' + process.version)"

Checkout the official documentation on how to setup node in ec2 linux

Port Forwarding from 80 to 8000

Use the following command for port forwarding

sudo iptables -t nat -I PREROUTING -p tcp --dport 80 -j REDIRECT --to-ports 8000

Install MongoDB community edition

Verify Linux Distribution with

grep ^NAME  /etc/*release

The result should be Amazon Linux or Amazon Linux AMI

Create a /etc/yum.repos.d/mongodb-org-4.4.repo file so that you can install MongoDB directly using yum:

cd /etc/yum.repos.d
sudo touch mongodb-org-4.4.repo

Add the following Configuration to created file with nano or vim

[mongodb-org-4.4]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/amazon/2/mongodb-org/4.4/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.4.asc

Install MongoDB packages with

sudo yum install -y mongodb-org

Setup storage directory for MongoDb

cd /
sudo mkdir data
cd data
sudo mkdir db
cd ../..
cd home/ec2-user

Start mongodb service

sudo service mongod start

Checkout common errors faced during this

Checkout the offficial Documentation

Install PostgreSQL

Follow this article for installing PostgreSQL

after install use this command to open db shell

sudo su - postgres

Transfer node project to ec2

You can use programs like filezilla to transfer project files the method I use personally is to send zipped file using scp command

Delete node_modules directory from project
Zip the project directory

zip -r server.zip <project_directory>

Transfer zipped file using scp

scp -i <certificate>.pem server.zip ec2-user@<Public_IPv4_DNS>:

Now connect back to instance with SSH and unzip the file

unzip server.zip

Run Application with screen

install the node modules and run the app with screen

screen npm start

you can detach the screen without terminating by

i. ctrl+A
ii. D

Bucket Policy for S3

Use the following bucket policy in S3 Bucket for public read access

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<bucket_name>/*"
        }
    ]
}

CloudFront Guide

Use this tutorial for setting up cloudfront

Steps to get SSL Certificate to EC2 instance

move nameserver to Route 53
request certificate from ACM
create load balancer targeting to ec2 instance
create a record pointing to load balancer in route 53

Buy Me A Coffee

Shopify Orders, Setup Pagination with shopify-api and GraphQL

Mohammed Shaheem P — Mon, 07 Nov 2022 10:33:25 +0000

I took more time than I should have taken while trying to build an orders page with pagination using a React and NestJS with typescript.

Between very few references and average documentations, I'm sure this article could be helpful to someone else who endup in this situation (or better I might endup losing this code and would need a place to find this), so why not write an article about it!

I was using NestJS for backend, but anyone using any other node framework could easily follow this, and I'm using Shopify Polaris for frontend components.

For the sake of simplicity, I'm only adding important Code Blocks here

Backend Function

  pageSize = 25;

  async fetchOrders(
    gqlClient: GraphqlClient,
    cursor: NullableString = null,
    direction: NullableString = FetchDirection.FORWARD,
  ) {
    const [first, last, after, before] =
      direction === FetchDirection.FORWARD
        ? [this.pageSize, null, cursor, null]
        : [null, this.pageSize, null, cursor];

    try {
      const response = await gqlClient.query<OrdersResponse>({
        data: {
          query: `query GetOrders($first: Int, $last: Int, $before: String, $after: String) {
            orders(first: $first, last: $last, before: $before, after: $after) {
              edges {
                cursor
                node {
                  id
                  name
                  customer {
                    firstName
                    lastName
                  }
                  displayFinancialStatus
                  displayFulfillmentStatus
                  totalPriceSet {
                    presentmentMoney {
                      amount
                    }
                  }
                  createdAt
                }
              }
              pageInfo {
                hasNextPage
                hasPreviousPage
              }
            }
          }`,
          variables: {
            first,
            last,
            before,
            after,
          },
        },
      });
      return response.body.data.orders;
    } catch (error) {
      throw new InternalServerErrorException(error);
    }
  }

Frontend Components

export default function OrdersPage() {
  const fetch = useAuthenticatedFetch();
  const [searchParams] = useSearchParams({});

  const [hasNextPage, sethasNextPage] = useState<boolean>(false);
  const [hasPreviousPage, setHasPreviousPage] = useState<boolean>(false);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [orderEdges, setOrderEdges] = useState<OrderEdge[]>([]);

  const fetchOrders = useCallback(
    async (
      direction: NullableString = "forward",
      cursor: NullableString = "",
    ) => {
      setIsLoading(true);
      let fetchUrl;
      if (direction && cursor) {
        fetchUrl = `/api/orders/?cursor=${cursor}&direction=${direction}`;
      } else {
        fetchUrl = "/api/orders";
      }

      try {
        const { edges, pageInfo }: OrdersResponse = await fetch(fetchUrl, {
          method: "GET",
        }).then((res) => res.json());

        setOrderEdges(edges);

        sethasNextPage(pageInfo.hasNextPage);
        setHasPreviousPage(pageInfo.hasPreviousPage);
        setIsLoading(false);

        return;
      } catch (error) {
        console.error(error);
        setIsLoading(false);
        return;
      }
    },
    [],
  );

  useEffect(() => {
    const cursor = searchParams.get("cursor");
    const direction = searchParams.get("direction");

    fetchOrders(direction, cursor);
  }, [searchParams]);

  return (
    <Page>
      <TitleBar title="Orders" />
      <Layout>
        <Layout.Section>
          <OrdersTable
            orderEdges={orderEdges}
            hasNextPage={hasNextPage}
            hasPreviousPage={hasPreviousPage}
            loading={isLoading}
          />
        </Layout.Section>
      </Layout>
    </Page>
  );
}

const resourceName = {
  singular: "order",
  plural: "orders",
};

interface OrdersTableProps {
  orderEdges: OrderEdge[];
  hasNextPage: boolean;
  hasPreviousPage: boolean;
  loading: boolean;
}

export function OrdersTable({
  orderEdges,
  hasNextPage,
  hasPreviousPage,
  loading,
}: OrdersTableProps) {
  const [_, setSearchParams] = useSearchParams({});

  const resourceIDResolver = (order: OrderEdge) => {
    return order.node.id;
  };

  const { selectedResources, allResourcesSelected, handleSelectionChange } = useIndexResourceState(orderEdges, {
      resourceIDResolver,
    });

  const indexTableRowMarkup = useMemo(() => {
    return orderEdges.map(
      (
        {
          node: {
            id,
            name,
            createdAt,
            customer,
            displayFinancialStatus,
            displayFulfillmentStatus,
            totalPriceSet: {
              presentmentMoney: { amount },
            },
          },
        },
        index,
      ) => {
        const customerFullName =
          customer &&
          `${customer?.firstName || ""} ${customer?.lastName || ""}`.trim();
        const financialStatusForDisplay =displayFinancialStatus
                .split("_")
                .map((piece) => capitalize(piece))
                .join(" ");

        const financialStatusBadgeType = displayFinancialStatus === FinancialStatus.PAID
              ? "success"
              : undefined;
        const fulfillmentStatusBadgeType = displayFulfillmentStatus === FulfillmentStatus.FULFILLED
              ? "success"
              : undefined;

        return (
          <IndexTable.Row
            id={id}
            key={id}
            selected={selectedResources.includes(id)}
            position={index}
          >
            <IndexTable.Cell>
              <TextStyle variation="strong">{name}</TextStyle>
            </IndexTable.Cell>
            <IndexTable.Cell>
              {new Date(createdAt).toLocaleDateString()}
            </IndexTable.Cell>
            <IndexTable.Cell>{customerFullName}</IndexTable.Cell>
            <IndexTable.Cell>
                <Badge status={financialStatusBadgeType}>
                    {financialStatusForDisplay}
                </Badge>
            </IndexTable.Cell>
            <IndexTable.Cell>
              <Badge status={fulfillmentStatusBadgeType}>
                  {capitalize(
                      (displayFulfillmentStatus as FulfillmentStatus) ||
                        "unfulfilled",
                    )}
              </Badge>
            </IndexTable.Cell>
            <IndexTable.Cell>{amount}</IndexTable.Cell>
          </IndexTable.Row>
        );
      },
    );
  }, [orderEdges, selectedResources]);

  return (
    <Card sectioned>
      <IndexTable
        resourceName={resourceName}
        itemCount={orderEdges.length}
        selectedItemsCount={
          allResourcesSelected ? "All" : selectedResources.length
        }
        onSelectionChange={handleSelectionChange}
        headings={[
          { title: "Order" },
          { title: "Date" },
          { title: "Customer" },
          { title: "Payment Status" },
          { title: "Fulfillment Status" },
          { title: "Total" },
        ]}
        loading={loading}
      >
        {indexTableRowMarkup}
      </IndexTable>
      <div className={styles.paginationWrapper}>
        <Pagination
          hasPrevious={hasPreviousPage}
          hasNext={hasNextPage}
          onPrevious={() => {
            const cursor = orderEdges[0].cursor;
            setSearchParams({ cursor, direction: "backward" });
          }}
          onNext={() => {
            const cursor = orderEdges[orderEdges.length - 1].cursor;
            setSearchParams({ cursor, direction: "forward" });
          }}
        />
      </div>
    </Card>
  );
}

Buy Me A Coffee

How to Setup your MacBook Air M2 for Software Development

Mohammed Shaheem P — Mon, 07 Nov 2022 10:10:12 +0000

Here is how I setup my 2022 MacBook Air M2 for software development. I'll be mostly using my laptop for building web applications using React, and Node and mobile applications using flutter.

Follow these steps once you are done with your standard Macbook Account Setups.
(Make sure to add a stronger password for your iCloud account if your creating a new Apple ID, also don't forget to check the box "Allow any Apple ID to reset this password" on Create Computer Account Screen)

[FYI: Whenever in this article I mention about downloading a software from somewhere if there's an option to download specific version for Apple Silicon / Mac with apple chip / ARM based go for that version other than the Universal once for better work with your new M1/M1 Pro/M1 Max/M2 machine]

Now let's get into business.

1. Installing a Browser

My favourite browser for web development is chrome, head on to https://www.google.com/chrome/ from safari and install Chrome.

Install these useful chrome extensions while your at it

The last one can be very helpful if your someone who watches a lot of tutorials on Youtube or some other platform, you can increase your playback speed more 2x

You can also try firefox, brave or many other browser options out there, I just keep it minimal with just Safari and Chrome.

2. Homebrew

Homebrew is a must have tool if your a developer on a Mac, inorder to install Homebrew first open your terminal and run the command

git

This will open a prompt asking you to download and install the Command Line Developer Tools, if you haven't already installed it. Go ahead and install this. once it is ready run the following command.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Once this command is executed there will be 2 commands at the end of log that you should run in order to use the brew command.

now go ahead and try using brew by installing wget a very useful package for MacOS

brew install wget

3. Install iTerm2

iTerm2 is a very popular terminal app for MacOS, you can go ahead an install iTerm2 from https://iterm2.com/

4.Customize iTerm2 with ohmyzsh and powerlevel10k

a) Install ohmyzsh

Once your done with the iTerm2 installation you can use wget that we previously installed to install ohmyzsh using the following command

sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"

before you begin to setup powerlevel10k you can install a very helpful ohmyzsh plugin - zsh-autosuggestions, I've been using this for years now it's a very good to have plugin and can save you a lot of time on searching for commands that you have previously used.

Run the following command to install zsh-autosuggestions

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

Add the plugin to the list of plugins for Oh My Zsh to load (inside ~/.zshrc):

plugins=( 
    # other plugins...
    zsh-autosuggestions
)

and start a new terminal session

( *I had trouble seeing the suggestions as my terminal background color and zsh-autosuggestions forground color was similar, you can update the style of zsh-autosuggestions by adding the following line to your .zshrc file ZSH_AUTOSUGGEST_HIGHLIGHT_STYLE="fg=10" )

b) Install powerlevel10k

Follow the four steps to successfully install powerlevel10k from the official documentation

Use ohmyzsh to install powerlevel10k in step 2

Before moving on to next steps head on to iTerm2 > Preferences > Profiles > Colors and play around with the colors or choose a color preset that best fits for you. (I personally use Solarized Dark with a little transparency and background blur head on to Profiles > Window to change transparancey and blur)

5.Setup Git Accounts

You can setup your devices ssh key to your github/gitlab accounts to easily access your git repositories

inorder to do this generate an ssh key using ssh-keygen command, since I have multiple github/gitlab accounts I use separate ssh keys for each account and setup an ssh config file to specify them.

generate an ssh key using the following command

ssh-keygen -f <git_username>_id_rsa

this will generate two files <git_username>_id_rsa and <git_username>_id_rsa.pub inside ~/.ssh directory

copy the contents of <git_username>_id_rsa.pub file and add it over at your github / gitlab settings > sshkeys

if you have multiple ssh keys for different git accounts you can create a file config inside ~/.ssh using

touch ~/.ssh/config

now open that with an editor and add a config like following

# github.com/<primary_account_username>
Host github.com
        HostName github.com
        IdentityFile ~/.ssh/<primary_account_username>_github_id_rsa

# gitlab.com/<primary_account_username>
Host gitlab.com
        HostName gitlab.com
        IdentityFile ~/.ssh/<primary_account_username>_gitlab_id_rsa

# github.com/<secondary_account_username>
Host github.com-sc
        HostName github.com
        IdentityFile ~/.ssh/<secondary_account_username>_github_id_rsa

# gitlab.com/<secondary_account_username>
Host gitlab.com-sc
        HostName gitlab.com
        IdentityFile ~/.ssh/<secondary_account_username>_gitlab_id_rsa

You can add multiple github/gitlab accounts like this

Remember: when your cloning a repository from your secondary account you'll have to add -sc to your ssh url

example:

git clone git@github.com-sc:<repository/path>.git

Or you can simply use a single ssh key for all accounts

6.Install your editors

Since I'll be working on web applications and occasional mobile applications using flutter my main choice of editors is and always been VisualStudio Code

You can head over to https://code.visualstudio.com/download to download the latest version of VS Code

Install these useful extensions while your at it

The theme that I've been recently using is Shades of Purple along with Cascadia Code Font

Here is how my vscode settings looks like

{
    "workbench.colorTheme": "Shades of Purple",
    "workbench.iconTheme": "material-icon-theme",
    "editor.fontFamily": "Cascadia Code",
    "editor.fontLigatures": true,
    "editor.wordWrap": "on",
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "terminal.integrated.fontSize": 12,
    "workbench.startupEditor": "none",
    "terminal.integrated.fontFamily": "MesloLGS NF",
    "files.exclude": {
        "**/.vscode": true
    },
    "editor.formatOnSave": true,
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.linkedEditing": true,
    "workbench.colorCustomizations": {
        "editorUnnecessaryCode.border": "#dd7aab"
    }
}

Lastly add the code commandline tool to your system by pressing command+shift+p and typing install code this will show you an option to add code command to your PATH

7. Install Node Ecosystem

Since different node projects might be written in different node versions, it's always safe to use something like nvm or n to manager your node versions. In this article I'll be using nvm to setup node

Run the following command to install nvm

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

Once this is done restart your terminal to get nvm.

Once nvm is installed you can use nvm to install pretty much any node version and switch between them. Checkout the official documentation to see the usage of nvm

In my case I'm using node 16 at the time of writing this article for most of my projects so,

nvm install 16

This will also install npm for you.

8.Softwares for Mobile App Development

Depending on your framework of choice your process of setup might look entirely different, for those who build Native Android Apps with Kotlin/Java, Native iOS Apps with Swift/Objective C, or Cross Platform applications with Flutter can follow this section to setup your Mobile Application Development Environment.

a) Installing X-Code

Installing Xcode is pretty easy, just head over to App Store and install XCode from there

b) Installing Android Studio

Installing Android Studio used to be a pain in the ass, especially for Apple Silicon Chip users, but it's much easier now as Android Studio has recently released new Software for Apple Silicon Chip Laptop.

You can find the Android Studio here

Once you've installed Android Studio, you'll have a setup wizard on the initial open, You can choose the Standard Setup on the section where it ask you to choose between standard and custom setup.

On the licence agreement page make sure to accept all the listed licence agreements before pressing Finish, this will install all the SDKs, Emulators and necessary tools for Native Android App development. Once the download and Installation of SDKs and Tools are done, your all ready to build your first Native Android Application.

c) Flutter

The process for the installation flutter on macos is neatly documented at official flutter website
Follow this to install and setup flutter

*You can install official flutter extensions on both Android Studio and VS Code depending on the IDE your chosing for flutter development to further simplify Flutter Development.

9.Database Management

Recently I've been exclusively using PostgreSQL for most of my projects, you can find Postgress app for MacOS here

Also I recommend you using Postico or Table Plus with your Relational Databases, believe me it's a lot more easier to surf through your DB if you have tool like this.

And if your a MongoDB user I recommend you using MongoDB Atlas instead of directly installing MongoDB on your Mac, if you want to go with installing on your Mac you can follow this documentation

Also mongo db compass is now available for MacOS you can install that as well

10.More Apps that I Use

Apple has finally introduced the Weather App and Clock App on MacOS Ventura 🥳, so no more 3rd party apps for alarms, stopwatches, timers and weather reports.
I'm between to do apps now, Although Microsoft To Do wins the prize for my longest used To Do app.
If you do heavy API Testings I'd recommend using Postman, alternatively use Insomnia or a great tool I recently found, Hoppscotch ( Fun fact: this used to be Postwoman )
Bandwidth+ - For monitoring your Internet Speed right from menubar
Shottr a great screenshot app or alternatively use monosnap yet another great Screenshot and Screen Recording Software
OpenInTerminal - Finder Extension to open your directory inside Terminal or the code editor of your choice
Rectangle - A free window arragement tool
If you run your development apps in different environments I'd recommend you checkout Docker

Any other app that I should checkout? feel free to comment down below 👇

Tip of the Day 😉: if you create a Directory inside your Home directory ~/. Called "Developer" you'll get a folder with a Nice Hammer Icon, I personally use this directory for all my codes and stuff, and I Added this to finder sidebar for easy access

Buy Me A Coffee

How to install Mautic in AWS with EC2, RDS and SES

Mohammed Shaheem P — Thu, 11 Nov 2021 19:05:15 +0000

Follow this article to install Mautic on AWS EC2

Start EC2 Instance

Launch an instance with a recommended configuration of (2 CPU – 4GB RAM).

To get more details about mautic hardware requirements read this article

You must also have configured your security group to allow SSH (port 22), HTTP (port 80), and HTTPS (port 443) connections.

To get more details about AWS Security Group read this article

Connect to EC2 instance with SSH

Run this command, if necessary, to ensure your key is not publicly viewable.

chmod 400 <certificate_name>.pem

Connect to your instance using its Public DNS

ssh -i <certificate_name>.pem ec2-user@public_dns

Install Apache Server

To ensure that all of your software packages are up to date, perform a quick software update on your instance.

sudo yum update -y

Use the yum install command to install Apache web server

sudo yum install -y httpd

Start the Apache web server.

sudo systemctl start httpd

Use the systemctl command to configure the Apache web server to start at each system boot.

sudo systemctl enable httpd

You can verify that httpd is on by running the following command:

sudo systemctl is-enabled httpd

Now if open the public IPv4 address inside a browser you can see Apache home page

Setup Apache Permissions

Apache httpd serves files that are kept in a directory called the Apache document root. The Amazon Linux Apache document root is /var/www/html, which by default is owned by root.

To allow the ec2-user account to manipulate files in this directory, you must modify the ownership and permissions of the directory.

Add user (in this case, ec2-user) to the apache group.

sudo usermod -a -G apache ec2-user

Log out and then log back in again to pick up the new group, and then verify your membership.

Change the group ownership of /var/www and its contents to the apache group.

sudo chown -R ec2-user:apache /var/www

To add group write permissions and to set the group ID on future subdirectories, change the directory permissions of /var/www and its subdirectories.

sudo chmod 2775 /var/www && find /var/www -type d -exec sudo chmod 2775 {} \;

To add group write permissions, recursively change the file permissions of /var/www and its subdirectories:

find /var/www -type f -exec sudo chmod 0664 {} \;

Install PHP

For installing Mautic 3 you need to install atleast php7.2 as per the time of writing this article

you can get current requirements here

you can use amazon-linux-extras commands to install php

sudo amazon-linux-extras install -y php7.2

To test PHP, create a PHP file in the Apache document root.

echo "<?php phpinfo(); ?>" > /var/www/html/phpinfo.php

In a web browser, type the URL of the file that you just created. This URL is the public DNS address of your instance followed by a forward slash and the file name. For example:

http://`my.public.dns.amazonaws.com`/phpinfo.php

Forem: Mohammed Shaheem P

How to Generate Markdown Files from Astro Content Collections

What You'll Learn

Why Generate Markdown Files?

Quick Installation

Basic Setup

Configuration Options

What Gets Generated

Example Output

Practical Use Cases

1. AI Content Processing

2. Content API

3. Offline Documentation

Advanced Configuration

Custom Frontmatter

Custom Content Directory

Troubleshooting

Files Not Generated

Wrong URLs in Frontmatter

Source Code and Contributions

Compatibility

Setting up ClickHouse on macOS and Testing with Node.js

Prerequisites

1. Install ClickHouse (macOS)

2. Run ClickHouse in the background (nohup)

Create the folders (one-time)

Start ClickHouse in background

Verify it started & is listening

Tail logs

Stop the background server

3. Node.js + TypeScript test app (pnpm)

Project setup

Example: src/main.ts

Run the test

Troubleshooting

Wrap-up

Sitemaps

What is sitemaps

Who needs sitemaps

How to create a sitemap

Quick Guide for Flutter

Change App Display Name

Change App Icon

Build and release an Android app

Step By Step Procedures

Quick Guide for AWS

Deploy to EC2

Security Group

Connect with SSH

Install node with nvm

Port Forwarding from 80 to 8000

Install MongoDB community edition

Install PostgreSQL

Transfer node project to ec2

Run Application with screen

Bucket Policy for S3

CloudFront Guide

Steps to get SSL Certificate to EC2 instance

Shopify Orders, Setup Pagination with shopify-api and GraphQL

Backend Function

Frontend Components

How to Setup your MacBook Air M2 for Software Development

1. Installing a Browser

2. Homebrew

3. Install iTerm2

4.Customize iTerm2 with ohmyzsh and powerlevel10k

a) Install ohmyzsh

b) Install powerlevel10k

5.Setup Git Accounts

6.Install your editors

7. Install Node Ecosystem

8.Softwares for Mobile App Development

a) Installing X-Code

b) Installing Android Studio

c) Flutter

9.Database Management

10.More Apps that I Use

How to install Mautic in AWS with EC2, RDS and SES

Start EC2 Instance

Connect to EC2 instance with SSH

Example: `src/main.ts`