Merge pull request #56 from nyomansunima/55-fix-status-blog

55 fix status blog

.prettierrc

@@ -1,4 +1,5 @@
 {
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "none"
 }

apps/studio/.eslintrc.js

@@ -1,4 +1,3 @@
 module.exports = {
-  root: true,
-  extends: ['custom', '@sanity/eslint-config-studio'],
+  extends: ['@sanity/eslint-config-studio']
 }

apps/studio/package.json

@@ -1,7 +1,6 @@
 {
   "name": "studio",
   "private": true,
-  "version": "0.0.0",
   "main": "package.json",
   "license": "UNLICENSED",
   "scripts": {
@@ -21,6 +20,7 @@
     "@sanity/ui": "^1.3.3",
     "@sanity/vision": "^3.10.3",
     "react": "^18.2.0",
+    "react-codepen-embed": "^1.1.0",
     "react-dom": "^18.2.0",
     "react-iconly": "^2.2.10",
     "react-is": "^18.2.0",
@@ -32,8 +32,6 @@
     "@sanity/eslint-config-studio": "^2.0.1",
     "@types/react": "^18.2.6",
     "@types/styled-components": "^5.1.26",
-    "eslint-config-custom": "*",
-    "tsconfig": "*",
     "typescript": "^5.0.4"
   }
 }

apps/studio/schemas/documents/blog.ts

@@ -14,12 +14,12 @@ const blogSchema = {
   groups: [
     {
       title: '💘 SEO',
-      name: 'seo',
+      name: 'seo'
     },
     {
       title: '🍀 Content',
-      name: 'content',
-    },
+      name: 'content'
+    }
   ],
   fields: [
     {
@@ -28,69 +28,48 @@ const blogSchema = {
       type: 'slug',
       description: 'Content url that showing into the blog',
       options: {
-        source: 'title',
-      },
+        source: 'title'
+      }
     },
     {
       title: 'Title',
       name: 'title',
       type: 'string',
-      description: 'Title of article',
+      description: 'The article title, also use in a seo'
     },
     {
       title: 'Thumbnail',
       name: 'thumbnail',
       type: 'image',
+      description: 'The image thumbnail and seo og image'
     },
     {
       title: 'Short Description',
       name: 'desc',
       type: 'text',
-      description: 'Short description to show as summary',
+      description: 'Short description to show as summary'
     },
     {
       title: 'Tags',
       name: 'tags',
       type: 'array',
-      of: [{ type: 'reference', to: [{ type: 'blogTag' }] }],
+      description: 'Start to relate the article using tags',
+      of: [{ type: 'reference', to: [{ type: 'blogTag' }] }]
     },
     {
       title: 'Content',
       name: 'content',
-      type: 'content',
-    },
-    {
-      title: 'Other platform integrations',
-      name: 'platform',
-      description:
-        'Integration with another blog platform automatically, Connect with another one by passing the id',
-      type: 'object',
-      fields: [
-        {
-          title: 'Dev.to',
-          name: 'devto',
-          type: 'string',
-        },
-        {
-          title: 'Hashnode',
-          name: 'hashnode',
-          type: 'string',
-        },
-        {
-          title: 'Medium',
-          name: 'medium',
-          type: 'string',
-        },
-      ],
-    },
+      type: 'blockContent',
+      description: 'Your content in'
+    }
   ],
   preview: {
     select: {
       title: 'title',
       subtitle: 'slug.current',
-      media: 'thumbnail',
-    },
-  },
+      media: 'thumbnail'
+    }
+  }
 }
 
 export default blogSchema

apps/studio/schemas/documents/explore.ts

