Project Titan 😃 Document
Github: Project Titan
Feature/TODO
- [ ] Custom Post Route
- [ ] Post Translation
- [x] Language Selector
Dev
- Fork and STAR it, please.
- Clone it locally
npm install
oryarn
npm run dev
oryarn dev
Post
Post Header
Similar to YAML Header in Karmdown
YAML Header is required for all posts.
For post file posts/jekyllmarkdowntoc.md
with below YAML Header:
---
title: 'Post Title' // (Required)
categories: 'Life' // (Optional)
date : '2017-05-19' // (Required)
tags: ['A', 'B'] // (Optional)
color?: "primary" | "secondary" // (Optional) Determines the color in post list, default to grey
---
Will be routed as
/Life/2017/05/19/jekyllmarkdowntoc
/Life/2017/05/19/jekyllmarkdowntoc.html // Avaiable on prod only
Post Content
Check the files in /posts
then you may understand everything.
Implements with react-markdown
You can custom the renderer in file components\MarkdownRenderer.tsx
Lightbox
You don't need to care about it, at all.
It may show the lightbox on click of a image in any post.

Implements with react-image-lightbox
Code Highlighter
You don't need to care about it, at all.
Example:
const a = 100;
console.log(a);
const f = (v) => v + 5;
f(a);
Implements with highlight.js
Highlighter Theme
Change the css in _app.tsx
:
import "highlight.js/styles/monokai.css";
Table of Content
You don't need to care about it, at all.
A responsive TOC will be automatically rendered in the sidebar.

Implements with tocbot
TOC Customization
Check the attributes in Sidebar.tsx
:
tocbot.init({
tocSelector: ".sidebarMid-Toc",
contentSelector: ".main",
headingSelector: "h1, h2, h3, h4, h5",
hasInnerContainers: true,
});
Internationalization/i18n
Add Locale Strings
You can add translation set in locale.ts
export const locale = {
siteTitle: {
zh: "泰坦計劃",
en: "Project Titan",
},
}
Display Translation
Usage with translate function translationString
:
console.log(translationString({
textKey: "siteTitle",
}))
Usage with hooks useTranslator
:
const Example = (): JSX.Element => {
const { translate, locale } = useTranslator();
return <div>{`${translate(locale.siteTitle)}`}</div>;
};
Set Language
const Example = (): JSX.Element => {
const { setLanguage } = useTranslator();
return <div onClick={() => setLanguage("zh")}>Change Language</div>;
};
Static Pages
Static Pages with React Component
Here is an example of a static page with React components as content:
const About = (): JSX.Element => (
<PostTemplate
title={`${translationString({
textKey: "about",
})}`}
showFooter={!DEBUG_MODE_SINGLE_PAGE}
showCommentBox={!DEBUG_MODE_SINGLE_PAGE}
content={(
<Box>
<Box>JSX Here</Box>
</Box>
)}
/>
);
export default About;
Put these code to /pages/about.tsx
then NextJS will route it as /about
(example)
See more about Dynamic Routes
Static Pages With Markdown
Here is an example of a static page with pure markdown as content:
const markdown = `
# Title
# Title?
## Title!
## Title~
### Title-
`;
const CustomPage = (): JSX.Element => (
<PostTemplate
title="404"
showFooter={false}
showTOC={false}
content={(
<>
<MarkdownRenderer content={markdown} />
</>
)}
/>
);
export default CustomPage;
Migrate From Project Gaia to Project Titan
That is easy to migrate
Provide all posts with valid date in the post header
--- title: 'Post Title' // You already have this in Jekyll categories: 'Life' date : '2017-05-19' // Make sure you have this attribute, date should be in format YYYY-MM-DD tags: ['A', 'B'] ---
NextJS is different from Jekyll, you may need to build before deploy.
- Run
yarn run build
ornpm run build
to create a production version - Upload to your pages service
- Run
(You can use Github Action, Jenkins for CI/CD or Vercel to simplify the build process)
Thanks
- Vercel
- NextJS
- Material UI
- tocbot
- react-markdown
- react-image-lightbox
- Doctor Jones