chore(website): add option to hide code sources

website/.gitignore

@@ -19,5 +19,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-**/docs/**/*.md
-**/docs/**/*.yml
+
+/docs/api/

website/docs/examples/certificates-and-revocation/create-and-validate-certificate.md

@@ -0,0 +1,3 @@
+# Create and validate certificate
+
+In this example, you will see how to create a self-signed X.509 certificate, parse an X.509 certificate, and show how to do certificate chain validation engine

website/docs/examples/certificates-and-revocation/creating-and-parsing-CRLs.md

@@ -0,0 +1,3 @@
+# Creating and parsing CRLs
+
+In this example, you will see how to create a CRL, parse, and validate it.

website/docs/examples/certificates-and-revocation/index.md

@@ -0,0 +1,5 @@
+import DocCardList from '@theme/DocCardList';
+
+# Certificates and Revocation
+
+<DocCardList />

website/docs/examples/certificates-and-revocation/working-with-OCSP-requests.md

@@ -0,0 +1,3 @@
+# Working with OCSP requests
+
+In this example, you will see how to create and parse OCSP requests.

website/docs/examples/certificates-and-revocation/working-with-OCSP-responses.md

@@ -0,0 +1,3 @@
+# Working with OCSP responses
+
+In this example, you will see how to create and parse OCSP responses.

website/docs/examples/certificates-and-revocation/working-with-certificate-requests.md

@@ -0,0 +1,3 @@
+# Working with certificate requests
+
+In this example, you will see how to create a CSR, parse it and verify its signature.

website/docs/examples/other/S-MIME-signature-encryption.md

@@ -0,0 +1,3 @@
+# S/MIME signature encryption
+
+In this example, you will see how to encrypt S/MIME messages.

website/docs/examples/other/S-MIME-signature-verification.md

@@ -0,0 +1,3 @@
+# S/MIME signature verification
+
+In this example, you will see how to verify S/MIME messages.

website/docs/examples/other/how-to-verify-a-signature-in-a-PDF-file.md

@@ -0,0 +1,3 @@
+# How to verify a signature in a PDF file
+
+In this example, you will see how to verify signatures inside PDF files. 

website/docs/examples/other/index.md

@@ -0,0 +1,5 @@
+import DocCardList from '@theme/DocCardList';
+
+# Other
+
+<DocCardList />

website/docs/examples/other/working-with-PKCS-12-files.md

@@ -0,0 +1,3 @@
+# Working with PKCS#12 files
+
+In this example, you will see how to create a PKCS#12 (sometimes called a PFX) and parse it.

website/docs/examples/signing-and-encryption-with-CMS/index.md

@@ -0,0 +1,5 @@
+import DocCardList from '@theme/DocCardList';
+
+# Signing and Encryption with CMS
+
+<DocCardList />

website/docs/examples/signing-and-encryption-with-CMS/working-with-CMS-certificate-based-encryption.md

@@ -0,0 +1,3 @@
+# Working with CMS Certificate-based Encryption
+
+In this example, you will see how to create and decrypt an Enveloped CMS message using an existing X.509 certificate. 

website/docs/examples/signing-and-encryption-with-CMS/working-with-CMS-password-based-encryption.md

@@ -0,0 +1,3 @@
+# Working with CMS password-based Encryption
+
+In this example, you will see how to create and decrypt a pre-shared key encrypted CMS message. 

website/docs/examples/signing-and-encryption-with-CMS/working-with-CMS-signing.md

@@ -0,0 +1,3 @@
+# Working with CMS Signing
+
+In this example, you will see how to sign any file using CMS.

website/docs/examples/signing-and-encryption-with-CMS/working-with-PKCS-7-certificate-bags-P7B.md

@@ -0,0 +1,3 @@
+# Working with PKCS#7 Certificate bags (P7B)
+
+In this example, you will see how to create a "certificate bag" 

website/docs/examples/timestamping/creating-a-timestamp-request.md

@@ -0,0 +1,3 @@
+# Creating a Timestamp request
+
+In this example, you will see how to create and parse a  timestamp request. 

website/docs/examples/timestamping/creating-a-timestamp-response.md

@@ -0,0 +1,3 @@
+# Creating a Timestamp response
+
+In this example, you will see how to create, parse and verify timestamp responses. 

website/docs/examples/timestamping/index.md

@@ -0,0 +1,5 @@
+import DocCardList from '@theme/DocCardList';
+
+# Timestamping
+
+<DocCardList />

website/docs/installation.md