@@ -15,23 +15,23 @@ const exploreSchema = {
     {
       title: 'Slug',
       name: 'slug',
-      type: 'string',
+      type: 'string'
     },
     {
       title: 'Title',
       name: 'title',
-      type: 'string',
+      type: 'string'
     },
     {
       title: 'Thumbnail',
       name: 'thumbnail',
-      type: 'image',
+      type: 'image'
     },
     {
       title: 'Abouts',
       name: 'abouts',
       type: 'array',
-      of: [{ type: 'text' }],
+      of: [{ type: 'text' }]
     },
     {
       title: 'Actions',
@@ -45,29 +45,29 @@ const exploreSchema = {
             {
               title: 'Label',
               name: 'label',
-              type: 'string',
+              type: 'string'
             },
             {
               title: 'URL',
               name: 'url',
-              type: 'url',
-            },
-          ],
-        },
-      ],
+              type: 'url'
+            }
+          ]
+        }
+      ]
     },
     {
       title: 'Stacks',
       name: 'stacks',
       type: 'array',
-      of: [{ type: 'reference', to: [{ type: 'tool' }] }],
+      of: [{ type: 'reference', to: [{ type: 'tool' }] }]
     },
     {
       title: 'Content',
       name: 'content',
-      type: 'content',
-    },
-  ],
+      type: 'blockContent'
+    }
+  ]
 }
 
 export default exploreSchema

apps/studio/schemas/documents/index.ts

@@ -29,11 +29,11 @@ export default [
   faqSchema,
   inspirationListSchema,
   inspirationSourceSchema,
-  projectSchema,
+  // projectSchema,
   repoSchema,
   serviceSchema,
   socialSchema,
   storySchema,
   timelineSchema,
-  toolSchema,
+  toolSchema
 ]

apps/studio/schemas/objects/codepen.tsx

@@ -0,0 +1,57 @@
+import React, { FunctionComponent } from 'react'
+import Codepen from 'react-codepen-embed'
+import { defineType, PreviewProps } from 'sanity'
+
+/**
+ * ## CodePenPreview
+ *
+ * preview the codepen url into a working pen
+ *
+ * @returns JSX.Element
+ */
+const CodePenPreview: FunctionComponent<PreviewProps> = (
+  props
+): JSX.Element => {
+  // const { url } = value
+  // if (!url || url == '') {
+  //   return <div>Please add url for your codepen</div>
+  // }
+  // // split the url and use as another
+  // // properties
+  // const splittedUrl = (url as string).split('/')
+  // const [, , , user, , hash] = splittedUrl
+  // return <div>Hello world</div>
+  // return <Codepen user={user} hash={hash} />
+  // return <p>{JSON.stringify(props)}</p>
+  return <p></p>
+}
+
+/**
+ * # codepenSchema
+ *
+ * use to embed the codepen code
+ * and display in the blog
+ */
+const codepenSchema = defineType({
+  title: 'Embed Codepen',
+  name: 'codepen',
+  type: 'object',
+  fields: [
+    {
+      title: 'URL',
+      description: '🧑🏿‍💻 Your codepen embed url',
+      name: 'url',
+      type: 'url'
+    }
+  ],
+  preview: {
+    select: {
+      url: 'url'
+    }
+  },
+  components: {
+    // preview: CodePenPreview
+  }
+})
+
+export default codepenSchema

apps/studio/schemas/objects/content.ts

@@ -1,3 +1,5 @@
+import { Image, Send, TickSquare } from 'react-iconly'
+
 /**
  * # contentSchema
  *
@@ -6,22 +8,43 @@
  */
 const contentSchema = {
   title: 'Content',
-  name: 'content',
+  name: 'blockContent',
   type: 'array',
   of: [
     {
       type: 'block',
+      of: [
+        {
+          name: 'inlineAudio',
+          type: 'file',
+          title: 'Add Audio',
+          options: {
+            accept: 'audio/*'
+          }
+        }
+      ]
     },
     {
+      title: 'Insert Image',
+      icon: Image,
       type: 'image',
+      options: {
+        hotspot: true
+      }
     },
     {
-      title: '🧑🏿‍💻 Code',
+      title: 'Insert Code',
+      icon: TickSquare,
       type: 'code',
       options: {
-        withFilename: true,
-      },
+        withFilename: true
+      }
     },
-  ],
+    {
+      title: 'Embed Codepen',
+      icon: Send,
+      type: 'codepen'
+    }
+  ]
 }
 export default contentSchema

apps/studio/schemas/objects/index.ts

@@ -1,3 +1,4 @@
+import codepenSchema from './codepen'
 import contentSchema from './content'
 import projectAreaSchema from './project/area'
 import projectClientSchema from './project/client'
@@ -26,4 +27,5 @@ export default [
   servicePurposeSchema,
   serviceResultSchema,
   serviceToolSchema,
+  codepenSchema
 ]