From 9dfa62d31a6fd9b982e9970a0d8ac62d6e23828d Mon Sep 17 00:00:00 2001 From: ohprettyhak Date: Mon, 4 Nov 2024 12:56:09 +0900 Subject: [PATCH] feat: Add initial animation --- gatsby-browser.ts | 3 +- gatsby-config.ts | 9 +- gatsby/_queries/{blog.ts => post.ts} | 4 +- gatsby/_utils/page-generator.ts | 42 +++++++ gatsby/createCustomPages.ts | 54 ++++----- .../about/{footer => Footer}/index.tsx | 2 +- .../about/{footer => Footer}/styles.css.ts | 2 + src/components/common/Layout/index.tsx | 7 +- src/components/common/Pagination/index.tsx | 57 +++++++++ .../common/Pagination/styles.css.ts | 43 +++++++ .../common/{PostsGrid => PostGrid}/index.tsx | 8 +- .../{PostsGrid => PostGrid}/styles.css.ts | 6 +- src/components/common/PostList/index.tsx | 60 ++++++++++ src/components/common/PostList/styles.css.ts | 108 ++++++++++++++++++ .../index/ProfileGrid/ProfileDialog.tsx | 66 ++++++----- .../index/ProfileGrid/styles.css.ts | 1 + .../{blog => post}/Footer/index.tsx | 0 .../{blog => post}/Footer/styles.css.ts | 0 .../{blog => post}/Header/index.tsx | 2 +- .../{blog => post}/Header/styles.css.ts | 2 +- .../{blog => post}/Recommend/index.tsx | 4 +- .../{blog => post}/Recommend/styles.css.ts | 0 src/constants/menu.ts | 3 +- src/constants/metadata.ts | 6 + src/pages/index.tsx | 8 +- src/styles/animation.css.ts | 32 ++++++ src/styles/article.css.ts | 4 + src/styles/pages.css.ts | 2 + src/templates/about-template.tsx | 6 +- .../{blog-template.tsx => post-template.tsx} | 28 ++--- src/templates/posts-template.tsx | 79 +++++++++++++ 31 files changed, 548 insertions(+), 100 deletions(-) rename gatsby/_queries/{blog.ts => post.ts} (94%) create mode 100644 gatsby/_utils/page-generator.ts rename src/components/about/{footer => Footer}/index.tsx (92%) rename src/components/about/{footer => Footer}/styles.css.ts (79%) create mode 100644 src/components/common/Pagination/index.tsx create mode 100644 src/components/common/Pagination/styles.css.ts rename src/components/common/{PostsGrid => PostGrid}/index.tsx (83%) rename src/components/common/{PostsGrid => PostGrid}/styles.css.ts (94%) create mode 100644 src/components/common/PostList/index.tsx create mode 100644 src/components/common/PostList/styles.css.ts rename src/components/{blog => post}/Footer/index.tsx (100%) rename src/components/{blog => post}/Footer/styles.css.ts (100%) rename src/components/{blog => post}/Header/index.tsx (91%) rename src/components/{blog => post}/Header/styles.css.ts (95%) rename src/components/{blog => post}/Recommend/index.tsx (74%) rename src/components/{blog => post}/Recommend/styles.css.ts (100%) create mode 100644 src/constants/metadata.ts create mode 100644 src/styles/animation.css.ts rename src/templates/{blog-template.tsx => post-template.tsx} (75%) create mode 100644 src/templates/posts-template.tsx diff --git a/gatsby-browser.ts b/gatsby-browser.ts index eba3cc4..5d9ced1 100644 --- a/gatsby-browser.ts +++ b/gatsby-browser.ts @@ -1,3 +1,4 @@ -import './src/styles/code-highlight.css'; +import './src/styles/animation.css'; +import '@/styles/code-highlight.css'; import '@/styles/globals.css'; import 'material-symbols/rounded.css'; diff --git a/gatsby-config.ts b/gatsby-config.ts index 83d92e0..8226979 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -1,13 +1,10 @@ import type { GatsbyConfig } from 'gatsby'; import remarkGfm from 'remark-gfm'; +import { metadata } from './src/constants/metadata'; + const config: GatsbyConfig = { - siteMetadata: { - title: 'semantic', - author: 'Knesssn', - description: 'Make your ✨gorgeous blog with semantic', - siteUrl: `https://semantic.nylonbricks.com`, - }, + siteMetadata: metadata, graphqlTypegen: true, plugins: [ { diff --git a/gatsby/_queries/blog.ts b/gatsby/_queries/post.ts similarity index 94% rename from gatsby/_queries/blog.ts rename to gatsby/_queries/post.ts index 4f6879d..7896b1c 100644 --- a/gatsby/_queries/blog.ts +++ b/gatsby/_queries/post.ts @@ -1,6 +1,6 @@ import { IGatsbyImageData } from 'gatsby-plugin-image'; -export type BlogPageQueryType = { +export type PostPageQueryType = { allMdx: { nodes: { id: string; @@ -27,7 +27,7 @@ export type BlogPageQueryType = { }; }; -export const BlogPageQuery = ` +export const PostPageQuery = ` query GetAllMdxPosts { allMdx(filter: { internal: { contentFilePath: { regex: "/^(.*/content/posts/)(.*)$/" } } }) { nodes { diff --git a/gatsby/_utils/page-generator.ts b/gatsby/_utils/page-generator.ts new file mode 100644 index 0000000..8bb12d4 --- /dev/null +++ b/gatsby/_utils/page-generator.ts @@ -0,0 +1,42 @@ +import { Actions } from 'gatsby'; + +const perPage = 8; + +export const generatePaginatedPage = ( + totalItems: number, + basePath: string, + component: string, + title: string, + createPage: Actions['createPage'], +) => { + const totalPages = Math.ceil(totalItems / perPage); + Array.from({ length: totalPages }).forEach((_, i) => { + createPage({ + path: i === 0 ? `/${basePath}` : `/${basePath}/p/${i + 1}`, + component, + context: { + title, + type: basePath, + limit: perPage, + skip: i * perPage, + maxPages: totalPages, + currentPage: i + 1, + }, + }); + }); +}; + +export const generateMetadataPages = ( + items: Set, + pathPrefix: string, + template: string, + createPage: Actions['createPage'], +) => { + items.forEach(item => { + createPage({ + path: `/${pathPrefix}/${item}`.toLowerCase(), + component: template, + context: { [pathPrefix]: item }, + }); + }); +}; diff --git a/gatsby/createCustomPages.ts b/gatsby/createCustomPages.ts index 663011d..57adc34 100644 --- a/gatsby/createCustomPages.ts +++ b/gatsby/createCustomPages.ts @@ -2,12 +2,14 @@ import path from 'path'; import { GatsbyNode } from 'gatsby'; import { AboutPageQuery, AboutPageQueryType } from './_queries/about'; -import { BlogPageQuery, BlogPageQueryType } from './_queries/blog'; +import { PostPageQuery, PostPageQueryType } from './_queries/post'; import { getImage, IGatsbyImageData } from 'gatsby-plugin-image'; +import { generatePaginatedPage, generateMetadataPages } from './_utils/page-generator'; const templates = { about: path.resolve(`./src/templates/about-template.tsx`), - blog: path.resolve(`./src/templates/blog-template.tsx`), + post: path.resolve(`./src/templates/post-template.tsx`), + posts: path.resolve(`./src/templates/posts-template.tsx`), category: path.resolve(`./src/templates/category-template.tsx`), categories: path.resolve(`./src/templates/categories-template.tsx`), tag: path.resolve(`./src/templates/tag-template.tsx`), @@ -19,30 +21,29 @@ export const createCustomPages: GatsbyNode['createPages'] = async ({ actions, reporter, }) => { - const { createPage } = actions; + const { createPage, createRedirect } = actions; - // Blog pages - const pageQuery = await graphql(BlogPageQuery); + // Post pages + const postQueryResult = await graphql(PostPageQuery); - if (pageQuery.errors) { - reporter.panicOnBuild('🚨 MDX query error at BlogPageQuery', pageQuery.errors); + if (postQueryResult.errors) { + reporter.panicOnBuild('🚨 MDX query error at PostPageQuery', postQueryResult.errors); return; } - const blogs = pageQuery.data?.allMdx.nodes || []; + const posts = postQueryResult.data?.allMdx.nodes || []; const categories = new Set(); const tags = new Set(); - blogs.forEach(({ frontmatter, fields, internal }) => { + posts.forEach(({ frontmatter, fields, internal }) => { const { slug, category, tag, coverImage } = frontmatter; - const cover: IGatsbyImageData | undefined = getImage( coverImage?.childImageSharp?.gatsbyImageData || null, ); createPage({ - path: `/blog/${slug}`, - component: `${templates.blog}?__contentFilePath=${internal.contentFilePath}`, + path: `/posts/${slug}`, + component: `${templates.post}?__contentFilePath=${internal.contentFilePath}`, context: { ...frontmatter, tags: tag ?? [], coverImage: cover, timestamp: fields.timestamp }, }); @@ -50,18 +51,9 @@ export const createCustomPages: GatsbyNode['createPages'] = async ({ tag?.forEach(t => tags.add(t)); }); - const createMetadataPages = (items: Set, pathPrefix: string, template: string) => { - items.forEach(item => { - createPage({ - path: `/${pathPrefix}/${item}`.toLowerCase(), - component: template, - context: { [pathPrefix]: item }, - }); - }); - }; - - createMetadataPages(categories, 'category', templates.category); - createMetadataPages(tags, 'tag', templates.tag); + generatePaginatedPage(posts.length, 'posts', templates.posts, 'Posts', createPage); + generateMetadataPages(categories, 'category', templates.category, createPage); + generateMetadataPages(tags, 'tag', templates.tag, createPage); createPage({ path: `/category`, @@ -76,15 +68,14 @@ export const createCustomPages: GatsbyNode['createPages'] = async ({ }); // About page - const aboutQuery = await graphql(AboutPageQuery); - - if (aboutQuery.errors) { - reporter.panicOnBuild('🚨 MDX query error at AboutPageQuery', aboutQuery.errors); + const aboutQueryResult = await graphql(AboutPageQuery); + if (aboutQueryResult.errors) { + reporter.panicOnBuild('🚨 MDX query error at AboutPageQuery', aboutQueryResult.errors); return; } - if (aboutQuery.data?.mdx) { - const { id, internal } = aboutQuery.data.mdx; + if (aboutQueryResult.data?.mdx) { + const { id, internal } = aboutQueryResult.data.mdx; createPage({ path: `/about`, @@ -92,4 +83,7 @@ export const createCustomPages: GatsbyNode['createPages'] = async ({ context: { id }, }); } + + // Redirects + createRedirect({ fromPath: `/post/p/1/`, toPath: `/post/` }); }; diff --git a/src/components/about/footer/index.tsx b/src/components/about/Footer/index.tsx similarity index 92% rename from src/components/about/footer/index.tsx rename to src/components/about/Footer/index.tsx index c261b59..3e89bb5 100644 --- a/src/components/about/footer/index.tsx +++ b/src/components/about/Footer/index.tsx @@ -10,7 +10,7 @@ type FooterProps = { const Footer = ({ date }: FooterProps) => { return (
-

Last update: {dayjs(date).format('YYYY-DD-MM HH:mm')}

+

Last update: {dayjs(date).format('YYYY-MM-DD HH:mm')}

); }; diff --git a/src/components/about/footer/styles.css.ts b/src/components/about/Footer/styles.css.ts similarity index 79% rename from src/components/about/footer/styles.css.ts rename to src/components/about/Footer/styles.css.ts index 5d471cc..1c30df4 100644 --- a/src/components/about/footer/styles.css.ts +++ b/src/components/about/Footer/styles.css.ts @@ -1,10 +1,12 @@ import { style } from '@vanilla-extract/css'; import { theme } from '@/styles/theme.css'; +import { rem } from '@/utils/pxto'; export const root = style({}); export const date = style({ ...theme.typographies.profile_sub, + marginTop: rem(30), color: theme.colors.gray.mid, }); diff --git a/src/components/common/Layout/index.tsx b/src/components/common/Layout/index.tsx index 9711cc8..bb6e843 100644 --- a/src/components/common/Layout/index.tsx +++ b/src/components/common/Layout/index.tsx @@ -15,7 +15,12 @@ const Layout = ({ className, children, ...props }: LayoutProps) => {
-
+
{children}
diff --git a/src/components/common/Pagination/index.tsx b/src/components/common/Pagination/index.tsx new file mode 100644 index 0000000..dde792a --- /dev/null +++ b/src/components/common/Pagination/index.tsx @@ -0,0 +1,57 @@ +import { clsx } from 'clsx'; +import { Link } from 'gatsby'; +import React from 'react'; + +import { theme } from '@/styles/theme.css'; + +import * as styles from './styles.css'; + +type PaginationProps = { + currentPage: number; + maxPages: number; + prefix: string; +}; + +const Pagination = ({ currentPage, maxPages, prefix }: PaginationProps) => { + return ( + + ); +}; + +export default Pagination; diff --git a/src/components/common/Pagination/styles.css.ts b/src/components/common/Pagination/styles.css.ts new file mode 100644 index 0000000..1cfc696 --- /dev/null +++ b/src/components/common/Pagination/styles.css.ts @@ -0,0 +1,43 @@ +import { globalStyle, style } from '@vanilla-extract/css'; + +import { theme } from '@/styles/theme.css'; +import { rem } from '@/utils/pxto'; + +export const root = style({ + ...theme.layouts.center, + width: '100%', + paddingBlock: rem(65), +}); + +export const container = style({ + ...theme.layouts.centerY, + padding: 0, + margin: 0, + listStyle: 'none', + userSelect: 'none', +}); + +export const item = style({ + ...theme.layouts.center, + width: rem(28), + height: rem(28), + color: theme.colors.gray.mid, + fontWeight: 400, + cursor: 'pointer', + borderRadius: rem(4), + backgroundColor: 'transparent', + transition: 'color 0.3s, background-color 0.3s', + + ':hover': { color: theme.colors.gray.accent, backgroundColor: theme.colors.gray.hover }, + ':active': { color: theme.colors.gray.accent, backgroundColor: theme.colors.border }, +}); + +export const active = style({ + color: theme.colors.gray.accent, + backgroundColor: theme.colors.border, +}); + +globalStyle(`${item} > a`, { + width: '100%', + textAlign: 'center', +}); diff --git a/src/components/common/PostsGrid/index.tsx b/src/components/common/PostGrid/index.tsx similarity index 83% rename from src/components/common/PostsGrid/index.tsx rename to src/components/common/PostGrid/index.tsx index d4508cc..78563b8 100644 --- a/src/components/common/PostsGrid/index.tsx +++ b/src/components/common/PostGrid/index.tsx @@ -7,12 +7,12 @@ import { formatDate } from '@/utils/date'; import * as styles from './styles.css'; -type PostsGridProps = ComponentProps<'div'> & { +type PostGridProps = ComponentProps<'div'> & { className?: string; posts: Queries.LatestBlogPostsQuery['allMdx']['nodes']; }; -const PostsGrid = ({ posts, className, ...props }: PostsGridProps) => { +const PostGrid = ({ posts, className, ...props }: PostGridProps) => { return (
{posts.map(({ id, frontmatter }) => { @@ -21,7 +21,7 @@ const PostsGrid = ({ posts, className, ...props }: PostsGridProps) => { ); return ( - +
{coverImage && ( { ); }; -export default PostsGrid; +export default PostGrid; diff --git a/src/components/common/PostsGrid/styles.css.ts b/src/components/common/PostGrid/styles.css.ts similarity index 94% rename from src/components/common/PostsGrid/styles.css.ts rename to src/components/common/PostGrid/styles.css.ts index 647cfed..1bf981a 100644 --- a/src/components/common/PostsGrid/styles.css.ts +++ b/src/components/common/PostGrid/styles.css.ts @@ -27,8 +27,6 @@ export const cover = style({ userSelect: 'none', overflow: 'hidden', transition: 'filter 0.3s ease', - - ':hover': { filter: 'brightness(1.3)' }, }); export const title = style({ @@ -61,6 +59,10 @@ export const description = style({ transition: 'background-color 0.3s ease', }); +globalStyle(`${container}:hover ${cover}, ${container}:active ${cover}`, { + filter: 'brightness(1.3)', +}); + globalStyle(`${container}:hover ${title}`, { backgroundColor: theme.colors.gray.hover, }); diff --git a/src/components/common/PostList/index.tsx b/src/components/common/PostList/index.tsx new file mode 100644 index 0000000..1954b93 --- /dev/null +++ b/src/components/common/PostList/index.tsx @@ -0,0 +1,60 @@ +import { clsx } from 'clsx'; +import { Link } from 'gatsby'; +import { GatsbyImage, getImage, IGatsbyImageData } from 'gatsby-plugin-image'; +import React, { ComponentProps, Fragment } from 'react'; + +import { formatDate } from '@/utils/date'; + +import * as styles from './styles.css'; + +type PostListProps = ComponentProps<'ul'> & { + className?: string; + posts: Queries.PostListQuery['allMdx']['nodes']; +}; + +const PostList = ({ posts, className, ...props }: PostListProps) => { + return ( +
    + {posts.map(({ id, frontmatter }) => { + const coverImage: IGatsbyImageData | undefined = getImage( + frontmatter?.coverImage?.childImageSharp?.gatsbyImageData || null, + ); + + return ( +
  • + +
    + {coverImage && ( + + )} +
    +
    +

    {frontmatter?.title}

    +

    {frontmatter?.subtitle}

    +

    + {formatDate(frontmatter?.date || '')} + {frontmatter?.category && ( + +  ·  + {frontmatter?.category} + + )} +

    +
    + +
    • + ); + })} +
+ ); +}; +export default PostList; diff --git a/src/components/common/PostList/styles.css.ts b/src/components/common/PostList/styles.css.ts new file mode 100644 index 0000000..5624952 --- /dev/null +++ b/src/components/common/PostList/styles.css.ts @@ -0,0 +1,108 @@ +import { globalStyle, style } from '@vanilla-extract/css'; + +import { breakpoint } from '@/styles/responsive.css'; +import { theme } from '@/styles/theme.css'; +import { rem } from '@/utils/pxto'; + +export const list = style({ + ...theme.layouts.column, + listStyle: 'none', + gap: rem(30), +}); + +export const item = style({ + ...theme.layouts.column, + gap: rem(18), + + ...breakpoint({ tablet: { flexDirection: 'row', gap: rem(35) } }), +}); + +export const cover = style({ + width: '100%', + aspectRatio: '1.8 / 1', + borderRadius: rem(14), + backgroundColor: theme.colors.border, + userSelect: 'none', + overflow: 'hidden', + transition: 'filter 0.3s ease', + + ...breakpoint({ tablet: { width: rem(346) } }), +}); + +export const frontmatter = style({ + ...theme.layouts.column, + flex: 1, +}); + +export const title = style({ + ...theme.typographies.post_subtitle, + paddingBlock: rem(2), + paddingInline: rem(10), + marginInline: rem(-10), + marginBottom: rem(-2), + color: theme.colors.gray.accent, + borderRadius: rem(8), + transition: 'background-color 0.3s ease', +}); + +export const subtitle = style({ + ...theme.typographies.post_description, + paddingBlock: rem(2), + paddingInline: rem(10), + marginTop: rem(12), + marginInline: rem(-10), + marginBottom: rem(-2), + color: theme.colors.gray.mid, + borderRadius: rem(8), + transition: 'background-color 0.3s ease', + + ...breakpoint({ tablet: { marginTop: rem(20) } }), +}); + +export const description = style({ + ...theme.layouts.centerY, + ...theme.typographies.h5, + width: 'fit-content', + paddingBlock: rem(2), + paddingInline: rem(10), + marginTop: rem(8), + marginInline: rem(-10), + marginBottom: rem(-2), + color: theme.colors.gray.light, + borderRadius: rem(8), + transition: 'background-color 0.3s ease', + + ...breakpoint({ tablet: { marginTop: rem(18) } }), +}); + +export const middot = style({ + color: theme.colors.gray.bold, +}); + +globalStyle(`${item}:hover ${cover}, ${item}:active ${cover}`, { + filter: 'brightness(1.3)', +}); + +globalStyle(`${frontmatter}:hover ${title}`, { + backgroundColor: theme.colors.gray.hover, +}); + +globalStyle(`${frontmatter}:hover ${subtitle}`, { + backgroundColor: theme.colors.gray.hover, +}); + +globalStyle(`${frontmatter}:hover ${description}`, { + backgroundColor: theme.colors.gray.hover, +}); + +globalStyle(`${frontmatter}:active ${title}`, { + backgroundColor: theme.colors.border, +}); + +globalStyle(`${frontmatter}:active ${subtitle}`, { + backgroundColor: theme.colors.border, +}); + +globalStyle(`${frontmatter}:active ${description}`, { + backgroundColor: theme.colors.border, +}); diff --git a/src/components/index/ProfileGrid/ProfileDialog.tsx b/src/components/index/ProfileGrid/ProfileDialog.tsx index 4361117..10f2105 100644 --- a/src/components/index/ProfileGrid/ProfileDialog.tsx +++ b/src/components/index/ProfileGrid/ProfileDialog.tsx @@ -2,6 +2,7 @@ import * as Dialog from '@radix-ui/react-dialog'; import { clsx } from 'clsx'; import { AnimatePresence, motion } from 'framer-motion'; import React, { ReactNode, useState } from 'react'; +import { createPortal } from 'react-dom'; import { profile } from '@/constants/profile'; @@ -18,34 +19,43 @@ const ProfileDialog = ({ children }: ProfileDialogProps) => { {children} - - {open && ( - <> - - - - - - - - )} - + {createPortal( + + {open && ( + <> + + + + + + + + )} + , + document.body, + )} ); }; diff --git a/src/components/index/ProfileGrid/styles.css.ts b/src/components/index/ProfileGrid/styles.css.ts index 12f0e49..aec2ada 100644 --- a/src/components/index/ProfileGrid/styles.css.ts +++ b/src/components/index/ProfileGrid/styles.css.ts @@ -81,6 +81,7 @@ export const dialogOverlay = style({ backgroundColor: 'rgba(0, 0, 0, 0.2)', backdropFilter: `blur(${rem(11)})`, zIndex: theme.zIndices.overlay, + transform: 'none', }); export const dialogContainer = style({ diff --git a/src/components/blog/Footer/index.tsx b/src/components/post/Footer/index.tsx similarity index 100% rename from src/components/blog/Footer/index.tsx rename to src/components/post/Footer/index.tsx diff --git a/src/components/blog/Footer/styles.css.ts b/src/components/post/Footer/styles.css.ts similarity index 100% rename from src/components/blog/Footer/styles.css.ts rename to src/components/post/Footer/styles.css.ts diff --git a/src/components/blog/Header/index.tsx b/src/components/post/Header/index.tsx similarity index 91% rename from src/components/blog/Header/index.tsx rename to src/components/post/Header/index.tsx index 1bf6e35..f163b4f 100644 --- a/src/components/blog/Header/index.tsx +++ b/src/components/post/Header/index.tsx @@ -25,7 +25,7 @@ const Header = ({ coverImage, title, date, category }: HeaderProps) => { {formatDate(date)} {category && ( -  ·  +  ·  {category} )} diff --git a/src/components/blog/Header/styles.css.ts b/src/components/post/Header/styles.css.ts similarity index 95% rename from src/components/blog/Header/styles.css.ts rename to src/components/post/Header/styles.css.ts index 621ce1f..c3a5d0a 100644 --- a/src/components/blog/Header/styles.css.ts +++ b/src/components/post/Header/styles.css.ts @@ -33,6 +33,6 @@ export const description = style({ wordBreak: 'keep-all', }); -export const descriptionDot = style({ +export const middot = style({ color: theme.colors.gray.bold, }); diff --git a/src/components/blog/Recommend/index.tsx b/src/components/post/Recommend/index.tsx similarity index 74% rename from src/components/blog/Recommend/index.tsx rename to src/components/post/Recommend/index.tsx index b20ca7a..f06b045 100644 --- a/src/components/blog/Recommend/index.tsx +++ b/src/components/post/Recommend/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import PostsGrid from '@/components/common/PostsGrid'; +import PostGrid from '@/components/common/PostGrid'; import * as styles from './styles.css'; @@ -12,7 +12,7 @@ const Recommend = ({ posts }: RecommendProps) => { return (

🦾 Check them out

- +
); }; diff --git a/src/components/blog/Recommend/styles.css.ts b/src/components/post/Recommend/styles.css.ts similarity index 100% rename from src/components/blog/Recommend/styles.css.ts rename to src/components/post/Recommend/styles.css.ts diff --git a/src/constants/menu.ts b/src/constants/menu.ts index f70880c..37a01bc 100644 --- a/src/constants/menu.ts +++ b/src/constants/menu.ts @@ -1,6 +1,5 @@ export const menuItems = [ { title: '🚽 Home', link: '/' }, { title: '🎲 About', link: '/about/' }, - { title: '📟 Tech', link: '/category/tech/' }, - { title: '🐀 Life', link: '/category/life/' }, + { title: '📟 Posts', link: '/posts/' }, ]; diff --git a/src/constants/metadata.ts b/src/constants/metadata.ts new file mode 100644 index 0000000..98419aa --- /dev/null +++ b/src/constants/metadata.ts @@ -0,0 +1,6 @@ +export const metadata = { + title: 'semantic', + author: 'Knesssn', + description: 'Make your ✨gorgeous post with semantic', + siteUrl: `https://semantic.nylonbricks.com`, +}; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e040d84..04b5e57 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,10 +3,9 @@ import { graphql, Link, PageProps } from 'gatsby'; import React from 'react'; import Layout from '@/components/common/Layout'; -import PostsGrid from '@/components/common/PostsGrid'; +import PostGrid from '@/components/common/PostGrid'; import ProfileGrid from '@/components/index/ProfileGrid'; import { useSiteMetadata } from '@/hooks/useSiteMetadata'; -import { theme } from '@/styles/theme.css'; import * as styles from '../styles/pages.css'; @@ -23,6 +22,7 @@ export const query = graphql` date slug title + subtitle coverImage { childImageSharp { gatsbyImageData @@ -47,11 +47,11 @@ const IndexPage = ({ data }: IndexPageProps) => {

Update

- + Expandadd
- +
); diff --git a/src/styles/animation.css.ts b/src/styles/animation.css.ts new file mode 100644 index 0000000..661f128 --- /dev/null +++ b/src/styles/animation.css.ts @@ -0,0 +1,32 @@ +import { globalStyle, keyframes } from '@vanilla-extract/css'; + +import { rem } from '@/utils/pxto'; + +const fadeInSlide = keyframes({ + '0%': { opacity: '0', transform: `translateY(${rem(4)})` }, + '100%': { opacity: '1', transform: 'none' }, +}); + +globalStyle('[data-animate] > *', { + vars: { + '--level': '0', + '--delay': '50ms', + '--start': '0ms', + }, + animation: `${fadeInSlide} 500ms both`, + animationDelay: 'calc(var(--level) * var(--delay) + var(--start))', +}); + +globalStyle('[data-animate-speed="slow"] > *', { + vars: { '--delay': '100ms' }, +}); + +globalStyle('[data-animate-speed="fast"] > *', { + vars: { '--delay': '25ms' }, +}); + +for (let i = 1; i <= 20; i++) { + globalStyle(`[data-animate] > *:nth-child(${i})`, { + vars: { '--level': `${i}` }, + }); +} diff --git a/src/styles/article.css.ts b/src/styles/article.css.ts index a8f0d87..a8b1a91 100644 --- a/src/styles/article.css.ts +++ b/src/styles/article.css.ts @@ -51,6 +51,10 @@ globalStyle('article p', { margin: `0 0 ${rem(28)}`, }); +globalStyle('article > div[data-content] > :first-child', { + marginTop: 0, +}); + globalStyle('article > div[data-content] > :last-child', { marginBottom: 0, }); diff --git a/src/styles/pages.css.ts b/src/styles/pages.css.ts index ce740e0..1d003d6 100644 --- a/src/styles/pages.css.ts +++ b/src/styles/pages.css.ts @@ -6,6 +6,8 @@ import { rem } from '@/utils/pxto'; export const root = style({ ...theme.layouts.column, paddingTop: rem(70), + paddingBottom: rem(65), + gap: rem(30), }); export const titleContainer = style({ diff --git a/src/templates/about-template.tsx b/src/templates/about-template.tsx index 7516d04..043824c 100644 --- a/src/templates/about-template.tsx +++ b/src/templates/about-template.tsx @@ -1,7 +1,7 @@ import { graphql, PageProps } from 'gatsby'; import React from 'react'; -import Footer from '@/components/about/footer'; +import Footer from '@/components/about/Footer'; import Layout from '@/components/common/Layout'; import { useSiteMetadata } from '@/hooks/useSiteMetadata'; @@ -25,7 +25,9 @@ const AboutTemplate = ({ data, children }: AboutTemplateProps) => { return ( -
{children}
+
+
{children}
+