mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-16 09:11:38 +00:00
Add archive page
* remove useless folder * add tweets nav item
This commit is contained in:
5
.idea/.gitignore
generated
vendored
5
.idea/.gitignore
generated
vendored
@ -1,5 +0,0 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
12
.idea/blog-next.iml
generated
12
.idea/blog-next.iml
generated
@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
61
.idea/codeStyles/Project.xml
generated
61
.idea/codeStyles/Project.xml
generated
@ -1,61 +0,0 @@
|
||||
<component name="ProjectCodeStyleConfiguration">
|
||||
<code_scheme name="Project" version="173">
|
||||
<HTMLCodeStyleSettings>
|
||||
<option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
|
||||
<option name="HTML_QUOTE_STYLE" value="Single" />
|
||||
<option name="HTML_ENFORCE_QUOTES" value="true" />
|
||||
</HTMLCodeStyleSettings>
|
||||
<JSCodeStyleSettings version="0">
|
||||
<option name="FORCE_SEMICOLON_STYLE" value="true" />
|
||||
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
|
||||
<option name="USE_DOUBLE_QUOTES" value="false" />
|
||||
<option name="FORCE_QUOTE_STYlE" value="true" />
|
||||
<option name="ENFORCE_TRAILING_COMMA" value="Remove" />
|
||||
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
|
||||
<option name="SPACES_WITHIN_IMPORTS" value="true" />
|
||||
</JSCodeStyleSettings>
|
||||
<TypeScriptCodeStyleSettings version="0">
|
||||
<option name="FORCE_SEMICOLON_STYLE" value="true" />
|
||||
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
|
||||
<option name="USE_DOUBLE_QUOTES" value="false" />
|
||||
<option name="FORCE_QUOTE_STYlE" value="true" />
|
||||
<option name="ENFORCE_TRAILING_COMMA" value="Remove" />
|
||||
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
|
||||
<option name="SPACES_WITHIN_IMPORTS" value="true" />
|
||||
</TypeScriptCodeStyleSettings>
|
||||
<VueCodeStyleSettings>
|
||||
<option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
|
||||
<option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
|
||||
</VueCodeStyleSettings>
|
||||
<codeStyleSettings language="HTML">
|
||||
<option name="SOFT_MARGINS" value="80" />
|
||||
<indentOptions>
|
||||
<option name="INDENT_SIZE" value="2" />
|
||||
<option name="CONTINUATION_INDENT_SIZE" value="2" />
|
||||
<option name="TAB_SIZE" value="2" />
|
||||
</indentOptions>
|
||||
</codeStyleSettings>
|
||||
<codeStyleSettings language="JavaScript">
|
||||
<option name="SOFT_MARGINS" value="80" />
|
||||
<indentOptions>
|
||||
<option name="INDENT_SIZE" value="2" />
|
||||
<option name="CONTINUATION_INDENT_SIZE" value="2" />
|
||||
<option name="TAB_SIZE" value="2" />
|
||||
</indentOptions>
|
||||
</codeStyleSettings>
|
||||
<codeStyleSettings language="TypeScript">
|
||||
<option name="SOFT_MARGINS" value="80" />
|
||||
<indentOptions>
|
||||
<option name="INDENT_SIZE" value="2" />
|
||||
<option name="CONTINUATION_INDENT_SIZE" value="2" />
|
||||
<option name="TAB_SIZE" value="2" />
|
||||
</indentOptions>
|
||||
</codeStyleSettings>
|
||||
<codeStyleSettings language="Vue">
|
||||
<option name="SOFT_MARGINS" value="80" />
|
||||
<indentOptions>
|
||||
<option name="CONTINUATION_INDENT_SIZE" value="2" />
|
||||
</indentOptions>
|
||||
</codeStyleSettings>
|
||||
</code_scheme>
|
||||
</component>
|
5
.idea/codeStyles/codeStyleConfig.xml
generated
5
.idea/codeStyles/codeStyleConfig.xml
generated
@ -1,5 +0,0 @@
|
||||
<component name="ProjectCodeStyleConfiguration">
|
||||
<state>
|
||||
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
|
||||
</state>
|
||||
</component>
|
15
.idea/git_toolbox_prj.xml
generated
15
.idea/git_toolbox_prj.xml
generated
@ -1,15 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="GitToolBoxProjectSettings">
|
||||
<option name="commitMessageIssueKeyValidationOverride">
|
||||
<BoolValueOverride>
|
||||
<option name="enabled" value="true" />
|
||||
</BoolValueOverride>
|
||||
</option>
|
||||
<option name="commitMessageValidationConfigOverride">
|
||||
<CommitMessageValidationOverride>
|
||||
<option name="enabled" value="true" />
|
||||
</CommitMessageValidationOverride>
|
||||
</option>
|
||||
</component>
|
||||
</project>
|
27
.idea/inspectionProfiles/Project_Default.xml
generated
27
.idea/inspectionProfiles/Project_Default.xml
generated
@ -1,27 +0,0 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
|
||||
<option name="myCustomPropertiesEnabled" value="true" />
|
||||
<option name="myIgnoreVendorSpecificProperties" value="false" />
|
||||
<option name="myCustomPropertiesList">
|
||||
<value>
|
||||
<list size="1">
|
||||
<item index="0" class="java.lang.String" itemvalue="scrollbar-width" />
|
||||
</list>
|
||||
</value>
|
||||
</option>
|
||||
</inspection_tool>
|
||||
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
||||
<inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
|
||||
<option name="myValues">
|
||||
<value>
|
||||
<list size="1">
|
||||
<item index="0" class="java.lang.String" itemvalue="borderradius" />
|
||||
</list>
|
||||
</value>
|
||||
</option>
|
||||
<option name="myCustomValuesEnabled" value="true" />
|
||||
</inspection_tool>
|
||||
</profile>
|
||||
</component>
|
8
.idea/modules.xml
generated
8
.idea/modules.xml
generated
@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/blog-next.iml" filepath="$PROJECT_DIR$/.idea/blog-next.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
8
.idea/prettier.xml
generated
8
.idea/prettier.xml
generated
@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="PrettierConfiguration">
|
||||
<option name="myRunOnSave" value="true" />
|
||||
<option name="myRunOnReformat" value="true" />
|
||||
<option name="myFilesPattern" value="{**/*,*}.{js,ts,jsx,tsx,css,scss}" />
|
||||
</component>
|
||||
</project>
|
6
.idea/vcs.xml
generated
6
.idea/vcs.xml
generated
@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
40
components/ArchiveCard.tsx
Normal file
40
components/ArchiveCard.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import { FC } from 'react';
|
||||
import cn from 'classnames';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { AllPostsWithMatter } from 'lib/posts';
|
||||
|
||||
const DateFormater = dynamic(() => import('components/DateFormater'));
|
||||
const Link = dynamic(() => import('components/PathLink'));
|
||||
|
||||
interface Props {
|
||||
post: AllPostsWithMatter;
|
||||
}
|
||||
|
||||
const ArchiveCard: FC<Props> = ({ post }) => {
|
||||
const { id, title, url, date } = post;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Link
|
||||
href={`p/${url}`}
|
||||
className={cn(
|
||||
'block',
|
||||
'bg-underline bg-bottom bg-no-repeat bg-[length:95%_1px]',
|
||||
'duration-300 transition-all',
|
||||
'last:bg-none',
|
||||
'hover:bg-[length:100%_1px]'
|
||||
)}
|
||||
>
|
||||
<div className={cn('p-5')}>
|
||||
<h2 className="font-semibold text-lg mb-2">{title}</h2>
|
||||
<DateFormater
|
||||
dateString={date}
|
||||
className="text-sm text-gray-600 dark:text-gray-400"
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArchiveCard;
|
@ -1,15 +1,17 @@
|
||||
import { FC } from 'react';
|
||||
import { parseISO, format } from 'date-fns';
|
||||
import cn from 'classnames';
|
||||
|
||||
interface Props {
|
||||
dateString: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const DateFormater: FC<Props> = ({ dateString }) => {
|
||||
const DateFormater: FC<Props> = ({ dateString, className }) => {
|
||||
const date = parseISO(dateString);
|
||||
return (
|
||||
<>
|
||||
<time className="leading-none" dateTime={dateString}>
|
||||
<time className={cn('leading-none', className)} dateTime={dateString}>
|
||||
{format(date, 'yyyy/MM/dd')}
|
||||
</time>
|
||||
</>
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { FC, useCallback, useRef, useState } from 'react';
|
||||
import cn from 'classnames';
|
||||
import { FiHome, FiArchive, FiUser, FiSearch } from 'react-icons/fi';
|
||||
import { FiHome, FiArchive, FiUser, FiSearch, FiTwitter } from 'react-icons/fi';
|
||||
import UseAnimations from 'react-useanimations';
|
||||
import menu3 from 'react-useanimations/lib/menu3';
|
||||
import { IconType } from 'react-icons';
|
||||
@ -20,25 +20,31 @@ export type MenuItem = {
|
||||
export const menus: MenuItem[] = [
|
||||
{
|
||||
id: 0,
|
||||
name: '首页',
|
||||
name: 'Home',
|
||||
path: '/',
|
||||
icon: FiHome,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '归档',
|
||||
name: 'Archive',
|
||||
path: '/archive',
|
||||
icon: FiArchive,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '关于',
|
||||
name: 'About',
|
||||
path: '/about',
|
||||
icon: FiUser,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '搜索',
|
||||
name: 'Tweets',
|
||||
path: '/search',
|
||||
icon: FiTwitter,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'Search',
|
||||
path: '/search',
|
||||
icon: FiSearch,
|
||||
},
|
||||
|
@ -17,11 +17,11 @@ const NavMenuItem: FC<Props> = ({ onClick, menuItem }) => {
|
||||
<Link
|
||||
href={menuItem.path}
|
||||
className={cn(
|
||||
'rounded-lg flex items-center my-5 text-lg',
|
||||
'rounded-lg flex items-center my-5 text-lg font-semibold',
|
||||
'text-gray-600 md:text-xl select-none dark:text-gray-400'
|
||||
)}
|
||||
>
|
||||
<menuItem.icon className="mr-10" />
|
||||
<menuItem.icon className="mr-9" />
|
||||
<span>{menuItem.name}</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
48
pages/archive.tsx
Normal file
48
pages/archive.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import { InferGetStaticPropsType } from 'next';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { ReactElement } from 'react';
|
||||
import { getArchiveData } from 'lib/posts';
|
||||
import Head from 'next/head';
|
||||
import cn from 'classnames';
|
||||
|
||||
const MainLayout = dynamic(() => import('layouts/MainLayout'));
|
||||
const ArchiveCard = dynamic(() => import('components/ArchiveCard'));
|
||||
|
||||
const Archive = ({
|
||||
archiveData,
|
||||
archiveKeys,
|
||||
}: InferGetStaticPropsType<typeof getStaticProps>) => {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>RUA - Home</title>
|
||||
</Head>
|
||||
|
||||
{archiveKeys.map((year) => (
|
||||
<div key={year} className={cn('mb-10')}>
|
||||
<h2 className="text-3xl text-gray-400 font-semibold mb-4">{year}</h2>
|
||||
|
||||
<div className={cn('rounded-lg bg-white', 'dark:bg-rua-gray-800')}>
|
||||
{archiveData[year].map((post) => (
|
||||
<ArchiveCard key={post.id} post={post} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Archive.getLayout = function getLayout(page: ReactElement) {
|
||||
return <MainLayout>{page}</MainLayout>;
|
||||
};
|
||||
|
||||
export const getStaticProps = () => {
|
||||
return {
|
||||
props: {
|
||||
...getArchiveData(),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default Archive;
|
@ -15,8 +15,8 @@ module.exports = {
|
||||
gray: {
|
||||
100: '#aabfc5',
|
||||
600: 'rgb(66,66,66)',
|
||||
800: 'rgb(35,38,38)',
|
||||
900: 'rgb(24,25,26)',
|
||||
800: 'rgb(35,38,38)', // card background in dark
|
||||
900: 'rgb(24,25,26)', // body background in dark
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -25,6 +25,9 @@ module.exports = {
|
||||
underline: 'inset 0px -2px 0px 0px rgb(85 200 188 / 70%)',
|
||||
throughline: 'inset 0px -0.5em 0px 0px rgb(85 200 188 / 70%)',
|
||||
},
|
||||
backgroundImage: {
|
||||
underline: 'linear-gradient(rgb(130 130 130),#909090)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
|
Reference in New Issue
Block a user