diff --git a/README.md b/README.md index 1c9fdcd..b13e1c0 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,56 @@ # Hedgeblog -My [personal blog](https://www.prussiafan.club), because what the world needs is yet another semi-abandoned blog. +My [personal blog](https://www.prussiafan.club), because what the world needs is yet another semi-abandoned blog. All the code in this repo is licensed under the AGPL license, with the exception of Makoto, which is licensed under the MIT license. ## Technical Goals - Completely rewrite the blog, and get it working - Be able to be served statically (so it can be deployed on Github Pages or Cloudflare Pages for no dinero) -- No dependencies - or basically, I want to write every line of code +- No dependencies - or basically, I want to write every line of code (builtin modules like `path`, `fs` are ok of course) - No Javascript served to client - the web pages should be pure HTML and CSS +These goals are accomplished! + ## Non-Technical Goals - Make two things I can call "Ryuji" and "Saki" to go along with "Makoto" (those are the three main characters of one of the best manga series ever) - Move over some of the old blog posts (only the stuff I like), after rewriting them - Start writing stuff on the blog again, at least semi-regularly +The third goal may never be accomplished. + ## Makoto -Makoto is the markdown-to-html parser, made with no dependencies. It was made around two months before Ryuji and Saki, and is meant to be more of a standalone thing. This is the sole npm dependency of the project (because I published makoto to npm and wanted to make sure it worked). +Makoto is the markdown-to-html parser, made with no dependencies. It was made around two months before Ryuji and Saki, and is meant to be more of a standalone thing. This is the sole npm dependency of the project. I `npm install`ed it instead of just copying the file over mostly because I published Makoto to npm and wanted to make sure it worked. Also it has different license, documentation and stuff. It also has a very cool warnings feature, that isn't used in this project, but can be seen in action if you use the [Makoto Web Editor](https://makoto.prussia.dev). ## Ryuji -Ryuji is a simple templating system. It's Jinja/Nunjucks inspired but has less features. On the upside, Ryuji is around 200 lines of code and supports if statements, for loops, components and inserting variables. +Ryuji is a simple, Jinja/Nunjucks inspired templating system that supports `if` statements, `for` loops, components, and inserting variables. It isn't quite as fully featured as Jinja/Nunjucks, but on the upside, Ryuji is around just 200 lines of code, and worked very well for my usecase. I think it's pretty cool. -I didn't write any docs for it, but you can see the syntax if you look in the `templates` directory or look in `tests.ts`. +I didn't write any docs for it (yet), but you can see the syntax if you look in the `templates` directory or look in `tests.ts`. ## Saki Saki is the build system that puts it all together and outputs the blog's static html. Even more simple than Ryuji, it is just around 70 lines of code. + +## Running +First, install the dependencies (well, dependency, since Makoto is the only one). + +```bash +npm install +``` + +## Building +```bash +npm run build +``` + +## Previewing +```bash +npm run preview +``` + +This builds the project and then serves the `build` folder at [http://localhost:8042](http://localhost:8042). As you can see in `preview.ts`, this part also relies on no dependencies - only builtin module `http` is used. + +## Tests for Ryuji (templating) +```bash +npm run test +``` + +Uses Endosulfan, my very basic <40 LOC test assertion thingy. diff --git a/endosulfan.ts b/endosulfan.ts index eb6e852..b80d46a 100644 --- a/endosulfan.ts +++ b/endosulfan.ts @@ -1,4 +1,3 @@ - export let total_tests: number = 0; export let failed_tests: number = 0; export let passed_tests: number = 0; diff --git a/index.ts b/index.ts index 7e46103..a91fa4e 100644 --- a/index.ts +++ b/index.ts @@ -50,7 +50,7 @@ let tags: string[] = []; //also get all the tags since we are iterating through for (let i=0; i < posts_metadata.length; i++) { let post_metadata: PostMetadata = posts_metadata[i]; posts_serve_paths.push(`/posts/${post_metadata.slug}`); - let post_md_path: string = path.join(__dirname, `/posts/${post_metadata.slug}.md`); + let post_md_path: string = path.join(__dirname, `/posts/${post_metadata.filename}.md`); let md: string = readFileSync(post_md_path, "utf-8").replaceAll("\r", ""); let html: string = parse_md_to_html(md); for (let j=0; j < post_metadata.tags.length; j++) { @@ -65,9 +65,11 @@ for (let i=0; i < posts_metadata.length; i++) { html, tags_exist: post_metadata.tags.length !== 0, } + let next_post: PostMetadata = posts_metadata[i+1] ? posts_metadata[i+1] : posts_metadata[0]; posts_vars.push( { post, + next_post, author_expected: post.author.toLowerCase().startsWith("jetstream0") || post.author.toLowerCase().startsWith("prussia"), } ); diff --git a/posts/_metadata.json b/posts/_metadata.json index f4d4d05..744be47 100644 --- a/posts/_metadata.json +++ b/posts/_metadata.json @@ -6,5 +6,13 @@ "date": "30/12/1999", "author": "Prussia", "tags": ["example", "fake", "please remember to remove"] + }, + "another_example": { + "title": "Another Example!", + "slug": "another-example", + "filename": "another_example", + "date": "31/07/2023", + "author": "John Dough", + "tags": ["example", "jia", "please remember to remove"] } } \ No newline at end of file diff --git a/posts/another_example.md b/posts/another_example.md new file mode 100644 index 0000000..31c5e0d --- /dev/null +++ b/posts/another_example.md @@ -0,0 +1,14 @@ +Have some lorem ipsum. On the house! +... +No, I **insist**. Don't be shy. + +1. lorem +2. ipsum + +Repellat et vel consequuntur et. Suscipit animi ipsam tempora consequatur hic ea tenetur. Culpa rerum quos eum vero ea. +Aperiam quia facilis doloremque ducimus. Amet quas similique officia quas et enim aut. Non ut vel sint distinctio consectetur ipsa. +Illum id sit laboriosam corrupti veritatis et quam. Ut ea quaerat omnis doloribus enim. Sed atque ad est doloribus esse. + +Molestias omnis ut voluptatem. Eius vel deleniti quia quam odio. Adipisci voluptas dolor nulla voluptatem. Molestiae sunt veritatis qui ex atque molestiae nobis. Expedita repellat dolores adipisci. + +Deleniti totam molestiae necessitatibus rem dolores. Natus ut quos beatae aut. Corrupti eum provident perferendis eum dolores maiores eos. diff --git a/posts/example.md b/posts/example.md index a9fcbf8..22255bc 100644 --- a/posts/example.md +++ b/posts/example.md @@ -2,7 +2,7 @@ Hello! This is an **example** post *not meant* to be actually served on the blog [look its a link](https://example.com) -![and an image too??? no way](/favicon.ico) +![and an image too??? no way, this is a very safe hedgehog btw](/favicon.ico) ## Wow a header diff --git a/static/favicon.ico b/static/favicon.ico index a404e79..cf6be85 100644 Binary files a/static/favicon.ico and b/static/favicon.ico differ diff --git a/static/styles/global.css b/static/styles/global.css new file mode 100644 index 0000000..9504cdc --- /dev/null +++ b/static/styles/global.css @@ -0,0 +1,84 @@ +body, html { + margin: 0; + padding: 0; +} + +#main { + box-sizing: border-box; + min-height: 100vh; + padding: 35px 10vw; + color: #222; +} + +* { + font-family: 'Times New Roman', Times, serif; +} + +*:not(h1, h2, h3, h4, h5, h6) { + font-size: 1.02rem; +} + +#return { + position: absolute; + top: 5px; + left: 5px; +} + +a { + text-decoration: underline; +} + +a:link { + color: forestgreen; +} + +a:visited { + color: orchid; +} + +p { + margin: 7px 0px; + line-height: 1.4; +} + +h1, h2, h3, h4, h5, h6 { + font-family: Verdana, sans-serif; + margin: 0; + margin-bottom: 5px; +} + +ul { + margin: 0; + padding-left: 40px; +} + +input[type="checkbox"] { + margin-left: 0; +} + +#dark-mode { + position: fixed; + top: 5px; + right: 5px; + opacity: 0; +} + +#dark-mode:checked ~ #main { + background-color: #222; + color: white; +} + +label[for="dark-mode"] { + position: fixed; + top: 3px; + right: 3px; + font-size: 1.3rem; +} + +#dark-mode + label[for="dark-mode"]::after { + content: "🌙"; +} + +#dark-mode:checked + label[for="dark-mode"]::after { + content: "☀️"; +} diff --git a/static/styles/index.css b/static/styles/index.css index e69de29..41ca6c8 100644 --- a/static/styles/index.css +++ b/static/styles/index.css @@ -0,0 +1,16 @@ +h2 { + display: inline-block; +} + +#fancy-title:checked ~ h2 { + color: white; + padding-right: 0px 4px; + background-color: dodgerblue; + text-shadow: 1px 1px 1px gray, 4px 4px 1px blue; +} + +#checkboxes { + position: relative; + top: 0; + left: 0; +} diff --git a/static/styles/post.css b/static/styles/post.css index e69de29..9be4216 100644 --- a/static/styles/post.css +++ b/static/styles/post.css @@ -0,0 +1,16 @@ +#post-md { + margin-top: 7px; + display: none; +} + +#show-md:checked ~ #post-md { + display: block; +} + +#show-md:checked ~ #post-html { + display: none; +} + +#next-post-container { + padding-top: 10px; +} diff --git a/templates/components/dark-mode-checkbox.html b/templates/components/dark-mode-checkbox.html new file mode 100644 index 0000000..ff9f7ef --- /dev/null +++ b/templates/components/dark-mode-checkbox.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates/components/makoto-styling.html b/templates/components/makoto-styling.html new file mode 100644 index 0000000..c0d13d9 --- /dev/null +++ b/templates/components/makoto-styling.html @@ -0,0 +1,35 @@ + \ No newline at end of file diff --git a/templates/components/return.html b/templates/components/return.html index 1872b30..c98fa0d 100644 --- a/templates/components/return.html +++ b/templates/components/return.html @@ -1 +1 @@ -<- Get me outta here! \ No newline at end of file +<= Get me outta here! \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 83d47ef..e132131 100644 --- a/templates/index.html +++ b/templates/index.html @@ -5,17 +5,26 @@ prussia fan club + + -
- -
-
-

