diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..ee8e76b
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+ "plugins": ["@trivago/prettier-plugin-sort-imports"],
+ "printWidth": 80,
+ "tabWidth": 4,
+ "importOrder": ["^react", "^gatsby", "^[^./]", "^[./]"],
+ "importOrderSeparation": true,
+ "importOrderSortSpecifiers": true
+}
diff --git a/gatsby-node.js b/gatsby-node.js
index c44e6e6..1e4c534 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -18,7 +18,7 @@ const read = (p) => fs.readFileSync(path.join(__dirname, p), 'utf8')
* They serve as single source of truth, can be added/edited via CMS,
* and are referenced by other markdown files.
*/
-const DATA_ONLY_PAGES = ['software', 'dataset', 'allenite', 'program']
+const DATA_ONLY_PAGES = ["software", "dataset", "allenite", "program"];
exports.createSchemaCustomization = ({ actions, schema }) => {
const { createTypes } = actions
@@ -60,57 +60,55 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
* functions where possible
*/
exports.createResolvers = ({ createResolvers }) => {
- createResolvers({
- MarkdownRemark: {
- fields: {
- resolve: (source) => ({
- slug: source.fields?.slug || '/',
- }),
- },
- },
- MarkdownRemark: {
- fields: {
- resolve: (source) => ({
- slug: source.fields?.slug || '/',
- }),
- },
- },
- Frontmatter: {
- description: {
- resolve: (source) =>
- stringWithDefault(source.description, 'No description provided.'),
- },
- title: {
- resolve: (source) =>
- stringWithDefault(source.title, 'No title provided.'),
- },
- materialsAndMethods: {
- resolve: (source) => {
- const raw = source.materialsAndMethods
- const current = {
- dataset: null,
- cellLines: [],
- protocols: [],
- software: [],
- }
-
- if (!raw || typeof raw !== 'object') {
- return current
- }
-
- const resolvedDatasetSlug = resolveSlug(raw.dataset, DATASET_PATH)
- current.dataset = resolvedDatasetSlug
- current.cellLines = resolveToArray(raw.cellLines)
- current.protocols = resolveToArray(raw.protocols)
- current.software = resolveSoftwareTools(raw.software)
- current.software = resolveSoftwareTools(raw.software)
-
- return current
+ createResolvers({
+ MarkdownRemark: {
+ fields: {
+ resolve: (source) => ({
+ slug: source.fields?.slug || "/",
+ }),
+ },
},
- },
- },
- })
-}
+ Frontmatter: {
+ description: {
+ resolve: (source) =>
+ stringWithDefault(
+ source.description,
+ "No description provided.",
+ ),
+ },
+ title: {
+ resolve: (source) =>
+ stringWithDefault(source.title, "No title provided."),
+ },
+ materialsAndMethods: {
+ resolve: (source) => {
+ const raw = source.materialsAndMethods;
+ const current = {
+ dataset: null,
+ cellLines: [],
+ protocols: [],
+ software: [],
+ };
+
+ if (!raw || typeof raw !== "object") {
+ return current;
+ }
+
+ const resolvedDatasetSlug = resolveSlug(
+ raw.dataset,
+ DATASET_PATH,
+ );
+ current.dataset = resolvedDatasetSlug;
+ current.cellLines = resolveToArray(raw.cellLines);
+ current.protocols = resolveToArray(raw.protocols);
+ current.software = resolveSoftwareTools(raw.software);
+
+ return current;
+ },
+ },
+ },
+ });
+};
/**
* Create pages for markdown files based on their templateKey frontmatter.
@@ -161,16 +159,18 @@ exports.createPages = ({ actions, graphql }) => {
return
}
- createPage({
- path: edge.node.fields.slug,
- tags: edge.node.frontmatter.tags,
- component: path.resolve(`src/templates/${String(templateKey)}.tsx`),
- // additional data can be passed via context
- context: {
- id,
- },
- })
- })
+ createPage({
+ path: edge.node.fields.slug,
+ tags: edge.node.frontmatter.tags,
+ component: path.resolve(
+ `src/templates/${String(templateKey)}.tsx`,
+ ),
+ // additional data can be passed via context
+ context: {
+ id,
+ },
+ });
+ });
// Tag pages:
let tags = []
diff --git a/gatsbyutils/constants.js b/gatsbyutils/constants.js
index b29e5d7..c1d8290 100644
--- a/gatsbyutils/constants.js
+++ b/gatsbyutils/constants.js
@@ -4,4 +4,4 @@ const SOFTWARE_PATH = `software`;
module.exports = {
DATASET_PATH,
SOFTWARE_PATH,
-};
\ No newline at end of file
+};
diff --git a/gatsbyutils/gatsby-resolver-utils.js b/gatsbyutils/gatsby-resolver-utils.js
index 440feb0..b8f8434 100644
--- a/gatsbyutils/gatsby-resolver-utils.js
+++ b/gatsbyutils/gatsby-resolver-utils.js
@@ -45,7 +45,7 @@ const resolveSoftwareTools = (rawSoftware) => {
softwareTool: resolveSlug(item.softwareTool, SOFTWARE_PATH),
customDescription: stringWithDefault(
item.customDescription,
- null
+ null,
),
};
}
@@ -66,7 +66,7 @@ const resolveSlug = (id, directory) => {
if (!id) return null;
const slugPart = slugify(id, { lower: true, strict: true }).replace(
/^\/+|\/+$/g,
- ""
+ "",
); // Slugify and remove leading/trailing slashes
return `/${directory}/${slugPart}/`;
};
@@ -76,4 +76,4 @@ module.exports = {
resolveToArray,
resolveSlug,
resolveSoftwareTools,
-};
\ No newline at end of file
+};
diff --git a/gatsbyutils/test/gatsby-resolver-utils.test.js b/gatsbyutils/test/gatsby-resolver-utils.test.js
index 12a7640..d725571 100644
--- a/gatsbyutils/test/gatsby-resolver-utils.test.js
+++ b/gatsbyutils/test/gatsby-resolver-utils.test.js
@@ -1,109 +1,112 @@
-import { describe, it, expect } from 'vitest';
-import { resolveSlug, resolveSoftwareTools } from '../gatsby-resolver-utils';
-import { DATASET_PATH, SOFTWARE_PATH } from '../constants';
+import { describe, expect, it } from "vitest";
-describe('resolveSlug', () => {
- it('should return null when id is falsy', () => {
- expect(resolveSlug(null, 'software')).toBe(null);
- expect(resolveSlug(undefined, 'software')).toBe(null);
- expect(resolveSlug('', 'software')).toBe(null);
+import { DATASET_PATH, SOFTWARE_PATH } from "../constants";
+import { resolveSlug, resolveSoftwareTools } from "../gatsby-resolver-utils";
+
+describe("resolveSlug", () => {
+ it("should return null when id is falsy", () => {
+ expect(resolveSlug(null, "software")).toBe(null);
+ expect(resolveSlug(undefined, "software")).toBe(null);
+ expect(resolveSlug("", "software")).toBe(null);
});
- it('should build a slug from id and directory', () => {
+ it("should build a slug from id and directory", () => {
expect(resolveSlug("released-emt-dataset", DATASET_PATH)).toBe(
- "/dataset/released-emt-dataset/"
+ "/dataset/released-emt-dataset/",
);
});
- it('should slugify the id to lowercase', () => {
+ it("should slugify the id to lowercase", () => {
expect(resolveSlug("UPPERCASE", DATASET_PATH)).toBe(
- "/dataset/uppercase/"
+ "/dataset/uppercase/",
);
});
- it('should handle special characters in id', () => {
+ it("should handle special characters in id", () => {
expect(resolveSlug("Tool & Library", SOFTWARE_PATH)).toBe(
- "/software/tool-and-library/"
+ "/software/tool-and-library/",
);
expect(resolveSlug("Some/Path/Name", SOFTWARE_PATH)).toBe(
- "/software/somepathname/"
+ "/software/somepathname/",
);
});
- it('should handle ids with leading/trailing spaces', () => {
- expect(resolveSlug(' trimmed ', 'software')).toBe('/software/trimmed/');
+ it("should handle ids with leading/trailing spaces", () => {
+ expect(resolveSlug(" trimmed ", "software")).toBe(
+ "/software/trimmed/",
+ );
});
});
-describe('resolveSoftwareTools', () => {
- it('should return empty array for non-array inputs', () => {
+describe("resolveSoftwareTools", () => {
+ it("should return empty array for non-array inputs", () => {
expect(resolveSoftwareTools(null)).toEqual([]);
expect(resolveSoftwareTools(undefined)).toEqual([]);
- expect(resolveSoftwareTools('string')).toEqual([]);
+ expect(resolveSoftwareTools("string")).toEqual([]);
expect(resolveSoftwareTools({})).toEqual([]);
expect(resolveSoftwareTools(123)).toEqual([]);
});
- it('should return empty array for empty array', () => {
+ it("should return empty array for empty array", () => {
expect(resolveSoftwareTools([])).toEqual([]);
});
- it('should filter out invalid items', () => {
- const input = [null, undefined, 'string', {}, { other: 'prop' }];
+ it("should filter out invalid items", () => {
+ const input = [null, undefined, "string", {}, { other: "prop" }];
expect(resolveSoftwareTools(input)).toEqual([]);
});
- it('should transform valid items with softwareTool', () => {
- const input = [{ softwareTool: 'Simularium' }];
+ it("should transform valid items with softwareTool", () => {
+ const input = [{ softwareTool: "Simularium" }];
expect(resolveSoftwareTools(input)).toEqual([
{
- softwareTool: '/software/simularium/',
+ softwareTool: "/software/simularium/",
customDescription: null,
},
]);
});
- it('should preserve customDescription when provided', () => {
+ it("should preserve customDescription when provided", () => {
const input = [
{
- softwareTool: 'Simularium',
- customDescription: 'Custom description here',
+ softwareTool: "Simularium",
+ customDescription: "Custom description here",
},
];
expect(resolveSoftwareTools(input)).toEqual([
{
- softwareTool: '/software/simularium/',
- customDescription: 'Custom description here',
+ softwareTool: "/software/simularium/",
+ customDescription: "Custom description here",
},
]);
});
- it('should return null for empty customDescription', () => {
- const input = [{ softwareTool: 'Simularium', customDescription: '' }];
+ it("should return null for empty customDescription", () => {
+ const input = [{ softwareTool: "Simularium", customDescription: "" }];
expect(resolveSoftwareTools(input)).toEqual([
{
- softwareTool: '/software/simularium/',
+ softwareTool: "/software/simularium/",
customDescription: null,
},
]);
});
- it('should handle mixed valid and invalid items', () => {
+ it("should handle mixed valid and invalid items", () => {
const input = [
null,
- { softwareTool: 'Simularium' },
- { other: 'invalid' },
- { softwareTool: 'TFE', customDescription: 'Time explorer' },
+ { softwareTool: "Simularium" },
+ { other: "invalid" },
+ { softwareTool: "TFE", customDescription: "Time explorer" },
];
expect(resolveSoftwareTools(input)).toEqual([
{
- softwareTool: '/software/simularium/',
+ softwareTool: "/software/simularium/",
customDescription: null,
},
{
- softwareTool: '/software/tfe/',
- customDescription: 'Time explorer',
+ softwareTool: "/software/tfe/",
+ customDescription: "Time explorer",
},
]);
});
-});
\ No newline at end of file
+});
diff --git a/package.json b/package.json
index df7204c..ab224ed 100644
--- a/package.json
+++ b/package.json
@@ -48,11 +48,13 @@
"build": "npm run clean && gatsby build",
"develop": "npm run clean && gatsby develop",
"serve": "gatsby serve",
- "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
+ "format": "prettier \"{src,gatsbyutils,netlify}/**/*.{ts,tsx,js,jsx}\" gatsby-*.js --write",
+ "formatCheck": "prettier \"{src,gatsbyutils,netlify}/**/*.{ts,tsx,js,jsx}\" gatsby-*.js --check",
"test": "vitest",
"dev": "npx concurrently \"npx netlify-cms-proxy-server\" \"npm start -- --progress\""
},
"devDependencies": {
+ "@trivago/prettier-plugin-sort-imports": "^6.0.2",
"@types/antd": "^1.0.0",
"@types/node": "^20.11.20",
"@types/react": "^18.2.59",
@@ -62,7 +64,7 @@
"gatsby-plugin-postcss": "^6.13.1",
"netlify-cli": "^17.15.7",
"postcss": "^8.4.35",
- "prettier": "^2.0.5",
+ "prettier": "^3.8.1",
"typescript": "^5.3.3",
"typescript-plugin-css-modules": "^5.1.0"
},
diff --git a/src/cms/preview-templates/AboutPagePreview.js b/src/cms/preview-templates/AboutPagePreview.js
index 413a6da..061ec90 100644
--- a/src/cms/preview-templates/AboutPagePreview.js
+++ b/src/cms/preview-templates/AboutPagePreview.js
@@ -1,19 +1,21 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { AboutPageTemplate } from '../../templates/about-page'
+import React from "react";
+
+import PropTypes from "prop-types";
+
+import { AboutPageTemplate } from "../../templates/about-page";
const AboutPagePreview = ({ entry, widgetFor }) => (
-
-)
+
+);
AboutPagePreview.propTypes = {
- entry: PropTypes.shape({
- getIn: PropTypes.func,
- }),
- widgetFor: PropTypes.func,
-}
+ entry: PropTypes.shape({
+ getIn: PropTypes.func,
+ }),
+ widgetFor: PropTypes.func,
+};
-export default AboutPagePreview
+export default AboutPagePreview;
diff --git a/src/cms/preview-templates/IdeaPostPreview.js b/src/cms/preview-templates/IdeaPostPreview.js
index d199a9c..8bcc83f 100644
--- a/src/cms/preview-templates/IdeaPostPreview.js
+++ b/src/cms/preview-templates/IdeaPostPreview.js
@@ -1,6 +1,8 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { IdeaPostTemplate } from '../../templates/idea-post'
+import React from "react";
+
+import PropTypes from "prop-types";
+
+import { IdeaPostTemplate } from "../../templates/idea-post";
const IdeaPostPreview = ({ entry, widgetFor }) => {
const tags = entry.getIn(['data', 'tags'])
diff --git a/src/cms/preview-templates/IndexPagePreview.js b/src/cms/preview-templates/IndexPagePreview.js
index 62211a3..eff66fc 100644
--- a/src/cms/preview-templates/IndexPagePreview.js
+++ b/src/cms/preview-templates/IndexPagePreview.js
@@ -1,32 +1,34 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { IndexPageTemplate } from '../../templates/index-page'
+import React from "react";
+
+import PropTypes from "prop-types";
+
+import { IndexPageTemplate } from "../../templates/index-page";
const IndexPagePreview = ({ entry, getAsset }) => {
- const data = entry.getIn(['data']).toJS()
+ const data = entry.getIn(["data"]).toJS();
- if (data) {
- return (
-
- )
- } else {
- return Loading...
- }
-}
+ if (data) {
+ return (
+
+ );
+ } else {
+ return Loading...
;
+ }
+};
IndexPagePreview.propTypes = {
- entry: PropTypes.shape({
- getIn: PropTypes.func,
- }),
- getAsset: PropTypes.func,
-}
+ entry: PropTypes.shape({
+ getIn: PropTypes.func,
+ }),
+ getAsset: PropTypes.func,
+};
-export default IndexPagePreview
+export default IndexPagePreview;
diff --git a/src/components/FullWidthImage.tsx b/src/components/FullWidthImage.tsx
index 15de1fe..50de2eb 100644
--- a/src/components/FullWidthImage.tsx
+++ b/src/components/FullWidthImage.tsx
@@ -1,4 +1,5 @@
import React from "react";
+
import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image";
interface FullWidthImageProps {
diff --git a/src/components/IconText.tsx b/src/components/IconText.tsx
index 53bee6b..3a07850 100644
--- a/src/components/IconText.tsx
+++ b/src/components/IconText.tsx
@@ -1,4 +1,5 @@
import React from "react";
+
import { Space } from "antd";
export const IconText = ({ icon, text }: { icon: React.FC; text: string }) => (
@@ -8,4 +9,4 @@ export const IconText = ({ icon, text }: { icon: React.FC; text: string }) => (
);
-export default IconText;
\ No newline at end of file
+export default IconText;
diff --git a/src/components/IdeaRoll.tsx b/src/components/IdeaRoll.tsx
index 6fbd84f..5ba8143 100644
--- a/src/components/IdeaRoll.tsx
+++ b/src/components/IdeaRoll.tsx
@@ -1,8 +1,11 @@
import React from "react";
-import { Link, graphql, StaticQuery } from "gatsby";
-import { Avatar, List, Space, Tag } from "antd";
+
+import { Link, StaticQuery, graphql } from "gatsby";
+
import { MessageOutlined, StarOutlined } from "@ant-design/icons";
import { useLocation } from "@reach/router";
+import { Avatar, List, Space, Tag } from "antd";
+
import { MaterialsAndMethods } from "../types";
import { IconText } from "./IconText";
import { TagPopover } from "./TagPopover";
@@ -47,7 +50,9 @@ const IdeaRollTemplate = (props: {
type: post.frontmatter.type,
authors: post.frontmatter.authors || [],
concerns: post.frontmatter.concerns || "",
- dataset: { ...post.frontmatter.materialsAndMethods?.dataset?.frontmatter },
+ dataset: {
+ ...post.frontmatter.materialsAndMethods?.dataset?.frontmatter,
+ },
}));
if (props.count) {
data.splice(props.count);
@@ -85,7 +90,11 @@ const IdeaRollTemplate = (props: {
key="list-vertical-message"
/>,
...item.tags.map((tag) => (
-
+
)),
]}
// extra={
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 5666287..719a253 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,12 +1,16 @@
import * as React from "react";
import { Helmet } from "react-helmet-async";
-import { ConfigProvider, Layout as AntLayout } from "antd";
+
import { Script, withPrefix } from "gatsby";
-const { Content } = AntLayout;
+
+import { Layout as AntLayout, ConfigProvider } from "antd";
import "../style/index.sass";
-import useSiteMetadata from "./SiteMetadata";
import theme from "../style/theme";
+import useSiteMetadata from "./SiteMetadata";
+
+const { Content } = AntLayout;
+
const { container } = require("../style/layout.module.css");
const TemplateWrapper = ({ children }: React.PropsWithChildren) => {
diff --git a/src/components/MaterialsAndMethods.tsx b/src/components/MaterialsAndMethods.tsx
index 8955e3e..4ea538a 100644
--- a/src/components/MaterialsAndMethods.tsx
+++ b/src/components/MaterialsAndMethods.tsx
@@ -1,6 +1,8 @@
import React from "react";
+
import { Collapse } from "antd";
import type { CollapseProps } from "antd";
+
import { CellLine, MaterialsAndMethods, SoftwareTool } from "../types";
const { section, sectionTitle } = require("../style/idea-post.module.css");
@@ -137,7 +139,7 @@ export const MaterialsAndMethodsComponent: React.FC = ({
children: (
{software.map((item, index) =>
- getSoftwareToolRender(item, index)
+ getSoftwareToolRender(item, index),
)}
),
diff --git a/src/components/PreviewCompatibleImage.tsx b/src/components/PreviewCompatibleImage.tsx
index 87a2d13..56b92bc 100644
--- a/src/components/PreviewCompatibleImage.tsx
+++ b/src/components/PreviewCompatibleImage.tsx
@@ -1,4 +1,5 @@
import * as React from "react";
+
import { GatsbyImage } from "gatsby-plugin-image";
interface PreviewCompatibleImageProps {
diff --git a/src/components/SiteMetadata.tsx b/src/components/SiteMetadata.tsx
index 88b3458..9a95b3a 100644
--- a/src/components/SiteMetadata.tsx
+++ b/src/components/SiteMetadata.tsx
@@ -1,18 +1,16 @@
import { graphql, useStaticQuery } from "gatsby";
const useSiteMetadata = () => {
- const { site } = useStaticQuery(
- graphql`
- query SITE_METADATA_QUERY {
- site {
- siteMetadata {
- title
- description
- }
+ const { site } = useStaticQuery(graphql`
+ query SITE_METADATA_QUERY {
+ site {
+ siteMetadata {
+ title
+ description
}
}
- `
- );
+ }
+ `);
return site.siteMetadata;
};
diff --git a/src/components/TagPopover.tsx b/src/components/TagPopover.tsx
index 3d2db5c..37b976a 100644
--- a/src/components/TagPopover.tsx
+++ b/src/components/TagPopover.tsx
@@ -1,6 +1,8 @@
import React from "react";
-import { Tag, Popover } from "antd";
-import { Link, useStaticQuery, graphql } from "gatsby";
+
+import { Link, graphql, useStaticQuery } from "gatsby";
+
+import { Popover, Tag } from "antd";
import * as styles from "../style/tag-popover.module.css";
@@ -35,7 +37,7 @@ export const TagPopover: React.FC = ({ tag, currentSlug }) => {
.filter(
(edge) =>
edge.node.frontmatter.tags?.includes(tag) &&
- edge.node.fields.slug !== currentSlug
+ edge.node.fields.slug !== currentSlug,
)
.map((post) => (
diff --git a/src/pages/ideas/index.tsx b/src/pages/ideas/index.tsx
index c4a6cc5..6f1fa0f 100644
--- a/src/pages/ideas/index.tsx
+++ b/src/pages/ideas/index.tsx
@@ -1,8 +1,9 @@
import React from "react";
+
import { Layout as AntdLayout, Flex } from "antd";
-import Layout from "../../components/Layout";
import IdeaRoll from "../../components/IdeaRoll";
+import Layout from "../../components/Layout";
const Header = AntdLayout.Header;
@@ -14,7 +15,7 @@ export const IdeasIndexTemplate: React.FC = () => {
Shared ideas
-
+
);
};
diff --git a/src/pages/tags/index.js b/src/pages/tags/index.js
index b4d83ba..ed4cc77 100644
--- a/src/pages/tags/index.js
+++ b/src/pages/tags/index.js
@@ -1,8 +1,11 @@
-import * as React from 'react'
-import { kebabCase } from 'lodash'
-import { Helmet } from 'react-helmet-async'
-import { Link, graphql } from 'gatsby'
-import Layout from '../../components/Layout'
+import * as React from "react";
+import { Helmet } from "react-helmet-async";
+
+import { Link, graphql } from "gatsby";
+
+import { kebabCase } from "lodash";
+
+import Layout from "../../components/Layout";
const TagsPage = ({
data: {
@@ -12,31 +15,35 @@ const TagsPage = ({
},
},
}) => (
-
-
-
-
-
-
-
Tags
-
- {group.map((tag) => (
- -
-
- {tag.fieldValue} ({tag.totalCount})
-
-
- ))}
-
-
-
-
+
+
+
Tags
+
+ {group.map((tag) => (
+ -
+
+ {tag.fieldValue} ({tag.totalCount})
+
+
+ ))}
+
+
+
+