Merge pull request #175 from aragon/chore/move-imgs-to-static

chore: refactoring, move images to /static/img folder

.gitignore

@@ -8,6 +8,7 @@
 .docusaurus
 .cache-loader
 **/subgraph/reference-guide
+/static/optimized-svg
 
 # Misc
 .DS_Store

README.md

@@ -1,4 +1,4 @@
-![Aragon](https://res.cloudinary.com/dacofvu8m/image/upload/v1677353961/Aragon%20CodeArena/osx_blue_logo_lqrvkr.png)
+![Aragon](/static/img/osx_blue_logo_lqrvkr.png)
 
 <p align="center">
   <a href="https://aragon.org/">Aragon website</a>
@@ -40,6 +40,8 @@ $ yarn build
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
+Notice: you may need to run `yarn optimize-svg` and `yarn docs:subgraph` before `yarn build` or `yarn start` to correctly build this website.
+
 ### Serve All Optimized Assets
 
 ```bash

docs/osx/01-get-started.mdx

@@ -5,6 +5,6 @@ sidebar_position: 1
 hide_table_of_contents: true
 ---
 
-import GetStarted from '../../src/pages/get-started.tsx';
+import GetStarted from '/src/pages/get-started.tsx';
 
 <GetStarted />

docs/osx/01-how-it-works/01-core/03-plugins/index.md

@@ -39,7 +39,7 @@ A DAO manages plugins and interactions between them. In more detail, its permiss
 
 <div class="center-column">
 
-![Schematic depiction of the interaction between the DAO, the PermissionManager, and a Plugin contract.](../dao-plugin.drawio.svg)
+![Schematic depiction of the interaction between the DAO, the PermissionManager, and a Plugin contract.](/optimized-svg/plugins/dao-plugin.drawio.svg)
 
 <p class="caption">
   An exemplary DAO setup showing interactions between the three core contract pieces triggered by different user groups: The <code>DAO</code> contract in blue containing the <code>PermissionManager</code> in red, respectively, as well as two <code>Plugin</code> contracts in green.

docs/osx/01-how-it-works/01-core/index.md

@@ -29,7 +29,7 @@ The underlying smart contracts constitute **the core contracts** of the Aragon O
 
 <div class="center-column">
 
-![Schematic depiction of the interaction between the DAO, the PermissionManager, and a Plugin contract.](dao-plugin.drawio.svg)
+![Schematic depiction of the interaction between the DAO, the PermissionManager, and a Plugin contract.](/optimized-svg/plugins/dao-plugin.drawio.svg)
 
 <p class="caption">
   An exemplary DAO setup showing interactions between the three core contract pieces triggered by different user groups: The <code>DAO</code> contract in blue containing the <code>PermissionManager</code> in red, respectively, as well as two <code>Plugin</code> contracts in green.

docs/osx/01-how-it-works/02-framework/02-plugin-management/01-plugin-repo/index.md

@@ -16,7 +16,7 @@ Different versions might contain:
 
 <div class="center-column">
 
-![Schematic depiction of the versioning taking place in the PluginRepoRegistry.](./plugin-repo-overview.drawio.svg)
+![Schematic depiction of the versioning taking place in the PluginRepoRegistry.](/optimized-svg/plugins/plugin-repo-overview.drawio.svg)
 
 <p class="caption">
   Overview of the plugin versioning and registry in the Aragon OSx protocol. The `PluginRepoRegistry` contract, which is a curated list of ENS named `PluginRepo` contracts, is shown on the left. Each `PluginRepo` contract maintains a list of versions of the `PluginSetup` contract (internally referencing the `Plugin` implementation contract) and the associated UI building blocks as a URI, exemplarily shown on the right.

docs/osx/01-how-it-works/02-framework/02-plugin-management/02-plugin-setup/index.md

@@ -9,7 +9,7 @@ A DAO can be set up and customized by the **installation, update, and uninstalla
 - **Plugin contract:** contains the plugin's implementation logic; everything needed to extend the functionality for DAOs.
 - **Plugin Setup contract:** contains the instructions needed to install, update, and uninstall the plugin into the DAO. This is done through granting or revoking permissions, enabling plugins to perform actions within the scope of the DAO.
 
-![Aragon OSx Plugins](https://res.cloudinary.com/dacofvu8m/image/upload/v1683225098/Screen_Shot_2023-05-04_at_14.31.25_r0qqut.png)
+![Aragon OSx Plugins](/img/plugins/what_is_a_plugin.png)
 
 How this works:
 
@@ -87,9 +87,9 @@ In the next sections, you will learn about how plugins are curated on Aragon's r
 
 <div class="center-column">
 
-**a.** ![Schematic depiction of the plugin installation process.](plugin-installation.drawio.svg)
-**b.** ![Schematic depiction of the plugin update process.](plugin-update.drawio.svg)
-**c.** ![Schematic depiction of the plugin uninstallation process.](plugin-uninstallation.drawio.svg)
+**a.** ![Schematic depiction of the plugin installation process.](/optimized-svg/plugins/plugin-installation.drawio.svg)
+**b.** ![Schematic depiction of the plugin update process.](/optimized-svg/plugins/plugin-update.drawio.svg)
+**c.** ![Schematic depiction of the plugin uninstallation process.](/optimized-svg/plugins/plugin-uninstallation.drawio.svg)
 
 <p class="caption">
    Simplified overview of the two-transaction plugin <b>a.</b> installation, <b>b.</b> update, and <b>c.</b> uninstallation process with the involved contracts as rounded rectangles, interactions between them as arrows, and relations as dashed lines. The first and second transaction are distinguished by numbering as well as solid and dotted lines, respectively.

docs/osx/01-how-it-works/02-framework/02-plugin-management/index.md

@@ -40,7 +40,7 @@ A detailed explanation of the [build and release versioning](../../../02-how-to-
 
 <div class="center-column">
 
-![](./plugin-version.drawio.svg)
+![](/optimized-svg/plugins/plugin-version.drawio.svg)
 
 <p class="caption">
   A schematic depiction of a plugin bundle consisting of a version tag, the plugin setup contract pointing to the plugin implementation contract, and a metadata URI.

docs/osx/01-how-it-works/02-framework/index.md

@@ -19,7 +19,7 @@ An overview of the involved contracts and their interactions is shown below:
 
 <div class="center-column">
 
-![](aragon-os-infrastructure-core-overview.drawio.svg)
+![](/optimized-svg/framework/aragon-os-infrastructure-core-overview.drawio.svg)
 
 <p class="caption">
   Overview of the framework and core contracts of the Aragon OSx protocol.

docs/osx/01-how-it-works/index.md

@@ -7,7 +7,7 @@ title: How It Works
 The Aragon OSx protocol is a DAO framework structured as follows:
 
 <div class="center-column">
-  <img src="https://res.cloudinary.com/duvrxe0m9/image/upload/v1687512002/aragon-os-framework-overview.drawio_dj7e4p.svg" alt="Aragon architecture diagram" />
+  ![](/optimized-svg/framework/aragon-os-framework-overview.drawio.svg)
   <p class="caption">
     Overview of the Aragon OSx protocol with its structural components and their responsibilities: the governance layer constituted by the framework DAO, the code layer including the framework and core contracts, which depends on external libraries and services
   </p>

docs/osx/02-how-to-guides/01-dao/index.md

@@ -1,5 +1,6 @@
 ---
-title: Operating a DAO
+title: How to Operate a DAO
+sidebar_title: Operating a DAO
 ---
 
 DAOs are decentralized autonomous organizations. They are a group of people managing on-chain assets through a set of smart contracts.

docs/osx/02-how-to-guides/02-plugin-development/03-non-upgradeable-plugin/index.md

@@ -275,7 +275,7 @@ You can publish the plugin into Aragon's protocol through a few different ways:
 
 Go to the [`PluginFactory`](https://goerli.etherscan.io/address/0x301868712b77744A3C0E5511609238399f0A2d4d#writeContract) contract on Etherscan and deploy the first version of your plugin.
 
-![Register your Plugin through Etherscan](https://res.cloudinary.com/dacofvu8m/image/upload/v1682466427/Screen_Shot_2023-04-25_at_19.46.58_nlo9p1.png)
+![Register your Plugin through Etherscan](/img/plugins/create_plugin_etherscan_tx.png)
 
 #### b) Publishing script
 
@@ -306,7 +306,10 @@ const func: DeployFunction = async function (hre: HardhatRuntimeEnvironment) {
 
   const pluginRepoFactoryAddr = '0x301868712b77744A3C0E5511609238399f0A2d4d';
 
-  const pluginRepoFactory = PluginRepoFactory__factory.connect(pluginRepoFactoryAddr, deployer);
+  const pluginRepoFactory = PluginRepoFactory__factory.connect(
+    pluginRepoFactoryAddr,
+    deployer,
+  );
 
   const pluginName = 'greeter-plugin';
   const pluginSetupContractName = 'GreeterPluginSetup';
@@ -318,11 +321,11 @@ const func: DeployFunction = async function (hre: HardhatRuntimeEnvironment) {
     pluginSetupContract.address,
     deployer.address,
     '0x00', // releaseMetadata: the hex representation of the CID containing your plugin's metadata - so the description, name, author, any UI, etc
-    '0x00' // buildMetadata: same as above but for each build, rather than release
+    '0x00', // buildMetadata: same as above but for each build, rather than release
   );
 
   console.log(
-    `You can find the transaction address which published the ${pluginName} Plugin here: ${tx}`
+    `You can find the transaction address which published the ${pluginName} Plugin here: ${tx}`,
   );
 };
 

docs/osx/02-how-to-guides/02-plugin-development/index.md

@@ -1,5 +1,6 @@
 ---
-title: Developing a Plugin
+title: How to build a DAO Plugin
+sidebar_title: Developing a Plugin
 ---
 
 ## Plugin Development Quickstart Guide
@@ -185,7 +186,7 @@ Lastly, we can call the [`createPluginRepoWithFirstVersion` function from Aragon
 
 We can do this directly by calling the function on Etherscan ([make sure to get the right scan and contract address based on your network](https://github.com/aragon/osx-commons/tree/develop/configs/src/deployments/json)) or through locally calling on the method from your project using Ethers.
 
-![Etherscan](https://res.cloudinary.com/dacofvu8m/image/upload/v1682466427/Screen_Shot_2023-04-25_at_19.46.58_nlo9p1.png)
+![Etherscan](/img/plugins/create_plugin_etherscan_tx.png)
 
 If you want to review how to publish your plugin in more depth, review our [How to Publish a Plugin in Aragon OSx guide here](./07-publication//index.md)
 

docs/osx/02-how-to-guides/index.md

@@ -1,5 +1,6 @@
 ---
 title: Tutorials
+sidebar_label: Tutorials
 ---
 
 ## Welcome to our How To Guides on Using the Aragon OSx Protocol!
@@ -30,14 +31,14 @@ Technically speaking, Aragon DAOs are:
 
 All other functionality is enabled through plugins. This allows DAOs to be extremely flexible and modular as they mature, through installing and uninstalling these plugins as needs arise.
 
-![Aragon DAO](https://res.cloudinary.com/dacofvu8m/image/upload/v1683224604/Screen_Shot_2023-05-04_at_14.21.52_uuogzr.png)
+![Aragon DAO](/img/dao/Aragon_DAO_Diagram.png)
 
 On the technical level, plugins are composed of two key contracts:
 
 - ⚡️ The Plugin implementation contract: containing all of the logic and functionality for your DAO, and
 - 👩🏻‍🏫 The Plugin Setup contract: containing the installation, uninstallation and upgrade instructions for your plugin.
 
-![Aragon OSx Plugins](https://res.cloudinary.com/dacofvu8m/image/upload/v1683225098/Screen_Shot_2023-05-04_at_14.31.25_r0qqut.png)
+![Aragon OSx Plugins](/img/plugins/what_is_a_plugin.png)
 
 Through plugins, we provide a secure, flexible way for on-chain organizations to iterate as they grow.
 

package.json

@@ -14,7 +14,7 @@
     "serve:all-optimized": "yarn && yarn docs:subgraph && yarn optimize-svg && yarn build && yarn serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "optimize-svg": "svgo -rf .",
+    "optimize-svg": "svgo -rf ./static/img -o ./static/optimized-svg",
     "typecheck": "tsc",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
   },

src/pages/get-started.tsx

@@ -11,7 +11,7 @@ const GetStarted = () => {
         title="Tools to get you building quick"
         subtitle="Here you'll find tooling, boilerplates, and tutorials to get started building with Aragon OSx quick."
         // eslint-disable-next-line @typescript-eslint/no-var-requires
-        img="https://res.cloudinary.com/duvrxe0m9/image/upload/v1688153627/dev-portal-huuman_ziy7xv.png"
+        img="/img/dev-portal-huuman_ziy7xv.png"
         imgAlt="Developer"
         imgStyle={styles.heroHeader}
         titleStyle={styles.title}