Is there an existing issue that is already proposing this?

• [X] I have searched the existing issues.

Is your feature request related to a problem? Please describe it.

Currently when you switch to mobile view, you have to scroll horizontally to be able to post a tweet. Take a look :arrow_down: :

| | | |-------------------------------------------------------------------------------------------------------------------- |---------------------------------------------------------------------------------------------------------------------- | | | |

Describe the solution you'd like.

It would be nice if we hide the sidebar and show a horizontal navbar at the top with an icon to open the sidebar And perhaps add the logo and what not :sweat_smile:

Teachability, documentation, adoption, migration strategy.

No response

What is the motivation / use case for changing the behavior?

I think it can facilitate posting tweets and improve user experince

Describe your changes

Issue ticket number and link

fixes #31

##Description Added a mobile nav component and updated the existing the desktop nav , dynamically importing the component according to the screen size. Updated the desktop nav ui to look inline with the mobile nav ui.

##Screenshot

Desktop nav close :

Desktop nav open:

Mobile nav close:

Mobile nav open:

Checklist before requesting a review

• [x] I have performed a self-review of my code

Is there an existing issue for this?

• [X] I have searched the existing issues

Current behavior

I want to make a commit to a fork of the repo and get an error message (for more details see full log message below)

✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
npm ERR! canceled

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/gitpod/.npm/_logs/2022-09-22T16_24_21_143Z-debug-0.log
husky - commit-msg hook exited with code 1 (error)

Steps to reproduce

1. Change some text in hacking.md
2. stage changes
3. add a commit w/ message: git commit -m "docs(hacking): add note to get Twitter API credentials"
4. error (see logs below)

Expected behavior

I can make a commit to a branch

Shoutify app version

0.1.0

Node.js version

v16.17.0

In which operating systems have you tested?

• [X] macOS
• [ ] Windows
• [X] Linux

Other

This is the log content from using it inside GitPod. Same message appears locally using Node LTS.

0 verbose cli /home/gitpod/.nvm/versions/node/v16.17.0/bin/node /home/gitpod/.nvm/versions/node/v16.17.0/lib/node_modules/npm/bin/npm-cli.js
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 2ms
5 timing config:load:file:/home/gitpod/.nvm/versions/node/v16.17.0/lib/node_modules/npm/npmrc Completed in 0ms
6 timing config:load:builtin Completed in 1ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:/workspace/Shoutify/.npmrc Completed in 1ms
10 timing config:load:project Completed in 4ms
11 timing config:load:file:/home/gitpod/.npmrc Completed in 0ms
12 timing config:load:user Completed in 0ms
13 timing config:load:file:/home/gitpod/.nvm/versions/node/v16.17.0/etc/npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 1ms
16 timing config:load:credentials Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 11ms
19 timing npm:load:configload Completed in 11ms
20 timing npm:load:mkdirpcache Completed in 3ms
21 timing npm:load:mkdirplogs Completed in 0ms
22 verbose title npm exec commitlint --edit .git/COMMIT_EDITMSG
23 verbose argv "exec" "--no-yes" "--" "commitlint" "--edit" ".git/COMMIT_EDITMSG"
24 timing npm:load:setTitle Completed in 1ms
25 timing config:load:flatten Completed in 3ms
26 timing npm:load:display Completed in 4ms
27 verbose logfile logs-max:10 dir:/home/gitpod/.npm/_logs
28 verbose logfile /home/gitpod/.npm/_logs/2022-09-22T16_24_21_143Z-debug-0.log
29 timing npm:load:logFile Completed in 5ms
30 timing npm:load:timers Completed in 0ms
31 timing npm:load:configScope Completed in 0ms
32 timing npm:load Completed in 25ms
33 silly logfile done cleaning log files
34 timing arborist:ctor Completed in 1ms
35 verbose shrinkwrap failed to load node_modules/.package-lock.json out of date, updated: node_modules
36 http fetch GET 200 https://registry.npmjs.org/commitlint 102ms (cache revalidated)
37 timing arborist:ctor Completed in 0ms
38 timing command:exec Completed in 1707ms
39 verbose stack Error: canceled
39 verbose stack     at exec (/home/gitpod/.nvm/versions/node/v16.17.0/lib/node_modules/npm/node_modules/libnpmexec/lib/index.js:177:17)
39 verbose stack     at async module.exports (/home/gitpod/.nvm/versions/node/v16.17.0/lib/node_modules/npm/lib/cli.js:78:5)
40 verbose cwd /workspace/Shoutify
41 verbose Linux 5.15.0-47-generic
42 verbose node v16.17.0
43 verbose npm  v8.15.0
44 error canceled
45 verbose exit 1
46 timing npm Completed in 1789ms
47 verbose code 1
48 error A complete log of this run can be found in:
48 error     /home/gitpod/.npm/_logs/2022-09-22T16_24_21_143Z-debug-0.log

