mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-22 21:47:01 +02:00
feat(v2): bootstrap layout (#2710)
* 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
GitHub
parent
a42b665089
commit
063484a05a
8 changed files with 186 additions and 92 deletions
|
|
@ -4,7 +4,6 @@ import Layout from '@theme/Layout';
|
|||
import Link from '@docusaurus/Link';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import Navbar from '@theme/Navbar';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
|
|
@ -64,25 +63,20 @@ function Home() {
|
|||
title={`Hello from ${siteConfig.title}`}
|
||||
description="Description will go into a meta tag in <head />">
|
||||
<header>
|
||||
<Navbar />
|
||||
<div className="container">
|
||||
<h1 className="hero__title">{siteConfig.title}</h1>
|
||||
<p className="hero__subtitle">{siteConfig.tagline}</p>
|
||||
<div className={styles.buttons}>
|
||||
<Link to={useBaseUrl('docs/doc1')}>Get Started</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
{features && features.length > 0 && (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{features.map((props, idx) => (
|
||||
<Feature key={idx} {...props} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -6,14 +6,22 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import BlogPostCard from '@theme/BlogPostItem';
|
||||
import BlogListPaginator from '@theme/BlogListPaginator';
|
||||
import Layout from '@theme/Layout';
|
||||
|
||||
function BlogListPage(props) {
|
||||
const {items, metadata} = props;
|
||||
const {
|
||||
siteConfig: {title: siteTitle},
|
||||
} = useDocusaurusContext();
|
||||
const isBlogOnlyMode = metadata.permalink === '/';
|
||||
const title = isBlogOnlyMode ? siteTitle : 'Blog';
|
||||
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<Layout title={title} description="Blog">
|
||||
<div className="container-fluid mt-4">
|
||||
<div className="row row-cols-1 row-cols-sm-1">
|
||||
{items.map(({content: BlogPostContent}) => (
|
||||
<div
|
||||
|
|
@ -30,6 +38,7 @@ function BlogListPage(props) {
|
|||
<BlogListPaginator metadata={metadata} />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,15 +6,17 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Layout from '@theme/Layout';
|
||||
import BlogPostItem from '@theme/BlogPostItem';
|
||||
import BlogPostPaginator from '@theme/BlogPostPaginator';
|
||||
|
||||
function BlogPostPage(props) {
|
||||
const {content: BlogPostContents} = props;
|
||||
const {frontMatter, metadata} = BlogPostContents;
|
||||
const {title, description, frontMatter, metadata} = BlogPostContents;
|
||||
const {nextItem, prevItem} = metadata;
|
||||
|
||||
return (
|
||||
<Layout title={title} description={description}>
|
||||
<div className="container-fluid my-5">
|
||||
<div className="row row-cols-1 row-cols-sm-1">
|
||||
<div
|
||||
|
|
@ -32,6 +34,7 @@ function BlogPostPage(props) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
* 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';
|
||||
import Link from '@docusaurus/Link';
|
||||
|
||||
function BlogTagsListPage(props) {
|
||||
|
|
@ -24,10 +26,12 @@ function BlogTagsListPage(props) {
|
|||
);
|
||||
|
||||
return (
|
||||
<Layout title="Tags" description="Blog Tags">
|
||||
<div className="container my-3 justify-content-center">
|
||||
<h1 className="text-primary">Tags</h1>
|
||||
<ul className="my-xl-4 list-inline">{renderAllTags()}</ul>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import BlogPostItem from '@theme/BlogPostItem';
|
||||
import Layout from '@theme/Layout';
|
||||
import Link from '@docusaurus/Link';
|
||||
|
||||
function pluralize(count, word) {
|
||||
|
|
@ -18,6 +19,9 @@ function BlogTagsPostPage(props) {
|
|||
const {allTagsPath, name, count} = metadata;
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title={`Posts tagged "${name}"`}
|
||||
description={`Blog | Tagged "${name}"`}>
|
||||
<div className="container-fluid my-4">
|
||||
<header className="text-center">
|
||||
<h1>
|
||||
|
|
@ -43,6 +47,7 @@ function BlogTagsPostPage(props) {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ function Footer() {
|
|||
const {links} = footer || {};
|
||||
|
||||
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">
|
||||
{links && links.length > 0 && (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -14,7 +14,6 @@ import {
|
|||
Collapse,
|
||||
Navbar as NavbarBase,
|
||||
NavbarToggler,
|
||||
NavbarBrand,
|
||||
Nav,
|
||||
NavItem as NavItemBase,
|
||||
} from 'reactstrap';
|
||||
|
|
@ -57,8 +56,11 @@ function Navbar() {
|
|||
const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo();
|
||||
|
||||
return (
|
||||
<NavbarBase color="light" light expand="md">
|
||||
<NavbarBrand>
|
||||
<NavbarBase
|
||||
color="light"
|
||||
light
|
||||
expand="md"
|
||||
className="container-fluid mb-auto">
|
||||
<Link to={logoLink} {...logoLinkProps}>
|
||||
{logoImageUrl != null && (
|
||||
<img
|
||||
|
|
@ -74,7 +76,6 @@ function Navbar() {
|
|||
)}
|
||||
{title != null && <span className="ml-2">{title}</span>}
|
||||
</Link>
|
||||
</NavbarBrand>
|
||||
|
||||
<NavbarToggler onClick={handleToggle} />
|
||||
<Collapse
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue