Skip to content

Commit

Permalink
feat: GIF
Browse files Browse the repository at this point in the history
  • Loading branch information
@junghyeonsu
junghyeonsu committed Dec 22, 2023
1 parent 0d3f8b4 commit acc986a
Show file tree
Hide file tree
Showing 9 changed files with 71 additions and 79 deletions.
Binary file added .yarn/cache/gatsby-remark-gifs-npm-1.2.0-1db3fd79fc-99e4131c7e.zip
View file
Binary file not shown.
5 changes: 4 additions & 1 deletion gatsby-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,14 @@ module.exports = {
resolve: "gatsby-plugin-mdx",
options: {
gatsbyRemarkPlugins: [
{
resolve: "gatsby-remark-gifs",
},
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 800,
wrapperStyle: `margin: 25px 0px; z-index: 0`,
wrapperStyle: `margin: 25px 0px; z-index: 0;`,
showCaptions: true,
},
},
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"gatsby-plugin-sharp": "^5.0.0",
"gatsby-plugin-typegen": "^3.1.0",
"gatsby-plugin-web-font-loader": "^1.0.4",
"gatsby-remark-gifs": "^1.2.0",
"gatsby-remark-images": "^7.0.0",
"gatsby-source-filesystem": "^5.0.0",
"gatsby-transformer-sharp": "^5.0.0",
Expand Down
46 changes: 9 additions & 37 deletions src/__generated__/gatsby-schema.graphql
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions src/__generated__/gatsby-types.d.ts
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 15 additions & 0 deletions src/chakra/global.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,22 @@ export default {
},

".gatsby-resp-image-figcaption": {
fontSize: "14px",
textAlign: "center",

color: "gray.500",

marginTop: "16px",
},

"article img": {
borderRadius: "20px",
border: "1px solid transparent",

transition: "all 0.3s ease",

":hover": {
border: "1px solid var(--chakra-colors-blackAlpha-50)",
},
},
};
21 changes: 21 additions & 0 deletions src/components/PostLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,27 @@ const customComponents = {
);
},

img: (props: { src: string; alt: string }) => {
const isGif = props.src?.includes(".gif");
const { src, alt } = props;
if (isGif) {
return (
<Box margin="25px 0px" maxWidth="800px">
<img src={src} alt={alt} />
<Text
as="figcaption"
fontSize="14px"
textAlign="center"
marginTop="16px"
color="gray.500"
>
{alt}
</Text>
</Box>
);
}
},

