[site,blog][m]: create new blog post about maps

package-lock.json

@@ -40048,7 +40048,7 @@
     },
     "packages/components": {
       "name": "@portaljs/components",
-      "version": "0.3.1",
+      "version": "0.2.0",
       "dependencies": {
         "@githubocto/flat-ui": "^0.14.1",
         "@heroicons/react": "^2.0.17",

package.json

@@ -1,8 +1,6 @@
 {
   "name": "portaljs",
-  "workspaces": [
-    "./packages/*"
-  ],
+  "workspaces": ["./packages/*"],
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {

site/.gitignore

@@ -35,8 +35,3 @@ yarn-error.log*
 
 # markdowndb
 markdown.db
-
-# seo
-robots.txt
-sitemap-0.xml
-sitemap.xml

site/components/Features.tsx

@@ -58,7 +58,7 @@ export default function Features() {
           >
             <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.blue.300),theme(colors.blue.400),theme(colors.blue.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]" />
             <div className="relative overflow-hidden rounded-xl p-6">
-              <img src={feature.icon} alt={feature.title} className="h-24 w-auto" />
+              <img src={feature.icon} alt="" className="h-24 w-auto" />
               <h2 className="mt-4 font-display text-base text-primary dark:text-primary-dark">
                 <span className="absolute -inset-px rounded-xl" />
                 {feature.title}

site/components/MDXPage.tsx

@@ -12,6 +12,7 @@ export default function MDXPage({ source, frontMatter }) {
         return <LayoutComponent {...frontMatter}>{children}</LayoutComponent>;
     };
 
+
     return (
         <Layout>
             <MDXRemote {...source} components={{ DocsPagination, NextSeo, Hero }} />

site/content/blog/enhancing-geospatial-data-visualization-with-portaljs.md

@@ -0,0 +1,64 @@
+---
+title: 'Enhancing Geospatial Data Visualization with PortalJS'
+date: 2023-07-18
+authors: ['Yoana Popova', 'João Demenech', 'Luccas Mateus']
+filetype: 'blog'
+---
+
+Are you keen on building rich and interactive data portals? Do you find value in the power and flexibility of JavaScript, Nextjs, and React? In that case, allow us to introduce you to [PortalJS](https://portaljs.org/), a state-of-the-art framework leveraging these technologies to help you build amazing data portals.
+
+Perhaps you already understand that the effective data visualization lies in the adept utilization of various data components. Within [PortalJS](https://portaljs.org/), we take data visualization a step further. It's not just about displaying data - it's about telling a captivating story through the strategic orchestration of a diverse array of data components.
+
+We are now eager to share our latest enhancement to [PortalJS](https://portaljs.org/): maps, a powerful tool for visualizing geospatial data. In this post, we will to take you on a tour of our experiments and progress in enhancing map functionalities on [PortalJS](https://portaljs.org/). Our journey into this innovative feature is still in its early stages, with new facets being unveiled and refined as we perfect our API. Still, this exciting development opens a new avenue for visualizing data, enhancing your ability to convey complex geospatial information with clarity and precision.
+
+## Exploring Map Formats
+
+Maps play a crucial role in geospatial data visualization. Several formats exist for storing and sharing this type of data, with GeoJSON, KML, and shapefiles being among the most popular. As a prominent figure in the field of open-source data portal platforms, [PortalJS](https://portaljs.org/) strives to support as many map formats as possible.
+
+Taking inspiration from the ckanext-geoview extension, we currently support KML and GeoJSON formats in [PortalJS](https://portaljs.org/]. This remarkable extension is a plugin for CKAN, the world’s leading open source data management system, that enables users to visualize geospatial data in diverse formats on an interactive map. Apart from KML and GeoJSON formats support, our roadmap entails extending compatibility to encompass all other formats supported by ckanext-geoview. Rest assured, we are committed to empowering users with a wide array of map format options in the future.
+
+So, what makes these formats special?
+
+- **GeoJSON**: This format uses JSON to depict simple geographic features and their associated attributes. It's often hailed as the most popular choice in the field.
+- **KML**: An XML-based format, KML can store details like placemarks, paths, polygons, and styles.
+- **Shapefiles**: These are file collections that store vector data—points, lines, and polygons—and their attributes.
+
+## Unveiling the Power of Leaflet and OpenLayers
+
+To display maps in [PortalJS](https://portaljs.org/), we utilize two powerful JavaScript libraries for creating interactive maps based on different layers: Leaflet and OpenLayers. Each offers distinct advantages (and disadvantages), inspiring us to integrate both and give users the flexibility to choose.
+
+Leaflet is the leading open-source JavaScript library known for its mobile-friendly, interactive maps. With its compact size (just 42 KB of JS), it provides all the map features most developers need. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms.
+
+OpenLayers is a high-performance library packed with features for creating interactive web maps. OpenLayers can display map tiles, vector data, and markers sourced from anywhere on any webpage. It's an excellent tool for leveraging geographic information of all kinds.
+
+## Introducing Map Feature
+
+Both components have some similar features and props, such as:
+
+### Polygons and points
+
+![Map with polygons and points](/assets/blog/2023-07-18-map-polygons-and-points.png)
+
+Our initial version enables the use of both vectors and points to display information. Points are simpler and faster to render than vectors, but they have less detail and interactivity. For example, if you have data that is represented by coordinates or addresses, you can use points to show them on the map. This way, you can avoid time-consuming loading and rendering complex vector shapes that may slow down your map.
+
+### Tooltips
+
+![Map with tooltips](/assets/blog/2023-07-18-map-tooltips.png)
+
+We have implemented an exciting feature that enhances the usability of our map component: tooltips. When you hover over a polygon or point on the map, a small pop-up window, known as a tooltip, appears. This tooltip provides relevant details about the feature under your cursor, according to what features the map creator wants to highlight. For example, when exploring countries, you can effortlessly discover their name, population, and area by hovering over them. Similarly, hovering over cities reveals useful information like their name, temperature, and elevation. To enable this handy tooltip functionality on our map, simply include a tooltip prop when using the map component.
+
+### Focus
+
+![Map with polygons over a region](/assets/blog/2023-07-18-map-polygons-on-region.png)
+
+Users can also choose a region of focus, which will depend on the data, by setting initial center coordinates and zoom level. This is especially helpful for maps that are not global, such as the ones that use data from a specific country, city or region.
+
+## Mapping the Future with PortalJS
+
+Through our ongoing enhancements to the [PortalJS library](https://storybook.portaljs.org/), we aim to empower users to create engaging and informative data portals featuring diverse map formats and data components.
+
+Why not give [PortalJS](https://portaljs.org/) a try today and discover the possibilities for your own data portals? To get started, check out our comprehensive documentation here: [PortalJS Documentation](https://portaljs.org/docs).
+
+Have questions or comments about using [PortalJS](https://portaljs.org/) for your data portals? Feel free to share your thoughts on our [Discord channel](https://discord.com/invite/EeyfGrGu4U). We're here to help you make the most of your data.
+
+Stay tuned for more exciting developments as we continue to enhance [PortalJS](https://portaljs.org/)!

site/content/config.js

@@ -1,7 +1,7 @@
 const config = {
-  title: 'PortalJS - The JavaScript framework for data portals.',
+  title: 'PortalJS',
   description:
-    'PortalJS is a framework for rapidly building rich data portal frontends using a modern frontend approach.',
+    'PortalJS is a framework for rapidly building rich data portal frontends using a modern frontend approach. PortalJS can be used to present a single dataset or build a full-scale data catalog/portal.',
   theme: {
     default: 'dark',
     toggleIcon: '/images/theme-button.svg',
@@ -36,10 +36,6 @@ const config = {
   ],
   footerLinks: [],
   nextSeo: {
-    additionalLinkTags: [
-      { rel: 'icon', href: '/favicon.ico' },
-      { rel: 'apple-touch-icon', href: '/icon.png', sizes: '120x120' },
-    ],
     openGraph: {
       type: 'website',
       title:

site/content/guide/index.md

@@ -1,8 +1,6 @@
 ---
 showToc: false
 showSidebar: false
-title: "Markdown-based Websites Guide"
-disableTitle: true
 ---
 
 <Hero title="Markdown-based Websites" subtitle="Create markdown-based website, update it, add collaborators and discover markdown superpowers" />
@@ -81,4 +79,4 @@ Below is a screenshot of how the final website will look like:
 - Visit the site! Yay! Your changes are live! 🎉
 
 > [!tip]
-> Read full tutorial [[edit-a-website-locally|here!]]
+> Read full tutorial [[edit-a-website-locally|here!]]

site/content/howtos/index.md

@@ -1,6 +1,4 @@
----
-title: Guides and Tutorials
----
+# Guides and tutorials
 
 - [[howtos/analytics|How to add web analytics?]]
 - [[howtos/seo|How to customize page metadata for SEO?]]

site/layouts/default.tsx

@@ -6,7 +6,7 @@ export default function DefaultLayout({ children, ...frontMatter }) {
           {/* Default layout */}
           {!frontMatter.layout && (
             <>
-              {!frontMatter.disableTitle && <h1>{frontMatter.title}</h1>}
+              <h1>{frontMatter.title}</h1>
               {frontMatter.author && (
                 <div className="-mt-6">
                   <p className="opacity-60 pl-1">{frontMatter.author}</p>

site/layouts/docs.tsx

@@ -13,7 +13,7 @@ export const DocsLayout: React.FC<any> = ({ children, ...frontMatter }) => {
               <time dateTime={created}>{formatDate(created)}</time>
             </p>
           )}
-          {!frontMatter.disableTitle && title && <h1>{title}</h1>}
+          {title && <h1>{title}</h1>}
         </div>
       </header>
       <section>{children}</section>

site/next-sitemap.config.js

@@ -1,5 +0,0 @@
-/** @type {import('next-sitemap').IConfig} */
-module.exports = {
-  siteUrl: process.env.SITE_URL || 'https://portaljs.org',
-  generateRobotsTxt: true,
-}

site/package-lock.json

@@ -50,7 +50,6 @@
       "devDependencies": {
         "@tailwindcss/typography": "^0.5.9",
         "autoprefixer": "^10.4.14",
-        "next-sitemap": "^4.1.8",
         "postcss": "^8.4.22",
         "prettier": "^2.8.7",
         "remark": "^14.0.2",
@@ -230,12 +229,6 @@
       "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz",
       "integrity": "sha512-Tbsj02wXCbqGmzdnXNk0SOF19ChhRU70BsroIi4Pm6Ehp56in6vch94mfbdQ17DozxkL3BAVjbZ4Qc1a0HFRAg=="
     },
-    "node_modules/@corex/deepmerge": {
-      "version": "4.0.43",
-      "resolved": "https://registry.npmjs.org/@corex/deepmerge/-/deepmerge-4.0.43.tgz",
-      "integrity": "sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ==",
-      "dev": true
-    },
     "node_modules/@docsearch/css": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.5.0.tgz",
@@ -7094,15 +7087,6 @@
         "node": "*"
       }
     },
-    "node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/minipass": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
@@ -7346,39 +7330,6 @@
         "react-dom": ">=16.0.0"
       }
     },
-    "node_modules/next-sitemap": {
-      "version": "4.1.8",
-      "resolved": "https://registry.npmjs.org/next-sitemap/-/next-sitemap-4.1.8.tgz",
-      "integrity": "sha512-XAXpBHX4o89JfMgvrm0zimlZwpu2iBPXHpimJMUrqOZSc4C2oB1Lv89mxuVON9IE8HOezaM+w4GjJxcYCuGPTQ==",
-      "dev": true,
-      "funding": [
-        {
-          "url": "https://github.com/iamvishnusankar/next-sitemap.git"
-        }
-      ],
-      "dependencies": {
-        "@corex/deepmerge": "^4.0.43",
-        "@next/env": "^13.4.3",
-        "fast-glob": "^3.2.12",
-        "minimist": "^1.2.8"
-      },
-      "bin": {
-        "next-sitemap": "bin/next-sitemap.mjs",
-        "next-sitemap-cjs": "bin/next-sitemap.cjs"
-      },
-      "engines": {
-        "node": ">=14.18"
-      },
-      "peerDependencies": {
-        "next": "*"
-      }
-    },
-    "node_modules/next-sitemap/node_modules/@next/env": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.10.tgz",
-      "integrity": "sha512-3G1yD/XKTSLdihyDSa8JEsaWOELY+OWe08o0LUYzfuHp1zHDA8SObQlzKt+v+wrkkPcnPweoLH1ImZeUa0A1NQ==",
-      "dev": true
-    },
     "node_modules/next-themes": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",

site/package.json

@@ -6,7 +6,6 @@
     "dev": "npm run mddb && next dev",
     "build": "next build",
     "prebuild": "npm run mddb && node ./scripts/fix-symlinks.mjs",
-    "postbuild": "next-sitemap",
     "start": "next start",
     "mddb": "mddb content"
   },
@@ -53,7 +52,6 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "^10.4.14",
-    "next-sitemap": "^4.1.8",
     "postcss": "^8.4.22",
     "prettier": "^2.8.7",
     "remark": "^14.0.2",

site/pages/_app.tsx

@@ -47,12 +47,7 @@ function MyApp({ Component, pageProps }) {
       defaultTheme={siteConfig.theme.default}
       forcedTheme={siteConfig.theme.default ? null : 'light'}
     >
-      <DefaultSeo
-        defaultTitle={siteConfig.title}
-        description={siteConfig.description}
-        titleTemplate="PortalJS - %s"
-        {...siteConfig.nextSeo}
-      />
+      <DefaultSeo defaultTitle={siteConfig.title} {...siteConfig.nextSeo} />
 
       {/* Global Site Tag (gtag.js) - Google Analytics */}
       {siteConfig.analytics && (

site/pages/_document.tsx

@@ -1,13 +0,0 @@
-import { Html, Head, Main, NextScript } from 'next/document';
-
-export default function Document() {
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
-}

site/pages/blog.tsx

@@ -3,12 +3,10 @@ import computeFields from '@/lib/computeFields';
 import clientPromise from '@/lib/mddb';
 import { BlogsList, SimpleLayout } from '@portaljs/core';
 import * as fs from 'fs';
-import {NextSeo} from 'next-seo';
 
 export default function Blog({ blogs }) {
   return (
     <>
-      <NextSeo title="Blog posts" />
       <Layout>
         <SimpleLayout title="Blog posts">
           <BlogsList blogs={blogs} />