.forgejo/workflows/build.yml

@@ -1,25 +0,0 @@
-on: [push]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup Ruby
-        uses: https://github.com/ruby/setup-ruby@8575951200e472d5f2d95c625da0c7bec8217c42 # v1.161.0
-        with:
-          ruby-version: '3.2.2' # 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
-      # - uses: actions/setup-node@v4
-      #   with:
-      #     node-version: 22
-      #     cache: 'npm'
-      # - name: Install node dependencies
-      #   run: npm install
-      # - name: Build
-      #   run: npm run build
-      - name: Build
-        run: bundle exec jekyll build
-      - name: Copy
-        run: cp -r dist/* /pages/

.gitignore

@@ -130,4 +130,4 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
-#assets
+assets

Gemfile.lock

@@ -12,7 +12,6 @@ GEM
     ffi (1.15.5)
     forwardable-extended (2.6.0)
     google-protobuf (3.22.2-x86_64-darwin)
-    google-protobuf (3.22.2-x86_64-linux)
     http_parser.rb (0.8.0)
     i18n (1.12.0)
       concurrent-ruby (~> 1.0)
@@ -62,8 +61,6 @@ GEM
     safe_yaml (1.0.5)
     sass-embedded (1.59.3-x86_64-darwin)
       google-protobuf (~> 3.21)
-    sass-embedded (1.59.3-x86_64-linux-gnu)
-      google-protobuf (~> 3.21)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     unicode-display_width (2.4.2)
@@ -71,8 +68,6 @@ GEM
 
 PLATFORMS
   x86_64-darwin-21
-  x86_64-darwin-23
-  x86_64-linux
 
 DEPENDENCIES
   jekyll (~> 4.3)
@@ -81,4 +76,4 @@ DEPENDENCIES
   jekyll-sitemap (~> 1.4)
 
 BUNDLED WITH
-   2.5.9
+   2.4.6

README.md

@@ -1,4 +1,3 @@
 # homepage
 
-i have like a bunch of these now but i want to try to make one that's a video game lmao
- 
+i have like a bunch of these now but i want to try to make one that's a video game lmao

_assets/index.js

@@ -0,0 +1,20 @@
+import { init as init_lens } from './js/lens.js'
+import { init as init_cartridge } from './js/cartridge';
+import { init as init_pong } from './js/pong';
+
+
+// Test import of an asset
+// import webpackLogo from '@/images/webpack-logo.svg'
+
+// Test import of styles
+import './index.scss';
+
+
+// let main = document.getElementsByTagName(main);
+// console.log('name', main[0].getAttribute('name'))
+// if (main[0].getAttribute('name') === "home"){
+  init_lens();
+  console.log('init lens');
+  init_cartridge();
+  init_pong();
+// }

_assets/js/cartridge.js

@@ -0,0 +1,85 @@
+const CART_SIZE = {
+  x: 300,
+  y: 200
+}
+
+function slot_position(){
+  let slot = document.querySelector('#slot');
+  return slot.getBoundingClientRect()
+}
+
+function list_carts(){
+  let carts= document.querySelectorAll('.cartridge-metadata');
+  return carts;
+
+}
+
+
+function showPopups(){
+  let carts = list_carts();
+
+  let cartPopups = carts.forEach((cart) => {
+    console.log('cart', cart);
+    let popup = window.open(
+        cart.getAttribute('url'),
+        cart.getAttribute('title'),
+        `popup=true,width=${CART_SIZE.x+10},height=${CART_SIZE.y+10}`
+        )
+    popup.screen
+  })
+}
+
+
+
+// function store_slot_position(){
+//   let slot_pos = slot_position();
+//   console.log(slot_pos);
+//   window.setTimeout(poll_position, 1000);
+// }
+
+function store_position(){
+  let name = document.querySelector('.cartridge .label').textContent;
+  let position = {
+    x: window.screenX,
+    y: window.screenY,
+    width: window.outerWidth,
+    height: window.outerHeight
+  };
+
+  localStorage.setItem(name,  JSON.stringify(position));
+  window.setTimeout(store_position, 100);
+  console.log('store position', position);
+}
+
+function console_message(msg){
+  // console.log('console message', msg);
+  let cart_position = JSON.parse(msg.newValue);
+  cart_position['name'] = String(msg.key).trim();
+  console.log(cart_position)
+}
+
+function init_console(){
+  showPopups();
+  // store_slot_position();
+
+  // window.addEventListener('resize', () => {
+  //   store_slot_position();
+  // })
+
+  window.addEventListener('storage', (event) => {console_message(event)})
+}
+
+function init_cartridge(){
+  console.log('init cartridge')
+  store_position();
+}
+
+export function init(){
+  window.showPopups = showPopups;
+  let page_type = document.querySelector('main').getAttribute('page');
+  if (page_type === 'console'){
+    init_console();
+  } else if (page_type === "cartridge"){
+    init_cartridge();
+  }
+}

_assets/js/lens.js

@@ -0,0 +1,87 @@
+// OK so the next thing to do is make it so it's blurry when the screen is too
+// big or too small, and thne prompt someone to make their screen bigger or smaller
+// to be a lens and then you have to move the window around to be able to see the different
+// links on the page
+
+const FOCUS_SIZE = 400;
+
+function _init(){
+  let root = document.querySelector(':root');
+  let lens = document.getElementsByClassName('lens')[0];
+  let filter = document.getElementById('filter');
+  let hid_hint = false;
+
+  if (!lens){
+    console.log('not doing lens')
+    return
+  }
+
+  // let FOCUS_SIZE = root.style.getPropertyValue('--lens-size')
+
+  root.style.setProperty(
+      '--screen-width',
+      `${window.screen.availWidth}px`
+  );
+  root.style.setProperty(
+      '--screen-height',
+      `${window.screen.availHeight}px`
+  );
+  function set_position(){
+    lens.style.transform = `translate(-${window.screenX}px, -${window.screenY}px)`
+    setTimeout(set_position, 10);
+  }
+
+  function get_blur(){
+    return Math.max(
+        Math.sqrt(
+            (
+                Math.abs(window.innerHeight-FOCUS_SIZE) +
+                Math.abs(window.innerWidth-FOCUS_SIZE)
+            ) / 4)-5,
+        0)
+  }
+
+  function set_blur(){
+    let blur_radius = get_blur()
+    filter.style.setProperty(
+        '--blur-radius',
+        `${blur_radius}px`
+    )
+    setTimeout(set_blur, 50);
+  }
+
+  function show_hint(){
+    if (get_blur() > 3) {
+      let hint = document.getElementById('hint');
+      hint.classList.remove('hidden')
+
+      setTimeout(check_hint, 2000);
+    }
+  }
+
+  function check_hint(){
+    if (get_blur() < 3){
+      let hint = document.getElementById('hint');
+      hint.classList.add('rehidden');
+      hid_hint = true;
+
+    }
+    if (hid_hint === false){
+      setTimeout(check_hint, 100);
+    }
+  }
+
+  set_position();
+  set_blur();
+  setTimeout(show_hint, 2000);
+  // setTimeout(set_size,100);
+  // set_size()
+}
+
+export function init(){
+
+  // document.addEventListener('load', () => {
+  //   _init();
+  // })
+  _init();
+}

_assets/js/pong.js

@@ -0,0 +1,248 @@
+const PADDING = 50;
+
+const PADDLE_SIZE = {
+  width: 500,
+  height: 30,
+}
+const BALL_SIZE = {
+  width: 50,
+  height: 30
+}
+
+const PADDLE_POSITION = {
+  x: (window.screen.availWidth / 2) - (PADDLE_SIZE.width/2),
+  y: window.screen.availHeight - PADDLE_SIZE.height - PADDING
+}
+
+const TARGET_SIZE = {
+  width: 300,
+  height: 100
+}
+
+const TARGET_GRID = {
+  x: 4,
+  y: 3
+}
+
+
+const PADDLE_MOVE = 30;
+
+
+function shuffleArray(array) {
+  return  array.map(value => ({ value, sort: Math.random() }))
+  .sort((a, b) => a.sort - b.sort)
+  .map(({ value }) => value)
+}
+
+
+function plan_grid(){
+  let n_targets = TARGET_GRID.x * TARGET_GRID.y;
+  let pages, page_objects;
+//  get pages that are real pages
+  pages = document.querySelectorAll('.page-metadata');
+  page_objects = Array.from(pages).map((page) => {
+    return {
+      url: page.getAttribute('url')
+    }
+  })
+  // pad end with blanks
+  page_objects = Object.assign(new Array(n_targets).fill({url:'blank.html'}), page_objects);
+  // shuffle array order
+  page_objects = shuffleArray(page_objects)
+
+  // arrange on a grid!
+  page_objects = page_objects.map((page, idx) => {
+    let col = idx % TARGET_GRID.x;
+    let row = Math.floor(idx / TARGET_GRID.x);
+    let col_grid_width = (window.screen.availWidth-(PADDING*2)) / TARGET_GRID.x
+
+    return {
+      ...page,
+      x: (col_grid_width * col) + PADDING,
+      y: (PADDING*2 + TARGET_SIZE.height) * row
+    }
+  })
+
+  return page_objects
+}
+
+function popupPosition(popup){
+  let pos = {
+    left: popup.screenLeft,
+    right: popup.screenLeft + popup.outerWidth,
+    top: popup.screenTop,
+    bottom: popup.screenTop + popup.outerHeight
+  }
+  pos.centerX = (pos.left + pos.right) / 2
+  pos.centerY = (pos.top + pos.bottom) / 2
+  return pos
+}
+
+function checkIntersect(a, b){
+  let pos_a = popupPosition(a);
+  let pos_b = popupPosition(b);
+  // console.log(pos_a,pos_b)
+  // check if intersect
+  let overlap = !(
+      pos_a.right < pos_b.left ||
+      pos_a.left > pos_b.right ||
+      pos_a.bottom < pos_b.top ||
+      pos_a.top > pos_b.bottom
+  )
+
+  if (overlap === false){
+    return false
+  }
+
+  // if overlap, check what side we are on
+  if (Math.abs(pos_a.centerX-pos_b.centerX) > Math.abs(pos_a.centerY-pos_b.centerY)){
+    // more X  difference than y difference, we are left or right
+    if (pos_a.centerX > pos_b.centerX){
+      // a is to the right of b
+      return('right')
+    } else {
+      return('left')
+    }
+  } else {
+    if (pos_a.centerY > pos_b.centerY){
+      // a is below b
+      return('bottom')
+    } else {
+      return('top')
+    }
+  }
+}
+
+function endGame(popups, ball, paddle){
+for (let popup of popups){
+  popup.popup.close()
+}
+ball.popup.close();
+paddle.close();
+}
+
+function handleIntersect(popup, popups){
+  if (popup.url === "blank.html"){
+    popup.popup.close()
+    let index = popups.indexOf(popup);
+    if (index > -1){
+      popups.splice(index, 1);
+    }
+    console.log('closing popup')
+    return false
+  } else {
+    window.location = popup.url
+    console.log('going to new page!')
+    return true;
+  }
+}
+
+function updateBall(ball, popups, paddle){
+  let end_game = false;
+  ball.position = popupPosition(ball.popup)
+  // console.log(ball.position, popups.popup)
+  // check bounce
+  if (ball.position.right === window.screen.availWidth || ball.position.left === 0){
+    ball.velocity.x *= -1
+  }
+  if (ball.position.top === screen.availTop){
+    ball.velocity.y *= -1
+  }
+
+  // check intersections with other windows
+  for (let popup of popups){
+    // console.log(popup.popup)
+    let intersected = checkIntersect(ball.popup, popup.popup)
+    if (intersected === 'top' || intersected === 'bottom'){
+      ball.velocity.y *= -1;
+    } else if (intersected === 'left' || intersected === 'right'){
+      ball.velocity.x *= -1;
+    }
+    if (intersected){
+      console.log(intersected);
+      end_game = handleIntersect(popup, popups);
+      break
+    }
+
+  }
+
+  if (checkIntersect(ball.popup, paddle) && ball.velocity.y < 0){
+    ball.velocity.y *= -1;
+  }
+
+  if (ball.position.bottom === window.screen.availHeight && ball.velocity.y < 0){
+   //   ball died :(
+   //  end_game = true;
+    ball.popup.close();
+    ball = init_ball();
+  }
+
+  if (end_game){
+    endGame(popups, ball, paddle)
+  } else {
+  ball.popup.moveBy(ball.velocity.x, -ball.velocity.y)
+  window.setTimeout(() => {updateBall(ball, popups, paddle)}, 100)
+}
+}
+
+function init_ball(){
+  let ball_popup = window.open('ball.html', 'ball', `popup=true,width=${BALL_SIZE.width},height=${BALL_SIZE.height},screenX=${PADDLE_POSITION.x},screenY=${PADDLE_POSITION.y-BALL_SIZE.height}`)
+  ball_popup.moveTo(PADDLE_POSITION.x,PADDLE_POSITION.y)
+
+  let ball = {
+    popup: ball_popup,
+    velocity: {x: 20, y: 20}
+  };
+  return ball
+}
+
+
+function init_controller(){
+  let grid = plan_grid();
+  console.log(grid);
+  let popups = grid.map((page, idx) => {
+    return{ ...page,
+      popup: window.open(page.url, `target-${idx}`, `popup=true,width=${TARGET_SIZE.width},height=${TARGET_SIZE.height},left=${page.x},top=${page.y}`)
+    }
+  })
+  let paddle = window.open('paddle.html', 'paddle', `popup=true,width=${PADDLE_SIZE.width},height=${PADDLE_SIZE.height},screenX=${PADDLE_POSITION.x},screenY=${PADDLE_POSITION.y}`)
+
+  let ball = init_ball();
+  updateBall(ball, popups, paddle);
+}
+
+function init_paddle(){
+  window.resizeTo(PADDLE_SIZE.width, PADDLE_SIZE.height);
+  window.moveTo(
+      PADDLE_POSITION.x,
+      PADDLE_POSITION.y
+  )
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key == "ArrowLeft"){
+      if (window.screenX > PADDLE_MOVE) {
+        window.moveBy(-PADDLE_MOVE, 0)
+      } else {
+        window.moveBy(-window.screenX, 0);
+      }
+    } else if (event.key == "ArrowRight"){
+      let right_edge = window.screenX + window.outerWidth;
+      if (right_edge < window.screen.availWidth - PADDLE_MOVE){
+        window.moveBy(PADDLE_MOVE, 0)
+      } else {
+        window.moveBy(window.screen.availWidth - right_edge, 0)
+      }
+    }
+  })
+}
+
+
+
+export function init(){
+  let page_type = document.querySelector('main').getAttribute('page');
+  if (page_type === 'pong'){
+    init_controller();
+  } else if (page_type === "paddle"){
+    init_paddle();
+  }
+}

_config.yml

@@ -30,8 +30,8 @@ github_username:  sneakers-the-rat
 # directories
 source: ./src
 destination: ./dist
-# keep_files:
-#   - assets # Build settings
+keep_files:
+  - assets # Build settings
 #theme: minima
 plugins:
   - jekyll-feed

config/webpack.common.js

@@ -34,7 +34,7 @@ module.exports = {
     // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
     new HtmlWebpackPlugin({
       // favicon: paths.src + '/images/favicon.png',
-      template: './_assets/default.html', // template file
+      template: './_assets/template.html', // template file
       filename: '../src/_layouts/default.html' // output file
     }),
   ],

src/Gemfile

@@ -0,0 +1,33 @@
+source "https://rubygems.org"
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+gem "jekyll", "~> 4.3.2"
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+gem "minima", "~> 2.5"
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+# gem "github-pages", group: :jekyll_plugins
+# If you have any plugins, put them here!
+group :jekyll_plugins do
+  gem "jekyll-feed", "~> 0.12"
+end
+
+# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
+# and associated library.
+platforms :mingw, :x64_mingw, :mswin, :jruby do
+  gem "tzinfo", ">= 1", "< 3"
+  gem "tzinfo-data"
+end
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
+
+# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
+# do not have a Java counterpart.
+gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]

src/_includes/head.html

@@ -2,6 +2,5 @@
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="x-ua-compatible" content="ie=edge" />
-<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
 
 <title>{{ page.title }}</title>

src/_layouts/cartridge.html

@@ -0,0 +1,11 @@
+---
+layout: default
+---
+<div class="cartridge">
+    <div class="clip">
+
+    </div>
+    <div class="label">
+        {{ page.title }}
+    </div>
+</div>

src/_layouts/console.html

@@ -0,0 +1,35 @@
+---
+layout: default
+---
+
+<div id="console">
+
+    <div id="popups">
+        <button onclick="showPopups();">
+            SHOW POPUPS
+        </button>
+    </div>
+
+    <div id="container">
+        <div id="slot">
+
+        </div>
+        <div id="slot-label">
+            I AM A SLOT PUT THINGS IN ME
+        </div>
+    </div>
+
+    {% for cartridge in site.pages %}
+    {% if cartridge.layout == "cartridge" %}
+    <ul class="cartridge-list" id="cartridges">
+        <li
+            class="cartridge-metadata"
+            url="{{ cartridge.url }}"
+            title="{{ cartridge.title }}"
+        >
+            <a href="{{ cartridge.url }}">{{ cartridge.title }}</a>
+        </li>
+    </ul>
+    {% endif %}
+    {% endfor %}
+</div>

src/_layouts/default.html

@@ -1,10 +1,8 @@
 <!DOCTYPE html>
-<html lang="en" prefix="foaf: http://xmlns.com/foaf/0.1/"><head>
+<html lang="en" prefix="foaf: http://xmlns.com/foaf/0.1/"><head><script defer src="/assets/app.bundle.js"></script></head>
 
 {% include head.html %}
 
-</head>
-
 <body>
 
 {% if page.navigation %}

src/_layouts/pong.html

@@ -0,0 +1,26 @@
+---
+layout: default
+---
+
+<div id="pong" style="background-color: {{ page.color }}">
+
+    <div class="content">{{ content }}</div>
+
+    <ul class="page-list" id="pages">
+        {% for p in site.pages %}
+        {% if p.page_name == "target" %}
+
+        <li
+                class="page-metadata"
+                url="{{ p.url }}"
+                title="{{ p.title }}"
+        >
+            <a href="{{ cartridge.url }}">{{ cartridge.title }}</a>
+        </li>
+
+        {% endif %}
+        {% endfor %}
+    </ul>
+</div>
+
+

src/_scss/_layout.scss

@@ -1,7 +1,6 @@
 body {
   width: 100%;
-  height: 100%;
-  background-color: #ff0000;
+  height: 100%
 }
 
 #container {

src/_scss/index.scss

@@ -4,3 +4,7 @@
 @import 'scaffolding';
 @import 'layout';
 @import 'text';
+
+@import 'pages/home';
+@import 'pages/console';
+@import 'pages/pong';

src/_scss/pages/console.scss

@@ -0,0 +1,60 @@
+.cartridge-list {
+    //display: none;
+}
+
+#console {
+
+    #container {
+        position: absolute;
+        bottom: 20px;
+        right: 20px;
+        height: 200px;
+        width: 50%;
+        border: 2px solid black;
+
+
+        #slot{
+            border: 3px solid black;
+            width: 300px;
+            height: 50px;
+
+        }
+        #slot-label {
+            font-family: monospace;
+            top: 3.5em;
+            position:relative;
+        }
+
+    }
+
+    #popups {
+        position:absolute;
+        top: 20%;
+        left: 20%;
+    }
+
+    & * {
+        position: absolute;
+    }
+}
+
+.cartridge {
+    position:absolute;
+    top:0;
+    left:0;
+    width: 300px;
+    height: 200px;
+    border: 2px solid black;
+
+    box-shadow: 5px 5px black;
+
+    .label {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        font-family: monospace;
+    }
+
+
+
+}

src/_scss/pages/home.scss

@@ -0,0 +1,76 @@
+:root {
+  --screen-width: 100vw;
+  --screen-height: 100vh;
+  --blur-radius: 100px;
+  --lens-size: 400px;
+  --hint-color: deeppink;
+}
+
+.lens {
+
+  //--screen-left: 0;
+  //--screen-top: 0;
+  position: absolute;
+  width: var(--screen-width);
+  height: var(--screen-height);
+  //top: var(--screen-top);
+  //left: var(--screen-left);
+  top: 0;
+  left: 0;
+
+  transition: transform ease 100ms;
+}
+
+#filter {
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  left:0;
+  top:0;
+  position:absolute;
+  backdrop-filter: blur(var(--blur-radius));
+  //background-color: #ffffffff;
+}
+
+#hint {
+  width: var(--lens-size);
+  height: var(--lens-size);
+  position: absolute;
+  border: 3px solid var(--hint-color);
+  top: calc(50% - var(--lens-size)/2);
+  left: calc(50% - var(--lens-size)/2);
+  border-radius: calc(var(--lens-size));
+  transition: opacity 1000ms;
+  opacity: 100%;
+  z-index: 10000;
+
+  text-align: center;
+  backdrop-filter: blur(10px);
+
+  p {
+    font-family: Times, "Times New Roman", serif;
+    background-color: deeppink;
+    font-weight: bold;
+    font-style: italic;
+    width: 50%;
+    color: white;
+    margin: auto;
+    font-size: 2em;
+    top: 40%;
+    position: relative;
+    //left: 50%;
+  }
+
+  &.hidden, &.rehidden {
+    border-color: #ff000000;
+    opacity: 0%;
+    //transition: all  1000ms;
+
+  }
+
+  &.hidden {
+    transition: all 0ms;
+  }
+}
+
+

src/_scss/pages/pong.scss

@@ -0,0 +1,28 @@
+#pong {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  .content {
+    text-align: center;
+    font: {
+      family: monospace;
+      size: 3em;
+    }
+
+  }
+
+  .page-list {
+    display: none;
+  }
+}
+
+.pong-ball {
+  width: 50px;
+  height: 50px;
+  left: 0;
+  top: 0;
+  position: absolute;
+}

src/assets/css/main.scss

@@ -1,4 +0,0 @@
----
----
-
-@import "index";

src/cartridge/blog.md

@@ -0,0 +1,5 @@
+---
+layout: cartridge
+title: blog
+page_name: cartridge
+---

src/cartridge/index.md

@@ -0,0 +1,4 @@
+---
+layout: console
+page_name: console
+---

src/pong/about.md

@@ -0,0 +1,8 @@
+---
+title: about
+page_name: target
+layout: pong
+color: blue
+---
+
+ABOUT

src/pong/ball.md

@@ -0,0 +1,7 @@
+---
+layout: pong
+title: ball
+page_name: ball
+---
+
+<img class="pong-ball" src="/img/ball.png"/>

src/pong/blank.md

@@ -0,0 +1,5 @@
+---
+title: target
+page_name: blank_target
+layout: pong
+---

src/pong/blog.md

@@ -0,0 +1,7 @@
+---
+title: blog
+page_name: target
+layout: pong
+color: pink
+---
+BLOG

src/pong/index.md

@@ -0,0 +1,6 @@
+---
+layout: pong
+page_name: pong
+
+---
+

src/pong/paddle.md

@@ -0,0 +1,5 @@
+---
+layout: pong
+page_name: paddle
+title: paddle
+---