Merge pull request #24 from loloop/mauricio/image-modifier

adds first pass for markdown image modifier

Author: loloop

site/Content/br/appclips.md

@@ -16,7 +16,7 @@ Os App Clips tem um tamanho limite de 10MB por Clip, então é importante escolh
 
 Começando do começo, os App Clips são um app como qualquer outro, apenas com algumas limitações, então para criá-los é bem simples, basta criar um target novo no seu projeto com o App Clip desejado. Como é possível criar mais de um clip por app, é interessante utilizar um bundle identifier que vai representar a funcionalidade do seu clip. Não se preocupe muito com isso, porque dá pra criar e configurar outros depois :) No app da NSBrazil, criei como `com.cocoaheads.conf.baseClip`
 
-![](/images/appclips/creating-clip-target.png)
+![](appclips/creating-clip-target.png)
 
 Uma das coisas mais legais dos App Clips é que eles são obrigatoriamente apps de iOS 14+, então nós podemos usar o lifecycle de um app SwiftUI ao invés do clássico App/SceneDelegate do UIKit. Também é possível usar eles, claro, mas se a gente pode optar pelo processo mais simples, por que não?
 
@@ -75,7 +75,7 @@ No clip da NSBrazil, existe uma `View` que só existe dentro do código do App C
 
 Escolhendo esse approach de compilar os mesmos arquivos para targets diferentes, as vezes ainda precisamos fazer alterações específicas para a experiência do nosso clip. Para esses casos, podemos criar uma compiler flag que vai incluir o código apenas na compilação do clip, em `Swift Compiler - Custom Flags` do target do App Clip, adicionando a `-D <NOMEDASUAFLAG>`:
 
-![](/images/appclips/swiftflag.png)
+![](appclips/swiftflag.png)
 
 Com isso, podemos escrever nosso código incluindo as flags quando necessário, como por exemplo:
 
