Merge pull request #43 from biolab/feature/fix-blogs

Feature/fix blogs

pages/widget-catalog/[category]/[widget].tsx

@@ -23,18 +23,6 @@ export interface Widget {
   url: string;
 }
 
-function addRelativePathToImages(
-  content: string,
-  imgRelativePath: string
-): string {
-  if (!imgRelativePath || !content) {
-    return content;
-  }
-
-  // Widgets specific fix
-  return content.replaceAll("../images", imgRelativePath);
-}
-
 export async function getStaticPaths() {
   const paths = widgetCatalog.flatMap(([_, widgets]: any) =>
     widgets
@@ -62,12 +50,7 @@ export async function getStaticProps({ params }: any) {
   const mdFile = path.join(dir, `${params.widget}.md`);
   const fileContents = fs.readFileSync(mdFile, "utf8");
 
-  const { content } = matter(
-    addRelativePathToImages(
-      fileContents,
-      path.join("/widget-catalog", params.category, "images")
-    )
-  );
+  const { content } = matter(fileContents);
 
   const mdxSource = await serialize(content, {
     mdxOptions: {

public/blog/2011-03-our-gsoc-2011-posters/our-gsoc-2011-posters.md

@@ -1,12 +1,12 @@
 ---
 author: "BIOLAB"
-date: '2011-03-29 10:12:00+00:00'
+date: "2011-03-29 10:12:00+00:00"
 draft: false
 title: "Our GSoC 2011 posters"
-blog: ["gsoc" ]
+blog: ["gsoc"]
 oldUrl: "/blog/2011/03/29/our-gsoc-2011-posters/"
 ---
 
 We have made our own recruitment posters for this year's Google Summer of Code inviting students to participate.
 
-![](gsoc-poster-eng_1.png__160x160_q95_crop_subject_location-354%2C500.jpg)
+![](gsoc-poster.jpg)

public/blog/2011-09-3d-visualizations-in-orange/3d-visualizations-in-orange.md

@@ -1,9 +1,9 @@
 ---
 author: "BIOLAB"
-date: '2011-09-07 10:30:00+00:00'
+date: "2011-09-07 10:30:00+00:00"
 draft: false
 title: "3D Visualizations in Orange"
-blog: ["opengl" ,"visualization" ]
+blog: ["opengl", "visualization"]
 oldUrl: "/blog/2011/09/07/3d-visualizations-in-orange/"
 ---
 
@@ -15,19 +15,19 @@ Widgets I worked on and are reasonably usable:
 
 #### ScatterPlot3D
 
-![](scatterplot3d.png__160x160_q95_crop_subject_location-291%2C305.jpg)
+![](scatterplot3d.jpg)
 
 Its GUI has the same options as the ordinary ScatterPlot (2D),with an additional dropdown for the third attribute (Z) and some new checkboxes (e.g. 2D/3D symbols). The data can be easily rotated, translated and scaled.Supports zoom levels and selections as well. VizRank works.Thanks to hardware acceleration, ScatterPlot3D is quite responsive even with largerdatasets (30k examples).
 
 #### LinProj3D
 
-![](linproj3d.png__160x160_q95_crop.jpg)
+![](linproj3d.jpg)
 
 LinProj3D is displayed using dark theme (themes are available in all 3D widgets).
 
 #### Sphereviz3D
 
-![](sphereviz.png__160x160_q95_crop.jpg)
+![](sphereviz.jpg)
 
 Sphereviz3D has 2D symbols option enabled (also available in all 3D widgets). VizRank has been modified to work with three dimensions; PCA and SPCA options under FreeViz return first three most important components when used in these widgets.
 

public/blog/2011-12-earth-multivariate-adaptive-regression-splines/earth-multivariate-adaptive-regression-splines.md

@@ -1,19 +1,16 @@
 ---
 author: "BIOLAB"
-date: '2011-12-20 12:22:00+00:00'
+date: "2011-12-20 12:22:00+00:00"
 draft: false
 title: "Earth - Multivariate adaptive regression splines"
-blog: ["regression" ]
+blog: ["regression"]
 oldUrl: "/blog/2011/12/20/earth-multivariate-adaptive-regression-splines/"
 ---
 
 There have recently been some additions to the lineup of Orange learners. One of these is Orange.regression.earth.EarthLearner. It is an Orange interface to the [Earth](http://www.milbo.users.sonic.net/earth/) library written by Stephen Milborrow implementing [Multivariate adaptive regression splines](http://en.wikipedia.org/wiki/Multivariate_adaptive_regression_splines).
 
 So lets take it out for a spin on a simple toy dataset ([data.tab](http://blog.biolab.si/wp-content/uploads/2011/12/13/data.tab) - created using the Paint Data widget in the Orange Canvas):
 
-
-
-
 ```
     import Orange
     from Orange.regression import earth
@@ -34,13 +31,9 @@ So lets take it out for a spin on a simple toy dataset ([data.tab](http://blog.b
     pl.show()
 ```
 
-
-
-
 which produces the following plot:
 
-![](earth_demo_2.png__600x470_q95_subject_location-407%2C297.png)
-
+![](earth_demo_2.png)
 
 We can also print the model representation using
 

public/blog/2012-04-redesign-of-gui-icons/redesign-of-gui-icons.md

@@ -1,13 +1,12 @@
 ---
 author: "BLAZ"
-date: '2012-04-09 11:25:00+00:00'
+date: "2012-04-09 11:25:00+00:00"
 draft: false
 title: "Redesign of GUI icons"
-blog: ["icons" ]
+blog: ["icons"]
 oldUrl: "/blog/2012/04/09/redesign-of-gui-icons/"
 ---
 
 Orange GUI is being redesigned. Expect a welcome screen with selection of preloaded widget schemes, simpler access to computational components, and integration with intelligent interface (widget suggestions). For the project we have engaged a designer [Peter Čuhalev](http://yukaii.com/). To give you a taste of what is going on, here are some icons for widget sets that are being redesigned. There are in B/W, the color will be decided on and added in later stages. Below are just the icons - widget symbols with no frames. Current frames are rounded squares, while it looks like the widget frames for the new GUI will be circles. New icons are designed in a vector format.
 
-![](orange-icons-new-sets.png__600x800_q95_crop_subject_location-94%2C171_upscale.jpg)
-
+![](orange-icons-new-sets.jpg)

public/docs/1programming.md

@@ -5,4 +5,4 @@ title: "Visual Programming"
 [Getting started](/getting-started)
 [YouTube tutorials](https://www.youtube.com/channel/UClKKWBe2SCAEyv7ZNGhIe4g)
 [Loading your data](https://orange3.readthedocs.io/projects/orange-visual-programming/en/latest/loading-your-data/index.html)
-[Widget catalog](/widget-catalog/)
+[Widget catalog](/widget-catalog)

public/widget-catalog/associate/associationrules.md

@@ -17,7 +17,7 @@ Induction of association rules.
 
 This widget implements FP-growth [frequent pattern mining](https://en.wikipedia.org/wiki/Association_rule_learning) algorithm [1] with bucketing optimization [2] for conditional databases of few items. For inducing classification rules, it generates rules for the entire itemset and skips the rules where the consequent does not match one of the class' values.
 
-![](../images/association-rules-stamped.png)
+![](/widget-catalog/associate/images/association-rules-stamped.png)
 
 1. Information on the data set.
 2. In *Find association rules* you can set criteria for rule induction:
@@ -47,7 +47,7 @@ Example
 
 Association Rules can be used directly with the [File](https://orange3.readthedocs.io/projects/orange-visual-programming/en/latest/widgets/data/file.html) widget.
 
-![](../images/association-rules-example1.png)
+![](/widget-catalog/associate/images/association-rules-example1.png)
 
 References and further reading
 ------------------------------

public/widget-catalog/associate/frequentitemsets.md

@@ -18,7 +18,7 @@ Finds frequent itemsets in the data.
 The widget finds [frequent items](https://en.wikipedia.org/wiki/Association_rule_learning) in a data set based on a measure of
 support for the rule.
 
-![](../images/frequent-itemsets-stamped.png)
+![](/widget-catalog/associate/images/frequent-itemsets-stamped.png)
 
 1. Information on the data set. 'Expand all' expands the frequent itemsets tree, while 'Collapse all' collapses it.
 2. In *Find itemsets by* you can set criteria for itemset search:
@@ -37,6 +37,6 @@ support for the rule.
 Example
 -------
 
-Frequent Itemsets can be used directly with the [File](../../data/file/) widget.
+Frequent Itemsets can be used directly with the [File](/widget-catalog/associate/../data/file) widget.
 
-![](../images/frequent-itemsets-example1.png)
+![](/widget-catalog/associate/images/frequent-itemsets-example1.png)

public/widget-catalog/bioinformatics/annotate_projection.md

@@ -25,7 +25,7 @@ p-value of each cell types for a cell based on the selected statistical
 test. It visualizes groups of cells and for each group, it shows few
 most present cell types.
 
-![](../images/annotate_projection/annotator-stamped.png)
+![](/widget-catalog/bioinformatics/images/annotate_projection/annotator-stamped.png)
 
 1. This box contains settings for attribute selection and annotation:
     - *Axis X* and *Axis Y* let you select attributes you will show in
@@ -85,7 +85,7 @@ The widget shows clustered cells projected to the two-dimensional plane.
 Clusters labels show annotation with the most common label in the
 cluster. This workflow can be accessed [here](https://download.biolab.si/download/files/workflows/orange/bioinformatics_annotator.ows).
 
-![](../images/annotate_projection/annotator-example.png)
+![](/widget-catalog/bioinformatics/images/annotate_projection/annotator-example.png)
 
 The second example shows how to use *Secondary Data* input
 of the widget. We load data with two *Single Cell Datasets* widgets.
@@ -100,4 +100,4 @@ them in the reference space. The Annotator window shows the mapping of
 secondary data (colored points) to clusters generated on the reference
 data.
 
-![](../images/annotate_projection/annotator-example2.png)
+![](/widget-catalog/bioinformatics/images/annotate_projection/annotator-example2.png)

public/widget-catalog/bioinformatics/cluster_analysis.md

@@ -17,7 +17,7 @@ Display differentially expressed genes that characterize the cluster.
 
 **Cluster Analysis** widget displays differentially expressed genes that characterize the cluster, and corresponding gene terms that describe differentially expressed genes.
 
-![](../images/cluster_analysis/Cluster-Analysis-stamped.png)
+![](/widget-catalog/bioinformatics/images/cluster_analysis/Cluster-Analysis-stamped.png)
 
 1. Information on the number of samples, clusters, and unique genes in the input data.
 2. *Cluster Indicator*: From a list of categorical variables from the input data select the one that will be used for clustering.
@@ -36,6 +36,6 @@ Example
 
 From the **GEO Data Sets** widget we select the [GDS360](https://pubmed.ncbi.nlm.nih.gov/15718313/) data set for gene expression in breast cancer core biopsies taken from patients found to be resistant (14 samples) or sensitive (10 samples) to docetaxel treatment. Next we feed the data to the **Cluster Analysis** widget and set our parameters and gene sets to compare. We set the thresholds to filter the results and connect the widget to the **t-SNE** widget to visualize the results and to the **Data Table** widget to inspect the results.
 
-![](../images/cluster_analysis/Cluster-Analysis-Example.png)
+![](/widget-catalog/bioinformatics/images/cluster_analysis/Cluster-Analysis-Example.png)
 
 This workflow can be accessed [here](https://download.biolab.si/download/files/workflows/orange/bioinformatics_cluster_analysis.ows).

public/widget-catalog/bioinformatics/databases_update.md

@@ -17,13 +17,13 @@ annotations, gene names, protein interaction networks, and similar.
 
 With the bioinformatics add-on you can access several databases directly from Orange. The widget can also be used to update and manage locally stored databases. To get a more detailed information on the particular database hover on its name.
 
-![](../images/database_update/Databases-Update-stamped.png)
+![](/widget-catalog/bioinformatics/images/database_update/Databases-Update-stamped.png)
 
 1. Find the desired database.
 2. A list of available databases described with data source, update availability, date of your last update and file size. A large *Update* button will be displayed next to the database that needs to be updated.
 3. *Update All* will update and *Download All* will download all of the available databases from the [serverfiles](https://orange.biolab.si/serverfiles-bio2/). *Cancel* will abort the action.
 4. Add a data set from the local machine.
 
-![](../images/database_update/Add-Dataset.png)
+![](/widget-catalog/bioinformatics/images/database_update/Add-Dataset.png)
 
 To add a new file to the database, select the domain and the organism of the data. Give the data set a name and, optionally, tag it with appropriate tags. Finally, use the *Select File* button to load the local file. Press OK to complete the process. The data will be stored in a cached folder **locally**. To see the full path to the data, hover on the data set name. 

public/widget-catalog/bioinformatics/dicty_express.md

@@ -17,7 +17,7 @@ databases.
 
 **dictyExpress** widget gives a direct access to the [dictyExpress](https://dictyexpress.research.bcm.edu) database. It allows you to download the data from selected experiments in *Dictyostelium* by Baylor College of Medicine. The widget requires internet connection to work.
 
-![](../images/dicty_express/dictyExpress-stamped.png)
+![](/widget-catalog/bioinformatics/images/dicty_express/dictyExpress-stamped.png)
 
 1. Log into the database to access personal files.
 2. Define the output. Genes from experiments can be either in rows or in columns. To clear all locally cached dictyExpress data, press *Clear cache*.
@@ -29,4 +29,4 @@ Example
 
 **dictyExpress** widget can be used to retrieve data from a database, just like **GEO Data Sets** and similar to the **File** widget. We have retrieved the *D. discoideum vs. D. purpureum* data and sent it to the output by pressing *Commit*. We have observed the data in a **Data Table** and in a **Heat Map**, where we used *Merge by k-means* and clustering by rows to find similar genes.
 
-![](../images/dicty_express/dictyExpress-Example.png)
+![](/widget-catalog/bioinformatics/images/dicty_express/dictyExpress-Example.png)

public/widget-catalog/bioinformatics/differential_expression.md

@@ -22,7 +22,7 @@ sample target. It takes gene expression data as an input (from
 **dictyExpress**, **GEO Data Sets**, etc.) and outputs a selected data subset
 (normally the most interesting genes).
 
-![](../images/differential_expression/Differential-Expression-stamped.png)
+![](/widget-catalog/bioinformatics/images/differential_expression/Differential-Expression-stamped.png)
 
 1.  Information of the data input and output. The first line shows the
     number of samples and genes in the data set. The second line
@@ -58,6 +58,6 @@ Example
 
 From the GEO Data Sets widget, we selected *Breast cancer and docetaxel treatment* (GDS360) with 14 treatment resistant and 10 treatment sensitive tumors. Then we used the **Differential Expression** widget to select the most interesting genes. We left the upper and lower threshold at default (1 and -1) and output the data. Then we observed the selected data subset in a **Data Table**. The table shows selected genes with an additional gene score label.
 
-![](../images/differential_expression/Differential-Expression-Example.png)
+![](/widget-catalog/bioinformatics/images/differential_expression/Differential-Expression-Example.png)
 
 A workflow that implements this widget can be accessed [here](https://download.biolab.si/download/files/workflows/orange/bioinformatics_homologs.ows).

public/widget-catalog/bioinformatics/gene_set_enrichment.md

@@ -19,7 +19,7 @@ Enrich gene sets.
 
 [Gene Set Enrichment Analysis](https://en.wikipedia.org/wiki/Gene_set_enrichment_analysis) (GSEA) is a method to find gene sets overrepresented in a large group of genes, possibly associated with different phenotypes. For each gene set in the given set of gene sets, the widget calculates the enrichment using the [hypergeometric test](https://en.wikipedia.org/wiki/Hypergeometric_distribution#Hypergeometric_test) which determines the probability of observing the overlap between the genes in the gene set and the input genes by chance, given the total number of genes in the genome and the number of genes in the gene set.
 
-![](../images/gene_set_enrichment/Gene-Set-Enrichment-stamped.png)
+![](/widget-catalog/bioinformatics/images/gene_set_enrichment/Gene-Set-Enrichment-stamped.png)
 
 1. Select the *Organism*.
 2. *Gene Sets*: A list of available gene sets that can be selected for enrichment analysis. Select multiple gene sets by ticking the checkbox next to the gene set name.
@@ -34,6 +34,6 @@ From **GEO Data Sets** widget we select the [GDS3900](https://pubmed.ncbi.nlm.ni
 
 
 
-![](../images/gene_set_enrichment/Gene-Set-Enrichment-Example.png)
+![](/widget-catalog/bioinformatics/images/gene_set_enrichment/Gene-Set-Enrichment-Example.png)
 
 

public/widget-catalog/bioinformatics/gene_sets.md

@@ -21,7 +21,7 @@ Gene sets are lists of genes associated with a specific biological function. The
 Data is preprocessed in Orange readable format and it is hosted [here.](http://download.biolab.si/datasets/bioinformatics/gene_sets/)
 
 
-![](../images/gene-sets/Gene-Sets-stamped.png)
+![](/widget-catalog/bioinformatics/images/gene-sets/Gene-Sets-stamped.png)
 
 1. Select the *Organism*.
 2. *Gene Sets*: A list of available gene sets. Select multiple gene sets by ticking the checkbox next to the gene set name. If custom gene sets were uploaded, they will appear here.
@@ -33,10 +33,10 @@ Example
 
 To create a custom gene set, we start by importing an Excel table that includes 284 human homologs of DNA "damage-up" proteins (DDPs) identified in *E.coli*. These DDPs are categorized into three gene sets: All DDPs, DDPs with known cancer drivers excluded, and validated DDPs recognized as genuine DNA damage instigators in human cells [(Xia et al.)](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6344048/). We accomplish this by utilizing the **File** widget. Next, we pass this data to the **Genes** widget for gene annotation, and then to the **Gene Sets** widget for custom gene set creation. Within the **Gene Sets** widget, we can select our file from the drop-down menu in the *Custom Gene Sets* section to generate the desired gene set. This workflow can be accessed [here](https://download.biolab.si/download/files/workflows/orange/bioinformatics_gene_sets.ows).
 
-![](../images/gene-sets/Gene-Sets-example.png)
+![](/widget-catalog/bioinformatics/images/gene-sets/Gene-Sets-example.png)
 
 Next, we load the [*GDS3592*](https://pubmed.ncbi.nlm.nih.gov/20040092/) data set from the **GEO Data Sets** widget. This is a comparison of gene expressions in 12 normal ovarian surface epithelia and 12 ovarian cancer epithelial cells. To annotate the genes, we utilize the **Genes** widget. Once the genes are annotated, we connect both the **Genes** and **Gene Sets** (with our custom gene set selected) widgets to the **Single Sample Scoring** widget. Finally, we use **Data Table** widget to observe the enrichment scores associated with the selected gene sets.
 
-![](../images/gene-sets/Gene-Sets-example2.png)
+![](/widget-catalog/bioinformatics/images/gene-sets/Gene-Sets-example2.png)
 
 

public/widget-catalog/bioinformatics/genes.md

@@ -28,14 +28,14 @@ You can also select a subset and feed it  to other widgets.
 By clicking on the gene Entrez ID in the list, you will be taken to the
 NCBI site with the information on the gene.
 
-![](../images/genes/genes-stamped.png)
+![](/widget-catalog/bioinformatics/images/genes/genes-stamped.png)
 
 
 Example
 -------
 
 First we load *brown-selected.tab* (from *Browse documentation data sets*) with the **File** widget and feed our data to the Genes widget. Orange recognized the organism correctly, but we have to tell it where our gene labels are. To do this, we tick off *Stored as feature (column) name* and select *gene* attribute from the list. Then we can observe gene info provided from the NCBI Gene database. In the **Data Table** we can see the Entrez ID column included as a meta attribute. The data is also properly annotated (see *Data Attributes* section in **Data Info** widget).
 
-![](../images/genes/genes-Example.png)
+![](/widget-catalog/bioinformatics/images/genes/genes-Example.png)
 
 A workflow that implements this widget can be accessed [here](https://download.biolab.si/download/files/workflows/orange/bioinformatics_gene_sets.ows).

public/widget-catalog/bioinformatics/geo_data_sets.md

@@ -23,7 +23,7 @@ This Orange widget provides access to all its data sets and outputs a
 data set selected for further processing. For convenience, each
 dowloaded data set is stored locally.
 
-![](../images/geo_data_sets/GEO-Data-Sets-stamped.png)
+![](/widget-catalog/bioinformatics/images/geo_data_sets/GEO-Data-Sets-stamped.png)
 
 1.  Information on the GEO data set collection. Cached data sets are the
     ones currently stored on the computer.
@@ -49,4 +49,4 @@ Example
 
 **GEO Data Sets** is similar to the **File** widget, since it is used to load the data. In the example below we selected *Caffeine effect: time course and dose response* dataset from the GEO data base. Do not forget to press *Commit* to output the data. We can inspect the data in *Data Table*.
 
-![](../images/geo_data_sets/GEO-Data-Sets-Example.png)
+![](/widget-catalog/bioinformatics/images/geo_data_sets/GEO-Data-Sets-Example.png)