<script setup lang="ts">

import { breakpointsTailwind } from '@vueuse/core'

import ReferenceIcon from '~/components/icons/ReferenceIcon.vue'

import PluginIcon from '~/components/icons/PluginIcon.vue'

import ArrowIcon from '~/components/icons/ArrowIcon.vue'

import GridIcon from '~/components/icons/GridIcon.vue'

import LightBulbIcon from '~/components/icons/LightBulbIcon.vue'

import BookIcon from '~/components/icons/BookIcon.vue'

import { computed } from 'vue'

const { t, localePath } = useI18n()

const cardLinks = computed(() => [

{

path: 'https://labex.io/learn/python',

name: t('home.cardLinks.pythonCourse'),

description: t('home.cardLinks.pythonCourseDesc'),

icon: BookIcon,

external: true,

},

{

path: 'https://labex.io/labs/python-use-vs-code-for-python-development-585783?course=python-cheatsheet',

name: t('home.cardLinks.pythonPlayground'),

description: t('home.cardLinks.pythonPlaygroundDesc'),

icon: LightBulbIcon,

external: true,

},

{

path: 'https://github.com/labex-labs/python-cheatsheet',

name: t('home.cardLinks.viewOnGithub'),

description: t('home.cardLinks.viewOnGithubDesc'),

icon: ArrowIcon,

external: true,

},

{

path: localePath('/blog'),

name: t('home.cardLinks.blog'),

description: t('home.cardLinks.blogDesc'),

icon: ReferenceIcon,

},

{

path: localePath('/contributing'),

name: t('home.cardLinks.contribute'),

description: t('home.cardLinks.contributeDesc'),

icon: PluginIcon,

},

{

path: localePath('/changelog'),

name: t('home.cardLinks.changelog'),

description: t('home.cardLinks.changelogDesc'),

icon: GridIcon,

external: false,

},

])

const isDark = useDark()

const { description } = useMeta()

const breakpoints = useBreakpoints(breakpointsTailwind)

const smAndLarger = breakpoints.greater('sm')

</script>

<template>

<article>

<prose>

<div class="flex justify-center sm:hidden">

<img

class="h-20 w-auto"

:src="

isDark

? 'https://cdn.jsdelivr.net/gh/labex-labs/files@master/images/labex-logo-light.svg'

: 'https://cdn.jsdelivr.net/gh/labex-labs/files@master/images/labex-logo-dark.svg'

"

alt="python-cheatsheet"

/>

</div>

<base-title

v-if="smAndLarger"

id="python-cheatsheet"

:title="t('home.title')"

:description="description"

>

{{ t('home.title') }}

</base-title>

<h1

v-else

class="mb-2 bg-gradient-to-r from-secondary-400 to-green-400 bg-clip-text text-center font-display text-4xl font-medium tracking-tight text-transparent dark:from-primary-400 dark:via-teal-300 dark:to-orange-300"

>

{{ t('home.title') }}

</h1>

</prose>

<prose>

<base-disclaimer>

<base-disclaimer-title>

{{ t('home.disclaimer.title') }}

</base-disclaimer-title>

<base-disclaimer-content>

<p>{{ t('home.disclaimer.content') }}</p>

</base-disclaimer-content>

</base-disclaimer>

</prose>

<prose>

<p>

{{ t('home.anyoneCanForget') }}

<router-link

:to="

localePath(

'/cheatsheet/regular-expressions#making-your-own-character-classes',

)

"

>

{{ t('home.makeCharacterClasses') }}

</router-link>

{{ t('home.forRegex') }}

<router-link

:to="

localePath(

'/cheatsheet/lists-and-tuples#getting-sublists-with-slices',

)

"

>

{{ t('home.sliceAList') }}

</router-link>

{{ t('home.orDoA') }}

<router-link :to="localePath('/cheatsheet/control-flow#for-loop')">

{{ t('home.forLoop') }}

</router-link>

. {{ t('home.description') }}

<a

href="https://github.com/labex-labs/python-cheatsheet/blob/master/contributors/contributors.json"

target="_blank"

rel="noopener noreferrer"

>

{{ t('home.contributors') }}

</a>

{{ t('home.onGithub') }}

</p>

</prose>

<div className="not-prose my-8 grid grid-cols-1 gap-6 sm:grid-cols-2">

<base-link-card

v-for="link in cardLinks"

:key="link.path"

:title="link.name"

:description="link.description"

:path="link.path"

:icon="link.icon"

:is-external="link.external"

/>

</div>

</article>

</template>