This is my blog. I also have a portfolio, retro style personal website, and a place where you can hire me.

+ [[ component:dark-mode-checkbox ]] +
+
+ +
+

prussiafan.club

+
+

This is my blog. I also have a portfolio, retro style personal website, and a place where you can hire me.

+
+
+
    + [[ for:posts:post ]] + [[ component:post-listing ]] + [[ endfor ]] +
+
\ No newline at end of file diff --git a/templates/post.html b/templates/post.html index 59bf581..d463fca 100644 --- a/templates/post.html +++ b/templates/post.html @@ -5,17 +5,20 @@ [[ post.title ]] + + [[ component:return ]] -
+ [[ component:dark-mode-checkbox ]] +

[[ post.title ]]

By [[ post.author ]] | [[ post.date ]] [[ if:post.tags_exist ]]| [[ for:post.tags:tag:index:max ]][[ tag ]][[ if:index:!max ]], [[ endif ]][[ endfor ]][[ endif ]]
- +
[[ html:post.html ]]
@@ -27,6 +30,12 @@ [[ endif ]] [[ endfor ]]
+ [[ if:post.slug:!next_post.slug ]] + + [[ endif ]] + [[ component:makoto-styling ]]
\ No newline at end of file diff --git a/templates/tags.html b/templates/tags.html index 8076ad4..3d014f5 100644 --- a/templates/tags.html +++ b/templates/tags.html @@ -5,17 +5,22 @@ "[[ tag ]]" posts + -
-

Search for posts with tag "[[ tag ]]"

-
-
- + [[ component:return ]] + [[ component:dark-mode-checkbox ]] +
+
+

Search for posts with tag "[[ tag ]]"

+
+
+
    + [[ for:posts:post ]] + [[ component:post-listing ]] + [[ endfor ]] +
+
\ No newline at end of file