Product landing pages integration in datahub-next app
Product landing pages integration in datahub-next app
- 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/
- 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>
- 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/
...
- 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"
}
],
...
-
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.
-
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(),
},
};
- 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.
- 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:
- Last but not least, get rid of 💩 (reverse proxies)! 😮💨🍾🥳