Product landing pages integration in datahub-next app

Product landing pages integration in datahub-next app

  1. Move landing pages from datahub-io and flowershow-app into /app/(landing) folder:
app/
# New directory with product's landing pages
  (landing)/
    datahub/        # DataHub landing pages
      page.tsx
      collections/page.tsx
      pricing/page.tsx
      publish/page.tsx
      solutions/page.tsx
    flowershow/     # Flowershow landing pages
      page.tsx
      cloud/page.tsx
# Existing directories
  [user]/
  api/
  cloud/
  1. Adjust middleware to route traffic to correct landing pages route - /flowershow or /datahub - depending on the deployment.
if path is a landing page path:
  if domain == "datahub.io":
    rewrite to /datahub/<path>
  if domain == "flowershow.app":
    rewrite to /flowershow/<path>
  1. Resue shared components where possible. Put any product-specific landing page components in product subfolders:
/components
   ... all the shared components
  /datahub
  /flowershow

or if only related to landing pages:

app/
# New directory with product's landing pages
  (landing)/
    datahub/        # DataHub landing pages
      _components/
      ...
    flowershow/     # Flowershow landing pages
      _components/
      ...
  1. Create repositories for Flowershow's blog and docs (notes, journal ?) (or a single flowershow-content) repository and publish them on Flowershow Cloud. Then configure aliases for them in Flowershow Cloud's app config.json (just like we currently do in DataHub Cloud):
  ...
  "siteAliases": [
    {
      "origin": "/@olayway/blog",
      "alias": "/blog"
    },
    {
      "origin": "/@olayway/docs",
      "alias": "/docs"
    },
    {
      "origin": "/@olayway/notes",
      "alias": "/notes"
    },
    {
      "origin": "/@olayway/journal",
      "alias": "/journal"
    }
  ],
  ...
  1. Convert blog and docs landing pages to simple markdown pages for now like we did in DataHub (https://datahub.io/blog and https://datahub.io/docs). Adding support for blog/catalog home pages is another topic that should be handled separately and can be done later.

  2. Adjust tailwind config to apply both shared and product-specific styles.

Create base.config.js with shared foundation styles.

tailwind/
  base.config.js        # Shared base styles (foundation)
  flowershow.config.js  # Flowershow styles
  datahub.config.js     # DataHub styles

Use base.config.js tailwind config as a preset in product specific tailwind configs.

// datahub.config.js
const baseConfig = require("./base.config.js");

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [baseConfig], // This ensures base config is used as foundation
  theme: {
    extend: {
      colors: {
        // datahub-specific colors
      },
    },
  },
};

Adjust postcss.config.js to load correct styles:

const getProductConfig = () => {
  const productType = env.PRODUCT; // or sth like this
  return require(`./tailwind/${productType}.config.js`);
};

module.exports = {
  plugins: {
    // ...
    tailwindcss: getProductConfig(),
  },
};
  1. Adjust Flowershow Cloud tailwind config to look more like flowershow.app (?)

Meaning colors? Need to analyse what style parts specifically do we want to take from flowershow.app.

  1. Configure giscus comments for each Flowershow content site (blog, docs …)

What about existing giscus discussions/comments on flowershow.app?

All giscus created discussions: https://github.com/datopian/flowershow/discussions?discussions_q=is%3Aopen+author%3Agiscus%5Bbot%5D+

There is only 10 discussions and 32 comments in total. Can be transferred if needed:

image
  1. Last but not least, get rid of 💩 (reverse proxies)! 😮‍💨🍾🥳

© 2025 All rights reservedBuilt with DataHub Cloud

Built with LogoDataHub Cloud