📋

Meta

Project Delta

~7 mins read

Taking notes clears my mind and it’s fun

There are many ways to do it. I searched for a simple and flexible way. Publishing should be simple, readable, accessible, beautiful, and personal

So here is my process so far

Write

I write my notes in markdown files

Each file has a unique name eg. my-file-name

Files link to each other with wikilinks eg. Psychology

Files can also tag to each other in markdown front-matter, eg. tags: psy

Markdown files are grouped under dirs with short names eg. psy, math, lit, ux etc

Dirs have a tag file with the proper dir name, eg. psy dir has psychology.md

There is a yaml file listing them, eg. func: functional-programming

Any file under a dir is automatically linked to the tag file in its dir

If you tag any file to psy, you will see its link in url /psychology

Dirs have at most one child dir, flat is better than nested

Build

I use jekyll to turn markdown to html

Jekyll comes with a few folders

You can define your templates _layouts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<article>

  <h1 id="page-title">Project Delta</h1>

  <article class="note">
  <p>
    <a href="javascript:void(0);" id="copyToClipBoard" onclick="copyToClipBoard();" title="Copy link">📋</a>
</p>
<script>
    const copyButton = document.getElementById("copyToClipBoard");
    // only show if no url box 
    if (window.matchMedia('(display-mode: standalone)').matches) {
        // ok 
    }
    else {
        copyButton.style.display = "none";
    }
    function copyToClipBoard() {
        navigator.clipboard.writeText(window.location.href);
        copyButton.innerHTML = "✅ Link copied!";
        setTimeout(function () {
            copyButton.innerHTML = '📋';
        }, 500);
    }
</script>

  <span class="taglist">
  
</span>


  <h1>Meta 
  </h1>  
 
  





  


  



<ul>
    
    
        <li><a href="https://selimslab.github.io/2D-Graph/">2D Interactive Graph 🗺️</a></li>
    
        <li><a href="https://selimslab.github.io/3D-Graph/">3D Interactive Graph</a></li>
    
        <li><a href="https://selimslab.github.io/project-delta/">Project Delta</a></li>
    
        <li><a href="https://selimslab.github.io/resume/">Resume</a></li>
    
</ul>




    


</article>





<article class="ideas">
<p style="font-size:1.4rem; margin: 0;">
    <a href="javascript:void(0);" title="Idea Machine" onclick="get_random_idea();">🎰</a>
</p>
<p id="random_idea" style="white-space: pre-line;"></p>

</article>

<script src="/assets/js/random_idea.js"></script>

<script>
get_random_idea()
</script>





</article>

You can choose layout by path

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

collections:
  NOTES:    
    output: true 
    permalink:  /:title/


defaults:
  -
    scope:
      path: "" # an empty string here means all files in the project
    values:
      layout: post
  -
    scope:
      path: "*/code/*"
    values:
      layout: code

Jekyll has _includes to define reusable html parts

Jekyll runs ruby files under _plugins, here I iterate my files and replace wikilinks with markdown links

Deploy

I deploy to github pages.

This github action automatically builds and deploys upon commit

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

# This workflow uses actions that are not certified by GitHub.
# They are provided by a third-party and are governed by
# separate terms of service, privacy policy, and support
# documentation.

# Sample workflow for building and deploying a Jekyll site to GitHub Pages
name: Deploy Jekyll site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["master"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup Ruby
        uses: ruby/setup-ruby@0a29871fe2b0200a17a4497bae54fe5df0d973aa # v1.115.3
        with:
          ruby-version: '3.0' # Not needed with a .ruby-version file
          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
          cache-version: 0 # Increment this number if you need to re-download cached gems
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v2
      - name: Build with Jekyll
        # Outputs to the './_site' directory by default
        run: bundle exec jekyll build --baseurl "$"
        env:
          JEKYLL_ENV: production
      - name: Upload artifact
        # Automatically uploads an artifact from the './_site' directory by default
        uses: actions/upload-pages-artifact@v1

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: $
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

🔀

🎰