Deploy sample to Github pages

alorma commented 4 weeks ago

Hi @WojciechOsak .

I just landed on this repo, it looks promising, as calendar is always a hard thing to build.

I just seen that you have a sample for jsMain, and thought that you may like the idea of building the sample for js and deploy it to Github pages, that way it can be tested easily for users without needing to build the code.

I have this code on my repository, that does all the work to deploy it to GH Pages:

https://github.com/alorma/Compose-Settings/blob/main/.github/workflows/main.yml#L209-L236

  # Deployment job
  deploy:
    name: Deploy to Github pages
    if: ${{ success() }}
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: [ build-sample ]
    steps:
      - name: Check out code
        uses: actions/checkout@v4

      - name: Set up JDK
        uses: actions/setup-java@v4
        with:
          distribution: adopt
          java-version: 17

      - name: Build sample JS - Main
        run: ./gradlew jsBrowserDistribution

      - name: Upload your page as github pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: composeApp/build/dist/js/productionExecutable/
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Maybe you will need this too:

https://github.com/alorma/Compose-Settings/blob/main/.github/workflows/main.yml#L8C1-L12C18

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

Thank you!

WojciechOsak commented 4 weeks ago

Hi @alorma this is awesome idea! I will do it soon, do you want to do it myself or you want to contribute (I can give you required permissions) ?

alorma commented 4 weeks ago

No, feel free!!! Ask any question you need!

WojciechOsak commented 4 weeks ago

@alorma it worked, thank you for idea and samples! Demo is available here: https://wojciechosak.github.io/Calendar/

Thank you! ❤️

alorma commented 4 weeks ago

Yay! Awesome.

Btw. It looks a little weird on mobile devices.

It's usually solved by adding the line to the <head> section of the html:

https://github.com/alorma/Compose-Settings/blob/main/composeApp%2Fsrc%2FjsMain%2Fresources%2Findex.html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

WojciechOsak / Calendar

Deploy sample to Github pages #9