login
blog.johnnyreilly.com
login | blog.johnnyreilly.com | |
---|---|---|
7 | 22 | |
271 | 34 | |
5.2% | - | |
7.3 | 9.5 | |
21 days ago | 1 day ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
login
-
Playwright, GitHub Actions and Azure Static Web Apps staging environments
name: Static Web App - Build and Deploy ποΈ on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main workflow_dispatch: permissions: id-token: write contents: write pull-requests: write env: LOCATION: westeurope STATICWEBAPPNAME: blog.johnnyreilly.com jobs: build_and_deploy_swa_job: if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') runs-on: ubuntu-latest name: Site build and deploy ποΈ steps: - name: Checkout π₯ uses: actions/checkout@v3 # Auth between GitHub and Azure is handled by https://github.com/jongio/github-azure-oidc # https://github.com/Azure/login#sample-workflow-that-uses-azure-login-action-using-oidc-to-run-az-cli-linux # other login options are possible too - name: AZ CLI login π uses: azure/login@v1 with: client-id: ${{ secrets.AZURE_CLIENT_ID }} tenant-id: ${{ secrets.AZURE_TENANT_ID }} subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }} - name: Get preview URL π id: static_web_app_preview_url uses: azure/CLI@v1 with: inlineScript: | DEFAULTHOSTNAME=$(az staticwebapp show -n '${{ env.STATICWEBAPPNAME }}' | jq -r '.defaultHostname') PREVIEW_URL="https://${DEFAULTHOSTNAME/.[1-9]./-${{github.event.pull_request.number }}.${{ env.LOCATION }}.1.}" echo "PREVIEW_URL=$PREVIEW_URL" >> $GITHUB_OUTPUT - name: Setup Node.js π§ uses: actions/setup-node@v3 with: node-version: '18' cache: 'yarn' - name: Install and build site π§ run: | cd blog-website yarn install --frozen-lockfile yarn run build cp staticwebapp.config.json build/staticwebapp.config.json - name: Get API key π id: static_web_app_apikey uses: azure/CLI@v1 with: inlineScript: | APIKEY=$(az staticwebapp secrets list --name '${{ env.STATICWEBAPPNAME }}' | jq -r '.properties.apiKey') echo "APIKEY=$APIKEY" >> $GITHUB_OUTPUT - name: Deploy site π id: static_web_app_build_and_deploy uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ steps.static_web_app_apikey.outputs.APIKEY }} repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) action: 'upload' skip_app_build: true app_location: '/blog-website/build' # App source code path api_location: '/blog-website/api' # Api source code path - optional outputs: preview-url: ${{steps.static_web_app_preview_url.outputs.PREVIEW_URL}} integration_tests_job: name: Integration tests π‘π needs: build_and_deploy_swa_job if: github.event_name == 'pull_request' && github.event.action != 'closed' runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Wait for preview ${{ needs.build_and_deploy_swa_job.outputs.preview-url }} β id: static_web_app_wait_for_preview uses: nev7n/wait_for_response@v1 with: url: '${{ needs.build_and_deploy_swa_job.outputs.preview-url }}' responseCode: 200 timeout: 600000 interval: 1000 - uses: actions/setup-node@v3 with: node-version: 18 - name: Install dependencies run: npm ci working-directory: ./blog-website-tests - name: Install Playwright Browsers run: npx playwright install --with-deps working-directory: ./blog-website-tests - name: Run Playwright tests env: PLAYWRIGHT_TEST_BASE_URL: '${{ needs.build_and_deploy_swa_job.outputs.preview-url }}' run: npx playwright test working-directory: ./blog-website-tests - uses: actions/upload-artifact@v3 if: always() with: name: playwright-report path: blog-website-tests/playwright-report/ retention-days: 30 close_pull_request_job: if: github.event_name == 'pull_request' && github.event.action == 'closed' runs-on: ubuntu-latest name: Cleanup staging π₯ steps: - name: AZ CLI login π uses: azure/login@v1 with: client-id: ${{ secrets.AZURE_CLIENT_ID }} tenant-id: ${{ secrets.AZURE_TENANT_ID }} subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }} - name: Get API key π id: apikey uses: azure/CLI@v1 with: inlineScript: | APIKEY=$(az staticwebapp secrets list --name '${{ env.STATICWEBAPPNAME }}' | jq -r '.properties.apiKey') echo "APIKEY=$APIKEY" >> $GITHUB_OUTPUT - name: Destroy staging environment π₯ id: closepullrequest uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ steps.apikey.outputs.APIKEY }} action: 'close'
-
Deploying C# Azure Functions via GitHub Actions
Azure Login
-
CICD experience: Source-2-image and deploy to Oracle WebLogic Server on AKS
We leveraged many existing GitHub Actions such as actions/checkout, azure/CLI and azure/login to build our pipeline. The built-in support for bash scripts provides all the flexibilities we needed to complete it.
-
How do you handle Azure/Google cloud creds in GitHub Actions?
Interesting - do you use https://github.com/Azure/login in GitHub Actions, or do you just create GitHub secrets and use those as env vars in the action steps?
-
Multiple Azure Subs One Github Action
In order for the workflow to successfully log in to the Azure subscriptions, you will need to make sure that you have created a Service Principal with the appropriate permissions. Once the Service Principal has been created you can add the details to a repository secret on GitHub. You can find out more about how to create this Service Principal on the βAzure/Loginβ GitHub repo. Once created, you secrets might look like the below.
-
Using the GitHub self-hosted runner and Azure Virtual Machines to login with a System Assigned Managed Identity
This error actually makes sense. If you've seen any of my recent talks / posts, you may have noticed that I talk about how each GitHub Action is just another GitHub repository that follows a specific standard. Each GitHub Action has an action.yml file in the root of the GitHub repository. This is available for the Azure/login action here.
blog.johnnyreilly.com
-
Migrating Azure Functions from JSDoc JavaScript to TypeScript
All of these affordances are available to me with TypeScript, and I want to keep them. Let's begin migrating. Incidentally, the code for this migration lies in this PR.
-
Playwright, GitHub Actions and Azure Static Web Apps staging environments
I'm going to write about this in the context of my blog. My blog is open source and you can find the code here. I'm going to present a simplified solution in this post, but you can find the full solution on GitHub.
-
Migrating from ts-node to Bun
These scripts are implemented as a simple ts-node console app. For historical reasons it's called trim-xml (it originally just truncated the sitemap.xml file). It's not a particularly good name but I'm not going to change it now. As the blog is open source, you can see the [code of trim-xml here](https://github.com/johnnyreilly/blog.johnnyreilly.com/tree/main/trim-xml].
-
Docusaurus blogs: adding breadcrumb Structured Data
I'm somewhat on the fence as to whether it's useful to have a breadcrumb for each tag. In fact, originally I didn't have it when I first added support. But I've added it in as it's not a lot of work and it's not a lot of code. I'm not sure if it's useful or not. I've added it now; I'm going to leave it in in place for a bit and see how it goes.
-
Serving Docusaurus images with Cloudinary
You will also need to disable the url-loader in your Docusaurus build which transforms images into base64 strings, as this will conflict with the plugin. There isn't a first class way to do this in Docusaurus at present. However by setting the environment variable WEBPACK_URL_LOADER_LIMIT to 0 you can disable it. You can see an implementation example in this pull request. It amounts to adding the cross-env package and then adding the following to your package.json:
//@ts-check const visit = require('unist-util-visit'); /** * Create a remark plugin that will replace image URLs with Cloudinary URLs * @param {*} options cloudName your Cloudinaryβs cloud name eg demo, baseUrl the base URL of your website eg https://blog.johnnyreilly.com - should not include a trailing slash, will likely be the same as the config.url in your docusaurus.config.js * @returns remark plugin that will replace image URLs with Cloudinary URLs */ function imageCloudinaryRemarkPluginFactory( /** @type {{ cloudName: string; baseUrl: string }} */ options ) { const { cloudName, baseUrl } = options; const srcRegex = / src={(.*)}/; /** @type {import('unified').Plugin<[], import('hast').Root>} */ return function imageCloudinaryRemarkPlugin() { return (tree) => { visit(tree, ['element', 'jsx'], (node) => { if (node.type === 'element' && node['tagName'] === 'img') { // handles nodes like this: // { // type: 'element', // tagName: 'img', // properties: { // src: 'https://some.website.com/cat.gif', // alt: null // }, // ... // } const url = node['properties'].src; node[ 'properties' ].src = `https://res.cloudinary.com/${cloudName}/image/fetch/${url}`; } else if (node.type === 'jsx' && node['value']?.includes('')) { // handles nodes like this: // { // type: 'jsx', // value: '' // } const match = node['value'].match(srcRegex); if (match) { const urlOrRequire = match[1]; node['value'] = node['value'].replace( srcRegex, ` src={${`\`https://res.cloudinary.com/${cloudName}/image/fetch/${baseUrl}\$\{${urlOrRequire}\}\``}}` ); } } }); }; }; } module.exports = imageCloudinaryRemarkPluginFactory;
-
How I Ruined My SEO
yeah I'm hoping that my redirect story is now quite good - see dynamic redirect code here:
https://github.com/johnnyreilly/blog.johnnyreilly.com/blob/m...
as to the duplicate content, Docusaurus generates /tags/ and /pages/ content by default that I strip from from my sitemap manually.
-
How I ruined my SEO
I started using fontaine on my blog. If you haven't tried it out, you can find it here. It helps reduce Cumulative Layout Shift. The flash of unstyled content jank that you can see when you first land on a site, before fonts have loaded. I can't see why that would be an issue. It should improve my blogs Core Web Vitals and help stuff rank better, not worse. I think this is a red herring.
client side redirects boom * https://github.com/johnnyreilly/blog.johnnyreilly.com/commit/e641431314c4b6a19d375f1c7bc14f5bd6456ec9 november feedback loop
-
Using Application Insights with Bicep to monitor Azure Static Web Apps and Azure Functions
param location string param branch string param staticWebAppName string param tags object @secure() param repositoryToken string param rootCustomDomainName string param blogCustomDomainName string param appInsightsId string param appInsightsInstrumentationKey string param appInsightsConnectionString string var tagsWithHiddenLinks = union({ 'hidden-link: /app-insights-resource-id': appInsightsId 'hidden-link: /app-insights-instrumentation-key': appInsightsInstrumentationKey 'hidden-link: /app-insights-conn-string': appInsightsConnectionString }, tags) resource staticWebApp 'Microsoft.Web/staticSites@2022-03-01' = { name: staticWebAppName location: location tags: tagsWithHiddenLinks sku: { name: 'Free' tier: 'Free' } properties: { repositoryUrl: 'https://github.com/johnnyreilly/blog.johnnyreilly.com' repositoryToken: repositoryToken branch: branch provider: 'GitHub' stagingEnvironmentPolicy: 'Enabled' allowConfigFileUpdates: true buildProperties:{ skipGithubActionWorkflowGeneration: true } } } resource staticWebAppAppSettings 'Microsoft.Web/staticSites/config@2022-03-01' = { name: 'appsettings' kind: 'string' parent: staticWebApp properties: { APPINSIGHTS_INSTRUMENTATIONKEY: appInsightsInstrumentationKey APPLICATIONINSIGHTS_CONNECTION_STRING: appInsightsConnectionString } } resource staticWebAppFunctionAppSettings 'Microsoft.Web/staticSites/config@2022-03-01' = { name: 'functionappsettings' kind: 'string' parent: staticWebApp properties: { APPINSIGHTS_INSTRUMENTATIONKEY: appInsightsInstrumentationKey APPLICATIONINSIGHTS_CONNECTION_STRING: appInsightsConnectionString } } resource rootCustomDomain 'Microsoft.Web/staticSites/customDomains@2022-03-01' = { parent: staticWebApp name: rootCustomDomainName properties: {} } resource blogCustomDomain 'Microsoft.Web/staticSites/customDomains@2022-03-01' = { parent: staticWebApp name: blogCustomDomainName properties: {} } output staticWebAppDefaultHostName string = staticWebApp.properties.defaultHostname output staticWebAppId string = staticWebApp.id output staticWebAppName string = staticWebApp.name
What are some alternatives?
configure-aws-credentials - Configure AWS credential environment variables for use in other GitHub Actions.
Docusaurus - Easy to maintain open source documentation websites.
auth - A GitHub Action for authenticating to Google Cloud.
Oryx - Build your repo automatically.
actions - GitHub Action for Infracost. See cloud cost estimates for Terraform in pull requests. π°π Love your cloud bill!
notes - Collection of my byte sized notes on programming and other random topics.
auth - Authenticator via oauth2, direct, email and telegram
fontaine - Automatic font fallback based on font metrics [Moved to: https://github.com/danielroe/fontaine]
github-azure-oidc - Some scripts and info to help you get your GitHub action connected to Azure
susam.net - Source code of https://susam.net/
cargotracker - The project demonstrates how you can develop applications with Jakarta EE using widely adopted architectural best practices like Domain-Driven Design (DDD).
fontaine - Automatic font fallback based on font metrics [Moved to: https://github.com/unjs/fontaine]