Merge branch 'Graph-and-Geometric-Learning:master' into master

Author: Cather-Chen

README.md

@@ -1,3 +1,14 @@
+# Build and Preview
+First, make sure you have [Node.js](https://nodejs.org/en/download/package-manager) installed on your computer. Enter the root directory of this repository,
+```
+npm install
+```
+to install the dependencies.
+```
+npm run dev
+```
+Look at the message in your console, find out the url and open it in your browser (it might be `localhost:3000`).
+
 # Update Guide
 
 Lab members can update their bios, publications, and news on the website. The update is made through a pull request submitted by the member and approved by the website admin. Make sure your updates are accurate and properly formatted.
@@ -35,7 +46,16 @@ To set up a project page, we support [MDX](https://mdxjs.com/), which is a super
 **Step**
 1. Create a folder of your project under `app/projects`.
 2. Create a `page.mdx` file under the created folder. This is the main file that contains your page content. Assets (e.g. images) should be uploaded to your project folder as well.
-3. Update the `page`key of your publication in `config/publications.ts` with the name of your folder.
+3. Update the `page` key of your publication in `config/publications.ts` with the name of your folder.
 
 
-Find an example in `app/projects/mage`.
+Find an example in `app/projects/hybrid`.
+
+### GGLab-flavored Markdown
+We extend the markdown syntax to better styling our website. Here are some special usages,
+#### Scaling images
+Add the `scale=x` option after your title, separated by `|`.
+```
+![title|scale=0.5](./path/to/your/image)
+```
+

app/layout.tsx

@@ -27,6 +27,21 @@ export const viewport: Viewport = {
   ],
 };
 
+
+function Sponsor({ src, title }: { src: string; title: string }) {
+  return (
+    <div>
+      <Image
+        alt={title}
+        height={60}
+        src={src}
+        width={60}
+      />
+      <span className="block mx-auto">{title}</span>
+    </div>
+    )
+}
+
 export default function RootLayout({
   children,
 }: {
@@ -52,33 +67,9 @@ export default function RootLayout({
                 <p className="text-gray-600">Sponsored by</p>
               </div>
               <div className="flex items-end gap-6">
-                <div>
-                  <Image
-                    alt="nsf"
-                    height={60}
-                    src="/sponsors/nsf.png"
-                    width={60}
-                  />
-                  NSF
-                </div>
-                <div>
-                  <Image
-                    alt="snap"
-                    height={60}
-                    src="/sponsors/snap.png"
-                    width={60}
-                  />
-                  Snap Inc
-                </div>
-                <div>
-                  <Image
-                    alt="aws"
-                    height={60}
-                    src="/sponsors/aws.png"
-                    width={60}
-                  />
-                  AWS
-                </div>
+                <Sponsor src="/sponsors/nsf.png" title="NSF" />
+                <Sponsor src="/sponsors/snap.png" title="Snap Inc" />
+                <Sponsor src="/sponsors/aws.png" title="AWS" />
               </div>
             </footer>
           </div>

app/page.tsx

@@ -126,7 +126,7 @@ export default function Home() {
       <div className="grid grid-cols-4 gap-4 p-8">
         <ResearchDirection
           image="/graph_learning.webp"
-          title="Graph Representation Learning"
+          title="Geometric and Graph Learning"
         />
         <ResearchDirection
           image="/multimodal.webp"

app/projects/dtgb/assets/datasets_statistics.png

@@ -0,0 +1 @@
+