mirror-github-bspeice/speice.io
1
0
Fork 0
mirror of https://github.com/bspeice/speice.io synced 2025-09-07 23:25:06 -04: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
Download Patch File Download Diff File Expand all files Collapse all files

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