blockquote: (props: ComponentDefaultProps) => {
const children = props.children;
return <Callout>{children}</Callout>;
Expand Down
45 changes: 5 additions & 40 deletions src/gatsby-types.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1713,14 +1713,11 @@ type Query_siteArgs = {
buildTime: InputMaybe<DateQueryOperatorInput>;
children: InputMaybe<NodeFilterListInput>;
flags: InputMaybe<SiteFlagsFilterInput>;
graphqlTypegen: InputMaybe<SiteGraphqlTypegenFilterInput>;
graphqlTypegen: InputMaybe<BooleanQueryOperatorInput>;
host: InputMaybe<StringQueryOperatorInput>;
id: InputMaybe<StringQueryOperatorInput>;
internal: InputMaybe<InternalFilterInput>;
jsxRuntime: InputMaybe<StringQueryOperatorInput>;
parent: InputMaybe<NodeFilterInput>;
pathPrefix: InputMaybe<StringQueryOperatorInput>;
polyfill: InputMaybe<BooleanQueryOperatorInput>;
port: InputMaybe<IntQueryOperatorInput>;
siteMetadata: InputMaybe<SiteSiteMetadataFilterInput>;
trailingSlash: InputMaybe<StringQueryOperatorInput>;
Expand Down Expand Up @@ -1786,14 +1783,11 @@ type Site = Node & {
readonly buildTime: Maybe<Scalars['Date']>;
readonly children: ReadonlyArray<Node>;
readonly flags: Maybe<SiteFlags>;
readonly graphqlTypegen: Maybe<SiteGraphqlTypegen>;
readonly graphqlTypegen: Maybe<Scalars['Boolean']>;
readonly host: Maybe<Scalars['String']>;
readonly id: Scalars['ID'];
readonly internal: Internal;
readonly jsxRuntime: Maybe<Scalars['String']>;
readonly parent: Maybe<Node>;
readonly pathPrefix: Maybe<Scalars['String']>;
readonly polyfill: Maybe<Scalars['Boolean']>;
readonly port: Maybe<Scalars['Int']>;
readonly siteMetadata: Maybe<SiteSiteMetadata>;
readonly trailingSlash: Maybe<Scalars['String']>;
Expand Down Expand Up @@ -1982,14 +1976,11 @@ type SiteFieldSelector = {
readonly buildTime: InputMaybe<FieldSelectorEnum>;
readonly children: InputMaybe<NodeFieldSelector>;
readonly flags: InputMaybe<SiteFlagsFieldSelector>;
readonly graphqlTypegen: InputMaybe<SiteGraphqlTypegenFieldSelector>;
readonly graphqlTypegen: InputMaybe<FieldSelectorEnum>;
readonly host: InputMaybe<FieldSelectorEnum>;
readonly id: InputMaybe<FieldSelectorEnum>;
readonly internal: InputMaybe<InternalFieldSelector>;
readonly jsxRuntime: InputMaybe<FieldSelectorEnum>;
readonly parent: InputMaybe<NodeFieldSelector>;
readonly pathPrefix: InputMaybe<FieldSelectorEnum>;
readonly polyfill: InputMaybe<FieldSelectorEnum>;
readonly port: InputMaybe<FieldSelectorEnum>;
readonly siteMetadata: InputMaybe<SiteSiteMetadataFieldSelector>;
readonly trailingSlash: InputMaybe<FieldSelectorEnum>;
Expand All @@ -1999,14 +1990,11 @@ type SiteFilterInput = {
readonly buildTime: InputMaybe<DateQueryOperatorInput>;
readonly children: InputMaybe<NodeFilterListInput>;
readonly flags: InputMaybe<SiteFlagsFilterInput>;
readonly graphqlTypegen: InputMaybe<SiteGraphqlTypegenFilterInput>;
readonly graphqlTypegen: InputMaybe<BooleanQueryOperatorInput>;
readonly host: InputMaybe<StringQueryOperatorInput>;
readonly id: InputMaybe<StringQueryOperatorInput>;
readonly internal: InputMaybe<InternalFilterInput>;
readonly jsxRuntime: InputMaybe<StringQueryOperatorInput>;
readonly parent: InputMaybe<NodeFilterInput>;
readonly pathPrefix: InputMaybe<StringQueryOperatorInput>;
readonly polyfill: InputMaybe<BooleanQueryOperatorInput>;
readonly port: InputMaybe<IntQueryOperatorInput>;
readonly siteMetadata: InputMaybe<SiteSiteMetadataFilterInput>;
readonly trailingSlash: InputMaybe<StringQueryOperatorInput>;
Expand Down Expand Up @@ -2170,26 +2158,6 @@ type SiteFunctionSortInput = {
readonly relativeCompiledFilePath: InputMaybe<SortOrderEnum>;
};

type SiteGraphqlTypegen = {
readonly generateOnBuild: Maybe<Scalars['Boolean']>;
readonly typesOutputPath: Maybe<Scalars['String']>;
};

type SiteGraphqlTypegenFieldSelector = {
readonly generateOnBuild: InputMaybe<FieldSelectorEnum>;
readonly typesOutputPath: InputMaybe<FieldSelectorEnum>;
};

type SiteGraphqlTypegenFilterInput = {
readonly generateOnBuild: InputMaybe<BooleanQueryOperatorInput>;
readonly typesOutputPath: InputMaybe<StringQueryOperatorInput>;
};

type SiteGraphqlTypegenSortInput = {
readonly generateOnBuild: InputMaybe<SortOrderEnum>;
readonly typesOutputPath: InputMaybe<SortOrderEnum>;
};

type SiteGroupConnection = {
readonly distinct: ReadonlyArray<Scalars['String']>;
readonly edges: ReadonlyArray<SiteEdge>;
Expand Down Expand Up @@ -2551,14 +2519,11 @@ type SiteSortInput = {
readonly buildTime: InputMaybe<SortOrderEnum>;
readonly children: InputMaybe<NodeSortInput>;
readonly flags: InputMaybe<SiteFlagsSortInput>;
readonly graphqlTypegen: InputMaybe<SiteGraphqlTypegenSortInput>;
readonly graphqlTypegen: InputMaybe<SortOrderEnum>;
readonly host: InputMaybe<SortOrderEnum>;
readonly id: InputMaybe<SortOrderEnum>;
readonly internal: InputMaybe<InternalSortInput>;
readonly jsxRuntime: InputMaybe<SortOrderEnum>;
readonly parent: InputMaybe<NodeSortInput>;
readonly pathPrefix: InputMaybe<SortOrderEnum>;
readonly polyfill: InputMaybe<SortOrderEnum>;
readonly port: InputMaybe<SortOrderEnum>;
readonly siteMetadata: InputMaybe<SiteSiteMetadataSortInput>;
readonly trailingSlash: InputMaybe<SortOrderEnum>;
Expand Down
13 changes: 12 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9594,6 +9594,16 @@ __metadata:
languageName: node
linkType: hard

"gatsby-remark-gifs@npm:^1.2.0":
version: 1.2.0
resolution: "gatsby-remark-gifs@npm:1.2.0"
dependencies:
is-relative-url: ^3.0.0
unist-util-visit: ^2.0.3
checksum: 99e4131c7ee4bb5e8903e812a85065cafac691d52cf911d28331d6de70f4fa61d23e362ce6f73de8255f98e31bd3620df32483d2163cd1f8104aadad834736fd
languageName: node
linkType: hard

"gatsby-remark-images@npm:^7.0.0":
version: 7.0.0
resolution: "gatsby-remark-images@npm:7.0.0"
Expand Down Expand Up @@ -11590,6 +11600,7 @@ __metadata:
gatsby-plugin-sharp: ^5.0.0
gatsby-plugin-typegen: ^3.1.0
gatsby-plugin-web-font-loader: ^1.0.4
gatsby-remark-gifs: ^1.2.0
gatsby-remark-images: ^7.0.0
gatsby-source-filesystem: ^5.0.0
gatsby-transformer-sharp: ^5.0.0
Expand Down Expand Up @@ -17114,7 +17125,7 @@ __metadata:
languageName: node
linkType: hard

"unist-util-visit@npm:^2.0.0":
"unist-util-visit@npm:^2.0.0, unist-util-visit@npm:^2.0.3":
version: 2.0.3
resolution: "unist-util-visit@npm:2.0.3"
dependencies:
Expand Down

0 comments on commit acc986a

Please sign in to comment.