[guide/index.md][xs]: headings adjstmts

markdownbased repo

package-lock.json

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

package.json

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

site/.gitignore

@@ -35,3 +35,8 @@ 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="" className="h-24 w-auto" />
+              <img src={feature.icon} alt={feature.title} 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/Hero.tsx

@@ -41,7 +41,7 @@ export function Hero() {
         {/* Commented code on line 37, 39 and 113 will reenable the two columns hero */}
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-y-16 gap-x-8 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
           <div className="relative mb-10 lg:mb-0 md:text-center lg:text-left">
-            <div role="heading">
+            <div>
               <h1 className="inline bg-gradient-to-r from-blue-500 via-blue-300 to-blue-500 bg-clip-text text-5xl tracking-tight text-transparent">
                 The JavaScript framework for data portals
               </h1>

site/components/MDXPage.tsx

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

site/components/NavItem.tsx

@@ -20,7 +20,7 @@ export default function NavItem({ item }) {
   };
 
   return (
-    <Menu as="div" className="relative">
+    <Menu as="div" role="menu" className="relative">
       <Menu.Item>
         {Object.prototype.hasOwnProperty.call(item, 'href') ? (
           <Link

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

@@ -1,7 +1,7 @@
 ---
 title: 'Enhancing Geospatial Data Visualization with PortalJS'
 date: 2023-07-18
-authors: ['Yoana Popova', 'João Demenech', 'Luccas Mateus']
+authors: ['João Demenech', 'Luccas Mateus', 'Yoana Popova']
 filetype: 'blog'
 ---
 
@@ -15,7 +15,7 @@ We are now eager to share our latest enhancement to [PortalJS](https://portaljs.
 
 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.
+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?
 

site/content/config.js

@@ -1,7 +1,7 @@
 const config = {
-  title: 'PortalJS',
+  title: 'PortalJS - The JavaScript framework for data portals.',
   description:
-    '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.',
+    'PortalJS is a framework for rapidly building rich data portal frontends using a modern frontend approach.',
   theme: {
     default: 'dark',
     toggleIcon: '/images/theme-button.svg',
@@ -36,6 +36,10 @@ 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/docs/index.md

@@ -38,7 +38,7 @@ Let's check it's working and what we have! Open http://localhost:3000 from your
 
 You should see a page like this when you access http://localhost:3000. This is the starter template page which shows the most simple data portal you could have: a simple README plus csv file.
 
-<img src="/assets/examples/basic-example.png" />
+<img src="/assets/examples/basic-example.png" alt="Basic example" />
 
 ### Editing the Page
 
@@ -51,8 +51,8 @@ Let’s try editing the starter page.
 
 After refreshing the page, you should see the new text:
 
-<img src="/assets/docs/editing-the-page-1.png" />
+<img src="/assets/docs/editing-the-page-1.png" alt="Editing base example" />
 
-Congratulations! The app is up and running and you learned how to edit a page. In the next lesson, you are going to learn how to create new datasets. 
+Congratulations! The app is up and running and you learned how to edit a page. In the next lesson, you are going to learn how to create new datasets.
 
 <DocsPagination next="/docs/creating-new-datasets" />

site/content/guide/index.md

@@ -1,11 +1,15 @@
 ---
 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" />
 
-# Tutorial 1: Create a website from scratch using markdown and PortalJS
+## Tutorials
+
+### Tutorial 1: Create a website from scratch using markdown and PortalJS
 
 In this tutorial we will walk you through creating an elegant, fully functional website written in simple markdown and published with PortalJS.
 
@@ -17,7 +21,7 @@ By the end of this tutorial you will:
 Below is a screenshot of how the final website will look like:
 ![[tutorial-1-result.png]]
 
-### Setup a sandbox website including live publishing
+#### Setup a sandbox website including live publishing
 
 - Prerequisites: sign up for GitHub and Vercel
 - Navigate to [datopian/flowershow repository](https://github.com/datopian/flowershow)
@@ -25,14 +29,14 @@ Below is a screenshot of how the final website will look like:
 - Let the site build on Vercel
 - Visit the site! Yay! Your site is working! 🎉
 
-### Now, let's edit the front page
+#### Now, let's edit the front page
 
 - Navigate to `content/index.md` file in the site repository
 - Add some text to it
 - Save and watch the site redeploy
 - Visit the site! Yay! Your changes are live! 🎉
 
-### Let's add a page: e.g. about page
+#### Let's add a page: e.g. about page
 
 - Navigate to the `content` folder in the site repository
 - Add `about.md` file with some text
@@ -42,7 +46,7 @@ Below is a screenshot of how the final website will look like:
 > [!tip]
 > Read full tutorial [[create-a-website-from-scratch|here!]]
 
-# Tutorial 2: Editing your site locally on your computer
+### Tutorial 2: Editing your site locally on your computer
 
 In this tutorial, we will walk you through the process of editing your Flowershow website locally on your computer.
 
@@ -58,20 +62,20 @@ Below is a screenshot of how the final website will look like:
 
 ![[tutorial-2-result.png]]
 
-### Clone the repository to your computer
+#### Clone the repository to your computer
 
 - Setup GitHub Desktop app with your GitHub account
 - Grab your site's repository URL
 - Open GitHub Desktop app and clone the repository
 - Yay! You have a copy of your website's repository on your computer! 🎉
 
-### Now, let's edit in Obsidian
+#### Now, let's edit in Obsidian
 
 - Open the `/content` folder of the cloned repository in Obsidian
 - Edit the home page and the about page
 - Create a folder with the reviews of books you've read
 
-### Commit your changes
+#### Commit your changes
 
 - Commit the changes in GitHub Desktop app
 - Push the changes to the remote repository
@@ -79,4 +83,14 @@ 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!]]
+
+## Howtos
+
+- [[quickly-create-a-sandbox-website|How to quickly create a sandbox website]]
+- [[edit-text-on-a-single-md-page|How to quickly edit text on a single Markdown-based page]]
+- [[add-a-simple-md-page|How to add a simple Markdown page]]
+- [[edit-or-add-md-pages-locally|How to edit or add Markdown-based pages locally on your computer]]
+- [[how-to-add-images-to-a-md-page|How to add images to a Markdown-based page]]
+- [[publish-obsidian-vault-to-github|How to push an Obsidian vault to a GitHub repository]]
+- [[create-a-simple-catalog-of-anything|How to create a simple catalog of anything in Obsidian]]

site/content/howtos/add-a-simple-md-page.md

@@ -1,13 +1,16 @@
 ---
 title: How to quickly add a simple Markdown-based page
+date: 2023-07-27
+authors: ['Lauren Wigmore', 'Ola Rubaj']
+filetype: 'blog'
 ---
 
-Welcome to this tutorial on how to quickly add a simple Markdown-based page to your website.  The steps here are designed for non-technical contributors. There's no need to know how to code!
+Welcome to this howto on how to quickly add a simple Markdown-based page to your website. The steps here are designed for non-technical contributors. There's no need to know how to code!
 
 > [!important]
-> This "How to" is only recommended for very simple Markdown pages, e.g. those without images, links to other pages, diagrams, or other elements that can't be previewed in GitHub preview mode. 
+> This "How to" is only recommended for very simple Markdown pages, e.g. those without images, links to other pages, diagrams, or other elements that can't be previewed in GitHub preview mode.
 
->[!tip]
+> [!tip]
 > If you are unfamiliar with Markdown (and its different flavours and extra elements supported by Flowershow based websites), check out [this short guide](https://flowershow.app/docs/syntax) on available syntax elements.
 
 ## Steps
@@ -20,15 +23,15 @@ Welcome to this tutorial on how to quickly add a simple Markdown-based page to y
 > [!tip]
 > If you want to add your page to a new subfolder, in the "Name your file..." field, first type the name of the new subfolder, followed by a forward slash, .e.g., `blog/`. After you hit the slash, you'll see the name field gets cleared, but the path before it has been extended with your subfolder name. You can repeat this process if you want to put your file into further nested subfolders. Then, simply type the name of the file with ".md" extension.
 
-5. Paste or write the contents of the file in Markdown format. 
+5. Paste or write the contents of the file in Markdown format.
 6. (Optionally) Switch to the "Preview" mode, by toggling from "Edit" -> "Preview" at the top of the file content, to see a rough visualisation of your changes. Keep in mind though, that the actual website may have different styling and may support additional Markdown elements that GitHub doesn't render on the preview.
-5. When you're happy with the content, click on the “Commit changes...” button. In the "Commit message" field, provide a concise summary of your changes. If necessary, you can add further explanation in the "Extended description" text field. Then select “Commit directly to the main branch”, and hit "Commit changes."
-6. The site is now going to be rebuilt to reflect the changes saved to the `main` branch. This can take up to a few minutes. After this time you should see your page live.
+7. When you're happy with the content, click on the “Commit changes...” button. In the "Commit message" field, provide a concise summary of your changes. If necessary, you can add further explanation in the "Extended description" text field. Then select “Commit directly to the main branch”, and hit "Commit changes."
+8. The site is now going to be rebuilt to reflect the changes saved to the `main` branch. This can take up to a few minutes. After this time you should see your page live.
 
 ## Summary
 
-Congratulations, you've now learned how to create a new Markdown page on your Flowershow-based website. 
+Congratulations, you've now learned how to create a new Markdown page on your Flowershow-based website.
 
-If anything is not clear to you, or you have suggestions on how we can make this 'How to' better, please don't hesitate to let us know. 
+If anything is not clear to you, or you have suggestions on how we can make this 'How to' better, please don't hesitate to let us know.
 
 Happy editing!

site/content/howtos/add-or-edit-content-on-life-itself-ecosystem.md

@@ -3,13 +3,6 @@ title: How to add or edit content on the Life Itself ecosystem page
 isDraft: true
 ---
 
-## Contents
-
-1. [Introduction](#introduction)
-2. [How to edit and add to the site](#how-to-edit-and-add-to-the-site)
-3. [Glossary](#glossary)
-4. [Contact](#contact)
-
 ## Introduction
 
 From the outset, we have argued that any successful mapping effort must be collaborative and participatory. To make it as simple as possible to contribute, we have opened up the site, giving it a wiki-like structure, meaning people can contribute and add items directly - no coding required. We hope this can support the ongoing growth of our contributor community, and empower users to continue in collective efforts to make the map ever more useful and informative.

site/content/howtos/edit-a-page-with-code-editor-or-obsidian.md

@@ -1,5 +1,8 @@
 ---
-title: "How to edit a page with a code editor or Obsidian"
+title: 'How to edit a page with a code editor or Obsidian'
+date: 2023-07-27
+authors: ['Jake Hirsch', 'Ola Rubaj']
+filetype: 'blog'
 isDraft: true
 ---
 

site/content/howtos/edit-or-add-md-pages-locally.md

@@ -1,5 +1,8 @@
 ---
 title: How to edit or add Markdown-based pages locally on your computer
+date: 2023-07-27
+authors: ['Jake Hirsch', 'Ola Rubaj']
+filetype: 'blog'
 ---
 
 ## Intro

site/content/howtos/edit-text-on-a-single-md-page.md

@@ -1,13 +1,16 @@
 ---
-title: How to quickly edit text content on a single Markdown-based page
+title: How to quickly edit text on a single Markdown-based page
+date: 2023-07-27
+authors: ['Ola Rubaj']
+filetype: 'blog'
 ---
 
-Welcome to this tutorial on how to quickly edit text content on a single Markdown-based page.  The steps here are designed for non-technical contributors. There's no need to know how to code!
+Welcome to this tutorial on how to quickly edit text content on a single Markdown-based page. The steps here are designed for non-technical contributors. There's no need to know how to code!
 
 > [!important]
-> This "How to" is only recommended for text changes only, e.g. those that don't include adding images, links to other pages, diagrams, or other elements that can't be previewed in GitHub preview mode. 
+> This "How to" is only recommended for text changes only, e.g. those that don't include adding images, links to other pages, diagrams, or other elements that can't be previewed in GitHub preview mode.
 
->[!tip]
+> [!tip]
 > If you are unfamiliar with Markdown (and its different flavours and extra elements supported by Flowershow based websites), check out [this short guide](https://flowershow.app/docs/syntax) on available syntax elements.
 
 ## Steps

site/content/howtos/how-to-add-images-to-a-md-page.md

@@ -0,0 +1,45 @@
+---
+title: How to add images to a Markdown-based page
+date: 2023-07-27
+authors: ['Jake Hirsch', 'Ola Rubaj']
+filetype: 'blog'
+---
+
+## Intro
+
+Here, you will learn how to add images to a Markdown-based page. These instructions show how to add these images locally, on your computer, so first you need to know how to work locally with GitHub Desktop app and Obsidian. If you're new to these tools, we recommend reading this howto first:
+
+- [[blog/edit-or-add-md-pages-locally|How to edit or add Markdown pages locally]]
+
+Or you can follow these two tutorials to start from scratch:
+
+- [[create-a-website-from-scratch|Tutorial 1: Create a Markdown based website from scratch]]
+- [[edit-a-website-locally|Tutorial 2: Edit your website locally on your computer]]
+
+## Prerequisites
+
+- A GitHub account
+- A GitHub Desktop app
+- Obsidian
+
+## Steps
+
+### Step 1: Set the assets folder as an attachment folder
+
+In Obsidian, in the root of your vault, create a new folder called 'assets'. Then, right click on and select "set as attachment folder". By doing so, all the images you paste into your note will automatically be saved to this folder (instead of being saved to the root, next to all your notes). This is necessary for your website to display embedded images.
+
+### Step 2: Copy and paste your image
+
+Copy whichever image you would like to add and paste it directly into your Obsidian note. You can check that it has been saved to the "assets" folder.
+
+### Step 3: Commit and push
+
+To learn more about this step, see the howto or the tutorials listed in the intro section.
+
+## Summary
+
+Congratulations, you've now learned how to add an image to your Markdown page!
+
+If anything is not clear to you, or you have suggestions on how we can make this 'How to' better, please don't hesitate to let us know.
+
+Happy editing!

site/content/howtos/how-to-format-a-perfect-markdown-based-page.md

@@ -0,0 +1,33 @@
+---
+title: How to format a perfect Markdown-based page
+date: 2023-07-27
+authors: ['Lauren Wigmore', 'Ola Rubaj']
+filetype: 'blog'
+isDraft: true
+---
+
+Welcome to this information guide to help you understand how to format the perfect Markdown-based page for your website. The information here is designed to give you an overview.
+
+## Types of Markdown Styles
+
+There are three types of Markdown options that are supported by Flowershow.
+
+- CommonMark
+- GitHub Flavored Markdown (GFM) - a superset of CommonMark
+- Obsidian Flavored Markdown - a superset of CommonMark with most GFM functionalities plus its own syntax elements, such as wikilinks, callouts, LaTeX, mermaid diagrams, and more.
+
+Each one has extra functionalities building on top of the previous Markdown option.
+
+Flowershow aims to be fully Obsidian compatible since it supports most Obsidian Flavored Markdown syntax elements and therefore, it is the best to use as an editor.
+
+## Useful Links
+
+It would be too complicated (and long) to explain all of the formatting aspects here, so we have included the links below to provide you with this information and more!
+[Flowershow Documents Page](https://flowershow.app/docs/syntax) - Use this page to see all of the useful key elements that are frequently required on Flowershow pages.
+[Obsidian help pages](https://help.obsidian.md/Editing+and+formatting/Obsidian+Flavored+Markdown) - Use this to get more information on Obsidian's supported syntax
+[GFM cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) - Use this as a quick guide to using Markdown for Github
+
+## Other useful pages
+
+[How to quickly add a simple Markdown-based page](https://guide.portaljs.org/guides/add-a-simple-md-page)
+[How to quickly edit text content on a single Markdown-based page](https://guide.portaljs.org/guides/edit-text-on-a-single-md-page)

site/content/howtos/index.md

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

site/content/howtos/publish-obsidian-vault-to-github.md

@@ -1,5 +1,8 @@
 ---
 title: How to push an Obsidian vault to a GitHub repository
+date: 2023-07-27
+authors: ['Jake Hirsch', 'Ola Rubaj']
+filetype: 'blog'
 ---
 
 This howto walks you through the process of setting up your Obsidian vault as a GitHub repository. Here are some of the benefits of doing so:
@@ -34,7 +37,7 @@ In this howto, we will use the GitHub Desktop application, an easy-to-use interf
 
 2.6. Add an optional description.
 
-2.7. Make sure the checkbox "Initialize this repository with a README" is unchecked, and "Git Ignore" and "License" are set to "None".
+2.7. Make sure the checkbox "Initialise this repository with a README" is unchecked, and "Git Ignore" and "License" are set to "None".
 
 2.8. Click on "Create Repository".
 

site/content/howtos/quickly-create-a-sandbox-website.md

@@ -1,5 +1,8 @@
 ---
 title: How to quickly create a sandbox website
+date: 2023-07-27
+authors: ['Lauren Wigmore', 'Ola Rubaj']
+filetype: 'blog'
 ---
 
 By the end of this guide you will have a working markdown site you can edit, which gets published automatically online 🎉
@@ -22,13 +25,8 @@ The website will then be deployed. This takes approximately 1 minute.
 
 Once you are on the Congratulations screen, click on the preview of your sandbox website to see the live/published version.
 
-For instructions on how to add and edit pages, we recommend these tutorials:
+For instructions on how to add and edit pages, we recommend these howtos:
 
-- [[edit-a-page-with-code-editor-or-obsidian|How to edit text content on a single Markdown-based page]]
-- [[add-a-simple-md-page|How to add a simple Markdown-based page]]
-
-Here are some other links Vercel links that might be useful for you:
-
-- [Dashboard Features Overview](https://vercel.com/docs/concepts/dashboard-features/overview)
-- [Dashboard Features](https://vercel.com/docs/concepts/dashboard-features)
-- [Projects](https://vercel.com/docs/concepts/projects/project-dashboard)
+- [[howtos/add-a-simple-md-page|How to add a simple markdown page]]
+- [[howtos/edit-text-on-a-single-md-page|How to edit text on a single markdown-based page]]
+- [[howtos/edit-or-add-md-pages-locally|How to edit or add a markdown page locally on your computer]]

site/content/howtos/why-use-these-tools-to-create-a-catalog.md

@@ -1,5 +1,6 @@
 ---
 title: "Why use these tools to create a catalog?"
+isDraft: true
 ---
 
 On this site, we offer a “recipe” which uses a combination of free tools to easily create a directory of information that can be used for multiple purposes. With this method, you can start capturing information quickly and intuitively in a format that is flexible and usable later for various needs. Why does this help us? Because to map information – to collect, organise, structure, and classify it – and present it clearly is a way to make more sense of it and therefore of the world around us. 

site/layouts/default.tsx

@@ -6,7 +6,7 @@ export default function DefaultLayout({ children, ...frontMatter }) {
           {/* Default layout */}
           {!frontMatter.layout && (
             <>
-              <h1>{frontMatter.title}</h1>
+              {!frontMatter.disableTitle && <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>
           )}
-          {title && <h1>{title}</h1>}
+          {!frontMatter.disableTitle && title && <h1>{title}</h1>}
         </div>
       </header>
       <section>{children}</section>

site/lib/markdown.mjs

@@ -1,21 +1,21 @@
-import { h } from "hastscript";
-import matter from "gray-matter";
-import mdxmermaid from "mdx-mermaid";
-import remarkCallouts from "@portaljs/remark-callouts";
-import remarkEmbed from "@portaljs/remark-embed";
-import remarkGfm from "remark-gfm";
-import remarkMath from "remark-math";
-import remarkSmartypants from "remark-smartypants";
-import remarkToc from "remark-toc";
-import remarkWikiLink, { getPermalinks } from "@portaljs/remark-wiki-link";
-import rehypeAutolinkHeadings from "rehype-autolink-headings";
-import rehypeKatex from "rehype-katex";
-import rehypeSlug from "rehype-slug";
-import rehypePrismPlus from "rehype-prism-plus";
-import { serialize } from "next-mdx-remote/serialize";
+import { h } from 'hastscript';
+import matter from 'gray-matter';
+import mdxmermaid from 'mdx-mermaid';
+import remarkCallouts from '@portaljs/remark-callouts';
+import remarkEmbed from '@portaljs/remark-embed';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import remarkSmartypants from 'remark-smartypants';
+import remarkToc from 'remark-toc';
+import remarkWikiLink, { getPermalinks } from '@portaljs/remark-wiki-link';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeKatex from 'rehype-katex';
+import rehypeSlug from 'rehype-slug';
+import rehypePrismPlus from 'rehype-prism-plus';
+import { serialize } from 'next-mdx-remote/serialize';
 
-import * as tw from "../tailwind.config";
-import { siteConfig } from "../config/siteConfig";
+import * as tw from '../tailwind.config';
+import { siteConfig } from '../config/siteConfig';
 
 /**
  * Parse a markdown or MDX file to an MDX source form + front matter data
@@ -36,14 +36,14 @@ const parse = async function (source, format, scope) {
         remarkPlugins: [
           remarkEmbed,
           remarkGfm,
-          [remarkSmartypants, { quotes: false, dashes: "oldschool" }],
+          [remarkSmartypants, { quotes: false, dashes: 'oldschool' }],
           remarkMath,
           remarkCallouts,
-          [remarkWikiLink, { permalinks, pathFormat: "obsidian-short" }],
+          [remarkWikiLink, { permalinks, pathFormat: 'obsidian-short' }],
           [
             remarkToc,
             {
-              heading: "Table of contents",
+              heading: 'Table of contents',
               tight: true,
             },
           ],
@@ -54,29 +54,36 @@ const parse = async function (source, format, scope) {
           [
             rehypeAutolinkHeadings,
             {
-              properties: { className: "heading-link" },
+              properties: { className: 'heading-link' },
               test(element) {
                 return (
-                  ["h2", "h3", "h4", "h5", "h6"].includes(element.tagName) &&
-                  element.properties?.id !== "table-of-contents" &&
-                  element.properties?.className !== "blockquote-heading"
+                  ['h2', 'h3', 'h4', 'h5', 'h6'].includes(element.tagName) &&
+                  element.properties?.id !== 'table-of-contents' &&
+                  element.properties?.className !== 'blockquote-heading'
                 );
               },
-              content() {
+              content(node) {
                 return [
                   h(
-                    "svg",
+                    'span.invisible.block.h-0.w-0',
+                    { ariaLabel: node.properties.id },
+                    'Read the “',
+                    node.properties.id,
+                    '” section'
+                  ),
+                  h(
+                    'svg',
                     {
-                      xmlns: "http:www.w3.org/2000/svg",
+                      xmlns: 'http:www.w3.org/2000/svg',
                       fill: tw.theme.extend.colors.secondary.DEFAULT,
-                      viewBox: "0 0 20 20",
-                      className: "w-5 h-5",
+                      viewBox: '0 0 20 20',
+                      className: 'w-5 h-5',
                     },
                     [
-                      h("path", {
-                        fillRule: "evenodd",
-                        clipRule: "evenodd",
-                        d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z",
+                      h('path', {
+                        fillRule: 'evenodd',
+                        clipRule: 'evenodd',
+                        d: 'M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z',
                       }),
                     ]
                   ),
@@ -84,7 +91,7 @@ const parse = async function (source, format, scope) {
               },
             },
           ],
-          [rehypeKatex, { output: "mathml" }],
+          [rehypeKatex, { output: 'mathml' }],
           [rehypePrismPlus, { ignoreMissing: true }],
         ],
         format,

site/next-sitemap.config.js

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

site/package-lock.json

@@ -50,6 +50,7 @@
       "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",
@@ -229,6 +230,12 @@
       "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",
@@ -7087,6 +7094,15 @@
         "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",
@@ -7330,6 +7346,39 @@
         "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,6 +6,7 @@
     "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"
   },
@@ -52,6 +53,7 @@
   "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,7 +47,12 @@ function MyApp({ Component, pageProps }) {
       defaultTheme={siteConfig.theme.default}
       forcedTheme={siteConfig.theme.default ? null : 'light'}
     >
-      <DefaultSeo defaultTitle={siteConfig.title} {...siteConfig.nextSeo} />
+      <DefaultSeo
+        defaultTitle={siteConfig.title}
+        description={siteConfig.description}
+        titleTemplate="PortalJS - %s"
+        {...siteConfig.nextSeo}
+      />
 
       {/* Global Site Tag (gtag.js) - Google Analytics */}
       {siteConfig.analytics && (
@@ -58,7 +63,7 @@ function MyApp({ Component, pageProps }) {
           />
           <Script
             id="gtag-init"
-            strategy="afterInteractive"
+            strategy="lazyOnload"
             dangerouslySetInnerHTML={{
               __html: `
           window.dataLayer = window.dataLayer || [];

site/pages/_document.tsx

@@ -0,0 +1,13 @@
+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,10 +3,12 @@ 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} />

site/styles/globals.css

@@ -1,4 +1,4 @@
-@import "@portaljs/remark-callouts/styles.css";
+@import '@portaljs/remark-callouts/styles.css';
 @import './prism.css';
 
 html,
@@ -31,7 +31,7 @@ html {
 
 /* tooltip fade-out clip */
 .tooltip-body::after {
-  content: "";
+  content: '';
   position: absolute;
   right: 0;
   top: 3.6rem; /* multiple of $line-height used on the tooltip body (defined in tooltipBodyStyle) */