Merge pull request #24 from burnpiro/post/diffusion-models

Post/diffusion models

README.md

@@ -1,5 +1,5 @@
 # erdem.pl blog
 
-[![CircleCI](https://circleci.com/gh/burnpiro/erdem.pl.svg?style=svg)](https://circleci.com/gh/burnpiro/erdem.pl)
+[![GHPages](https://github.com/burnpiro/erdem.pl/actions/workflows/main.yaml/badge.svg)](https://github.com/burnpiro/erdem.pl/actions)
 
 My personal blog. Built with [Gatsby](https://www.gatsbyjs.org) and [Lumen](https://github.com/alxshelepenok/gatsby-starter-lumen) to help with templating.

config.js

@@ -25,7 +25,7 @@ module.exports = {
     name: 'Kemal Erdem',
     photo: '/main.jpg',
     bio:
-      'ML Developer, Software Architect, Freelance Consultant, JS Engineer, MTB lover',
+      'ML Developer, Software Architect, JS Engineer, Ultra-distance cyclist',
     contacts: {
       email: '[email protected]',
       twitter: 'burnpiro',

content/pages/about.md

@@ -18,4 +18,4 @@ But, what do I do exactly? Mostly everything related with Machine Learning and J
 - Testing (Jest, Jasmine, Puppeteer, Cypress and many more)
 - DevOps (build systems with Webpack/Rollup, process management and load balancing with PM2 or Cluster, CI/CD)
 
-That's really long list, I'm surprised you're read it all. If you want to grab a coffee I'm currently stationed in Wroclaw (Poland). To contact me please go to [Contact](/contact)
+That's really long list, I'm surprised you're read it all. If you want to grab a coffee I'm currently stationed in Wroclaw (Poland).

content/posts/2019/2019-08-06-v8-function-optimization/V8-function-optimization.md

@@ -3,6 +3,7 @@ title: V8 function optimization
 date: '2019-08-06'
 template: 'post'
 draft: false
+popular: 5
 tags:
   - 'Engines'
   - 'Javascript'

content/posts/2019/2019-08-19-DOM-Events/DOM-Events.md

@@ -3,6 +3,7 @@ title: A modern guide to Events in JavaScript
 date: '2019-08-19'
 template: 'post'
 draft: false
+popular: 3
 tags:
   - 'DOM'
   - 'Javascript'

content/posts/2020/2020-02-05-Understanding-ROI-Pooling/Understanding-ROI-Pooling.md

@@ -3,6 +3,7 @@ title: Understanding Region of Interest (RoI Pooling)
 date: '2020-02-06'
 template: 'post'
 draft: false
+popular: 7
 tags:
   - 'RCNN'
   - 'Machine Learning'

content/posts/2020/2020-02-06-Understanding-ROI-Part2/understanding-roi-part-two.md

@@ -3,6 +3,7 @@ title: Understanding Region of Interest - Part 2 (RoI Align)
 date: '2020-02-09'
 template: 'post'
 draft: false
+popular: 4
 tags:
   - 'RCNN'
   - 'Machine Learning'

content/posts/2020/2020-04-T-SNE/t-sne.md

@@ -3,6 +3,7 @@ title: t-SNE clearly explained
 date: '2020-04-13'
 template: 'post'
 draft: false
+popular: 3
 tags:
   - 'Dimensionality Reduction'
   - 'Machine Learning'

content/posts/2020/2020-06-time-series-correlations/time-series-correlations.md

@@ -3,6 +3,7 @@ title: Finding correlations in time series data
 date: '2020-06-28'
 template: 'post'
 draft: false
+popular: 1
 tags:
   - 'Data Science'
   - 'MachineLearning'

content/posts/2021/2021-02-24-Animal-recognition-with-siamese-networks/animal-recognition-siamese.md

@@ -3,6 +3,7 @@ title: Animal recognition with Siamese Networks and Mean Embeddings
 date: '2021-02-25'
 template: 'post'
 draft: false
+popular: 1
 tags:
   - 'Machine Learning'
   - 'Siamese Networks'

content/posts/2021/2021-03-Infidelity-and-Sensitivity/infidelity-and-sensitivity.md

@@ -3,6 +3,7 @@ title: Measuring XAI methods with Infidelity and Sensitivity
 date: '2021-03-16'
 template: 'post'
 draft: false
+popular: 4
 tags:
 - 'Machine Learning'
 - 'XAI'

content/posts/2021/2021-05-Attention-mechanism/attention-mechanism.md

@@ -3,6 +3,7 @@ title: Introduction to Attention Mechanism
 date: '2021-05-12'
 template: 'post'
 draft: false
+popular: 4
 tags:
   - 'Machine Learning'
   - 'Transformers'

content/posts/2021/2021-05-positional-encoding/positional-encoding.md

@@ -3,6 +3,7 @@ title: Understanding Positional Encoding in Transformers
 date: '2021-05-10'
 template: 'post'
 draft: false
+popular: 1
 tags:
 - 'Machine Learning'
 - 'Transformers'

gatsby/create-pages.js

@@ -2,6 +2,7 @@ const path = require('path');
 const _ = require('lodash');
 const createTagsPages = require('./pagination/create-tags-pages.js');
 const createPostsPages = require('./pagination/create-posts-pages.js');
+const createPopularPostsPages = require('./pagination/create-popular-posts-page');
 
 const createPages = async ({ graphql, actions }) => {
   const { createPage } = actions;
@@ -58,6 +59,7 @@ const createPages = async ({ graphql, actions }) => {
   // Feeds
   await createTagsPages(graphql, actions);
   await createPostsPages(graphql, actions);
+  await createPopularPostsPages(graphql, actions);
 };
 
 module.exports = createPages;

gatsby/pagination/create-popular-posts-page.js

@@ -0,0 +1,39 @@
+const path = require('path');
+const siteConfig = require('../../config.js');
+
+module.exports = async (graphql, actions) => {
+    const { createPage } = actions;
+
+    const result = await graphql(`
+    {
+      allMarkdownRemark(
+        filter: {
+            frontmatter: { draft: { eq: false }, popular: { ne: null }, template: { eq: "post" } }
+        }
+      ) {
+        totalCount
+      }
+    }
+  `);
+
+    const { postsPerPage } = siteConfig;
+    const numPages = Math.ceil(
+        result.data.allMarkdownRemark.totalCount / postsPerPage
+    );
+
+    for (let i = 0; i < numPages; i += 1) {
+        createPage({
+            path: i === 0 ? '/popular' : `/popular/page/${i}`,
+            component: path.resolve('./src/templates/popular-template.js'),
+            context: {
+                currentPage: i,
+                postsLimit: postsPerPage,
+                postsOffset: i * postsPerPage,
+                prevPagePath: i <= 1 ? '/popular' : `/popular/page/${i - 1}`,
+                nextPagePath: `/popular/page/${i + 1}`,
+                hasPrevPage: i !== 0,
+                hasNextPage: i !== numPages - 1,
+            },
+        });
+    }
+};

src/assets/scss/mixins/_padding.scss

@@ -2,6 +2,10 @@
  * Padding
  */
 
+@mixin padding-top($number) {
+  padding-top: #{$number * $typographic-leading + 'px'};
+}
+
 @mixin padding($top, $right, $bottom: null, $left: null) {
   @if $left==null and $bottom==null {
     padding: #{$top *

src/components/Feed/Feed.module.scss

@@ -2,6 +2,9 @@
 @import '../../assets/scss/mixins';
 
 .feed {
+  border-top: 1px solid #ccc;
+  @include padding-top(0.5);
+
   &__item {
     @include margin-bottom(1.25);
 

src/components/Tabs/Tabs.js

@@ -0,0 +1,48 @@
+// @flow
+import React, { useState } from 'react';
+import styles from './Tabs.module.scss';
+import { types } from '@babel/core';
+
+export const selectedTabType = {
+  POPULAR: 'popular',
+  MAIN: '',
+};
+
+type Props = {
+  selectedTab: typeof selectedTabType,
+};
+
+const Tabs = ({ selectedTab: defaultSelectedTab }: Props) => {
+  const handleItemClick = newSelectedTab => {
+    if (newSelectedTab !== defaultSelectedTab) {
+      window.location.href = `/${newSelectedTab}`;
+    }
+  };
+
+  return (
+    <div className={styles['tabset']}>
+      <div
+        onClick={() => handleItemClick(selectedTabType.POPULAR)}
+        className={
+          defaultSelectedTab === selectedTabType.POPULAR
+            ? styles['tabset__tab'] + ' ' + styles['tabset__tab-checked']
+            : styles['tabset__tab']
+        }
+      >
+        Popular
+      </div>
+      <div
+        onClick={() => handleItemClick(selectedTabType.MAIN)}
+        className={
+          defaultSelectedTab === selectedTabType.MAIN
+            ? styles['tabset__tab'] + ' ' + styles['tabset__tab-checked']
+            : styles['tabset__tab']
+        }
+      >
+        Recent
+      </div>
+    </div>
+  );
+};
+
+export default Tabs;

src/components/Tabs/Tabs.module.scss

@@ -0,0 +1,55 @@
+@import '../../assets/scss/variables';
+@import '../../assets/scss/mixins';
+
+.tabset {
+  display: flex;
+  flex-direction: row;
+
+  &__tab {
+    flex: 1;
+    position: relative;
+    display: inline-block;
+    padding: 15px 15px 25px;
+    border: 1px solid transparent;
+    border-bottom: 0;
+    cursor: pointer;
+    font-weight: 600;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 15px;
+      bottom: 10px;
+      width: 22px;
+      height: 4px;
+      background: #8d8d8d;
+    }
+
+    &:hover {
+      color: $typographic-link-s-font-color;
+
+      &::after {
+        background: $typographic-link-s-font-color;
+      }
+    }
+
+    &-checked {
+      color: $typographic-link-s-font-color;
+      border-color: #ccc;
+      border-bottom: 1px solid #fff;
+      margin-bottom: -1px;
+
+      &::after {
+        background: $typographic-link-s-font-color;
+      }
+    }
+  }
+}
+
+@include breakpoint-md {
+  .tabset {
+    &__tab {
+      flex: inherit;
+    }
+  }
+}

src/components/Tabs/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './Tabs';

src/templates/index-template.js

@@ -9,6 +9,8 @@ import Pagination from '../components/Pagination';
 import { useSiteMetadata } from '../hooks';
 import type { PageContext, AllMarkdownRemark } from '../types';
 import Search from '../components/Search';
+import Tabs from "../components/Tabs";
+import {selectedTabType} from "../components/Tabs/Tabs";
 
 type Props = {
   data: AllMarkdownRemark,
@@ -35,6 +37,7 @@ const IndexTemplate = ({ data, pageContext }: Props) => {
       <Sidebar isIndex />
       <Page>
         <Search />
+        <Tabs selectedTab={selectedTabType.MAIN} />
         <Feed edges={edges} />
         <Pagination
           prevPagePath={prevPagePath}

src/templates/popular-template.js

@@ -0,0 +1,83 @@
+// @flow
+import React from 'react';
+import { graphql } from 'gatsby';
+import Layout from '../components/Layout';
+import Sidebar from '../components/Sidebar';
+import Feed from '../components/Feed';
+import Page from '../components/Page';
+import Tabs from '../components/Tabs';
+import Pagination from '../components/Pagination';
+import { useSiteMetadata } from '../hooks';
+import type { PageContext, AllMarkdownRemark } from '../types';
+import Search from '../components/Search';
+import {selectedTabType} from "../components/Tabs/Tabs";
+
+type Props = {
+    data: AllMarkdownRemark,
+    pageContext: PageContext,
+};
+
+const PopularTemplate = ({ data, pageContext }: Props) => {
+    const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
+
+    const {
+        currentPage,
+        hasNextPage,
+        hasPrevPage,
+        prevPagePath,
+        nextPagePath,
+    } = pageContext;
+
+    const { edges } = data.allMarkdownRemark;
+    const pageTitle =
+        currentPage > 0 ? `Posts - Page ${currentPage} - ${siteTitle}` : siteTitle;
+
+    return (
+        <Layout title={pageTitle} description={siteSubtitle}>
+            <Sidebar isIndex />
+            <Page>
+                <Search />
+                <Tabs selectedTab={selectedTabType.POPULAR} />
+                <Feed edges={edges} />
+                <Pagination
+                    prevPagePath={prevPagePath}
+                    nextPagePath={nextPagePath}
+                    hasPrevPage={hasPrevPage}
+                    hasNextPage={hasNextPage}
+                />
+            </Page>
+        </Layout>
+    );
+};
+
+export const query = graphql`
+  query PopularTemplate($postsLimit: Int!, $postsOffset: Int!) {
+    allMarkdownRemark(
+      limit: $postsLimit
+      skip: $postsOffset
+      filter: {
+        frontmatter: { draft: { eq: false }, popular: { ne: null }, template: { eq: "post" } }
+      }
+      sort: { fields: [frontmatter___popular, frontmatter___date], order: [DESC, DESC] }
+    ) {
+      edges {
+        node {
+          fields {
+            readTime {
+              text
+              minutes
+            }
+            slug
+          }
+          frontmatter {
+            date
+            title
+            description
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default PopularTemplate;