Add archive page

* remove useless folder
* add tweets nav item
This commit is contained in:
DefectingCat
2022-01-26 20:54:23 +08:00
parent 17e5c5e675
commit 4d81ad159c
15 changed files with 110 additions and 158 deletions

5
.idea/.gitignore generated vendored
View File

@ -1,5 +0,0 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

12
.idea/blog-next.iml generated
View File

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

View File

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

View File

@ -1,5 +0,0 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
</state>
</component>

View File

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

View File

@ -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
View File

@ -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
View File

@ -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
View File

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

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

View File

@ -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>
</>

View File

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

View File

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

View File

@ -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: [],