From a00f1babceb22c364bc3af470bae3b121520164c Mon Sep 17 00:00:00 2001 From: Michael Tanner Date: Sun, 29 Dec 2024 21:21:13 +0000 Subject: [PATCH] Added dev container and Dockerfile --- .devcontainer/Dockerfile | 27 ++++ .devcontainer/devcontainer.json | 22 +++ .devcontainer/update-index-html.sh | 16 ++ .../workflows/sync-wwwroot-to-GitHubPages.yml | 151 ++++++++++-------- .vscode/launch.json | 11 ++ .vscode/tasks.json | 41 +++++ Client/Client.csproj | 64 ++++---- Client/Pages/Home.razor | 31 +++- Client/UpdateIndexHtml.ps1 | 16 -- Client/wwwroot/css/app.css | 101 +++++++----- 10 files changed, 314 insertions(+), 166 deletions(-) create mode 100644 .devcontainer/Dockerfile create mode 100644 .devcontainer/devcontainer.json create mode 100644 .devcontainer/update-index-html.sh create mode 100644 .vscode/launch.json create mode 100644 .vscode/tasks.json delete mode 100644 Client/UpdateIndexHtml.ps1 diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile new file mode 100644 index 0000000..c54e8b6 --- /dev/null +++ b/.devcontainer/Dockerfile @@ -0,0 +1,27 @@ +# Use the official .NET SDK image +FROM mcr.microsoft.com/devcontainers/dotnet:1-9.0 AS base + +# Install additional tools if needed +RUN apt-get update && apt-get install -y \ + git \ + curl \ + && apt-get clean + +# Install Node.js (using NodeSource) +RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \ + && apt-get install -y nodejs \ + && npm install -g @azure/static-web-apps-cli + +# Install PowerShell +RUN apt-get update && apt-get install -y \ + powershell \ + && apt-get clean + +# Add the script to update the HTML file +COPY update-index-html.sh /usr/local/bin/update-index-html.sh +RUN chmod +x /usr/local/bin/update-index-html.sh + +# Set up a non-root user +ARG USERNAME=vscode +RUN id -u $USERNAME &>/dev/null || useradd -m $USERNAME +USER $USERNAME diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 0000000..a6bbe8e --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,22 @@ +// For format details, see https://aka.ms/devcontainer.json. For config options, see the +// README at: https://github.com/devcontainers/templates/tree/main/src/dotnet +{ + "name": "C# and Blazor Dev Container", + "build": { + "dockerfile": "Dockerfile" + }, + "customizations": { + "vscode": { + "settings": { + "terminal.integrated.defaultProfile.linux": "bash" + } + }, + "extensions": [ + "ms-dotnettools.csharp", // C# support + "eamodio.gitlens", // GitLens for git insights + "ms-vscode.vscode-typescript-next" // Optional for JS/TS in Blazor + ] + }, + "postCreateCommand": "dotnet restore && /usr/local/bin/update-index-html.sh", // Restore NuGet packages + "remoteUser": "vscode" +} \ No newline at end of file diff --git a/.devcontainer/update-index-html.sh b/.devcontainer/update-index-html.sh new file mode 100644 index 0000000..00a36d7 --- /dev/null +++ b/.devcontainer/update-index-html.sh @@ -0,0 +1,16 @@ +#!/bin/bash + +INPUT_FILE="/workspaces/hyper-cards/Client/wwwroot/index_src.html" +OUTPUT_FILE="/workspaces/hyper-cards/Client/wwwroot/index.html" + +# Generate a new GUID +GUID=$(uuidgen) + +# Read the content of the input file +CONTENT=$(cat $INPUT_FILE) + +# Replace the placeholder with the new GUID +UPDATED_CONTENT=${CONTENT//dynamic-guid/$GUID} + +# Write the updated content to the output file +echo "$UPDATED_CONTENT" > $OUTPUT_FILE diff --git a/.github/workflows/sync-wwwroot-to-GitHubPages.yml b/.github/workflows/sync-wwwroot-to-GitHubPages.yml index 8dae14d..d7f458b 100644 --- a/.github/workflows/sync-wwwroot-to-GitHubPages.yml +++ b/.github/workflows/sync-wwwroot-to-GitHubPages.yml @@ -1,71 +1,80 @@ -name: Sync wwwroot to GitHubPages - -on: - push: - branches: - - main # Trigger on changes to the main branch - -env: - TARGET_BRANCH: GitHubPages # Branch to push to - SUBFOLDER_PATH: Client/bin/Release/net9.0/publish/wwwroot # Path of the subfolder to copy - GIT_USER_NAME: "github-actions[bot]" # GitHub Actions bot username - GIT_USER_EMAIL: "github-actions[bot]@users.noreply.github.com" # GitHub Actions bot email - BASE_COMMIT_MESSAGE: "wwwroot sync from main" - OUTPUT_FOLDER: docs - OUTPUT_FOLDER_TEMP: ../OUTPUT_FOLDER_TEMP - -jobs: - sync-wwwroot-to-GitHubPages: - runs-on: ubuntu-latest - - steps: - - name: Checkout main branch - uses: actions/checkout@v4 # Update to the latest version to avoid Node.js deprecation warning - with: - fetch-depth: 0 # Fetch all history so we can switch branches later - - - name: Setup .NET 9 SDK - uses: actions/setup-dotnet@v3 - with: - dotnet-version: '9.0.x' - - - name: Restore and build/publish the project - run: | - dotnet restore - dotnet publish -c Release - - - name: Copy subfolder to a temporary directory - run: | - mkdir -p $OUTPUT_FOLDER_TEMP - cp -R $SUBFOLDER_PATH/* $OUTPUT_FOLDER_TEMP/ # Use the variable for the subfolder path - - - name: Checkout and reset target branch - run: | - git config --global pull.rebase true - git config user.name "$GIT_USER_NAME" - git config user.email "$GIT_USER_EMAIL" - git stash push --include-untracked -m "Stashing all changes" - git fetch origin $TARGET_BRANCH - - git checkout -B $TARGET_BRANCH origin/$TARGET_BRANCH - git reset --hard origin/$TARGET_BRANCH - rm -rf .github/* - rm -rf .gitignore - rm -rf * - - - name: Move Subfolder to Target Branch - run: | - mkdir -p $OUTPUT_FOLDER - cp -R $OUTPUT_FOLDER_TEMP/* $OUTPUT_FOLDER - rm -rf $OUTPUT_FOLDER_TEMP - touch $OUTPUT_FOLDER/.nojekyll - - - name: Generate Commit Message with Date-Time - id: commit_message # Set an ID to reference this step's outputs - run: echo "COMMIT_MESSAGE=$BASE_COMMIT_MESSAGE $(date +"%Y-%m-%d %H:%M:%S")" >> $GITHUB_ENV - - - name: Commit and push changes - run: | - git add . - git commit -m "$COMMIT_MESSAGE" # Use the dynamic commit message - git push -f origin $TARGET_BRANCH # Force push to overwrite the target branch +name: Sync wwwroot to GitHubPages + +on: + push: + branches: + - main # Trigger on changes to the main branch + +env: + TARGET_BRANCH: GitHubPages # Branch to push to + SUBFOLDER_PATH: Client/bin/Release/net9.0/publish/wwwroot # Path of the subfolder to copy + GIT_USER_NAME: "github-actions[bot]" # GitHub Actions bot username + GIT_USER_EMAIL: "github-actions[bot]@users.noreply.github.com" # GitHub Actions bot email + BASE_COMMIT_MESSAGE: "wwwroot sync from main" + OUTPUT_FOLDER: docs + OUTPUT_FOLDER_TEMP: ../OUTPUT_FOLDER_TEMP + +jobs: + sync-wwwroot-to-GitHubPages: + runs-on: ubuntu-latest + + steps: + - name: Checkout main branch + uses: actions/checkout@v4 # Update to the latest version to avoid Node.js deprecation warning + with: + fetch-depth: 0 # Fetch all history so we can switch branches later + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v1 + + - name: Build Docker image + run: docker build -t hyper-cards-devcontainer -f .devcontainer/Dockerfile . + + - name: Run update-index-html.sh + run: docker run --rm -v ${{ github.workspace }}:/workspace hyper-cards-devcontainer /usr/local/bin/update-index-html.sh + + - name: Setup .NET 9 SDK + uses: actions/setup-dotnet@v3 + with: + dotnet-version: '9.0.x' + + - name: Restore and build/publish the project + run: | + dotnet restore + dotnet publish -c Release + + - name: Copy subfolder to a temporary directory + run: | + mkdir -p $OUTPUT_FOLDER_TEMP + cp -R $SUBFOLDER_PATH/* $OUTPUT_FOLDER_TEMP/ # Use the variable for the subfolder path + + - name: Checkout and reset target branch + run: | + git config --global pull.rebase true + git config user.name "$GIT_USER_NAME" + git config user.email "$GIT_USER_EMAIL" + git stash push --include-untracked -m "Stashing all changes" + git fetch origin $TARGET_BRANCH + + git checkout -B $TARGET_BRANCH origin/$TARGET_BRANCH + git reset --hard origin/$TARGET_BRANCH + rm -rf .github/* + rm -rf .gitignore + rm -rf * + + - name: Move Subfolder to Target Branch + run: | + mkdir -p $OUTPUT_FOLDER + cp -R $OUTPUT_FOLDER_TEMP/* $OUTPUT_FOLDER + rm -rf $OUTPUT_FOLDER_TEMP + touch $OUTPUT_FOLDER/.nojekyll + + - name: Generate Commit Message with Date-Time + id: commit_message # Set an ID to reference this step's outputs + run: echo "COMMIT_MESSAGE=$BASE_COMMIT_MESSAGE $(date +"%Y-%m-%d %H:%M:%S")" >> $GITHUB_ENV + + - name: Commit and push changes + run: | + git add . + git commit -m "$COMMIT_MESSAGE" # Use the dynamic commit message + git push -f origin $TARGET_BRANCH # Force push to overwrite the target branch diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..e9df892 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,11 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Launch and Debug Standalone Blazor WebAssembly App", + "type": "blazorwasm", + "request": "launch", + "cwd": "${workspaceFolder}/Client" + } + ] +} \ No newline at end of file diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 0000000..3e9b804 --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,41 @@ +{ + "version": "2.0.0", + "tasks": [ + { + "label": "build", + "command": "dotnet", + "type": "process", + "args": [ + "build", + "${workspaceFolder}/hyper-cards.sln", + "/property:GenerateFullPaths=true", + "/consoleloggerparameters:NoSummary;ForceNoAlign" + ], + "problemMatcher": "$msCompile" + }, + { + "label": "publish", + "command": "dotnet", + "type": "process", + "args": [ + "publish", + "${workspaceFolder}/hyper-cards.sln", + "/property:GenerateFullPaths=true", + "/consoleloggerparameters:NoSummary;ForceNoAlign" + ], + "problemMatcher": "$msCompile" + }, + { + "label": "watch", + "command": "dotnet", + "type": "process", + "args": [ + "watch", + "run", + "--project", + "${workspaceFolder}/hyper-cards.sln" + ], + "problemMatcher": "$msCompile" + } + ] +} \ No newline at end of file diff --git a/Client/Client.csproj b/Client/Client.csproj index 243e25a..27ce871 100644 --- a/Client/Client.csproj +++ b/Client/Client.csproj @@ -1,34 +1,30 @@ - - - - net9.0 - enable - enable - HyperCards.Client - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + net9.0 + enable + enable + HyperCards.Client + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Client/Pages/Home.razor b/Client/Pages/Home.razor index 8692bae..2702efc 100644 --- a/Client/Pages/Home.razor +++ b/Client/Pages/Home.razor @@ -1,5 +1,26 @@ -@page "/" - -HyperCards.io - -

