Merge pull request #55 from ejfox/scrapbook-start

feat(scrapbook): add pinboard dl script, bookmark scrape, and scrapbook page

.github/workflows/update_scrapbook.yml

@@ -0,0 +1,45 @@
+name: Update Scrapbook
+
+on:
+  push:
+    branches:
+      - main
+  schedule:
+    # - cron: '0 0 * * *'  # Runs every day at midnight
+    - cron: '0 */2 * * *'  # Runs every 2 hours
+
+
+jobs:
+  update-scrapbook:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout Repository
+      uses: actions/checkout@v2
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: 18
+
+    - name: Install Dependencies
+      run: npm install
+
+    - name: Run Scripts
+      run: |
+        node scripts/scrapbook/dl_arena.mjs
+        node scripts/scrapbook/dl_mastodon.mjs
+        node scripts/scrapbook/dl_pinboard.mjs
+
+    - name: Commit and Push Changes
+      run: |
+        git config --local user.email "[email protected]"
+        git config --local user.name "GitHub Action"
+        git add -A
+        git commit -m "chore(scrapbook): update scrapbook items $(date +%Y-%m-%d-%H)" || exit 0  # exit gracefully if no changes
+        git push
+      env:
+        PINBOARD_TOKEN: ${{ secrets.PINBOARD_TOKEN }}
+        MASTODON_TOKEN: ${{ secrets.MASTODON_TOKEN }}
+        ARENA_ACCESS_TOKEN: ${{ secrets.ARENA_ACCESS_TOKEN }}
+

.gitignore

@@ -18,4 +18,5 @@ static/.DS_Store
 *.obsidian
 .output
 
-AUTOMATED_PUSH_LOG
+AUTOMATED_PUSH_LOG.secrets
+.secrets

.nvmrc

@@ -1 +1 @@
-v16.17.1
+v18.10.0

.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  "files.associations": {
+      "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+      "strings": true
+  },
+  "workbench.colorCustomizations": {
+    "statusBar.background": "#000000",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#1a1a1a",
+    "statusBarItem.remoteBackground": "#000000",
+    "statusBarItem.remoteForeground": "#e7e7e7"
+  },
+  "peacock.color": "#000000"
+}
+

app.config.ts

@@ -0,0 +1,12 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'sky',
+    gray: 'neutral',
+    icons: {
+      dynamic: true
+    }
+  },
+  colorMode: {
+    preference: 'light',
+  },
+})

app.vue

@@ -1,131 +1,19 @@
 <template>
   <div id="app-container" class="sans-serif w-100">
-    <Nav
-    class="ph3"
-    />
+    <div class="flex flex-col md:flex-row h-screen">
+      <Nav class="w-full md:w-1/6 md:min-h-min md:border-none" />
 
-    <div
-      id="page-overlay"
-      class="fixed top-0 left-0 w-100 h-100 z-3 overflow-hidden ma0"
-      style=""
-    >
-      <canvas id="page-overlay-canvas" class="w-100 h-100 ma0 pa0"></canvas>
-    </div>
-
-    <div class="w-100 pa3 pa4-l">
-      <!-- <NuxtPage :key="$route.fullPath" /> -->
-      <NuxtPage />
+      <div class="w-full md:w-5/6">
+        <NuxtPage />
+      </div>
     </div>
   </div>
 </template>
 <script setup>
-import anime from "animejs/lib/anime.es.js";
-
-const route = useRoute();
-watch(route, (oldVal, newVal) => {
-  if (newVal.hash !== "") return;
-  nextTick(() => {
-    // wait 100ms and then animateOverlayOut
-    setTimeout(() => {
-      animateOverlayOut();
-    }, 100);
-  });
-});
-
-function animateOverlayOut() {
-  // anime({
-  //     targets: '#page-overlay',
-  //     opacity: [1, 0],
-  //     easing: 'easeOutQuad',
-  //     duration: 500,
-  //     delay: 500,
-  //   })
-}
-
-onMounted(() => {
-  // draw a canvas on #page-overlay that is the size of the window
-  // when a user clicks, animate a circle from their mouse x/y that slowly grows to take over the screen for 1000ms
-  // then, when the animation is complete, remove the canvas
-
-  // get the canvas element
-  const canvas = document.getElementById("page-overlay-canvas");
-
-  // set canvas size to window size
-  canvas.width = window.innerWidth;
-  canvas.height = window.innerHeight;
-
-  // get canvas context
-  const ctx = canvas.getContext("2d");
-
-  // make sure the canvas is not transparent
-  canvas.style.opacity = 1;
-
-  // draw a circle at the mouse x/y
-  function drawCircle(x, y, r) {
-    ctx.beginPath();
-    ctx.arc(x, y, r, 0, 2 * Math.PI);
-    ctx.fillStyle = "#FFF";
-    ctx.fill();
-  }
-
-  const body = document.querySelector("body");
-
-  // when the user clicks, draw a circle at the mouse x/y
-  // then, animate the circle to grow to the size of the window
-  // then, remove the canvas
-  // body.addEventListener('click', (e) => {
-
-  //   // if the click event is not a link, then ignore it
-  //   if (e.target.tagName !== 'A') return
-
-  //   // if the target is a link to a hash on this page, then ignore it
-  //   if (e.target.hash !== '') return
-
-  //   const x = e.clientX
-  //   const y = e.clientY
-  //   const r = 0
-
-  //   ctx.clearRect(0, 0, canvas.width, canvas.height)
-  //   drawCircle(x, y, r)
-
-  //   anime({
-  //     targets: canvas,
-  //     duration: 1000,
-  //     // easing: 'easeInExpo',
-  //     easing: 'easeInOutCirc',
-  //     update: (anim) => {
-  //       const r = anim.progress * Math.max(window.innerWidth, window.innerHeight) * 0.015
-  //       drawCircle(x, y, r)
-  //     },
-  //     complete: () => {
-  //       // clear the canvas
-  //       // ctx.clearRect(0, 0, canvas.width, canvas.height)
-  //     }
-  //   })
-  // })
-});
 </script>
 
 <style>
 .sans-serif {
   font-family: "Signika Negative", sans-serif !important;
 }
