diff --git a/.prettierignore b/.prettierignore index 0b883504..0acf5061 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,5 @@ # Ignore artifacts: -build \ No newline at end of file +/build + +# Package files +package-lock.json diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 00000000..c83e2634 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["esbenp.prettier-vscode"] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..16ac7bf2 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,10 @@ +{ + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "editor.formatOnPaste": true, + "editor.tabSize": 2, + "files.eol": "\n", + "files.associations": { + "*.svg": "html" + } +} diff --git a/docs/get-started.md b/docs/get-started.md new file mode 100644 index 00000000..6e5dac72 --- /dev/null +++ b/docs/get-started.md @@ -0,0 +1,5 @@ +--- +sidebar_position: 2 +--- + +# Get Started diff --git a/docs/introduction.md b/docs/introduction.md new file mode 100644 index 00000000..4a9105c5 --- /dev/null +++ b/docs/introduction.md @@ -0,0 +1,5 @@ +--- +sidebar_position: 1 +--- + +# Introduction diff --git a/docs/tutorial-basics/_category_.json b/docs/tutorial-basics/_category_.json index 135e4a68..44bbb208 100644 --- a/docs/tutorial-basics/_category_.json +++ b/docs/tutorial-basics/_category_.json @@ -1,4 +1,4 @@ { "label": "Tutorial - Basics", - "position": 2 + "position": 3 } diff --git a/docs/tutorial-basics/congratulations.md b/docs/tutorial-basics/congratulations.md index 9ef99bba..afff5a36 100644 --- a/docs/tutorial-basics/congratulations.md +++ b/docs/tutorial-basics/congratulations.md @@ -1,5 +1,5 @@ --- -sidebar_position: 6 +sidebar_position: 7 --- # Congratulations! diff --git a/docs/tutorial-basics/create-a-blog-post.md b/docs/tutorial-basics/create-a-blog-post.md index 0d50aaf3..596c7887 100644 --- a/docs/tutorial-basics/create-a-blog-post.md +++ b/docs/tutorial-basics/create-a-blog-post.md @@ -1,5 +1,5 @@ --- -sidebar_position: 3 +sidebar_position: 4 --- # Create a Blog Post diff --git a/docs/tutorial-basics/create-a-document.md b/docs/tutorial-basics/create-a-document.md index a9bb9a41..f4637f52 100644 --- a/docs/tutorial-basics/create-a-document.md +++ b/docs/tutorial-basics/create-a-document.md @@ -1,5 +1,5 @@ --- -sidebar_position: 2 +sidebar_position: 3 --- # Create a Document diff --git a/docs/tutorial-basics/create-a-page.md b/docs/tutorial-basics/create-a-page.md index e112b005..0ae44068 100644 --- a/docs/tutorial-basics/create-a-page.md +++ b/docs/tutorial-basics/create-a-page.md @@ -1,5 +1,5 @@ --- -sidebar_position: 1 +sidebar_position: 2 --- # Create a Page diff --git a/docs/tutorial-basics/deploy-your-site.md b/docs/tutorial-basics/deploy-your-site.md index 492eae02..6745d8ca 100644 --- a/docs/tutorial-basics/deploy-your-site.md +++ b/docs/tutorial-basics/deploy-your-site.md @@ -1,5 +1,5 @@ --- -sidebar_position: 5 +sidebar_position: 6 --- # Deploy your site diff --git a/docs/intro.md b/docs/tutorial-basics/introduction.md similarity index 100% rename from docs/intro.md rename to docs/tutorial-basics/introduction.md diff --git a/docs/tutorial-basics/markdown-features.mdx b/docs/tutorial-basics/markdown-features.mdx index 88556260..887534c6 100644 --- a/docs/tutorial-basics/markdown-features.mdx +++ b/docs/tutorial-basics/markdown-features.mdx @@ -1,5 +1,5 @@ --- -sidebar_position: 4 +sidebar_position: 5 --- # Markdown Features @@ -39,6 +39,28 @@ Let's see how to [Create a page](./create-a-page.md). **Result:** Let's see how to [Create a page](./create-a-page.md). +## Lists + +Markdown lists can be rendered as ordered or unordered, and can be nested. + +```md +- Unordered list item 1. +- Unordered list item 2. +- Unordered list item 3. + +1. Ordered list item 1. +1. Ordered list item 2. +1. Ordered list item 3. +``` + +- Unordered list item 1. +- Unordered list item 2. +- Unordered list item 3. + +1. Ordered list item 1. +2. Ordered list item 2. +3. Ordered list item 3. + ## Images Regular Markdown images are supported. @@ -85,15 +107,33 @@ Docusaurus has a special syntax to create admonitions and callouts: ::: -:::tip My tip +:::note + +Some **content** with _markdown_ `syntax`. Check [this `api`](#). + +::: + +:::info -Use this awesome feature option +Some **content** with _markdown_ `syntax`. Check [this `api`](#). ::: -:::danger Take care +:::tip -This action is dangerous +Some **content** with _markdown_ `syntax`. Check [this `api`](#). + +::: + +:::caution + +Some **content** with _markdown_ `syntax`. Check [this `api`](#). + +::: + +:::danger + +Some **content** with _markdown_ `syntax`. Check [this `api`](#). ::: @@ -108,7 +148,7 @@ export const Highlight = ({children, color}) => ( backgroundColor: color, borderRadius: '20px', color: '#fff', - padding: '10px', + padding: '10px 20px', cursor: 'pointer', }} onClick={() => { @@ -123,18 +163,19 @@ This is Docusaurus green ! This is Facebook blue ! ``` -export const Highlight = ({children, color}) => ( +export const Highlight = ({ children, color }) => ( { alert(`You clicked the color ${color} with label ${children}`); - }}> + }} + > {children} ); diff --git a/docs/tutorial-extras/_category_.json b/docs/tutorial-extras/_category_.json index ca3f8e06..f964b724 100644 --- a/docs/tutorial-extras/_category_.json +++ b/docs/tutorial-extras/_category_.json @@ -1,4 +1,4 @@ { "label": "Tutorial - Extras", - "position": 3 + "position": 4 } diff --git a/docusaurus.config.js b/docusaurus.config.js index c473a1cf..fceac367 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -7,21 +7,21 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula'); /** @type {import('@docusaurus/types').Config} */ const config = { title: 'CAI Open Source', - tagline: 'Open source tools for tracing media provenance', + tagline: 'Open-source tools for content authenticity and provenance', url: 'https://contentauth.netlify.com', baseUrl: '/', onBrokenLinks: 'throw', onBrokenMarkdownLinks: 'warn', - favicon: 'img/favicon.png', + favicon: '/favicon.png', organizationName: 'contentauth', projectName: 'opensource.contentauth.org', + clientModules: [require.resolve('./static/scripts/ui.js')], stylesheets: [ // Acumin Pro (temporary) 'https://use.typekit.net/wgs7uns.css', // Adobe Clean 'https://use.typekit.net/dnb4eqs.css', ], - presets: [ [ 'classic', @@ -36,90 +36,54 @@ const config = { }), ], ], - // See here for configuration options: // https://docusaurus.io/docs/api/themes/configuration themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({ - // announcementBar: { - // id: 'sample', - // content: - // 'Note: Our SDK is still pre-1.0. Features and API may change.', - // backgroundColor: '#ffca32', - // textColor: '#2b2b2b', - // isCloseable: true, - // }, colorMode: { disableSwitch: true, }, navbar: { logo: { alt: 'Content Authenticity Initiative', - src: 'img/logo-text.svg', + src: 'img/logo-cai.svg', width: 180, height: 54, }, items: [ { - type: 'doc', - docId: 'intro', + to: '/docs/get-started', position: 'right', label: 'Get started', }, { - href: 'https://github.com/contentauth', - label: 'GitHub', + to: '/docs/introduction', position: 'right', + label: 'Docs', + activeBaseRegex: '/docs/(?!get-started)', }, { - href: 'https://www.contentauthenticity.org', + to: 'https://www.contentauthenticity.org', label: 'Learn more', position: 'right', }, { - href: 'https://verify.contentauthenticity.org', + to: 'https://verify.contentauthenticity.org', label: 'Verify', position: 'right', + className: 'navbar__button', }, ], }, footer: { - style: 'dark', - links: [ - { - title: 'Docs', - items: [ - { - label: 'Tutorial', - to: '/docs/intro', - }, - ], - }, - { - title: 'Community', - items: [ - { - label: 'Stack Overflow', - href: 'https://stackoverflow.com/questions/tagged/contentauth', - }, - { - label: 'Twitter', - href: 'https://twitter.com/contentauth', - }, - ], - }, - { - title: 'More', - items: [ - { - label: 'GitHub', - href: 'https://github.com/contentauth', - }, - ], - }, - ], - copyright: `Copyright © ${new Date().getFullYear()} Adobe`, + style: 'light', + logo: { + src: '#', // stop warning. + alt: 'Content Authenticity Initiative', + href: 'https://contentauthenticity.org', + }, + copyright: `Copyright © ${new Date().getFullYear()} Adobe. All rights reserved. Privacy | Terms of Use | Cookie Preferences`, }, prism: { theme: lightCodeTheme, diff --git a/package.json b/package.json index e31ebfa3..8d058c42 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "serve": "docusaurus serve", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids", - "prepare": "husky install" + "prepare": "husky install", + "prettier": "prettier --ignore-unknown --write ." }, "dependencies": { "@docusaurus/core": "2.0.0-beta.18", @@ -41,6 +42,6 @@ "prettier": "2.6.2" }, "lint-staged": { - "**/*": "prettier --write --ignore-unknown" + "**/*": "prettier --ignore-unknown --write" } } diff --git a/sidebars.js b/sidebars.js index fd342f2c..be09c31e 100644 --- a/sidebars.js +++ b/sidebars.js @@ -14,7 +14,8 @@ /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ const sidebars = { // By default, Docusaurus generates a sidebar from the docs folder structure - tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], + tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }], + apiSidebar: [], // But you can create a sidebar manually /* diff --git a/src/assets/images/check.svg b/src/assets/images/check.svg new file mode 100644 index 00000000..b93f52f4 --- /dev/null +++ b/src/assets/images/check.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/images/cli.svg b/src/assets/images/cli.svg new file mode 100644 index 00000000..88886d52 --- /dev/null +++ b/src/assets/images/cli.svg @@ -0,0 +1,42 @@ + + + + + + + + diff --git a/src/assets/images/hero-2.svg b/src/assets/images/hero-2.svg new file mode 100644 index 00000000..6cc54c2d --- /dev/null +++ b/src/assets/images/hero-2.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/hero.svg b/src/assets/images/hero.svg new file mode 100644 index 00000000..9dad1dbb --- /dev/null +++ b/src/assets/images/hero.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + diff --git a/src/assets/images/image.svg b/src/assets/images/image.svg new file mode 100644 index 00000000..698a4a14 --- /dev/null +++ b/src/assets/images/image.svg @@ -0,0 +1,42 @@ + + + + + + + + diff --git a/src/assets/images/logo-adobe.svg b/src/assets/images/logo-adobe.svg new file mode 100644 index 00000000..746dd506 --- /dev/null +++ b/src/assets/images/logo-adobe.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + diff --git a/src/assets/images/logo-cai.svg b/src/assets/images/logo-cai.svg new file mode 100644 index 00000000..33d78e91 --- /dev/null +++ b/src/assets/images/logo-cai.svg @@ -0,0 +1,18 @@ + + + + + + diff --git a/src/assets/images/wrench.svg b/src/assets/images/wrench.svg new file mode 100644 index 00000000..52aed7be --- /dev/null +++ b/src/assets/images/wrench.svg @@ -0,0 +1,22 @@ + + + + + + diff --git a/src/assets/images/x.svg b/src/assets/images/x.svg new file mode 100644 index 00000000..cbe9ef63 --- /dev/null +++ b/src/assets/images/x.svg @@ -0,0 +1,27 @@ + + + + + + diff --git a/src/components/ComparisonTable/index.js b/src/components/ComparisonTable/index.js new file mode 100644 index 00000000..c0c6711c --- /dev/null +++ b/src/components/ComparisonTable/index.js @@ -0,0 +1,51 @@ +import React from 'react'; +import styles from './styles.module.css'; +import CheckIcon from '../../assets/images/check.svg'; + +export function TabelCellValue({ value, type }) { + switch (type) { + case 'boolean': + return value ? : null; + default: + return {value}; + } +} + +export default function Table({ title, columns, records }) { + return ( +
+
+

{title}

+
+ + + + {columns.map((column) => ( + + ))} + + + + {records.map((record, i) => ( + + {columns.map((column) => ( + + ))} + + ))} + +
+

{column.label}

+
+
+ +
+
+
+
+
+ ); +} diff --git a/src/components/ComparisonTable/styles.module.css b/src/components/ComparisonTable/styles.module.css new file mode 100644 index 00000000..3aeb4c68 --- /dev/null +++ b/src/components/ComparisonTable/styles.module.css @@ -0,0 +1,107 @@ +.root { + margin-bottom: 120px; + max-width: var(--ifm-container-width); + margin-left: auto; + margin-right: auto; +} + +.title { + padding: 0 var(--ifm-spacing-horizontal); + font-size: 2rem; + margin-bottom: 60px; + text-align: center; +} + +.scroller { + overflow-x: auto; +} + +.table { + --ifm-spacing-vertical: 0; + display: table; + table-layout: fixed; + min-width: 100%; +} + +.table thead { + border: none; +} + +.table tr { + border: none; +} + +.table th, +.table td { + border: none; + text-align: unset; + padding: 0; +} + +.table th { + white-space: nowrap; + width: 25%; +} + +.table tr th:first-child, +.table tr td:first-child { + background-color: inherit; + position: sticky; + left: 0; +} + +.table tr td:first-child .cell, +.table tr th:first-child .headCell { + min-width: 200px; +} + +.table [data-column-type='boolean'] { + text-align: center; +} + +.cell { + font-size: 0.875rem; + line-height: 1.2em; + display: flex; + flex-flow: column; + align-items: stretch; + justify-content: flex-start; + padding: 1.5em; + min-height: 5em; +} + +.table [data-column-type='boolean'] .cell { + align-items: center; + justify-content: center; +} + +.headCell { + --ifm-heading-margin-top: 0; + --ifm-heading-margin-bottom: 0; + font-size: 1rem; + line-height: 1.2em; + display: flex; + flex-flow: column; + align-items: stretch; + justify-content: center; + padding: 1.25em 1.5em; + background-color: var(--ifm-color-primary-light); +} + +@media screen and (max-width: 767px) { + .table tr td:first-child .cell::after, + .table tr th:first-child .headCell::after { + content: ''; + display: block; + background: linear-gradient( + 90deg, + rgba(0, 0, 0, 0.2) 0%, + rgba(0, 0, 0, 0) 100% + ); + position: absolute; + top: 0; + right: -20px; + width: 20px; + height: 100%; + } +} diff --git a/src/components/Features/index.js b/src/components/Features/index.js new file mode 100644 index 00000000..e6d96635 --- /dev/null +++ b/src/components/Features/index.js @@ -0,0 +1,45 @@ +import React from 'react'; +import clsx from 'clsx'; +import styles from './styles.module.css'; +import Link from '@docusaurus/Link'; + +export function Feature({ id, icon, media, title, description, cta }) { + return ( +
+
+
+ {icon} +

{title}

+
+

{description}

+
+
+
+ + {cta.label} + +
+
+
{media}
+
+ ); +} + +export default function Features({ features = [] }) { + return ( +
+
+
+ {features.map((props, i) => ( + + ))} +
+
+
+ ); +} diff --git a/src/components/Features/styles.module.css b/src/components/Features/styles.module.css new file mode 100644 index 00000000..ec6ac1e1 --- /dev/null +++ b/src/components/Features/styles.module.css @@ -0,0 +1,121 @@ +.root { + display: flex; + align-items: center; + width: 100%; +} + +.list { + display: flex; + flex-direction: column; + gap: 200px; + margin-bottom: 200px; +} + +.feature { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 56px; +} + +.featureIcon { + height: 40px; + width: 40px; +} + +.featureInfo { + width: 50%; + display: flex; + flex-direction: column; + justify-content: center; + gap: 20px; +} + +.featureMedia { + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + width: 50%; +} + +.featureTitle { + --ifm-heading-margin-top: 0; + --ifm-heading-margin-bottom: 0; + font-size: 2rem; +} + +.featureDescription { + font-size: 1.25rem; +} + +.featureDescription p:last-child { + --ifm-paragraph-margin-bottom: 0; +} + +.featureActions { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: flex-start; + width: 100%; +} + +.featureCTA { + padding: 0.86em 1.25em; + border-radius: 2em; + background-color: var(--ifm-color-secondary); + color: inherit; + text-decoration: none; + line-height: 1.25em; + font-weight: var(--ifm-font-weight-bold); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: center; + transition: background-color 100ms ease-out; +} + +.featureCTA:hover { + text-decoration: none; + background-color: var(--ifm-color-secondary-light); +} + +.featureCTADisabled, +.featureCTADisabled:hover, +.featureCTADisabled:active, +.featureCTADisabled:focus { + background-color: var(--cai-color-disabled); + color: var(--cai-color-on-disabled); + pointer-events: none; +} + +.featureContent { + display: flex; + flex-flow: column; + align-items: flex-start; + justify-content: flex-start; + gap: 28px; +} + +@media screen and (max-width: 767px) { + .feature { + flex-flow: column; + align-items: stretch; + justify-content: flex-start; + gap: 40px; + } + + .featureInfo { + width: 100%; + } + + .featureMedia { + width: 100%; + } + + .featureDescription { + font-size: 1rem; + } +} diff --git a/src/components/FooterLogoLockup/index.js b/src/components/FooterLogoLockup/index.js new file mode 100644 index 00000000..797ea6be --- /dev/null +++ b/src/components/FooterLogoLockup/index.js @@ -0,0 +1,16 @@ +import React from 'react'; +import Link from '@docusaurus/Link'; +import CAILogo from '../../assets/images/logo-cai.svg'; +import AdobeLogo from '../../assets/images/logo-adobe.svg'; +import XIcon from '../../assets/images/x.svg'; +import styles from './styles.module.css'; + +export default function FooterLogoLockup() { + return ( +
+ + + +
+ ); +} diff --git a/src/components/FooterLogoLockup/styles.module.css b/src/components/FooterLogoLockup/styles.module.css new file mode 100644 index 00000000..212f0d68 --- /dev/null +++ b/src/components/FooterLogoLockup/styles.module.css @@ -0,0 +1,24 @@ +.root { + display: flex; + flex-flow: row; + justify-content: center; + align-items: center; + gap: 40px; + margin-bottom: var(--ifm-paragraph-margin-bottom); +} + +.logoCAI { + width: auto; + height: 40px; +} + +.logoAdobe { + width: auto; + height: 30px; +} + +.x { + width: 20px; + min-width: 12px; + flex-shrink: 1; +} diff --git a/src/components/Hero/index.js b/src/components/Hero/index.js new file mode 100644 index 00000000..97426147 --- /dev/null +++ b/src/components/Hero/index.js @@ -0,0 +1,19 @@ +import React from 'react'; +import styles from './index.module.css'; + +export default function Hero({ title, description, media }) { + return ( +
+
+

{title}

+
+
+
+

{description}

+
+
{media}
+
+
+
+ ); +} diff --git a/src/components/Hero/index.module.css b/src/components/Hero/index.module.css new file mode 100644 index 00000000..b53a4e05 --- /dev/null +++ b/src/components/Hero/index.module.css @@ -0,0 +1,84 @@ +/** + * CSS files with the .module.css suffix will be treated as CSS modules + * and scoped locally. + */ + +.root { + padding: 200px 0; + position: relative; +} + +.title { + --ifm-h1-font-size: 5rem; + --ifm-heading-margin-bottom: 0; + max-width: 974px; +} + +.content { + display: flex; + flex-flow: row; + align-items: center; + justify-content: space-between; + gap: 80px; +} + +.description { + font-size: 1.25rem; + width: 55%; + margin: 0 auto; + display: flex; + flex-flow: row; + align-items: flex-start; + justify-content: flex-start; + gap: 0.8em; + line-height: 1.6em; + padding: 3em 0; +} + +.description p { + flex-grow: 1; +} + +.description p:last-child { + margin-bottom: 0; +} + +.image { + width: 45%; +} + +.hr { + --ifm-hr-margin-vertical: 0.8em; + width: 40px; + height: 3px; + background-color: var(--cai-color-primary); + border: 0; + padding: 0; + flex-shrink: 0; +} + +@media screen and (max-width: 767px) { + .title { + --ifm-h1-font-size: 2.25rem; + } + + .content { + flex-flow: column; + align-items: flex-start; + justify-content: flex-start; + gap: 10px; + } + + .description { + font-size: 1rem; + padding: 1.25em 0; + width: 100%; + flex-flow: column; + align-items: flex-start; + justify-content: flex-start; + } + + .image { + width: 100%; + } +} diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js deleted file mode 100644 index 78f410ba..00000000 --- a/src/components/HomepageFeatures/index.js +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import styles from './styles.module.css'; - -const FeatureList = [ - { - title: 'Easy to Use', - Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, - description: ( - <> - Docusaurus was designed from the ground up to be easily installed and - used to get your website up and running quickly. - - ), - }, - { - title: 'Focus on What Matters', - Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, - description: ( - <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go - ahead and move your docs into the docs directory. - - ), - }, - { - title: 'Powered by React', - Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, - description: ( - <> - Extend or customize your website layout by reusing React. Docusaurus can - be extended while reusing the same header and footer. - - ), - }, -]; - -function Feature({Svg, title, description}) { - return ( -
-
- -
-
-

{title}

-

{description}

-
-
- ); -} - -export default function HomepageFeatures() { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); -} diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css deleted file mode 100644 index b248eb2e..00000000 --- a/src/components/HomepageFeatures/styles.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; -} - -.featureSvg { - height: 200px; - width: 200px; -} diff --git a/src/css/custom.css b/src/css/custom.css index 1e459263..9c53b916 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -6,52 +6,292 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; - --ifm-code-font-size: 95%; -} - -/* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { - --ifm-color-primary: #25c2a0; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; + --cai-color-background: #f8f6f4; + --cai-color-on-background: #000000; + --cai-color-background-dark: #e6e3e0; + --cai-color-on-background-dark: #000000; + --cai-color-disabled: #e3e3e3; + --cai-color-on-disabled: #6e6e6e; + --cai-color-surface: #ffffff; + --cai-color-on-surface: #000000; + --cai-color-primary: #5aa9fa; + --cai-color-primary-light: #d8e7f5; + --cai-color-secondary: #fade3b; + --cai-color-secondary-light: #f8efbc; + --cai-color-shadow: rgba(0, 0, 0, 0.15); + + --cai-font-family-acuminpro-regular: 'acumin-pro', sans-serif; + --cai-font-family-acuminpro-bold: 'acumin-pro-bold', sans-serif; + --cai-font-family-acuminprowide-black: 'acumin-pro-wide', sans-serif; + --cai-font-family-adobeclean-bold: 'adobe-clean-bold', sans-serif; + --cai-font-family-adobeclean-regular: 'adobe-clean', sans-serif; + + --ifm-color-primary: var(--cai-color-primary); + --ifm-color-primary-dark: var(--cai-color-primary); + --ifm-color-primary-darker: var(--cai-color-primary); + --ifm-color-primary-darkest: var(--cai-color-primary); + --ifm-color-primary-light: var(--cai-color-primary-light); + --ifm-color-primary-lighter: var(--cai-color-primary-light); + --ifm-color-primary-lightest: var(--cai-color-primary-light); + --ifm-color-secondary: var(--cai-color-secondary); + --ifm-color-secondary-dark: var(--cai-color-secondary); + --ifm-color-secondary-darker: var(--cai-color-secondary); + --ifm-color-secondary-darkest: var(--cai-color-secondary); + --ifm-color-secondary-light: var(--cai-color-secondary-light); + --ifm-color-secondary-lighter: var(--cai-color-secondary-light); + --ifm-color-secondary-lightest: var(--cai-color-secondary-light); + --ifm-code-font-size: 0.9rem; + --ifm-navbar-height: 114px; + --ifm-navbar-padding-vertical: 30px; + --ifm-navbar-padding-horizontal: 20px; + --ifm-navbar-shadow: 0px 0px 40px var(--cai-color-shadow); + --ifm-navbar-background-color: var(--cai-color-background); + --ifm-hero-background-color: transparent; + --ifm-table-background: var(--cai-color-background); + --ifm-table-stripe-background: var(--cai-color-background-dark); + --ifm-footer-background-color: transparent; + --ifm-container-width-xl: 1200px; + --ifm-container-width: 1080px; + --ifm-heading-font-family: var(--cai-font-family-acuminprowide-black); + --ifm-heading-line-height: 1.1; + --ifm-heading-color: var(--cai-color-on-background); + --ifm-color-content: var(--cai-color-on-background); + --ifm-link-color: var(--cai-color-on-background); + --ifm-footer-padding-vertical: 80px; + --ifm-menu-color: var(--cai-color-on-background); + --ifm-menu-color-background-active: transparent; + --ifm-menu-color-background-hover: transparent; + --ifm-menu-link-padding-vertical: 0.75em; + --ifm-menu-link-padding-horizontal: 2rem; + --ifm-alert-border-radius: 4px; + --ifm-alert-border-width: 1px; + --ifm-alert-border-left-width: 1px; + --ifm-toc-padding-vertical: 0; + --ifm-toc-link-color: var(--cai-color-on-background); +} + +* { + -webkit-font-smoothing: antialiased; } body { - font-family: acumin-pro, sans-serif; - font-weight: 400; - font-style: normal; + background-color: var(--cai-color-background); + font-family: var(--cai-font-family-acuminpro-regular); + font-weight: normal; } -h1 { - font-family: acumin-pro-wide, sans-serif; - font-weight: 700; +h1, +h2, +h3, +h4, +h5, +h6 { + letter-spacing: -0.025em; +} + +.navbar { + transition: box-shadow 250ms ease-out; +} + +body:not(.is-scrolling) .navbar { + --ifm-navbar-shadow: 0px 0px 0px var(--cai-color-shadow); +} + +.navbar__logo { + height: 54px; +} + +.navbar__button { + background-color: var(--ifm-color-secondary); + padding: 0.625em 1.25em !important; + margin-left: 10px; + margin-right: 10px; + line-height: 1.25em; + transition: background-color 100ms ease-out; +} + +.navbar__button:hover, +.navbar__button:active, +.navbar__button:focus { + background-color: var(--ifm-color-secondary-light); + color: inherit; +} + +.navbar__items .navbar__button:last-child { + margin-right: 0; +} + +.navbar-sidebar .navbar__button { + background-color: transparent; + padding: var(--ifm-menu-link-padding-vertical) + var(--ifm-menu-link-padding-horizontal) !important; + margin-left: unset; + margin-right: unset; +} + +.navbar-sidebar .navbar-sidebar__back { + margin-left: -0.7rem; + padding: 1.5rem 1.5rem; +} + +.demo-bg { + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +/* Docs */ + +.docs-wrapper .main-wrapper { + padding-top: 100px; + margin-left: auto; + margin-right: auto; + max-width: var(--ifm-container-width-xl); + width: 100%; +} + +.theme-doc-toc-desktop { + height: 100%; + max-height: calc(100vh - var(--ifm-navbar-height)) !important; + top: var(--ifm-navbar-height) !important; +} + +.theme-doc-toc-mobile { + margin-top: 0 !important; + margin-bottom: 1.75rem !important; + border-radius: 0 !important; + border-bottom: 2px solid var(--cai-color-background-dark); +} + +.theme-doc-toc-mobile > button { + padding: 1rem 0; +} + +.theme-doc-toc-mobile > button + div { + background-color: var(--cai-color-background-dark); } -.button { - font-family: adobe-clean, sans-serif; +.table-of-contents { + border: 0; + padding: var(--ifm-menu-link-padding-vertical) 0; +} + +.theme-doc-sidebar-container { + border: 0 !important; +} + +.theme-doc-toc-desktop, +.theme-doc-markdown, +.theme-doc-sidebar-container .menu { + padding: 2rem 0.5rem; +} + +.theme-doc-sidebar-container + main > .container { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.theme-doc-breadcrumbs { + display: none; +} + +.theme-doc-sidebar-menu > .menu__list-item { font-weight: 700; - font-style: normal; - border-radius: 9999px; + font-family: var(--cai-font-family-acuminpro-bold); +} + +.theme-doc-sidebar-menu > .menu__list-item > .menu__list { + font-weight: 500; + font-family: var(--cai-font-family-acuminpro-regular); +} + +.theme-doc-sidebar-menu .menu__link, +.theme-doc-sidebar-menu .menu__list-item, +.theme-doc-sidebar-menu .menu__list { + position: relative; +} + +.theme-doc-sidebar-menu .menu__list-item .menu__list::before { + content: ''; + display: block; + position: absolute; + top: var(--ifm-menu-link-padding-vertical); + left: var(--ifm-menu-link-padding-horizontal); + height: calc( + 100% - var(--ifm-menu-link-padding-vertical) - + var(--ifm-menu-link-padding-vertical) + ); + width: 2px; + background: var(--cai-color-background-dark); } -.docusaurus-highlight-code-line { - background-color: rgba(0, 0, 0, 0.1); +.theme-doc-sidebar-menu + .menu__list-item + .menu__list + .menu__link--active::before { + content: ''; display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); + position: absolute; + top: var(--ifm-menu-link-padding-vertical); + left: 0; + height: calc( + 100% - var(--ifm-menu-link-padding-vertical) - + var(--ifm-menu-link-padding-vertical) + ); + width: 2px; + background: var(--ifm-color-primary); +} + +.theme-doc-sidebar-menu .menu__link--sublist-caret::after { + background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem; +} + +.navbar-sidebar__brand { + box-shadow: none; +} + +@media (max-width: 996px) { + .navbar__items { + flex-flow: row-reverse; + justify-content: space-between; + } +} + +@media (min-width: 997px) { + .theme-doc-sidebar-container > div { + /* top: 2rem !important; */ + } +} + +/* Admonitions */ + +.admonition-heading h5 { + display: flex; + flex-flow: row; + align-items: center; + justify-content: flex-start; + margin-bottom: 0.25em; +} + +.admonition-icon { + margin-right: 0.9em; +} + +.admonition-icon svg { + width: 18px; + height: 18px; +} + +.alert--info, +.alert--secondary { + --ifm-alert-background-color: var(--ifm-color-primary-light); + --ifm-alert-background-color-highlight: var(--ifm-color-primary-light); + --ifm-alert-border-color: var(--ifm-color-primary); } -[data-theme='dark'] .docusaurus-highlight-code-line { - background-color: rgba(0, 0, 0, 0.3); +.alert--warning, +.alert--success { + --ifm-alert-background-color: var(--ifm-color-secondary-light); + --ifm-alert-background-color-highlight: var(--ifm-color-secondary-light); + --ifm-alert-border-color: var(--ifm-color-secondary); } diff --git a/src/pages/index.js b/src/pages/index.js index 606f588b..3e8b28e5 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,42 +1,159 @@ -import React from 'react'; -import clsx from 'clsx'; +import React, { useEffect } from 'react'; import Layout from '@theme/Layout'; -import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import styles from './index.module.css'; -import HomepageFeatures from '@site/src/components/HomepageFeatures'; +import Features from '../components/Features'; +import ComparisonTable from '../components/ComparisonTable'; +import Hero from '../components/Hero'; +import JSSDKIcon from '../assets/images/image.svg'; +import C2PAToolIcon from '../assets/images/cli.svg'; +import RustSDKIcon from '../assets/images/wrench.svg'; +import HeroImage from '../assets/images/hero-2.svg'; -function HomepageHeader() { - const { siteConfig } = useDocusaurusContext(); - return ( -
-
-

{siteConfig.title}

-

{siteConfig.tagline}

-
- - Docusaurus Tutorial - 5min ⏱️ - -
-
-
- ); -} +export const features = [ + { + id: 'js-sdk', + title: 'JS SDK', + icon: , + description: ( + <> + Everything you need to develop rich, browser-based experiences with + content credentials. + + ), + cta: { + link: '/docs/introduction', + label: 'View documentation', + }, + media: , + }, + { + id: 'c2pa-tool', + title: 'C2PA Tool', + icon: , + description: ( + <> + Install this tool to create, verify and explore content credentials on + the command line. + + ), + cta: { + link: '/', + label: 'Coming soon', + disabled: true, + }, + media: , + }, + { + id: 'rust-sdk', + title: 'Rust SDK', + icon: , + description: ( + <> + Develop custom applications across desktop, mobile, and services that + create, verify, and display content credentials via our Rust library. + + ), + cta: { + link: '/', + label: 'Coming soon', + disabled: true, + }, + media: , + }, +]; + +const comparisonColumns = [ + { + key: 'implementation', + label: 'Implementation', + type: 'string', + }, + { + key: 'jsSDK', + label: 'JS SDK', + type: 'boolean', + }, + { + key: 'c2paTool', + label: 'C2PA Tool', + type: 'boolean', + }, + { + key: 'rustSDK', + label: 'Rust SDK', + type: 'boolean', + }, +]; + +const comparisonRecords = [ + { + implementation: 'Display C2PA data on your site or app', + jsSDK: true, + c2paTool: true, + rustSDK: true, + }, + { + implementation: 'Link C2PA data displayed on your site to Verify', + jsSDK: true, + c2paTool: true, + rustSDK: true, + }, + { + implementation: 'Write C2PA data into files', + jsSDK: false, + c2paTool: true, + rustSDK: true, + }, + { + implementation: 'Quickly create and inspect C2PA data', + jsSDK: false, + c2paTool: true, + rustSDK: true, + }, + { + implementation: 'Customize displaying and creating C2PA data', + jsSDK: false, + c2paTool: false, + rustSDK: true, + }, + { + implementation: 'Deploy on Web, mobile, and desktop', + jsSDK: false, + c2paTool: false, + rustSDK: true, + }, +]; export default function Home() { const { siteConfig } = useDocusaurusContext(); - // This is where the landing page component can go return ( - - + + } + description={ + <> + Integrate secure provenance signals into your site, app, or service + using open-source tools developed by the  + + Content Authenticity Initiative + + . Join the ecosystem of transparency of provenance and attribution + of digital content to counter the rise of misinformation. + + } + />
- + +
); diff --git a/src/pages/index.module.css b/src/pages/index.module.css deleted file mode 100644 index 9f71a5da..00000000 --- a/src/pages/index.module.css +++ /dev/null @@ -1,23 +0,0 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ - -.heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; -} - -@media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; -} diff --git a/src/theme/Footer/Logo/index.js b/src/theme/Footer/Logo/index.js new file mode 100644 index 00000000..acab1989 --- /dev/null +++ b/src/theme/Footer/Logo/index.js @@ -0,0 +1,12 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import React from 'react'; +import FooterLogoLockup from '../../../components/FooterLogoLockup'; + +export default function FooterLogo() { + return ; +} diff --git a/src/theme/Footer/Logo/styles.module.css b/src/theme/Footer/Logo/styles.module.css new file mode 100644 index 00000000..16b1a2ea --- /dev/null +++ b/src/theme/Footer/Logo/styles.module.css @@ -0,0 +1,16 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.footerLogoLink { + opacity: 0.5; + transition: opacity var(--ifm-transition-fast) + var(--ifm-transition-timing-default); +} + +.footerLogoLink:hover { + opacity: 1; +} diff --git a/static/img/favicon.png b/static/favicon.png similarity index 100% rename from static/img/favicon.png rename to static/favicon.png diff --git a/static/img/demo-devices.png b/static/img/demo-devices.png new file mode 100644 index 00000000..78624e28 Binary files /dev/null and b/static/img/demo-devices.png differ diff --git a/static/img/demo-tool.png b/static/img/demo-tool.png new file mode 100644 index 00000000..910019cf Binary files /dev/null and b/static/img/demo-tool.png differ diff --git a/static/img/demo.png b/static/img/demo.png new file mode 100644 index 00000000..b5f98bb1 Binary files /dev/null and b/static/img/demo.png differ diff --git a/static/img/logo-cai.svg b/static/img/logo-cai.svg new file mode 100644 index 00000000..33d78e91 --- /dev/null +++ b/static/img/logo-cai.svg @@ -0,0 +1,18 @@ + + + + + + diff --git a/static/img/logo-text.svg b/static/img/logo-text.svg deleted file mode 100644 index c68e1f40..00000000 --- a/static/img/logo-text.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/static/img/logo.svg b/static/img/logo.svg deleted file mode 100644 index 900e5551..00000000 --- a/static/img/logo.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/static/scripts/ui.js b/static/scripts/ui.js new file mode 100644 index 00000000..48d024ed --- /dev/null +++ b/static/scripts/ui.js @@ -0,0 +1,26 @@ +(function () { + // Check if window/document is defined because build fails on + // server on client modules. + // See: https://github.com/facebook/docusaurus/issues/4268 + if (typeof window === 'undefined' || typeof document === 'undefined') { + return; + } + + function manageScrollClass() { + var className = 'is-scrolling'; + var scrollTop = + window.pageYOffset || + document.documentElement.scrollTop || + document.body.scrollTop || + 0; + if (scrollTop > 0) { + document.body.classList.add(className); + } else { + document.body.classList.remove(className); + } + } + document.addEventListener('DOMContentLoaded', function () { + manageScrollClass(); + window.addEventListener('scroll', manageScrollClass); + }); +})();