mirror-github-bspeice/speice.io
1
0
Fork 0
mirror of https://github.com/bspeice/speice.io synced 2024-11-14 22:18:10 -05:00
Code Issues Releases Wiki Activity

Style changes

Browse Source
This commit is contained in:
Bradlee Speice 2024-10-01 02:17:41 +00:00
parent 338600605a
commit 111b6e9e1e
6 changed files with 144 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
blog/2021-08-01-mdx-blog-post.mdx
View File

@ -1,6 +1,6 @@
--- ---
slug: mdx-blog-post slug: mdx-blog-post
title: MDX Blog Post title: MDX Blog Post With An Extraordinarily Long Title
date: 2021-08-02 10:00:00 date: 2021-08-02 10:00:00
authors: [bspeice] authors: [bspeice]
tags: [] tags: []
@ -24,10 +24,19 @@ Use the power of React to create interactive blog posts.
For example, use JSX to create an interactive button: For example, use JSX to create an interactive button:
```js ```js
// highlight-start
<button onClick={() => alert('button clicked!')}>Click me!</button> <button onClick={() => alert('button clicked!')}>Click me!</button>
// highlight-end
<button onClick={() => alert('button clicked!')}>Click me!</button> <button onClick={() => alert('button clicked!')}>Click me!</button>
``` ```
```cpp
class MyClass {
public:
MyClass() = default;
};
int main() {
auto x = 24;
}
```
<button onClick={() => alert('button clicked!')}>Click me!</button> <button onClick={() => alert('button clicked!')}>Click me!</button>

5
docusaurus.config.ts
View File

@ -88,10 +88,11 @@ const config: Config = {
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
}, },
prism: { prism: {
theme: prismThemes.github, theme: prismThemes.oneLight,
darkTheme: prismThemes.dracula, darkTheme: prismThemes.oneDark,
}, },
} satisfies Preset.ThemeConfig, } satisfies Preset.ThemeConfig,
plugins: [require.resolve('docusaurus-lunr-search')]
}; };
export default config; export default config;

7
src/pages/feed.xml.tsx Normal file
View File

@ -0,0 +1,7 @@
import Head from "@docusaurus/Head"
export default () => {
return <Head>
<meta httpEquiv="Refresh" content="0; url='/atom.xml'"/>
</Head>
}

29
src/theme/BlogLayout/index.tsx Normal file
View File

@ -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 (
<Layout {...layoutProps}>
<div className="container margin-vert--lg">
<div className="row">
<BlogSidebar sidebar={sidebar} />
<main
className={clsx('col', {
'col--8': hasSidebar,
'col--10 col--offset-1': !hasSidebar,
})}>
{children}
</main>
{toc && <div className="col col--2">{toc}</div>}
</div>
</div>
</Layout>
);
}

50
src/theme/BlogSidebar/Desktop/index.tsx Normal file
View File

@ -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 (
<BlogSidebarItemList
items={items}
ulClassName={clsx(styles.sidebarItemList, 'clean-list')}
liClassName={styles.sidebarItem}
linkClassName={styles.sidebarItemLink}
linkActiveClassName={styles.sidebarItemLinkActive}
/>
);
};
function BlogSidebarDesktop({sidebar}: Props) {
const items = useVisibleBlogSidebarItems(sidebar.items);
return (
<aside className="col col--2">
<nav
className={clsx(styles.sidebar, 'thin-scrollbar')}
aria-label={translate({
id: 'theme.blog.sidebar.navAriaLabel',
message: 'Blog recent posts navigation',
description: 'The ARIA label for recent posts in the blog sidebar',
})}>
<div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
{sidebar.title}
</div>
<BlogSidebarContent
items={items}
ListComponent={ListComponent}
yearGroupHeadingClassName={styles.yearGroupHeading}
/>
</nav>
</aside>
);
}
export default memo(BlogSidebarDesktop);

43
src/theme/BlogSidebar/Desktop/styles.module.css Normal file
View File

@ -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;
}