HyperCards.io

+@page "/" + +HyperCards.io + +

HyperCards.io

+ + + Hello, this is the personal coding playground of Michael Tanner. +
+
+ This site is built with Microsoft Blazor, a framework for building interactive web apps using C# and HTML for running in the browser via Webassembly. +
+
+ HyperCards.io is statically hosted using GitHub Pages. +
+ See the source code here: +
+ + All interactive portions of this site use your browser's local storage to save your data. +
+
+ None of your data is sent to a server. + \ No newline at end of file diff --git a/Client/UpdateIndexHtml.ps1 b/Client/UpdateIndexHtml.ps1 deleted file mode 100644 index 9056110..0000000 --- a/Client/UpdateIndexHtml.ps1 +++ /dev/null @@ -1,16 +0,0 @@ -param ( - [string]$InputFile, - [string]$OutputFile -) - -# Generate a new GUID -$guid = [guid]::NewGuid().ToString() - -# Read the content of the input file -$content = Get-Content -Path $InputFile -Raw - -# Replace the placeholder with the new GUID -$content = $content -replace 'dynamic-guid', $guid - -# Write the updated content to the output file -Set-Content -Path $OutputFile -Value $content \ No newline at end of file diff --git a/Client/wwwroot/css/app.css b/Client/wwwroot/css/app.css index 1af364b..3de2773 100644 --- a/Client/wwwroot/css/app.css +++ b/Client/wwwroot/css/app.css @@ -1,40 +1,61 @@ -html, body { - background-color: #fff8f2; - padding: 0; - margin: 0; - font-family: "Space Grotesk", 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; -} - -h1 { - padding: 20px 20px; - background-color: #fff; - border-radius: 15px; - font-size: 32px; - font-weight: 400; - text-align: center; - outline: none; - margin: 40px auto; - border: 1px solid #9d9fd8; - border-width: 1px 3px 4px 1px; - max-width: 700px; -} -@media (max-width: 600px) { - h1 { - font-size: 28px; - } -} - -.shadow1 { - box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); -} - -.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; } -.loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } -.loading-progress circle:last-child { stroke: #a10083; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } -.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } -.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } - - +html, body { + background-color: #fff8f2; + padding: 0; + margin: 0; + font-family: "Space Grotesk", 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} + +h1 { + padding: 20px 20px; + background-color: #fff; + border-radius: 15px; + font-size: 32px; + font-weight: 400; + text-align: center; + outline: none; + margin: 40px auto; + border: 1px solid #9d9fd8; + border-width: 1px 3px 4px 1px; + max-width: 800px; +} +@media (max-width: 600px) { + h1 { + font-size: 28px; + } +} + +a, a:visited { + color: #0000e4; + text-decoration: none; + transition: color 0.3s; +} +a:hover { + color: #2a0193; + text-decoration: underline; +} + +.shadow1 { + box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); +} + +.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; } +.loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } +.loading-progress circle:last-child { stroke: #a10083; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } +.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } +.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } + +card { + max-width: 760px; + margin: 40px auto; + border: 1px solid #48bfe3; + border-width: 1px 3px 4px 1px; + border-radius: 15px; + display: block; + background: #fff; + padding: 40px; + line-height: 1.5em; + font-size: 19px; +}