@@ -0,0 +1,7 @@
+# Installation
+
+Run one of the following commands to add `pkijs` to your project:
+
+```bash npm2yarn
+npm install pkijs
+```

website/docusaurus.config.ts

@@ -1,5 +1,6 @@
-import type {Config} from '@docusaurus/types';
+import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
+import npm2yarn from '@docusaurus/remark-plugin-npm2yarn';
 
 const config: Config = {
   title: 'pki.js',
@@ -27,9 +28,15 @@ const config: Config = {
     [
       'classic',
       {
+        docs: {
+          path: 'docs',
+          sidebarPath: './sidebars.ts',
+          remarkPlugins: [npm2yarn],
+        },
         theme: {
           customCss: './src/css/custom.css',
         },
+        blog: false,
       } satisfies Preset.Options,
     ],
   ],
@@ -64,9 +71,16 @@ const config: Config = {
       },
       items: [
         {
-          label: 'API',
-          to: '/docs/api',
+          type: 'docSidebar',
+          position: 'right',
+          sidebarId: 'docs',
+          label: 'Docs',
+        },
+        {
+          type: 'docSidebar',
           position: 'right',
+          sidebarId: 'examples',
+          label: 'Examples',
         },
         {
           href: 'https://github.com/PeculiarVentures/PKI.js',

website/package.json

@@ -15,20 +15,21 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "3.0.0",
-    "@docusaurus/preset-classic": "3.0.0",
+    "@docusaurus/core": "3.1.0",
+    "@docusaurus/remark-plugin-npm2yarn": "3.1.0",
+    "@docusaurus/preset-classic": "3.1.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.0.0",
-    "@docusaurus/tsconfig": "3.0.0",
-    "@docusaurus/types": "3.0.0",
+    "@docusaurus/module-type-aliases": "3.1.0",
+    "@docusaurus/tsconfig": "3.1.0",
+    "@docusaurus/types": "3.1.0",
     "docusaurus-plugin-sass": "^0.2.5",
-    "docusaurus-plugin-typedoc": "^0.21.0",
+    "docusaurus-plugin-typedoc": "^0.22.0",
     "sass": "^1.69.5",
     "typedoc": "^0.25.3",
     "typedoc-plugin-markdown": "^3.17.1",

website/sidebars.ts

@@ -1,31 +1,26 @@
-import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
+import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
 
-/**
- * Creating a sidebar enables you to:
- - create an ordered group of docs
- - render a sidebar for each doc of that group
- - provide next/previous navigation
-
- The sidebars can be generated from the filesystem, or explicitly defined here.
-
- Create as many sidebars as you want.
- */
 const sidebars: SidebarsConfig = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
-
-  // But you can create a sidebar manually
-  /*
-  tutorialSidebar: [
-    'intro',
-    'hello',
+  docs: [
+    'installation',
     {
       type: 'category',
-      label: 'Tutorial',
-      items: ['tutorial-basics/create-a-document'],
+      label: 'API',
+      collapsed: false,
+      items: [
+        {
+          type: 'autogenerated',
+          dirName: 'api',
+        },
+      ],
     },
   ],
-   */
+  examples: [
+    {
+      type: 'autogenerated',
+      dirName: 'examples',
+    }
+  ],
 };
 
 export default sidebars;

website/src/pages/index.module.scss

@@ -59,14 +59,13 @@
     z-index: 1;
     color: white;
     max-width: 770px;
-  }
-
-  h1 {
-    margin-bottom: 40px;
-  }
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
 
-  p {
-    margin: 0;
+    > * {
+      margin: 0;
+    }
   }
 }
 
@@ -84,14 +83,16 @@
     display: grid;
     grid-template-columns: repeat(3,1fr);
     grid-gap: 80px 7.5vw;
-  }
 
-  h4 {
-    margin-bottom: 22px;
-  }
+    * {
+      margin: 0;
+    }
 
-  p {
-    margin: 0;
+    li {
+      display: flex;
+      flex-direction: column;
+      gap: 22px;
+    }
   }
 }
 

website/src/pages/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import FeaturesList from './_features.md';
 import Preview from './_preview.md';
@@ -16,6 +17,15 @@ export default function Home() {
         <div className={s.m_width}>
           <div className={s.preview_content}>
             <Preview />
+
+            <div>
+              <Link
+                to="/docs/installation"
+                className="button button--secondary button--lg"
+              >
+                Get started ➞
+              </Link>
+            </div>
           </div>
         </div>
       </div>