Getting starting

by Jarett Lee on 2020-02-20

My backlog

My first target today is to get the website up so that I start journaling.

  1. Make the game project template work for phaser-every-day
  2. Set up the git repo

Difficulty

I want multiple html files and multiple js files and multiple projects, how do I organize my repo?

Questions

Should I use Jekyll?

I've set up complicated things with Jekyll before and I spent more time wrestling Jekyll than producing content, so I think "simple" folder structuring should work.

Split by project or split by file type?

I foresee files that are in the same project will frequently be edited at the same time, while I think I will rarely edit all the html files at the same time. So, I want the project files close to each other.

1. Split each project into it's own folder

2. Add entry points for each index file in webpack

https://webpack.js.org/concepts/entry-points/

module.exports = {
    entry: {
        "tic-tac-toe": './src/project/tic-tac-toe/index.ts',
        "unknown-second-project": './src/project/unknown-second-project/index.ts',
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(
            __dirname,
            "dist",
            "scripts",
        ),
    },
};

This gave me the following error since now webpack is trying to write both the entry index files to bundle.js.

ERROR in chunk unknown-second-project [entry]
bundle.js
Conflict: Multiple chunks emit assets to the same filename bundle.js (chunks tic-tac-toe and unknown-second-project)

3. Add unique output points for bundles in webpack

Add the special string "[name]" to the output filename. This will create the files tic-tac-toe.bundle.js and unknown-second-project.bundle.js.

module.exports = {
    entry: {
        "tic-tac-toe": './src/project/tic-tac-toe/index.ts',
        "unknown-second-project": './src/project/unknown-second-project/index.ts',
    },
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(
            __dirname,
            "dist",
        ),
    },
};

4. Load html files to same path in dist

https://webpack.js.org/loaders/html-loader/#export-into-html-files

npm install --save-dev file-loader extract-loader html-loader
// webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "file-loader?name=[name].[ext]",
                        options: {
                            name: "[path][name].[ext]",
                            context: "src",
                        },
                    },
                    "extract-loader",
                    "html-loader",
                ],
            },
        ],
    },
};
// src/projects/tic-tac-toe/scripts/index.ts
import "../index.html";

This creates dist/projects/tic-tac-toe/index.html and dist/projects/unknown-second-project/index.html.

5. Add src/index.html to dist

https://github.com/webpack-contrib/copy-webpack-plugin

npm install --save-dev copy-webpack-plugin
const CopyPlugin = require("copy-webpack-plugin");

const config = {
    plugins: [
        new CleanWebpackPlugin(),
        new CopyPlugin(["src/index.html"]),
    ],
};

module.exports = (env, argv) => {
    if (argv.mode === "development") {
        config.devtool = "source-map";
        config.devServer = {
            contentBase: "./dist",
            writeToDisk: true,
        };
    }

    return config;
};

To be continued

Other questions

Am I going to have a journal entry for every file?

I see right now that answering "how do I organize my repo" (I'm on point 2 as of writing this question) is something that could take multiple days. Do I want to split these journal entries?

For that matter, what's the point of these journal entries when my plan is to see if I enjoy "making and publishing games"?

Actually, part of publishing a game is communicating with your players. Slay the Spire and Factorio, two popular indie games, are good at communicating their current progress. Slay the Spire through Reddit and Discord and Factorio through Reddit and blog posts. The goal of this journal could be to practice communicating.

Alternatively, I could also write this journal with the goal of attracting attention from other game developers. I imagine that game developers have more relevant knowledge than the general public. I'll also be writing about technical topics, so game developers are a good audience match.

Also, I always write for myself. What would I enjoy writing the most and what would I get the most out of reading? How-to tutorials, reasoning behind decisions, and emotions - pretty much what I'm writing already.

Back to the main question... I think I should do day-by-day journaling. I can foresee my future self struggling to organize the tutorials. A timeline has natural organization. As a side-effect, this guarantee a commit every day, will hopefully make an aesthetically pleasing Github timeline.

Word choice?

These things don't matter much, but they bother me a lot. (This is also why I have a stupid .eslintrc.js file)

Should I keep my posts and development branches separate?

I would like if I could innately have my post and development branches separate. This is possible if I use two repos or two branches, but I really want the posts and code to be as close as possible. I can't think of a simple way to keep them separate in git but in the same folder, so I'll just keep them together.

I'll start all the post commits with Post.

Why did I write this post in markdown?

I'm a silly guy. I forgot that I wasn't using Jekyll. However, I am very comfortable writing in markdown and webpack has a markdown-loader, so I'm going to keep using markdown.