[examples/learn,docs,#910][m]: add conclusions at the end of each tutorial, add page title to each tutorial page, fix hydration error re modified metadata field
This commit is contained in:
parent
95fd8e72df
commit
c80b283201
@ -81,7 +81,7 @@ export default function DatasetPage({ mdxSource, frontMatter }) {
|
||||
<p className="my-0">
|
||||
<span className="font-semibold">Modified: </span>
|
||||
<span className="description my-0">
|
||||
{new Date(frontMatter.modified).toLocaleDateString()}
|
||||
{new Date(frontMatter.modified).toLocaleDateString("en-US")}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { MDXRemote } from 'next-mdx-remote';
|
||||
import layouts from 'layouts';
|
||||
import DocsPagination from './DocsPagination';
|
||||
import { NextSeo } from 'next-seo';
|
||||
|
||||
export default function MDXPage({ source, frontMatter }) {
|
||||
const Layout = ({ children }) => {
|
||||
@ -10,9 +11,10 @@ export default function MDXPage({ source, frontMatter }) {
|
||||
return <LayoutComponent {...frontMatter}>{children}</LayoutComponent>;
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<MDXRemote {...source} components={{ DocsPagination }} />
|
||||
<MDXRemote {...source} components={{ DocsPagination, NextSeo }} />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<NextSeo title="Creating new datasets - PortalJS" />
|
||||
|
||||
# Creating new datasets
|
||||
|
||||
So far, the PortalJS app we created only has a single page displaying a dataset. Data catalogs and data portals generally showcase many different datasets.
|
||||
@ -63,4 +65,6 @@ From the browser, access http://localhost:3000. You should see the following:
|
||||
|
||||
<img src="/assets/docs/datasets-index-page.png" />
|
||||
|
||||
<DocsPagination prev="/docs" next="/docs/searching-datasets" />
|
||||
At this point, the app has multiple datasets, and users can find and navigate to any dataset they want. In the next lesson, you are gonna learn how to improve this experience with search.
|
||||
|
||||
<DocsPagination prev="/docs" next="/docs/searching-datasets" />
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<NextSeo title="Deploying your PortalJS app - PortalJS" />
|
||||
|
||||
# Deploying your PortalJS app
|
||||
|
||||
Finally, let's learn how to deploy PortalJS apps to Vercel or Cloudflare Pages.
|
||||
@ -31,7 +33,7 @@ To deploy your PortalJS app:
|
||||
|
||||
When you deploy, your PortalJS app will start building. It should finish in under a minute.
|
||||
|
||||
When it’s done, you’ll get deployment URLs. Click on one of the URLs and you should see your PortaJS app live.
|
||||
When it’s done, you’ll get deployment URLs. Click on one of the URLs and you should see your PortalJS app live.
|
||||
|
||||
>[!tip]
|
||||
> You can find a more in-depth explanation about this process at https://nextjs.org/learn/basics/deploying-nextjs-app/deploy
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<NextSeo title="Getting Started - PortalJS" />
|
||||
|
||||
# Getting Started
|
||||
|
||||
Welcome to the PortalJS documentation!
|
||||
@ -51,4 +53,6 @@ After refreshing the page, you should see the new text:
|
||||
|
||||
<img src="/assets/docs/editing-the-page-1.png" />
|
||||
|
||||
<DocsPagination next="/docs/creating-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" />
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<NextSeo title="Searching datasets - PortalJS" />
|
||||
|
||||
# Searching datasets
|
||||
|
||||
Typing out every link in the index page will get cumbersome eventually, and as the portal grows, finding the datasets you are looking for on the index page will become harder and harder, for that we will need search functionality.
|
||||
@ -102,4 +104,6 @@ You now have a filter in your page with all possible values automatically added
|
||||
|
||||

|
||||
|
||||
In the next lesson, you are gonna learn how to display metadata on the dataset page.
|
||||
|
||||
<DocsPagination prev="/docs/creating-new-datasets" next="/docs/showing-metadata" />
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<NextSeo title="Showing metadata - PortalJS" />
|
||||
|
||||
# Showing metadata
|
||||
|
||||
If you go now to `http://localhost:3000/my-awesome-dataset`, you will see that we now have two titles on the page. That's because `title` is one of the default metadata fields supported by PortalJS.
|
||||
@ -33,4 +35,6 @@ These are the standard metadata fields that will be shown at the top of the page
|
||||
- `author`, `description`, and `modified` which gets displayed below the title
|
||||
- `files` that get displayed as a table with two columns: `File` which is linked directly to the file, and `Format` which show the file format.
|
||||
|
||||
Feel free to experiment with these metadata fields. At this point, you might want to deploy the app, and that's what you are gonna learn in the next lesson.
|
||||
|
||||
<DocsPagination prev="/docs/searching-datasets" next="/docs/deploying-your-portaljs-app" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user