Init

.eslintrc.json

@@ -0,0 +1,12 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {}
+}

.github/workflows/deploy-pages.yml

@@ -0,0 +1,51 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions 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:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "npm"
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # Upload dist repository
+          path: "./dist"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,9 @@
+# MEME ME!
+
+Make a meme as beautiful as you are!
+
+A forkable, hackable project built with [Vite](https://vitejs.dev),
+[Pico.css](https://picocss.com) & Vanilla JS at
+[FrontendMasters](https://frontendmasters.com)
+
+Demo: [anjana.dev/meme-me](https://anjana.dev/meme-me)

assets/fonts.css

@@ -0,0 +1,16 @@
+.impact {
+  font-family: Impact, sans-serif;
+}
+
+.arial {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.comic-sans {
+  font-family: "Comic Sans MS", sans-serif;
+}
+
+h1 {
+  font-size: 3em;
+  text-transform: uppercase;
+}

assets/layout.css

@@ -0,0 +1,90 @@
+body.grid {
+  width: 100%;
+  min-height: 480px;
+  overflow-y: scroll;
+  margin: 0px auto;
+  text-align: center;
+  grid-template-areas:
+    "header"
+    "main"
+    "nav"
+    "footer";
+  grid-template-columns: 1fr;
+  grid-template-rows: max-content 2fr 1fr max-content;
+}
+
+@media (min-width: 768px) {
+  :root {
+    --header-height: 3em;
+    --footer-height: 2em;
+  }
+
+  body.grid {
+    height: 100vh;
+    grid-template-areas:
+      "header main"
+      "nav main"
+      "footer main";
+    grid-template-columns: minmax(20%, 40%) 1fr;
+    grid-template-rows: min-content 1fr min-content;
+  }
+
+  body > header {
+    text-align: left;
+    padding-bottom: 0px;
+  }
+
+  body > main {
+    margin-top: var(--header-height);
+    margin-bottom: var(--footer-height);
+  }
+
+  body > footer {
+    padding-top: 0px;
+  }
+}
+
+body > header {
+  grid-area: header;
+}
+
+header > h1 {
+  margin-bottom: 0px;
+}
+
+body > nav {
+  grid-area: nav;
+  flex-direction: column;
+}
+
+body > main {
+  grid-area: main;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  align-self: center;
+  justify-self: center;
+  min-height: 480px;
+}
+
+body > footer {
+  grid-area: footer;
+  width: 100%;
+}
+
+footer > * {
+  margin-bottom: 0px;
+}
+
+#settings,
+#dark-mode {
+  flex-shrink: 0;
+  text-align: left;
+}
+
+main > video,
+main > canvas,
+#meme {
+  object-fit: contain;
+  width: 100%;
+  height: 90%;
+}

assets/modals.css

@@ -0,0 +1,58 @@
+#steps {
+  height: 100%;
+  display: flex;
+  margin-left: 0px;
+  margin-right: 0px;
+  padding-left: 0px;
+  padding-right: 0px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: left;
+}
+
+#steps > * {
+  width: 100%;
+  margin: 0px auto;
+}
+
+.modal-content {
+  padding-top: 0.5em;
+  padding-bottom: 1em;
+}
+
+.modal-content > * {
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+
+dialog form,
+dialog article {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+dialog form {
+  text-align: left;
+  min-width: 50%;
+  max-width: 100%;
+}
+
+dialog article {
+  min-height: fit-content;
+  max-height: 100vh;
+  padding-top: 1em;
+  padding-bottom: 0.5em;
+}
+
+dialog h2 {
+  margin-bottom: 0.5em;
+}
+
+dialog article main {
+  display: flex;
+  gap: 0.5em;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}