Browse Source

blog width

windhamdavid 5 months ago
parent
commit
3dd2e1d14e
3 changed files with 65 additions and 2 deletions
  1. 3 0
      src/css/custom.css
  2. 35 2
      src/pages/help.md
  3. 27 0
      src/theme/BlogLayout/index.js

+ 3 - 0
src/css/custom.css

@@ -105,6 +105,9 @@ table td img {
 .title_f1Hy {
   font-size: 1.5rem !important;
 }
+article[itemprop="blogPost"] footer {
+  margin-top: 1rem !important;
+}
 
 form input { 
   box-sizing: border-box;

+ 35 - 2
src/pages/help.md

@@ -51,13 +51,44 @@ npm run build
 npm run serve
 ```
 
-#### v3.0.0
+---
 
-**23/11/27** - noticed my Lunr search was kicking JavaScript errors because I had `swizzle`'d it in a previous version and needed to `eject` it before the build. ( see github repo [comment](https://github.com/praveenn77/docusaurus-lunr-search/pull/124#issuecomment-1827933993) )
+**23/12/12** - needed a way to preface my `posts` and wanted to change the default width so I `swizzle`'d the `BlogListPage` and `BlogLayout` to widen it with `col--9`.
+
+```sh
+npm run swizzle @docusaurus/theme-classic BlogLayout -- --eject
+npm run swizzle @docusaurus/theme-classic BlogListPage -- --eject
+```
+
+line 15 of `BlogLayout/index.js`
+
+```js
+  <main
+    className={clsx('col', {
+      //'col--7': hasSidebar,
+      'col--9': hasSidebar,
+      'col--9 col--offset-1': !hasSidebar,
+    })}
+    ...
+  </main>
+```
 
+line 33 of `BlogListPage/index.js`
+
+```js
+    <BlogLayout sidebar={sidebar}>
+      <h1>Posts</h1>
+      <p>...</p>
+      <hr/>
+      <br/>
+      <BlogPostItems items={items} />
+      <BlogListPaginator metadata={metadata} />
+    </BlogLayout>
+```
 
 
 
+**23/11/27** - noticed my Lunr search was kicking JavaScript errors because I had `swizzle`'d it in a previous version and needed to `eject` it before the build. ( see github repo [comment](https://github.com/praveenn77/docusaurus-lunr-search/pull/124#issuecomment-1827933993) )
 
 ```sh
 david@ovid🏛 :~/sites/daw_til(main○) » npm run swizzle docusaurus-lunr-search SearchBar -- --eject
@@ -90,6 +121,8 @@ Also noticed that since it now uses the default Algolia search elements which in
 }
 ```
 
+#### v3.0.0
+
 **23/11/12** - Docusaurus updated 2.4.3 👉🏼 3.0.0 and React 17.0.2 👉🏼 18.2.0
 
 ```bash

+ 27 - 0
src/theme/BlogLayout/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import clsx from 'clsx';
+import Layout from '@theme/Layout';
+import BlogSidebar from '@theme/BlogSidebar';
+export default function BlogLayout(props) {
+  const {sidebar, toc, children, ...layoutProps} = props;
+  const hasSidebar = sidebar && sidebar.items.length > 0;
+  return (
+    <Layout {...layoutProps}>
+      <div className="container margin-vert--lg">
+        <div className="row">
+          <BlogSidebar sidebar={sidebar} />
+          <main
+            className={clsx('col', {
+              'col--9': hasSidebar,
+              'col--9 col--offset-1': !hasSidebar,
+            })}
+            itemScope
+            itemType="https://schema.org/Blog">
+            {children}
+          </main>
+          {toc && <div className="col col--2">{toc}</div>}
+        </div>
+      </div>
+    </Layout>
+  );
+}