3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-22 21:47:01 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): bootstrap layout (#2710)

Browse source 
* feat(v2): add minor adjustements and footer component

* fix(v2): margin and spacing of footer

* feat(v2): add navbar component

* ádd collapse classname

* feat(v2): add dependencies

* feat(v2): remove unused code

* feat(v2): remove unused links

* feat(v2): add reactstrap components :|

* feat(v2): add brand and other nav componnets

* feat(v2): Add the layout tag

* fix(v2): Fix layout height

* fix(v2): Fix spacings
This commit is contained in:
Fanny 2020-05-17 07:01:38 -03:00 • committed by GitHub
parent a42b665089
commit 063484a05a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 186 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

22
packages/docusaurus-init/templates/bootstrap/src/pages/index.js
View file

@ -4,7 +4,6 @@ import Layout from '@theme/Layout';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
import Navbar from '@theme/Navbar';
import styles from './styles.module.css'; import styles from './styles.module.css';
@ -64,24 +63,19 @@ function Home() {
title={`Hello from ${siteConfig.title}`} title={`Hello from ${siteConfig.title}`}
description="Description will go into a meta tag in <head />"> description="Description will go into a meta tag in <head />">
<header> <header>
<Navbar /> <h1 className="hero__title">{siteConfig.title}</h1>
<div className="container"> <p className="hero__subtitle">{siteConfig.tagline}</p>
<h1 className="hero__title">{siteConfig.title}</h1> <div className={styles.buttons}>
<p className="hero__subtitle">{siteConfig.tagline}</p> <Link to={useBaseUrl('docs/doc1')}>Get Started</Link>
<div className={styles.buttons}>
<Link to={useBaseUrl('docs/doc1')}>Get Started</Link>
</div>
</div> </div>
</header> </header>
<main> <main>
{features && features.length > 0 && ( {features && features.length > 0 && (
<section className={styles.features}> <section className={styles.features}>
<div className="container"> <div className="row">
<div className="row"> {features.map((props, idx) => (
{features.map((props, idx) => ( <Feature key={idx} {...props} />
<Feature key={idx} {...props} /> ))}
))}
</div>
</div> </div>
</section> </section>
)} )}

41
packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.js
View file

@ -6,30 +6,39 @@
*/ */
import React from 'react'; import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import BlogPostCard from '@theme/BlogPostItem'; import BlogPostCard from '@theme/BlogPostItem';
import BlogListPaginator from '@theme/BlogListPaginator'; import BlogListPaginator from '@theme/BlogListPaginator';
import Layout from '@theme/Layout';
function BlogListPage(props) { function BlogListPage(props) {
const {items, metadata} = props; const {items, metadata} = props;
const {
siteConfig: {title: siteTitle},
} = useDocusaurusContext();
const isBlogOnlyMode = metadata.permalink === '/';
const title = isBlogOnlyMode ? siteTitle : 'Blog';
return ( return (
<div className="container-fluid"> <Layout title={title} description="Blog">
<div className="row row-cols-1 row-cols-sm-1"> <div className="container-fluid mt-4">
{items.map(({content: BlogPostContent}) => ( <div className="row row-cols-1 row-cols-sm-1">
<div {items.map(({content: BlogPostContent}) => (
key={BlogPostContent.metadata.permalink} <div
className="col col-xl-4 offset-xl-4 col-xs-6 mb-5"> key={BlogPostContent.metadata.permalink}
<BlogPostCard className="col col-xl-4 offset-xl-4 col-xs-6 mb-5">
frontMatter={BlogPostContent.frontMatter} <BlogPostCard
metadata={BlogPostContent.metadata} frontMatter={BlogPostContent.frontMatter}
truncated={BlogPostContent.metadata.truncated}> metadata={BlogPostContent.metadata}
<BlogPostContent /> truncated={BlogPostContent.metadata.truncated}>
</BlogPostCard> <BlogPostContent />
</div> </BlogPostCard>
))} </div>
<BlogListPaginator metadata={metadata} /> ))}
<BlogListPaginator metadata={metadata} />
</div>
</div> </div>
</div> </Layout>
); );
} }

35
packages/docusaurus-theme-bootstrap/src/theme/BlogPostPage/index.js
View file

@ -6,32 +6,35 @@
*/ */
import React from 'react'; import React from 'react';
import Layout from '@theme/Layout';
import BlogPostItem from '@theme/BlogPostItem'; import BlogPostItem from '@theme/BlogPostItem';
import BlogPostPaginator from '@theme/BlogPostPaginator'; import BlogPostPaginator from '@theme/BlogPostPaginator';
function BlogPostPage(props) { function BlogPostPage(props) {
const {content: BlogPostContents} = props; const {content: BlogPostContents} = props;
const {frontMatter, metadata} = BlogPostContents; const {title, description, frontMatter, metadata} = BlogPostContents;
const {nextItem, prevItem} = metadata; const {nextItem, prevItem} = metadata;
return ( return (
<div className="container-fluid my-5"> <Layout title={title} description={description}>
<div className="row row-cols-1 row-cols-sm-1"> <div className="container-fluid my-5">
<div <div className="row row-cols-1 row-cols-sm-1">
key={metadata.permalink} <div
className="col col-xl-4 offset-xl-4 col-xs-6 mb-5"> key={metadata.permalink}
<BlogPostItem className="col col-xl-4 offset-xl-4 col-xs-6 mb-5">
frontMatter={frontMatter} <BlogPostItem
metadata={metadata} frontMatter={frontMatter}
isBlogPostPage> metadata={metadata}
<BlogPostContents /> isBlogPostPage>
</BlogPostItem> <BlogPostContents />
{(nextItem || prevItem) && ( </BlogPostItem>
<BlogPostPaginator nextItem={nextItem} prevItem={prevItem} /> {(nextItem || prevItem) && (
)} <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
)}
</div>
</div> </div>
</div> </div>
</div> </Layout>
); );
} }

12
packages/docusaurus-theme-bootstrap/src/theme/BlogTagsListPage/index.js
View file

@ -4,7 +4,9 @@
* This source code is licensed under the MIT license found in the * This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
import React from 'react'; import React from 'react';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
function BlogTagsListPage(props) { function BlogTagsListPage(props) {
@ -24,10 +26,12 @@ function BlogTagsListPage(props) {
); );
return ( return (
<div className="container my-3 justify-content-center"> <Layout title="Tags" description="Blog Tags">
<h1 className="text-primary">Tags</h1> <div className="container my-3 justify-content-center">
<ul className="my-xl-4 list-inline">{renderAllTags()}</ul> <h1 className="text-primary">Tags</h1>
</div> <ul className="my-xl-4 list-inline">{renderAllTags()}</ul>
</div>
</Layout>
); );
} }

49
packages/docusaurus-theme-bootstrap/src/theme/BlogTagsPostsPage/index.js
View file

@ -7,6 +7,7 @@
import React from 'react'; import React from 'react';
import BlogPostItem from '@theme/BlogPostItem'; import BlogPostItem from '@theme/BlogPostItem';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
function pluralize(count, word) { function pluralize(count, word) {
@ -18,31 +19,35 @@ function BlogTagsPostPage(props) {
const {allTagsPath, name, count} = metadata; const {allTagsPath, name, count} = metadata;
return ( return (
<div className="container-fluid my-4"> <Layout
<header className="text-center"> title={`Posts tagged "${name}"`}
<h1> description={`Blog | Tagged "${name}"`}>
{count} {pluralize(count, 'post')} tagged with &quot;{name} <div className="container-fluid my-4">
&quot; <header className="text-center">
</h1> <h1>
<Link href={allTagsPath}>View All Tags</Link> {count} {pluralize(count, 'post')} tagged with &quot;{name}
</header> &quot;
</h1>
<Link href={allTagsPath}>View All Tags</Link>
</header>
<div className="my-4"> <div className="my-4">
{items.map(({content: BlogPostContent}) => ( {items.map(({content: BlogPostContent}) => (
<div <div
key={BlogPostContent.metadata.permalink}
className="col col-xl-4 offset-xl-4 col-xs-6 mb-5">
<BlogPostItem
key={BlogPostContent.metadata.permalink} key={BlogPostContent.metadata.permalink}
frontMatter={BlogPostContent.frontMatter} className="col col-xl-4 offset-xl-4 col-xs-6 mb-5">
metadata={BlogPostContent.metadata} <BlogPostItem
truncated> key={BlogPostContent.metadata.permalink}
<BlogPostContent /> frontMatter={BlogPostContent.frontMatter}
</BlogPostItem> metadata={BlogPostContent.metadata}
</div> truncated>
))} <BlogPostContent />
</BlogPostItem>
</div>
))}
</div>
</div> </div>
</div> </Layout>
); );
} }

2
packages/docusaurus-theme-bootstrap/src/theme/Footer/index.js
View file

@ -39,7 +39,7 @@ function Footer() {
const {links} = footer || {}; const {links} = footer || {};
return ( return (
<footer className="container p-0 m-0"> <footer className="container-fluid p-0 mt-3 align-self-end">
<div className="row bg-light no-gutters justify-content-center"> <div className="row bg-light no-gutters justify-content-center">
{links && links.length > 0 && ( {links && links.length > 0 && (
<> <>

78
packages/docusaurus-theme-bootstrap/src/theme/Layout/index.js Normal file
View file

@ -0,0 +1,78 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* 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 Head from '@docusaurus/Head';
import isInternalUrl from '@docusaurus/isInternalUrl';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import Navbar from '@theme/Navbar';
import Footer from '@theme/Footer';
function Layout(props) {
const {siteConfig = {}} = useDocusaurusContext();
const {
favicon,
title: siteTitle,
themeConfig: {image: defaultImage},
url: siteUrl,
} = siteConfig;
const {
children,
title,
noFooter,
description,
image,
keywords,
permalink,
version,
} = props;
const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
const metaImage = image || defaultImage;
let metaImageUrl = siteUrl + useBaseUrl(metaImage);
if (!isInternalUrl(metaImage)) {
metaImageUrl = metaImage;
}
const faviconUrl = useBaseUrl(favicon);
return (
<div className="container-fluid vh-100 vw-100 row m-0 p-0">
<Head>
{/* TODO: Do not assume that it is in english language */}
<html lang="en" />
{metaTitle && <title>{metaTitle}</title>}
{metaTitle && <meta property="og:title" content={metaTitle} />}
{favicon && <link rel="shortcut icon" href={faviconUrl} />}
{description && <meta name="description" content={description} />}
{description && (
<meta property="og:description" content={description} />
)}
{version && <meta name="docsearch:version" content={version} />}
{keywords && keywords.length && (
<meta name="keywords" content={keywords.join(',')} />
)}
{metaImage && <meta property="og:image" content={metaImageUrl} />}
{metaImage && <meta property="twitter:image" content={metaImageUrl} />}
{metaImage && (
<meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
)}
{permalink && <meta property="og:url" content={siteUrl + permalink} />}
<meta name="twitter:card" content="summary_large_image" />
</Head>
<Navbar />
<div className="vw-100 align-self-center">{children}</div>
{!noFooter && <Footer />}
</div>
);
}
export default Layout;

39
packages/docusaurus-theme-bootstrap/src/theme/Navbar/index.js
View file

@ -14,7 +14,6 @@ import {
Collapse, Collapse,
Navbar as NavbarBase, Navbar as NavbarBase,
NavbarToggler, NavbarToggler,
NavbarBrand,
Nav, Nav,
NavItem as NavItemBase, NavItem as NavItemBase,
} from 'reactstrap'; } from 'reactstrap';
@ -57,24 +56,26 @@ function Navbar() {
const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo(); const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo();
return ( return (
<NavbarBase color="light" light expand="md"> <NavbarBase
<NavbarBrand> color="light"
<Link to={logoLink} {...logoLinkProps}> light
{logoImageUrl != null && ( expand="md"
<img className="container-fluid mb-auto">
key={isClient} <Link to={logoLink} {...logoLinkProps}>
width="50" {logoImageUrl != null && (
height="50" <img
style={{ key={isClient}
maxWidth: '100%', width="50"
}} height="50"
src={logoImageUrl} style={{
alt={logoAlt} maxWidth: '100%',
/> }}
)} src={logoImageUrl}
{title != null && <span className="ml-2">{title}</span>} alt={logoAlt}
</Link> />
</NavbarBrand> )}
{title != null && <span className="ml-2">{title}</span>}
</Link>
<NavbarToggler onClick={handleToggle} /> <NavbarToggler onClick={handleToggle} />
<Collapse <Collapse