From 6b6976f4ccf38e977a3b03bb015045432d3f8cd7 Mon Sep 17 00:00:00 2001 From: weareoutman Date: Wed, 22 Jan 2025 14:32:19 +0000 Subject: [PATCH] deploy: 57aaeca85fd07059f9f1fe0d0a14599abf00ae57 --- .nojekyll | 0 404.html | 2 + CNAME | 1 + assets/favicon.svg | 8 ++++ assets/main.861e055a.css | 12 +++++ customizing-components/index.html | 2 + features-tracking/index.html | 19 ++++++++ index.html | 15 +++++++ introducing-plain-blog/index.html | 73 +++++++++++++++++++++++++++++++ 9 files changed, 132 insertions(+) create mode 100644 .nojekyll create mode 100644 404.html create mode 100644 CNAME create mode 100644 assets/favicon.svg create mode 100644 assets/main.861e055a.css create mode 100644 customizing-components/index.html create mode 100644 features-tracking/index.html create mode 100644 index.html create mode 100644 introducing-plain-blog/index.html diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/404.html b/404.html new file mode 100644 index 0000000..d1df9c1 --- /dev/null +++ b/404.html @@ -0,0 +1,2 @@ +404 Not Found
Plain BlogGitHub

404 Not Found

Oops! Something went wrong.

+

Go back to homepage?

