Software developer and power user
Published
Edited
May 8, 2021
tools = {
if (toolName) {
return fetchTools(toolName);
} else {
return placeholderResponse;
}
}
fetchTools = async (name) => {
const response = await fetch(endpoint, options(query(name)))
.then(response => response.json());
if (!response.data) {
throw response.message;
}
return response.data.tools;
}
options = (query) => {
return {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "application/json",
"x-api-key": apiKey.replaceAll("\n", "")
},
body: JSON.stringify({query})
};
}
query = (tool) => `{
tools(query: "${tool}") {
count
pageInfo {
hasPreviousPage
startCursor
hasNextPage
endCursor
}
edges {
node {
name
title
slug
canonicalUrl
id
imageUrl
ossRepo
description
websiteUrl
}
}
}
}`
placeholderResponse = ({
count: 1,
pageInfo: {
hasPreviousPage: false,
startCursor: "MQ",
hasNextPage: false,
endCursor: "MQ"
},
edges: [
{
node: {
name: "D3.js",
title: "A JavaScript visualization library for HTML and SVG",
slug: "d3", // should be; actually is: d3-js, redirecting to https://stackshare.io/companies/d3-js
canonicalUrl: "https://stackshare.io/d3", // should be; actually is: null
id: "VG9vbC0xNTMx",
imageUrl: "https://img.stackshare.io/service/1491/HgKolWB5_400x400.jpg",
ossRepo: "https://github.com/d3/d3",
description: "It is a JavaScript library for manipulating documents based on data. Emphasises on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework.",
websiteUrl: "http://d3js.org/"
}
}
]
})
text = (options) => {
const text = styledText(options);
// css override (unset !important) of the inline style shows no effect
text.querySelector("input[type='text']").setAttribute("style", null);
return text;
}
html`<style>
.tool {
align-items: center;
display: flex;
margin-top: 12px;
}
.tool[href]:hover {
text-decoration: none;
}
.tool[href]:hover .tool-name {
color: #0690fa;
}
.tool-image {
border: 1px solid #e6e6e6;
border-radius: 3px;
height: 57px;
width: 57px;
}
.tool-text {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-left: 12px;
}
.tool-name {
color: #333;
font-size: 20px;
font-weight: 600;
line-height: 1;
}
.tool-title {
color: #aeaeae;
font-size: 13px;
line-height: 1.2;
margin-top: 4px;
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
