add content and change project layout

.pugrc

@@ -1,4 +0,0 @@
-{
-  "pretty": true,
-  "basedir": "./"
-}

.pugrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  "pretty": true,
+  "basedir": ".",
+  // "debug": true,
+  // "compileDebug": true,
+  "locals": {
+    "require": require
+  }
+}

README.md

@@ -0,0 +1,37 @@
+# intro
+
+this is a manpage-like html template, but tbh it's not really a manpage
+
+created with [pug][pug] and [sass][sass], build with [parcel][parcel].
+
+## setup
+
+```bash
+  # install dependencies
+$ yarn install
+  # build the output
+$ yarn build
+  # build results are here
+$ ls dist
+```
+
+## contents
+
+`/index.pug`: the starting point of the template.
+
+`/vars.pug`: sample variables. copy it to `/vars.local.pug` and edit it.
+
+`/includes`: template parts are located here.
+
+- `include /somefile` from anywhere will look for `somefile` in project root
+- `include somefile` will be relative to current pug file.
+
+`/assets`: css/sass, scripts, images etc are located here.
+
+`/assets/styles/index.sass`: the starting point of the sass template.
+
+---
+
+[pug]: https://pugjs.org
+[sass]: https://sass-lang.com
+[parcel]: https://parceljs.org

assets/pubkey.asc

@@ -0,0 +1,51 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+=98Kc
+-----END PGP PUBLIC KEY BLOCK-----

assets/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"./images/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"./images/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

assets/styles/content.sass

@@ -0,0 +1,50 @@
+@import 'variables'
+
+*
+  scroll-behavior: smooth
+
+a
+  cursor: pointer
+
+@media print
+  a.print:after
+    content: " (" attr(href) ") "
+    font-size: 50%
+
+.synopsis
+  .desc > p
+    // make command line wraps keep indent
+    margin: 0
+    margin-left: 4em
+    text-indent: -4em
+    @media (max-width: 600px)
+      margin-left: 2em
+      text-indent: -2em
+
+.options, .history
+  .desc > ul > li
+    list-style: none
+  .desc  li > .opt_desc
+    margin-left: 2em
+    @media (max-width: 600px)
+      margin-left: 1em
+    p
+      margin-top: 0
+
+.history
+  // .job
+  //   font-weight: bold
+  // .org
+  //   font-style: italic
+  .period
+    float: right
+    font-style: italic
+
+#phone-hint
+  visibility: hidden
+  opacity: 0
+#phone:hover
+  #phone-hint
+    opacity: inherit
+    visibility: inherit
+    transition: all 1s ease-out

assets/styles/index.sass

@@ -0,0 +1,10 @@
+@import 'variables'
+@import 'npm:@csstools/normalize.css/normalize.css'
+
+*
+  box-sizing: border-box
+
+@import 'structure'
+@import 'content'
+@import 'typography'
+@import 'scheme'

assets/styles/scheme.sass

@@ -0,0 +1,89 @@
+
+$bg: #444444
+$mg: #222222
+$fg: #C8C8C8
+
+$dim: #A4A4A4
+$bright: #D8D8D8
+$dimmer: #888888
+$brighter: #FBFBFB
+
+$accent1: #98e2ff
+$accent2: #ffe655
+$accent3: #82cdff
+$accent4: #69f07b
+
+body
+  background-color: $bg
+  color: $fg
+.container
+  background-color: $bg
+.content
+  background-color: $mg
+  h1, h2, h3, h4, h5, h6
+    color: $brighter
+.main
+  .target:target
+    animation: 2s attention ease-out
+
+  .period
+    color: $dimmer
+header, footer
+  color: $dimmer
+
+.dark
+  color: $bg
+.dim
+  color: $dim
+.dimmer
+  color: $dimmer
+.bright
+  color: $bright
+.brighter
+  color: $brighter
+
+.main
+  b
+    color: $accent4
+  em
+    color: $accent1
+  h1
+    color: $fg
+  .description, .options
+    em
+      color: $accent1
+  .options b
+      color: $accent4
+  .synopsis
+    .desc > p > b
+      color: $accent4
+  .history
+    .job
+      color: $accent4
+
+.target a, a.target
+  text-decoration: none
+  border: none
+  color: inherit
+  &:visited
+    color: inherit
+  &:hover
+    color: inherit
+
+a
+  text-decoration: none
+  border-bottom: 1px dotted grey
+  color: inherit
+  &:visited
+    color: inherit
+  &:hover, &:focus
+    color: $accent2
+
+#phone-hint
+  color: $dimmer
+
+@keyframes attention
+  70%
+    color: $accent2
+  100%
+    color: auto

