ConsoleDev Extension

extensions/consoledev/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "root": true,
+  "env": {
+    "es2020": true,
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"]
+}

extensions/consoledev/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 120,
+  "singleQuote": false
+}

extensions/consoledev/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "consoledev",
+  "title": "Console Dev",
+  "description": "An extension to discover the best tools and beta releases for developers (via console.dev)",
+  "icon": "console-icon.png",
+  "author": "fedevitaledev",
+  "license": "MIT",
+  "commands": [
+    {
+      "name": "tools_list",
+      "title": "Tools List",
+      "subtitle": "Console - interesting developers tools",
+      "description": "Each week Console reviews the best tools for developers.",
+      "mode": "view"
+    },
+    {
+      "name": "betas_list",
+      "title": "Betas List",
+      "subtitle": "Beta Console - developer tool beta release",
+      "description": "Each week Console reviews the best tools for developers.",
+      "mode": "view"
+    },
+    {
+      "name": "interviews_list",
+      "title": "Interviews List",
+      "subtitle": "Console - Developer interviews",
+      "description": "A series of interviews with the developers behind the tools featured on console.dev",
+      "mode": "view"
+    }
+  ],
+  "dependencies": {
+    "@raycast/api": "^1.25.0",
+    "axios": "^0.23.0",
+    "date-fns": "^2.25.0",
+    "fp-ts": "^2.11.5",
+    "xml2js": "^0.4.23"
+  },
+  "devDependencies": {
+    "@types/node": "~16.10.0",
+    "@types/react": "^17.0.28",
+    "@types/xml2js": "^0.4.9",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "react-devtools": "^4.19.2",
+    "typescript": "^4.4.3"
+  },
+  "scripts": {
+    "build": "ray build -e dist",
+    "dev": "ray develop"
+  }
+}

extensions/consoledev/src/betas_list.tsx

@@ -0,0 +1,46 @@
+import { List, showToast, ToastStyle } from "@raycast/api";
+import { isLeft } from 'fp-ts/lib/Either';
+import { useEffect, useState } from "react";
+import FeedItem from './components/FeedItem';
+import { Beta, Feed } from './responseTypes';
+import { getBetasFeed } from './util';
+
+
+interface State {
+  feed: Feed<Beta> | null;
+  error?: Error
+}
+
+
+export default function BetasList() {
+  const [state, setState] = useState<State>( {
+    feed: null
+  } );
+
+  useEffect( () => {
+    async function fetchBetas() {
+      const feedEither = await getBetasFeed();
+
+      if ( isLeft( feedEither ) ) {
+        showToast( ToastStyle.Failure, 'Failed to fetch Betas.' )
+        return
+      }
+
+      setState( { feed: feedEither.right } )
+    }
+
+    fetchBetas();
+  }, [] );
+
+  return (
+    <List
+      isLoading={state.feed === null}
+      navigationTitle={state.feed?.title}
+      searchBarPlaceholder="Filter betas by name..."
+    >
+      {state.feed?.items.map( beta => (
+        <FeedItem item={beta} key={beta.link} />
+      ) )}
+    </List>
+  );
+}

extensions/consoledev/src/components/FeedItem.tsx

@@ -0,0 +1,32 @@
+import { ActionPanel, ActionPanelItem, CopyToClipboardAction, Icon, ImageMask, ListItem, OpenInBrowserAction } from '@raycast/api'
+import { FC } from 'react'
+import { FeedItemInterface, FeedType } from '../responseTypes'
+import format from 'date-fns/format'
+
+const FeedItem: FC<{ item: FeedItemInterface, type?: FeedType }> = ( { item, type } ) => (
+	<ListItem
+		id={item.link}
+		title={item.title}
+		subtitle={item.description}
+		icon={{
+			source: item.mediaContent ?? Icon.QuestionMark,
+			mask: ImageMask.RoundedRectangle,
+		}}
+		accessoryTitle={format( new Date( item.pubDate ), 'dd/MM/yyyy' )}
+		accessoryIcon={{
+			source: Icon.Calendar,
+		}}
+		actions={
+			<ActionPanel>
+				<OpenInBrowserAction url={item.link} />
+				<CopyToClipboardAction content={item.link} />
+				{process.env.NODE_ENV === 'development' && (
+					<ActionPanelItem title='Log' icon={Icon.Terminal} shortcut={{ key: '.', modifiers: ['cmd'] }} onAction={() => console.log( item )} />
+				)}
+			</ActionPanel>
+		}
+	/>
+)
+
+
+export default FeedItem

extensions/consoledev/src/interviews_list.tsx

