Validate resources

.github/scripts/getResourcesOg.js

@@ -1,6 +1,5 @@
 const ogs = require('open-graph-scraper')
 const fs = require('fs')
-const path = require('path')
 
 const resourcesPath = './components/ResourceHub/company-resources.json'
 const communityResourcesPath =
@@ -19,37 +18,37 @@ const updateResourceOg = async () => {
   )
 
   const updatedResources = await Promise.all(
-    resources
-      .filter(r => r.type !== 'video')
-      .map(async resource => {
-        const og = await getResourceOg(resource.url)
-        return {
-          ...resource,
-          og: {
-            title: og.ogTitle,
-            description: og.ogDescription,
-            image: og.ogImage[0]?.url
-          }
-        }
-      })
+    resources.map(async resource => {
+      const og = await getResourceOg(resource.url)
+      const description = resource.description ?? og.ogDescription
+      return {
+        name: resource.name ?? og.ogTitle,
+        url: resource.url,
+        type: resource.type,
+        date: resource.date,
+        description: description.length > 197 ? description.slice(0, 197)  + '...' : description,
+        tags: resource.tags,
+        image: og.ogImage[0]?.url
+      }
+    })
   )
 
   const updatedCommunityResources = await Promise.all(
-    communityResources
-      .filter(r => r.type !== 'video')
-      .map(async resource => {
-        const og = await getResourceOg(resource.url)
-        return {
-          ...resource,
-          og: {
-            title: og.ogTitle,
-            description: og.ogDescription,
-            ...(!(parseInt(og.ogImage[0].height) < 60) && {
-              image: og.ogImage[0].url
-            })
-          }
-        }
-      })
+    communityResources.map(async resource => {
+      const og = await getResourceOg(resource.url)
+      const description = resource.description ?? og.ogDescription
+      return {
+        name: resource.name ?? og.ogTitle,
+        url: resource.url,
+        type: resource.type,
+        date: resource.date,
+        description: description.length > 197 ? description.slice(0, 197)  + '...' : description,
+        tags: resource.tags,
+        ...(!(parseInt(og.ogImage[0].height) < 60) && {
+          image: og.ogImage[0].url
+        })
+      }
+    })
   )
 
   fs.writeFileSync(resourcesPath, JSON.stringify(updatedResources, null, 2))

.github/scripts/validateResources.js

@@ -0,0 +1,58 @@
+const fs = require('fs')
+
+const resourcesPath = './components/ResourceHub/company-resources.json'
+const communityResourcesPath =
+  './components/ResourceHub/community-resources.json'
+
+const validateResource = (resource, index, resources) => {
+  if (resources.findIndex(r => r.url === resource.url) !== index) {
+    console.log(`Duplicate resource`)
+    return false
+  }
+  if (!resource.name) {
+    console.log(`Resource name is missing`)
+    return false
+  }
+  if (!resource.type) {
+    console.log(`Resource type is missing`)
+    return false
+  }
+  if (!resource.date) {
+    console.log(`Resource date is missing`)
+    return false
+  }
+  if (!resource.description) {
+    console.log(`Resource description is missing`)
+    return false
+  }
+  if (resource.description.length > 200) {
+    console.log(`Resource description is too long`)
+    return false
+  }
+  if (!resource.tags || !resource.tags.length) {
+    console.log(errorMessage + `Resource tags are missing`)
+    return false
+  }
+  if (
+    resource.url.includes('youtube') &&
+    (!resource.url.startsWith('https://www.youtube.com/watch?v=') ||
+      resource.url.length !== 43)
+  ) {
+    console.log(`Invalid YouTube URL`)
+    return false
+  }
+  return true
+}
+
+const validateResources = () => {
+  const resources = [
+    ...JSON.parse(fs.readFileSync(resourcesPath, 'utf8')),
+    ...JSON.parse(fs.readFileSync(communityResourcesPath, 'utf8'))
+  ]
+
+  if (resources.map(validateResource).some(valid => !valid)) {
+    process.exit(1)
+  }
+}
+
+validateResources()

.github/workflows/generate-supported-networks.yml

@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Use Node.js 20.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: '20.x'
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v3
         with:
           version: 8
       - name: Install dependencies

CONTRIBUTING.md

@@ -8,6 +8,23 @@ We use the [Microsoft Style Guide](https://learn.microsoft.com/en-us/style-guide
 
 Please open an [issue](https://github.com/safe-global/safe-docs/issues/new?assignees=&labels=resource-hub&projects=&template=resource-hub-submission.yml&title=%5BResource+Hub%5D+) to submit a resource to our Resource Hub.
 
+### Adding Resources to Resource Hub
+
+[For the Safe team] To add a new resource to the Resource Hub, follow these steps:
+- Add the new entry (`type`, `url`, `tags`, and `date`) to the [community-resources.json](./components/ResourceHub/community-resources.json) or [company-resources.json](./components/ResourceHub/company-resources.json) file.
+    ```
+    {
+        "url": "https://example.com",
+        "type": "Blog Post",
+        "date": "2023-10-09",
+        "tags": [
+        "Tutorial"
+        ]
+    }
+    ```
+- Run `pnpm get-resources-og` to fetch open graph metadata for the new resource automatically.
+- Copy edit the automatically generated copy for `name` and `description`.
+
 ## Using Vale
 
 Install the [Vale CLI](https://vale.sh/docs/vale-cli/installation/) and run the following command: 

components/ResourceHub/Card.tsx

@@ -46,15 +46,15 @@ export const ProjectCard = (resource: KnowledgeResource): JSX.Element => {
         <div style={{ width: '100%' }}>
           {resource.type === 'Video' ? (
             <YouTubeEmbed embedId={resource.url.slice(-11)} />
-          ) : resource?.og?.image == null ? (
+          ) : resource?.image == null ? (
             resource.type === 'Blog Post' ? (
               <Blog />
             ) : (
               <Podcast />
             )
           ) : (
             <Box minHeight='100px'>
-              <img alt='resource-img' src={resource.og.image} />
+              <img alt='resource-img' src={resource.image} />
             </Box>
           )}
 
@@ -80,7 +80,7 @@ export const ProjectCard = (resource: KnowledgeResource): JSX.Element => {
                 color='text.secondary'
                 className={css.description}
               >
-                {resource.abstract}
+                {resource.description}
               </Typography>
             </>
           )}

components/ResourceHub/Resources.tsx

@@ -47,13 +47,9 @@ export interface KnowledgeResource {
   type: string
   date: string
   origin: string
-  abstract?: string
+  description: string
   tags: string[]
-  og?: {
-    title?: string
-    description?: string
-    image?: string
-  }
+  image?: string
 }
 
 const getUniqueStrings = (entries: string[]): string[] => {