12937903925

Committed 23 Jan 2025 08:56PM UTC coverage: 5.504% (-1.4%) from 6.953%

Build # 12937903925

Build Type

push

github

Committed by

web-flow

Commit Message

chore: Migrate to tailwind (#1355)

Coverage Stats

43 of 1647 branches covered (2.61%)

Branch coverage included in aggregate %.

6 of 306 new or added lines in 94 files covered. (1.96%)

94 existing lines in 39 files now uncovered.

192 of 2623 relevant lines covered (7.32%)

0.17 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/app/components/Help/Help.jsx

import { ArrowLeft } from 'lucide-react'
import React from 'react'
import { Trans, withTranslation } from 'react-i18next'
import { Link, withRouter } from 'react-router-dom'

import { Card } from '../ui/card'
import PublicAchievementUnlocker from '../Users/PublicAchievementUnlocker'
import HelpPageContent from './HelpPageContent'

@withTranslation('help')
@withRouter
export default class Help extends React.PureComponent {
  render() {
    const { t, location } = this.props
    const cleanPathName = location.pathname.replace(/\/+$/, '') // Remove trailing slashes
    const subPage = cleanPathName.replace(/^\/help\/?/, '') || null

    let header = ''
    let content = ''
    if (!subPage) {
      header = <h1 className="text-3xl sm:text-5xl font-bold">{t('title')}</h1>
      content = this.renderIndexContent()
    } else {
      header = this.renderPageHeader(subPage)
      content = <HelpPageContent page={subPage} />
    }

    return (
      <div className="help-page">
        <section className="bg-gradient-to-tr py-20 from-primary to-primary/90 text-white">
          <div className="container mx-auto px-4">{header}</div>
        </section>
        <section className="container mx-auto px-4 py-8">{content}</section>
        <PublicAchievementUnlocker achievementId={3} />
      </div>
    )
  }

  renderIndexContent() {
    return (
      <div>
        <div className="mb-8 rounded overflow-hidden shadow-lg bg-white">
          <h4 className="font-bold mb-2 p-4 bg-primary text-white">{this.props.t('aboutTitle')}</h4>
          <p className="p-4">
            {this.props.t('about')}&nbsp;
            <Trans i18nKey="help:toStart">
              toStart
              {this.renderPageLink('contributionGuidelines', null, 'underline')}
              {this.renderPageLink('privileges', null, 'underline')}
              {this.renderPageLink('reputation', null, 'underline')}
            </Trans>
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card className="overflow-hidden rounded-md">
            <div className="bg-gray-100 p-3 font-semibold border-b">
              {this.props.t('categories.siteUsage')}
            </div>
            {this.renderPageMenuEntry('contributionGuidelines')}
            {this.renderPageMenuEntry('privileges')}
            {this.renderPageMenuEntry('reputation')}
            {this.renderPageMenuEntry('moderation')}
            {this.renderPageMenuEntry('achievements')}
            {this.renderPageMenuEntry('extension')}
          </Card>
          <Card className="overflow-hidden rounded-md">
            <div className="bg-gray-100 p-3 font-semibold border-b">
              {this.props.t('categories.contribute')}
            </div>
            {this.renderPageMenuEntry('ambassadors')}
            {this.renderPageMenuEntry('contribute/tasks')}
            {this.renderPageMenuEntry('bug_report')}
          </Card>
          <Card className="overflow-hidden rounded-md">
            <div className="bg-gray-100 p-3 font-semibold border-b">
              {this.props.t('categories.others')}
            </div>
            {this.renderPageMenuEntry('about')}
            {this.renderPageMenuEntry('contact')}
            {this.renderPageMenuEntry('credits')}
            {this.renderPageMenuEntry('privacy')}
          </Card>
        </div>
      </div>
    )
  }

  renderPageMenuEntry(subPage) {
    const label = this.props.t(`pages.${subPage}`, { defaultValue: subPage })
    return this.renderPageLink(
      subPage,
      label,
      'p-3 block hover:bg-gray-50 border-b hover:underline text-black',
    )
  }

  renderPageLink(subPage, label, className) {
    return (
      <Link className={className} to={`/help/${subPage}`}>
        {label || subPage}
      </Link>
    )
  }

  renderPageHeader(subPage) {
    const { t } = this.props
    return (
      <div>
        <h1 className="text-4xl font-bold mb-4">
          {t('title')}: {t(`help:pages.${subPage}`, { defaultValue: 'I am lost 😟' })}
        </h1>
        <Link
          to="/help"
          className="text-lg flex items-center text-gray-100 hover:text-gray-50 hover:underline"
        >
          <ArrowLeft size="1em" />
          <span className="ml-2">{t('goBack')}</span>
        </Link>
      </div>
    )
  }
}

1	import { ArrowLeft } from 'lucide-react'
2	import React from 'react'
3	import { Trans, withTranslation } from 'react-i18next'
4	import { Link, withRouter } from 'react-router-dom'
5
6	import { Card } from '../ui/card'
7	import PublicAchievementUnlocker from '../Users/PublicAchievementUnlocker'
8	import HelpPageContent from './HelpPageContent'
9
10	@withTranslation('help')
11	@withRouter
12	export default class Help extends React.PureComponent {
13	render() {
14	const { t, location } = this.props	×
15	const cleanPathName = location.pathname.replace(/\/+$/, '') // Remove trailing slashes	×
16	const subPage = cleanPathName.replace(/^\/help\/?/, '') \|\| null	×
17
18	let header = ''	×
19	let content = ''	×
20	if (!subPage) {	×
NEW 21	header = <h1 className="text-3xl sm:text-5xl font-bold">{t('title')}</h1>	×
22	content = this.renderIndexContent()	×
23	} else {
24	header = this.renderPageHeader(subPage)	×
25	content = <HelpPageContent page={subPage} />	×
26	}
27
28	return (	×
29	<div className="help-page">
30	<section className="bg-gradient-to-tr py-20 from-primary to-primary/90 text-white">
31	<div className="container mx-auto px-4">{header}</div>
32	</section>
33	<section className="container mx-auto px-4 py-8">{content}</section>
34	<PublicAchievementUnlocker achievementId={3} />
35	</div>
36	)
37	}
38
39	renderIndexContent() {
40	return (	×
41	<div>
42	<div className="mb-8 rounded overflow-hidden shadow-lg bg-white">
43	<h4 className="font-bold mb-2 p-4 bg-primary text-white">{this.props.t('aboutTitle')}</h4>
44	<p className="p-4">
45	{this.props.t('about')}
46	<Trans i18nKey="help:toStart">
47	toStart
48	{this.renderPageLink('contributionGuidelines', null, 'underline')}
49	{this.renderPageLink('privileges', null, 'underline')}
50	{this.renderPageLink('reputation', null, 'underline')}
51	</Trans>
52	</p>
53	</div>
54	<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
55	<Card className="overflow-hidden rounded-md">
56	<div className="bg-gray-100 p-3 font-semibold border-b">
57	{this.props.t('categories.siteUsage')}
58	</div>
59	{this.renderPageMenuEntry('contributionGuidelines')}
60	{this.renderPageMenuEntry('privileges')}
61	{this.renderPageMenuEntry('reputation')}
62	{this.renderPageMenuEntry('moderation')}
63	{this.renderPageMenuEntry('achievements')}
64	{this.renderPageMenuEntry('extension')}
65	</Card>
66	<Card className="overflow-hidden rounded-md">
67	<div className="bg-gray-100 p-3 font-semibold border-b">
68	{this.props.t('categories.contribute')}
69	</div>
70	{this.renderPageMenuEntry('ambassadors')}
71	{this.renderPageMenuEntry('contribute/tasks')}
72	{this.renderPageMenuEntry('bug_report')}
73	</Card>
74	<Card className="overflow-hidden rounded-md">
75	<div className="bg-gray-100 p-3 font-semibold border-b">
76	{this.props.t('categories.others')}
77	</div>
78	{this.renderPageMenuEntry('about')}
79	{this.renderPageMenuEntry('contact')}
80	{this.renderPageMenuEntry('credits')}
81	{this.renderPageMenuEntry('privacy')}
82	</Card>
83	</div>
84	</div>
85	)
86	}
87
88	renderPageMenuEntry(subPage) {
89	const label = this.props.t(`pages.${subPage}`, { defaultValue: subPage })	×
NEW 90	return this.renderPageLink(	×
91	subPage,
92	label,
93	'p-3 block hover:bg-gray-50 border-b hover:underline text-black',
94	)
95	}
96
97	renderPageLink(subPage, label, className) {
NEW 98	return (	×
99	<Link className={className} to={`/help/${subPage}`}>
100	{label \|\| subPage}	×
101	</Link>
102	)
103	}
104
105	renderPageHeader(subPage) {
106	const { t } = this.props	×
107	return (	×
108	<div>
109	<h1 className="text-4xl font-bold mb-4">
110	{t('title')}: {t(`help:pages.${subPage}`, { defaultValue: 'I am lost 😟' })}
111	</h1>
112	<Link
113	to="/help"
114	className="text-lg flex items-center text-gray-100 hover:text-gray-50 hover:underline"
115	>
116	<ArrowLeft size="1em" />
117	<span className="ml-2">{t('goBack')}</span>
118	</Link>
119	</div>
120	)
121	}
122	}

CaptainFact / captain-fact-frontend / 12937903925

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous