update: use tldr value from API

gatsby-node.ts

@@ -48,6 +48,7 @@ export const createSchemaCustomization: GatsbyNode['createSchemaCustomization']
     type Articles implements Node @dontInfer {
       slug: String,
       title: String,
+      tldr: String,
       body: String,
       published_at: String,
       updated_at: String,
@@ -120,6 +121,7 @@ async function registerArticle(
     id: article.slug,
     slug: article.slug,
     title: article.title,
+    tldr: article.tldr,
     body: article.body,
     tags: article.tags,
     published_at: article.publishedAt,
@@ -254,6 +256,7 @@ export const createPages: GatsbyNode['createPages'] = async ({graphql, actions})
           nodes {
             slug
             title
+            tldr
             tags {
               slug
               name

graphql/documents.graphql

@@ -8,6 +8,7 @@ query all {
   allPublicArticles {
     slug
     title
+    tldr
     publishedAt
     updatedAt
     tags {

graphql/schema.graphql

@@ -1,31 +1,27 @@
-type Sitedata {
-  profile: String!
-  shortProfile: String!
-}
-
-type Tag {
-  slug: String!
-  name: String!
-}
-
-type Mutation {
-  newTag(slug: String!, title: String!): String!
-  newArticle(slug: String!, title: String!): String!
-  updateArticle(slug: String!, title: String!, tags: [String!]!, isFavorite: Boolean!, body: String!): String!
-  publishArticle(slug: String!): String!
+schema {
+  query: Query
+  mutation: Mutation
 }
 
 type Article {
   slug: String!
   body: String!
   title: String!
+  tldr: String!
   tags: [Tag!]!
   isFavorite: Boolean!
   publishedAt: String!
   updatedAt: String!
   isPublished: Boolean!
 }
 
+type Mutation {
+  newTag(slug: String!, title: String!): String!
+  newArticle(slug: String!, title: String!): String!
+  updateArticle(slug: String!, title: String!, tldr: String!, tags: [String!]!, isFavorite: Boolean!, body: String!): String!
+  publishArticle(slug: String!): String!
+}
+
 type Query {
   allPublicArticles: [Article!]!
   allArticles: [Article!]!
@@ -34,7 +30,12 @@ type Query {
   sitedata: Sitedata!
 }
 
-schema {
-  query: Query
-  mutation: Mutation
+type Sitedata {
+  profile: String!
+  shortProfile: String!
+}
+
+type Tag {
+  slug: String!
+  name: String!
 }

package.json

@@ -62,7 +62,6 @@
     "remark-gfm": "^4.0.0",
     "remark-slug": "^7.0.1",
     "remark-toc": "^9.0.0",
-    "remove-markdown": "^0.5.0",
     "toml": "^3.0.0",
     "typescript": "^5.4.5",
     "unist-util-visit": "^5.0.0"

src/components/feature/Article/InnerEmbedCard/InnerEmbedCard.tsx

@@ -7,7 +7,6 @@
 import * as style from './InnerEmbedCard.css';
 import {Link, graphql, useStaticQuery} from 'gatsby';
 import React from 'react';
-import RemoveMD from 'remove-markdown';
 import Article from '@mytypes/Article';
 
 interface Props {
@@ -27,6 +26,7 @@ export const InnerEmbedCard = (props: Props): React.ReactElement => {
         nodes {
           slug
           title
+          tldr
           body
           tags {
             slug
@@ -49,9 +49,7 @@ export const InnerEmbedCard = (props: Props): React.ReactElement => {
     <Link className={style.container} to={`/blog/article/${props.slug}`}>
       <span className={style.title}>{data.title}</span>
       <span className={style.url}>{`watasuke.net - ${props.slug}`}</span>
-      <span className={style.description}>
-        {RemoveMD(data.body.slice(0, 120) + (data.body.length > 140 ? ' ...' : ''))}
-      </span>
+      <span className={style.description}>{data.tldr}</span>
     </Link>
   );
 };

src/components/feature/ArticleList/ArticleCard/ArticleCard.tsx

@@ -7,7 +7,6 @@
 import * as style from './ArticleCard.css';
 import {Link} from 'gatsby';
 import React from 'react';
-import RemoveMD from 'remove-markdown';
 import {TagContainer} from '@/feature/Tag';
 import Article from '@mytypes/Article';
 
@@ -31,12 +30,7 @@ export const ArticleCard = ({article}: Props): React.ReactElement => {
       </div>
       <div className={style.text}>
         <h2 className={style.title}>{article.title}</h2>
-        <p className={style.description}>
-          {
-            // 140字に制限して内容を表示、超過分は...で
-            RemoveMD(article.body.slice(0, 140) + (article.body.length > 140 ? ' ...' : ''))
-          }
-        </p>
+        <p className={style.description}>{article.tldr}</p>
       </div>
     </Link>
   );

src/pages/blog.tsx

@@ -54,6 +54,7 @@ export const query = graphql`
       nodes {
         slug
         title
+        tldr
         body
         tags {
           slug

src/pages/blog/article.tsx

@@ -46,6 +46,7 @@ export const query = graphql`
       nodes {
         slug
         title
+        tldr
         body
         tags {
           slug

src/template/Article.tsx

@@ -8,7 +8,6 @@ import '@/common/main.css';
 import * as style from '@/feature/Article/Article.css';
 import {Seo, Layout, Breadcrumb} from '@/common';
 import React from 'react';
-import RemoveMD from 'remove-markdown';
 import {BlogContent, ProfileCard, TocRight} from '@/feature/Article';
 import {AllTagList} from '@/feature/Tag';
 import {GenBreadcrumb} from '@utils/Breadcrumb';
@@ -53,7 +52,7 @@ export default function Articale(prop: Props): React.ReactElement {
 export const Head = ({pageContext}: Props): React.ReactElement => (
   <Seo
     title={pageContext.title}
-    desc={RemoveMD(pageContext.body)}
+    desc={pageContext.tldr}
     url={'/blog/article/' + pageContext.slug}
     breadcrumb_list={breadcrumb_list(pageContext.title)}
   />

src/template/Tag.tsx

@@ -46,6 +46,7 @@ export const query = graphql`
       nodes {
         slug
         title
+        tldr
         body
         tags {
           name

src/types/Article.d.ts

@@ -7,6 +7,7 @@
 export default interface Article {
   slug: string;
   title: string;
+  tldr: string;
   body: string;
   tags: {
     slug: string;

src/types/gatsby-types.d.ts

@@ -46,6 +46,7 @@ type Articles = Node & {
   readonly slug: Maybe<Scalars['String']>;
   readonly tags: Maybe<ReadonlyArray<Maybe<Tags>>>;
   readonly title: Maybe<Scalars['String']>;
+  readonly tldr: Maybe<Scalars['String']>;
   readonly updated_at: Maybe<Scalars['String']>;
 };
 
@@ -104,6 +105,7 @@ type ArticlesFieldSelector = {
   readonly slug: InputMaybe<FieldSelectorEnum>;
   readonly tags: InputMaybe<TagsFieldSelector>;
   readonly title: InputMaybe<FieldSelectorEnum>;
+  readonly tldr: InputMaybe<FieldSelectorEnum>;
   readonly updated_at: InputMaybe<FieldSelectorEnum>;
 };
 
@@ -117,6 +119,7 @@ type ArticlesFilterInput = {
   readonly slug: InputMaybe<StringQueryOperatorInput>;
   readonly tags: InputMaybe<TagsFilterListInput>;
   readonly title: InputMaybe<StringQueryOperatorInput>;
+  readonly tldr: InputMaybe<StringQueryOperatorInput>;
   readonly updated_at: InputMaybe<StringQueryOperatorInput>;
 };
 
@@ -171,6 +174,7 @@ type ArticlesSortInput = {
   readonly slug: InputMaybe<SortOrderEnum>;
   readonly tags: InputMaybe<TagsSortInput>;
   readonly title: InputMaybe<SortOrderEnum>;
+  readonly tldr: InputMaybe<SortOrderEnum>;
   readonly updated_at: InputMaybe<SortOrderEnum>;
 };
 
@@ -1849,6 +1853,7 @@ type Query_articlesArgs = {
   slug: InputMaybe<StringQueryOperatorInput>;
   tags: InputMaybe<TagsFilterListInput>;
   title: InputMaybe<StringQueryOperatorInput>;
+  tldr: InputMaybe<StringQueryOperatorInput>;
   updated_at: InputMaybe<StringQueryOperatorInput>;
 };
 
@@ -3478,7 +3483,7 @@ type GatsbyImageSharpFluidLimitPresentationSizeFragment = { readonly maxHeight:
 type Unnamed_1_QueryVariables = Exact<{ [key: string]: never; }>;
 
 
-type Unnamed_1_Query = { readonly allArticles: { readonly nodes: ReadonlyArray<{ readonly slug: string | null, readonly title: string | null, readonly published_at: string | null, readonly updated_at: string | null, readonly body: string | null, readonly tags: ReadonlyArray<{ readonly slug: string | null, readonly name: string | null } | null> | null }> } };
+type Unnamed_1_Query = { readonly allArticles: { readonly nodes: ReadonlyArray<{ readonly slug: string | null, readonly title: string | null, readonly tldr: string | null, readonly published_at: string | null, readonly updated_at: string | null, readonly body: string | null, readonly tags: ReadonlyArray<{ readonly slug: string | null, readonly name: string | null } | null> | null }> } };
 
 type Unnamed_2_QueryVariables = Exact<{ [key: string]: never; }>;
 

src/utils/graphql.ts

@@ -26,6 +26,7 @@ export type Article = {
   slug: Scalars['String']['output'];
   tags: Array<Tag>;
   title: Scalars['String']['output'];
+  tldr: Scalars['String']['output'];
   updatedAt: Scalars['String']['output'];
 };
 
@@ -61,6 +62,7 @@ export type MutationUpdateArticleArgs = {
   slug: Scalars['String']['input'];
   tags: Array<Scalars['String']['input']>;
   title: Scalars['String']['input'];
+  tldr: Scalars['String']['input'];
 };
 
 export type Query = {
@@ -92,14 +94,15 @@ export type Tag = {
 export type AllQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type AllQuery = { __typename?: 'Query', allPublicArticles: Array<{ __typename?: 'Article', slug: string, title: string, publishedAt: string, updatedAt: string, body: string, tags: Array<{ __typename?: 'Tag', slug: string, name: string }> }>, allTags: Array<{ __typename?: 'Tag', slug: string, name: string }>, sitedata: { __typename?: 'Sitedata', profile: string, shortProfile: string } };
+export type AllQuery = { __typename?: 'Query', allPublicArticles: Array<{ __typename?: 'Article', slug: string, title: string, tldr: string, publishedAt: string, updatedAt: string, body: string, tags: Array<{ __typename?: 'Tag', slug: string, name: string }> }>, allTags: Array<{ __typename?: 'Tag', slug: string, name: string }>, sitedata: { __typename?: 'Sitedata', profile: string, shortProfile: string } };
 
 
 export const AllDocument = gql`
     query all {
   allPublicArticles {
     slug
     title
+    tldr
     publishedAt
     updatedAt
     tags {