Add support for new static path prefixes in front.

Basically we renamed ASSETS_URL into IMAGE_ASSETS_URL.

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+deploy-server/node_modules

.gitignore

@@ -4,6 +4,7 @@ out
 
 # dependencies
 node_modules
+deploy-server/node_modules
 
 # logs
 npm-debug.log

env-config.js

@@ -6,5 +6,7 @@ const { NODE_ENV } = process.env
 module.exports = {
   VERSION: require('./package').version,
   'process.env.NODE_ENV': NODE_ENV,
-  ASSETS_URL: '/static'
+  IMAGE_ASSETS_URL: '/static',
+  VIDEO_ASSETS_URL: '/static',
+  RAW_ASSETS_URL: '/static'
 }

package.json

@@ -87,7 +87,9 @@
     ],
     "globals": {
       "VERSION": true,
-      "ASSETS_URL": true
+      "IMAGE_ASSETS_URL": true,
+      "VIDEO_ASSETS_URL": true,
+      "RAW_ASSETS_URL": true
     },
     "env": {
       "es6": true,

pages/docs/deployment-types/lifecycle.js

@@ -19,7 +19,7 @@ In this guide, we are going to have a look at how ${<Now color="#000"/>} deploy
 
 ${
   <Image
-    src={`${ASSETS_URL}/api/deployment-state.png`}
+    src={`${IMAGE_ASSETS_URL}/api/deployment-state.png`}
     width={600}
     height={267}
   />

pages/docs/examples/chat.js

@@ -79,7 +79,7 @@ Now, when running \`node index\` inside your terminal, you should see the follow
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/realtime-chat/server.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/realtime-chat/server.png`}
     width={550}
     height={345}
   />
@@ -89,7 +89,7 @@ And when pointing your browser to the address shown (\`http://localhost:4000\`):
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/realtime-chat/hello-world.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/realtime-chat/hello-world.png`}
     width={550}
     height={307}
   />
@@ -136,7 +136,7 @@ If you restart the process (by hitting \`control + C\` and running \`node index\
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/realtime-chat/form.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/realtime-chat/form.png`}
     width={550}
     height={307}
   />
@@ -197,7 +197,7 @@ Try opening several tabs, and you’ll see several messages:
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/realtime-chat/connected.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/realtime-chat/connected.png`}
     width={550}
     height={345}
   />
@@ -221,7 +221,7 @@ Then if you refresh a tab several times you can see it in action:
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/realtime-chat/disconnected.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/realtime-chat/disconnected.png`}
     width={550}
     height={345}
   />
@@ -330,7 +330,7 @@ And that completes our chat application, in about **20 lines of code**! You can
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/realtime-chat/result.gif`}
+    src={`${IMAGE_ASSETS_URL}/docs/realtime-chat/result.gif`}
     width={600}
     height={572}
   />

pages/docs/examples/graphql.js

@@ -119,7 +119,7 @@ Now you should be able to run \`npm start\` inside the directory containing the
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/graphql/api.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/graphql/api.png`}
     width="550"
     height="307"
   />
@@ -258,7 +258,7 @@ In the browser, the client should look like this:
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/graphql/client.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/graphql/client.png`}
     width="550"
     height="307"
   />

pages/docs/examples/json-api.js

@@ -87,7 +87,7 @@ Go to the URL returned (\`http://0.0.0.0:3000\`) and you should see something li
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/json-api/date.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/json-api/date.png`}
     width="550"
     height="279"
   />
@@ -141,7 +141,7 @@ Assuming that you've followed this post to this point, you should now see able t
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/json-api/members.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/json-api/members.png`}
     width="600"
     height="373"
   />

pages/docs/examples/next.js

@@ -102,7 +102,7 @@ This is how it should look:
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/next/running.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/next/running.png`}
     width="550"
     height="309"
   />
@@ -112,7 +112,7 @@ You can now go to <http://localhost:3000> in your browser and see the rendered m
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/next/output.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/next/output.png`}
     width="550"
     height="307"
   />

pages/docs/examples/slack-slash.js

@@ -112,7 +112,7 @@ Telling Slack about the command is pretty easy. As the first step, you need to s
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/slack-slash/add-configuration.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/slack-slash/add-configuration.png`}
     width="500"
     height="321"
   />
