Merge pull request #29 from nr2f1/gh-pages-assets

assets
nr2f1 · Jul 4, 2024 · 2f39107 · 2f39107
2 parents c87ca03 + cba225d
commit 2f39107
Show file tree

Hide file tree

Showing 24 changed files with 914 additions and 31 deletions.
diff --git a/.github/workflows/deploy-assets-to-gh-pages.yaml b/.github/workflows/deploy-assets-to-gh-pages.yaml
@@ -0,0 +1,53 @@
+name: Deploy NR2F1 assets to GitHub Pages
+run-name: ${{ github.actor }} is deploying NR2F1 assets to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - website-assets/**/*
+      - .deploy-assets-to-gh-pages.yaml
+      - '!CHANGELOG.md'  
+  workflow_run:
+    workflows: ["PR validation"]
+    types:
+      - completed
+
+# 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:
+  deploy-assets-to-gh-pages:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set environment and install dependencies
+        uses: ./.github/actions/prepare
+
+      - name: Build project artifacts
+        run: pnpm nx build website-assets
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload dist repository
+          path: './dist/apps/website-assets'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4        
diff --git a/.github/workflows/deploy-website-production.yaml b/.github/workflows/deploy-website-production.yaml
@@ -1,4 +1,4 @@
-name: Deploy FEWD to Vercel production
+name: Deploy NR2F1 website to Verceproduction
 run-name: ${{ github.actor }} is deploying FEWD to vercel production
 
 on:

diff --git a/nx.json b/nx.json
@@ -12,13 +12,28 @@
         "startTargetName": "start",
         "serveStaticTargetName": "serve-static"
       }
+    },
+    {
+      "plugin": "@nx/vite/plugin",
+      "options": {
+        "buildTargetName": "build",
+        "previewTargetName": "preview",
+        "testTargetName": "test",
+        "serveTargetName": "serve",
+        "serveStaticTargetName": "serve-static"
+      }
     }
   ],
   "generators": {
     "@nx/next": {
       "application": {
         "style": "scss"
       }
+    },
+    "@nx/web:application": {
+      "style": "css",
+      "unitTestRunner": "none",
+      "e2eTestRunner": "none"
     }
   }
 }
diff --git a/package.json b/package.json
@@ -41,8 +41,10 @@
     "babel-jest": "^29.7.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "~22.1.0",
     "nx": "18.0.6",
     "sass": "1.62.1",
+    "swc-loader": "0.1.15",
     "ts-jest": "^29.1.5",
     "ts-node": "10.9.1",
     "typescript": "~5.3.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website-assets/.babelrc b/website-assets/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@nx/js/babel"]
