mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-17 11:07:07 +02:00
refactor(v2): move themes components from docs blog (#1571)
* refactor(v2): move themes from docs blog * move mdxprovider to docs and blog only
This commit is contained in:
Endi
GitHub
parent
e486d3d1b0
commit
f0d5313d48
20 changed files with 33 additions and 27 deletions
|
|
@ -338,10 +338,6 @@ module.exports = function(context, opts) {
|
|||
}
|
||||
},
|
||||
|
||||
getThemePath() {
|
||||
return path.resolve(__dirname, './theme');
|
||||
},
|
||||
|
||||
configureWebpack(config, isServer, {getBabelLoader, getCacheLoader}) {
|
||||
const {rehypePlugins, remarkPlugins} = options;
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import Layout from '@theme/Layout'; // eslint-disable-line
|
||||
import BlogPostItem from '@theme/BlogPostItem';
|
||||
import BlogListPaginator from '@theme/BlogListPaginator';
|
||||
|
||||
function BlogListPage(props) {
|
||||
const {metadata, items} = props;
|
||||
|
||||
return (
|
||||
<Layout title="Blog" description="Blog">
|
||||
<div className="container margin-vert--xl">
|
||||
<div className="row">
|
||||
<div className="col col--8 col--offset-2">
|
||||
{items.map(
|
||||
({content: BlogPostContent, metadata: blogPostMetadata}) => (
|
||||
<div
|
||||
className="margin-bottom--xl"
|
||||
key={blogPostMetadata.permalink}>
|
||||
<BlogPostItem
|
||||
frontMatter={BlogPostContent.frontMatter}
|
||||
metadata={blogPostMetadata}
|
||||
truncated>
|
||||
<BlogPostContent />
|
||||
</BlogPostItem>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
<BlogListPaginator metadata={metadata} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogListPage;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Link from '@docusaurus/Link';
|
||||
|
||||
function BlogListPaginator(props) {
|
||||
const {metadata} = props;
|
||||
const {previousPage, nextPage} = metadata;
|
||||
|
||||
return (
|
||||
<nav className="pagination-nav">
|
||||
<div className="pagination-nav__item">
|
||||
{previousPage && (
|
||||
<Link className="pagination-nav__link" to={previousPage}>
|
||||
<h4 className="pagination-nav__link--label">
|
||||
« Newer Entries
|
||||
</h4>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div className="pagination-nav__item pagination-nav__item-next">
|
||||
{nextPage && (
|
||||
<Link className="pagination-nav__link" to={nextPage}>
|
||||
<h4 className="pagination-nav__link--label">
|
||||
Older Entries »
|
||||
</h4>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogListPaginator;
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Link from '@docusaurus/Link';
|
||||
|
||||
function BlogPostItem(props) {
|
||||
const {children, frontMatter, metadata, truncated} = props;
|
||||
const {date, permalink, tags} = metadata;
|
||||
const {author, authorURL, authorTitle, authorFBID, title} = frontMatter;
|
||||
|
||||
const renderPostHeader = () => {
|
||||
const match = date.substring(0, 10).split('-');
|
||||
const year = match[0];
|
||||
const month = [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December',
|
||||
][parseInt(match[1], 10) - 1];
|
||||
const day = parseInt(match[2], 10);
|
||||
|
||||
const authorImageURL = authorFBID
|
||||
? `https://graph.facebook.com/${authorFBID}/picture/?height=200&width=200`
|
||||
: frontMatter.authorImageURL;
|
||||
|
||||
return (
|
||||
<header>
|
||||
<h1 className="margin-bottom--xs">
|
||||
<Link to={permalink}>{title}</Link>
|
||||
</h1>
|
||||
<div className="margin-bottom--sm">
|
||||
<small>
|
||||
{month} {day}, {year}
|
||||
</small>
|
||||
</div>
|
||||
<div className="avatar margin-bottom--md">
|
||||
{authorImageURL && (
|
||||
<a
|
||||
className="avatar__photo-link"
|
||||
href={authorURL}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener">
|
||||
<img
|
||||
className="avatar__photo"
|
||||
src={authorImageURL}
|
||||
alt={author}
|
||||
/>
|
||||
</a>
|
||||
)}
|
||||
<div className="avatar__intro">
|
||||
{author && (
|
||||
<>
|
||||
<h4 className="avatar__name">
|
||||
<a href={authorURL} target="_blank" rel="noreferrer noopener">
|
||||
{author}
|
||||
</a>
|
||||
</h4>
|
||||
<small className="avatar__subtitle">{authorTitle}</small>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{renderPostHeader()}
|
||||
<article className="markdown">{children}</article>
|
||||
<div className="row margin-vert--lg">
|
||||
<div className="col">
|
||||
{tags.length > 0 && (
|
||||
<>
|
||||
<strong>Tags:</strong>
|
||||
{tags.map(({label, permalink: tagPermalink}) => (
|
||||
<Link
|
||||
key={tagPermalink}
|
||||
className="margin-horiz--sm"
|
||||
to={tagPermalink}>
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="col text--right">
|
||||
{truncated && (
|
||||
<Link to={metadata.permalink}>
|
||||
<strong>Read More</strong>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogPostItem;
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import Layout from '@theme/Layout'; // eslint-disable-line
|
||||
import BlogPostItem from '@theme/BlogPostItem';
|
||||
import BlogPostPaginator from '@theme/BlogPostPaginator';
|
||||
|
||||
function BlogPostPage(props) {
|
||||
const {content: BlogPostContents, metadata, nextItem, prevItem} = props;
|
||||
const {frontMatter} = BlogPostContents;
|
||||
return (
|
||||
<Layout title={metadata.title} description={metadata.description}>
|
||||
{BlogPostContents && (
|
||||
<div className="container margin-vert--xl">
|
||||
<div className="row">
|
||||
<div className="col col--8 col--offset-2">
|
||||
<BlogPostItem frontMatter={frontMatter} metadata={metadata}>
|
||||
<BlogPostContents />
|
||||
</BlogPostItem>
|
||||
<div className="margin-vert--xl">
|
||||
<BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogPostPage;
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Link from '@docusaurus/Link';
|
||||
|
||||
function BlogPostPaginator(props) {
|
||||
const {nextItem, prevItem} = props;
|
||||
|
||||
return (
|
||||
<nav className="pagination-nav">
|
||||
<div className="pagination-nav__item">
|
||||
{prevItem && (
|
||||
<Link className="pagination-nav__link" to={prevItem.permalink}>
|
||||
<h5 className="pagination-nav__link--sublabel">Previous Post</h5>
|
||||
<h4 className="pagination-nav__link--label">
|
||||
« {prevItem.title}
|
||||
</h4>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div className="pagination-nav__item pagination-nav__item--next">
|
||||
{nextItem && (
|
||||
<Link className="pagination-nav__link" to={nextItem.permalink}>
|
||||
<h5 className="pagination-nav__link--sublabel">Next Post</h5>
|
||||
<h4 className="pagination-nav__link--label">
|
||||
{nextItem.title} »
|
||||
</h4>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogPostPaginator;
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import Layout from '@theme/Layout'; // eslint-disable-line
|
||||
import Link from '@docusaurus/Link';
|
||||
|
||||
const CHARS_IN_ALPHABET = 26;
|
||||
const ASCII_LOWERCASE_A = 97;
|
||||
|
||||
function BlogTagsListPage(props) {
|
||||
const {tags} = props;
|
||||
|
||||
const tagsList = Array(CHARS_IN_ALPHABET)
|
||||
.fill(null)
|
||||
.map(() => []);
|
||||
const allTags = Object.keys(tags).sort();
|
||||
|
||||
allTags.forEach(tag => {
|
||||
const firstLetter = tag.charCodeAt(0);
|
||||
tagsList[firstLetter - ASCII_LOWERCASE_A].push(tag);
|
||||
});
|
||||
|
||||
const tagsSection = tagsList
|
||||
.map((tagsForLetter, index) => {
|
||||
if (tagsForLetter.length === 0) {
|
||||
return null;
|
||||
}
|
||||
const letter = String.fromCharCode(
|
||||
ASCII_LOWERCASE_A + index,
|
||||
).toUpperCase();
|
||||
|
||||
return (
|
||||
<div key={letter}>
|
||||
<h3>{letter}</h3>
|
||||
{tagsForLetter.map(tag => (
|
||||
<Link
|
||||
className="padding-right--md"
|
||||
href={tags[tag].permalink}
|
||||
key="tag">
|
||||
{tags[tag].name} ({tags[tag].count})
|
||||
</Link>
|
||||
))}
|
||||
<hr />
|
||||
</div>
|
||||
);
|
||||
})
|
||||
.filter(item => item != null);
|
||||
|
||||
return (
|
||||
<Layout title="Blog Tags" description="Blog Tags">
|
||||
<div className="container margin-vert--xl">
|
||||
<div className="row">
|
||||
<div className="col col--8 col--offset-2">
|
||||
<h1>Tags</h1>
|
||||
<div className="margin-vert--lg">{tagsSection}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogTagsListPage;
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import Layout from '@theme/Layout'; // eslint-disable-line
|
||||
import BlogPostItem from '@theme/BlogPostItem';
|
||||
import Link from '@docusaurus/Link';
|
||||
|
||||
function BlogTagsPostPage(props) {
|
||||
const {metadata, items} = props;
|
||||
const {allTagsPath, name: tagName, count} = metadata;
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title={`Blog | Tagged "${tagName}"`}
|
||||
description={`Blog | Tagged "${tagName}"`}>
|
||||
<div className="container margin-vert--xl">
|
||||
<div className="row">
|
||||
<div className="col col--8 col--offset-2">
|
||||
<h1>
|
||||
{count} post(s) tagged with "{tagName}"
|
||||
</h1>
|
||||
<Link href={allTagsPath}>View All Tags</Link>
|
||||
<div className="margin-vert--xl">
|
||||
{items.map(
|
||||
({content: BlogPostContent, metadata: blogPostMetadata}) => (
|
||||
<div key={blogPostMetadata.permalink}>
|
||||
<BlogPostItem
|
||||
frontMatter={BlogPostContent.frontMatter}
|
||||
metadata={blogPostMetadata}
|
||||
truncated>
|
||||
<BlogPostContent />
|
||||
</BlogPostItem>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogTagsPostPage;
|
||||
Loading…
Add table
Add a link
Reference in a new issue