@@ -126,7 +126,7 @@ Optionally, you can also make the command show up in the autocomplete help in th
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/slack-slash/auto-complete.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/slack-slash/auto-complete.png`}
     width="600"
     height="214"
   />

pages/docs/examples/static.js

@@ -57,7 +57,7 @@ This is how it will look in the browser when opening the file:
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/static/browser.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/static/browser.png`}
     width="550"
     height="319"
   />

pages/docs/features/aliases.js

@@ -62,7 +62,7 @@ For example, let's say I want \`https://get-started-basic-etjnigdrkz.now.sh\` 
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/aliases/alias-source.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/aliases/alias-source.png`}
     width="682"
     height="467"
   />
@@ -101,7 +101,7 @@ After this successful message, my deployment is instantly available via its orig
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/aliases/alias-dest.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/aliases/alias-dest.png`}
     width="682"
     height="468"
     caption={
@@ -211,7 +211,7 @@ In this case, my domain is registered with Google Domains, so I edit the nameser
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/aliases/nameservers-edit.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/aliases/nameservers-edit.png`}
     width="569"
     height="274"
     caption={
@@ -276,7 +276,7 @@ First, I head to the DNS settings and add a \`CNAME\` record for the \`hello\` s
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/aliases/cname-add.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/aliases/cname-add.png`}
     width="561"
     height="69"
     caption={
@@ -317,7 +317,7 @@ As you can see, as a security measure we require that you validate that you own
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/aliases/txt-add.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/aliases/txt-add.png`}
     width="561"
     height="63"
     caption={

pages/docs/features/dns.js

@@ -69,7 +69,7 @@ ${
 
 ${
   <Image
-    src={`${ASSETS_URL}/blog/domain-verification/cloudflare.png`}
+    src={`${IMAGE_ASSETS_URL}/blog/domain-verification/cloudflare.png`}
     width="700"
     height="190"
   />
@@ -79,7 +79,7 @@ ${
 
 ${
   <Image
-    src={`${ASSETS_URL}/blog/domain-verification/ssl.png`}
+    src={`${IMAGE_ASSETS_URL}/blog/domain-verification/ssl.png`}
     width="700"
     height="314"
   />
@@ -92,7 +92,7 @@ In the following screenshot we have a page rule that turns off encryption when a
 
 ${
   <Image
-    src={`${ASSETS_URL}/blog/domain-verification/rules.png`}
+    src={`${IMAGE_ASSETS_URL}/blog/domain-verification/rules.png`}
     width="700"
     height="386"
   />

pages/docs/features/path-aliases.js

@@ -36,7 +36,7 @@ For example, if you deploy our [Node.js microservice](https://github.com/now-exa
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/path-aliases/deployment.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/path-aliases/deployment.png`}
     width={533}
     height={380}
     caption="An example of a simple Node.js deployment, live at api-auth-ybqnmnovxg.now.sh."

pages/docs/features/private-npm.js

@@ -23,7 +23,7 @@ This command will forward your npm credentials during the build process to fetch
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/private-npm/example.gif`}
+    src={`${IMAGE_ASSETS_URL}/docs/private-npm/example.gif`}
     width="658"
     height="483"
   />

pages/docs/features/repositories.js

@@ -51,7 +51,7 @@ Once ${<Now color="#000" />} fetches the repository, you'll see just what you're
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/git-repositories/slackin.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/git-repositories/slackin.png`}
     width="550"
     height="420"
   />

pages/docs/getting-started/assign-a-domain-name.js

@@ -25,7 +25,7 @@ Hence, you need a fixed domain name.
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/assign-a-domain-name/custom-domain.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/assign-a-domain-name/custom-domain.png`}
     width={600}
     height={325}
     caption="Our sample static app with a fixed domain name."
@@ -69,7 +69,7 @@ After the confirmation, ${<Now color="#000"/>} will handle all the technical det
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/assign-a-domain-name/buy-domain.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/assign-a-domain-name/buy-domain.png`}
     width={650}
     height={412}
     caption="Confirmation you'll get after assigning a custom domain."