+}
diff --git a/website-assets/.swcrc b/website-assets/.swcrc
@@ -0,0 +1,8 @@
+{
+  "jsc": {
+    "parser": {
+      "syntax": "typescript"
+    },
+    "target": "es2020"
+  }
+}
diff --git a/website-assets/index.html b/website-assets/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>NR2F1 Foundation | Simple Storage Service (s3)</title>
+  <base href="/" />
+
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="/src/styles/index.css" />
+</head>
+
+<body>
+  <header>
+    <picture>
+      <img src="/assets/nr2f1-foundation-logo-color-white-text-original.png" alt="nr2f1 logo" />
+    </picture>
+
+    <h1>Simple Storage Service (s3)</h1>
+  </header>
+  <main>
+    <h2>What is it?</h2>
+    <p>
+      Is a GitHub pages of assets that I need to use for NR2F1 foundation website. I am using it as Simple Storage
+      Service 😎
+    </p>
+    <h2>List of assets</h2>
+    <section class="logos">
+      <h3>Logos</h3>
+      <ul>
+        <li>
+          <a href="/assets/nr2f1-foundation-logo-color-navy-text-original.png">
+            <picture><img src="/assets/nr2f1-foundation-logo-color-navy-text-original.png" alt="nr2f1 foundation" />
+            </picture>
+          </a>
+          <p>
+            <span>url:</span>
+            <button>
+              https://nr2f1.github.io/website/assets/nr2f1-foundation-logo-color-navy-text-original.png
+            </button>
+          </p>
+        </li>
+        <li>
+          <a href="/assets/nr2f1-foundation-logo-color-navy-text.png">
+            <picture><img src="/assets/nr2f1-foundation-logo-color-navy-text.png" alt="nr2f1 foundation" /></picture>
+          </a>
+          <p>
+            <span>url:</span>
+            <button>
+              https://nr2f1.github.io/website/assets/nr2f1-foundation-logo-color-navy-text.png
+            </button>
+          </p>
+        </li>
+        <li class="inverse">
+          <a href="/assets/nr2f1-foundation-logo-color-white-text.png">
+            <picture><img src="/assets/nr2f1-foundation-logo-color-white-text.png" alt="nr2f1 foundation" /></picture>
+          </a>
+          <p>
+            <span>url:</span>
+            <button>
+              https://nr2f1.github.io/website/assets/nr2f1-foundation-logo-color-white-text.png
+            </button>
+          </p>
+        </li>
+        <li class="inverse">
+          <a href="/assets/nr2f1-foundation-logo-color-white-text-original.png">
+            <picture><img src="/assets/nr2f1-foundation-logo-color-white-text-original.png" alt="nr2f1 foundation" />
+            </picture>
+          </a>
+          <p>
+            <span>url:</span>
+            <button>
+              https://nr2f1.github.io/website/assets/nr2f1-foundation-logo-color-white-text-original.png
+            </button>
+          </p>
+        </li>
+      </ul>
+    </section>
+  </main>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
diff --git a/website-assets/project.json b/website-assets/project.json
@@ -0,0 +1,27 @@
+{
+  "name": "website-assets",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "website-assets/src",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "options": {
+        "outputPath": "dist/apps/website-assets"
+      }
+    },
+    "lint": {
+      "command": "pnpm biome check website"
+    },
+    "format": {
+      "command": "pnpm biome format website"
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "options": {
+        "config": "website/vite.config.ts"
+      }
+    }
+  }
+}
diff --git a/website-assets/public/assets/.gitkeep b/website-assets/public/assets/.gitkeep
diff --git a/website-assets/public/assets/nr2f1-foundation-logo-color-navy-text-original.png b/website-assets/public/assets/nr2f1-foundation-logo-color-navy-text-original.png
diff --git a/website-assets/public/assets/nr2f1-foundation-logo-color-navy-text.png b/website-assets/public/assets/nr2f1-foundation-logo-color-navy-text.png
diff --git a/website-assets/public/assets/nr2f1-foundation-logo-color-white-text-original.png b/website-assets/public/assets/nr2f1-foundation-logo-color-white-text-original.png
diff --git a/website-assets/public/assets/nr2f1-foundation-logo-color-white-text.png b/website-assets/public/assets/nr2f1-foundation-logo-color-white-text.png
diff --git a/website-assets/src/main.ts b/website-assets/src/main.ts
@@ -0,0 +1,29 @@
+const buttons: HTMLButtonElement[] = Array.from(
+  document.querySelectorAll('.logos p button'),
+);
+
+const copyTextToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    console.log('Text copied to clipboard');
+  } catch (err) {
+    console.error('Error in copying text: ', err);
+  }
+};
+
+const changeButtonToCopied = (button: HTMLButtonElement) =>
+  button.classList.add('copied');
+
+const copyUrl = async (event: MouseEvent) => {
+  event.preventDefault();
+  const element = event.target as HTMLButtonElement;
+  if (element) {
+    const textToCopy = element.innerText;
+    await copyTextToClipboard(textToCopy);
+    changeButtonToCopied(element);
+  }
+};
+
+for (const button of buttons) {
+  button.addEventListener('click', copyUrl);
+}
diff --git a/website-assets/src/styles/index.css b/website-assets/src/styles/index.css
@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
+@import url('./normalize.css');
+@import url('./variables.css');
+@import url('./main.css')
diff --git a/website-assets/src/styles/main.css b/website-assets/src/styles/main.css
@@ -0,0 +1,111 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-size: 100%;
+  font-family: "Nunito Sans", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  color: var(--navy-900);
+}
+
+img {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+picture {
+  display: block;
+}
+
+header {
+  background-color: var(--navy-900);
+  color: white;
+  padding: 1.25rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+header picture {
+  max-width: 250px;
+}
+
+main {
+  padding: 1.25rem;
+}
+
+.logos ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.logos li {
+  display: flex;
+  align-items: center;
+  column-gap: 1.25rem;
+  border: 1px solid var(--border-default);
+  margin: 1.25rem 0;
+  &.inverse a {
+    background-color: var(--background-inverse-primary);
+    color: white;
+  }
+}
+
+.logos a {
+  display: block;
+  margin-right: 1.25rem;
+}
+
+.logos a[href='./assets/logos/ga-text-white-white.svg'] picture,
+.logos a[href='./assets/logos/ga-white.svg'] picture {
+  background-color: black;
+}
+.logos picture {
+  width: 250px;
+}
+
+.logos li p {
+  /* max-width: 80ch; */
+}
+
+.logos p span {
+  font-weight: bold;
+}
+
+.logos p button {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 6px;
+  font-family: 'Monaco', monospace;
+  border: none;
+}
+
+.logos p button:active,
+.logos p button:focus {
+  background-color: rgba(27, 31, 35, 0.1);
+  font-weight: 700;
+}
+
+.logos p button:after {
+  content: '';
+  display: inline-block;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16'%3E%3Cpath fill-rule='evenodd' d='M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z' %3E%3C/path%3E%3C/svg%3E%0A");
+  width: 1rem;
+  height: 1rem;
+  vertical-align: middle;
+}
+
+.logos p button.copied {
+  color: lightgreen;
+  background-color: white;
+}
+
+.logos p button.copied:after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16'%3E%3Cstyle%3E path %7B stroke: lightgreen; fill: lightgreen; %7D %3C/style%3E%3Cpath fill-rule='evenodd' d='M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z' %3E%3C/path%3E%3C/svg%3E%0A");
+}