From 111b6e9e1e13a00b09c304989c66682be792edd9 Mon Sep 17 00:00:00 2001 From: Bradlee Speice Date: Tue, 1 Oct 2024 02:17:41 +0000 Subject: [PATCH] Style changes --- blog/2021-08-01-mdx-blog-post.mdx | 15 ++++-- docusaurus.config.ts | 5 +- src/pages/feed.xml.tsx | 7 +++ src/theme/BlogLayout/index.tsx | 29 +++++++++++ src/theme/BlogSidebar/Desktop/index.tsx | 50 +++++++++++++++++++ .../BlogSidebar/Desktop/styles.module.css | 43 ++++++++++++++++ 6 files changed, 144 insertions(+), 5 deletions(-) create mode 100644 src/pages/feed.xml.tsx create mode 100644 src/theme/BlogLayout/index.tsx create mode 100644 src/theme/BlogSidebar/Desktop/index.tsx create mode 100644 src/theme/BlogSidebar/Desktop/styles.module.css diff --git a/blog/2021-08-01-mdx-blog-post.mdx b/blog/2021-08-01-mdx-blog-post.mdx index bbef4fe..52012eb 100644 --- a/blog/2021-08-01-mdx-blog-post.mdx +++ b/blog/2021-08-01-mdx-blog-post.mdx @@ -1,6 +1,6 @@ --- slug: mdx-blog-post -title: MDX Blog Post +title: MDX Blog Post With An Extraordinarily Long Title date: 2021-08-02 10:00:00 authors: [bspeice] tags: [] @@ -24,10 +24,19 @@ Use the power of React to create interactive blog posts. For example, use JSX to create an interactive button: ```js -// highlight-start -// highlight-end ``` +```cpp +class MyClass { +public: + MyClass() = default; +}; + +int main() { + auto x = 24; +} +``` + diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 57542c1..f155118 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -88,10 +88,11 @@ const config: Config = { copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, }, prism: { - theme: prismThemes.github, - darkTheme: prismThemes.dracula, + theme: prismThemes.oneLight, + darkTheme: prismThemes.oneDark, }, } satisfies Preset.ThemeConfig, + plugins: [require.resolve('docusaurus-lunr-search')] }; export default config; diff --git a/src/pages/feed.xml.tsx b/src/pages/feed.xml.tsx new file mode 100644 index 0000000..fa5d46d --- /dev/null +++ b/src/pages/feed.xml.tsx @@ -0,0 +1,7 @@ +import Head from "@docusaurus/Head" + +export default () => { + return + + +} diff --git a/src/theme/BlogLayout/index.tsx b/src/theme/BlogLayout/index.tsx new file mode 100644 index 0000000..302875d --- /dev/null +++ b/src/theme/BlogLayout/index.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import clsx from 'clsx'; +import Layout from '@theme/Layout'; +import BlogSidebar from '@theme/BlogSidebar'; + +import type {Props} from '@theme/BlogLayout'; + +export default function BlogLayout(props: Props): JSX.Element { + const {sidebar, toc, children, ...layoutProps} = props; + const hasSidebar = sidebar && sidebar.items.length > 0; + + return ( + +
+
+ +
+ {children} +
+ {toc &&
{toc}
} +
+
+ + ); +} diff --git a/src/theme/BlogSidebar/Desktop/index.tsx b/src/theme/BlogSidebar/Desktop/index.tsx new file mode 100644 index 0000000..29ab9f5 --- /dev/null +++ b/src/theme/BlogSidebar/Desktop/index.tsx @@ -0,0 +1,50 @@ +import React, {memo} from 'react'; +import clsx from 'clsx'; +import {translate} from '@docusaurus/Translate'; +import { + useVisibleBlogSidebarItems, + BlogSidebarItemList, +} from '@docusaurus/plugin-content-blog/client'; +import BlogSidebarContent from '@theme/BlogSidebar/Content'; +import type {Props as BlogSidebarContentProps} from '@theme/BlogSidebar/Content'; +import type {Props} from '@theme/BlogSidebar/Desktop'; + +import styles from './styles.module.css'; + +const ListComponent: BlogSidebarContentProps['ListComponent'] = ({items}) => { + return ( + + ); +}; + +function BlogSidebarDesktop({sidebar}: Props) { + const items = useVisibleBlogSidebarItems(sidebar.items); + return ( + + ); +} + +export default memo(BlogSidebarDesktop); diff --git a/src/theme/BlogSidebar/Desktop/styles.module.css b/src/theme/BlogSidebar/Desktop/styles.module.css new file mode 100644 index 0000000..0e65e71 --- /dev/null +++ b/src/theme/BlogSidebar/Desktop/styles.module.css @@ -0,0 +1,43 @@ +.sidebar { + max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem)); + overflow-y: auto; + position: sticky; + top: calc(var(--ifm-navbar-height) + 2rem); +} + +.sidebarItemTitle { + font-size: var(--ifm-h3-font-size); + font-weight: var(--ifm-font-weight-bold); +} + +.sidebarItemList { + font-size: 0.9rem; +} + +.sidebarItem { + margin-top: 0.7rem; +} + +.sidebarItemLink { + color: var(--ifm-font-color-base); + display: block; +} + +.sidebarItemLink:hover { + text-decoration: none; +} + +.sidebarItemLinkActive { + color: var(--ifm-color-primary) !important; +} + +@media (max-width: 996px) { + .sidebar { + display: none; + } +} + +.yearGroupHeading { + margin-top: 1.6rem; + margin-bottom: 0.4rem; +}