\ No newline at end of file diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..f98e248 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +plain-blog.js.org diff --git a/assets/favicon.svg b/assets/favicon.svg new file mode 100644 index 0000000..b8450b0 --- /dev/null +++ b/assets/favicon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/main.861e055a.css b/assets/main.861e055a.css new file mode 100644 index 0000000..687adae --- /dev/null +++ b/assets/main.861e055a.css @@ -0,0 +1,12 @@ +*, +::before, +::after{box-sizing:border-box;background-repeat:no-repeat}::before, +::after{text-decoration:inherit;vertical-align:inherit}:where(:root){cursor:default;line-height:1.5;word-wrap:break-word;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}:where(body){margin:0}:where(h1){font-size:2em;margin:0.67em 0}:where(dl, ol, ul) :where(dl, ol, ul){margin:0}:where(hr){color:inherit;height:0}:where(nav) :where(ol, ul){list-style-type:none;padding:0}:where(nav li)::before{content:"\200B";float:left}:where(pre){font-family:monospace,monospace;font-size:1em;overflow:auto}:where(abbr[title]){text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b, strong){font-weight:bolder}:where(code, kbd, samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(audio, canvas, iframe, img, svg, video){vertical-align:middle}:where(iframe){border-style:none}:where(svg:not([fill])){fill:currentColor}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:where(button, input, select){margin:0}:where(button, [type="button" i], [type="reset" i], [type="submit" i]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){margin:0;resize:vertical}:where([type="search" i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button, +::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(dialog){background-color:white;border:solid;color:black;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(details > summary:first-of-type){display:list-item}:where([aria-busy="true" i]){cursor:progress}:where([aria-controls]){cursor:pointer}:where([aria-disabled="true" i], [disabled]){cursor:not-allowed}:where([aria-hidden="false" i][hidden]){display:inline;display:initial}:where([aria-hidden="false" i][hidden]:not(:focus)){clip:rect(0,0,0,0);position:absolute}html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,"Segoe UI","Roboto","Ubuntu","Cantarell","Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}code, +kbd, +samp, +pre{font-family:ui-monospace,"Menlo","Consolas","Roboto Mono","Ubuntu Monospace","Noto Mono","Oxygen Mono","Liberation Mono",monospace,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}html{--primary-color:rgb(230,59,26)}header, +footer, +main{width:100%;max-width:704px;padding:16px;margin-left:auto;margin-right:auto}a, +a:visited{color:rgb(230,59,26);color:var(--primary-color);-webkit-text-decoration:none;text-decoration:none}a:hover{box-shadow:0 1px 0 0 currentColor}article > p > a > img, +article > p > img{display:block;max-width:100%;margin-left:auto;margin-right:auto}:not(pre) > code{background-color:hsl(10,20%,94%);color:rgb(230,59,26);color:var(--primary-color);padding:0 3px} \ No newline at end of file diff --git a/customizing-components/index.html b/customizing-components/index.html new file mode 100644 index 0000000..a0918bd --- /dev/null +++ b/customizing-components/index.html @@ -0,0 +1,2 @@ +Customizing Components
Plain BlogGitHub

Customizing Components

Docs to be done...

+

Please refer to the source code first.

\ No newline at end of file diff --git a/features-tracking/index.html b/features-tracking/index.html new file mode 100644 index 0000000..004b421 --- /dev/null +++ b/features-tracking/index.html @@ -0,0 +1,19 @@ +Features Tracking
Plain BlogGitHub

Features Tracking

Plain Blog is under development yet.

+
    +
  • MDX pages
    • +
  • JSX pages
    • +
  • Zero client-side JavaScript
    • +
  • SEO optimized
    • +
  • Auto generated index page that lists all articles
    • +
  • Custom css
    • +
  • Custom page components
    • +
  • Code highlighting with Shiki
    • +
  • Code highlighting with Prism
    • +
  • Custom base url
    • +
  • Nested folders in content
    • +
  • Images (image mark in MD, imports in MD/JS)
    • +
  • Images optimized (auto resized to no more than 1400px wide, by default)
    • +
  • Images of url() in css
    • +
  • Social image by article
    • +
  • TypeScript (wait for Deno to support module hooks)
    • +
\ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..801a56d --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ +Plain Blog

Plain Blog

GitHub

Introducing Plain Blog

The Plain Blog builder which emits zero client-side JavaScript. With minimal configuration, your blog will be fast and elegant. +Although it emits no JavaScript to the the client-side, you can composite your page layout using React components, writing content in…

Features Tracking

Plain Blog is under development yet. + + MDX pages + JSX pages + Zero client-side JavaScript + SEO optimized + Auto generated index page that lists all articles + Custom css + Custom page components + Code highlighting with Shiki + Code highlighting with Prism + Custom base url + Nested folders…

Customizing Components

Docs to be done... +Please refer to the source code first.…

\ No newline at end of file diff --git a/introducing-plain-blog/index.html b/introducing-plain-blog/index.html new file mode 100644 index 0000000..6622011 --- /dev/null +++ b/introducing-plain-blog/index.html @@ -0,0 +1,73 @@ +Introducing Plain Blog
Plain BlogGitHub

Introducing Plain Blog

The Plain Blog builder which emits zero client-side JavaScript. With minimal configuration, your blog will be fast and elegant.

+

Although it emits no JavaScript to the the client-side, you can composite your page layout using React components, writing content in markdown or MDX. So blogs built with similar tech like Gatsby can migrate to Plain Blog with little effort.

+

It's fast, both at run time and build time. For my own personal blog, which includes a dozen of articles and about 50 images, it builds in less than 1 second on my Mac. While it was using Gatsby, it would take about 30 seconds for a cold build, and 10 seconds for a warm build.

+

Under the hood, it uses the Node.js native module hooks, as known as node loaders, to build all the pages. With module hooks, Node.js can import files other than js, such as jsx/md/css/png, actually any specifiers including http resources. So there are no any pack tools nor pack mechanisms involved, just several transformer tools like MDX which supports markdown mixed with React, and SWC which transforms jsx code, and PostCSS which let you use tomorrow's CSS today.

+

And because it uses native imports, we can use node --watch for development, so no watch tools nor extra configs are needed.

+

The whole system is pretty simple, it just works, and you can concentrate on creating your content.

+

Check the source code out on GitHub: https://github.com/weareoutman/plain-blog.

+

For beginners, try this template repo on Github: https://github.com/weareoutman/plain-blog-template.

+

When should I use it

+

You want to build a website which serves static content only, includes a personal blog, a documentation site, etc.

+

You can include some <script> tags in your customized components if you have to, which can use traditional DOM manipulation JavaScript to implement some simple interactions. But be aware of that React hydration is not supported, and likely will not be.

+

When should I NOT use it

+

You want to build a rich client-side website, which needs lots of interactions that can only be implemented with JavaScript.

+

Usage

+

You can try this template repo on Github: https://github.com/weareoutman/plain-blog-template, or build it from the ground up.

+

By default, the Plain Blog recognize the following file structure by default:

+
your-blog
+├── content
+│   ├── hello-world.md
+│   ├── my-article.mdx
+│   └── my-page.jsx
+├── assets
+│   └── favicon.png
+├── dist
+└── package.json
+

For md/mdx/jsx files in content, they will be compiled to html files. For example content/hello-world.md will compiled to dist/hello-world/index.html, so you can visit /hello-world/ from your website. For other files in content not starting with a dot, will be copied as it is.

+

If you choose to build it from scratch, first create package.json:

+
{
+  "type": "module",
+  "scripts": {
+    "build": "plain-blog",
+    "dev": "NODE_ENV=development plain-blog",
+    "watch": "NODE_ENV=development plain-blog node --watch ./node_modules/.bin/plain-blog",
+    "serve": "serve dist"
+  },
+  "devDependencies": {
+    "plain-blog": ">=0.4.0",
+    "serve": "^14.2.4"
+  }
+}
+

Then run npm install && npm run build. And your site has been built, run npm run serve, or serve the dist folder with any static server.

+

The index page may have only a header and footer by now, try adding some markdown files in articles, and run npm run build again.

+

In most case, you need some custom css, as well as other configs to improve your blog. Add a config file named plain.config.js in your project root:

+
// @ts-check
+/** @type {import("plain-blog").SiteConfig} */
+export default {
+  // Fill in with site metadata to improve SEO
+  site: {
+    title: "My Plain Blog",
+    description: "Personal blog of xxx",
+    url: "https://example.com",
+  },
+  styles: [
+    // You can use http resources for convenient, but it slows down the build.
+    // "https://unpkg.com/sanitize.css",
+
+    // Recommend to install css packages then add them prefixed with `~`:
+    // "~sanitize.css",
+    // "~sanitize.css/typography.css",
+
+    // Also some local css files
+    "src/styles.css",
+  ],
+}
+

With a little more work, such as customizing components, it can look nicer, just like my personal blog.

+

Read more:

+ +

License

+

MIT

\ No newline at end of file