๐ Table of Contents
My personal blog for front-end SPA leveraging Next.js's SSG feature.
- Plain text v.s. code syntax block (#codeBlock or .columnRight)
- Native Language v.s. Foreign Language (#foreignLanguageBlock or .languageRight)
- Support browser: Notice that the css for Subtitle theard line only works for browsers supporting
:has()selector(Only Chrome^105 and Safari support) - Support heading: Only work for heading 2 and heading 3 in fron-end intendedly. Any heading 1 in blog post content could slightly break UI, which is why we convert heading 1 in markdown db into heading 2 as per previos chapter explains.
Node version v14.17.0
-
Clone the repo
git clone https://github.com/benson00077/tlog-front
-
Install NPM packages
npm install
-
Set up
.env# /.env.local # connect to backend api listening on port 3001 NEXT_PUBLIC_API_URL_DEV=http://localhost:3001/graphql NEXT_PUBLIC_API_URL_PRO=https://<myDomain>/graphql
-
Be aware of that mongo db have different URI format by version. The backend logic this porject connect to uses the second one.
# 1. mongodb://[username:password@]host1[:port1][,host2[:port2],...[,hostN[:portN]]][/[database][?options]] # 2. mongodb+srv://[username:password@]host[/[database][?options]]
- Use pm2 to manamge muiltiple node apps.
$ npm run build # as docs suggested $ pm2 start npm --name <myAppServerName> -- start
- P.S. Building as docs' suggest is a bit weird though. See this Q&A.
- Using Conventional Commits.
- Set up following conventional-changelog. Include .husky/commit-msg.
- See convention here
- try locally
echo "foo: dummy commit msg" | ./node_modules/.bin/commitlint
Foreign language in db is stored like what you do in makrdown codeblock but adding a hint text language-foreign, like bellow:
Hello, this paragraph is parallel w/ the below text
```language-foreign
ไฝ ๅฅฝ๏ผ้ๆฎตๆๅญๅธๆๅฏไปฅ่ทไธ้ข็ๆๅญไธฆๅ(viewpiont width > 1440px)ใ้ๅจๅ็ซฏๆธฒๆๆ html ๆ็ตๆ่ฎๆ <p> ่ไธๆฏ <pre> ๅ
ง็ <code>
```</br> is what you want if you want to break row in a same paragraph in db. In other words, break rows by 'enter' would create a new paragraph in final html. </br> is what you want to keep parallel feature in same paragraph. Example as below only paragaprh <2> and <4> would be parallel w/ each other :
<1> This paragraph would NOT parallel
<2> This paragraph would parallel w/ below block</br> <3> And this snippet as well !
```language-foreign
<4> ้ๆฎตๅญๅจ DB ็ๆๅญ๏ผๅธๆๆ็ตๅ็พๅจ UI ไธๅฏไปฅ่ทไธ้ข็ๆๅญไธฆๅใ
```- Start your markdown files from heading 1.
- Don't use heading 6.
- Do NOT skip heading number. Make sure keep heading tags in ascending order, esspecially h1 , h2 in markdown file / db.
-
Only the title of blog post would be rendered as heading 1 in front-end, regarding that multiple HTML h1 tag is bad for SEO.
# 3. ๐ข Heading 1 in db ## 3.1. ๐ be converted to Heading 2 in front-end ### 3.1.1. ๐ Heading 2 > Heading 3, and so on
- Use following two type of quote in markdown
1. quote starts w/ two tabs > 2. quote starts with symbol '>' >> 3. quote inside quote - They are redered as below
<div class="quote"> <pre> <code> 1. quote starts w/ two tabs <code> </pre> </div> <blockquote> <p> 2. quote starts with symbol '>' </p> <blockquote> <p> 3. quote inside quote </p> </blockquote> </blockquote>
- Implement better Post List page
- Archive page
- About me page
- Optimize loading animation. Consider using React Spring with next router obj see me. Or Framer Motion.
- Set mermaid diagrams as remarkPlugins. see me
- Collect the TODOs scatterd around this project
- Highlight line in code block
- Debounce and Throttle. see BackToTopBtn.tsx
- SSR styled components - w/
babel-plugin-styled-componentsstackoverflow - scrollTop w/ requestAnimationFrame
- here describe the problem and logic duplication between
getServerSidePropsanduseQuery - here is the discusstions thread
- here is the solution provided in that thread
- What if I use
getServerSidePropswithuseQuery()?- The client is a different instance because there are TWO clients - one one server, that get's reinstated on every request and one on client, that gets hydrated with the data you send yourself in getServerSideProps. If you did not do it, you would refetch all the data on the client again, as the client cache wouldn't be populated.
- P.S. What about the ssrMode option in apollo docs ? Here referring a solution use next-with-apollo package.
Has the flag method getServerSideProps that lets the lib know you want that specific page to be server-side rendered whilst providing the page component with the data (prefilled in its props argument)
Has that special method called getDataFromTree that finds in your page tree all components that use the hook useQuery. They then execute all queries at once to allow you to send your page prefilled with data to the browser.
see comments in code apollo.ts