@@ -120,7 +120,7 @@ You will then have an error like this:
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/assign-a-domain-name/alias-error.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/assign-a-domain-name/alias-error.png`}
     width={650}
     height={412}
     caption="Error message you'll get when trying to alias a domain for the first time."

pages/docs/getting-started/deployment.js

@@ -35,7 +35,7 @@ If that directory contains an \`index.html\` file, that file will be served. Oth
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/deployment/static-dir-listing.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/deployment/static-dir-listing.png`}
     width={600}
     height={325}
     caption="Directory listing of a static deployment"

pages/docs/getting-started/five-minute-guide-to-now.js

@@ -55,7 +55,7 @@ ${<TerminalInput>now</TerminalInput>}
 ${<Now color="#000"/>} will deploy the app and give you a URL as shown below.
 
 ${<Image
-  src={`${ASSETS_URL}/docs/five-minute-guide-to-now/deploy.png`}
+  src={`${IMAGE_ASSETS_URL}/docs/five-minute-guide-to-now/deploy.png`}
   width={650}
   height={255}
   caption="Getting a unique URL after the deployment."
@@ -89,7 +89,7 @@ Once you've done that, you'll be able to access your app using <https://my-web-a
 It is automatically configured with a [Let's Encrypt](https://letsencrypt.org/) SSL certificate and served with HTTPS.
 
 ${<Image
-  src={`${ASSETS_URL}/docs/five-minute-guide-to-now/domain-setup.png`}
+  src={`${IMAGE_ASSETS_URL}/docs/five-minute-guide-to-now/domain-setup.png`}
   width={650}
   height={412}
   caption="After mapping a domain name to a deployment."

pages/docs/getting-started/installation.js

@@ -19,7 +19,7 @@ In order to deploy to ${<Now color="#000"/>}, you need to install a small utilit
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/installation/now-desktop.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/installation/now-desktop.png`}
     width={550}
     height={380}
     caption="Now Desktop on Mac OS"

pages/docs/getting-started/logs.js

@@ -33,7 +33,7 @@ ${<TerminalInput>now logs --help</TerminalInput>}
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/logs/help.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/logs/help.png`}
     width={650}
     height={470}
     caption="Help of 'now logs'"
@@ -46,7 +46,7 @@ ${<TerminalInput>now logs -a -q "GET" -n 10 my-web-app.com</TerminalInput>}
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/logs/last-10-get-requests.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/logs/last-10-get-requests.png`}
     width={650}
     height={470}
     caption="Last 10 HTTP GET requests."
@@ -62,7 +62,7 @@ Click any of your deployment URLs inside the dashboard and start searching logs.
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/logs/now-dashboard-logs.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/logs/now-dashboard-logs.png`}
     width={650}
     height={445}
     caption="Searching logs inside the web dashboard."

pages/docs/getting-started/scaling.js

@@ -53,7 +53,7 @@ In this case, ${<Now color="#000"/>} will set the \`min\` and \`max\` instance s
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/scaling/fixed-scaling.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/scaling/fixed-scaling.png`}
     width={650}
     height={467}
     caption="The deployment is scaled to 3 instances and you can see the URLs for each of those instances."
@@ -74,7 +74,7 @@ If you run \`now alias\` again, it'll scale the new deployment accordingly and s
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/scaling/now-alias.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/scaling/now-alias.png`}
     width={650}
     height={467}
     caption="Aliasing “hello-node-zhlrfgchkd.now.sh” to “hnode” changes it's scaling settings and “hnode”'s previous deployment."
@@ -97,7 +97,7 @@ ${<Now color="#000"/>} will automatically start and kill instances based on the
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/scaling/auto-scaling.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/scaling/auto-scaling.png`}
     width={650}
     height={335}
     caption="Auto scaling in action."

pages/docs/getting-started/secrets.js

@@ -59,7 +59,7 @@ ${<TerminalInput>{`now secrets --help`}</TerminalInput>}
 
 ${
   <Image
-    src={`${ASSETS_URL}/docs/now-secrets/help.png`}
+    src={`${IMAGE_ASSETS_URL}/docs/now-secrets/help.png`}
     width={650}
     height={509}
     caption="Help output of `now secrets`"