vitonsky / blog Goto Github PK

Try docusaurus or astro

Move common code to a special directory and never import server code to a client and vice versa

Currently we use next-mdx-remote package to compile MD/MDX files to react view.
This package compile markdown text to a javascript that execute in eval later.

This approach is potentially dangerous, because next-mdx-remote can insert any code and eval it later.

We have to compile markdown text to abstract syntax tree and render this tree later

{
	"pageProps": {
		"post": {
			"url": "/blog/2022/05/22/first-post",
			"source": {
				"compiledSource": "/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    p: \"p\"\n  }, _provideComponents(), props.components);\n  return _jsxs(_Fragment, {\n    children: [_jsx(_components.p, {\n      children: \"Welcome to my blog. I've create it to expressing my opinion, primarily about programming.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"My plan are writing ideas to my blog and refer other people here later, to avoid repeating my point many times.\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Today, social media are hide posts of people with undesirable points of view and even remove all their content. Users is not have control on own posts. This is why i create my blog instead of account on popular site.\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n    children: _jsx(_createMdxContent, props)\n  })) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\n",
				"scope": {}
			},
			"previewText": "Welcome to my blog. I've create it to expressing my opinion, primarily about programming.",
			"readingTime": {
				"minutes": 0.365,
				"words": 73
			},
			"date": 1653175800000,
			"title": "First post",
			"previewImage": null,
			"coverImage": null,
			"description": null,
			"lang": null,
			"tags": [],
			"keywords": []
		}
	},
	"__N_SSG": true
}

Use native font style -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif

• Refactor posts processor
• Make API stable
• Fix bug when rename post and attachment with relative path delete and make "unavailable"
• Write roadmap how to unify server to use in other projects about SSG

To improve maintainability

Let's split logic to API server and blog frontend + BFF.

We should have 3 directory:

• content: posts, images, attachments
• server: content processing
• site: frontend and all things to generate static site

Something like this for inspiration https://github.com/bmshamsnahid/Markdown-Blog-Parser
We can make package from this.

Server responsibility:

• Process a md/mdx files to any formats
• Provide an API to build any site structure

Features:

• Process files as once as and in watch mode
• Extensible API
• User can specify parameters in config, including basePath for site, path to directory with content and fsRoot which limit top directory to access to content files

Use posts with the same tags if possible or just pick random posts

We have to compress images, but keep legacy urls.

We may compress images, but use hash of original file as before

Required to make references to headers

Currently we generate RSS and sitemap in site/pages/index.tsx and copy attachments on server side.
Let's move any logic about static files to one place

NPM scripts too long and unmaintainable. Move logic to a task runner

It's like tweet, but for mastodon

On main page https://vitonsky.net/ post https://vitonsky.net/blog/2022/12/03/interface-expressiveness are have incorrect date, that lead to mismatch while hydration

Obey the closeness rule

Build files for each commit in PR, but deploy only by change some files by push in master

Lint typescript, typos, analyze code

• Write post about blog
• Update readme and description
• Add info about how to build it

• Add link to linkedin
• Add resume

To give feedback