@@ -0,0 +1,73 @@
+import { List, showToast, ToastStyle } from "@raycast/api";
+import { isLeft } from 'fp-ts/lib/Either';
+import { useEffect, useState } from "react";
+import FeedItem from './components/FeedItem';
+import { Feed, Interview } from './responseTypes';
+import { getInterviewsFeed } from './util';
+
+import * as S from 'fp-ts/string'
+import { truncate } from './lib/string'
+import { pipe } from 'fp-ts/lib/function';
+
+
+interface State {
+  feed: Feed<Interview> | null;
+  error?: Error
+}
+
+
+export default function InterviewsList() {
+  const [state, setState] = useState<State>( {
+    feed: null
+  } );
+
+  useEffect( () => {
+    async function fetchInterviews() {
+      const feedEither = await getInterviewsFeed();
+
+      if ( isLeft( feedEither ) ) {
+        showToast( ToastStyle.Failure, 'Failed to fetch Interviews.' )
+        return
+      }
+
+      setState( { feed: feedEither.right } )
+    }
+
+    fetchInterviews();
+  }, [] );
+
+  return (
+    <List
+      isLoading={state.feed === null}
+      navigationTitle={state.feed?.title}
+      searchBarPlaceholder="Filter interviews by name..."
+    >
+      {state.feed?.items.map( interview => (
+        <FeedItem
+          item={formatInterview( interview )}
+          key={interview.link}
+          type='interviews'
+        />
+      ) )}
+    </List>
+  );
+}
+
+
+const formatInterview = ( interview: Interview ): Interview => ( {
+  ...interview,
+  title: pipe(
+    interview.title,
+    S.replace( 'Interview with', '' ),
+    S.replace( '&amp;', '&' ),
+    S.trim
+  ),
+  description: pipe(
+    interview.description,
+    S.split( ',' ),
+    a => a.slice( 1 ).join( ', ' ),
+    S.trim,
+    S.replace( '&amp;', '&' ),
+    // truncate( 40 )
+  )
+} )

extensions/consoledev/src/lib/conditional.ts

@@ -0,0 +1,5 @@
+import * as O from 'fp-ts/Option'
+
+export const is = ( condition: boolean ): O.Option<null> => condition
+	? O.some( null )
+	: O.none

extensions/consoledev/src/lib/number.ts

@@ -0,0 +1,4 @@
+
+export const lt = ( b: number ) => ( a: number ): boolean => a < b
+export const gt = ( b: number ) => ( a: number ): boolean => a > b
+export const eq = ( b: number ) => ( a: number ): boolean => a === b

extensions/consoledev/src/lib/string.ts

@@ -0,0 +1,29 @@
+import * as S from 'fp-ts/string'
+import * as R from 'fp-ts/Reader'
+import * as O from 'fp-ts/Option'
+import { pipe } from 'fp-ts/function'
+
+import * as N from './number'
+import { is } from './conditional'
+
+export const length = ( str: string ): number => str.length
+export const append = ( b: string ) => ( a: string ): string => a + b
+export const truncate = ( maxLength: number ): R.Reader<string, string> => pipe(
+	R.ask<string>(),
+	R.map( str => pipe(
+			str,
+			length,
+			N.gt( maxLength ),
+			is,
+			O.fold(
+				() => str,
+				() => pipe(
+					str,
+					S.slice( 0, maxLength ),
+					S.trim,
+					append( '...' )
+				)
+			)
+		)
+	)
+)

extensions/consoledev/src/responseTypes.ts

@@ -0,0 +1,40 @@
+export interface Feed<T> {
+    items:           T[];
+    feedUrl:         string;
+    image:           Image;
+    title:           string;
+    description:     string;
+    webMaster:       string;
+    managingEditor:  string;
+    link:            string;
+    language:        string;
+}
+
+export interface Image {
+    link:  string;
+    url:   string;
+    title: string;
+}
+
+
+export interface FeedItemInterface {
+    title:                    string;
+    link:                     string;
+    pubDate:                  string;
+    "content:encoded":        string;
+    "dc:creator":             string;
+    mediaContent:             string;
+    description:              string;
+    guid:                     string;
+}
+
+
+export interface PaginationLinks {
+    self: string;
+}
+
+export type FeedType = 'betas' | 'tools' | 'interviews'
+
+export type Tool = FeedItemInterface
+export type Beta = FeedItemInterface
+export type Interview = FeedItemInterface

extensions/consoledev/src/tools_list.tsx

@@ -0,0 +1,46 @@
+import { List, showToast, ToastStyle } from "@raycast/api";
+import { isLeft } from 'fp-ts/lib/Either';
+import { useEffect, useState } from "react";
+import FeedItem from './components/FeedItem';
+import { Feed, Tool } from './responseTypes';
+import { getToolsFeed } from './util';
+
+
+interface State {
+  feed: Feed<Tool> | null;
+  error?: Error
+}
+
+export default function ToolsList() {
+  const [state, setState] = useState<State>( {
+    feed: null
+  } );
+
+  useEffect( () => {
+    async function fetchTools() {
+      const feedEither = await getToolsFeed();
+
+      if ( isLeft( feedEither ) ) {
+        console.error( feedEither.left )
+        showToast( ToastStyle.Failure, 'Failed to fetch Tools.' )
+        return
+      }
+
+      setState( { feed: feedEither.right } )
+    }
+
+    fetchTools();
+  }, [] );
+
+  return (
+    <List
+      isLoading={state.feed === null}
+      navigationTitle={state.feed?.title}
+      searchBarPlaceholder="Filter tools by name..."
+    >
+      {state.feed?.items.map( tool => (
+        <FeedItem item={tool} key={tool.link} />
+      ) )}
+    </List>
+  );
+}