assets/styles/structure.sass

@@ -0,0 +1,97 @@
+@import 'variables'
+
+body
+  padding: 0
+  margin: 0
+  line-height: 1.5
+
+.container
+  max-width: 1200px
+  margin: 0 auto
+  padding: 20px
+  min-height: 100vh
+
+.content
+  // text-align: justify
+  max-width: 1000px
+  margin: 0 auto
+  padding: 20px 40px
+  border-radius: 3px
+  @media (max-width: 600px)
+    padding: 20px
+
+.main
+  section
+    margin-bottom: 1.5*$size
+  h1
+    padding-left: 0
+  h2
+    padding-left: 2em
+    @media (max-width: 600px)
+      padding-left: 1em
+  .desc
+    padding-left: 4em
+    @media (max-width: 600px)
+      padding-left: 2em
+  ol, ul
+    padding-left: 2em
+    @media (max-width: 600px)
+      padding-left: 1em
+    li
+      // list-style-position: inside
+      list-style-type: square
+  .history
+    .desc > ul > li
+      margin-bottom: 1.5*$size
+
+header
+  margin-bottom: 2*$size
+footer
+  margin-top: 2*$size
+
+header table, footer table
+  width: 100%
+  border-collapse: collapse
+  border-spacing: 0
+  .left, .right
+    width: 30%
+  .center
+    width: 40%
+  td
+    word-break: break-word
+
+header
+  .left, .right
+    text-transform: uppercase
+footer
+  .right
+    text-transform: uppercase
+
+.left
+  text-align: left
+.center
+  text-align: center
+.right
+  text-align: right
+
+// .box {
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   width: 100%;
+//   heigh: 100%;
+//   padding: 10px;
+//   box-sizing: border-box;
+// }
+//
+// .box div {
+//   width: 100%;
+//   height: 100%;
+//   padding: 10px;
+//   margin: 0;
+//   border: 0;
+//   box-sizing: border-box;
+// }
+// .box p {
+//     margin: 0
+// }

assets/styles/typography.sass

@@ -0,0 +1,24 @@
+@import 'variables'
+
+$font: 'IBM Plex Mono'
+$font_stack: $font, 'SF Mono', 'Liberation Mono', 'Consolas', monospace
+
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap')
+*
+  font-family: $font_stack
+
+body
+  font-size: $size
+
+h1, h2, h3, h4, h5, h6
+  font-size: $size + 2
+  text-transform: uppercase
+
+.header, .footer
+  // font-size: $size - 1
+  text-transform: uppercase
+  .center
+    text-transform: capitalize
+.footer
+  .left
+    text-transform: none

assets/styles/variables.sass

@@ -0,0 +1 @@
+$size: 12pt

includes/body.pug

@@ -0,0 +1,32 @@
+include /vars
+include /includes/mixins/page_id
+
+div.container
+  div.content
+
+    header
+      table
+        tr
+          td.left #[+page_id()]
+          td.center= section_name
+          td.right #[+page_id()]
+
+    section.main
+      block main-content
+        include ./sections/name
+        include ./sections/synopsis
+        include ./sections/description
+        include ./sections/options
+        include ./sections/history
+        include ./sections/recognition
+        include ./sections/contact
+        include ./sections/seealso
+        include ./sections/copyright
+
+    footer
+      table
+        tr
+          // .left Version #[a(href=source_link) #{short_version}]
+          td.left Version #{short_version}
+          td.center= date
+          td.right #[+page_id()]

includes/head.pug