Is there an existing issue for this?

• [X] I have searched the existing issues

Current behavior

It is currently possible to log in via Twitter and obtain a valid session by authenticating at this URL: http://localhost:3000/api/auth/signin.

There is a provided set of functions from NextAuth signIn/signOut

Within the current home page navigation, is a Sign in and Sign Out button which will show respectively depending on the truthiness of your session:

https://github.com/TechSquidTV/Shoutify/blob/main/src/pages/index.tsx#L60

https://github.com/TechSquidTV/Shoutify/blob/997a2ed3af583b8838a1a6ed1748264c9ae1b5ea/src/pages/index.tsx#L60-L74

However, currently, the onClick functions which should trigger the signIn and signOut functions to not appear to be working. There are no errors in server logs or browser console.

Steps to reproduce

1. (Configure your dev environment)[https://github.com/TechSquidTV/Shoutify#development]
2. Visit the server at http://localhost:3000/

If you have not yet signed in, you will see this:

If you do have a session, you will see this:

Attempt to click either of the Sign In or Sign Out buttons, and you should see no change in the page.

Expected behavior

According to the NextAuth signIn docs, the user should be redirected to an authentication flow.

Shoutify app version

No response

Node.js version

No response

In which operating systems have you tested?

• [ ] macOS
• [ ] Windows
• [X] Linux

Other

No response

This PR cover the following points:

• closed the menu if the screen size is less than md:768px
• handle the navbar extension to the full height of the screen Fixes #24

Is there an existing issue that is already proposing this?

• [X] I have searched the existing issues.

Is your feature request related to a problem? Please describe it.

Add a MIT License

Describe the solution you'd like.

Add MIT license

Teachability, documentation, adoption, migration strategy.

No response

What is the motivation / use case for changing the behavior?

No response

Is there an existing issue that is already proposing this?

• [X] I have searched the existing issues.

Is your feature request related to a problem? Please describe it.

Put Gitpod to allow people to contribute online

Describe the solution you'd like.

Add gitpod link

Teachability, documentation, adoption, migration strategy.

No response

What is the motivation / use case for changing the behavior?

No response

Hello! When I was trying to find the Contributing Guidelines for the project, I was unable to find them. It will be better if you change the directory of the file.

An example of how the Contributing file would be easy to navigate,

Along with that, I recommend linking guidelines and the license towards the end of the ReadMe file so it becomes easier for people on phones and computers as well to navigate easily!

Is there an existing issue for this?

• [X] I have searched the existing issues

Current behavior

Steps to reproduce

use chrome dev tools to show different devices and screen sizes.

Expected behavior

1. Ensure the nav bar extends the full length of the page
2. When small enough, the menu should no longer expand and should stay in the closed state. This functionality can easily be added now with the latest PR change: https://github.com/TechSquidTV/Shoutify/pull/23/files

Shoutify app version

No response

Node.js version

No response

In which operating systems have you tested?

• [ ] macOS
• [X] Windows
• [X] Linux

Other

The nav component can be found here: https://github.com/TechSquidTV/Shoutify/blob/main/src/components/nav/AppNav.tsx The nav is loaded as part of the page layout: https://github.com/TechSquidTV/Shoutify/blob/main/src/layouts/AppLayout.tsx

• I suspect the layout isn't full-height.

Is there an existing issue that is already proposing this?

• [X] I have searched the existing issues.

Is your feature request related to a problem? Please describe it.

No response

Describe the solution you'd like.

A Docker image would be great for simple installation.

Teachability, documentation, adoption, migration strategy.

N/A

What is the motivation / use case for changing the behavior?

Make it easier to install.

Is there an existing issue that is already proposing this?

• [X] I have searched the existing issues.

Is your feature request related to a problem? Please describe it.

Hi! Creator and maintainer of ct3a here. Really cool project, would love if we could add it to T3 collection.

Describe the solution you'd like.

Feel free to make a PR to our repo.

Teachability, documentation, adoption, migration strategy.

No response

What is the motivation / use case for changing the behavior?

No response

Component Type

Other

Component Location

separate repo? / Wiki? / .github

What is the component's purpose?

Create a simple design system to serve as a reference for developers, designers, and all contributors when creating new components for Shoutify. A design system should increase consistency in the application and provide clarity when creating new assets.

It may also serve as a basis for CSS utility styles in the app.

The actual end-product could be as simple as a markdown file within this repo (and I suggest we start this way) located at .github/DESIGN_SYSTEM.md, or a separate repository, using a framework such as BookStack to host the content.

Current Style Examples

• Rounded Corners
  • rounded-md tailwind
  • Applies to "cards", buttons, modals. Is never applied to items that make up the main layout of the page
• Spacing 4
  • mx-4 and my-4 are the default margin for spacing components
• Colors
  • gray: colors.zinc
    • Background - 900
    • Panel - 800
    • Button Active - 700
  • blue:
    • Primary Button - 600
    • Primary Button Hover - 400

References

• https://material.io/design/introduction
• https://www.lightningdesignsystem.com/guidelines/overview/

Component Type

Full Page

Component Location

src/pages/app/events.tsx

What is the component's purpose?

The Events Page will be for creating and sharing multiple types of events across multiple social media channels. Examples of events might be; A Twitter space, YouTube live stream, Twitch Live Stream, or another scheduled live event.

It looks like on most systems, creating a scheduled event via API may not be possible. So the design may need to optimize for taking in the link from the scheduled service, as created manually, and then creating the social content around sharing that link

Ideas

• When creating an event, a drop-down could indicate the type of event to create with options such as:
  • Twitter Space
  • YouTube Live Stream
  • URL
• A title and date/time will be needed for scheduling the event

UX Consideration:

• What is the best way to take an event that will be scheduled and turn it into a scheduled or queued post?
  • The user may want to post about the event multiple times before it goes live
  • On Twitter at least, it is common to post a thread where the first tweet talks about the Twitter Space, and maybe has an image, and the second tweet in the thread actually has link to the post

Component Type

Full Page

Component Location

src/pages/app/queue.tsx

What is the component's purpose?

The queue page will allow users to view all currently scheduled content. There are two ways that content can be scheduled: either it is directly scheduled to be posted at a specific time, or it is added to a queue that posts X times per day.

General Page Requirements:

• View all scheduled content in a timeline fashion
  • Accommodate showing time-scheduled posts, perhaps in their own view.
• Allow for editing content
  • Scheudle queued content
  • Move scheduled content to queue
  • Edit post content
  • "Move to top of the queue"

Queue Config

• Users need a way to automatically manage and post on an automated basis.
  • We need a solution that is simple but gives control.
  • Possible Options:
    • Select X times per day
    • Select Specific times for each day of the week

More?

Any other features we may need for this page? Or other considerations for designs?

Is there an existing issue that is already proposing this?

• [X] I have searched the existing issues.

Is your feature request related to a problem? Please describe it.

Storybook resolves two potential issues for this project

1. Preview components during development
2. Live-host storybook to share components with non-developer contributors, such as ui/ux designers.

Describe the solution you'd like.

Implement StoryBook

BLOCKER At this time, the latest version of StoryBook introduces 21 high-severity vulnerabilities. The vulnerabilities do not appear to be automatically solvable.

glob-parent  <5.1.2
Severity: high
glob-parent before 5.1.2 vulnerable to Regular Expression Denial of Service in enclosure regex - https://github.com/advisories/GHSA-ww39-953v-wcq6
fix available via `npm audit fix --force`
Will install @storybook/[email protected], which is a breaking change
node_modules/cpy/node_modules/glob-parent
node_modules/watchpack-chokidar2/node_modules/glob-parent
  chokidar  1.0.0-rc1 - 2.1.8
  Depends on vulnerable versions of glob-parent
  node_modules/watchpack-chokidar2/node_modules/chokidar
    watchpack-chokidar2  *
    Depends on vulnerable versions of chokidar
    node_modules/watchpack-chokidar2
      watchpack  1.7.2 - 1.7.5
      Depends on vulnerable versions of watchpack-chokidar2
      node_modules/@storybook/builder-webpack4/node_modules/watchpack
      node_modules/@storybook/core-common/node_modules/watchpack
      node_modules/@storybook/core-server/node_modules/webpack/node_modules/watchpack
      node_modules/@storybook/manager-webpack4/node_modules/watchpack
        webpack  4.44.0 - 4.46.0
        Depends on vulnerable versions of watchpack
        node_modules/@storybook/builder-webpack4/node_modules/webpack
        node_modules/@storybook/core-common/node_modules/webpack
        node_modules/@storybook/core-server/node_modules/webpack
        node_modules/@storybook/manager-webpack4/node_modules/webpack
  fast-glob  <=2.2.7
  Depends on vulnerable versions of glob-parent
  node_modules/cpy/node_modules/fast-glob
    globby  8.0.0 - 9.2.0
    Depends on vulnerable versions of fast-glob
    node_modules/cpy/node_modules/globby
      cpy  7.0.0 - 8.1.2
      Depends on vulnerable versions of globby
      node_modules/cpy
        @storybook/core-server  <=7.0.0-alpha.6
        Depends on vulnerable versions of @storybook/csf-tools
        Depends on vulnerable versions of cpy
        node_modules/@storybook/core-server
          @storybook/core  >=6.2.0-alpha.0
          Depends on vulnerable versions of @storybook/core-server
          node_modules/@storybook/core
            @storybook/react  6.2.0-alpha.0 - 6.5.11-alpha.2
            Depends on vulnerable versions of @storybook/core
            node_modules/@storybook/react

trim  <0.0.3
Severity: high
Regular Expression Denial of Service in trim - https://github.com/advisories/GHSA-w5p7-h5w8-2hfq
fix available via `npm audit fix --force`
Will install @storybook/[email protected], which is a breaking change
node_modules/trim
  remark-parse  <=8.0.3
  Depends on vulnerable versions of trim
  node_modules/remark-parse
    @mdx-js/mdx  <=1.6.22
    Depends on vulnerable versions of remark-mdx
    Depends on vulnerable versions of remark-parse
    node_modules/@mdx-js/mdx
      @storybook/mdx1-csf  *
      Depends on vulnerable versions of @mdx-js/mdx
      node_modules/@storybook/mdx1-csf
        @storybook/addon-docs  >=6.5.0-alpha.1
        Depends on vulnerable versions of @storybook/mdx1-csf
        node_modules/@storybook/addon-docs
          @storybook/addon-essentials  >=6.5.0-alpha.1
          Depends on vulnerable versions of @storybook/addon-docs
          node_modules/@storybook/addon-essentials
        @storybook/csf-tools  6.5.0-alpha.1 - 6.5.11-alpha.2
        Depends on vulnerable versions of @storybook/mdx1-csf
        node_modules/@storybook/csf-tools
    remark-mdx  <=1.6.22
    Depends on vulnerable versions of remark-parse
    node_modules/remark-mdx

trim-newlines  <3.0.1
Severity: high
Uncontrolled Resource Consumption in trim-newlines - https://github.com/advisories/GHSA-7p7h-4mm5-852v
fix available via `npm audit fix`
node_modules/trim-newlines
  meow  3.4.0 - 5.0.0
  Depends on vulnerable versions of trim-newlines
  node_modules/meow

21 high severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Teachability, documentation, adoption, migration strategy.

npm run storybook

What is the motivation / use case for changing the behavior?

--

When a user authors one or multiple posts (thread), they will have multiple possible options for actions to take. Users can schedule and post content in one of the following ways:

• Post immediately
• Add to queue (Auto schedule)
• Schedule and add to queue

The Composer component needs to be redesigned to accommodate the multiple possible posting actions, and better integrate thread posts.

1. Post Button

Marked here as circle 1, the post button as it is, now assumes that you will be posting to the scheduled time, indicated by the date-time component, labeled in circle 2.

My immediate thought is to create a button with a "default" value, such as "Post" for posting immediately, and have a built-in drop-down menu for the other possible posting options. And maybe, we would save the last option a user selected for the default status of the button?

Here is an example of the type of button component I am thinking might resolve this issue: https://tailwindui.com/components/application-ui/elements/dropdowns

Probably something more like this, where there is "two" buttons, one for the action, and one for the drop down.

Is this intuitive enough?

2. Date-Time Schedule

Marked in circle 2, is the scheduled time for when to post. Right now, this is automatically set to the current time, clicking on the calendar will bring up a native calendar and time input for a future date.

One request we have seen a few times already, some users would like to add items to their queue, but not worry about scheduling the post. Instead, users would like the ability to build up a backlog of queue items that automatically post X times per day.

If we do not need the date/time for items added to the queue, where should this date-time component live? Should it always be visible? Would it disable if the queue option is selected?

3. Create Thread button

Finally, the third circle shows how a user can click a button to turn a single post into a thread. This design can likely be improved and does not yet consider what multiple composers would look like on the screen. We likely do not want the "post" button on each post when dealing with threads.

How should we redesign the thread button? Does the post button need to move outside of the composer because of this?