ditch webpack

.forgejo/workflows/build.yml

@@ -0,0 +1,25 @@
+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,6 +12,7 @@ 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)
@@ -61,6 +62,8 @@ 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)
@@ -68,6 +71,8 @@ GEM
 
 PLATFORMS
   x86_64-darwin-21
+  x86_64-darwin-23
+  x86_64-linux
 
 DEPENDENCIES
   jekyll (~> 4.3)
@@ -76,4 +81,4 @@ DEPENDENCIES
   jekyll-sitemap (~> 1.4)
 
 BUNDLED WITH
-   2.4.6
+   2.5.9

README.md

@@ -1,3 +1,4 @@
 # homepage
 
 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

@@ -1,20 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,87 +0,0 @@
-// 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

@@ -1,248 +0,0 @@
-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:
+# keep_files:
-  - assets # Build settings
+#   - 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/template.html', // template file
+      template: './_assets/default.html', // template file
       filename: '../src/_layouts/default.html' // output file
     }),
   ],

src/Gemfile

@@ -1,33 +0,0 @@
-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,5 +2,6 @@
 <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

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

src/_layouts/console.html

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

src/_layouts/pong.html

@@ -1,26 +0,0 @@
----
-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/_sass/_layout.scss

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

src/_sass/index.scss

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

src/_scss/pages/console.scss

@@ -1,60 +0,0 @@
-.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

@@ -1,76 +0,0 @@
-: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

@@ -1,28 +0,0 @@
-#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

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

src/cartridge/blog.md

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

src/cartridge/index.md

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

src/pong/about.md

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

src/pong/ball.md

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

src/pong/blank.md

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

src/pong/blog.md

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

src/pong/index.md

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

src/pong/paddle.md

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