-
-img {
-  width: 100%;
-  height: auto;
-}
-
-figure {
-  margin: 0;
-  padding: 0;
-}
-
-#page-overlay {
-  pointer-events: none;
-}
-
-#app-container {
-  /* width: 100vw; */
-}
 </style>

components/Nav.vue

@@ -1,66 +1,45 @@
 <template>
-  <nav class="mt4">
-    <ul class="list ma0 pa0 ml2 ml6-l db cf w-90 tl-ns w-50-ns">
-      <li class="pv2 db fl-ns fw8 link bg-white mr2 tracked mr4">
-        <span class="dib v-top">EJ Fox</span>
-      </li>
-
-      <NuxtLink
-        class="pa2 db fl-ns fw4 link bg-white black mr2 pointer"
-        tag="li"
-        to="/"
-        >🏠 Home</NuxtLink
-      >
-      <NuxtLink
-        class="pa2 db fl-ns fw4 link bg-white black mr2 pointer"
-        tag="li"
-        to="/projects"
-        >📋 Projects</NuxtLink
-      >
-      <NuxtLink
-        class="pa2 db fl-ns fw4 link bg-white black mr2 pointer"
-        tag="li"
-        to="/blog/"
-        >📝 Blog</NuxtLink
-      >
-      <!-- <NuxtLink class="pa2 db fl-ns fw4 link black bg-white mr3 mr4-l" tag="li" to="/photos/">Photos</NuxtLink> -->
-    </ul>
+  <nav :class="navClasses">
+    <div class="container mx-auto md:py-1 md:flex md:flex-col items-start"> <!-- Updated class: items-start -->
+      <NuxtLink class="text-gray-800 dark:text-white text-xl font-bold px-2 md:p-4 md:mb-2 block" to="/">EJ Fox</NuxtLink>
+      <NuxtLink active-class="text-primary-500" :class="linkClasses" to="/">
+        Home
+      </NuxtLink>
+      <NuxtLink active-class="text-primary-500" :class="linkClasses" to="/projects">
+        Projects
+      </NuxtLink>
+      <NuxtLink active-class="text-primary-500" :class="linkClasses" to="/blog/">Blog
+      </NuxtLink>
+      <NuxtLink active-class="text-primary-500" :class="linkClasses" to="/scrapbook/">Scrapbook</NuxtLink>
+      <!-- <NuxtLink active-class="text-primary-500" :class="linkClasses" to="/stats/">Stats</NuxtLink> -->
+    </div>
   </nav>
 </template>
+
 <script setup>
-import anime from "animejs/lib/anime.es.js";
+const linkClasses = "inline-block md:block md:w-full px-2 md:px-4 py-2 text-lg md:text-xl'"
+
+// make a computed that checks the route
+// if we are in /scrapbook/
+// add the opacity-20 class
+
+const route = useRoute()
+const isScrapbook = computed(() => {
+  return route.path.includes('/scrapbook/')
+})
+
+const navClasses = computed(() => {
+  const classes = ['p-2 md:p-4 xl:py-2 top-0 md:static md:top-auto bg-opacity-90 transition-opacity']
+  if (isScrapbook.value) {
+    classes.push('opacity-20')
+  }
+  return classes
+})
 
-onMounted(() => {
-  // use anime to animate the intro text
-  // anime({
-  //   targets: "nav a",
-  //   opacity: [0, 1],
-  //   translateX: ["-400%", 0],
-  //   backgroundColor: ["#fff", "rgba(255,255,255,0."],
-  //   easing: "easeOutQuad",
-  //   duration: 550,
-  //   delay: anime.stagger(170),
-  // });
-});
 </script>
+
 <style>
 nav a {
-  transition: all 2ms ease-out;
-}
-#nav-circle-svg {
-  height: 0.7em;
-  width: 0.7em;
-}
-
-#nav-circle {
-  fill: transparent;
-  stroke: #ccc;
-  stroke-width: 10;
-}
-
-.router-link-active {
-  /* color: red; */
-  /* color: #E7040F */
-  font-weight: 800;
+  transition: all 240ms ease-out;
 }
 </style>