@@ -0,0 +1,20 @@
+include /vars
+block meta
+  meta(http-equiv="Content-Type" content="text/html;charset=UTF-8")
+  meta(http-equiv="X-UA-Compatible" content="IE=edge")
+  meta(name="viewport" content="width=device-width,initial-scale=1.0")
+block links
+  link(rel="apple-touch-icon" sizes="180x180" href="./assets/images/apple-touch-icon.png")
+  link(rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png")
+  link(rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon-16x16.png")
+  link(rel="manifest" href="./assets/site.webmanifest")
+  meta(name="author" content=name)
+  meta(name="description" content=meta_description)
+  meta(property="og:title" content=name + ' - ' + description)
+  meta(property="og:description" content=meta_description)
+  meta(property="og:type" content="website")
+  meta(property="og:image" content=site_url + "/assets/opengraph.png")
+  meta(name="twitter:card" content="summary_large_image")
+block styles
+  link(rel="stylesheet" href="assets/styles/index.sass")
+title #{name}(#{section})

includes/mixins/ext_a.pug

@@ -0,0 +1,2 @@
+mixin ext_a(href, content, class_name='')
+  a(href=href target="_blank" rel="external nofollow noopener" class=class_name)= content

includes/mixins/page_id.pug

@@ -0,0 +1,2 @@
+mixin page_id()
+  | #{name}(#{section})

includes/sections/contact.pug

@@ -0,0 +1,6 @@
+section.contact
+  h1.target#contact: a(href="#contact") contact
+  .desc
+    ul
+      each value, method in contacts
+        li #{method}: #[em !{value}]

includes/sections/copyright.pug

@@ -0,0 +1,11 @@
+include /includes/mixins/ext_a
+
+section.copyright
+  h1.target#copyright: a(href="#copyright") copyright
+  .desc
+    | © #{year} #{first_name} #{last_name}.
+    br
+    |  Created with #[+ext_a('https://pugjs.org', 'pug')]
+    |  and #[+ext_a('https://sass-lang.com', 'sass')].
+    |  Built with #[+ext_a('https://parceljs.org', 'parcel')].
+    |  Pronunciation generated by #[+ext_a('https://ipa-reader.xyz', 'ipa-reader')].

includes/sections/description.pug

@@ -0,0 +1,14 @@
+section.description
+  h1.target#description: a(href="#description") description
+  .desc
+    p.
+      Hello! I am a self-taught technology professional with a strong background in
+      #[em system administration] and #[em general programming], with proven hands-on
+      experience in #[em modern dev-ops], #[em cloud-ops], and #[em IaC] work domains.
+    p.
+      I have a passion for learning and building things that are useful,
+      sustainable, minimal, and easy to use. I put a lot of care to keep my work
+      output #[em clean], #[em maintainable] and #[em well-documented].
+    p.
+      I'm also an active member of the open-source culture, always
+      looking for opportunities to contribute and to assist the community.

includes/sections/history.pug

@@ -0,0 +1,46 @@
+section.history
+  h1.target#history: a(href="#history") history
+  .desc
+    // p My professional employment summary with notable duties is listed below.
+    ul
+      li #[b.job DevOps Consultant] - #[em.org contract] #[span.period 2021-....]
+        ul
+          li adapting classic workloads to serverless architecture
+          li implementing modern logging and tracing solutions
+          li providing support for cloud devops processes
+
+      li #[b.job DevOps Engineer] - #[em.org Digital Healthcare Solutions] #[span.period 2021-....]
+        ul
+          li supervising kubernetes and classic server workloads
+          li in charge of cloud infrastructure administration
+          li managing ci/cd and deployment pipeline
+          li maintaining total monitoring stack
+
+      li #[b.job TechOps Engineer] - #[em.org Telenor Health] #[span.period 2020-2021]
+        ul
+          li provided application support services for engineering
+          li managed application performance monitoring
+          li provided support and service automation
+          li prepared service documentation
+
+      li #[b.job IT Engineer] - #[em.org Taurus] #[span.period 2018-2020]
+        ul
+          li maintained local network infrastructure and email service
+          li created digital service catalog and inventory systems
+          li implemented document management and backup systems
+
+      li #[b.job Programmer] - #[em.org freelance] #[span.period 2015-2018]
+        ul
+          li delivered system automation and scripting projects
+          li performed front-end web development and debugging
+          li created web APIs for data parsing and analysis
+    //-
+      li #[b.job Technician] - #[em.org community] #[span.period 2012-2015]
+        ul
+          li troubleshooting and resolving software problems
+          li computer hardware and software servicing
+          li operating system and software support
+
+      //- each history in histories
+      //-   li #[span.job #{history.job}] #[span.org #{history.org}]
+      //-     p #[span.works #{history.desc}]

includes/sections/name.pug

@@ -0,0 +1,14 @@
+audio#pronounce(controls=false preload="auto")
+  source(src="assets/media/spell.mp3" type="audio/mpeg")
+  source(src="assets/media/spell.ogg" type="audio/ogg")
+  source(src="assets/media/spell.wav" type="audio/wav")
+
+script.
+  function pronounce() {
+    var audio = document.getElementById('pronounce')
+    audio.play()
+  }
+
+section.name
+  h1.target#name: a(href="#name") name
+  .desc #[a(href='#' onclick="pronounce()") #{name}] - #{description}

includes/sections/options.pug

@@ -0,0 +1,85 @@
+section.options
+  h1.target#options: a(href="#options") options
+  .desc
+    ul
+
+      li
+        b.target#sysadmin: a(href="#sysadmin") --sys-admin
+        .opt_desc
+          p.
+            I have in-depth experience of #[em linux server] administration, covering
+            installation, configuration, optimization, hardening, and maintenance of
+            various common linux distros such as Ubuntu, CentOS, Oracle, AmazonLinux, ArchLinux etc.
+          p.
+            I have hands-on knowledge of #[em DNS] and #[em Email server] administration too.
+            I can configure and publish secure and performant DNS/Email servers with load balancing.
+            In fact, I manage my own DNS, email, and web hosting service, and more.
+          p.
+            I also have above-average expertise about #[em Windows] systems, with working knowledge of #[em Mac OSX].
+
+      li
+        b.target#devops: a(href="#devops") --dev-ops
+        .opt_desc
+          p.
+            I am involved in both classic and modern DevOps practices. I have current knowledge of
+            container orchestration and management tools such as #[em Docker] and #[em Kubernetes].
+            I have professional experience of managing production k8s clusters on #[em AWS] cloud.
+            I have also worked on converting legacy workloads to #[em serverless] arch and maintaining them.
+          p.
+            I can set up a working DevOps environment from scratch, with a working CI/CD pipeline.
+            I can do this with both modern container-based tools such as #[em k8s], #[em Helm], #[em Argo],
+            #[em Gitlab/Github CI], as well as with legacy tools such as #[em Ansible] and #[em Jenkins].
+          p.
+            I also have experience of maintaining monitoring and alerting stacks comprised of
+            #[em prometheus], #[em Grafana], #[em PagerDuty], #[em ELK], as well as in-depth
+            observability toolkits such as #[em Graylog], #[em NewRelic], #[em DataDog], #[em Splunk] etc.
+
+      li
+        b.target#backend: a(href="#backend") --back-end
+        .opt_desc
+          p.
+            Backend engineering is another point of interest to me. I have created multiple
+            backend services with #[em Flask], catering to various production-grade use cases,
+            as well as #[em api gateways] to establish communication between disparate systems.
+            I mostly work with #[em Python]; I am also learning #[em Golang] as a low-level option.
+
+      li
+        b.target#automation: a(href="#automation") --automation
+        .opt_desc
+          p.
+            I try to find a solution that is both efficient and easy to maintain. Automation is
+            a natual fit in this field. I always look out for any repetitive tasks to convert into
+            a simple script or button press. Some of my shortcut scripts have actually grown into
+            full-fledged programs themselves.
+          p.
+            I have used #[em Python], #[em shell scripts], #[em Lua], and #[em Ansible] for automation,
+            as well as trigger-based workflow tools like #[em n8n], #[em inotify] etc.
+
+      li
+        b.target#contrib: a(href="#contrib") --contrib
+        .opt_desc
+          p.
+            outside of professional life, I am an enthusiastic and active fan of open-source.
+            I have worked on #[em numerous open-source projects] such as a locale keyboard layout,
+            a popular regional keyboard input system, a time tracking tool, a regex tool, as well
+            as plugins for sublime text, vim, and other miscellaneous applications.
+          p.
+            I have also contributed with documentation for #[em freecodecamp], #[em ArchLinux wiki], #[em Wikipedia],
+            and contributed #[em i18n] translations to many open-source projects.
+          p.
+            I helped maintain a local online Linux community to welcome new contributors and freshers
+            into the tech world, and to educate on the values of open-source and digital safety.
+
+      li
+        b.target#misc: a(href="#misc") --misc
+        .opt_desc
+          p.
+            I am a strong proponent of #[em selfhosting] and owning my data. I wrote an Ansible playbook
+            to deploy and manange a self-hosted environment that includes webhosting, email, DNS, VPN, RSS, caldav and more.
+          p.
+            I'm also interested in the #[em decentralized web]. I closely follow the fediverse and indieweb
+            movements.
+          p.
+            I am a #[strike huge] medium nerd, as is obvious from the design of this page.
+            I love to tinker with tools, and I'm always looking for interesting stuff to learn, and for new ways to improve my skills.
+          p #[span.dark I use arch btw.]

includes/sections/recognition.pug

@@ -0,0 +1,35 @@
+include /includes/mixins/ext_a
+
+section.achievements
+  h1.target#achievements: a(href="#achievements") achievements
+  .desc
+    ul
+      li #[b Star Performer 2021], Digital Healthcare Solutions
+      li
+        b: +ext_a("https://coursera.org/share/90a24b5165900b3e22011c322b4013f8", "Google IT Support Professional")
+        |, Google
+      li
+        b: +ext_a("https://coursera.org/share/53e0dc7863382d6253086b8dcac2518d", "AWS DevOps Specialization")
+        |, AWS
+      li
+        b: +ext_a("https://coursera.org/share/5b48cc6ac827b619d69056d0d6705b5b", "Google Cloud Digital Leader")
+        |, Google
+      li
+        b: +ext_a("https://coursera.org/share/47e5a79207cec44a45fcf2cb0ca1f815", "Python IT Automation Certificate")
+        |, Google
+      li
+        b: +ext_a("https://www.credly.com/badges/fc8a7edc-8abb-4068-8a57-3d3c52400c9c/public_url", "Linux & Git Specialization")
+        |, Linux Foundation
+      li
+        b: +ext_a("https://www.hackerrank.com/certificates/162646ca14f7", "Python Skill Certificate")
+        |, HackerRank
+      li
+        b: +ext_a("https://www.freecodecamp.org/certification/smmy/javascript-algorithms-and-data-structures", "JavaScript DSA Certificate")
+        |, HackerRank
+      li
+        b: +ext_a("https://www.hackerrank.com/certificates/76d08910bf9f", "REST API Skil Certificate")
+        |, HackerRank
+      li
+        b: +ext_a("https://www.hackerrank.com/certificates/dcdb6c3c4463", "Problem Solving Skill Certificate")
+        |, HackerRank
+      li #[b Recognized Contributor], Wikipedia

includes/sections/section.pug

@@ -0,0 +1,4 @@
+section.<section-name>
+  a.target#<section_name>(href="#<section_name>"): h1 <section_name>
+  .desc
+    <section-content>

includes/sections/seealso.pug

@@ -0,0 +1,13 @@
+section.seealso
+  h1.target#seealso: a(href="#seealso") see also
+  .desc
+    p
+      a(href="https://bdeshi.space" target="_blank").print: b articles
+      |(7),
+      |
+      a(href="https://github.com/bdeshi" target="_blank" rel="external nofollow noopener noreferrer").print: b github
+      |(1)
+      //-
+        |
+        |
+        a(href="./portfolio.pug") #[b portfolio](7),

includes/sections/synopsis.pug

@@ -0,0 +1,26 @@
+section.synopsis
+  h1.target#synopsis: a(href="#synopsis") synopsis
+  .desc
+    p #[b #{name}]
+      |  --#[a(href="#sysadmin") sys-admin]
+      |
+      span.dimmer [#[em linux], #[em server] ...]
+      |  --#[a(href='#devops') dev-ops]
+      |
+      span.dimmer [#[em cloud], #[em k8s], #[em iac] ...]
+    p #[b #{name}]
+      |  --#[a(href='#backend') back-end] --#[a(href="#automation") automation]
+      |
+      span.dimmer [#[em python], #[em shell] ...]
+    p #[b #{name}]
+      |  --#[a(href='#contrib') contrib]
+      |
+      span.dimmer [#[em opensource], #[em education] ...]
+    p #[b #{name}]
+      |  --#[a(href='#misc') misc]
+      |
+      span.dimmer [#[em selfhoster], #[em nerd] ...]
+    p #[b #{name}]
+      |  --#[a(href='#history') history] --#[a(href='#contact') contact]
+      |
+      span.dimmer [#[em --help]]

index.pug

@@ -1,7 +1,7 @@
-include vars
+include /vars
 doctype html
 head
-  include includes/head
+  include /includes/head
 body
-  include includes/body
+  include /includes/body
-include includes/tail
+include /includes/tail

package.json

@@ -3,8 +3,11 @@
   "version": "0.0.1",
   "license": "CC-BY-4.0",
   "devDependencies": {
+    "@csstools/normalize.css": "^12.0.0",
+    "@parcel/packager-raw-url": "2.5.0",
     "@parcel/transformer-pug": "2.5.0",
     "@parcel/transformer-sass": "2.5.0",
+    "@parcel/transformer-webmanifest": "2.5.0",
     "parcel": "^2.5.0"
   },
   "scripts": {

portfolio.pug

@@ -0,0 +1,37 @@
+include /vars
+doctype html
+head
+  meta(http-equiv="Content-Type" content="text/html;charset=UTF-8")
+  meta(http-equiv="X-UA-Compatible" content="IE=edge")
+  meta(name="viewport" content="width=device-width,initial-scale=1.0")
+  <link rel="apple-touch-icon" sizes="180x180" href="./assets/images/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon-16x16.png">
+  <link rel="manifest" href="./assets/site.webmanifest">
+  link(rel="stylesheet" href="assets/styles/index.sass")
+  title portfolio(7)
+body
+  div.container
+    div.content
+      header.header
+        .left portfolio(7)
+        .center= section_name
+        .right portfolio(7)
+      section.main
+        section#name
+          h1 name
+          .desc portfolio - projects by sammay_sarkar
+        section#description
+          h1 description
+          .desc
+            p This portfolio only lists personal hobby projects.
+            p Installing projects. Please check back later.
+        section#seealso
+          h1 see also
+          .desc
+            p
+              a(href="/") #[b sammay_sarkar](7)
+      footer.footer
+        .left Version #[a(href=source_link) #{version}]
+        .center= date
+        .right portfolio(7)

vars.pug

@@ -1,3 +1,3 @@
 -
   var variable = 'value'
-include vars.local
+include vars.local.pug

yarn.lock

@@ -36,6 +36,11 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
+"@csstools/normalize.css@^12.0.0":
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.0.0.tgz#a9583a75c3f150667771f30b60d9f059473e62c4"
+  integrity sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg==
+
 "@lezer/common@^0.15.0", "@lezer/common@^0.15.7":
   version "0.15.12"
   resolved "https://registry.yarnpkg.com/@lezer/common/-/common-0.15.12.tgz#2f21aec551dd5fd7d24eb069f90f54d5bc6ee5e9"
@@ -428,6 +433,14 @@
     globals "^13.2.0"
     nullthrows "^1.1.1"
 
+"@parcel/packager-raw-url@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/packager-raw-url/-/packager-raw-url-2.5.0.tgz#e95e1a38c3581bf5b5cd57aa6cfc6742ac5cce29"
+  integrity sha512-NIdmuuivotlIFTG8NU6SwR39wkDqzBSnEHjiLopZuj0bRY2PPnEeIHK0aoNayo8UOJOSthflwFKFW4goAb1S/w==
+  dependencies:
+    "@parcel/plugin" "2.5.0"
+    "@parcel/utils" "2.5.0"
+
 "@parcel/packager-raw@2.5.0":
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/@parcel/packager-raw/-/packager-raw-2.5.0.tgz#ce0103c26667c93e5c04eda92691363e93aecb1a"
@@ -670,6 +683,16 @@
     posthtml-render "^3.0.0"
     semver "^5.7.1"
 
+"@parcel/transformer-webmanifest@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-webmanifest/-/transformer-webmanifest-2.5.0.tgz#2892c3103bbee93a07ab5f756acd5a18e84172df"
+  integrity sha512-7RtE4f+QUzQqXHJ9kVL80x0xrOYdI7EDBl0jZbJ3Kiec8hE/aB1I3c2bmjyU44tGnd3z9mLzmRS9IaU/gZvXkw==
+  dependencies:
+    "@mischnic/json-sourcemap" "^0.1.0"
+    "@parcel/diagnostic" "2.5.0"
+    "@parcel/plugin" "2.5.0"
+    "@parcel/utils" "2.5.0"
+
 "@parcel/types@2.5.0":
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/@parcel/types/-/types-2.5.0.tgz#e3818d4358f849ac2593605b98366b8e156ab533"