Source Code for the Ockam.io Website
This repository contains all the content and code for Ockam.io.
Install all the dependencies - npm install
Run npm run prepare:hooks
command.
Run npm run start:dev
command.
This repo is based on Nextjs framework, so many of folder are reflecting framework requirements. Here is the quick look of the main folders:
public
- Next.js uses this directory to statically serve files like the robots.txt or the favicon.ico and other assets. Since this page is using markdown, it's also use to store all blog post assetssrc/api
- API related clients and helper functionssrc/assets
- assets (like icons, images) for regular pagessrc/components
- sharable components across the website.src/components/mdx
- components used while converting markdowns elements to HTML. You can find mapping in index.tsx
src/consts
- constants variables shared across the appsrc/content
- this is where markdown files livessrc/contextProviders
- React contexts and it's providerssrc/hooks
- sharable React hookssrc/layouts
- React components responsible for page layoutingsrc/pages
- Nextjs pages that reflects public pages urlsrc/theme
- theme and styles related stuff. Also extension for ChakraUi which is the default user interface librarysrc/typings
- Typescript typingssrc/utils
- Sharable pure function used across the appsrc/views
- React components which are used as "blocks" for the pages.All files related to generating html from md files are stored under src/content/blog
folder.
Inside the md file, there is `category' meta field, that reflect to sidebar category menu.
Article in sidebar menu are ordered by date
metadata field inside markdown file (descending)
public/blog
Below are listed described available metadata fields under a certain path of src/content/blog
folder:
To add a blog post:
src/content/blog
, with proper metadata fieldsdevelop
branchFor SEO purpose it's highly recommended to add redirect for pages that no longer exist but was indexed by google.
Go to next.config.js
file and add proper redirect there. For more info check out the documentation https://nextjs.org/docs/api-reference/next.config.js/redirects
Styleguide page is divided into two general parts:
This one is build using regular React components and nextJS approach. Content of the section was isolated to separate file for easier modifications.
You can find content definitions here: src/consts/styleGuide/*
.
All assets for this section (images, fonts, graphics, etc), should live under public
folder. One exception for that are icons, that are dynamically generated from /src/assets/icons
folder.
Miscellaneous section lives here: src/content/style-guide/miscellaneous.md
. This one is edited using markdown file, extended to use JSX in markdown content (MDX). While playing with this section, all your assets linked inside this file, have to live under /public
folder.
You can use one special component prepared for this section purpose, which is StyleGuideResourceItem
. Using it under image, will display captions under with nice visual manner. Here is a quick example:
<StyleGuideResourceItem
marginBottom={10}
title="Sample title"
description="Sample description"
/>