DOCSEARCHbyAlgolia
Submit Docs

Spike Leung's Blog

website·Indexed 29 days ago

https://spike-leung.github.io/blog/

A collection of technical articles and guides focusing on front-end development, including static file deployment, SVG map creation, country flag implementation, SVN cheatsheets, and deploying blogs via GitHub Actions.

Tokens
2.5K
Snippets
21
Records
25
Agent score
75%

What's inside Spike Leung's Blog

  3. Deploy a Vuepress blog to GitHub Pages using GitHub Actions

    To automate the deployment of a Vuepress blog to GitHub Pages, create a workflow file in the .github/workflows directory of your repository. The workflow is event-driven (e.g., triggered by a push event) and consists of jobs that run in a specified environment (e.g., ubuntu-latest). Each job contains a series of steps that can either use pre-defined actions via the uses keyword or execute custom shell commands via the run keyword.
    # .github/workflows/deploy.yaml
name: deploy-to-github-page

# Trigger the workflow on every push
on: [push]

jobs:
  deploy:
    # Run the job on a latest Ubuntu runner
    runs-on: ubuntu-latest
    
    steps:
      # 1. Checkout the repository code
      - uses: actions/checkout@v2
      
      # 2. Set up Node.js environment
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      
      # 3. Install dependencies and build the static site
      - run: yarn install
      - run: yarn build
      
      # 4. Deploy the build output to the gh-pages branch
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: docs/.vuepress/dist

  5. Compress static files using tar

    To avoid uploading files individually, compress the build output directory into a single tarball. Navigate to the distribution directory and run the compression command.
    cd path/to/dist
tar -zcvf build_1.0.tar.gz *

    Parameter Explanation:

    • -c: Create a new archive
    • -v: Verbose output (show progress)
    • -z: Compress using Gzip
    • -f: Specify the filename of the archive
    • *: Pack all files in the current directory

  6. Implement country flag icons using ISO 3166-1 alpha-2 codes

    To consistently display country flags across different operating systems, the most reliable method is using PNG images named after the ISO 3166-1 alpha-2 country codes. This avoids compatibility issues where certain operating systems (such as Windows) do not render flag emojis correctly.

    Implementation Workflow:

    1. Obtain flag images from a source like Country Flag (countryflags.com).
    2. Name the files according to the ISO 3166-1 alpha-2 standard (e.g., CN.png for China, DE.png for Germany).
    3. Map the country code returned by your API to the corresponding image filename to render the flag on the page.

  7. Improve svn diff readability with colordiff

    Standard svn diff output is monochromatic. To add color coding for additions and deletions, install colordiff (via Homebrew on Mac) and pipe the SVN output into it.
    # Install colordiff
brew install colordiff

# Use colordiff to beautify the output
svn diff menu.jsp -r 23304:23314 | colordiff

  8. Configure SSH passwordless login

    To avoid entering a password for every ssh or scp command, generate a local SSH key pair and copy the public key to the remote server.
    # 1. Generate the key pair
ssh-keygen

# 2. Upload the public key to the server
ssh-copy-id -i path/to/.ssh/id_rsa.pub root@1.1.1.1

    Note: Ensure you use the public key file (ending in .pub) when using ssh-copy-id.

  9. Extract static files on a remote server

    After uploading the tarball, connect to the server via SSH and extract the files into the directory configured in your web server (e.g., Nginx root path).
    # Navigate to the target directory
cd path/to/static_file_folder

# Extract the archive
tar -xvf build.1.0.tar.gz

    Parameter Explanation:

    • -x: Extract the contents of the archive

  10. Commit specific files using a target list

    When committing many files, instead of listing them manually, you can export the list of changed files to a text file and use the --targets flag to commit only those files.
    # 1. Export changed files to target.txt
svn st -q | cut -c 9- > ~/target.txt

# 2. (Optional) Manually edit ~/target.txt to remove unwanted files

# 3. Commit using the target list
svn commit --targets ~/target.txt

  11. Convert SVG map outlines to amMap JSON

    To use a custom SVG map in amMap, the SVG must be converted to a JSON format.

    1. Export the processed map from mapshaper as an SVG file.
    2. Open the SVG file and copy the entire content of the <g> tags.
    3. Paste this content into the amMap parser tool to generate the required JSON data.

  12. Create custom SVG map outlines for amMap using mapshaper

    When amMap does not provide specific regional map data (e.g., specific Chinese provinces or cities), you can create custom maps by processing GIS data (files like .shp, .shx, .prj, .dbf) using mapshaper and then converting the resulting SVG to amMap-compatible JSON.
    # Example mapshaper console commands to isolate a specific region (e.g., Zibo, Shandong)
# 1. Filter for the specific region
filter 'NAME_1 == "Shandong" && NAME_2 == "Zibo" && NAME_3 != "Gaoqing" || NAME_3 == "Zouping"'

# 2. Clean up the map
-clean

# 3. Remove internal lines to keep only the outer boundary
-dissolve
-clean