hashtags

Author: computing-den

src/lib/lib.ts

@@ -777,6 +777,13 @@ export function searchSessions(
   }
 }
 
+export function getHashTags(head: t.SessionHead): string[] {
+  const regexp = /(?:^|\s)(#[a-zA-Z0-9_-]+)(?=$|[^a-zA-Z0-9_-])/g;
+  const titleTagsIt = head.title.matchAll(regexp);
+  const descTagsIt = head.description.matchAll(regexp);
+  return [...titleTagsIt, ...descTagsIt].map(m => m[1]);
+}
+
 // export function limitRecentSessions(sessions: t.SessionUIListing[], limit: number): t.SessionUIListing[] {
 //   let res = [];
 //   let count = 0;

src/view/base.css

@@ -55,6 +55,7 @@ body.vscode-light {
   /* --ranged-track-border-active: #007acc; */
 
   --text-weak: #666;
+  --text-weak-2: #8f8f8f;
   --background-secondary: #e7e7e7;
 
   --editor-track-color: #666;
@@ -93,6 +94,7 @@ body.vscode-dark {
   /* --ranged-track-border-active: #007acc; */
 
   --text-weak: #aaa;
+  --text-weak-2: #939393;
   --background-secondary: #181818;
 
   --editor-track-color: #aaa;
@@ -278,3 +280,7 @@ button {
 .fa-solid {
   line-height: 1.2 !important;
 }
+
+.no-select {
+  user-select: none;
+}

src/view/player.tsx

@@ -230,7 +230,7 @@ export default class Player extends React.Component<Props> {
               {head.isClip && clock === 0 && <ClipBanner />}
               <video id="guide-video" />
             </div>
-            <SessionHead className="subsection subsection_spaced" head={head} withAuthor />
+            <SessionHead className="subsection subsection_spaced" head={head} />
             <SessionDescription
               className="subsection"
               head={head}

src/view/recorder.tsx

@@ -281,7 +281,8 @@ class DetailsView extends React.PureComponent<DetailsViewProps> {
           resize="vertical"
           value={p.description}
           onInput={this.descriptionChanged}
-          placeholder="What is this session about?"
+          // Don't change the placeholder={'...'} to placeholder="" or the new line character won't be interpreted
+          placeholder={'What is this session about?\n\n#C #JavaScript #OpenGL'}
         >
           Description
         </VSCodeTextArea>

src/view/section.css

@@ -62,7 +62,7 @@
         font-size: 0.9rem;
         color: var(--text-weak);
         text-align: center;
-        letter-spacing: 2px;
+        letter-spacing: 1px;
       }
     }
   }

src/view/session_description.css

@@ -28,6 +28,11 @@
   > .body {
     margin-top: var(--spacing-small);
 
+    & p.tags {
+      font-size: 0.8em;
+      color: var(--text-weak);
+    }
+
     & a.expand {
     }
   }

src/view/session_description.tsx

@@ -5,6 +5,7 @@ import { cn } from './misc.js';
 import TextToParagraphs from './text_to_paragraphs.jsx';
 import React, { useState } from 'react';
 import { VSCodeButton } from '@vscode/webview-ui-toolkit/react/index.js';
+import _ from 'lodash';
 
 const EXPAND_THRESHOLD = 300;
 
@@ -24,6 +25,9 @@ export default function SessionDescription(props: Props) {
   const description =
     expandable && !expanded ? head.description.substring(0, EXPAND_THRESHOLD) + '...' : head.description;
 
+  const tags = lib.getHashTags(head);
+  const tagsStr = _.truncate(_.take(tags, 6).join(' '), { length: 60 });
+
   function toggleExpansion(e: React.MouseEvent) {
     e.preventDefault();
     e.stopPropagation();
@@ -58,6 +62,7 @@ export default function SessionDescription(props: Props) {
         </>
       </div>
       <div className="body">
+        <p className="tags">{tagsStr}</p>
         <TextToParagraphs text={description} />
         {expandable && (
           <a className="expand" href="#" onClick={toggleExpansion}>

src/view/session_head.css

@@ -109,6 +109,11 @@
       .title {
         font-weight: bold;
         font-size: 1em;
+
+        .tags {
+          font-size: 0.8em;
+          color: var(--text-weak-2);
+        }
       }
 
       .cover + .title {
@@ -178,10 +183,16 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    width: 100%; /* to allow text-overflow: ellipsis of author/handle */
+    overflow: hidden;
 
     .title {
       font-weight: bold;
-      /* font-size: 1.1em; */
+
+      /* .tags { */
+      /*   font-size: 0.8em; */
+      /*   color: var(--text-weak-2); */
+      /* } */
     }
 
     .description {
@@ -202,6 +213,17 @@
       .footer-item {
         /* white-space: nowrap; */
 
+        &.author {
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+
+          .handle {
+            /* font-size: 0.9em; */
+            /* color: var(--text-weak); */
+          }
+        }
+
         &:first-child {
           /* min-width: 80px; */
           flex: 1;

src/view/session_head.tsx

@@ -14,18 +14,27 @@ import ClipBanner from './clip_banner.jsx';
 export type SessionHeadProps = {
   className?: string;
   head: t.SessionHead;
-  withAuthor?: boolean;
 };
 
-export function SessionHead({ className, withAuthor, head }: SessionHeadProps) {
+export function SessionHead({ className, head }: SessionHeadProps) {
+  // const tags = lib.getHashTags(head);
+  // const tagsStr = _.truncate(_.take(tags, 6).join(' '), { length: 60 });
+
   return (
     <WithAvatar className={cn('session-head', className)} username={head.author}>
-      <div className="title">{head.title || 'Untitled'}</div>
-      {withAuthor && (
-        <div className="footer">
-          <span className="footer-item author">{head.author || 'anonymous'}</span>
-        </div>
-      )}
+      <div className="title">
+        {head.title || 'Untitled'}
+        {/* <span className="tags">{tagsStr}</span>*/}
+      </div>
+      <div className="footer">
+        <span className="footer-item author" title={`@${head.author || 'anonymous'}/${head.handle}`}>
+          {head.author || 'anonymous'}
+          <span className="handle">
+            <span className="no-select"> </span>/<span className="no-select"> </span>
+            {head.handle}
+          </span>
+        </span>
+      </div>
     </WithAvatar>
   );
 }
@@ -82,6 +91,9 @@ export function SessionListing(props: SessionListingProps) {
     },
   ]);
 
+  const tags = lib.getHashTags(head);
+  const tagsStr = _.truncate(_.take(tags, 3).join(' '), { length: 30 });
+
   return (
     <div className={cn('session-listing', props.className)} onClick={() => props.onClick(head.id)} tabIndex={0}>
       <div className="cover-container">
@@ -95,7 +107,9 @@ export function SessionListing(props: SessionListingProps) {
         ) : null}
       </div>
       <WithAvatar username={head.author} className="caption" small>
-        <div className="title">{head.title || 'Untitled'}</div>
+        <div className="title">
+          {head.title || 'Untitled'} <span className="tags">{tagsStr}</span>
+        </div>
         {/*head.description && (
             <div className="description">
               <TextToParagraphs text={head.description} />