@@ -106,29 +106,29 @@ VStack(alignment: .leading, spacing: 5) {
 
 E aí, compilando tanto o app quanto o App Clip, podemos ver o resultado:
 
-![](/images/appclips/clipcomparison.png)
+![](appclips/clipcomparison.png)
 
 ## Invocando e testando o App Clip
 
 Com o nosso código pronto e organizado, agora precisamos testar o clip. Rodando pelo Xcode, o clip se comporta com o mesmo processo de um app comum no simulador, mas essa não é a experiência completa que o usuário vai ter quando for invocar o clip, não é? Para isso, precisamos associar o domínio da URL que usaremos para invocar nas capabilities do target do clip:
 
-![](/images/appclips/assoc-domains.png)
+![](appclips/assoc-domains.png)
 
 E também precisamos criar uma Local Experience no menu de Desenvolvedor (`Desenvolvedor -> Local Experiences -> Register Local Experience`) do aparelho:
 
-![](/images/appclips/local-experience.png)
+![](appclips/local-experience.png)
 
 <p class="center muted caption">Caso o menu Desenvolvedor não esteja aparecendo nos Ajustes, instale um app no seu device pelo Xcode</p>
 
 Assim que esse menu for preenchido, podemos abrir a câmera ou o Scanner de códigos do sistema e testar o nosso App Clip!
 
 Caso queira testar em outros devices, é possível arquivar uma versão para instalação *ad-hoc* ou subir o app para o `TestFlight`, e aí, só seguir os mesmos passos de criar a experiência local.
 
-![](/images/appclips/testflight.png)
+![](appclips/testflight.png)
 
 Uma das limitações mais importantes do App Clip é o tamanho do app, e é bem fácil da gente checar isso também, basta arquivar o App Clip para instalações *ad-hoc* e marcar essas opções:
 
-![](/images/appclips/thinning.png)
+![](appclips/thinning.png)
 
 Dentro da pasta que o Xcode criou pra gente, existe um arquivo chamado `App Thinning Size Report.txt`, com o tamanho do seu clip para cada variante do App Thinning. Procure pela variante `Universal` do app e verifique o tamanho **uncompressed** dela. Esse é o tamanho que não pode passar de 10MB.
 
@@ -196,6 +196,6 @@ A partir daí, podemos criar as imagens de acesso, que podem ser tanto um QR Cod
 
 O último passo é criar a experiência no AppStore Connect, preencher todos os detalhes para formar o card do clip, e esperar até 48h para que ele se propague. (OBS: Essa parte só vai aparecer no seu Connect depois que você subir um build que contém um App Clip)
 
-![](/images/appclips/appstore.png)
+![](appclips/appstore.png)
 
 E é isso! Nosso App Clip está pronto para ser compartilhado com o mundo. Se você quiser conferir o projeto completo do app da NSBrazil, é só entrar lá no [Repositório do Projeto](https://github.com/CocoaHeadsConference/CHConferenceApp), completamente feito com SwiftUI, com target a partir do iOS13!

site/Content/br/event-based-architechture-for-spritekit.md

@@ -14,7 +14,7 @@ O SpriteKit é um framework desenvolvido pela Apple para a criação de jogos de
 
 O jogo de exemplo que desenvolvi para expor esta arquitetura é um infinite runner bem simples, que conta com todos os elementos básicos que se espera de um jogo: uma personagem que tem movimentos, ações, animações, pontos de vida, sons, que existe em um ambiente animado com inimigos que reagem a personagem e tentam acabar com a existência dela, e claro, com uma boa trilha sonora de fundo também.
 
-![](/images/spritekit/game.jpeg)
+![](spritekit/game.jpeg)
 <p class="center muted caption">Toda a arte deste jogo é composta de assets de domínio público, criados pelo ótimo <a href="https://kenney.nl">Kenney</a></p>
 
 O objeto básico do SpriteKit é o `SKNode`, todos os objetos que vão ser utilizados no contexto dele são do mesmo tipo, e quando juntos, formam uma árvore de nós pais e filhos, com métodos prontos para acessá-los.

site/Content/br/serversideswift.md

@@ -16,20 +16,20 @@ Escrever o código todos nós já entendemos bem, e ver o resultado da nossa cri
 
 Eu criei o [@F1LandinhoBot](https://t.me/F1LandinhoBot) com o intuito de me ajudar a lembrar os horários das corridas da Fórmula 1 num grupo de amigos, acessando a API do Telegram e mandando mensagens para que a gente não perdesse o horário de uma sessão sequer das corridas. 
 
-![](/images/serverswift/telegram.png)
+![](serverswift/telegram.png)
 
 E funcionou tudo bem tranquilo rodando direto no meu Mac, mas eu não quero deixar o meu Mac ligado o tempo todo, rodando esse código pro bot funcionar, e não quero nem pensar em como eu vou garantir que ele vai funcionar o tempo todo. Onde moro, quedas de energia são bem comuns, e isso me parece um desperdício de processamento do meu computador de qualquer forma.
 
 Então resolvi colocar esse código para rodar no meu servidor na Amazon, que eu já tenho faz uns anos rodando um [servidor de Quake](https://quake.host), então não precisaria desembolsar nenhum centavo a mais do que eu já pago por ele pra colocar o serviço no ar. O setup do Swift no Linux está todo detalhado no [Swift.org](https://swift.org) e apesar de um pouco trabalhoso, é fácil de seguir. Clonei o código do GitHub e eu não estava esperando o que vinha a seguir: 
 
-![](/images/serverswift/wont-build.png)
+![](serverswift/wont-build.png)
 <p class="center muted caption">OpenCombine é uma biblioteca feita especificamente pra gente usar o Combine no Linux, como assim ela não existe? Desde quando URLSession é um AnyObject?</p>
 
 ## Swift no Linux
 
 Existem algumas lombadas durante o caminho do Swift no servidor que são raramente mencionadas, principalmente porque são abstraídas pelos frameworks famosos, mas que você vai encontrar bem rápido se for pelo caminho de escrever o código "puro". Todas elas existem por conta do fato de que o Swift no Mac não traz as mesmas bibliotecas que o Swift no Linux. O Foundation, que a gente está bastante acostumado a usar no mundo Apple não é o mesmo Foundation que existe no Linux, e isso [não é documentado](https://forums.swift.org/t/what-are-best-practices-to-write-a-linux-software-on-macos/) em lugar algum. É um problema que [não deve durar muito tempo](https://www.swift.org/blog/future-of-foundation/), mas ainda é um problema.
 
-![](/images/serverswift/urlsession.png)
+![](serverswift/urlsession.png)
 <p class="center muted caption">O URLSession fica em uma biblioteca completamente diferente no Linux, que nem existe no macOS!</p>
 
 ## Publicando o nosso trabalho
@@ -110,6 +110,6 @@ E é isso! Desse jeito você consegue automatizar a execução do seu código em
 
 Um jeito muito mais fácil de se realizar esse processo todo é utilizando uma plataforma como o [Render](https://render.com) (ou outros milhares de serviços que fazem a mesma coisa), que vai abstrair todo o processo de configurar o ambiente, realizar o deploy quando houver um merge, e vai te dar outras regalias, como backups de banco de dados e etc. Essa facilidade toda tem o seu custo ($), e caso você queira subir outro serviço, os custos vão subir bem mais rápido.
 
-![](/images/serverswift/render.png)
+![](serverswift/render.png)
 
 Não tem muito o que ficar falando sobre essas plataformas, cada uma vai ter suas particularidades, mas é uma alternativa que eu gosto muito de usar! Quanto menos tempo a gente gasta na infraestrutura, mais a gente pode investir no produto em si, e isso é o que importa no final. Até a próxima!

site/Content/br/swiftui-motion-effects.md

@@ -12,7 +12,7 @@ Pequenos detalhes fazem toda a diferença, e pequenos detalhes me deixam desprop
 
 Uma das interações mais legais e super tranquilas da gente implementar nos nossos apps UIKit é o UIInterpolationMotionEffect, que dá aquele efeito de parallax quando mexemos o celular, mais conhecido pelo efeito [Perspectiva](https://support.apple.com/pt-br/HT200285) que podemos aplicar nas imagens de fundo de nossos iPhones e iPads. Mas quando tentei adicionar um em minha View de SwiftUI, fui pego por isso daqui:
 
-![Imagem com uma view de SwiftUI onde um motionEffect que tenta ser aplicado nela dá erro, porque não existe](/images/motion/motionError.png)
+![Imagem com uma view de SwiftUI onde um motionEffect que tenta ser aplicado nela dá erro, porque não existe](motion/motionError.png)
 
 Eis que descubro, pesquisando pela documentação que não existe uma forma de colocar um efeito desses nativamente com o SwiftUI! Meu primeiro pensamento foi criar uma UIViewRepresentable que tivesse a minha View dentro de um container do SwiftUI, fazendo um bridge de SwiftUI -> UIKit -> SwiftUI, que tentei fazer, mas sem muito sucesso.
 
@@ -237,6 +237,6 @@ extension View {
 
 E com isso, o nosso código lá do começo funciona perfeitamente, da forma que eu queria que ele funcionasse :)
 
-![Imagem com uma view de SwiftUI onde um motionEffect é aplicado com sucesso](/images/motion/motionSucc.png)
+![Imagem com uma view de SwiftUI onde um motionEffect é aplicado com sucesso](motion/motionSucc.png)
 
 O projeto completo com o exemplo do card e o reader do giroscópio está no [meu GitHub](https://github.com/loloop/SwiftInMotion), e deixo meus agradecimentos aqui ao [@Alan Pégoli](https://twitter.com/alanpegoli) que fez o beta test e apontou uma falha gritante no artigo :)

site/Content/br/unity3d-and-apple.md

@@ -17,7 +17,7 @@ Este artigo foi escrito há muito tempo atrás. O site onde hospedei os gifs na
 
 Este artigo é uma cópia do meu artigo publicado para o equinociOS 2016, uma reunião de artigos criados durante o equinócio feitos pela comunidade Apple no Brasil.
 
-![O fps mais inovador que eu já joguei em anos](/images/unity/muchocaliente.png)
+![O fps mais inovador que eu já joguei em anos](unity/muchocaliente.png)
 
 Nascida no OS X em 2005 e portada para o resto do mundo todo, a Unity é uma das maiores game engines da atualidade, e uma das melhores escolhas que se pode fazer quando o assunto é gamedev para aparelhos mobile. Com suporte a tantas plataformas que eu não duvidaria que ela funciona até em torradeiras, e isto naturalmente traz aquela dúvida que todo framework que promete mil e uma plataformas traz: Mas realmente funciona?
 
@@ -28,7 +28,7 @@ Agora que você já conhece um pouco da Unity e o core dela, vamos começar? :)
 
 ## Primeiros Passos
 
-![Página Inicial da Unity3D](/images/unity/GetUnity.png)
+![Página Inicial da Unity3D](unity/GetUnity.png)
 
 Bom, vamos começar baixando a Unity né? Não precisa se preocupar muito se ela vai rodar bem no seu Mac, pois estou usando um [MacBook Air de 2010](https://support.apple.com/kb/sp618?locale=en_US) para escrever este artigo. A versão que eu usei pra escrever ele é a 5.3.2, mas já saiu uma versão mais nova, a 5.3.3, mas tudo que eu fizer aqui deve funcionar nela sem o menor dos problemas. O download tá no [site da Unity](http://unity3d.com/download), e a Personal Edition é completa o suficiente pra funcionar com tudo que a gente vai usar.
 
@@ -38,7 +38,7 @@ Não se esqueça de marcar pro Download Assistant baixar o Build Support para as
 
 ### O Unity Remote
 
-![Unity Remote 4 na App Store](/images/unity/UnityRemote4.png)
+![Unity Remote 4 na App Store](unity/UnityRemote4.png)
 <p><span class="caption muted"><a href="https://itunes.apple.com/us/app/unity-remote-4/id871767552?mt=8">Download do UnityRemote na App Store</a></span></p>
 
 Testar builds em aparelhos iOS com a Unity é um processo demorado e chato. Para aqueles testes onde queremos apenas o input do celular, o Remote é uma 
@@ -52,7 +52,7 @@ Para deixar o mais amigável para se trabalhar com o Git, nós precisamos mudar
 
 Fica bem mais fácil de identificar problemas assim, já que antes não era possível fazer diff dos arquivos, mas isso deixa os commits um número de linhas bem exagerado, como dá pra ver nos graphs do GitHub de um dos meus projetos.
 
-![3mi linhas de código](/images/unity/3MilhoesDeLinhas.png)
+![3mi linhas de código](unity/3MilhoesDeLinhas.png)
 
 ### Player Settings
 

site/Sources/InkMarkdownRenderer.swift

@@ -60,6 +60,37 @@ extension MarkdownParser {
             return decorated
         }
         parser.addModifier(codeBlockModifier)
+        let imageModifier = Modifier(target: .images) { html, markdown in
+            do {
+                let altRegex = try Regex(#"alt="([^"]+)""#)
+                let altValue = try altRegex.firstMatch(in: html)?.last?.value
+                let altValueString = String(altValue as? Substring ?? "")
+                
+                let srcRegex = try Regex(#"src="([^"]+)""#)
+                let value = try srcRegex.firstMatch(in: html)?.last?.value
+                let valueString = String(value as? Substring ?? "")
+                
+                /*
+                // TODO: Fork Ink and add `metadata` as a modifier parameter
+                // TODO: so we can get the article slug and automatically append it here
+                let last = valueString.split(separator: "/").last ?? ""
+                print(regex)
+                print(last)
+                 */
+
+                return if altValueString.isEmpty {
+                    #"<img src="/images/\#(valueString)" />"#
+                } else {
+                    #"<img src="/images/\#(valueString)" alt="\#(altValueString)" />"#
+                }
+                
+            } catch {
+                fatalError("InkMarkdownParser: Failed to modify image URL")
+            }
+        }
+        
+        parser.addModifier(imageModifier)
+        
         return parser
     }
 }