mlomb / wtfme.me Goto Github PK

An open source collection of random memes and useless pages

⚠️ This project is no longer mantained. 

You still can access the archived URL here: wtfmeme.mlomb.me. Former wtfme.me.

wtfme.me is a community project. We invite you to add your random meme ideas. Even if you don't know how to code, you can throw ideas in the issues page.

Note: terms meme and (meme) page are used interchangeably

Each meme must be defined in src/pages.js including all the relevant metadata like so:

module.exports = [
  ...
  {
    title: 'Meme',
    description: 'A wonderful meme',
    keywords: ['keyword1', 'keyword2'],
    path: 'meme',
    module: 'meme.js',
    cover: {
        image: '<url>',
        hidden: false,
        spaced: false,
        customizable: false
    }
  },
  ...
]

Memes are located under src/pages. The name of the file must match the module variable in src/pages.js. The module must export an array called Variants. Each item must be a Preset object or an array of Preset objects.
For example:

import { ImgurPreset, GiphyPreset } from '@presets/ImagePreset';
import TextRainPreset from '@presets/TextRainPreset';

export let Variants = [
  new GiphyPreset('XXXXXXXXXXXXX'),
  [new ImgurPreset('XXXXXXX'), new TextRainPreset('Example meme')]
];

A single meme page may have multiple versions to show. For example, meme windows changes the error dialog every time someone refreshes the page.
Extracted from src/pages/windows.js:

...

class WindowsError extends CanvasPreset {
  constructor(url){
    ...
  }
}

export let Variants = [
  new WindowsError('i.imgur.com/jccR2lH.jpg'), // delete Windows
  new WindowsError('i.imgur.com/GUfDHmu.jpg'), // error recording error code
  new WindowsError('i.imgur.com/UyIeVFW.png'), // linux
  new WindowsError('i.imgur.com/kwVhVDZ.png'), // windows error recording has stopped working
  ...
];

Variants are randomly selected excluding the just seen to increase the chance of seeing them all while refreshing fast.

A preset or combination of them form a variant, they reside in src/presets and can be included using the alias @presets. All presets must inherit from Preset.
Every preset should be generic, reusable and single purpose.

Template for a Preset:

import Preset from './Preset';

export default class MyPreset extends Preset {
  constructor(text) {
    super();
    this.text = text;
  }

  init(root) {
    var p = document.createElement('p');
    p.innerText = `Hello meme, ${this.text}!`;
    root.appendChild(p);
  }

  frame(deltaTime) {
    // This function will be called each requestAnimationFrame
  }
}

For example, this is ImagePreset which allows show a fullscreen image just with an URL:

import Preset from './Preset';

export default class ImagePreset extends Preset {
  constructor(url) {
    super();
    this.url = url;
  }

  init(root) {
    var img = document.createElement('div');
    img.classList.add("fullscreen-contain");
    img.style.backgroundImage = 'url(' + this.url + ')';
    root.appendChild(img);
  }
}

See the first meme example. A variant may be an array of simple presets.

For example, if you want to show a fullscreen GIF with a sound you could combine a ImagePreset with a SoundCloudPreset.

You can always define or inherit a preset inside the meme module to create custom behavior. You can find an example of this in src/pages/windows.js where it defines the WindowsError preset that inherits the CanvasPreset.

You can find the API documentation in API.md.

Some pages can be dynamic, for example rain allows to change the raining text. You can see the implementation in src/pages/rain.js.
It should be an explanation on how to customize the meme in the base path (/rain in this case).
Make sure to update netlify.toml with the corresponding redirect.

Be careful with XSS attacks.

The code must use tabs. Documentation must use 2-spaces.

To build for deployment run

npm run build

Once building, the script will pick up all the memes defined in src/pages.js and generate all the static HTML files in the dist directory.

To start a development server run

npm run dev

You will be able to access the site in localhost:8080. Note that you should access the pages using .html, for example localhost:8080/nope.html. The dev server should have hot reloading enabled.

Note: if you modify pages.js you have to restart the dev server to pick up the changes

MIT License, see LICENSE.